/* Tema Cines 2026 — hoja de estilos unica.
   Sin framework, sin compilacion: lo que se lee aqui es lo que llega al navegador. */

/* Paleta de la marca Cines Florida (kit de cartelera del propio cine:
   navy #091924, oro #bc8f1e, papel #f6f4ed, rojo #a9362f, azul #1c5c96).
   Los tonos se aclaran lo justo para que contrasten sobre fondo oscuro. */
:root{
  --bg:#061420; --surface:#0A1F2C; --surface-2:#0F2634; --surface-3:#163345;
  --ink:#F6F4ED; --ink-2:#A7B5BF; --ink-3:#798894;
  --line:#1A3344; --line-2:#28485D;
  --brand:#C9A033; --brand-ink:#091924; --brand-soft:#2A2411;  /* oro */
  --gold:#C9A033; --gold-soft:#2A2411;
  --alerta:#E2685C; --alerta-soft:#331713;                      /* últimas entradas */
  --vo:#6BA3DC; --vo-ink:#071A29;                               /* versión / idioma */
  --sold:#6E6963; --sold-soft:#13222C;
  --radius:4px;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{max-width:1360px;margin:0 auto;padding-inline:16px}

/* ---------- cabecera ---------- */
.top{background:var(--surface);border-bottom:1px solid var(--line)}
/* Cabecera con el logotipo centrado (como Sade). Las tres columnas son
   1fr | auto | 1fr, asi el logo queda centrado de verdad respecto a la pagina
   y no respecto a lo que ocupe el menu, que cambia de ancho segun el idioma. */
.top__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:18px}
.brand{grid-column:2;justify-self:center;display:flex;align-items:center;text-decoration:none}
.brand img{height:72px;width:auto;display:block}
.top__in .sitenav{grid-column:1;justify-self:start}
.top__in .lang{grid-column:3;justify-self:end}
.top__in .top__widgets{grid-column:1 / -1;justify-self:center}

@media (max-width:900px){
  /* Sin sitio para las tres columnas: el logo se queda centrado y el menu baja. */
  .top__in{grid-template-columns:1fr auto;row-gap:14px;padding-block:14px}
  .brand{grid-column:1 / -1;justify-self:center}
  .brand img{height:58px}
  .top__in .sitenav{grid-column:1;justify-self:center}
  .top__in .lang{grid-column:2;justify-self:end;align-self:start}
}
.sitenav{display:flex;gap:18px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sitenav a{text-decoration:none;padding-block:4px;border-bottom:2px solid transparent}
.sitenav a[aria-current]{border-color:var(--brand);color:var(--ink);font-weight:600}
.sitenav a:hover{color:var(--ink)}
.lang{display:flex;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden}
.lang a{display:block;padding:5px 10px;font-size:12px;letter-spacing:.08em;color:var(--ink-3);
        text-decoration:none;transition:background .12s,color .12s}
.lang a:hover{color:var(--ink)}
.lang a[aria-current]{background:var(--brand);color:var(--brand-ink);font-weight:700}
.lang a:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}

/* ---------- tira de sesiones especiales (bajo la cartelera) ---------- */
.especiales{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.especiales__hd{display:flex;align-items:baseline;gap:12px;padding-top:20px;flex-wrap:wrap}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0}
.especiales__hd p{margin:0;font-size:12.5px;color:var(--ink-3)}
.rail{display:flex;gap:12px;overflow-x:auto;padding-block:12px 18px;scroll-snap-type:x proximity}
.esp{flex:0 0 310px;max-width:86vw;scroll-snap-align:start;display:flex;gap:12px;background:var(--surface);
     border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius);padding:11px}
