/* ============================================================================
SER EXTRAORDINARIO · CONTEXTO DE RIQUEZA — Medellín, 21 y 22 de noviembre 2026
Página principal del evento.
Figma "Página - Ser Extraordinario - Medellín (Colombia) - Web":
Desktop 128:5 — 1920 x 16096, contenido de 1280 centrado (320 de margen).
Comparte tokens, fuentes y assets con la landing de creyentes
(styles-creyentes.css): mismo archivo de Figma, misma marca.
⚠️ El .ttf de Monument Extended que hay en el repo es el corte BLACK (900),
sin eje variable. El Figma usa Regular, así que todo el display sale más
pesado y ~5% más ancho que el diseño. Con el corte Regular se revierte sin
tocar nada más que el @font-face.
============================================================================ */
@font-face{
font-family:'Monument Extended SK';
src:url('/latam/_assets/monument-extended.ttf') format('truetype');
font-weight:300 900;
font-display:swap;
}
:root{
--black:#000;
--ink:#dadada;
--white:#fff;
--gold-1:#f3ba40;
--gold-2:#ffac2f;
--gold-grad:linear-gradient(90deg,var(--gold-1),var(--gold-2));
--red:#cb1927;
--red-deep:#560f15;
--btn-grad:linear-gradient(228.5deg,var(--red-deep) 26.733%,var(--red) 94.836%);
--green:#06a07a;
--green-line:rgba(143,253,204,.3);
--green-fill:linear-gradient(177.8deg,rgba(143,253,204,.08) 2.8%,rgba(143,253,204,.15) 97.8%);
--panel:rgba(16,16,16,.3); /* tarjetas y cejas */
--line:#292b2d; /* borde estándar del diseño */
--line-soft:rgba(255,255,255,.1);
--ff:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
--ff-d:'Monument Extended SK','Montserrat',sans-serif;
--wrap:1280px; /* ancho del contenido en el Figma */
--pad:20px;
--r:15px; /* radio de tarjeta del diseño */
}
*,*::before,*::after{box-sizing:border-box}
/* El `display` de las clases (.btn es inline-flex) le gana al [hidden] del
navegador, asi que ocultar algo por JS con el.hidden=true no funcionaba. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--black);
color:var(--white);
font-family:var(--ff);
font-size:16px;
line-height:1.5;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
/* `height:auto` a proposito: los atributos width/height del HTML son pistas de
presentacion y fijan la ALTURA, asi que cambiar solo el `width` desde CSS
estiraba la imagen (le pasaba al lockup de Contexto de Riqueza en movil).
Lo que necesita una altura concreta la declara y gana por especificidad. */
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--pad)*2);margin-inline:auto;padding-inline:var(--pad)}
.d{font-family:var(--ff-d);font-weight:400;text-transform:uppercase}
/* El degradado dorado sobre texto. Se usa en varios titulares. */
.au{
background:var(--gold-grad);
-webkit-background-clip:text;background-clip:text;
color:transparent;
}
/* --- Botón principal ------------------------------------------------------
Dos cajas anidadas, como en el Figma: un aro rojo de 1px con 8-9px de aire
y dentro la píldora con el degradado y el glow hacia arriba. */
.btn{display:inline-flex;text-decoration:none}
.btn-ring{border:1px solid var(--red);border-radius:46px;padding:8px 9px;display:inline-flex}
.btn-pill{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
height:66px;padding:10px 30px;border-radius:46px;
background:var(--btn-grad);
filter:drop-shadow(0 -1px 6.3px var(--red));
font-weight:700;font-size:16px;line-height:26px;text-transform:uppercase;color:var(--white);
white-space:nowrap;
transition:transform .16s ease, filter .16s ease;
}
.btn:hover .btn-pill{transform:translateY(-1px);filter:drop-shadow(0 -1px 12px var(--red))}
.btn:active .btn-pill{transform:translateY(0)}
.btn-pill img{width:32px;height:32px;flex:none}
/* ---- El efecto de los botones: UNO solo, el mismo en todos --------------
Un brillo que cruza la pastilla cada pocos segundos y vuelve a cruzarla al
pasar el raton. Se eligio este y no varios: con dos o tres animaciones
distintas por boton la pagina se vuelve ruidosa y ninguna llama la atencion.
El destello va en un ::after recortado por el propio boton (`overflow:hidden`),
asi que no hace falta ni un elemento extra en el HTML ni una linea de JS. */
.btn-pill,.tk-btn{position:relative;overflow:hidden;isolation:isolate}
.btn-pill::after,.tk-btn::after{
content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:34%;
/* 🔑 `z-index:-1`. Dentro del propio boton eso pinta ENCIMA de su fondo pero
DEBAJO del texto. Con 0 pasaba por delante y emborronaba el CTA, porque el
texto es un nodo suelto y no hay forma de levantarlo con z-index. */
z-index:-1;pointer-events:none;transform:skewX(-18deg);
background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
animation:brilloBoton 5s ease-in-out infinite;
}
/* Los de entrada ya son claros: con el mismo brillo se lavarian. */
.tk-btn::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent)}
@keyframes brilloBoton{
0%,60%{left:-45%}
92%,100%{left:112%}
}
/* Al pasar el raton cruza una vez, mas rapido. */
.btn:hover .btn-pill::after,.tk-btn:hover::after{animation:brilloBoton 1.1s ease-out}
@media (prefers-reduced-motion:reduce){
.btn-pill::after,.tk-btn::after{animation:none;opacity:0}
}
/* --- Ceja / píldora de cabecera ------------------------------------------ */
.ceja{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
background:var(--panel);border:1px solid rgba(41,43,45,.6);
border-radius:50px;padding:6px 14px;
font-size:14px;font-weight:600;letter-spacing:.06em;
color:rgba(255,255,255,.78);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.ceja .dot{width:5px;height:5px;flex:none}
/* ============================================================ 1 · CABECERA */
/* La cabecera NO sigue al usuario: se queda arriba del todo y se va con el
scroll (pedido de Alejo, 12-sep-2026). Antes era `position:sticky`. */
.top{position:relative;z-index:50;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:115px;padding-block:20px}
.top-logo{width:150px;height:auto}
.count{display:flex;gap:10px}
.count > div{min-width:80px;text-align:center}
.count b{display:block;font-family:var(--ff-d);font-weight:400;font-size:32px;line-height:1}
.count span{display:block;margin-top:5px;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.55)}
/* El contador va dentro de su propia capsula, como en el Figma (243:6148). */
.count{border:1px solid rgba(41,43,45,.8);border-radius:10px;padding:10px 18px;background:var(--panel)}
/* En el Figma la ciudad va en blanco y la fecha en dorado. */
/* `.top-fecha` es inline-flex y los contenedores flex descartan los nodos de
solo espacio: sin este margen quedaba "MEDELLIN,21 Y 22". */
.top-fecha em{font-style:normal;color:var(--gold-1);margin-left:.3em}
.top-fecha{
/* Es un : sin esto arrastra el `margin: 1em 0` del navegador, que a 12px
son 12 arriba y 12 abajo. Era el hueco de verdad alrededor de la fecha —
el `gap` del contenedor solo ponia 6. */
margin:0;
display:inline-flex;align-items:center;
background:var(--panel);border:1px solid var(--line);border-radius:10px;
padding:11px 21px;font-family:var(--ff-d);font-size:14px;
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
/* ============================================================= 2 · PROMESA */
.promesa{
/* Las etiquetas de los speakers llegan hasta el borde derecho (asi esta en el
Figma). En pantallas estrechas la ultima se salia unos pixeles y la pagina
sacaba barra horizontal. `clip` y no `hidden` para no crear un contenedor
de scroll. */
overflow-x:clip;
position:relative;
background:url('/latam/colombia/_assets/img/evento/hero-promesa.webp') center top/100% auto no-repeat,var(--black);
padding:23vw 0 80px;
text-align:center;
}
.promesa::after{content:"";position:absolute;inset:auto 0 0;height:200px;background:linear-gradient(transparent,var(--black));pointer-events:none}
.promesa > *{position:relative;z-index:1}
.logo-ctx{
display:inline-flex;flex-direction:column;align-items:center;
background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 20px;
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.logo-ctx .l1{width:150px}
.logo-ctx .l2{width:180px;margin-top:6px}
.promesa h1{
margin:14px auto 0;max-width:865px;
font-family:var(--ff-d);font-weight:400;font-size:36px;line-height:1.15;text-transform:uppercase;
}
.promesa h1 .au{display:inline}
.promesa .sub{margin:6px auto 0;max-width:700px;font-size:20px;font-weight:700;line-height:1.35}
.promesa .cta{margin-top:26px}
/* Patrocinador del hero. Calcado de las landings de la gira (cdr.css): el
rotulo y el logo en una linea, separados por un filete fino. Va centrado
porque el hero de estas paginas lo esta. */
.hero-sponsor{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.hero-sponsor span{
font-family:var(--ff-d);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;
border-right:1px solid rgba(255,255,255,.3);padding-right:14px;line-height:1.2;
}
.hero-sponsor img{width:78px;height:auto;opacity:.95}
@media (max-width:719px){
.hero-sponsor{gap:10px;margin-top:20px}
.hero-sponsor span{font-size:9px;padding-right:10px}
.hero-sponsor img{width:66px}
}
/* Las etiquetas de speaker van sobre la foto, en porcentaje del ancho: el
fondo escala con la ventana y si fueran px se despegarían de las caras. */
.spk{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:5px;
background:var(--panel);border:1px solid var(--line-soft);border-radius:10px;padding:10px;
font-family:var(--ff-d);font-size:12px;line-height:1.4;white-space:nowrap;
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.spk img{width:15px;height:15px}
/* 🔑 EN `vw`, NO EN `%`. El `%` se mide contra la altura de la SECCION, que es
casi la misma a cualquier ancho; la foto, en cambio, va al 100% del ANCHO, asi
que su alto sube y baja con la ventana. Con `%` los rotulos se despegaban: a
1280 caian al 51% de la foto y a 1920 al 34%, es decir sobre la cara. En `vw`
caen siempre en el mismo punto de la imagen. Es lo mismo que ya hacia el
bloque de movil, y por la misma razon. El aire de arriba va en `vw` por lo
mismo: si fuera fijo, a 1920 el titular se comeria la foto.
De paso el bloque sube lo justo para que el logo del patrocinador entre en el
primer vistazo en portatiles de 900px de alto. */
.spk-1{left:24.2%;top:18vw} /* Vilma */
.spk-2{left:44.6%;top:15.3vw} /* Sebas */
.spk-3{left:56.8%;top:20.7vw} /* Nati */
.spk-4{left:67.6%;top:18vw} /* Tomás */
/* ============================================================= 3 · MARQUEE */
.marquee{overflow:hidden;padding:29px 0;border-block:1px solid rgba(41,43,45,.5)}
.marquee ul{display:flex;gap:0;margin:0;padding:0;list-style:none;width:max-content;animation:marquee 40s linear infinite}
.marquee li{font-family:var(--ff-d);font-size:16px;line-height:22px;white-space:nowrap;padding-right:24px;color:var(--ink)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee ul{animation:none}}
/* =============================================================== 4 · VIDEO */
.video{
position:relative;
background:url('/latam/colombia/_assets/img/evento/bg-video.webp') center top/cover no-repeat,var(--black);
padding:100px 0;
}
.video-in{display:flex;flex-direction:column;align-items:center;gap:80px}
.video-top{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:1064px}
/* Marco del reproductor. Todavía NO hay video: queda el hueco con la
proporción exacta del diseño (1280x720) para que al montarlo no se mueva
nada de lo que tiene debajo. */
.player{
position:relative;width:100%;aspect-ratio:1280/720;
background:var(--line);border-radius:var(--r);overflow:hidden;
display:grid;place-items:center;
}
.player .ph{text-align:center;color:rgba(255,255,255,.35);font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.player .ph b{display:block;font-family:var(--ff-d);font-size:20px;color:rgba(255,255,255,.5);margin-bottom:6px}
/* Reproductor VTurb: el marco de fuera ya fija la proporcion del Figma, asi que
el reproductor lo rellena y se le anula el relleno con el que el hueco de
carga se da alto a si mismo — si no, suma dos veces y el video queda corrido. */
.player vturb-smartplayer{position:absolute;inset:0;width:100%;height:100%}
.player .vturb-player-placeholder{position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;padding:0!important}
.datos{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px;
width:100%;padding:21px;border:1px solid var(--line);border-radius:var(--r);
background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.dato{display:flex;align-items:center;gap:10px;font-family:var(--ff-d);font-size:14px;white-space:nowrap}
.dato img{width:40px;height:40px}
.stats{display:flex;gap:15px;width:100%}
.stat{
flex:1 0 0;min-width:0;
display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
padding:21px;border:1px solid var(--line);border-radius:var(--r);
background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.stat img{width:60px;height:60px}
/* El icono de las estrellas NO es cuadrado: en el Figma va a su tamaño real
(121x57) y no metido en la caja de 60 de los otros tres. Antes se estiraba
para llenarla. */
.stat img[src$="ico-stars.svg"]{width:121px;height:auto}
/* `tabular-nums`: mientras el numero cuenta, todos los digitos ocupan lo
mismo y la tarjeta no baila. */
.stat b{font-family:var(--ff-d);font-weight:400;font-size:36px;line-height:1.4;font-variant-numeric:tabular-nums}
.stat span{font-weight:700;font-size:16px;line-height:1.4}
.antes-desp{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:934px;text-align:center}
.antes-desp h2{margin:0;font-family:var(--ff-d);font-weight:400;font-size:24px;line-height:1.4;text-transform:uppercase}
.antes-desp h2 .big{font-size:28px}
.antes-desp h2 u{text-decoration-thickness:from-font;text-underline-position:from-font}
.cols{display:flex;gap:60px;width:100%}
.col{
position:relative;flex:1 0 0;min-width:0;
display:flex;flex-direction:column;align-items:center;gap:40px;
padding:61px 41px 41px;border-radius:var(--r);border:1px solid var(--line);
background:linear-gradient(rgba(0,0,0,.1),#111);
-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);
}
/* La pestaña de color que cuelga del borde superior de cada tarjeta. */
.col::before{
content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
width:150px;height:10px;border-radius:0 0 25px 25px;
background:var(--red);box-shadow:0 4px 10px rgba(203,25,39,.5);
}
.col.ok{border-color:var(--green-line);background:var(--green-fill)}
.col.ok::before{background:var(--green);box-shadow:0 4px 10px rgba(6,160,122,.5)}
.col h3{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;
font-family:var(--ff-d);font-weight:400;font-size:36px;text-transform:uppercase}
.col h3 img{width:60px;height:60px}
.col ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
.col li{
display:flex;align-items:center;gap:10px;
padding:5px 15px 5px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
font-size:16px;
}
.col li img{width:40px;height:40px;flex:none}
.col li.full{flex:1 0 100%;justify-content:center}
/* El aspa de la columna "ANTES". En el Figma es el mismo trazo del símbolo "+"
girado 45°, dentro de un círculo con borde rojo. Se replica igual en vez de
redibujar el icono, para que coincida el grosor del trazo. */
.x{position:relative;display:grid;place-items:center;border-radius:50%;
background:rgba(203,25,39,.1);border:1px solid var(--red);flex:none}
.x img{transform:rotate(45deg)}
.x-40{width:34px;height:34px;margin:3px}
.x-40 img{width:18px;height:18px}
.x-60{width:44px;height:44px;margin:8px}
.x-60 img{width:24px;height:24px}
/* ========================================================== 5 · CRONOGRAMA */
.crono{
position:relative;
background:url('/latam/colombia/_assets/img/evento/bg-crono.webp') center/cover no-repeat,var(--black);
padding:100px 0;
}
.crono-in{display:flex;flex-direction:column;align-items:center;gap:60px}
.encabezado{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:934px;margin-inline:auto;text-align:center}
.encabezado h2{margin:0;font-family:var(--ff-d);font-weight:400;font-size:28px;line-height:1.2;text-transform:uppercase}
.encabezado h2 em{font-style:normal;color:var(--gold-1)}
.encabezado p{margin:0;max-width:780px;font-size:18px;font-weight:500;line-height:1.6}
.dias{display:flex;flex-direction:column;gap:30px;width:100%}
.dia{
position:relative;display:flex;align-items:center;gap:60px;
padding:61px;border:1px solid var(--line);border-radius:var(--r);
background:linear-gradient(#000,#101010);
}
/* Pestaña dorada del borde superior. Alterna de lado con la foto: en el Figma
queda siempre sobre la columna de la imagen. */
.dia::before{
content:"";position:absolute;top:-1px;width:214px;height:10px;
border-radius:0 0 25px 25px;background:var(--gold-1);
box-shadow:0 4px 10px rgba(243,186,64,.5);
right:60px;
}
.dia.izq::before{right:auto;left:60px}
.dia > div{flex:1 0 0;min-width:0}
.dia.izq{flex-direction:row-reverse}
.dia .txt{display:flex;flex-direction:column;gap:30px}
.tag-dia{
align-self:flex-start;
background:rgba(243,186,64,.1);border:.5px solid var(--gold-1);border-radius:10px;
padding:10px 20px;font-family:var(--ff-d);font-size:16px;
}
.dia h3{margin:0;font-family:var(--ff-d);font-weight:400;font-size:24px;line-height:1.4}
.dia ul{margin:0;padding-left:24px;font-size:16px;font-weight:500;line-height:1.6}
.dia ul b{font-weight:700}
/* 🔑 Medida FIJA en las tres. Sin ella cada figura se dimensiona sola segun la
proporcion de su foto y los tres bloques dejan de pegar entre si. Las fotos
del cronograma son apaisadas (1100x900), asi que el marco lo es tambien y
`object-fit:cover` recorta lo que sobre. */
.dia figure{
margin:0;flex:0 0 420px;width:420px;aspect-ratio:1100/900;
border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.dia figure img{width:100%;height:100%;object-fit:cover}
/* --- Carrusel de fotos de cada dia -----------------------------------------
El desplazamiento lo hace el navegador: la pista es un contenedor que
scrollea con ajuste por diapositiva, asi que en el movil se arrastra con el
dedo sin JS. El JS solo mueve las flechas y marca el punto activo.
El `overflow` vive aqui, en la figura — nunca en `.crono` ni en `.dias`, que
son ancestros de la tarjeta `sticky` y se lo romperian. */
.crono-car{position:relative}
/* 🔑 Va con `.dia` delante: la lista de viñetas del bloque es `.dia ul`, con
`padding-left:24px`, y esa regla le gana a una clase suelta. Con ese relleno
la diapositiva medía 24px menos que la pista y siempre asomaba un trozo de
la siguiente. */
.dia ul.crono-pista{
list-style:none;margin:0;padding:0;height:100%;
display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-ms-overflow-style:none;
scroll-behavior:smooth;
}
.crono-pista::-webkit-scrollbar{display:none}
/* `start` y no `center`: con el ancho exacto dan lo mismo, pero `start` no
depende de que no sobre ni falte un pixel. */
.crono-pista > li{flex:0 0 100%;height:100%;scroll-snap-align:start}
.crono-flecha{
position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:36px;height:36px;border-radius:50%;cursor:pointer;
display:grid;place-items:center;font-size:22px;line-height:1;
color:#fff;background:rgba(0,0,0,.55);border:1px solid var(--line-soft);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
transition:background .2s ease,opacity .2s ease;
}
.crono-flecha:hover{background:rgba(0,0,0,.8)}
.crono-flecha[disabled]{opacity:.25;cursor:default}
.crono-prev{left:10px}
.crono-next{right:10px}
.crono-puntos{
position:absolute;left:0;right:0;bottom:10px;z-index:2;
display:flex;justify-content:center;gap:7px;
}
.crono-puntos button{
width:7px;height:7px;padding:0;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.4);border:0;transition:background .2s ease,width .2s ease;
}
.crono-puntos button[aria-selected="true"]{background:var(--gold-1);width:18px;border-radius:4px}
/* Sin JS el carrusel sigue sirviendo: se arrastra. Los controles sobran. */
.no-js .crono-flecha,.no-js .crono-puntos{display:none}
/* Las tres tarjetas del cronograma se APILAN al bajar: cada una se queda
pegada arriba y la siguiente se le monta encima, dejando ver el canto de la
anterior. Se hace con `position:sticky` y un tope distinto por tarjeta — sin
JS y sin listener de scroll.
Solo de 1080 para arriba: en un telefono la tarjeta mide casi lo mismo que la
pantalla y apilarlas deja el contenido sin aire.
⚠️ Un ancestro con overflow hidden/clip/auto rompe `sticky`. `.crono` no lo
lleva a proposito. */
@media (prefers-reduced-motion:no-preference){
.dias{gap:0}
/* El fondo tiene que ser opaco o se transparenta la tarjeta de abajo. */
.dia{position:sticky;top:var(--tope);background:linear-gradient(#000,#101010),var(--black)}
.dia:nth-of-type(1){--tope:90px}
.dia:nth-of-type(2){--tope:120px}
.dia:nth-of-type(3){--tope:150px}
.dia + .dia{margin-top:40px}
}
/* En movil el mismo apilado, con topes mucho mas cortos: la tarjeta mide unos
725 sobre una pantalla de 844, asi que si se pega mas abajo se le corta el
pie. Con 16/32/48 la tarjeta entera cabe pegada arriba y la siguiente se le
monta encima igual que en escritorio. */
@media (max-width:1079px) and (prefers-reduced-motion:no-preference){
.dia:nth-of-type(1){--tope:8px}
.dia:nth-of-type(2){--tope:16px}
.dia:nth-of-type(3){--tope:24px}
.dia + .dia{margin-top:20px}
}
/* ============================================================ 6 · SPEAKERS */
.speakers{
position:relative;
background:url('/latam/colombia/_assets/img/evento/bg-speakers.webp') center/cover no-repeat,var(--black);
padding:100px 0;
}
.speakers-in{display:flex;flex-direction:column;align-items:center;gap:60px}
/* La tarjeta grande de Sebas: la foto es el fondo y el texto va en la mitad
derecha. En el Figma la card mide 1380, más ancha que el contenido (1280). */
.spk-hero{
position:relative;display:flex;align-items:center;gap:100px;
width:100%;min-height:620px;padding:60px 60px 60px 40px;
border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
background:var(--panel);
}
.spk-hero .foto{position:absolute;inset:0;z-index:0}
/* `picture` mete un elemento extra entre el contenedor y la imagen: sin esto
la foto no llena la tarjeta. */
.spk-hero .foto picture{display:block;width:100%;height:100%}
.spk-hero .foto img{width:100%;height:100%;object-fit:cover}
.spk-hero .hueco{flex:1 0 0;min-width:0}
.spk-hero .texto{position:relative;z-index:1;flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:40px}
.spk-nombre{
display:inline-flex;align-items:center;gap:10px;
background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 20px;
font-family:var(--ff-d);font-size:22px;line-height:1.4;white-space:nowrap;
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.spk-nombre img{width:20px;height:20px}
.spk-rol{margin:10px 0 0;font-size:14px;font-weight:600;line-height:1.4;color:rgba(255,255,255,.5)}
.spk-bio{margin:0;font-size:16px;font-weight:500;line-height:1.6}
.spk-bio b{font-weight:700}
/* "SABER MÁS" pasa de
a : despliega el resto de la biografia.
Se le quitan los estilos de boton del navegador y se deja como el enlace que
ya parecia. */
.spk-mas{
margin:0;padding:0;border:0;background:none;cursor:pointer;font-family:inherit;
display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
font-size:14px;font-weight:700;color:var(--gold-1);text-decoration:none;
letter-spacing:.02em;transition:color .2s ease;
}
.spk-mas:hover{color:var(--white)}
.spk-mas:focus-visible{outline:2px solid var(--gold-1);outline-offset:4px;border-radius:4px}
/* La flecha gira al abrir. */
.spk-mas::after{
content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s ease;
}
.spk-mas[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}
/* El bloque que se despliega. `grid-template-rows` de 0fr a 1fr es lo que
permite animar hasta una altura que no se sabe de antemano; el `overflow` del
hijo es lo que hace que funcione. */
.spk-extra{
display:grid;grid-template-rows:0fr;
transition:grid-template-rows .38s ease,opacity .28s ease;
opacity:0;
}
.spk-extra > div{overflow:hidden;display:flex;flex-direction:column;gap:20px;min-height:0}
.spk-extra.is-abierto{grid-template-rows:1fr;opacity:1}
@media (prefers-reduced-motion:reduce){
.spk-extra{transition:none}
.spk-mas::after{transition:none}
}
/* 12-sep-2026 · el encabezado de CONTEXTOS dejó de ser texto ("CONTEXTO DE
RIQUEZA ES SOLO PARA...") y ahora abre con el lockup de la marca, igual en
escritorio (556:360) y en móvil (556:191). Es el mismo `.logo-ctx` del hero,
solo que más pequeño. */
.logo-ctx--ceja .l1{width:180px}
.logo-ctx--ceja .l2{width:180px;margin-top:4px}
.speakers h3{margin:0;font-family:var(--ff-d);font-weight:400;font-size:28px;text-align:center;text-transform:none}
.speakers h3 em{font-style:normal;color:var(--gold-1)}
.spk-grid{display:flex;gap:30px;width:100%}
.spk-card{
position:relative;flex:1 0 0;min-width:0;
display:flex;flex-direction:column;justify-content:flex-end;gap:40px;
min-height:560px;padding:300px 30px 30px;
border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
background:var(--panel);
}
.spk-card .foto{position:absolute;inset:0;z-index:0}
.spk-card .foto img{width:100%;height:100%;object-fit:cover}
/* 🔑 Al desplegar una biografia la tarjeta crece, y con `inset:0` + `cover` la
foto se reencuadraba: la cara se movia de sitio. La tarjeta abierta CONGELA
su foto a la altura que tenia cerrada (`--alto-foto`, que mide el JS) y lo
que crece por debajo es el fondo de la tarjeta.
Y mientras hay una abierta, la fila deja de estirar a las hermanas
(`align-items:flex-start`): si no, las otras dos crecian tambien y sus fotos
se reencuadraban igual, ademas de quedarse con un hueco enorme. */
.spk-grid.hay-abierta{align-items:flex-start}
/* Al dejar de estirarse, las hermanas volverian a su alto natural y SU foto
tambien se reencuadraria. Se les fija el alto que tenian. */
.spk-grid.hay-abierta > .spk-card{min-height:var(--alto-tarjeta)}
.spk-hero.is-fija .foto,.spk-card.is-fija .foto{inset:0 0 auto 0;height:var(--alto-foto)}
.spk-hero.is-fija .foto::after,.spk-card.is-fija .foto::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
background:linear-gradient(transparent,#0a0a0a);pointer-events:none;
}
/* Fondo opaco debajo de la foto: el `--panel` es translucido y dejaria ver el
fondo de la seccion justo donde acaba la imagen. */
.spk-hero.is-fija,.spk-card.is-fija{background:linear-gradient(var(--panel),var(--panel)),#0a0a0a}
.spk-card > *:not(.foto){position:relative;z-index:1}
.spk-card .spk-nombre{font-size:22px}
/* =============================================== 7 · TESTIMONIOS Y TICKETS */
/* Al saltar desde un CTA, que el titular no quede pegado al borde. */
#entradas{scroll-margin-top:24px}
.tickets{
/* El carrusel de testimonios mide 100vw y se sale del `.wrap` a proposito.
`100vw` incluye el ancho de la barra de scroll, asi que sin este recorte
la pagina saca barra horizontal en cuanto hay barra vertical. `clip` y no
`hidden` para no crear un contenedor de scroll. */
overflow-x:clip;
position:relative;
background:url('/latam/colombia/_assets/img/evento/bg-tickets.webp') center/cover no-repeat,var(--black);
padding:100px 0;
}
.tickets-in{display:flex;flex-direction:column;align-items:center;gap:60px}
/* Repetición de la clase (solo en la página de Creyentes). */
.repe{
width:100%;max-width:934px;aspect-ratio:1760/900;
border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#000;
box-shadow:0 24px 60px -30px #000;
}
.repe iframe{width:100%;height:100%;display:block;border:0}
/* Carrusel de testimonios. Los cinco videos están en el DOM; solo se muestran
tres (anterior · actual · siguiente) y el `order` los coloca en su sitio, así
navegar no destruye ni recrea el y no se pierde la reproducción.
El del medio va más grande, como en el Figma. */
/* Los tres visibles suman 42+54+42 = 138% mas los gaps: los laterales se
asoman y se recortan a proposito, como en el diseno. El `overflow:hidden`
es lo que impide que ese exceso ensanche el documento y aparezca una barra
de scroll horizontal en toda la pagina. */
/* Carrusel de testimonios (Figma 267:315).
🔑 La fila NO va contenida en el `.wrap`: mide 100vw y se sale de los dos
lados, con los laterales cortados por el borde de la pantalla y difuminados
a negro. Las tres tarjetas miden lo MISMO — el centro no es mas grande; solo
esta entero. Antes el centro iba al 54% y los lados al 42% atenuados. */
.testi{
position:relative;display:flex;align-items:center;justify-content:center;
/* 🔑 Ancho 100% y NO 100vw: el carrusel ya cuelga de la seccion, fuera del
`.wrap`. Con `100vw` + margen negativo quedaba descentrado (a 1920, 327px
a la izquierda), y ademas `100vw` cuenta la barra de scroll, asi que el
centro se corria otros 8px. */
width:100%;
gap:clamp(16px,2vw,39px);overflow:hidden;
margin-top:60px;
}
/* Al salir del `.wrap` el carrusel pierde el `gap` del contenedor: los aires
se ponen a mano, con las mismas medidas que tenia (60 arriba, 40 abajo). */
.testi-nav{margin-top:40px;margin-bottom:60px}
/* El difuminado de los bordes. `pointer-events:none` para no robarle el clic
al video del centro, que llega hasta el 30% de la pantalla. */
.testi::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
/* El Figma (267:416) apaga los laterales hasta el 33% de la pantalla, pero
con video de verdad eso se lee como si los testimonios de los lados
estuvieran en gris. Aqui el degradado queda reducido a un dedo en cada
borde: los videos se ven a plena luz y lo unico que hace es que no corten
en seco contra el canto de la pantalla. */
background:linear-gradient(90deg,var(--black),transparent 11%,transparent 89%,var(--black));
}
.testi-item{display:none;min-width:0}
.testi-item.is-prev,.testi-item.is-act,.testi-item.is-next{display:block;flex:0 0 min(766px,40vw)}
.testi-item.is-prev{order:-1}
.testi-item.is-act{order:0}
.testi-item.is-next{order:1}
.testi-video{
position:relative;border-radius:10px;overflow:hidden;
border:1px solid var(--line);background:#1b1b1b;
}
.testi-item video{width:100%;aspect-ratio:16/9;display:block;object-fit:cover;background:#1b1b1b}
.testi-item.is-act .testi-video{box-shadow:0 18px 60px rgba(0,0,0,.55)}
/* En los laterales el clic sirve para traerlos al centro, asi que ni el video
ni su boton deben capturarlo. */
.testi-item:not(.is-act){cursor:pointer}
.testi-item:not(.is-act) video,
.testi-item:not(.is-act) .testi-play{pointer-events:none}
/* Boton de play del Figma: 94x65, esquinas de 19, gris translucido y triangulo
claro. Sustituye a la barra de controles nativa, que salia puesta en los tres
videos y tapaba la imagen. */
.testi-play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:94px;height:65px;border-radius:19px;border:0;cursor:pointer;
display:grid;place-items:center;color:#d9d9d9;
background:rgba(109,113,114,.4);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
transition:background .2s ease,transform .2s ease;
}
.testi-play:hover{background:rgba(203,25,39,.85);transform:translate(-50%,-50%) scale(1.06);color:#fff}
.testi-play:focus-visible{outline:2px solid var(--gold-1);outline-offset:3px}
.testi-play[hidden]{display:none!important}
.testi-nav{display:flex;align-items:center;justify-content:center;gap:15px;position:relative;z-index:3}
/* Solo las flechas: si no, esta regla le gana en especificidad a .testi-dot
(0,1,1 contra 0,1,0) y los puntos salen del tamano de los botones. */
.testi-nav > button{width:48px;height:48px;border-radius:50%;background:var(--panel);border:1px solid var(--line);
color:#fff;cursor:pointer;display:grid;place-items:center;font-size:18px;transition:border-color .2s,color .2s,background .2s}
.testi-nav > button:hover{border-color:var(--gold-1);color:var(--gold-1)}
/* En el Figma el boton de "siguiente" va resaltado en dorado: es el que se
espera que pulses. */
.testi-nav > button#testi-next{background:rgba(243,186,64,.1);border-color:var(--gold-1);color:var(--gold-1)}
.testi-nav > button#testi-next:hover{background:rgba(243,186,64,.2)}
.testi-dots{display:flex;gap:8px;align-items:center}
/* Los puntos los genera el JS a partir del número real de videos. */
.testi-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;
background:var(--line);cursor:pointer;transition:background .2s ease,transform .2s ease}
.testi-dot.on{background:var(--gold-1)}
.testi-dot:focus-visible{outline:2px solid var(--gold-1);outline-offset:3px}
/* --- Silletería ---------------------------------------------------------- */
/* Medidas del Figma desktop (grupo 993x561): el mapa de silleteria va a
449x561 y las etiquetas son grandes (22px, chip de 52 de alto). Antes el
mapa iba a su tamano natural de 800x1000 y se comia la seccion. */
.silla{display:flex;align-items:center;gap:60px;width:100%;max-width:993px;margin-inline:auto}
.silla h2{margin:0 0 24px;font-family:var(--ff-d);font-weight:400;font-size:24px;line-height:1.3;text-transform:uppercase}
.leyenda{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
/* Medidas del Figma (455:124): pastilla de 52 de alto, corona de 40 y texto de
22 en Monument. Antes el texto iba en Montserrat y la corona a 26: por eso se
veia mas chico y mas fino de lo que pedia el diseño. */
.leyenda .leg{
display:inline-flex;align-items:center;gap:5px;
min-height:52px;padding:5px 20px;border-radius:50px;
font-family:var(--ff-d);font-weight:400;font-size:22px;line-height:1.2;
color:var(--white);cursor:pointer;text-align:left;
border:1px solid var(--line);background:var(--panel);
transition:background-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.leyenda .leg img{width:40px;height:40px;flex:none}
/* Cada nivel con su color, el mismo de sus asientos en el mapa. */
.leg--inner{border-color:#c2ccde;background:rgba(194,204,222,.1)}
.leg--platinum{border-color:#19f1f9;background:rgba(25,241,249,.1)}
.leg--vip{border-color:#ffac2f;background:rgba(255,172,47,.1)}
.leg--general{border-color:#cb1927;background:rgba(203,25,39,.1)}
.leg--inner:hover,.leg--inner.is-on{background:rgba(194,204,222,.24);box-shadow:0 0 0 3px rgba(194,204,222,.15)}
.leg--platinum:hover,.leg--platinum.is-on{background:rgba(25,241,249,.24);box-shadow:0 0 0 3px rgba(25,241,249,.15)}
.leg--vip:hover,.leg--vip.is-on{background:rgba(255,172,47,.24);box-shadow:0 0 0 3px rgba(255,172,47,.15)}
.leg--general:hover,.leg--general.is-on{background:rgba(203,25,39,.28);box-shadow:0 0 0 3px rgba(203,25,39,.18)}
.leyenda .leg:hover,.leyenda .leg.is-on{transform:translateX(6px)}
.leyenda .leg:focus-visible{outline:2px solid var(--gold-1);outline-offset:3px}
/* --- Mapa de asientos: resaltado por nivel ------------------------------- */
/* Dos copias apiladas de la misma imagen. La de abajo se apaga y la de arriba
se recorta con `clip-path` a la franja del nivel, que queda a plena luz. Las
zonas son bandas horizontales limpias en el render, asi que basta un `inset`
con dos porcentajes por nivel. */
.silla figure{margin:0;flex:0 0 449px}
.silla-mapa{position:relative;line-height:0;width:449px}
.silla-mapa img{width:100%;height:auto;display:block}
.silla-base{transition:filter .35s ease}
.silla-foco{
position:absolute;inset:0;opacity:0;pointer-events:none;
clip-path:inset(var(--y1,0%) 0 var(--y2,100%) 0);
filter:brightness(1.14) saturate(1.12) drop-shadow(0 0 16px rgba(243,186,64,.35));
transition:opacity .35s ease,clip-path .35s ease;
}
/* Marco de la franja elegida. Hace falta porque Inner Circle y Platinum son
mesas NEGRAS: subirles el brillo un 14% no se nota, y sin el marco parecia
que el resaltado no funcionaba en esos dos niveles. */
.silla-banda{
position:absolute;left:-2.5%;right:-2.5%;
top:var(--y1,0%);bottom:var(--y2,100%);
border:1px solid rgba(243,186,64,.55);border-radius:12px;
box-shadow:0 0 30px rgba(243,186,64,.3),inset 0 0 40px rgba(243,186,64,.1);
opacity:0;pointer-events:none;
transition:opacity .35s ease,top .35s ease,bottom .35s ease;
}
.silla-mapa.is-foco .silla-base{filter:brightness(.24) saturate(.3)}
.silla-mapa.is-foco .silla-foco{opacity:1}
.silla-mapa.is-foco .silla-banda{opacity:1}
@media (prefers-reduced-motion:reduce){
.silla-base,.silla-foco,.silla-banda,.leyenda .leg{transition:none}
}
/* --- Tarjetas de entrada -------------------------------------------------- */
/* "Precio Normal ⟷ Preventa (Ahorra hasta un 30%)" va en UNA linea. Son unas
34 veces el tamaño de letra mas el interruptor (34) y sus dos huecos (20), y
hay que descontar el aire del `.wrap` (40): de ahi el calculo. */
/* `.encabezado p` ya fija 18/16 y le gana por especificidad: hay que subir la
de esta regla o el `font-size` no se aplica y el texto se sale. */
.encabezado .switch-precio,.switch-precio{
display:flex;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,.6);
flex-wrap:nowrap;white-space:nowrap;text-align:center;
font-size:min(14px,calc((100vw - 94px) / 23.7));
}
.switch-precio img{flex:none}
.switch-precio b{color:#fff}
.switch-precio img{width:34px;height:auto}
.tk-grid{display:flex;gap:30px;width:100%;align-items:flex-start}
/* Por debajo de 1230 las tres tarjetas dejan al CTA sin ancho: "Quiero la
experiencia Platinum" tendria que bajar de 12px para caber en una linea.
Antes de eso, se apilan. */
@media (max-width:1230px){ .tk-grid{flex-wrap:wrap} .tk-grid > .tk{flex:1 1 100%} }
.tk{
--pad-tk:30px;
position:relative;flex:1 0 0;min-width:0;
display:flex;flex-direction:column;gap:20px;
padding:var(--pad-tk);border-radius:var(--r);border:1px solid var(--line);
background:linear-gradient(#0d0d0d,#000);overflow:hidden;
}
/* Pestaña de color del borde superior, del color de cada nivel. */
.tk::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
width:150px;height:10px;border-radius:0 0 25px 25px;background:var(--c);box-shadow:0 4px 10px color-mix(in srgb,var(--c) 50%,transparent)}
.tk--general{--c:#cb1927}
.tk--vip{--c:#f3ba40}
.tk--platinum{--c:#22d3ee}
.tk--inner{--c:#cfd3d6}
/* Esta tarjeta va sola, fuera de .tk-grid: el contenedor es una columna y
ahí `flex:1 0 0` la dejaría con altura 0. */
.tk--inner{flex:none;align-self:center}
.tk-nombre{
align-self:center;display:inline-flex;align-items:center;gap:8px;
border:1px solid var(--c);border-radius:50px;padding:8px 18px;
background:color-mix(in srgb,var(--c) 10%,transparent);
font-family:var(--ff-d);font-size:16px;text-transform:uppercase;color:var(--c);
}
.tk-nombre img{width:20px;height:20px}
/* El bloque del precio va entre dos lineas que cruzan la tarjeta de borde a
borde: se sacan del padding con margen negativo. */
.tk-precio{
margin-inline:calc(var(--pad-tk) * -1);padding:20px var(--pad-tk);
border-block:1px solid var(--line);text-align:center;
}
.tk-precio b{font-family:var(--ff-d);font-weight:400;font-size:44px;line-height:1}
.tk-precio b .cur{font-size:26px}
.tk-precio b span{font-size:20px}
.tk-precio small{display:block;margin-top:6px;font-size:13px;color:rgba(255,255,255,.6)}
.tk-precio small s{color:var(--red);text-decoration-thickness:1px}
/* --- Escalera de precios del Inner Circle (solo en la de Creyentes) ------ */
/* Tres precios en vez de uno: Creyentes arriba, el de estudiantes con cashback
destacado en el centro y el Full tachado abajo. */
.tk-precio--escalera{display:flex;flex-direction:column;align-items:center;gap:12px}
/* Rotulo arriba y cifra debajo, como en el diseno. */
.tk-antes{
display:flex;flex-direction:column;align-items:center;gap:2px;
font-size:17px;font-weight:500;color:rgba(255,255,255,.75);line-height:1.2;
}
.tk-antes b{font-family:var(--ff-d);font-weight:400;font-size:30px;line-height:1;color:var(--white)}
.tk-antes b span{font-size:16px;margin-left:2px}
/* La caja dorada. El resplandor va en un ::before para que no tape el texto. */
.tk-destacado{
position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
/* Ni pegada a los bordes ni suelta: como en el diseno, algo mas de la mitad
de la tarjeta. */
width:100%;max-width:520px;padding:14px 24px;
border:1px solid var(--gold-1);border-radius:14px;
background:linear-gradient(180deg,rgba(243,186,64,.12),rgba(243,186,64,.04));
}
.tk-destacado::before{
content:"";position:absolute;inset:-1px;border-radius:14px;pointer-events:none;
box-shadow:0 0 28px -4px rgba(243,186,64,.45);
}
/* Un destello dorado dando vueltas al borde del precio.
🔑 Hace falta `@property` para poder ANIMAR un ángulo: las variables CSS
normales son cadenas de texto y el navegador no sabe interpolarlas, asi que
sin esto el giro no arranca (se queda en el primer fotograma, que es un
borde dorado normal — degrada bien).
El recorte con dos máscaras y `exclude` es lo que deja solo el filo: sin el,
el degradado llenaria toda la caja y taparia el precio. */
@property --ang{syntax:'';initial-value:0deg;inherits:false}
.tk-destacado::after{
content:"";position:absolute;inset:-1px;border-radius:15px;padding:2px;
pointer-events:none;
background:conic-gradient(from var(--ang),
transparent 0 58%, rgba(243,186,64,.5) 68%, var(--gold-1) 76%,
#fff3d0 80%, var(--gold-1) 84%, rgba(243,186,64,.5) 92%, transparent 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask-composite:exclude;
animation:oroGirando 3.6s linear infinite;
}
@keyframes oroGirando{to{--ang:360deg}}
@media (prefers-reduced-motion:reduce){
.tk-destacado::after{animation:none}
}
.tk-rotulo{
font-size:15px;font-weight:700;line-height:1.2;
background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
}
.tk-precio--escalera .tk-destacado b{
font-size:52px;line-height:1.05;
background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
}
.tk-precio--escalera small{margin-top:0}
.tk ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.4}
.tk li{display:flex;align-items:flex-start;gap:10px}
.tk li img{width:25px;height:25px;flex:none}
/* El texto va en un solo : si los quedaran sueltos dentro del flex,
cada uno seria un item y la linea se reparte con huecos enormes. */
.tk li > span{flex:1 1 auto;min-width:0}
.tk li b{font-weight:700}
/* --- PROTOCOLO 11:11, el beneficio exclusivo de Creyentes ---------------- */
/* Va en las cuatro entradas y solo en /ser-extraordinario-creyentes. Se
destaca de verdad — fondo dorado, filete a la izquierda y la estrella más
grande con brillo — porque es lo único que esa página ofrece y las otras no:
si fuera una viñeta más, se perdería entre las 25 del Inner Circle. */
.tk .tk-11{
align-items:center;gap:12px;
margin:0 -6px 2px;padding:12px 14px;
border-radius:12px;border-left:3px solid var(--gold-1);
background:linear-gradient(90deg,rgba(243,186,64,.16),rgba(243,186,64,.04));
}
.tk .tk-11 img{
width:32px;height:32px;
filter:drop-shadow(0 0 6px rgba(243,186,64,.85));
}
.tk .tk-11 b{
background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;letter-spacing:.02em;
}
/* El sello, en su propia línea para que no empuje al texto. */
.tk-11-sello{
display:block;margin-top:4px;width:max-content;
padding:2px 8px;border:1px solid rgba(243,186,64,.5);border-radius:20px;
font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--gold-1);
}
/* La lista del Inner Circle va a dos columnas: esta fila las cruza entera. */
.tk--inner .tk-11{column-span:all}
/* Dos columnas independientes que se llenan de arriba abajo. Multicolumna y no
grid a proposito: en el Figma las dos columnas NO comparten renglon, cada una
corre a su aire (por eso el reparto sale 14/11 y no 13/12). */
.tk--inner ul{display:block;columns:2;column-gap:30px}
.tk--inner li{display:flex;break-inside:avoid;margin-bottom:14px}
.tk-cta{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:10px}
/* El texto va SIEMPRE en una linea. "Quiero la experiencia Platinum" es el mas
largo: pide 19 px de ancho por cada px de tipografia. Con el container query
el cuerpo se calcula contra el ancho del propio boton, asi que encoge solo
cuando la tarjeta se estrecha en vez de partirse en dos.
El suelo de 12px lo garantiza el breakpoint de .tk-grid mas abajo: por
debajo de 1230 las tarjetas dejan de ir de a tres. */
.tk-cta{container-type:inline-size}
.tk-btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:14px 26px;border-radius:46px;border:none;cursor:pointer;text-decoration:none;
background:var(--c);color:#08090a;font-weight:700;text-transform:uppercase;
font-size:min(14px,calc((100cqw - 88px) / 19.4));
white-space:nowrap;
box-shadow:0 4px 18px -6px var(--c);
}
.tk--general .tk-btn{color:#fff}
.tk-btn img{width:26px;height:26px}
.tk-nota{font-size:11px;color:rgba(255,255,255,.45);text-align:center}
/* Los dos caminos del Inner Circle, uno al lado del otro. Se apilan solos si no
caben. */
.tk-cta-fila{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%}
/* El segundo boton del Inner Circle, el de quien trae cashback. Va en dorado y
no en el color de la tarjeta (plata) para que se lea con el precio dorado de
$2.000, que es justo el suyo. Perfilado y no relleno: el camino de comprar de
una sigue siendo el de arriba. */
.tk-btn--cashback{
background:rgba(243,186,64,.12);color:var(--gold-1);
border:1px solid var(--gold-1);box-shadow:none;
}
.tk-btn--cashback:hover{background:rgba(243,186,64,.2)}
/* --- "Ver más" de Platinum e Inner Circle ------------------------------- */
/* Con las 15 y 25 viñetas a la vista, esas dos tarjetas median el doble que
General y VIP. Se enseñan 8 y el resto se despliega.
Discreto a proposito: es un apoyo, no compite con el boton de comprar. */
.tk-ver-mas{
margin:0;padding:6px 2px;border:0;background:none;cursor:pointer;font-family:inherit;
display:inline-flex;align-items:center;gap:7px;
font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:rgba(255,255,255,.55);transition:color .2s ease;
}
.tk-ver-mas:hover{color:var(--white)}
.tk-ver-mas:focus-visible{outline:2px solid var(--c);outline-offset:3px;border-radius:4px}
.tk-ver-mas::after{
content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s ease;
}
.tk-ver-mas[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}
/* Mismo mecanismo que las biografias: de 0fr a 1fr es lo que permite animar
hasta una altura que no se sabe de antemano. */
.tk-extra{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s ease,opacity .28s ease;opacity:0}
.tk-extra > ul{overflow:hidden;min-height:0}
.tk-extra.is-abierto{grid-template-rows:1fr;opacity:1}
/* El hueco entre la lista de siempre y la que se despliega, igual que entre
viñetas, para que no se note el corte. */
.tk-extra.is-abierto > ul{padding-top:14px}
@media (prefers-reduced-motion:reduce){
.tk-extra{transition:none}
.tk-ver-mas::after{transition:none}
}
/* Cinta diagonal de la esquina ("SOLO 20 CUPOS", "MÁS POPULAR").
La banda tiene que quedar CENTRADA sobre la diagonal de la esquina o el
texto se sale por un lado y `overflow:hidden` se lo come: con ancho W y
altura h, la distancia al vertice es k = top + h/2, y el desplazamiento
lateral debe ser -(W/2 - k). Aqui: W=200, h≈21, top=34 → k≈44 → -56. */
.tk-cinta{position:absolute;top:34px;right:-56px;transform:rotate(45deg);
width:200px;padding:5px 0;text-align:center;font-size:9px;letter-spacing:.08em;font-weight:700;
background:linear-gradient(135deg,#7d6027,#b99447);color:#fff;line-height:1.15}
/* La de la izquierda ("ENTRADAS 2X1") es roja; las de la derecha, bronce. */
.tk-cinta.izq{right:auto;left:-56px;transform:rotate(-45deg);background:linear-gradient(45deg,#5c1119,#a3202c)}
.tk-cinta b{display:block;font-size:7px;font-weight:600;opacity:.85}
/* =========================================================== 8 · UBICACIÓN */
.ubicacion{
position:relative;padding-block:100px;
background:url('/latam/colombia/_assets/img/evento/bg-ubicacion.webp') center top/cover no-repeat,var(--black);
}
.ubicacion-in{display:flex;flex-direction:column;gap:60px}
.ubi-bloque{display:flex;flex-direction:column;align-items:center;gap:60px}
/* El nombre de la ciudad va en "Trushdex", una fuente que no tenemos. Sale
del Figma como trazo (SVG) para no perder el diseño. */
.ciudad{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.ciudad-lg{width:min(730px,100%);height:auto}
/* El apilado (MEDELLIN sobre COLOMBIA) solo existe en el Figma mobile. */
.ciudad-sm{display:none}
.ciudad p{margin:0;max-width:698px;font-size:18px;font-weight:500;font-style:italic;line-height:1.6}
.ubi-datos{display:flex;gap:20px;width:100%}
.ubi-card{
flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:20px;
padding:31px;border:1px solid #333;border-radius:var(--r);
background:linear-gradient(180deg,rgba(0,0,0,.6),#111);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.ubi-card h3{display:flex;align-items:center;gap:10px;margin:0;
font-family:var(--ff-d);font-weight:400;font-size:18px;text-transform:uppercase}
.ubi-card h3 img{width:40px;height:40px;flex:none}
.ubi-card p{margin:0;font-size:18px;line-height:1.6}
.ubi-card p b{font-weight:700}
.ubi-card .nota{margin-top:1.6em;font-size:14px;font-weight:700}
.ubi-mapa{width:100%;height:305px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.ubi-mapa img,.ubi-mapa iframe{width:100%;height:100%;display:block;border:0}
/* El mapa de Google viene en claro y al lado del resto, que es negro, deslumbra.
Se le baja un punto el brillo y se le devuelve al pasar el raton, que es
cuando la persona lo va a usar de verdad. */
.ubi-mapa iframe{filter:brightness(.88) contrast(1.02);transition:filter .3s ease}
.ubi-mapa:hover iframe{filter:none}
/* ============================================================ 9 · CONTEXTOS */
.encabezado .fuerte{font-size:24px;font-weight:700}
.contextos{display:flex;gap:30px;width:100%}
.ctx{
position:relative;flex:1 0 0;min-width:0;
display:flex;flex-direction:column;gap:40px;
padding:61px 41px;border:1px solid #333;border-radius:var(--r);
background:linear-gradient(180deg,var(--black),#111);
}
/* Misma pestaña dorada que cuelga del borde superior en el resto de la página. */
.ctx::before{
content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
width:214px;height:10px;background:var(--gold-1);
border-radius:0 0 25px 25px;box-shadow:0 4px 10px rgba(243,186,64,.5);
}
.ctx h3{display:flex;align-items:center;justify-content:center;gap:20px;margin:0;
font-family:var(--ff-d);font-weight:400;font-size:24px;line-height:1.4;text-transform:uppercase}
.ctx h3 img{width:40px;height:40px;flex:none}
.ctx .areas{margin:-20px 0 0;font-size:18px;font-weight:700;line-height:1.6;
text-align:center;color:rgba(255,255,255,.5)}
.ctx figure{margin:0;height:300px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ctx figure img{width:100%;height:100%;object-fit:cover}
.ctx .desc{margin:0;font-size:18px;line-height:1.6;text-align:center}
/* Flechas y puntos del carrusel de contextos. Solo existen en movil: en
escritorio las dos tarjetas caben una al lado de la otra y no hay nada que
navegar. El JS lo inserta despues de `.contextos`. */
.ctx-nav{display:none;align-items:center;justify-content:center;gap:11px}
.ctx-nav > button{width:27px;height:27px;border-radius:50%;background:transparent;
border:1px solid rgba(255,255,255,.25);color:#fff;cursor:pointer;
display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.ctx-nav > button:hover{border-color:var(--gold-1);color:var(--gold-1)}
.ctx-dots{display:flex;align-items:center;gap:4px}
.ctx-dot{width:4px;height:4px;padding:0;border:0;border-radius:50%;
background:rgba(255,255,255,.35);cursor:pointer;transition:background .2s,transform .2s}
.ctx-dot.on{background:var(--gold-1);transform:scale(1.6)}
.ctx-dot:focus-visible{outline:2px solid var(--gold-1);outline-offset:3px}
/* ============================================================= 10 · SOPORTE */
/* Variante verde del botón principal (WhatsApp). */
.btn--wa .btn-ring{border-color:#56d373}
.btn--wa .btn-pill{
background:linear-gradient(235.28deg,#05ab3d 26.733%,#56d373 94.836%);
filter:drop-shadow(0 -1px 6.3px #56d373);color:var(--black);
}
.btn--wa:hover .btn-pill{filter:drop-shadow(0 -1px 12px #56d373)}
.soporte{
position:relative;padding-block:100px;background:#111;
border-block:1px solid var(--line);
}
/* La foto de fondo va al 20% y encima un velo que oscurece hacia la izquierda,
que es donde se apoya el texto. */
.soporte::before,.soporte::after{content:"";position:absolute;inset:0;pointer-events:none}
.soporte::before{
background:url('/latam/colombia/_assets/img/evento/bg-soporte.webp') center/cover no-repeat;
opacity:.2;
}
.soporte::after{background:linear-gradient(90deg,rgba(0,0,0,.8) 30.4%,rgba(0,0,0,.3) 100%)}
.soporte-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:60px}
.soporte-in > *{flex:1 0 0;min-width:0}
.soporte figure{margin:0;display:flex;justify-content:center}
.soporte figure img{width:342px;height:auto}
.soporte .texto{display:flex;flex-direction:column;gap:30px}
/* Estaba como estilo en linea en el HTML, y por eso no habia forma de
centrarlo en movil: lo de linea le gana a cualquier regla de la hoja. */
.soporte .encabezado{align-items:flex-start;text-align:left;gap:20px;margin-inline:0}
.soporte h2{margin:0;max-width:552px;font-family:var(--ff-d);font-weight:400;font-size:28px;line-height:1.2}
.soporte h2 em{font-style:normal;color:var(--gold-1)}
.soporte .texto > p{margin:0;font-size:18px;line-height:1.6}
.soporte .accion{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.soporte .pie{margin:0;width:417px;max-width:100%;font-size:11px;font-weight:500;text-align:center}
/* ================================================================= 11 · FAQ */
.faq{
position:relative;padding-block:100px;
background:url('/latam/colombia/_assets/img/evento/bg-faq.webp') center/cover no-repeat,var(--black);
}
.faq-in{display:flex;flex-direction:column;align-items:center;gap:60px}
/* El titular monta el lettering "FAQ" detrás de la línea de texto. */
.faq-marca{position:relative;display:flex;flex-direction:column;align-items:center}
.faq-marca img{width:381px;max-width:100%;height:auto}
.faq-marca h2{
margin:-22px 0 0;font-family:var(--ff-d);font-weight:400;font-size:28px;
line-height:1.4;letter-spacing:.69px;text-transform:uppercase;text-align:center;
}
.faq-marca h2 em{font-style:normal;color:var(--gold-1)}
.faq .bajada{margin:0;max-width:780px;font-size:24px;font-weight:700;line-height:1.6;text-align:center}
.faq-lista{display:flex;flex-direction:column;gap:16px;width:100%;max-width:1064px}
.faq-item{
border:0;border-bottom:1px solid var(--gold-1);border-radius:var(--r);
background:#111;overflow:hidden;
}
.faq-item[open]{background:linear-gradient(180deg,#111 33.1%,var(--black) 100%)}
.faq-item summary{
display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:21px 30px;cursor:pointer;list-style:none;
font-size:18px;font-weight:500;line-height:1.35;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary img{width:14px;height:7px;flex:none;transition:transform .2s ease}
.faq-item[open] summary img{transform:rotate(180deg)}
.faq-item .resp{margin:0 30px;padding:20px 0;border-top:1px solid var(--line);
font-size:16px;line-height:1.6}
/* ============================================================== 12 · FOOTER */
.pie-pagina{background:linear-gradient(0deg,var(--black) 2.4%,#111 97.4%)}
.pie-in{display:flex;flex-direction:column;align-items:center;gap:40px;padding-block:60px}
.pie-fila{display:flex;align-items:stretch;justify-content:center;gap:60px;width:100%}
.pie-fila > *{flex:1 0 0;min-width:0;display:flex;flex-direction:column;justify-content:center}
.pie-fila .copy{font-family:var(--ff-d);font-weight:400;font-size:11px}
.pie-marca{align-items:center;gap:20px;flex:none !important}
.pie-marca .logo{width:150px;height:auto}
.pie-sponsors{display:flex;align-items:center;gap:10px;font-size:12px;line-height:1.2}
.pie-sponsors img{height:auto}
.pie-sponsors .whop{width:100px}
/* El SVG de Bullfy es 107x40: a 72px de ancho queda de la misma altura
optica que el de Whop, que va a 100x22. */
.pie-sponsors .bullfy{width:72px}
/* Ojo: `.pie-fila > *` la vuelve un flex en columna, y eso partiría los dos
enlaces en renglones distintos. Se fuerza la fila. */
.pie-legales{flex-direction:row !important;flex-wrap:wrap;align-items:center;justify-content:flex-end;
gap:5px;font-family:var(--ff-d);font-weight:400;font-size:11px;white-space:nowrap}
.pie-legales a{text-decoration:none}
.pie-legales a:hover{color:var(--gold-1)}
/* Monument Extended no trae el ∙, sale en blanco: el separador va en Montserrat. */
.pie-legales .sep{color:#ffba00;font-family:var(--ff)}
.pie-aviso{margin:0;max-width:1062px;font-size:12px;font-weight:300;line-height:1.2;
text-align:center;color:rgba(255,255,255,.5)}
.pie-linea{height:5px;background:var(--gold-grad)}
/* ============================================================================
RESPONSIVE
El diseño de Figma es solo desktop (1280 de contenido). Estos dos cortes
bajan a una columna sin cambiar nada del orden ni del contenido.
============================================================================ */
/* --- Tablet / desktop pequeño (< 1080) ----------------------------------- */
@media (max-width:1079px){
/* 1 · Cabecera */
/* Medidas del Figma mobile (243:6124): la cabecera entera mide 166, no 242.
Eso es lo que hacia que en un telefono de 844 el boton del hero cayera por
debajo del pliegue. Logo 100x37 · contador 336x47 con celdas de 80 y hueco
de 10 entre ellas · pastilla de fecha de 36. */
/* Aire pedido a mano por Alejo, por debajo de lo que marca el Figma: el hueco
entre filas baja de 10 a 6 y el de la cabecera de 15 a 8, para que la fecha
quede mas pegada al contador y a la foto. */
/* 🔑 `align-content:center`. Un flex de varias lineas reparte el hueco sobrante
ENTRE las lineas (`stretch` por defecto): con gap 6 quedaban 18 de separacion
real. Con `center` el hueco es el que se pide y ya. */
.top-in{flex-wrap:wrap;align-content:center;justify-content:center;gap:6px;min-height:0;padding-block:8px}
.top-logo{width:100px}
.count{width:336px;max-width:100%;padding:5px;gap:10px;border-radius:10px}
.count > div{flex:1 1 0;min-width:0}
.count b{font-size:20px;line-height:1}
.count span{margin-top:2px;font-size:8px;letter-spacing:.04em}
/* "MEDELLÍN, 21 Y 22 DE NOVIEMBRE" va en UNA linea y centrada. A 14px partia
en dos y la pastilla se estiraba a todo el ancho. El cuerpo se calcula del
ancho disponible: el texto pide unas 23.8 veces el tamaño de letra, asi que
con (100vw - 72) / 23.8 entra siempre, hasta en pantallas de 320. */
/* Figma: pastilla de 36 de alto y texto de 12. En una linea y centrada; por
debajo de ~390 el cuerpo se encoge solo para no partir. */
.top-fecha{
order:3;align-self:center;white-space:nowrap;
font-size:min(12px,calc((100vw - 80px) / 22.8));
padding:7px 20px;line-height:1.2;
}
/* 2 · Promesa
La foto es un background al 100% del ancho: si el padding sigue siendo de
400px fijos, al encoger la ventana queda una franja negra debajo. */
.promesa{padding-top:31vw}
.promesa h1{font-size:clamp(28px,5.4vw,52px)}
.promesa .sub{font-size:17px}
.spk{font-size:10px;padding:3px 7px}
.spk img{width:11px;height:11px}
/* 4 · Video */
.video-in{gap:50px}
.datos{flex-wrap:wrap;justify-content:center;row-gap:14px}
.stats{flex-direction:column}
.cols{flex-direction:column;gap:40px}
/* 5 · Cronograma */
/* En columna, `align-items:center` encoge la foto a su contenido: hay que
volver a estirarla. */
.dia,.dia.izq{flex-direction:column;align-items:stretch;gap:30px}
.dia figure{flex:0 0 auto;width:100%}
/* En columna la foto va ARRIBA y el texto debajo: al bajar por el movil se
entra por la imagen, no por un muro de vinetas. En el escritorio no toca
nada — alli siguen lado a lado, alternando de lado con `.izq`. */
.dia > figure{order:-1}
.dia::before,.dia.izq::before{left:50%;right:auto;transform:translateX(-50%)}
/* 6 · Speakers */
.spk-hero{flex-direction:column;align-items:stretch;gap:30px;min-height:0;padding:40px 24px}
.spk-hero .hueco{display:none}
/* El velo era de cuando en movil se reusaba la foto apaisada del escritorio y
el texto caia encima de Sebas. Con el recorte vertical propio la mitad de
abajo ya viene oscura, y el Figma (471:524) NO le pone ningun velo: la
tarjeta es solo la foto. Queda un degradado suave en el tercio inferior,
que es donde se apoya el texto, y la cara sin tocar. */
.spk-hero .foto::after{content:"";position:absolute;inset:0;height:auto;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55) 78%)}
.spk-hero .foto{position:absolute}
.spk-grid{flex-wrap:wrap}
.spk-card{flex:1 1 calc(50% - 15px);min-height:420px;padding:200px 24px 24px}
/* 7 · Testimonios y tickets */
/* En móvil solo se ve el actual: cinco videos apilados serían una pared. Y la
fila deja de salirse de la pantalla — sin laterales no hay nada que
difuminar. */
.testi{gap:0;width:100%;margin-top:40px;padding-inline:20px}
.testi-nav{margin-top:30px;margin-bottom:40px}
.testi::after{display:none}
.testi-item.is-prev,.testi-item.is-next{display:none}
.testi-item.is-act{flex:1 1 auto;width:100%}
.testi-play{width:74px;height:52px;border-radius:15px}
.testi-play svg{width:22px;height:22px}
.testi-nav > button{width:42px;height:42px;font-size:16px}
.silla{flex-direction:column;gap:30px;text-align:center}
.leyenda{align-items:center}
/* Figma mobile: titular 18px y chips de 16px con 42 de alto. */
.silla h2{font-size:18px}
.leyenda{align-items:center}
.leyenda .leg{font-size:16px;padding:5px 16px;min-height:42px;gap:6px}
.leyenda .leg img{width:30px;height:30px}
.leyenda .leg:hover,.leyenda .leg.is-on{transform:none}
.silla figure{flex:0 0 auto;max-width:100%}
.silla-mapa{width:100%;max-width:390px;margin-inline:auto}
.tk-grid{flex-wrap:wrap}
.tk{flex:1 1 calc(50% - 15px)}
/* 8 · Ubicación */
.ubi-datos{flex-wrap:wrap}
.ubi-card{flex:1 1 calc(50% - 10px)}
.ubi-mapa{height:240px}
/* 9 · Contextos */
.contextos{flex-direction:column}
.ctx{padding:61px 30px}
/* 10 · Soporte */
/* En una columna todo el bloque de soporte va centrado. */
.soporte-in{flex-direction:column;gap:40px;text-align:center}
.soporte figure img{width:220px}
.soporte .texto{align-items:center}
.soporte .encabezado{align-items:center;text-align:center}
.soporte .accion{align-items:center}
.soporte h2{margin-inline:auto}
/* 12 · Footer */
.pie-fila{flex-direction:column;align-items:center;gap:24px;text-align:center}
.pie-fila > *{flex:none;width:100%;align-items:center}
.pie-fila .copy{text-align:center}
.pie-legales{justify-content:center}
.pie-sponsors{flex-wrap:wrap;justify-content:center}
}
/* --- Móvil (< 720) -------------------------------------------------------- */
@media (max-width:719px){
/* Aquí ya no cabe texto encima de la foto: el contenido arranca debajo.
43.9vw es la altura de la propia imagen (1920x842). */
/* El Figma trae un recorte PROPIO para movil (860x1380, vertical): los cuatro
speakers ya vienen al tamano correcto y no hay que ampliar nada. Antes se
usaba el de escritorio al 200%, que era un apaño mio.
A 430 de ancho la imagen da 690 de alto, que es lo que mide el header del
diseno (688). El padding sale de ahi: 250 sobre 430 = 58.1vw, que a
cualquier ancho deja el titular en el mismo punto respecto de las figuras. */
.promesa{
background-image:url('/latam/colombia/_assets/img/evento/hero-promesa-mobile.webp');
background-size:100% auto;background-position:top center;
padding-top:58.1vw;padding-bottom:60px;
}
/* 24px en el Figma. 23 con nuestro corte Black (mas ancho) devuelve los
mismos 4 renglones, y el `block` hace que el cambio a dorado coincida con
un salto de linea en vez de partir "IMPACTO DISENADA" a mitad. */
/* Los aires del hero se recortan para que el boton entre en la primera
pantalla: en un telefono de 844 se quedaba 39px por debajo del pliegue.
La imagen no se toca — el `padding-top` en vw sigue igual. */
.promesa h1{font-size:19px;margin-top:12px;line-height:1.14}
.promesa h1 .au{display:block}
.promesa .sub{margin-top:6px;font-size:14px;font-weight:400;line-height:1.45}
.promesa .cta{margin-top:20px}
/* El lockup tambien es mas chico en el Figma mobile. */
.logo-ctx{border-radius:5px}
.logo-ctx .l1{width:108px}
.logo-ctx .l2{width:130px}
/* Las etiquetas vuelven a móvil: con el recorte propio del Figma las figuras
salen a buen tamaño y se leen (antes, con la foto de escritorio ampliada,
no había dónde ponerlas).
🔑 Van en `vw` y no en `%`: el `%` se mide contra la altura de la sección,
que aquí incluye titular y botón, mientras que la foto va al 100% del ANCHO
desde arriba. En vw cada etiqueta cae siempre sobre el mismo punto de la
imagen, a cualquier ancho de pantalla. Los números son los del Figma
(243:6035) divididos por 430. */
.spk{display:inline-flex;font-size:clamp(7px,1.75vw,9px);padding:.9vw 1.5vw;gap:1vw;border-radius:1.4vw}
.spk img{width:1.9vw;height:1.9vw}
.spk-1{left:1.6vw;top:38.8vw} /* Vilma */
.spk-2{left:28.8vw;top:34.7vw} /* Sebas */
.spk-3{left:54.7vw;top:44.9vw} /* Nati */
.spk-4{left:77vw;top:38.8vw} /* Tomás */
.logo-ctx .l1{width:112px}
.logo-ctx .l2{width:136px}
.logo-ctx--ceja .l1,.logo-ctx--ceja .l2{width:140px}
.marquee li{font-size:13px;padding-right:16px}
.encabezado h2,.speakers h3,.faq-marca h2,.soporte h2{font-size:21px}
.encabezado p,.antes-desp h2{font-size:16px}
.antes-desp h2 .big{font-size:20px}
.encabezado .fuerte,.faq .bajada{font-size:18px}
.video,.crono,.speakers,.tickets,.ubicacion,.soporte,.faq{padding-block:60px}
.video-in,.crono-in,.speakers-in,.tickets-in,.faq-in,.ubicacion-in,.ubi-bloque{gap:40px}
/* El Figma mobile separa los tres bloques del video con 60, no con 40. */
.video-in{gap:60px}
.player .ph b{font-size:16px}
.dato{font-size:12px}
.dato img{width:30px;height:30px}
/* Figma mobile: los cuatro datos van en 2x2 (tarjetas de 188), no apilados:
en columna la seccion crecia casi 400px de mas. */
.stats{flex-direction:row;flex-wrap:wrap;gap:15px}
.stat{flex:1 1 calc(50% - 7.5px);min-width:0;padding:15px;gap:10px}
.stat img{width:50px;height:50px}
.stat img[src$="ico-stars.svg"]{width:106px;height:auto}
.stat b{font-size:30px}
.stat span{font-size:14px}
/* Antes / Despues: en el Figma cada tarjeta mide 450 (la mia iba por 566).
Lo que sobraba eran los iconos de 40 y el aire entre renglones. */
.cols{gap:30px}
.col{padding:40px 30px 30px;gap:30px}
.col h3{font-size:24px;gap:10px}
.col h3 img{width:40px;height:40px}
.col ul{gap:10px}
.col li{font-size:15px;padding:5px 10px;gap:10px}
.col li img{width:30px;height:30px}
.dia{padding:24px}
/* 180 y no 220: con el apilado, la tarjeta tiene que caber entera en la
pantalla cuando se queda pegada arriba. */
.dia h3{font-size:19px}
.dia ul{font-size:15px}
/* 6 · Speakers — geometria exacta del Figma mobile (471:516).
Alli las tarjetas SON la foto: alto fijo, un velo negro encima y el texto
pegado abajo con 30 de aire. El padding-top de 300 es el hueco que se le
deja a la cara. Se usa min-height (no height) para que si un texto envuelve
un renglon de mas la tarjeta crezca en vez de desbordarse. */
.spk-hero,.spk-card{
display:flex;flex-direction:column;justify-content:flex-end;gap:30px;
min-height:560px;padding:255px 30px 30px;border-radius:10px;
}
.spk-hero{min-height:771px;padding-top:300px;align-items:stretch}
.spk-hero .texto{flex:0 0 auto;gap:30px}
/* En movil entra el recorte vertical propio (spk-sebas-mobile.webp), que ya
viene encuadrado: no hay que desplazarlo. */
.spk-hero .foto img{object-position:center top}
.spk-grid{flex-direction:column;flex-wrap:nowrap;gap:30px}
.spk-card{flex:0 0 auto}
.spk-nombre,.spk-card .spk-nombre{font-size:18px;white-space:normal;padding:10px 15px;gap:10px}
.spk-nombre img{width:15px;height:15px}
.spk-rol{margin-top:10px;font-size:14px}
.spk-bio{font-size:15px}
.spk-mas{font-size:14px}
.tk{flex:1 1 100%;padding:24px}
.tk--inner ul{columns:1}
.tk-precio b{font-size:36px}
.tk-antes{font-size:15px}
.tk-antes b{font-size:24px}
.tk-destacado{padding:12px 16px}
.tk-rotulo{font-size:13px}
.tk-precio--escalera .tk-destacado b{font-size:38px}
.tk-cinta{right:-52px;font-size:8px}
/* El CTA va SIEMPRE en una linea. Esta regla tenia `white-space:normal`, que
es lo que partia en dos "Obtener entrada en preventa" y "Hablar con el
equipo de Sebas" en pantallas estrechas.
El cuerpo se calcula del ancho disponible: el texto mas largo pide 15.9
veces el tamaño de letra, y al hueco hay que restarle el aire del `.wrap`
(40), el del aro (20), el del propio boton (40) y la flecha con su hueco
(36) = 136. Asi entra de una linea hasta por debajo de 320. */
.btn-pill{
height:56px;padding:10px 20px;text-align:center;
white-space:nowrap;
font-size:min(13px,calc((100vw - 136px) / 15.9));
}
.btn-pill img{width:26px;height:26px}
.tk-btn{font-size:12px;padding:12px 18px}
.tk-cta-fila{flex-direction:column;gap:10px}
.tk-cta-fila .tk-btn{width:100%}
.ciudad-lg{width:100%}
.ciudad p{font-size:16px}
/* 12-sep-2026 · el Figma mobile cambió (477:3602): las cuatro fichas vuelven
a UNA columna a ancho completo — estuvieron en dos de 190 — y el mapa baja
de 305 a 166 de alto. */
.ubi-datos{display:flex;flex-direction:column;gap:10px}
.ubi-card{flex:0 0 auto;padding:15px;gap:10px}
.ubi-card h3{font-size:15px;gap:8px}
.ubi-card h3 img{width:30px;height:30px}
.ubi-card p{font-size:14px}
.ubi-card .nota{margin-top:1em;font-size:12px}
.ubi-mapa{height:166px}
/* En móvil el lockup va apilado: MEDELLIN sobre COLOMBIA. */
.ciudad-lg{display:none}
.ciudad-sm{display:block;width:254px;max-width:78%;height:auto}
/* En el Figma mobile los dos contextos NO se apilan: son un carrusel de una
tarjeta con flechas y puntos debajo (nodo 477:3646 + 483:162). Apilados
anadian ~440px de scroll. El desplazamiento es nativo con scroll-snap; el
JS solo sincroniza flechas y puntos. */
.contextos{
flex-direction:row;gap:20px;
overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-ms-overflow-style:none;
}
.contextos::-webkit-scrollbar{display:none}
.ctx-nav{display:flex}
.ctx{flex:0 0 100%;scroll-snap-align:center}
.ctx{padding:40px 20px;gap:30px}
/* "Contexto interno" / "Contexto externo" en UNA linea. Medido: el texto pide
15.2 veces el tamaño de letra, y al ancho hay que restarle el aire del
`.wrap` (40), el de la tarjeta (40) y el numero con su hueco (52) = 132.
A 430 entra a 18; por debajo se encoge lo justo. */
.ctx h3{
flex-wrap:nowrap;white-space:nowrap;
font-size:min(18px,calc((100vw - 132px) / 15.3));gap:12px;
}
.ctx .areas,.ctx .desc{font-size:15px}
.ctx figure{height:300px}
.soporte .pie{width:100%;text-align:center}
.faq-marca img{width:230px}
.faq-marca h2{margin-top:-14px}
.faq-item summary{padding:16px 18px;font-size:15px}
.faq-item .resp{margin-inline:18px;font-size:14px}
.pie-aviso{font-size:11px}
}
/* ============================================================================
POP-UP DE REGISTRO
Lo abren las variantes -org y -form (la -direct nunca lo muestra).
Es el MISMO pop-up de la landing de Creyentes (Figma nodo 162:93) traído tal
cual: mismas medidas (737 de ancho, 105/73.5/90 de padding), mismo vidrio
(relleno .7 + desenfoque 40 + filo de 1px del efecto GLASS del Figma) y el
mismo botón animado. Los tokens ya existen en esta hoja, así que solo se
copian las reglas que faltaban.
============================================================================ */
/* Esta página no tenía .sr-only y las etiquetas del formulario se veían. */
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* ------------------------------ el velo -------------------------------- */
.modal{
position:fixed; inset:0; z-index:120;
display:flex; align-items:center; justify-content:center;
padding:20px;
background:rgba(0,0,0,.78);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
opacity:0; visibility:hidden;
transition:opacity .25s ease, visibility .25s ease;
}
.modal.is-open{opacity:1; visibility:visible}
body.modal-open{overflow:hidden}
.modal-box{
position:relative;
width:100%; max-width:737px;
background:rgba(16,16,16,.7);
border:1px solid rgba(255,255,255,.08);
-webkit-backdrop-filter:blur(40px); backdrop-filter:blur(40px);
border-radius:20px;
padding:105px 73.5px 90px;
max-height:calc(100dvh - 40px);
overflow-y:auto;
transform:translateY(14px) scale(.985);
transition:transform .25s ease;
}
.modal.is-open .modal-box{transform:none}
.modal-close{
position:absolute; top:29px; right:29px;
width:40px; height:40px; padding:0;
border:0; border-radius:50%; background:transparent;
cursor:pointer; line-height:0;
transition:transform .2s ease, filter .2s ease;
}
.modal-close:hover{transform:rotate(90deg); filter:brightness(1.25)}
.modal-close:focus-visible{outline:2px solid var(--gold-1); outline-offset:2px}
/* ------------------------------ titular -------------------------------- */
.modal-head{display:flex; flex-direction:column; gap:20px; text-align:center; margin-bottom:35px}
/* 36px en el Figma; con el corte Black que hay embebido, 32px da el mismo
bloque (ver la nota del @font-face arriba). */
.modal-head h2{
margin:0 auto; max-width:min(470px,100%);
font-family:var(--ff-d); font-weight:400;
font-size:32px; line-height:1.15; color:var(--ink);
}
.modal-head h2 em{
font-style:normal;
background:var(--gold-grad);
-webkit-background-clip:text; background-clip:text;
color:transparent; -webkit-text-fill-color:transparent;
}
.modal-head .sub{font-weight:700; font-size:18px; color:var(--ink)}
.modal-head .sub b{color:var(--gold-1)}
/* ----------------------------- formulario ------------------------------ */
.form{display:flex; flex-direction:column; gap:20px}
.fields{display:flex; flex-direction:column; gap:10px}
.field{
width:100%;
background:#101213;
border:0; border-bottom:2px solid var(--line);
border-radius:5px;
padding:13.765px 8.603px 13.765px 20.647px;
font-family:var(--ff); font-size:12px; line-height:1.5;
color:#fff;
transition:border-color .2s ease, background-color .2s ease;
}
.field::placeholder{color:rgba(255,255,255,.4)}
.field:focus{outline:0; border-bottom-color:var(--gold-1); background:#141618}
/* Teléfono = código de país + número. El selector se dimensiona por su
contenido (`auto`) y el número toma el resto, así el "+593" no aprieta. */
.field-phone{display:grid; grid-template-columns:auto 1fr; gap:8px}
.field-code{
padding-right:8px; font-size:13px; cursor:pointer;
/* Montserrat PRIMERO y los emoji solo como respaldo: si van delante, los
dígitos del prefijo salen de la fuente de emoji y el "+57" se desalinea. */
font-family:var(--ff),'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji';
}
.field-code:focus{outline:0; border-bottom-color:var(--gold-1); background:#141618}
.field-code option{background:#101213; color:#fff}
.form-msg{min-height:1.2em; font-size:13px; text-align:center; color:var(--gold-1)}
.form-msg.err{color:#ff6b76}
.modal-nota{font-size:12px; line-height:1.5; color:rgba(255,255,255,.45); text-align:center}
/* --------------------------- botón animado ----------------------------- */
/* Pastilla roja del Figma sobre la mecánica de uiverse.io/dexter-st/young-newt-20
(MIT): parpadeo letra a letra, brillo superior en hover y halo del anillo.
Es el mismo botón de la landing de Creyentes. */
.cta-ring{
--transition:.4s;
display:block; width:100%;
/* El texto va en una sola línea; el cuerpo se calcula contra el ancho del
propio botón para que nunca se salga. */
container-type:inline-size;
border:1px solid var(--red);
border-radius:46px;
padding:8px 9px;
background:transparent;
cursor:pointer;
transition:border-color var(--transition), box-shadow var(--transition);
font:inherit; color:inherit;
-webkit-tap-highlight-color:transparent;
}
.cta-pill{
position:relative; isolation:isolate;
display:flex; align-items:center; justify-content:center; gap:10px;
min-height:66px; padding:10px 40px;
border-radius:46px;
background-image:var(--btn-grad);
filter:drop-shadow(0 -1px 6.3px var(--red));
transition:filter var(--transition);
overflow:hidden;
}
/* Brillo glossy que baja desde el borde superior. Apagado en reposo. */
.cta-pill::after{
content:""; position:absolute; inset:0;
border-radius:inherit; pointer-events:none; z-index:1;
background-image:linear-gradient(0deg,transparent 60%,hsla(355deg,100%,80%,.35) 88%,#fff 100%);
opacity:0; transition:opacity var(--transition);
}
.cta-txt{
position:relative; z-index:2;
font-family:var(--ff); font-weight:600; line-height:26px;
/* 16px del Figma; el calc solo entra si el botón queda más angosto de lo
previsto. 110px = anillo + padding + flecha + gap. */
font-size:min(16px,calc((100cqw - 110px) / 21));
text-transform:uppercase; white-space:nowrap;
}
/* Cada letra parpadea con un retardo escalonado (--i lo pone el JS). */
.cta-letter{
display:inline-block; color:var(--ink);
animation:cta-letter-anim 2s ease-in-out infinite;
animation-delay:calc(var(--i,0) * .08s);
transition:color var(--transition), text-shadow var(--transition);
}
.cta-letter.is-space{width:.32em}
@keyframes cta-letter-anim{50%{color:#fff; text-shadow:0 0 6px rgba(255,255,255,.55)}}
.cta-arrow{
position:relative; z-index:2; flex:none;
width:32px; height:32px;
animation:cta-flicker 2s linear infinite .5s;
filter:drop-shadow(0 0 2px rgba(255,255,255,.55));
transition:filter var(--transition), transform var(--transition);
}
@keyframes cta-flicker{50%{opacity:.35}}
.cta-ring:hover{border-color:hsla(355deg,100%,80%,.75); box-shadow:0 0 24px -4px hsla(355deg,90%,50%,.55)}
.cta-ring:hover .cta-pill{filter:drop-shadow(0 -2px 12px var(--red))}
.cta-ring:hover .cta-pill::after{opacity:.55}
.cta-ring:hover .cta-letter{animation:none; color:#fff; text-shadow:0 0 4px rgba(255,255,255,.6)}
.cta-ring:hover .cta-arrow{animation:none; transform:translateX(3px); filter:drop-shadow(0 0 5px hsl(355deg,100%,72%))}
.cta-ring:focus-visible{outline:2px solid var(--gold-1); outline-offset:3px; border-color:hsla(355deg,100%,85%,.9)}
.cta-ring:active .cta-pill{filter:drop-shadow(0 -1px 4px var(--red)) brightness(1.08)}
.cta-ring:active .cta-pill::after{opacity:.85}
.cta-ring[disabled]{opacity:.65; cursor:progress}
.cta-ring[disabled] .cta-letter,.cta-ring[disabled] .cta-arrow{animation:none}
@media (prefers-reduced-motion:reduce){
.cta-letter,.cta-arrow{animation:none}
.cta-ring,.cta-pill,.cta-pill::after,.cta-arrow{transition:none}
}
@media (max-width:719px){
.modal-box{padding:44px 20px 32px; border-radius:16px}
.modal-close{top:14px; right:14px; width:34px; height:34px}
.modal-head{gap:14px; margin-bottom:26px}
.modal-head h2{font-size:min(24px,calc((100vw - 80px) / 15))}
.modal-head .sub{font-size:16px}
.cta-pill{min-height:60px; padding:10px 10px}
.cta-txt{font-size:min(14px,calc((100cqw - 75px) / 21)); font-weight:700}
.cta-arrow{width:25px; height:25px}
}
/* ============================================================================
INNER CIRCLE — /ser-extraordinario-inner-circle
Página corta y aparte: el Inner Circle es un programa con entrevista, no una
entrada más. Reusa todo lo de arriba (tarjeta .tk--inner, botones, ceja,
encabezado, soporte y pie); esto es solo lo que le es propio.
============================================================================ */
.ic-hero{
position:relative;
padding:90px 0 80px;
text-align:center;
/* La textura es la misma de la sección de entradas: sin ella este hero era
el único plano negro de todo el embudo y se notaba. */
background:
radial-gradient(760px 420px at 18% 30%,rgba(243,186,64,.12),transparent 66%),
linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,.94)),
url('/latam/colombia/_assets/img/evento/bg-tickets.webp') center/cover no-repeat,
var(--black);
}
/* Hilo dorado al pie del hero, el mismo recurso que separa bloques en el
resto de la página. */
.ic-hero::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(243,186,64,.45),transparent);
}
.ic-hero-in{display:flex;flex-direction:column;align-items:center;gap:22px}
.ic-hero h1{
margin:0;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
font-family:var(--ff-d);font-weight:400;line-height:1.1;text-transform:uppercase;
/* "INNER CIRCLE" va SIEMPRE en una linea. Medido: el texto pide 9.70 veces el
tamaño de letra y la corona 0.66 mas, con 14 de hueco = 10.36·F + 14. Al
ancho hay que restarle los 40 del `.wrap`, de ahi el 10.6 con holgura.
El divisor anterior (9.4) daba 41px a 430 y partia en "INNER" / "CIRCLE". */
font-size:min(56px,calc((100vw - 60px) / 10.6));
}
.ic-hero h1 img{width:.66em;height:.66em;flex:none}
.ic-hero h1 em{
font-style:normal;
background:var(--gold-grad);
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
}
.ic-lead{max-width:760px;margin:0;font-size:18px;line-height:1.6;color:rgba(255,255,255,.85)}
.ic-lead b{color:var(--white)}
/* Mismo tratamiento de precio que las tarjetas de entrada. */
.ic-precio{margin:6px 0 0;display:flex;flex-direction:column;align-items:center;gap:4px}
.ic-precio b{font-family:var(--ff-d);font-weight:400;font-size:64px;line-height:1;display:inline-flex;align-items:flex-start}
.ic-precio .cur{font-size:.55em;margin-top:.18em}
.ic-precio b span{font-size:.34em;align-self:flex-end;margin-bottom:.35em;margin-left:2px}
.ic-precio small{font-size:14px;color:rgba(255,255,255,.6)}
.ic-precio s{color:var(--red);text-decoration-thickness:2px}
/* Los dos botones van uno al lado del otro. Juntos, al tamano normal, piden
~730px y la columna del hero tiene ~610: por eso aqui llevan padding, gap,
cuerpo y flecha mas chicos. Debajo de 1080 ya no caben a ningun tamano
legible y se apilan. */
.ic-cta{display:flex;flex-wrap:nowrap;gap:14px;justify-content:center;margin-top:10px}
.ic-cta .btn{min-width:0}
.ic-cta .btn-pill{height:60px;padding:10px 18px;gap:8px;font-size:14px}
.ic-cta .btn-pill img{width:24px;height:24px}
.ic-cta .btn{border:0;background:transparent;padding:0;cursor:pointer;font:inherit}
.ic-nota{margin:0;font-size:13px;color:rgba(255,255,255,.45)}
/* El precio era el elemento más grande de la página y no tenía dónde apoyarse.
Un filete dorado arriba lo ata al texto y lo separa de los botones. */
.ic-hero-col .ic-precio{
position:relative;width:100%;margin-top:14px;padding-top:24px;
}
.ic-hero-col .ic-precio::before{
content:"";position:absolute;top:0;left:0;width:72px;height:3px;
border-radius:2px;background:var(--gold-grad);
}
/* ------------------------------- qué incluye ---------------------------- */
.ic-incluye{padding:20px 0 90px}
.ic-incluye .encabezado{margin-bottom:40px}
/* La tarjeta hereda el aspecto de .tk--inner; aquí solo se le da el ancho y
se reparte la lista en dos columnas, que con 25 beneficios en una sola
quedaría una tira interminable. */
.ic-card{max-width:1000px;margin-inline:auto;width:100%}
.ic-lista{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;
}
/* Los dos grupos de beneficios. El segundo es el argumento de la página
(lo que no se compra en ningún otro nivel), así que se marca: filete
dorado a la izquierda y fondo apenas más claro. */
.ic-grupo + .ic-grupo{margin-top:34px}
.ic-grupo--solo{
position:relative;padding:26px 0 26px 26px;
border-left:3px solid transparent;border-radius:0 var(--r) var(--r) 0;
background:
linear-gradient(90deg,rgba(243,186,64,.07),rgba(243,186,64,0) 55%);
}
.ic-grupo--solo::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
border-radius:3px;background:var(--gold-grad);
}
.ic-sub{
display:flex;align-items:center;gap:12px;margin:0 0 18px;
font-family:var(--ff-d);font-weight:400;font-size:16px;line-height:1.3;
letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.72);
}
.ic-grupo--solo .ic-sub{
background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
}
/* El contador va aparte del degradado del titular: dentro se volvía ilegible. */
.ic-sub span{
-webkit-text-fill-color:initial;color:rgba(255,255,255,.45);
background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:20px;
padding:3px 10px;font-family:var(--ff);font-size:11px;font-weight:700;letter-spacing:.06em;
}
.ic-card .tk-cta{margin-top:36px}
/* En su propia landing el boton de la tarjeta se veia distinto al del hero
(plateado, el color del nivel). Aqui lleva el mismo rojo de marca que el
resto de CTAs, para que la pagina tenga un solo boton. */
/* Blanco sobre rojo se lee mas fino que el negro sobre claro de las tarjetas de
entrada, y ademas este iba a 14 mientras los otros CTA de la pagina van a 16.
Se iguala al resto. */
.ic-card .tk-btn{
border:1px solid var(--red);cursor:pointer;font:inherit;width:100%;
font-size:16px;font-weight:700;letter-spacing:.01em;
background-image:var(--btn-grad);background-color:transparent;
color:var(--white);padding:18px 26px;
filter:drop-shadow(0 -1px 6.3px var(--red));box-shadow:none;
transition:filter .3s ease,transform .2s ease;
}
.ic-card .tk-btn:hover{filter:drop-shadow(0 -2px 12px var(--red));transform:translateY(-1px)}
@media (max-width:1079px){
.ic-hero{padding:70px 0 50px}
.ic-lead{font-size:17px}
.ic-precio b{font-size:54px}
}
@media (max-width:719px){
/* Menos aire entre la cabecera y la ceja de "SOLO 20 CUPOS". */
.ic-hero{padding:22px 0 36px}
.ic-hero-in{gap:18px}
.ic-lead{font-size:15px}
.ic-precio b{font-size:44px}
.ic-cta{flex-direction:column;align-self:stretch}
.ic-cta .btn,.ic-cta .btn-ring{width:100%}
.ic-cta .btn-pill{width:100%;justify-content:center}
.ic-incluye{padding:10px 0 60px}
.ic-paquete{padding:34px 18px 22px;gap:16px}
.ic-paquete::before{width:150px}
.ic-paquete figcaption{font-size:11px;letter-spacing:.06em}
.ic-hero-col .ic-precio{padding-top:20px;margin-top:8px}
.ic-hero-col .ic-precio::before{left:50%;transform:translateX(-50%)}
/* Una sola columna: a 390px, dos columnas parten cada beneficio en cuatro
renglones y se vuelve ilegible. */
.ic-lista{grid-template-columns:1fr;gap:12px}
.ic-grupo--solo{padding:20px 0 20px 18px}
.ic-grupo + .ic-grupo{margin-top:26px}
.ic-sub{font-size:14px;margin-bottom:14px;flex-wrap:wrap;gap:10px}
}
/* --- Inner Circle · hero a dos columnas --------------------------------- */
/* Textos y botones a la izquierda, la foto del paquete a la derecha. */
.ic-hero-in{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:60px;align-items:center;text-align:left;
}
.ic-hero-col{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.ic-hero .ic-hero-col h1{justify-content:flex-start}
.ic-hero .ic-lead{max-width:none}
.ic-precio{align-items:flex-start}
.ic-cta{justify-content:flex-start}
/* La foto del paquete es un collage oscuro sobre fondo negro: suelta, se
deshacía contra el fondo de la página y parecía un recorte. Va montada en
un panel con halo dorado, para que se lea como una pieza y no como una
imagen pegada.
🔑 `max-width:512px` = su tamaño real. Antes se estiraba a los ~610px de la
columna y se veía borrosa; ampliar un collage con texto diminuto es lo que
más lo afeaba. */
.ic-paquete{
position:relative;margin:0;min-width:0;overflow:hidden;
display:flex;flex-direction:column;align-items:center;gap:20px;
padding:46px 36px 30px;
border:1px solid var(--line);border-radius:var(--r);
background:
radial-gradient(68% 58% at 50% 42%,rgba(243,186,64,.18),transparent 72%),
linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 55%),
rgba(10,10,10,.55);
box-shadow:0 40px 70px -40px #000,inset 0 1px 0 rgba(255,255,255,.06);
}
/* Barra dorada arriba, igual que las tarjetas de contexto y de entrada. */
.ic-paquete::before{
content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
width:214px;height:10px;background:var(--gold-1);
border-radius:0 0 25px 25px;box-shadow:0 4px 10px rgba(243,186,64,.5);
}
.ic-paquete img{
width:100%;max-width:512px;height:auto;display:block;
filter:drop-shadow(0 22px 34px rgba(0,0,0,.65));
}
.ic-paquete figcaption{
display:flex;align-items:center;gap:8px;
font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:rgba(255,255,255,.62);text-align:center;
}
.ic-paquete figcaption b{color:var(--gold-1);font-weight:700}
/* Mientras no exista la foto, el hero vuelve a una sola columna centrada. */
.ic-hero.is-sin-imagen .ic-hero-in{grid-template-columns:1fr;justify-items:center;text-align:center}
.ic-hero.is-sin-imagen .ic-hero-col{align-items:center}
.ic-hero.is-sin-imagen .ic-hero h1,
.ic-hero.is-sin-imagen .ic-precio,
.ic-hero.is-sin-imagen .ic-cta{align-items:center;justify-content:center}
.ic-hero.is-sin-imagen .ic-paquete{display:none}
@media (max-width:1079px){
.ic-hero-in{gap:40px}
}
@media (max-width:1079px){
/* A dos columnas la de texto baja de 410px y los botones ya no caben en
fila. Se pasa a una sola columna (foto debajo): asi recuperan ancho y
siguen uno al lado del otro, que es como se pidieron. */
.ic-hero-in{grid-template-columns:1fr;justify-items:center;text-align:center}
.ic-hero-col{align-items:center}
/* A una columna todo va centrado, tambien el titular: la regla de dos
columnas lo dejaba pegado a la izquierda dentro de su caja. */
.ic-hero .ic-hero-col h1{justify-content:center}
/* El h1 es un flex: "INNER" y el CIRCLE son dos elementos y con
`wrap` se iban a renglones distintos. */
.ic-hero h1{flex-wrap:nowrap;white-space:nowrap}
.ic-cta{justify-content:center}
.ic-precio{align-items:center}
.ic-hero-col .ic-precio::before{left:50%;transform:translateX(-50%)}
.ic-paquete{max-width:600px;width:100%;padding:40px 28px 26px}
.ic-cta .btn-pill{height:66px;padding:10px 26px;gap:10px;font-size:15px}
.ic-cta .btn-pill img{width:28px;height:28px}
}
@media (max-width:639px){
/* Por debajo de esto, en fila quedarian ilegibles: se apilan. */
.ic-cta{flex-wrap:wrap;align-self:stretch}
.ic-cta .btn,.ic-cta .btn-ring{width:100%}
.ic-cta .btn-pill{width:100%;justify-content:center;padding:10px 20px;font-size:15px}
}
@media (max-width:719px){
.ic-hero-in{gap:30px}
.ic-cta{justify-content:center}
}
/* Por debajo de 400 la tarjeta mas larga (la del bloque 3, que tiene seis
vinetas) no cabe pegada arriba: se aprieta un poco mas solo ahi. */
@media (max-width:400px){
.dia{padding:20px;gap:24px}
.dia ul{font-size:14px}
.dia .txt{gap:24px}
}
/* ============================================================================
VARIANTE -video · el VSL manda en el hero
/ser-extraordinario-medellin-video
Es la misma página que las otras tres; lo único que cambia es la cabecera.
El reproductor no se duplica: se MUEVE aquí desde la sección 4 (VTurb liga el
player a un id único y no admite dos copias en la misma página).
Va al final del archivo y con `[data-variante]` a propósito: así le gana a las
media queries del hero sin tener que duplicarlas dentro de cada una.
========================================================================== */
[data-variante="video"] .promesa{
/* Fondo propio de la versión VSL. No es la foto de los speakers: es un
ambiente que se apaga hacia abajo, así que va arriba del todo al 100% de
ancho y el negro de la sección se encarga del resto — sin `cover`, que
recortaría el foco de luz. */
background-image:url('/latam/colombia/_assets/img/evento/hero-vsl.webp');
background-position:center top;
background-size:100% auto;
background-repeat:no-repeat;
padding:56px 0 72px;
}
/* Sin foto no hay caras sobre las que poner las etiquetas de los speakers:
flotarían sobre el negro. */
[data-variante="video"] .spk{display:none}
.hero-video{width:100%;max-width:880px;margin:32px auto 0}
/* Hereda el marco de `.player`; solo se le quita el ancho de la sección 4. */
.hero-video .player{max-width:none}
/* --- Orden del hero en -video ---------------------------------------------
Lockup → video → titular → bajada → botón. Se hace con `order` y no moviendo
el HTML porque el mismo archivo sirve las otras tres variantes, donde el
orden es el de siempre.
`align-items` se queda en stretch (el valor por defecto): con `center` cada
hijo se encogería a su contenido y se perderían los `max-width` y los
márgenes automáticos que centran el titular y la bajada. */
[data-variante="video"] .promesa .wrap{display:flex;flex-direction:column}
[data-variante="video"] .promesa .logo-ctx{order:1;align-self:center}
[data-variante="video"] .hero-video{order:2}
[data-variante="video"] .promesa h1{order:3;margin-top:32px}
[data-variante="video"] .promesa .sub{order:4}
[data-variante="video"] .promesa .cta{order:5}
/* Los tramos de copy que solo valen para una variante.
🔑 Van con `.promesa h1` delante a propósito: las reglas base del titular son
`.promesa h1 .au{display:inline}` y, en móvil, `{display:block}`. Con solo
`.au--video` no se les gana y el remate saldría en las cuatro variantes.
Y se repite el `display` correcto en cada ancho en vez de forzar `inline`,
para que el tramo dorado siga cayendo en su propio renglón en móvil. */
.promesa h1 .au--video{display:none}
[data-variante="video"] .promesa h1 .au--base{display:none}
[data-variante="video"] .promesa h1 .au--video{display:inline}
[data-variante="video"] .promesa .sub-cola{display:none}
@media (max-width:719px){
[data-variante="video"] .promesa h1 .au--video{display:block}
}
/* La sección 4 se queda sin reproductor. Y sin él, el recuadro de fecha/lugar
con su botón quedaba flotando justo después del hero, repitiendo un CTA que
ya está arriba: fuera también. Queda solo la franja de estadísticas. */
[data-variante="video"] .video-top{padding-top:0}
[data-variante="video"] .datos{display:none}
/* El contador solo está aquí, y al hacer scroll desaparecía. En esta variante
la cabecera se queda pegada arriba. El resto de landings siguen con la
cabecera suelta, como se pidió en su momento.
`.top` ya venía preparada (z-index y fondo con desenfoque): lo único que
la ataba era el `position:relative`. */
[data-variante="video"] .top{position:sticky;top:0}
@media (max-width:719px){
[data-variante="video"] .promesa{
/* El diseño trae un recorte vertical propio para móvil. */
background-image:url('/latam/colombia/_assets/img/evento/hero-vsl-mobile.webp');
padding:28px 0 48px;
}
.hero-video{margin-top:20px}
}