/* ============================================================================
   CARRITO ABIERTO · Certificación Internacional en Importaciones
   Emprendelandia · lanzamiento 30 sep – 7 oct 2026

   POR QUÉ ESTA HOJA ES NUEVA Y NO SE TOCÓ estilos.css
   -----------------------------------------------------------------------
   `estilos.css` lo comparte `repeticiones.html`. Rehacer el carrito encima
   de esa hoja obligaba a reescribir clases que esa otra página usa
   (.hero, .seccion, .boton, .pie, .barra-fija...). Para no romperla,
   carrito.html pasó a su propia hoja: `carrito.css`. `estilos.css` quedó
   INTACTO y `repeticiones.html` sigue funcionando exactamente igual.
   Si algún día se unifican, hay que renombrar las clases de una de las dos.

   PALETA — colores de marca verificados (marca/activos-y-paleta.md)
   -----------------------------------------------------------------------
   Regla: negro manda, magenta del logo solo donde hay que hacer clic o
   señalar, naranja para el segundo plano de acento. Nada inventado.
     #FF28B4  magenta Emprendelandia — ES el color del logotipo (muestreo
              de píxeles de logo-emprendelandia-magenta.png). Este y no otro.
     #ED5D01  naranja de marca
     #0D0C0B  negro base
   Los neutros están tintados hacia el magenta (no son grises puros) para
   que la página se lea como una sola pieza.

   CONTRASTE — comprobado a mano contra #0D0C0B
     texto        #F7F0F4  ~18:1
     texto-suave  #C9B8C2  ~10.4:1
     texto-tenue  #93838C  ~5.4:1   (AA texto normal)
     magenta      #FF28B4  ~5.8:1   (AA texto normal)
     naranja      #ED5D01  ~5.8:1   (AA texto normal)
   Los botones magenta llevan texto CASI NEGRO, no blanco: blanco sobre
   #FF28B4 da 3.4:1 y no pasa AA. Negro sobre magenta da 5.8:1 y sí pasa.

   MOVIMIENTO: no hay animaciones de entrada por scroll (pedido explícito).
   Lo único que se mueve es el carrusel, y se detiene solo si el visitante
   lo toca, lo enfoca o pide menos movimiento en su sistema.
   ============================================================================ */

:root{
  --negro:        #0D0C0B;
  --negro-2:      #120F11;
  --panel:        #171216;
  --panel-alto:   #1E1720;
  --linea:        rgba(255,40,180,.18);
  --linea-suave:  rgba(247,240,244,.10);

  --magenta:      #FF28B4;
  --magenta-osc:  #C4148A;
  --naranja:      #ED5D01;
  --whatsapp:     #25D366;

  --texto:        #F7F0F4;
  --texto-suave:  #C9B8C2;
  --texto-tenue:  #93838C;

  /* Escala tipográfica fluida. Móvil primero: los mínimos son los que
     mandan hasta 480 px, los máximos solo llegan en escritorio ancho. */
  --t-xs:   .78rem;
  --t-sm:   .88rem;
  --t-base: clamp(1rem, .96rem + .22vw, 1.08rem);
  --t-md:   clamp(1.06rem, 1rem + .4vw, 1.2rem);
  --t-lg:   clamp(1.28rem, 1.14rem + .7vw, 1.6rem);
  --t-xl:   clamp(1.72rem, 1.4rem + 1.5vw, 2.5rem);
  --t-2xl:  clamp(2.1rem, 1.55rem + 2.6vw, 3.5rem);

  /* Ritmo de espacio: NO es el mismo padding en todos lados. Los bloques
     de respiro (--e-xl) separan secciones; los de agrupación (--e-sm)
     pegan cosas que se leen juntas. */
  --e-xs: 8px;
  --e-sm: 14px;
  --e-md: 24px;
  --e-lg: 40px;
  --e-xl: clamp(54px, 4vw + 38px, 92px);

  --ancho: 1120px;
  --curva: 14px;
  --salida: cubic-bezier(.22,.61,.36,1);   /* ease-out, sin rebote */
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--negro);
  color:var(--texto);
  font-family:'Poppins',system-ui,sans-serif;
  font-size:var(--t-base);
  line-height:1.68;
  overflow-x:hidden;
  /* Hueco para la barra fija de compra en móvil. */
  padding-bottom:78px;
}