.esp img{width:56px;height:84px;object-fit:cover;border-radius:2px;flex:none;background:var(--line)}
.esp__txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.esp h3{margin:0;font-size:14px;font-weight:700;line-height:1.2;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.esp h3 button{background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit}
.esp h3 button:hover{color:var(--brand)}
.esp time{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.esp .btn{margin-top:auto;align-self:flex-start;padding:5px 11px;font-size:12px}

/* ---------- promociones ---------- */
.promos__in{padding-block:22px 26px}
.promos__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:12px;margin-top:12px}
.promo{display:flex;flex-direction:column;gap:4px;padding:14px 15px;text-decoration:none;
       background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
       transition:border-color .14s,background .14s}
.promo:hover,.promo:focus-visible{border-color:var(--brand);background:var(--surface-2)}
.promo:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.promo b{font-size:15px;font-weight:700;line-height:1.2}
.promo span{font-size:12.5px;color:var(--ink-3);line-height:1.35}
.promo em{font-style:normal;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--brand)}

/* ---------- financiación y patrocinadores ---------- */
.finan{background:var(--ink);color:#2A3138}        /* los logos oficiales piden fondo claro */
.finan__in{padding-block:18px;display:flex;align-items:center;gap:22px 30px;flex-wrap:wrap}
.finan p{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#5F6568}
.finan ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.finan img{height:40px;width:auto;display:block}

/* ---------- barra de filtros ---------- */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);
     border-bottom:1px solid var(--line);box-shadow:0 10px 24px -20px #000}
.days{display:flex;gap:6px;overflow-x:auto;padding-block:10px}
.day{flex:none;text-decoration:none;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--radius);
     padding:6px 12px;cursor:pointer;text-align:center;min-width:78px;line-height:1.2;color:var(--ink)}
.day b{display:block;font-size:13px;font-weight:700}
.day span{display:block;font-size:11px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.day[aria-current]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.day[aria-current] span{color:inherit;opacity:.78}
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-bottom:12px}
.seg{display:flex;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden}
.seg button{background:var(--surface);border:0;border-right:1px solid var(--line-2);padding:6px 11px;
            font-size:12.5px;cursor:pointer;color:var(--ink-2);white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--brand-soft);color:var(--ink);font-weight:700}
.search{flex:1 1 180px;max-width:280px;position:relative}
.search input{width:100%;padding:7px 10px;border:1px solid var(--line-2);border-radius:var(--radius);
              background:var(--surface-2);color:var(--ink);font-size:13.5px}
.count{font-size:12.5px;color:var(--ink-3);margin-left:auto;white-space:nowrap}

/* ---------- rejilla: anatomía fija, todo alineado ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
      gap:28px 18px;padding-block:26px 44px;align-items:start;
      margin-inline:auto}   /* cuando la rejilla no ocupa todo el ancho, va centrada */
.card{display:grid;grid-template-rows:auto auto auto auto;gap:9px;min-width:0}
.poster{position:relative;display:block;border:0;padding:0;background:var(--surface-3);
        border-radius:3px;overflow:hidden;cursor:pointer;aspect-ratio:2/3;width:100%}
