/* Estilos del microsite público del evento (extraídos de evento_base.html
   para que se cacheen como estático hasheado: antes viajaban ~27 KB de CSS
   inline en CADA página del funnel de inscripción). Las variables :root
   (color del organizador) siguen inline en la plantilla. */
*{box-sizing:border-box}
/* Que el scroll a un campo enfocado no quede tapado por las barras fijas. */
html{scroll-padding:70px 0 100px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;
  font-size:13px;line-height:1.55;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
h1,h2,h3{font-family:"Inter Tight",Inter,system-ui,sans-serif;margin:0}
h1{font-size:clamp(22px,3vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
h2{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
.lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.s12{font-size:12px}.s13{font-size:13px}.s14{font-size:14px}
.muted{color:var(--muted)}

/* ---- Cabecera del evento (negro verdoso) ---- */
.topbar{background:var(--negro);border-bottom:1px solid #1e2a24;position:sticky;top:0;z-index:30}
.topbar-in{max-width:1080px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px}
.volver{font-size:12px;color:#7d928a;white-space:nowrap;padding:8px 0;display:inline-block}
.volver:hover{color:var(--verde-neon)}
.tb-nombre{flex:1;min-width:0}
.tb-nombre .n{font-family:"Inter Tight";font-weight:700;font-size:15px;letter-spacing:-.01em;
  color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-nombre .f{font-size:12px;color:#7d928a}
.idioma{font-size:12px;color:#7d928a;display:flex;gap:2px}
.idioma a{padding:8px 6px}
.idioma a.on{font-weight:700;color:var(--verde-neon)}
/* Botón principal: color del evento SÓLIDO (sin degradar al verde de la
   plataforma), con tinta de contraste garantizado y sombra tintada. */
.cta{background:var(--brand-btn);color:var(--brand-ink);font-weight:600;
  font-size:13px;padding:9px 16px;border-radius:10px;border:0;cursor:pointer;white-space:nowrap;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 25%,transparent),0 4px 14px color-mix(in srgb,var(--brand) 28%,transparent);
  transition:transform .1s,box-shadow .15s}
.cta:hover{transform:translateY(-1px);box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 35%,transparent),0 6px 20px color-mix(in srgb,var(--brand) 40%,transparent)}
.cta.sec{background:#fff;color:var(--ink);border:1px solid #d7dfda;box-shadow:none}
.cta.sec:hover{border-color:var(--brand);transform:none;box-shadow:none}

/* ---- Pestañas (sobre negro) ---- */
.tabs{background:var(--negro-2);border-bottom:1px solid #1e2a24}
.tabs-in{max-width:1080px;margin:0 auto;padding:0 20px;display:flex;gap:4px;overflow-x:auto}
.tabs a{padding:12px 14px;font-size:13px;font-weight:500;color:#8fa39a;
  border-bottom:2px solid transparent;white-space:nowrap}
.tabs a:hover{color:#fff}
.tabs a.on{color:#fff;font-weight:600;border-bottom-color:var(--verde-neon)}

/* Móvil: la barra superior deja de ser fija (libera pantalla), el nombre
   del evento sale del header (ya está en la página) y las pestañas quedan
   pegadas arriba con un degradado que insinúa que se pueden deslizar. */
@media(max-width:640px){
  .topbar{position:static}
  .topbar-in{flex-wrap:wrap;gap:8px 12px;padding:10px 14px}
  .tb-nombre{display:none}
  .volver{order:1;font-size:13px}
  .idioma{order:2;margin-left:auto;font-size:14px;gap:10px}
  .topbar-in .cta{order:3;flex:1 0 100%;text-align:center;padding:12px 16px;font-size:15px}
  .tabs{position:sticky;top:0;z-index:30}
  .tabs::after{content:"";position:absolute;right:0;top:0;bottom:1px;width:34px;
    background:linear-gradient(to left,var(--negro-2),transparent);pointer-events:none}
  .tabs-in{padding:0 12px}
  .tabs a{padding:13px 12px;font-size:14px}
}

main{max-width:1080px;margin:0 auto;padding:24px 20px 56px}

/* ---- Tarjetas y rejillas ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--sombra)}
.grid2c{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
@media(max-width:900px){.grid2c{grid-template-columns:1fr}}

/* ---- Hero con cartel DIN vertical (patrón Add On: 200px | resto) ---- */
.hero-ms{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start;margin-bottom:22px}
.hero-ms.sin-cartel{grid-template-columns:1fr}
.hero-ms .cartel{width:100%;height:auto;display:block;border-radius:10px;
  border:1px solid var(--line);box-shadow:0 1px 3px rgba(10,15,13,.14)}
@media(max-width:900px){.hero-ms{grid-template-columns:160px 1fr;gap:18px}}
@media(max-width:560px){.hero-ms{grid-template-columns:1fr}
  .hero-ms .cartel{max-width:240px;margin:0 auto}}

/* ---- Datos clave ---- */
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.dato .v{font-size:14px;font-weight:600;margin-top:2px}

/* ---- Cuenta atrás (negro + dígitos verdes) ---- */
.cuenta{display:flex;gap:10px;align-items:center}
.cuenta .c{background:var(--negro);border:1px solid #1e2a24;color:#fff;border-radius:10px;
  min-width:52px;padding:8px 6px;text-align:center}
.cuenta .c b{display:block;font-family:"Inter Tight";font-size:18px;font-weight:800;
  line-height:1;color:var(--verde-neon)}
.cuenta .c span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#7d928a}

/* ---- Cuotas ---- */
.cuota{display:flex;justify-content:space-between;align-items:center;gap:14px;
  border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:#fff;margin-bottom:10px;
  transition:border-color .12s,box-shadow .12s}
.cuota:hover{border-color:var(--brand);box-shadow:var(--sombra)}
.cuota .nom{font-weight:600;font-size:14px}
.cuota .det{font-size:11px;color:var(--muted);margin-top:2px}
/* La descripción de la cuota sale completa (reporte 56): el texto se queda con
   el ancho que dejan precio y botón, y en móvil la tarjeta se apila. */
.cuota>div:first-child{flex:1 1 auto;min-width:0}
.cuota>div:last-child{flex:0 0 auto}
@media(max-width:640px){
  .cuota{flex-wrap:wrap}
  .cuota>div:first-child{flex-basis:100%}
  .cuota>div:last-child{width:100%;justify-content:space-between}
  .cuota .det{font-size:12px}
}
.precio{font-family:"Inter Tight";font-weight:700;font-size:18px;white-space:nowrap}
.precio s{color:var(--muted);font-weight:500;font-size:12px;margin-right:6px}
.chip{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:#eef4f0;color:var(--soft)}
/* uxA-23: chips con contraste AA (antes .ok 3,7:1 y .full 4,4:1 a 10 px) */
.chip.ok{background:#ecfdf3;color:#067647}
.chip.full{background:#fef3f2;color:#b42318}
.chip.fuego{background:#fef3c7;color:#92400e}

/* ---- Botones de cuota ---- */
.btn-ins{background:var(--brand-btn);color:var(--brand-ink);font-weight:600;
  font-size:12px;padding:8px 14px;border-radius:10px;border:0;cursor:pointer;white-space:nowrap;
  transition:transform .1s,box-shadow .15s}
.btn-ins:hover{transform:translateY(-1px);box-shadow:0 4px 14px color-mix(in srgb,var(--brand) 35%,transparent)}
.btn-ins.gris{background:#fff;color:var(--soft);border:1px solid #d7dfda;box-shadow:none}
/* Móvil: mínimo táctil de 44px para el botón de cada cuota. */
@media(max-width:640px){.btn-ins{min-height:44px;font-size:14px;padding:10px 16px}}

/* ---- Footer (negro) ---- */
footer{border-top:1px solid #1e2a24;background:var(--negro);margin-top:40px}
.foot-in{max-width:1080px;margin:0 auto;padding:20px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;align-items:center;font-size:12px;color:#7d928a}
.foot-in b{color:var(--verde-neon)}

/* ---- Formularios (dos columnas etiqueta | campo) ---- */
input,select,textarea{font:inherit;color:var(--ink)}
.fsec{font-family:"Inter Tight";font-weight:600;font-size:17px;letter-spacing:-.02em;
  text-align:center;margin:18px 0 8px}
.frow{display:grid;grid-template-columns:270px 1fr;gap:4px 14px;align-items:start;padding:3px 0}
.frow>label,.frow>.flabel{text-align:right;font-weight:600;font-size:12px;padding-top:6px}
.frow .req{color:var(--err);font-weight:700}
.fctl input[type=text],.fctl input[type=email],.fctl input[type=tel],.fctl input[type=number],
.fctl input[type=password],.fctl input[type=date],.fctl input[type=time],.fctl input[type=file],
.fctl input[type=search],.fctl input[type=url],.fctl select,.fctl textarea{
  width:100%;max-width:380px;padding:5px 8px;border:1px solid #d7dfda;border-radius:7px;font-size:12px}
.fctl input:focus,.fctl select:focus,.fctl textarea:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent)}
.fctl .inline{display:flex;gap:6px;flex-wrap:wrap}
.fctl .inline select,.fctl .inline input{width:auto;min-width:100px;flex:1}
.fctl.fechas select{width:auto;min-width:78px;margin-right:5px;display:inline-block}
.fctl div label{font-weight:400;display:flex;align-items:center;gap:6px;padding:1px 0;font-size:12px}
.fctl input[type=radio]{width:auto}
/* Ayuda de la pregunta: legible sin competir con la etiqueta (gris apagado y
   peso normal). 10px se leía con lupa; 12px es el mínimo cómodo. */
.fhelp{color:var(--muted);font-size:12px;margin-top:3px;line-height:1.45;max-width:52ch}
/* Selección múltiple compacta: desplegable con casillas dentro */
.multidesp{max-width:380px}
.multidesp summary{list-style:none;cursor:pointer;border:1px solid #d7dfda;border-radius:7px;
  padding:5px 8px;font-size:12px;color:var(--soft);background:#fff;position:relative}
.multidesp summary::-webkit-details-marker{display:none}
.multidesp summary:after{content:"▾";position:absolute;right:9px;color:var(--muted)}
.multidesp[open] summary{border-color:var(--brand)}
.multidesp>div{border:1px solid #d7dfda;border-top:0;border-radius:0 0 7px 7px;
  padding:6px 10px;max-height:180px;overflow-y:auto;background:#fff}
.ferr{color:var(--err);font-size:11px;font-weight:600;margin-top:2px}
.fpie{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.fnotas{text-align:right;color:var(--muted);font-size:12px;margin-top:6px;line-height:1.5}
@media(max-width:640px){
  .frow{grid-template-columns:1fr}.frow>label,.frow>.flabel{text-align:left;padding-top:0;font-size:14px}
  /* Móvil: 16px evita el zoom automático de iOS y 44px es el mínimo táctil. */
  .fctl input[type=text],.fctl input[type=email],.fctl input[type=tel],.fctl input[type=number],
  .fctl input[type=password],.fctl input[type=date],.fctl input[type=time],.fctl input[type=file],
  .fctl input[type=search],.fctl input[type=url],.fctl select,.fctl textarea,.multidesp summary{
    font-size:16px;min-height:44px;padding:9px 12px;max-width:none}
  .fctl.fechas select{min-width:30%}
  .fctl div label{font-size:15px;padding:8px 0;gap:10px;min-height:44px;align-items:center}
  .fctl input[type=radio],.fctl input[type=checkbox]{width:22px;height:22px;accent-color:var(--brand)}
  /* .fb2 también: su regla de escritorio (12px) es más específica y ganaba. */
  .fhelp,.fb2 .fhelp{font-size:13px}.ferr{font-size:13px}
  .fpie .cta,.fpie .btn{min-height:46px;font-size:15px}
  .multidesp{max-width:none}
  /* Revisión: botones a lo ancho, «Pagar» arriba (column-reverse) para el pulgar. */
  .revacc{flex-direction:column-reverse}
  .revacc .cta{width:100%;min-height:48px;display:flex;align-items:center;
    justify-content:center;font-size:16px;box-sizing:border-box}
}

/* ---- Compatibilidad con vistas existentes ---- */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--brand-btn);color:var(--brand-ink);
  font-weight:600;font-size:13px;padding:9px 16px;border-radius:10px;border:0;cursor:pointer}
.btn:hover{filter:brightness(.92)}
.btn.accent{background:var(--brand-btn)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid #d7dfda}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.eyebrow{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.price{font-family:"Inter Tight";font-weight:700;font-size:18px}
.msg{padding:10px 14px;border-radius:8px;margin-bottom:12px;font-size:13px;font-weight:500}
.msg.success{background:#ecfdf3;color:var(--ok);border:1px solid #abefc6}
.msg.error{background:#fef3f2;color:var(--err);border:1px solid #fecdca}
.msg.info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}
.msg.warning{background:#fffbeb;color:#92600a;border:1px solid #fde68a}
.crumb{font-size:12px;color:var(--muted);margin-bottom:12px}
.crumb a{color:var(--muted)}
.bib{background:#fff;border:3px solid var(--ink);border-radius:10px;padding:10px 18px;
  text-align:center;display:inline-block}
.bib .lbl{margin-bottom:2px}
.bib .num{font-family:"Inter Tight";font-weight:800;font-size:40px;line-height:1}
.dorsal{font-family:"Inter Tight";font-weight:800;font-size:28px;color:var(--brand)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}

/* ==== Ficha del evento rediseñada («G2»: hero panorámico + cartel-objeto +
   regleta de datos). Solo actúa dentro de .fdet. ==== */
.fdet .hero{position:relative;color:#fff;border-radius:var(--r);overflow:hidden;
  padding:26px 24px 30px;background:linear-gradient(160deg,#0c1410,#12281c 55%,#0b0f0d)}
.fdet .hero .arte{position:absolute;inset:0;
  background:radial-gradient(90% 130% at 78% -20%, rgba(74,222,128,.22), transparent 55%)}
/* «Luz ambiente»: el resplandor difuminado del PROPIO cartel detrás del
   cartel-objeto (solo escritorio; el móvil va limpio, elección del usuario). */
.fdet .hero .glow{position:absolute;right:-50px;top:-70px;width:430px;height:540px;
  background-size:cover;background-position:center;filter:blur(70px) saturate(1.4);
  opacity:.45;pointer-events:none}
.fdet .hero>.dentro{position:relative;display:grid;grid-template-columns:1fr;
  gap:16px 26px;align-items:center}
.fdet .hero>.dentro.con-cartel{grid-template-columns:1fr 210px}
.fdet .dentro .texto{grid-column:1}
.fdet .cartel-enlace{grid-column:2;grid-row:1 / span 2;justify-self:end}
.fdet .hero .fechaE{font-size:12px;font-weight:800;letter-spacing:.09em;
  color:var(--verde-neon);text-transform:uppercase}
.fdet .hero h1{font-size:clamp(21px,2.6vw,30px);color:#fff;text-transform:uppercase;
  margin:8px 0 4px;max-width:34ch;text-wrap:balance}
.fdet .hero .sub{color:#b7cabe;font-size:13.5px;margin-bottom:10px}
.fdet .dist{display:flex;gap:7px;flex-wrap:wrap}
.fdet .dist b{border:1px solid #2c4033;border-radius:99px;padding:4px 12px;font-size:11px;
  font-weight:700;color:#cfe6d4;background:rgba(19,26,22,.6);max-width:200px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fdet .hero .botones{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.fdet .hero .cta{padding:13px 28px;font-size:14px}
.fdet .cta-gh{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;
  padding:10px 18px;font-weight:600;font-size:13px;background:rgba(255,255,255,.08);
  color:#cfe6d4;border:1px solid #2c4033;white-space:nowrap}
/* El reloj vive dentro de la columna de texto (bajo las distancias). */
.fdet .reloj{margin-top:14px}
.fdet .reloj .lbl{color:var(--verde-neon);margin-bottom:6px}
.fdet .reloj .c{background:rgba(19,26,22,.72);border-color:#2c4033;min-width:54px}
/* Cartel-objeto: recto y sin marco en escritorio (su aura lo arropa). */
.fdet .cartelobj{width:210px;border-radius:10px;display:block;
  box-shadow:0 24px 50px rgba(0,0,0,.6)}
.fdet .regleta{position:relative;margin:-16px 18px 0;display:flex;background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 12px 30px rgba(4,12,8,.14)}
.fdet .regleta .s{flex:1;padding:12px 16px;border-right:1px solid #eef1ef;min-width:0}
.fdet .regleta .s:last-child{border-right:0}
.fdet .regleta .s b{display:block;font-size:13.5px;margin-top:1px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fdet .cuerpo{display:grid;grid-template-columns:1fr 300px;gap:20px;margin-top:22px;align-items:start}
.fdet .cuota{border-radius:14px;margin-bottom:10px}
.fdet .lado .card{margin-bottom:14px}
.fdet .fila-d{margin-bottom:10px}
.fdet .fila-d b{display:block;font-size:13.5px;margin-top:1px;font-weight:600}
@media(max-width:900px){
  .fdet .cuerpo{grid-template-columns:1fr}
  /* Móvil «M3»: el cartel INCLINADO asoma por la derecha, sin aura; el
     texto ocupa la columna izquierda y el botón cruza a lo ancho después. */
  .fdet .hero .glow{display:none}
  .fdet .hero>.dentro,.fdet .hero>.dentro.con-cartel{display:block;position:relative}
  .fdet .dentro.con-cartel .texto{max-width:56%;min-height:252px}
  .fdet .cartel-enlace{position:absolute;top:0;right:-46px;transform:rotate(6deg)}
  .fdet .cartelobj{width:170px;box-shadow:0 16px 36px rgba(0,0,0,.5)}
  .fdet .reloj .c{min-width:46px}
  .fdet .reloj .cuenta{gap:6px}
  .fdet .hero .botones{width:100%;margin-top:14px}
  .fdet .hero .botones .cta{flex:1;text-align:center}
  .fdet .regleta{margin:-14px 10px 0;display:grid;grid-template-columns:1fr 1fr}
  .fdet .regleta .s{border-bottom:1px solid #eef1ef}
  .fdet .regleta .s:nth-child(2n){border-right:0}
  .fdet .regleta .s:nth-last-child(-n+2){border-bottom:0}
}

/* ==== Formulario de inscripción rediseñado (piel «B2»). Solo actúa dentro
   de .fb2: cabecera oscura del evento, tarjetas por sección con estado,
   etiquetas dentro del campo, radios como chips y total siempre a mano. ==== */
.fb2 .fhero{background:var(--negro);color:#fff;border-radius:var(--r);padding:18px 20px 16px;margin-bottom:18px}
.fb2 .fhero .ev{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--verde-neon);font-weight:700}
.fb2 .fhero .ev a{color:inherit}
.fb2 .fhero h2{margin:4px 0 0;font-size:20px;color:#fff;line-height:1.15}
.fb2 .fhero .l2{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:8px}
.fb2 .fhero .cu{font-size:12px;color:#8ea89a}
.fb2 .fhero .pr{font-family:"Inter Tight";font-size:21px;font-weight:800;color:var(--verde-neon);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fb2 .fhero .pr s{color:#8ea89a;font-weight:500;font-size:13px;margin-right:6px}
.fb2 .fprog{display:flex;gap:6px;margin-top:13px}
.fb2 .fprog i{flex:1;height:4px;border-radius:99px;background:#243029}
.fb2 .fprog i.on{background:var(--verde-neon)}
.fb2 .fprog-t{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:#8ea89a;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600}

/* La página del formulario usa más lienzo que el resto (1240px) y el
   formulario ocupa todo el ancho disponible junto al resumen. */
main:has(.fb2){max-width:1240px}
.fb2 .fgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
@media(max-width:900px){.fb2 .fgrid{grid-template-columns:1fr}}
.fb2 .fcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.fb2 .fcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;
  box-shadow:0 1px 2px rgba(19,26,22,.05);display:flex;flex-direction:column;gap:11px}
.fb2 .fcard-t{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.fb2 .fcard-t .n{width:26px;height:26px;flex:0 0 auto;border-radius:99px;background:color-mix(in srgb,var(--brand) 12%,#fff);
  color:var(--brand);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.fb2 .fcard-t h4{margin:0;font-size:14.5px;font-weight:700}
.fb2 .fcard > .fsec{display:none}  /* el título de sección del partial lo sustituye la tarjeta */

/* Fila: etiqueta FUERA del campo, a la izquierda en escritorio (columna
   ancha de 260px para preguntas largas, alineada a la derecha y pegada a
   su campo) y encima en móvil. La respuesta se acota a 420px. */
.fb2 .frow{display:grid;grid-template-columns:260px minmax(0,1fr);gap:6px 16px;
  align-items:center;padding:6px 0;border:0;background:transparent}
/* Preguntas de SELECCIÓN (chips de radios/casillas y desplegable múltiple):
   el título va ARRIBA a lo ancho y las respuestas debajo, para que se vea
   que le pertenecen; y con un poco más de aire entre preguntas (petición
   del organizador). El consentimiento (checkbox suelto) no entra aquí. */
.fb2 .frow:has(.fctl>div input[type=radio]),
.fb2 .frow:has(.fctl>div input[type=checkbox]),
.fb2 .frow:has(.fctl .multidesp){
  grid-template-columns:1fr;gap:2px;padding:10px 0;align-items:start}
.fb2 .frow:has(.fctl>div input[type=radio])>label,.fb2 .frow:has(.fctl>div input[type=radio])>.flabel,
.fb2 .frow:has(.fctl>div input[type=checkbox])>label,.fb2 .frow:has(.fctl>div input[type=checkbox])>.flabel,
.fb2 .frow:has(.fctl .multidesp)>label,.fb2 .frow:has(.fctl .multidesp)>.flabel{
  text-align:left;font-size:14px}
.fb2 .frow>label,.fb2 .frow>.flabel{text-align:right;font-size:13px;font-weight:600;color:var(--ink);
  padding:0;line-height:1.3}
/* Pregunta con imagen de apoyo (p. ej. la guía de tallas bajo el desplegable):
   sin esto, la etiqueta se centra contra el bloque entero campo+imagen y queda
   descolgada. Se ancla arriba, a la altura del texto del desplegable. Solo en
   escritorio: en móvil (≤900px) la etiqueta ya va encima del campo. */
@media(min-width:901px){
  .fb2 .frow:has(.fctl img):has(.fctl>select),
  .fb2 .frow:has(.fctl img):has(.fctl>input){align-items:start}
  .fb2 .frow:has(.fctl img):has(.fctl>select)>label,
  .fb2 .frow:has(.fctl img):has(.fctl>input)>label{padding-top:16px}
}
.fb2 .frow .req{color:var(--err);font-weight:700}
.fb2 .fctl input[type=text],.fb2 .fctl input[type=email],.fb2 .fctl input[type=tel],
.fb2 .fctl input[type=number],.fb2 .fctl input[type=password],.fb2 .fctl input[type=date],
.fb2 .fctl input[type=time],.fb2 .fctl input[type=file],.fb2 .fctl input[type=search],
.fb2 .fctl input[type=url],.fb2 .fctl textarea{
  width:100%;max-width:420px;border:1.5px solid #d7dfda;border-radius:12px;min-height:50px;
  padding:8px 14px;font-size:15px;background:#fff;transition:border-color .12s,box-shadow .12s}
.fb2 .fctl textarea{min-height:84px}
.fb2 .fctl select{border:1.5px solid #d7dfda;border-radius:12px;min-height:50px;
  padding:8px 10px;font-size:15px;background:#fff;max-width:420px;
  transition:border-color .12s,box-shadow .12s}
.fb2 .fctl input:focus,.fb2 .fctl select:focus,.fb2 .fctl textarea:focus{outline:0;
  border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.fb2 .frow:has(.ferr) .fctl input,.fb2 .frow:has(.ferr) .fctl select{border-color:var(--err)}
/* Importe libre que no cuenta en el total (vacío/no numérico/negativo). */
.fb2 .frow.imp-mal .fctl input{border-color:var(--err)}
.fb2 .fctl.fechas select{width:auto;min-width:86px;margin-right:6px;display:inline-block}
/* Documento (tipo + número): mismo ancho máximo que el resto de campos, y el
   número estira dentro del grupo (antes el grupo sobresalía a la derecha). */
.fb2 .fctl .inline{display:flex;gap:8px;max-width:420px}
.fb2 .fctl .inline input{flex:1;min-width:0}
.fb2 .fctl .inline select{flex:0 0 auto}
.fb2 .fctl .inline select{width:auto;flex:0 1 auto;min-width:120px}
.fb2 .fctl .inline input{flex:1}
.fb2 .fhelp{font-size:12px}
/* Radios y casillas del constructor -> chips */
.fb2 .fctl>div:not(.multidesp):has(input[type=radio]),
.fb2 .fctl>div:not(.multidesp):has(input[type=checkbox]){
  display:flex;flex-wrap:wrap;gap:8px;margin-top:5px}
.fb2 .fctl>div label:has(input[type=radio]),.fb2 .fctl>div label:has(input[type=checkbox]){
  border:1.5px solid #d7dfda;border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;
  color:var(--soft);cursor:pointer;display:inline-flex;gap:0;transition:all .12s}
/* .on lo mantiene un JS mínimo: garantiza el repintado también en motores
   antiguos que no re-evalúan :has() al cambiar el estado. */
.fb2 .fctl>div label:has(input:checked),.fb2 .fctl>div label.on{
  border-color:var(--brand-btn);background:var(--brand-btn);color:var(--brand-ink)}
/* Foco de teclado visible en los chips (el input real está oculto). */
.fb2 .fctl>div label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
/* El envoltorio semántico del grupo de radios no altera la maquetación. */
.fb2 .fctl>div[role=radiogroup]{display:contents}
.fb2 .fctl div[role=radiogroup]>div:has(input[type=radio]){
  display:flex;flex-wrap:wrap;gap:8px;margin-top:5px}
.fb2 .fctl>div label input[type=radio],.fb2 .fctl>div label input[type=checkbox]{
  position:absolute;opacity:0;width:0;height:0}
/* Consentimiento (checkbox suelto): casilla + texto en una línea, a lo ancho */
.fb2 .frow:has(>.fctl>input[type=checkbox]){display:flex;flex-direction:row;
  align-items:center;gap:10px}
.fb2 .frow:has(>.fctl>input[type=checkbox])>label{order:2;text-align:left;font-size:13px;
  font-weight:500;line-height:1.4}
.fb2 .frow>.fctl>input[type=checkbox]{width:22px;height:22px;accent-color:var(--brand);margin:0}

/* Resumen lateral (escritorio) y barra fija (móvil) */
.fb2 .fresumen{position:sticky;top:76px;background:var(--negro);color:#e8efe9;border-radius:16px;
  padding:16px;display:flex;flex-direction:column;gap:10px}
.fb2 .fresumen .tt{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--verde-neon)}
.fb2 .fresumen .rl{display:flex;justify-content:space-between;font-size:13px;gap:10px}
.fb2 .fresumen .rl b{font-variant-numeric:tabular-nums;color:var(--verde-neon)}
.fb2 .fresumen .nota{font-size:11px;color:#7d928a;line-height:1.5}
.fb2 .btn-pagar{background:var(--brand-btn);color:var(--brand-ink);border:0;border-radius:10px;min-height:50px;
  font:inherit;font-weight:800;font-size:15px;cursor:pointer;width:100%;
  display:flex;align-items:center;justify-content:center;gap:6px}
.fb2 .btn-pagar:hover{filter:brightness(1.06)}
.fb2 .fbar{display:none}
@media(max-width:900px){
  .fb2 .fresumen{display:none}
  .fb2 .fbar{display:flex;position:sticky;bottom:0;z-index:20;background:var(--negro);
    margin:16px -20px -56px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    align-items:center;gap:14px}
  .fb2 .fbar .tot{line-height:1.15;color:#8ea89a;white-space:nowrap}
  .fb2 .fbar .tot i{display:block;font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
  .fb2 .fbar .tot b{font-size:19px;color:var(--verde-neon);font-variant-numeric:tabular-nums}
  .fb2 .fbar .btn-pagar{flex:1}
  .fb2 .fhero{border-radius:12px;padding:15px 16px 14px}
  /* Móvil: la etiqueta pasa a estar ENCIMA del campo (no cabe a la izquierda). */
  .fb2 .frow{grid-template-columns:1fr;gap:5px}
  .fb2 .frow>label,.fb2 .frow>.flabel{text-align:left;font-size:14px}
  /* 16px evita el zoom automático de iOS; 44px+ es el mínimo táctil. */
  .fb2 .fctl input[type=text],.fb2 .fctl input[type=email],.fb2 .fctl input[type=tel],
  .fb2 .fctl input[type=number],.fb2 .fctl input[type=date],.fb2 .fctl input[type=time],
  .fb2 .fctl input[type=file],.fb2 .fctl input[type=search],.fb2 .fctl input[type=url],
  .fb2 .fctl textarea{font-size:16px}
  .fb2 .fctl select{font-size:16px}
  .fb2 .fctl>div label:has(input[type=radio]),.fb2 .fctl>div label:has(input[type=checkbox]){
    padding:10px 18px;font-size:14.5px;min-height:auto}
}

.flash{max-width:1080px;margin:12px auto 0;padding:0 20px}
.flash>div{padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500;margin-bottom:6px}
.flash .success{background:#ecfdf3;color:var(--ok);border:1px solid #abefc6}
.flash .error{background:#fef3f2;color:var(--err);border:1px solid #fecdca}
.flash .info{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff}
/* Cesta: en móvil los dos botones de la revisión se apilan con «Pagar» arriba. */
@media(max-width:640px){
  .revacc>div{flex-direction:column-reverse;width:100%}
  .revacc>div .cta{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center}
}


/* ==== Revisión global 2026-09-10 (W2-publico) ==== */
/* Texto solo para lectores de pantalla (uxA-13). */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* uxA-04: tablas anchas con scroll propio (el pedido de la cesta tiene 6 columnas). */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.solo-movil{display:none}
@media(max-width:640px){
  .solo-escritorio{display:none}
  .solo-movil{display:block}
  .ped-tarjeta{border-top:1px solid var(--line);padding:12px 0}
  .ped-tarjeta:first-child{border-top:0}
}
/* uxA-27: la clase .sm de los botones del portal (antes no existía). */
.btn.sm{padding:6px 12px;font-size:12px}
/* uxA-12: objetivos táctiles de 44 px en móvil para botones y controles. */
@media(max-width:640px){
  .btn,.btn.sm,.cta,.cta-gh,.volver,.idioma a,.fev .cta-f,.tool .filtros a,.tool button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .fb2 .acepto input[type=checkbox]{width:22px;height:22px}
}
.fb2 .acepto input[type=checkbox]{width:20px;height:20px;accent-color:var(--brand);flex:0 0 auto}
.cesta-quitar{border:0;background:none;color:#b91c1c;cursor:pointer;font-size:14px;padding:10px;margin:-10px -6px -10px -4px;
  min-width:44px;min-height:44px;line-height:1}
/* uxA-19: el cartel reserva su proporción DIN (sin salto de layout al cargar). */
.fdet .cartelobj{aspect-ratio:1/1.414;height:auto;object-fit:cover}
/* uxA-23: el guion «sin importe» del historial, legible (antes 2,1:1). */
.historial .sin-importe{color:#6b7770}

/* Página de una sola columna con la piel del formulario (.fb2 sin resumen
   lateral): la lista de espera. La columna se centra y no se estira a los
   1240 px de la inscripción, y en móvil el botón ocupa todo el ancho. */
.fb2.fsolo .fcol{max-width:680px;margin:0 auto}
@media(max-width:640px){
  .fb2.fsolo .fpie .cta{width:100%}
}