img{ max-width:100%; display:block }

h1,h2,h3,h4{
  font-family:'Outfit',system-ui,sans-serif;
  line-height:1.08;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}

p{ margin:0 }

a{ color:inherit }

:focus-visible{
  outline:2px solid var(--magenta);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------------------------------------------------------------- barra */
.barra-cierre{
  background:var(--magenta);
  color:#0D0C0B;
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:var(--t-xs);
  letter-spacing:.055em;
  text-transform:uppercase;
  text-align:center;
  padding:9px 16px;
  line-height:1.4;
}

/* -------------------------------------------------------- contenedores */
.envoltura{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:20px;
}

.seccion{ padding-block:var(--e-xl) }
.seccion.apretada{ padding-block:calc(var(--e-xl) * .68) }

/* Fondo alterno: un negro apenas levantado y un filete magenta arriba.
   Sin degradados de colores inventados. */
.seccion.alterna{
  background:var(--negro-2);
  border-block:1px solid var(--linea-suave);
}

/* Rótulo de sección: filete magenta + texto tracked. Reemplaza al icono
   redondeado encima de cada título, que templatiza la página. */
.rotulo{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Outfit',sans-serif;
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--magenta);
  margin-bottom:var(--e-sm);
}
.rotulo::before{
  content:"";
  width:34px;
  height:2px;
  background:var(--magenta);
  flex:none;
}

.titulo-seccion{ font-size:var(--t-xl); font-weight:800 }

.entrada{
  color:var(--texto-suave);
  margin-top:var(--e-sm);
  max-width:60ch;
  font-size:var(--t-md);
}

.resalte{ color:var(--magenta) }
.resalte-n{ color:var(--naranja) }

/* ----------------------------------------------------------------- hero */
.hero{
  position:relative;
  padding-block:clamp(32px,6vw,58px) var(--e-xl);
  text-align:center;
  /* Un solo foco de luz magenta muy bajo, detrás del logo. Es el color de
     marca, no un glow decorativo: marca dónde empieza la página. */
  background:
    radial-gradient(64% 46% at 50% 0%, rgba(255,40,180,.17), transparent 72%),
    var(--negro);
}

.logo-marca{
  width:min(186px,50vw);
  height:auto;
  margin:0 auto var(--e-md);
}

.pildora{
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--linea);
  background:rgba(255,40,180,.07);
  color:var(--texto);
  border-radius:100px;
  padding:6px 16px 6px 13px;
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.punto-vivo{
  width:8px;height:8px;border-radius:50%;
  background:var(--magenta);
  box-shadow:0 0 0 4px rgba(255,40,180,.22);
  flex:none;
}

.hero h1{
  font-size:var(--t-2xl);
  font-weight:900;
  margin-top:var(--e-md);
  max-width:17ch;
  margin-inline:auto;
}

.hero .bajada{
  color:var(--texto-suave);
  margin:var(--e-md) auto 0;
  max-width:56ch;
  font-size:var(--t-md);
}

/* ------------------------------------------------------- doble aval */
/* Pedido literal de Vale: "no sale el logo de la Florida Global University,
   luego Emprendelandia". Los dos avales, con jerarquía, uno al lado del otro
   y separados por un filete. Es la pieza que sostiene el precio. */
.aval{
  margin:var(--e-md) auto 0;
  max-width:560px;
  border:1px solid var(--linea);
  border-radius:var(--curva);
  background:var(--panel);
  padding:var(--e-md) var(--e-sm);
}
.aval-rotulo{
  font-family:'Outfit',sans-serif;
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--naranja);
  margin-bottom:var(--e-md);
}
.aval-par{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--e-md);
  align-items:center;
}
.aval-pieza{ display:grid; place-items:center; gap:7px; min-height:60px }
.aval-pieza img{ width:min(140px,58%); height:auto }
.aval-nombre{
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size:var(--t-md);
  letter-spacing:-.01em;
  line-height:1.15;
}
.aval-lugar{
  font-size:var(--t-xs);
  color:var(--texto-tenue);
  letter-spacing:.055em;
  text-transform:uppercase;
}

