/* ---------------------------------------------------------------
   La Feria de los Moles 2026 — landing de expositores
   Paleta muestreada del arte de la feria. Un solo tema a propósito:
   es un cartel de feria; invertirlo a modo oscuro rompería la
   identidad. Todo se pinta explícitamente.
   ---------------------------------------------------------------- */
:root{
  --magenta:#C22D59;        /* 4.60:1 con crema, 5.15:1 como texto sobre marfil */
  --magenta-hondo:#A32449;
  --amarillo:#FAE61E;
  --amarillo-claro:#FDF07A;  /* 4.70:1 sobre magenta: negritas en texto corrido */
  --limon:#8CBE1E;
  --turquesa:#3BB8C3;
  --crema:#F2EADA;
  --crema-hondo:#E6DCC6;
  /* neutros sesgados al vino del arte, no grises puros */
  --vino:#3A0A19;
  --vino-medio:#5E2033;
  --tinta:#2B0812;

  --paso:clamp(1rem,.6rem + 2vw,1.75rem);
  --tope:1180px;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--crema);
  color:var(--vino);
  font-family:Karla,ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(1rem,.95rem + .2vw,1.075rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* height:auto es obligatorio: sin él, los atributos width/height del
   HTML fijan la altura y la imagen se estira al encoger el ancho. */
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}

.tejido{position:relative;isolation:isolate}
.tejido::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 2px,transparent 2px 5px);
  mix-blend-mode:multiply;opacity:.8;
}
.tejido > *{position:relative;z-index:1}

.franja{padding-block:clamp(3.25rem,2rem + 6vw,6rem);padding-left:var(--paso);padding-right:var(--paso)}
.centro{max-width:var(--tope);margin-inline:auto}

/* ---------- tipografía ---------- */
.display{
  font-family:"Archivo Black",Impact,"Haettenschweiler","Arial Black",sans-serif;
  font-weight:400;text-transform:uppercase;line-height:.86;
  letter-spacing:-.022em;text-wrap:balance;margin:0;
}
.rotulo{
  font-family:"Archivo Black",Impact,"Arial Black",sans-serif;
  text-transform:uppercase;font-size:.72rem;letter-spacing:.16em;line-height:1.5;margin:0;
}
p{margin:0 0 1rem}
.prosa{max-width:62ch}
.prosa p:last-child{margin-bottom:0}