.poster img{width:100%;height:100%;object-fit:cover;display:block;max-width:100%}
.poster:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.tags{position:absolute;left:6px;top:6px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;
     border-radius:2px;background:rgba(6,10,9,.82);color:#fff}
.tag--eus{background:var(--vo);color:var(--vo-ink)}
.tag--edad{background:rgba(255,255,255,.92);color:#16100A}
/* título: siempre dos líneas de alto, para que las horas arranquen a la misma altura */
.card h3{margin:0;font-size:15px;font-weight:700;line-height:1.22;height:2.44em;overflow:hidden}
.card h3 button{background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit;
                display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card h3 button:hover{color:var(--brand)}
.meta{margin:0;font-size:12px;color:var(--ink-3);line-height:1.35;height:1.35em;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta i{font-style:normal}
.meta i+i::before{content:"·";margin-inline:5px;color:var(--line-2)}
.horas{display:flex;flex-wrap:wrap;gap:5px}
.hora{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;
      border:1px solid var(--line-2);border-radius:var(--radius);padding:4px 9px 3px;
      background:var(--surface-2);transition:background .12s,border-color .12s,color .12s}
.hora b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.hora em{font-style:normal;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.hora:hover{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.hora:hover em{color:inherit;opacity:.85}
.hora:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.hora--pocas{border-color:var(--alerta);background:var(--alerta-soft)}
.hora--pocas em{color:var(--alerta);font-weight:700}
.hora--agotada{background:var(--sold-soft);border-color:var(--sold-soft);color:var(--sold);cursor:not-allowed}
.hora--agotada em{color:var(--sold)}
/* La version (VOSE, EUS...) comparte linea con la sala para no crecer a lo alto:
   si un chip fuera mas alto que otro, las tarjetas de la fila se desalinearian. */
.hora .ver{font-style:normal;font-weight:700;color:var(--brand);letter-spacing:.06em}
.hora:hover .ver{color:inherit}
.hora--agotada .ver{color:var(--sold)}
.empty{grid-column:1/-1;padding:52px 0;text-align:center;color:var(--ink-3);
       font-family:"Newsreader",Georgia,serif;font-size:17px}

/* ---------- ficha ---------- */
dialog{border:0;padding:0;background:transparent;max-width:min(760px,94vw);width:100%;color:var(--ink)}
dialog::backdrop{background:rgba(4,7,6,.74)}
.sheet__wrap{position:relative}
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:auto;max-height:86vh}

/* tráiler: carátula con botón; el reproductor solo se carga al pulsar */
.trailer{position:relative;aspect-ratio:16/9;width:100%;max-width:100%;background:var(--surface-3);
         border-radius:var(--radius);overflow:hidden}
.trailer iframe{width:100%;height:100%;border:0;display:block}
.trailer__play{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;
               justify-content:center;gap:10px;background:
               radial-gradient(circle at 50% 50%, rgba(201,160,51,.16), transparent 62%), var(--surface-3);
               border:0;cursor:pointer;font-size:15px;font-weight:700;letter-spacing:.03em;color:var(--ink)}
.trailer__play:hover{background:
  radial-gradient(circle at 50% 50%, rgba(201,160,51,.28), transparent 62%), var(--surface-3)}
.trailer__play:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
.trailer__play span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
                    background:var(--brand);color:var(--brand-ink);font-size:19px;padding-left:4px}
.trailer-alt{margin:6px 0 0;font-size:12px;color:var(--ink-3)}
.trailer-alt a{color:var(--brand)}
.sheet__hd{display:flex;gap:18px;padding:20px;border-bottom:1px solid var(--line);align-items:flex-start}
.sheet__hd img{width:104px;height:156px;object-fit:cover;border-radius:3px;flex:none;background:var(--surface-3)}
.sheet__hd h2{margin:0 0 6px;font-size:23px;font-weight:800;line-height:1.1;text-wrap:balance;padding-right:76px}
.sheet__bd{padding:20px;display:flex;flex-direction:column;gap:18px}
.sheet .meta{height:auto;white-space:normal}
.sheet p.sinopsis{font-family:"Newsreader",Georgia,serif;font-size:17px;line-height:1.55;margin:0;
                  color:var(--ink-2);max-width:62ch}
.sheet h4{margin:0 0 7px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.diafila{display:flex;gap:12px;align-items:baseline;padding-block:9px;border-top:1px solid var(--line);flex-wrap:wrap}
.diafila>span{flex:0 0 124px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.btn{display:inline-block;text-decoration:none;background:var(--brand);color:var(--brand-ink);font-weight:700;
     font-size:13px;letter-spacing:.03em;padding:9px 16px;border-radius:var(--radius);border:0;cursor:pointer}
.btn--ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-2);font-weight:600}
.btn:focus-visible,.day:focus-visible,.seg button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.sheet__cls{position:absolute;right:12px;top:12px}

/* ---------- pie ---------- */
.foot{border-top:1px solid var(--line);background:var(--surface);color:var(--ink-3);font-size:12.5px}
.foot__in{padding-block:22px;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
.foot b{color:var(--ink-2)}

@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr);gap:22px 12px}
  .sheet__hd img{width:78px;height:117px}
  .sheet__hd h2{padding-right:0;font-size:19px}
  .top__in .sitenav{grid-column:1 / -1;justify-self:stretch;overflow-x:auto;
                    justify-content:center;gap:14px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- anadidos propios del tema (no estaban en la maqueta) ---------- */

/* Salto al contenido: solo aparece al tabular, para quien navega con teclado */
.saltar{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);color:var(--brand-ink);
        padding:10px 16px;font-weight:700;border-radius:0 0 var(--radius) 0}
.saltar:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
                 clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Titulo del dia: lo necesita Google y los lectores de pantalla.
   Visualmente no hace falta, porque las pestanas ya lo dicen. */
.titulo-dia{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
            clip:rect(0 0 0 0);white-space:nowrap}

.count{display:block;padding-top:14px;margin:0}

/* Aviso de que los datos pueden venir de la copia de respaldo */
.aviso{margin:16px 0 0;padding:10px 14px;border-left:3px solid var(--alerta);
       background:var(--alerta-soft);color:var(--ink);font-size:13.5px;border-radius:var(--radius)}

/* Menus de WordPress */
.sitenav__lista{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.sitenav__lista a{text-decoration:none;padding-block:4px;border-bottom:2px solid transparent;display:block}
.sitenav__lista .current-menu-item a{border-color:var(--brand);color:var(--ink);font-weight:600}

/* Widgets: el tema define las areas, el contenido lo pone cada cine */
.widget{margin-bottom:18px}
.widget__titulo{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
                font-weight:700;margin:0 0 8px}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;
            padding-bottom:18px}
.foot__legal{margin:0}
.foot__nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.foot__nav a{text-decoration:none}
.foot__nav a:hover{color:var(--brand)}

/* Contenido de las paginas antiguas (Elementor y editor clasico) */
.pagina{padding-block:32px 48px}
.pagina h1{font-size:clamp(24px,3.4vw,34px);line-height:1.12;margin:0 0 18px;text-wrap:balance}
.pagina p,.pagina li{font-family:"Newsreader",Georgia,serif;font-size:17px;line-height:1.6;color:var(--ink-2)}
.pagina a{color:var(--brand)}
.pagina img{height:auto;border-radius:var(--radius)}

/* ---------- cartelera con columna lateral ---------- */

/* Por debajo de 1040 px la columna se va debajo: en movil manda la cartelera. */
.cartelera{display:grid;grid-template-columns:minmax(0,1fr);gap:0 28px;align-items:start}
@media (min-width:1040px){
  .cartelera{grid-template-columns:minmax(0,1fr) 300px}
}

.lateral{display:flex;flex-direction:column;gap:14px;padding-block:26px 44px}
@media (max-width:1039px){
  .lateral{flex-direction:row;flex-wrap:wrap;padding-top:0}
  .lateral>*{flex:1 1 260px}
}

.lat-cta{display:block;text-decoration:none;background:var(--surface);
         border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
         transition:border-color .14s,background .14s}
.lat-cta:hover,.lat-cta:focus-visible{border-color:var(--brand);background:var(--surface-2)}
.lat-cta:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.lat-cta img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;max-width:100%}
.lat-cta__txt{display:flex;flex-direction:column;gap:4px;padding:14px 15px}
.lat-cta b{font-size:15px;font-weight:700;line-height:1.2}
.lat-cta__txt span{font-size:12.5px;color:var(--ink-3);line-height:1.35}
.lat-cta em{font-style:normal;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--brand)}

/* Lo que se meta por widgets hereda el mismo marco, para que no desentone */
.lateral__widgets .widget{margin:0 0 14px;background:var(--surface);border:1px solid var(--line);
                          border-radius:var(--radius);padding:14px 15px}
.lateral__widgets .widget:last-child{margin-bottom:0}
.lateral__widgets img{border-radius:3px;height:auto}
.lateral__widgets a{color:var(--brand)}

/* ---------- formulario de solicitud de sala ---------- */

.pagina--estrecha{max-width:720px;margin-inline:auto}
.entradilla{font-family:"Newsreader",Georgia,serif;font-size:18px;line-height:1.5;color:var(--ink-2);max-width:60ch}

.formulario{margin-top:26px}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.campo{margin:0;display:flex;flex-direction:column;gap:6px}
.campo--ancho{grid-column:1/-1}
.campo label{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.campo .req{color:var(--alerta)}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:15px;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:10px 12px;width:100%}
.campo textarea{resize:vertical;min-height:110px;line-height:1.5}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:3px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.campo [aria-invalid="true"]{border-color:var(--alerta)}
.campo .error{font-size:12.5px;color:var(--alerta);font-weight:600}

.campo--acepto label{display:flex;align-items:flex-start;gap:9px;font-weight:400;
                     font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.campo--acepto input{width:auto;margin-top:2px;flex:none}
.campo--acepto a{color:var(--brand)}

.formulario__pie{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.formulario__pie .btn{font-size:15px;padding:12px 22px}

/* La trampa para robots: invisible, pero sin display:none, que algunos lo detectan */
.miel{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.aviso--ok{border-left-color:var(--brand);background:var(--brand-soft)}
.aviso--ok h1{margin:0 0 8px;font-size:22px}
.aviso--ok p{margin:0 0 8px}

/* Bloques del formulario: agrupan para que no parezca un muro de campos */
.bloque{border:0;margin:0 0 26px;padding:0}
.bloque legend{padding:0;margin-bottom:14px;font-size:11px;font-weight:700;
               letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.opcional{display:block;font-weight:400;font-size:12px;color:var(--ink-3);letter-spacing:0}

/* Sin esto, el display:flex de .campo gana al atributo hidden y el campo se ve */
.campo[hidden]{display:none}
.campo--precio{margin-top:16px;max-width:260px}

/* Datos fiscales plegados: estan, pero no asustan */
.plegable{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);
          background:var(--surface);padding:0 15px}
.plegable summary{cursor:pointer;padding:12px 0;font-size:13px;font-weight:600;
                  letter-spacing:.02em;color:var(--ink-2);list-style:none}
.plegable summary::-webkit-details-marker{display:none}
.plegable summary::before{content:"+ ";color:var(--brand);font-weight:700}
.plegable[open] summary::before{content:"\2013 "}
.plegable summary:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.plegable .campos{padding-bottom:16px}

/* Opciones: la etiqueta entera es la zona de pulsado, tambien en el movil */
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.opcion{display:flex;align-items:flex-start;gap:10px;cursor:pointer;
        background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);
        padding:12px 14px;transition:border-color .12s,background .12s}
.opcion:hover{border-color:var(--brand)}
.opcion input{flex:none;margin-top:2px;accent-color:var(--brand)}
.opcion input:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.opcion span{display:flex;flex-direction:column;gap:3px}
.opcion b{font-size:14px;font-weight:600;color:var(--ink)}
.opcion i{font-style:normal;font-size:12.5px;line-height:1.35;color:var(--ink-3)}
.opcion:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.opcion--coste i strong{color:var(--brand);font-weight:700}

/**
 * Alineacion de los campos que llevan texto de ayuda bajo la etiqueta.
 * El problema: una etiqueta de dos lineas empuja su campo hacia abajo y queda
 * descolgado del de al lado.
 *
 * Con subgrid, la fila de etiquetas mide lo mismo para toda la fila, asi que
 * todos los campos empiezan a la misma altura aunque solo uno tenga ayuda.
 * Sin subgrid (navegadores viejos), se reserva el hueco de la segunda linea
 * en todas las etiquetas: ocupa un poco mas, pero nada queda descolgado.
 */
.campo > label{min-height:2.6em}
.campo--acepto > label{min-height:0}

@supports (grid-template-rows: subgrid){
  .campo > label{min-height:0}
  .campos > .campo{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:6px}
}