/* ----------------------------------------------------------- video */
/* Hueco para el video de Valeria. Ver el comentario del HTML. */
.video-hueco{
  margin:var(--e-lg) auto 0;
  max-width:700px;
  aspect-ratio:16/9;
  border:1px dashed rgba(255,40,180,.42);
  border-radius:var(--curva);
  background:var(--panel);
  display:grid;
  place-content:center;
  gap:12px;
  justify-items:center;
  padding:var(--e-md);
}
.video-hueco .glifo{
  width:52px;height:52px;border-radius:50%;
  border:2px solid var(--magenta);
  display:grid;place-items:center;
}
.video-hueco .glifo svg{ width:20px;height:20px;fill:var(--magenta);margin-left:3px }
.video-hueco .rotulo-video{
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:var(--t-sm);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--texto-suave);
  text-align:center;
}
.video-hueco .marca-pendiente{
  font-size:var(--t-xs);
  color:var(--negro);
  background:var(--naranja);
  border-radius:100px;
  padding:3px 12px;
  font-weight:600;
}

/* --------------------------------------------------------------- botón */
.boton{
  display:inline-block;
  background:var(--magenta);
  color:#0D0C0B;
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size:var(--t-md);
  letter-spacing:.005em;
  text-decoration:none;
  padding:17px 30px;
  border-radius:100px;
  box-shadow:0 8px 26px -12px rgba(255,40,180,.9);
  transition:transform .22s var(--salida), background-color .22s var(--salida);
  max-width:100%;
}
.boton:hover{ background:#FF52C3; transform:translateY(-2px) }
.boton:active{ transform:translateY(0); background:var(--magenta-osc) }

.cta{ margin-top:var(--e-lg) }
.nota-cta{
  display:block;
  margin-top:11px;
  font-size:var(--t-sm);
  color:var(--texto-tenue);
}

.boton-fantasma{
  display:inline-block;
  border:1px solid var(--linea);
  color:var(--texto-suave);
  border-radius:100px;
  padding:13px 24px;
  font-size:var(--t-sm);
  font-weight:600;
  text-decoration:none;
  transition:border-color .22s var(--salida), color .22s var(--salida);
}
.boton-fantasma:hover{ border-color:var(--magenta); color:var(--texto) }

.boton-wa{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--whatsapp);
  color:#07260F;
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size:var(--t-sm);
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  padding:13px 22px;
  border-radius:100px;
}
.boton-wa svg{ width:18px;height:18px;fill:currentColor }

.enlace-suave{
  color:var(--texto-suave);
  font-size:var(--t-sm);
  text-decoration-color:var(--linea);
  text-underline-offset:4px;
}
.enlace-suave:hover{ color:var(--magenta) }

/* ----------------------------------------------------------- regresiva */
.regresiva{
  display:flex;
  gap:9px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:var(--e-sm);
}
.reloj-caja{
  border:1px solid var(--linea);
  background:var(--panel);
  border-radius:11px;
  padding:11px 6px 9px;
  min-width:68px;
}
.reloj-caja .num{
  font-family:'Outfit',sans-serif;
  font-weight:900;
  font-size:1.7rem;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.reloj-caja .rot{
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--texto-tenue);
  margin-top:5px;
}
/* En pantallas muy angostas (320-360 px) las cuatro cajas no entran a 68 px y
   la de segundos se caía sola a una segunda línea. Se aprietan para que la
   cuenta atrás se lea siempre como una sola fila. */
@media (max-width:379px){
  .regresiva{ gap:6px }
  .reloj-caja{ min-width:60px; padding:10px 4px 8px }
  .reloj-caja .num{ font-size:1.5rem }
}

.rotulo-regresiva{
  font-size:var(--t-xs);
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--texto-tenue);
  margin-top:var(--e-lg);
}

/* --------------------------------------------------- plan de formación */
/* Lista con numeral grande a la izquierda, no tarjetas iguales en rejilla.
   El numeral es Outfit 900 en negro con borde magenta: se lee como un
   índice de programa académico, que es lo que Vale pidió
   ("una web donde diga todo lo que van a aprender"). */