/* ---------- selector de idioma ---------- */
.idioma{display:flex;align-items:center;gap:.5rem;justify-content:flex-end;margin-bottom:1.25rem}
.lang{
  font-family:"Archivo Black",Impact,sans-serif;text-transform:uppercase;
  font-size:.74rem;letter-spacing:.12em;cursor:pointer;
  background:transparent;color:var(--crema);border:2px solid rgba(242,234,218,.45);
  padding:.32rem .6rem;border-radius:0;line-height:1;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.lang:hover{border-color:var(--crema)}
.lang[aria-pressed="true"]{background:var(--amarillo);color:var(--vino);border-color:var(--amarillo)}
.idioma .barra-sep{color:rgba(242,234,218,.5);font-size:.8rem}

/* ---------- HERO ---------- */
.hero{background:var(--magenta);color:var(--crema);overflow:hidden}
.cintillo{display:flex;flex-wrap:wrap;gap:.5rem 1.15rem;align-items:center;margin-bottom:1.6rem}
.cintillo .punto{color:var(--amarillo-claro)}
.edicion{border:1.5px solid rgba(242,234,218,.55);padding:.25rem .6rem;border-radius:99px}

.titulo{font-size:clamp(2.6rem,1rem + 9.5vw,6.5rem)}
.titulo .la{display:block;font-size:.42em;letter-spacing:-.01em}
.titulo .feria{display:block;color:var(--amarillo)}
.titulo .delos{display:block;font-size:.42em}
.titulo .moles-fila{display:flex;align-items:flex-start;gap:.22em;flex-wrap:wrap}
.titulo .moles{color:var(--amarillo)}
.titulo .anio{font-size:.26em;line-height:.9;display:grid;padding-top:.5em;letter-spacing:.02em}

.gancho{
  margin-top:clamp(1.75rem,1rem + 2.5vw,2.75rem);
  font-family:"Archivo Black",Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(1.5rem,.9rem + 3.2vw,3.1rem);line-height:1.1;letter-spacing:-.02em;
  max-width:19ch;text-wrap:balance;
}
.gancho .pregunta{color:var(--amarillo)}

.hero .bajada{margin-top:1.4rem;max-width:56ch;color:#FBE7EE}
.hero .bajada b{color:var(--amarillo-claro)}

.acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* ---------- CUENTA REGRESIVA ---------- */
.cuenta{
  margin-top:clamp(2.25rem,1.4rem + 2.5vw,3.25rem);
  background:rgba(43,8,18,.34);border:2px solid rgba(250,230,30,.45);
  padding:clamp(1.15rem,.8rem + 1.2vw,1.6rem);
}
.cuenta-titulo{color:var(--amarillo-claro);margin-bottom:.9rem}
/* Rejilla, no flex-wrap: con wrap el cuarto recuadro se quedaba solo
   y estirado en su propio renglón en pantallas angostas. 2×2 en móvil. */
.reloj{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
@media (max-width:560px){.reloj{grid-template-columns:repeat(2,minmax(0,1fr))}}
.unidad{
  background:var(--crema);color:var(--vino);
  padding:.7rem .4rem .55rem;text-align:center;
}
.unidad .num{
  display:block;font-family:"Archivo Black",Impact,sans-serif;
  font-size:clamp(1.9rem,1.2rem + 2.4vw,2.9rem);line-height:.95;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.unidad .uni{
  display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--vino-medio);margin-top:.3rem;
}

.datos-evento{
  display:grid;gap:.9rem 1.75rem;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:1.4rem 0 0;padding-top:1.1rem;border-top:1.5px solid rgba(242,234,218,.28);
}
@media (max-width:720px){.datos-evento{grid-template-columns:1fr}}
.datos-evento > div{margin:0}
.datos-evento dt{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--amarillo);margin-bottom:.2rem;
}
.datos-evento dd{margin:0;font-size:.95rem;line-height:1.4;color:var(--crema)}

.boton{
  display:inline-block;text-align:center;cursor:pointer;text-decoration:none;
  font-family:"Archivo Black",Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em;
  font-size:1rem;padding:.8rem 1.4rem;border:2px solid var(--vino);border-radius:0;
  background:var(--amarillo);color:var(--vino);box-shadow:5px 5px 0 var(--vino);
  transition:transform .12s ease,box-shadow .12s ease;
}
.boton:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--vino)}
.boton:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--vino)}
.boton.fantasma{background:transparent;color:var(--crema);border-color:var(--crema);box-shadow:5px 5px 0 rgba(58,10,25,.5)}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--amarillo);outline-offset:3px;
}
.hero a:focus-visible,.lang:focus-visible{outline-color:var(--vino)}

.confeti{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.confeti svg{position:absolute}

/* ---------- LA APP + VIDEO ---------- */
.app{background:var(--vino);color:var(--crema)}
.app-rejilla{display:grid;gap:clamp(1.75rem,1rem + 3vw,3.5rem);grid-template-columns:minmax(0,320px) minmax(0,1fr);align-items:center}
@media (max-width:820px){.app-rejilla{grid-template-columns:1fr}}
.marco-video{background:var(--magenta);padding:.6rem;box-shadow:0 0 0 3px var(--amarillo), 16px 16px 0 rgba(0,0,0,.4)}
.marco-video video{aspect-ratio:9/16;width:100%;height:auto;background:var(--magenta-hondo)}
.app h2{font-size:clamp(1.7rem,1.1rem + 2.6vw,3rem);color:var(--amarillo)}
.app .prosa p{color:#E8DCCB}
.lista-app{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.75rem}
.lista-app li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:baseline}
.lista-app .vineta{color:var(--amarillo);font-size:.7rem}
.ventajas{margin-top:1.75rem;display:grid;gap:.6rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.ventajas{grid-template-columns:1fr}}
.ventaja{
  margin:0;display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:baseline;
  padding:.45rem 0 .45rem 0;
  font-size:.95rem;line-height:1.35;color:var(--crema);
}
.ventaja .icono{color:var(--amarillo);font-size:.6rem}

/* ---------- PAQUETES ---------- */
.paquetes{background:var(--crema)}
.paquetes .encabezado{max-width:58ch;margin-bottom:clamp(1.75rem,1rem + 2vw,2.75rem)}
.paquetes h2{font-size:clamp(1.8rem,1.1rem + 2.8vw,3.1rem);color:var(--magenta)}
/* +2pt sobre el texto que lo rodea: 1em es el tamaño heredado. */
.paquetes .encabezado p{margin-top:.85rem;color:var(--vino-medio);font-size:calc(1em + 2pt);line-height:1.5}
/* Palabras clave en magenta: se leen de un vistazo al hacer scroll. */
.paquetes .encabezado p b{color:var(--magenta);font-weight:800}

.baraja{display:grid;gap:clamp(1rem,.6rem + 1.4vw,1.5rem);grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
@media (max-width:900px){.baraja{grid-template-columns:1fr}}

.plan{
  background:#FBF7ED;border:3px solid var(--turquesa);padding:1.5rem 1.35rem;
  display:flex;flex-direction:column;gap:.75rem;height:100%;
}
.plan.impulso{border-color:var(--limon)}
.plan.estrella{background:var(--magenta);border-color:var(--amarillo);color:var(--crema);position:relative}
.plan .nivel{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--vino-medio)}
.plan.estrella .nivel{color:#FBE7EE}
.plan .nombre{font-family:"Archivo Black",Impact,sans-serif;text-transform:uppercase;font-size:1.35rem;line-height:1;letter-spacing:-.01em;color:var(--magenta)}
.plan.impulso .nombre{color:var(--vino)}
.plan.estrella .nombre{color:var(--amarillo)}
.plan .precio{
  font-family:"Archivo Black",Impact,sans-serif;font-size:clamp(2.4rem,1.6rem + 2.4vw,3.4rem);
  line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--vino);
}
.plan.estrella .precio{color:var(--crema)}
.plan .precio .signo{font-size:.5em;vertical-align:.45em;margin-right:.05em}
.comision{align-self:flex-start;background:var(--amarillo);color:var(--vino);padding:.3rem .65rem;font-size:.86rem}
.comision b{font-family:"Archivo Black",Impact,sans-serif;font-size:1rem}
.plan ul{list-style:none;padding:0;margin:.35rem 0 0;display:grid;gap:.6rem;font-size:.94rem}
.plan li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:baseline}
.plan .pt{color:var(--turquesa);font-size:.62rem}
.plan.impulso .pt{color:var(--limon)}
.plan.estrella .pt{color:var(--amarillo-claro)}
.plan .base{font-style:italic;color:var(--vino-medio)}
.plan.estrella .base{color:#FBE7EE}
.sello{
  position:absolute;top:-.85rem;right:1rem;background:var(--amarillo);color:var(--vino);
  font-family:"Archivo Black",Impact,sans-serif;text-transform:uppercase;
  font-size:.7rem;letter-spacing:.1em;padding:.35rem .7rem;
}
/* El retorno de la inversión es el argumento que cierra la venta:
   va en banda amarilla, no como nota al pie. */
.se-paga{
  margin-top:clamp(1.5rem,1rem + 1.4vw,2.25rem);
  background:var(--amarillo);color:var(--vino);
  border:3px solid var(--vino);box-shadow:7px 7px 0 var(--vino);
  padding:clamp(.9rem,.7rem + .8vw,1.25rem) clamp(1rem,.8rem + 1vw,1.5rem);
  font-size:clamp(1.1rem,.95rem + .85vw,1.55rem);line-height:1.35;
  max-width:44ch;
}
.se-paga b{font-family:"Archivo Black",Impact,sans-serif;letter-spacing:-.01em;color:var(--vino)}

/* ---------- COMISIONES ---------- */
.comisiones{background:var(--vino);color:var(--crema)}
.comisiones h2{font-size:clamp(1.7rem,1.1rem + 2.6vw,2.9rem);color:var(--amarillo);max-width:16ch}
/* Cinco peldaños: uno por cada tarifa real, incluidos los dos planes
   que pagan 12%. A una sola columna en móvil para que ninguno quede
   solo en su renglón. */
.escalera{display:grid;gap:1px;background:rgba(242,234,218,.2);grid-template-columns:repeat(5,minmax(0,1fr));margin-top:clamp(1.75rem,1rem + 2vw,2.5rem)}
@media (max-width:1040px){.escalera{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.escalera{grid-template-columns:1fr}}
.peldano{background:var(--vino);padding:1.4rem 1.15rem;display:flex;flex-direction:column;gap:.3rem}
.peldano .tasa{font-family:"Archivo Black",Impact,sans-serif;font-size:clamp(2rem,1.2rem + 3vw,3.1rem);line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.peldano .que{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#D8C4AE}
.peldano .nota{font-size:.84rem;color:#E0D2C2;line-height:1.45}
.peldano.ajeno .tasa{color:#D8C4AE}
.peldano.mejor .tasa{color:var(--amarillo)}

/* Barra a escala. La pista siempre se ve; lo que crece es el relleno,
   así el peldaño se lee aunque la animación no llegue a correr. */
.barra{height:9px;background:rgba(242,234,218,.16);margin:.55rem 0 .15rem;overflow:hidden}
/* Se anima transform, no width: evita reflow en cada cuadro. */
.barra i{display:block;height:100%;width:var(--ancho);background:var(--magenta);transform:scaleX(0);transform-origin:left center;transition:transform .95s cubic-bezier(.2,.75,.25,1)}
.peldano.visible .barra i{transform:scaleX(1)}
.peldano.ajeno .barra i{background:#B08D99}
.peldano.mejor .barra{background:rgba(250,230,30,.22);box-shadow:inset 3px 0 0 var(--amarillo)}
/* Son condiciones que el expositor debe leer de verdad, así que
   dejan de ser "letra chica": cuerpo mayor y contraste suficiente. */
.letra-chica{
  margin-top:clamp(1.75rem,1.2rem + 1.4vw,2.5rem);
  border-left:2px solid var(--amarillo);
  padding:.35rem 0 .35rem 1rem;
  font-size:clamp(1rem,.95rem + .35vw,1.18rem);line-height:1.55;
  color:var(--crema);max-width:68ch;
}
.letra-chica b{color:var(--amarillo);font-weight:800}

/* ---------- CIERRE ---------- */
.cierre{background:var(--crema-hondo)}
.cierre h2{font-size:clamp(1.9rem,1.1rem + 3vw,3.3rem);color:var(--vino)}
.cierre .prosa p{color:var(--vino-medio)}
.cierre-rejilla{display:grid;gap:clamp(1.75rem,1rem + 3vw,3rem);grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:start}
@media (max-width:880px){.cierre-rejilla{grid-template-columns:1fr}}
/* Los datos de contacto quedan DEBAJO del formulario, como banda de
   ancho completo: primero se pide el puesto, luego se ofrece el
   telefono como salida alterna. */
.contacto{
  list-style:none;padding:0;
  margin:clamp(2.25rem,1.5rem + 2.2vw,3.25rem) 0 0;
  display:grid;gap:0 clamp(1rem,.5rem + 1.6vw,2.25rem);
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:2px solid rgba(58,10,25,.2);
}
.contacto li{padding:.95rem 0;border-bottom:2px solid rgba(58,10,25,.2)}
@media (max-width:1040px){.contacto{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.contacto{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.contacto{grid-template-columns:1fr}}
.contacto .etiqueta{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--vino-medio);display:block}
.contacto .dato{display:block;margin-top:.25rem;font-family:"Archivo Black",Impact,sans-serif;font-size:clamp(.98rem,.9rem + .3vw,1.12rem);line-height:1.25;letter-spacing:-.01em;text-decoration:none;color:var(--vino);overflow-wrap:break-word;transition:color .15s ease}
a.dato:hover{color:var(--magenta)}

.boleta{background:var(--vino);color:var(--crema);padding:clamp(1.5rem,1rem + 2vw,2.25rem);box-shadow:12px 12px 0 var(--magenta)}
.boleta h3{margin:0 0 .35rem;font-family:"Archivo Black",Impact,sans-serif;text-transform:uppercase;font-size:1.3rem;line-height:1.05;color:var(--amarillo)}
.boleta > p{font-size:.9rem;color:#E0D2C2}
.campo{display:grid;gap:.3rem;margin-bottom:.85rem}
.campo label{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;font-weight:800}
.campo input,.campo select{
  font:inherit;font-size:.95rem;padding:.6rem .7rem;border:2px solid var(--tinta);
  background:var(--crema);color:var(--vino);border-radius:0;width:100%;
}
.boleta .boton{width:100%}

/* ---------- PIE ---------- */
.pie{background:var(--tinta);color:#CFBCA6;padding-block:2.5rem;padding-left:var(--paso);padding-right:var(--paso)}
.pie-fila{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between;align-items:baseline}
.pie .marca-pie{font-family:"Archivo Black",Impact,sans-serif;text-transform:uppercase;color:var(--amarillo);font-size:1rem;letter-spacing:-.01em}
.pie small{font-size:.76rem;line-height:1.65;display:block}
.pie a{color:#EFE2CE}

/* ===============================================================
   MOVIMIENTO
   Regla que se respeta en todo: nada arranca invisible. Cada
   animación parte de un estado ya legible y sólo mueve transform,
   así la página se lee completa desde el primer cuadro.
   =============================================================== */
@keyframes surge{from{transform:translateY(20px)}to{transform:translateY(0)}}
.titulo .la,.titulo .feria,.titulo .delos,.titulo .moles-fila,
.hero .cintillo,.hero .gancho,.hero .bajada,.hero .acciones,.hero .cuenta{
  animation:surge .58s cubic-bezier(.2,.75,.25,1) backwards;
}
.hero .cintillo{animation-delay:.02s}
.titulo .la{animation-delay:.08s}
.titulo .feria{animation-delay:.14s}
.titulo .delos{animation-delay:.20s}
.titulo .moles-fila{animation-delay:.26s}
.hero .gancho{animation-delay:.34s}
.hero .bajada{animation-delay:.42s}
.hero .acciones{animation-delay:.50s}
.hero .cuenta{animation-delay:.58s}

@keyframes mecer{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(9px) rotate(3deg)}
}
.confeti svg{animation:mecer 7s ease-in-out infinite;transform-origin:50% 0}
.confeti svg:nth-child(2){animation-duration:9.5s;animation-delay:-3s}
.confeti svg:nth-child(3){animation-duration:8.2s;animation-delay:-1.4s}
.confeti svg:nth-child(4){animation-duration:10.5s;animation-delay:-5s}

.marquesina{background:var(--amarillo);color:var(--vino);overflow:hidden;padding-block:.75rem;border-block:3px solid var(--vino)}
.marquesina-pista{display:flex;width:max-content;animation:correr 32s linear infinite}
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquesina-grupo{display:flex;align-items:center;flex:none}
.marquesina-grupo span{
  font-family:"Archivo Black",Impact,sans-serif;text-transform:uppercase;
  font-size:.92rem;letter-spacing:.06em;padding-inline:1.1rem;white-space:nowrap;
}
.marquesina-grupo .rombo{color:var(--magenta);padding-inline:0}

.plan{transition:transform .18s ease,box-shadow .18s ease}
.plan:hover{transform:translateY(-5px);box-shadow:9px 9px 0 rgba(58,10,25,.16)}
.plan.estrella:hover{box-shadow:9px 9px 0 rgba(58,10,25,.4)}

/* Los diez lugares, uno por rombo. Visibles por defecto; sólo cuando
   el JS confirma que puede animarlos les pone .armado para encogerlos. */
.lugares{display:flex;flex-wrap:wrap;gap:.34rem;margin-top:.2rem}
.lugares i{
  width:11px;height:11px;flex:none;background:var(--amarillo);
  transform:rotate(45deg);transition:transform .34s cubic-bezier(.2,.9,.3,1.55);
}
.lugares.armado i{transform:rotate(45deg) scale(0)}
.plan.estrella.visible .lugares.armado i{transform:rotate(45deg) scale(1)}
.lugares.armado i:nth-child(1){transition-delay:.06s}
.lugares.armado i:nth-child(2){transition-delay:.12s}
.lugares.armado i:nth-child(3){transition-delay:.18s}
.lugares.armado i:nth-child(4){transition-delay:.24s}
.lugares.armado i:nth-child(5){transition-delay:.30s}
.lugares.armado i:nth-child(6){transition-delay:.36s}
.lugares.armado i:nth-child(7){transition-delay:.42s}
.lugares.armado i:nth-child(8){transition-delay:.48s}
.lugares.armado i:nth-child(9){transition-delay:.54s}
.lugares.armado i:nth-child(10){transition-delay:.60s}

@keyframes respira{0%,100%{transform:rotate(2deg) scale(1)}50%{transform:rotate(2deg) scale(1.055)}}
.sello{animation:respira 3.2s ease-in-out infinite;transform-origin:center}

.peldano{transition:background .2s ease}
.peldano:hover{background:var(--vino-medio)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .boton:hover,.plan:hover{transform:none}
}
/* ===================================================================
   COMISIÓN v2 — comparador con iconos, calculadora y píldoras.
   Sustituye a .escalera/.peldano/.letra-chica: menos texto, más tacto.
   =================================================================== */

.comparador{display:flex;flex-direction:column;gap:0;margin:2.2rem 0 0;
  border-top:2px solid var(--vino-medio)}
.fila-com{display:grid;grid-template-columns:2.3rem minmax(7rem,1fr) 4.6rem minmax(0,2.2fr);
  align-items:center;gap:.9rem;padding:1.05rem .2rem;
  border-bottom:1px solid rgba(58,10,25,.16);transition:background .18s ease}
.fila-com:hover{background:rgba(194,45,89,.05)}
.fila-com .ic{width:2.3rem;height:2.3rem;display:grid;place-items:center;
  border-radius:50%;background:var(--crema);color:var(--vino);flex:none}
.fila-com .ic svg{width:1.3rem;height:1.3rem;display:block}
.fila-com .et{font-weight:800;font-size:.98rem;line-height:1.2}
.fila-com .pc{font-family:'Archivo Black',system-ui,sans-serif;font-size:1.5rem;
  line-height:1;letter-spacing:-.02em;text-align:right;font-variant-numeric:tabular-nums}
.fila-com .pista{height:.85rem;border-radius:999px;background:rgba(58,10,25,.1);overflow:hidden}
.fila-com .pista i{display:block;height:100%;border-radius:999px;background:var(--magenta);
  transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.22,.7,.24,1)}
.comparador.visible .pista i{transform:scaleX(1)}
.fila-com.rival .ic{background:var(--vino);color:var(--crema)}
.fila-com.rival .pista i{background:var(--vino-medio)}
.fila-com.gana{background:rgba(250,230,30,.14)}
.fila-com.gana .ic{background:var(--amarillo);color:var(--tinta)}
.fila-com.gana .pc{color:var(--amarillo)}
.fila-com.gana .pista i{background:linear-gradient(90deg,var(--amarillo),var(--magenta))}
.fila-com.gana .et{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.fila-com .sello-0{font-family:'Karla',system-ui,sans-serif;font-size:.62rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;background:var(--magenta);color:#fff;
  border-radius:999px;padding:.16rem .5rem}
@media (max-width:640px){
  .fila-com{grid-template-columns:2rem 1fr 3.8rem;gap:.7rem;padding:.9rem .1rem}
  .fila-com .pista{grid-column:2/-1;margin-top:.15rem}
  .fila-com .pc{font-size:1.3rem}
}

/* ---- calculadora ---- */
.calc{margin-top:2.4rem;background:var(--crema);border:2px solid var(--vino);
  border-radius:14px;padding:1.5rem 1.4rem 1.6rem}
.calc-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.calc-top label{font-weight:800;font-size:1rem;line-height:1.3;max-width:26ch}
.calc-cifra{font-family:'Archivo Black',system-ui,sans-serif;font-size:2rem;line-height:1;
  letter-spacing:-.02em;color:var(--magenta-hondo);font-variant-numeric:tabular-nums}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2.4rem;
  margin:.5rem 0 .2rem;background:transparent;cursor:grab}
.calc input[type=range]:active{cursor:grabbing}
.calc input[type=range]::-webkit-slider-runnable-track{height:.7rem;border-radius:999px;
  background:linear-gradient(90deg,var(--magenta) var(--pos,30%),rgba(58,10,25,.14) var(--pos,30%))}
.calc input[type=range]::-moz-range-track{height:.7rem;border-radius:999px;background:rgba(58,10,25,.14)}
.calc input[type=range]::-moz-range-progress{height:.7rem;border-radius:999px;background:var(--magenta)}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:1.9rem;height:1.9rem;margin-top:-.6rem;border-radius:50%;background:var(--vino);
  border:4px solid var(--amarillo);box-shadow:0 3px 10px rgba(58,10,25,.35)}
.calc input[type=range]::-moz-range-thumb{width:1.9rem;height:1.9rem;border-radius:50%;
  background:var(--vino);border:4px solid var(--amarillo);box-shadow:0 3px 10px rgba(58,10,25,.35)}
.calc input[type=range]:focus-visible{outline:3px solid var(--vino);outline-offset:4px;border-radius:999px}
.calc-topes{display:flex;justify-content:space-between;font-size:.74rem;font-weight:700;
  letter-spacing:.04em;color:var(--vino-medio);opacity:.8}
.calc-res{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.7rem;margin-top:1.2rem}
.calc-res div{background:#fff;border-radius:10px;padding:.8rem .9rem;border:1px solid rgba(58,10,25,.14)}
.calc-res .qn{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--vino-medio);margin-bottom:.25rem}
.calc-res .mn{font-family:'Archivo Black',system-ui,sans-serif;font-size:1.35rem;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.calc-res .cero{background:var(--amarillo);border-color:var(--vino)}
.calc-res .cero .mn,.calc-res .cero .qn{color:var(--tinta)}
.calc-ahorro{margin:1.1rem 0 0;font-weight:800;font-size:1.02rem;line-height:1.35;
  display:flex;align-items:flex-start;gap:.55rem}
.calc-ahorro svg{width:1.25rem;height:1.25rem;flex:none;margin-top:.1rem;color:var(--magenta)}
.calc-ahorro b{color:var(--magenta-hondo)}

/* ---- píldoras de reglas ---- */
.reglas{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.8rem;margin-top:1.6rem}
.regla{display:flex;align-items:flex-start;gap:.7rem;background:var(--crema);
  border-radius:12px;padding:.95rem 1rem;border:1px solid rgba(58,10,25,.14)}
.regla svg{width:1.4rem;height:1.4rem;flex:none;color:var(--magenta);margin-top:.05rem}
.regla b{display:block;font-size:.95rem;line-height:1.25}
.regla span{display:block;font-size:.84rem;line-height:1.4;color:var(--vino-medio);margin-top:.15rem}
.com-pie{margin:1.2rem 0 0;font-size:.78rem;line-height:1.5;color:var(--vino-medio);opacity:.85;max-width:62ch}

/* --- Correcciones de contraste: las cajas claras viven dentro de una
   franja oscura, así que el color de texto se fija aquí en lugar de
   heredarlo. --- */
.fila-com .pc{min-width:5.4rem;white-space:nowrap}
.comparador{grid-template-columns:unset}
.fila-com{grid-template-columns:2.3rem minmax(7rem,1fr) 5.4rem minmax(0,2.2fr)}
@media (max-width:640px){
  .fila-com{grid-template-columns:2rem 1fr 4.4rem}
}
.fila-com.gana .pista i{width:0 !important}

.calc,.calc *{color:var(--tinta)}
.calc-top label{color:var(--tinta)}
.calc-cifra{color:var(--magenta-hondo) !important}
.calc-topes span{color:var(--vino-medio) !important;opacity:.85}
.calc-res .qn{color:var(--vino-medio) !important}
.calc-res .mn{color:var(--tinta) !important}
.calc-res .cero .mn,.calc-res .cero .qn{color:var(--tinta) !important}
.calc-ahorro{color:var(--tinta)}
.calc-ahorro b{color:var(--magenta-hondo) !important}
.calc-ahorro svg{color:var(--magenta) !important}

.regla,.regla *{color:var(--tinta)}
.regla b{color:var(--tinta) !important;font-weight:800}
.regla span{color:var(--vino-medio) !important}
.regla svg{color:var(--magenta) !important}

.com-pie{color:var(--crema) !important;opacity:.68}

/* --- "Con paquete" se lee como opción que conviene, no como peaje:
   fondo propio, icono en magenta, cifra en amarillo y sello de precio. --- */
.fila-com.bien{background:rgba(194,45,89,.1)}
.fila-com.bien:hover{background:rgba(194,45,89,.16)}
.fila-com.bien .ic{background:var(--magenta);color:#fff}
.fila-com.bien .pc{color:var(--amarillo)}
.fila-com.bien .et{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.sello-bien{font-family:'Karla',system-ui,sans-serif;font-size:.62rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;background:var(--amarillo);color:var(--tinta);
  border-radius:999px;padding:.16rem .5rem}

/* la tarjeta del paquete en la calculadora también gana jerarquía */
.calc-res .buena{border:2px solid var(--magenta)}
.calc-res .sub{display:block;font-size:.73rem;font-weight:800;line-height:1.3;
  margin-top:.35rem;color:var(--magenta-hondo) !important}
.calc-res .cero .sub{color:var(--tinta) !important}

/* dos píldoras en vez de tres: que no queden angostas */
.reglas{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}

/* --- El medidor deja de mostrar lo que pagas: solo el ahorro. Dos
   tarjetas, cifra grande, etiqueta arriba. --- */
.calc-res{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.8rem;margin-top:1.3rem}
.calc-res div{padding:1rem 1.1rem 1.05rem}
.calc-res .lb{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--vino-medio) !important;margin-bottom:.15rem}
.calc-res .qn{display:block;font-size:.98rem;font-weight:800;line-height:1.2;
  letter-spacing:0;text-transform:none;color:var(--tinta) !important;margin-bottom:.35rem}
.calc-res .mn{font-size:1.8rem;display:block}
.calc-res .cero .lb{color:var(--tinta) !important;opacity:.75}
.calc-ahorro{align-items:center}

/* =====================================================================
   BOTÓN EN EL TITULAR DEL PAQUETE
   El expositor decide mirando la tarjeta; el botón lo manda al
   formulario con esa opción ya elegida, sin volver a decidir abajo.
   ===================================================================== */
.plan .cabeza{
  display:flex;align-items:center;justify-content:space-between;
  gap:.7rem;flex-wrap:wrap;
}
.plan-cta{
  font-family:'Karla',system-ui,sans-serif;font-weight:800;
  font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;padding:.42rem .8rem;
  border:2px solid var(--magenta);color:var(--magenta);background:transparent;
  border-radius:999px;transition:background .15s,color .15s,transform .15s;
}
.plan-cta:hover{background:var(--magenta);color:var(--crema);transform:translateY(-1px)}
.plan-cta:focus-visible{outline:3px solid var(--turquesa);outline-offset:3px}
.plan.impulso .plan-cta{border-color:var(--vino);color:var(--vino)}
.plan.impulso .plan-cta:hover{background:var(--vino);color:var(--crema)}
.plan.estrella .plan-cta{border-color:var(--amarillo);color:var(--amarillo)}
.plan.estrella .plan-cta:hover{background:var(--amarillo);color:var(--vino)}
@media (max-width:420px){
  .plan .cabeza{flex-direction:column;align-items:flex-start;gap:.55rem}
  .plan-cta{width:100%;text-align:center}
}

/* al llegar del botón, el campo se señala solo un momento */
#paquete.recien-elegido{
  outline:3px solid var(--amarillo);outline-offset:2px;
  background:#FFFBE6;
}