.plan{ margin-top:var(--e-lg); border-top:1px solid var(--linea-suave) }

.curso{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px 14px;
  padding-block:18px;
  border-bottom:1px solid var(--linea-suave);
  align-items:baseline;
}
.curso-num{
  font-family:'Outfit',sans-serif;
  font-weight:900;
  font-size:1.5rem;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px var(--magenta);
  font-variant-numeric:tabular-nums;
  align-self:start;
  padding-top:2px;
}
.curso h3{
  font-size:var(--t-md);
  font-weight:800;
  letter-spacing:-.005em;
}
.curso p{
  grid-column:2;
  color:var(--texto-suave);
  font-size:var(--t-sm);
  margin-top:5px;
}
/* Las dos joyas del programa (USA y China) llevan el número de clases
   en una etiqueta naranja. Son los dos cursos que Vale quiere destacar. */
.clases{
  display:inline-block;
  margin-left:9px;
  font-family:'Poppins',sans-serif;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--naranja);
  border:1px solid rgba(237,93,1,.4);
  border-radius:100px;
  padding:2px 9px;
  vertical-align:middle;
  white-space:nowrap;
}
.plan-pie{
  margin-top:var(--e-md);
  color:var(--texto-suave);
  font-size:var(--t-sm);
  max-width:56ch;
}

/* ------------------------------------------------------------- pilares */
.pilares{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  margin-top:var(--e-lg);
  background:var(--linea-suave);
  border:1px solid var(--linea-suave);
  border-radius:var(--curva);
  overflow:hidden;
}
.pilar{ background:var(--panel); padding:var(--e-md) }
.pilar h3{
  font-size:var(--t-md);
  font-weight:800;
  color:var(--magenta);
  margin-bottom:7px;
}
.pilar p{ color:var(--texto-suave); font-size:var(--t-sm) }

.recursos{
  margin-top:var(--e-md);
  color:var(--texto-suave);
  font-size:var(--t-sm);
  max-width:64ch;
  border-left:2px solid var(--naranja);
  padding-left:16px;
}

/* ------------------------------------------------------------ carrusel */
/* Pedido de Samu: "los casos de éxito tienen que ser un carrusel con las
   fotos pasando", como en la página de Rentas Inteligentes.
   Implementación: pista con scroll-snap nativo (funciona con el dedo y con
   trackpad sin JS), flechas reales <button> y puntos. El teclado mueve con
   ← y → cuando la pista está enfocada. */
.carrusel{ position:relative; margin-top:var(--e-lg) }

.pista{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  /* OJO: aquí NO va scroll-behavior:smooth. Si se pone, CUALQUIER asignación
     de scrollLeft se vuelve una animación, y el JS del carrusel pierde la
     posibilidad de colocar la pista de golpe cuando el navegador tiene las
     animaciones congeladas (pestaña en segundo plano) o no soporta el scroll
     suave en elementos (Safari anterior al 15.4). El movimiento suave lo pide
     el JS con scrollTo({behavior:'smooth'}), que sí se puede saltar. */
  padding-block:4px;
  /* La barra de scroll se oculta: la navegación son las flechas y el dedo. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.pista::-webkit-scrollbar{ display:none }

.caso{
  flex:0 0 78%;
  max-width:340px;
  scroll-snap-align:center;
  margin:0;
  border:1px solid var(--linea);
  border-radius:var(--curva);
  background:var(--panel);
  overflow:hidden;
}
/* 4:5 y object-fit:contain -> la imagen NUNCA se recorta. Los creativos
   traen el texto quemado dentro; recortarlos se come la cifra o la cara.
   OJO CON height:auto — es obligatorio. Las <img> llevan los atributos
   width/height reales (833x1048, 1272x1600) para que la página no salte
   mientras cargan, pero ese height="1048" entra como estilo de presentación
   y GANA sobre aspect-ratio: sin height:auto las tarjetas se iban a 1.645 px
   de alto y la foto quedaba flotando al fondo de un hueco negro. */
.caso img{
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:contain;
  background:#12060C;
}
.caso figcaption{
  font-size:var(--t-xs);
  color:var(--texto-tenue);
  padding:11px 14px;
  border-top:1px solid var(--linea-suave);
}

.carrusel-mandos{
  display:flex;
  align-items:center;
  gap:var(--e-sm);
  margin-top:var(--e-md);
}
.flecha{
  width:42px;height:42px;
  flex:none;
  border-radius:50%;
  border:1px solid var(--linea);
  background:var(--panel);
  color:var(--texto);
  display:grid;place-items:center;
  cursor:pointer;
  transition:border-color .2s var(--salida), background-color .2s var(--salida);
}
.flecha:hover{ border-color:var(--magenta); background:var(--panel-alto) }
.flecha svg{ width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round }

.puntos{ display:flex; margin-left:auto; align-items:center }
/* El punto se ve de 8 px pero el botón mide 24x24: el área que se puede tocar
   con el dedo tiene que ser de 24 px como mínimo, aunque el gráfico sea chico.
   Por eso el círculo se dibuja con ::after y no con el fondo del botón. */
.punto{
  width:24px;height:24px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.punto::after{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:rgba(247,240,244,.26);
  transition:background-color .2s var(--salida), transform .2s var(--salida);
}
.punto:hover::after{ background:rgba(247,240,244,.5) }
.punto[aria-current="true"]::after{ background:var(--magenta); transform:scale(1.35) }

.descargo{
  margin-top:var(--e-md);
  font-size:var(--t-xs);
  color:var(--texto-tenue);
  max-width:64ch;
  line-height:1.6;
}

/* --------------------------------------------------------------- Vale */
.vale{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--e-md);
  align-items:center;
}
.vale-foto{
  border-radius:var(--curva);
  overflow:hidden;
  border:1px solid var(--linea);
  /* Filete magenta abajo: la foto se asienta sobre el color de marca. */
  box-shadow:0 4px 0 -1px var(--magenta);
}
.vale-foto img{ width:100%; height:auto }
.vale p{ color:var(--texto-suave); margin-top:var(--e-sm) }
.vale .firma{
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size:var(--t-sm);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--naranja);
  margin-top:var(--e-md);
}

/* -------------------------------------------------------------- precio */
.panel-precio{
  margin:var(--e-lg) auto 0;
  /* Tope de ancho: en escritorio la sección mide 1.120 px y el panel a ese
     ancho se lee como una franja, no como una ficha de precio. */
  max-width:760px;
  border:1px solid var(--linea);
  border-radius:18px;
  background:
    radial-gradient(90% 100% at 50% 0%, rgba(255,40,180,.11), transparent 70%),
    var(--panel);
  padding:var(--e-lg) var(--e-md);
  text-align:center;
}
.rotulo-precio{
  font-size:var(--t-xs);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--texto-tenue);
}
.precio{
  font-family:'Outfit',sans-serif;
  font-weight:900;
  font-size:clamp(3.4rem,2.1rem + 6vw,5.4rem);
  line-height:.95;
  letter-spacing:-.04em;
  margin-top:6px;
  color:var(--texto);
}
.precio .moneda{
  font-size:.28em;
  letter-spacing:.1em;
  color:var(--magenta);
  margin-left:.22em;
  vertical-align:.55em;
}
.precio-detalle{
  color:var(--texto-suave);
  font-size:var(--t-sm);
  max-width:48ch;
  margin:var(--e-sm) auto 0;
}
.precio-fechas{
  color:var(--texto-tenue);
  font-size:var(--t-xs);
  max-width:44ch;
  margin:12px auto 0;
}

/* --------------------------------------------------------------- bonos */
/* Presentación tomada de la landing de Rentas Inteligentes: rótulo
   "BONO #N" en color, nombre en grande, una línea de descripción. */
.bonos{ margin-top:var(--e-xl) }
/* Un escalón por debajo del título de sección: los bonos cuelgan de la oferta,
   no compiten con ella. */
.titulo-bonos{ font-size:var(--t-lg); font-weight:800 }
.lista-bonos{ display:grid; gap:12px; margin-top:var(--e-md) }
.bono{
  border:1px solid var(--linea-suave);
  border-left:3px solid var(--magenta);
  border-radius:10px;
  background:var(--panel);
  padding:18px 20px;
}
.bono .num-bono{
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size:var(--t-xs);
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--magenta);
}
.bono h4{ font-size:var(--t-md); font-weight:800; margin-top:4px }
.bono p{ color:var(--texto-suave); font-size:var(--t-sm); margin-top:6px }

/* ------------------------------------------------------------ garantía */
.garantia{
  margin-top:var(--e-lg);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:start;
  border:1px solid rgba(237,93,1,.3);
  border-radius:var(--curva);
  background:rgba(237,93,1,.055);
  padding:var(--e-md);
}
.garantia svg{
  width:30px;height:30px;
  stroke:var(--naranja);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  flex:none;
}
.garantia h3{ font-size:var(--t-md); font-weight:800 }
.garantia p{ color:var(--texto-suave); font-size:var(--t-sm); margin-top:6px }

/* --------------------------------------------------------------- cierre */
.cierre{ text-align:center }
.cierre .rotulo{ justify-content:center }
.cierre .entrada{ margin-inline:auto }
.contacto{
  margin-top:var(--e-lg);
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.linea-contacto{
  margin-top:var(--e-lg);
  font-size:var(--t-sm);
  color:var(--texto-tenue);
}

/* ------------------------------------------------------------------ pie */
.pie{
  border-top:1px solid var(--linea-suave);
  padding-block:var(--e-lg);
  text-align:center;
}
.pie .logo-marca{ width:min(140px,40vw); margin-bottom:var(--e-sm) }
.pie-evento{
  font-family:'Outfit',sans-serif;
  font-weight:600;
  font-size:var(--t-sm);
  color:var(--texto-suave);
  line-height:1.6;
}
.legal{
  margin:var(--e-md) auto 0;
  max-width:70ch;
  font-size:.74rem;
  line-height:1.72;
  color:var(--texto-tenue);
}

/* ------------------------------------------------------- barra fija */
.barra-fija{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:40;
  background:rgba(13,12,11,.94);
  border-top:1px solid var(--linea);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  text-align:center;
}
.barra-fija .boton{
  width:100%;
  padding:14px 18px;
  font-size:var(--t-sm);
  letter-spacing:.05em;
  text-transform:uppercase;
  box-shadow:none;
}

/* ============================ ESCRITORIO ============================== */
/* Móvil primero: todo lo de arriba es la versión de teléfono. Aquí abajo
   solo se ensancha. */

@media (min-width:600px){
  .aval-par{
    grid-template-columns:1fr 1px 1fr;
    gap:var(--e-md);
  }
  .aval-par::after{
    content:"";
    grid-column:2;
    width:1px;
    height:56px;
    background:var(--linea);
    justify-self:center;
    align-self:center;
    grid-row:1;
  }
  .aval-pieza:last-of-type{ grid-column:3; grid-row:1 }
  .caso{ flex:0 0 46%; max-width:320px }
  .curso-num{ font-size:2rem }
  .panel-precio{ padding:var(--e-xl) var(--e-lg) }
}

@media (min-width:860px){
  .pilares{ grid-template-columns:repeat(3,1fr) }

  /* Asimetría a propósito: el plan no se centra, se descuelga hacia la
     derecha con el rótulo de sección anclado a la izquierda. */
  .plan-caja{
    display:grid;
    grid-template-columns:minmax(0,7fr) minmax(0,11fr);
    gap:var(--e-lg);
    align-items:start;
  }
  .plan{ margin-top:0 }
  .curso{ grid-template-columns:auto 1fr; gap:4px 20px }
  .caso{ flex:0 0 300px }

  .vale{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:var(--e-lg);
  }
  .lista-bonos{ grid-template-columns:1fr 1fr; gap:14px }

  /* En escritorio la barra fija sobra: los CTA ya están a la vista. */
  .barra-fija{ display:none }
  body{ padding-bottom:0 }
}

/* --------------------------------------------- menos movimiento */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  .boton:hover{ transform:none }
}