/* Daniel R. Chapán · Por primera vez en Colombia · estilos de la landing (sale de daniel-chapan-colombia-2026-v3.html) */
/* 1. TOKENS ─ el único sitio con colores escritos a mano */
:root{
  --ch-noche:#00101D;            /* fondo del arte */
  --ch-noche-2:#03212C;          /* fondo del arte, zona clara */
  --ch-panel:#041A26;            /* tarjetas y desplegables */
  --ch-oro:#CEAD57;              /* números, marcos y botón (texto oscuro encima: 9,6:1) */
  --ch-oro-claro:#DDC671;
  --ch-oro-luz:#F3E3A0;           /* brillo superior de los números dorados */
  --ch-oro-hondo:#A8843A;
  --ch-oro-texto:#E6DAAA;        /* texto dorado claro del arte */
  --ch-cian:#2FD3F0;             /* solo brillos y separadores */
  --ch-blanco:#FFFFFF;
  --ch-texto:#D3DCE1;            /* texto corrido: 13:1 sobre la noche */
  --ch-apoyo:#9DB0BB;            /* texto de apoyo: 8:1 sobre la noche */
  --ch-linea:rgba(206,173,87,.32);
  --ch-linea-suave:rgba(211,220,225,.14);

  --ch-nombre:"Bebas Neue", Impact, sans-serif;
  --ch-serifa:"Libre Caslon Text", "Bell MT", Georgia, serif;
  --ch-texto-f:"Montserrat", system-ui, sans-serif;
  --ch-wrap:1180px;
  --ch-calle:clamp(16px,4vw,32px);
  --ch-sec-y:clamp(48px,6vw,88px);
}

/* 2. BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--ch-texto-f);font-size:17px;line-height:1.6;color:var(--ch-texto);
  background:var(--ch-noche);overflow-x:clip}
/* Móvil: cuerpo de texto unificado en 16 px (pedido 2026-09-23) */
@media (max-width:767px){body{font-size:16px}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--ch-cian);outline-offset:3px}
.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}
.saltar{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ch-oro);color:var(--ch-noche);padding:10px 16px;font-weight:700}
.saltar:focus{top:12px}
.wrap{position:relative;max-width:var(--ch-wrap);margin:0 auto;padding:0 var(--ch-calle)}

/* Botones: píldora dorada, como la barra de compra del arte */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;
  font:700 14px/1 var(--ch-texto-f);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  border:2px solid transparent;transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s;cursor:pointer}
.btn--oro{background:linear-gradient(180deg,var(--ch-oro-claro),var(--ch-oro));color:var(--ch-noche)}
.btn--oro:hover{box-shadow:0 0 0 4px rgba(206,173,87,.25),0 0 22px rgba(221,198,113,.45)}
.btn--linea{color:var(--ch-oro-texto);border-color:var(--ch-linea)}
.btn--linea:hover{border-color:var(--ch-oro);color:var(--ch-blanco)}
.btn svg{width:16px;height:16px;flex:none}

/* Encabezado de sección de dos niveles (como Fonseca): etiqueta con filete dorado + título en serifa */
.sec{position:relative;padding:var(--ch-sec-y) 0 0}
.cabeza{margin-bottom:clamp(28px,3.5vw,44px)}
.etiqueta{display:flex;align-items:center;gap:14px;font:600 12px/1.2 var(--ch-texto-f);letter-spacing:.24em;text-transform:uppercase;color:var(--ch-oro);margin-bottom:12px}
.etiqueta::after{content:"";width:72px;height:1px;background:linear-gradient(90deg,var(--ch-oro),transparent)}
.titulo{font:700 clamp(32px,4.4vw,52px)/1.12 var(--ch-serifa);color:var(--ch-blanco);letter-spacing:-.01em}
.titulo em{font-style:normal;color:var(--ch-oro)}
.cabeza--centro{text-align:center}
.cabeza--centro .etiqueta{justify-content:center}
.cabeza--centro .etiqueta::before{content:"";width:72px;height:1px;background:linear-gradient(270deg,var(--ch-oro),transparent)}

/* 3. COMPONENTES */

/* ── INICIO BARRA ─────────────────────────────────────── */
.barra{position:absolute;inset:0 0 auto;z-index:5}
.barra .wrap{display:flex;align-items:center;min-height:72px}
.barra__logo img{height:28px;width:auto}
@media (max-width:559px){.barra__logo img{height:22px}}
/* ── FIN BARRA ── */

/* ── INICIO HERO ──────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:clamp(96px,11vw,120px) 0 clamp(40px,5vw,64px);text-align:center;isolation:isolate}
.hero__fondo,.hero__fondo img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero__fondo img{object-fit:cover;object-position:50% 30%}
/* La foto se funde con el fondo de la página hacia abajo */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,16,29,.35) 0%,rgba(0,16,29,.15) 35%,rgba(0,16,29,.75) 72%,var(--ch-noche) 100%)}

.hero__ante{display:inline-block;font:700 clamp(17px,2.5vw,34px)/1.2 var(--ch-serifa);letter-spacing:.06em;text-transform:uppercase;color:var(--ch-blanco);
  padding:6px clamp(12px,3vw,40px) 14px;position:relative;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.hero__ante span{color:var(--ch-oro);background:linear-gradient(180deg,var(--ch-oro-luz),var(--ch-oro) 55%,var(--ch-oro-hondo));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__ante::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--ch-oro-hondo) 12%,var(--ch-oro-claro) 50%,var(--ch-oro-hondo) 88%,transparent)}

.hero__foto{position:relative;width:clamp(270px,40vw,520px);margin:clamp(20px,3vw,36px) auto 0}
.hero__foto img{width:100%;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 97%);mask-image:linear-gradient(180deg,#000 72%,transparent 97%)}

.hero__nombre{position:relative;margin-top:-.42em;font:400 clamp(64px,11.5vw,156px)/.9 var(--ch-nombre);letter-spacing:.005em;color:var(--ch-blanco);
  text-shadow:0 4px 24px rgba(0,0,0,.55)}
.hero__nombre::after{content:"";display:block;height:2px;width:min(820px,82vw);margin:.14em auto 0;
  background:linear-gradient(90deg,transparent,var(--ch-cian) 30%,var(--ch-cian) 70%,transparent);box-shadow:0 0 14px var(--ch-cian)}
.hero__lema{margin-top:14px;font:700 clamp(18px,2.6vw,32px)/1.3 var(--ch-serifa);letter-spacing:.07em;color:var(--ch-blanco);text-shadow:0 2px 14px rgba(0,0,0,.8)}
/* ── FIN HERO ── */

/* ── INICIO FECHAS (las tarjetas de ciudad del arte) ──── */
.fechas{list-style:none;margin:clamp(32px,4vw,48px) auto 0;padding:0;display:grid;gap:clamp(16px,2vw,24px);max-width:440px;text-align:left}
@media (min-width:1180px){.fechas{grid-template-columns:repeat(3,1fr);max-width:1000px}}
.fecha__marco{display:grid;grid-template-columns:auto auto 1fr;align-items:center;padding:10px clamp(12px,1.3vw,16px);
  border:2px solid var(--ch-oro);border-radius:10px;background:linear-gradient(180deg,#03202D,#000F1A);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px rgba(221,198,113,.3),0 0 22px rgba(206,173,87,.28)}
.fecha__dia{display:flex;flex-direction:column;align-items:center;font-family:var(--ch-serifa);font-weight:700;line-height:.9;text-transform:uppercase;padding-right:clamp(10px,1.1vw,14px)}
.fecha__dia b{font-size:clamp(30px,2.8vw,36px);background:linear-gradient(180deg,var(--ch-oro-luz),var(--ch-oro) 55%,var(--ch-oro-hondo));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fecha__dia span{font-size:clamp(15px,1.3vw,17px);color:var(--ch-blanco);margin-top:3px}
.fecha__ciudad{font:700 clamp(32px,3vw,40px)/1 var(--ch-serifa);color:var(--ch-blanco);text-align:center;padding:3px clamp(10px,1.1vw,14px) 0;
  border-inline:2px solid var(--ch-cian);box-shadow:-6px 0 10px -8px var(--ch-cian),6px 0 10px -8px var(--ch-cian)}
.fecha__lugar{font:700 11px/1.25 var(--ch-serifa);letter-spacing:.05em;text-transform:uppercase;color:var(--ch-blanco);text-align:center;padding-left:clamp(10px,1.2vw,16px)}
.fecha__pie{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 16px;margin-top:10px}
.fecha__hora{flex:1 1 100%;font-size:13px;color:var(--ch-apoyo);text-align:center}
.fecha__hora b{color:var(--ch-oro-texto);font-weight:600}
.fecha__ver{font-size:13px;font-weight:600;color:var(--ch-oro-texto);text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.fecha__ver:hover{color:var(--ch-blanco)}
.fecha .btn{min-height:40px;padding:0 20px;font-size:13px}
.fecha--fin .fecha__marco{filter:grayscale(1);opacity:.55}
.fecha__estado{font:700 13px/1 var(--ch-texto-f);letter-spacing:.08em;text-transform:uppercase;color:var(--ch-apoyo)}
/* ── FIN FECHAS ── */

/* ── INICIO EXPERIENCIA ──────────────────────────────── */
.experiencia__grid{display:grid;gap:clamp(36px,5vw,72px);align-items:center}
@media (min-width:1024px){.experiencia__grid{grid-template-columns:1.15fr .85fr}}
.resena{font:400 clamp(19px,1.9vw,23px)/1.6 var(--ch-texto-f);color:var(--ch-blanco);max-width:34em}
@media (max-width:767px){.resena{font-size:16px}}
.datos{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ch-linea)}
.dato{padding:18px 16px 18px 0;border-bottom:1px solid var(--ch-linea)}
.dato:nth-child(odd){border-right:1px solid var(--ch-linea)}
.dato:nth-child(even){padding-left:20px}
.dato:last-child:nth-child(odd){grid-column:1/-1;border-right:0}  /* dato suelto al final: toma la fila completa */
.dato .k{display:block;font:600 11px/1.3 var(--ch-texto-f);letter-spacing:.2em;text-transform:uppercase;color:var(--ch-oro);margin-bottom:6px}
.dato .v{font:700 clamp(17px,1.6vw,20px)/1.3 var(--ch-serifa);color:var(--ch-blanco)}
/* Los tres datos en una sola fila desde 768 px (pedido 2026-09-23); en móvil siguen 2 + 1.
   Entre 1024 y 1199 px la columna de texto es angosta: ahí el texto baja a 15 px. */
@media (min-width:768px){
  .datos{grid-template-columns:auto auto auto;justify-content:start;width:max-content;max-width:100%}  /* ancho del contenido: los filetes de arriba y abajo miden lo mismo */
  .dato,.dato:nth-child(odd),.dato:nth-child(even){padding:18px 16px;border-right:1px solid var(--ch-linea)}
  .dato:first-child{padding-left:0}
  .dato:last-child,.dato:last-child:nth-child(odd){grid-column:auto;border-right:0;padding-right:0}
  .dato .k{letter-spacing:.14em;white-space:nowrap}
  .dato .v{font-size:17px;white-space:nowrap}  /* 17 y no 18: deja margen si la fuente rinde un poco más ancha (Mac) */
}
@media (min-width:1024px) and (max-width:1199px){
  .dato,.dato:nth-child(odd),.dato:nth-child(even){padding-left:12px;padding-right:12px}
  .dato:first-child{padding-left:0}
  .dato:last-child,.dato:last-child:nth-child(odd){padding-right:0}
  .dato .k{font-size:10px;letter-spacing:.12em}
  .dato .v{font-size:15px}
}
.retrato{position:relative;margin:0 auto;max-width:420px;width:100%}
.retrato{padding:12px;border:1px solid var(--ch-oro);border-radius:18px;box-shadow:0 0 0 1px rgba(221,198,113,.2),0 0 30px rgba(206,173,87,.18)}
.retrato img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:10px}

/* ── FIN EXPERIENCIA ── */

/* ── INICIO PRECIOS ───────────────────────────────────── */
.precios__intro{color:var(--ch-apoyo);margin:-16px 0 28px;max-width:46em}
.ciudad{border:1px solid var(--ch-linea);border-radius:16px;background:rgba(4,26,38,.72);margin-bottom:16px;transition:border-color .15s,box-shadow .15s}
.ciudad[open]{border-color:var(--ch-oro);box-shadow:0 0 26px rgba(206,173,87,.14)}
.ciudad>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:clamp(14px,2vw,28px);
  padding:clamp(16px,2vw,22px) clamp(16px,2.4vw,28px);border-radius:16px}
.ciudad>summary::-webkit-details-marker{display:none}
.ciudad>summary:hover .ciudad__nombre{color:var(--ch-oro-texto)}
.ciudad__dia{font:700 clamp(15px,1.4vw,17px)/1.1 var(--ch-serifa);text-transform:uppercase;letter-spacing:.06em;color:var(--ch-oro);text-align:center;
  border:1px solid var(--ch-linea);border-radius:10px;padding:10px 12px;min-width:74px}
.ciudad__dia b{display:block;font-size:clamp(26px,2.4vw,32px);color:var(--ch-oro)}
.ciudad__nombre{display:block;font:700 clamp(24px,2.6vw,32px)/1.1 var(--ch-serifa);color:var(--ch-blanco);transition:color .15s}
.ciudad__lugar{display:block;font-size:14px;color:var(--ch-apoyo);margin-top:4px}
.ciudad__desde{font-size:13px;color:var(--ch-apoyo);text-align:right;line-height:1.3}
.ciudad__desde b{display:block;font:700 19px/1.2 var(--ch-texto-f);color:var(--ch-oro-texto)}
.ciudad__flecha{width:40px;height:40px;border-radius:50%;border:1px solid var(--ch-linea);display:grid;place-items:center;color:var(--ch-oro);transition:transform .2s}
.ciudad__flecha svg{width:18px;height:18px}
.ciudad[open] .ciudad__flecha{transform:rotate(180deg)}
@media (max-width:639px){
  .ciudad>summary{grid-template-columns:auto 1fr auto}
  .ciudad__desde{grid-column:2/3;grid-row:2;text-align:left;margin-top:-6px}
  .ciudad__desde b{display:inline;font-size:16px}
  .ciudad__flecha{grid-column:3;grid-row:1/3}
}

.ciudad__cuerpo{display:grid;gap:clamp(24px,3vw,40px);padding:clamp(4px,1vw,8px) clamp(16px,2.4vw,28px) clamp(20px,2.6vw,32px);border-top:1px solid var(--ch-linea-suave);padding-top:clamp(20px,2.4vw,28px)}
@media (min-width:1024px){.ciudad__cuerpo{grid-template-columns:1.45fr 1fr;align-items:start}}

.horario{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0 0 24px;background:var(--ch-linea-suave);border:1px solid var(--ch-linea-suave);border-radius:12px;overflow:hidden}
.horario div{background:var(--ch-panel);padding:12px 14px}
.horario dt{font:600 11px/1.3 var(--ch-texto-f);letter-spacing:.14em;text-transform:uppercase;color:var(--ch-oro);margin-bottom:4px}
.horario dd{margin:0;font-weight:600;font-size:15px;color:var(--ch-blanco);line-height:1.35}
@media (max-width:767px){.horario dd{font-size:16px}}
@media (max-width:639px){.horario div{padding:10px 10px}.horario dt{letter-spacing:.08em}}

.tabla{width:100%;border-collapse:collapse}
.tabla th,.tabla td{padding:14px 0;border-bottom:1px solid var(--ch-linea-suave);text-align:left;vertical-align:middle}
.tabla thead th{font:600 11px/1.2 var(--ch-texto-f);letter-spacing:.16em;text-transform:uppercase;color:var(--ch-apoyo);padding-top:0}
.tabla thead th:last-child,.tabla td{text-align:right}
.tabla tbody th{font-weight:600;color:var(--ch-blanco);font-size:16px;padding-right:16px}
.tabla small{display:block;font-weight:400;font-size:13px;color:var(--ch-apoyo);margin-top:2px}
.precio{display:block;font:700 clamp(19px,1.8vw,22px)/1.2 var(--ch-serifa);color:var(--ch-oro-texto);white-space:nowrap}
.servicio{font:600 13px/1 var(--ch-texto-f);letter-spacing:.02em;color:var(--ch-apoyo);white-space:nowrap}
.desglose{display:block;font-size:13px;color:var(--ch-apoyo);white-space:nowrap}
@media (max-width:559px){.tabla td{width:44%}.desglose{white-space:normal}}

.extra{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 24px;margin-top:20px;padding:18px 20px;
  border:1px solid var(--ch-linea-suave);border-radius:10px;background:rgba(47,211,240,.05)}
.extra h3{font:700 19px/1.2 var(--ch-serifa);color:var(--ch-blanco)}
.extra p{font-size:14px;color:var(--ch-apoyo);margin-top:4px}
.extra p+p{margin-top:2px}
.nw{white-space:nowrap}
/* Dos columnas: título y texto a la izquierda; valor y nota a la derecha, separados por un filete */
.extra__precio{text-align:right;padding-left:24px;border-left:1px solid var(--ch-linea-suave)}
.extra__precio .desglose{white-space:nowrap}
@media (max-width:559px){
  .extra{grid-template-columns:1fr}
  .extra__precio{text-align:left;padding:12px 0 0;border-left:0;border-top:1px solid var(--ch-linea-suave)}
}
.ciudad__comprar{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.recinto{margin:0}
.recinto img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:1px solid var(--ch-linea)}
.recinto figcaption{margin-top:12px;font-size:14px;color:var(--ch-apoyo)}
.recinto figcaption b{display:block;font:700 17px/1.3 var(--ch-serifa);color:var(--ch-blanco)}
@media (min-width:640px) and (max-width:1023px){.recinto{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end}.recinto figcaption{margin:0 0 4px}}
/* ── FIN PRECIOS ── */

/* ── INICIO MEET & GREET ──────────────────────────────── */
.extra p a{color:var(--ch-oro-texto);text-underline-offset:3px}
.mg__intro{display:grid;gap:12px;max-width:46em;margin-bottom:clamp(28px,3.5vw,44px)}
.mg__sub{font:700 clamp(18px,1.8vw,22px)/1.3 var(--ch-serifa);color:var(--ch-oro-texto)}
.mg__texto{color:var(--ch-texto)}
.mg__lista{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,2vw,24px)}
@media (min-width:900px){.mg__lista{grid-template-columns:repeat(3,1fr)}}
.mg__tarjeta{display:flex;flex-direction:column;gap:16px;padding:clamp(20px,2.4vw,28px);border:1px solid var(--ch-linea);border-radius:16px;background:rgba(4,26,38,.72)}
.mg__cabeza{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--ch-linea-suave)}  /* fecha siempre debajo de la ciudad */
.mg__ciudad{font:700 clamp(24px,2.4vw,30px)/1.1 var(--ch-serifa);color:var(--ch-blanco)}
.mg__fecha{font:700 15px/1.2 var(--ch-serifa);text-transform:uppercase;letter-spacing:.06em;color:var(--ch-oro)}
.mg__datos{margin:0;display:grid;gap:12px}
.mg__datos dt{font:600 11px/1.3 var(--ch-texto-f);letter-spacing:.14em;text-transform:uppercase;color:var(--ch-oro);margin-bottom:2px}
.mg__datos dd{margin:0;font-size:15px;line-height:1.45;color:var(--ch-blanco)}
.mg__datos dd small{display:block;font-size:14px;color:var(--ch-apoyo)}
.mg__precio{margin-top:auto;padding-top:14px;border-top:1px solid var(--ch-linea-suave)}
.mg__precio .precio{font-size:clamp(24px,2.2vw,28px)}
.mg__nota{margin-top:20px;font-size:14px;color:var(--ch-apoyo)}
/* ── FIN MEET & GREET ── */

/* ── INICIO VIDEO ─────────────────────────────────────── */
/* Miniatura con botón de play; el reproductor (youtube-nocookie) solo carga al hacer clic */
.video{position:relative;display:block;max-width:960px;margin:0 auto;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  border:1px solid var(--ch-oro);background:var(--ch-noche);box-shadow:0 0 0 1px rgba(221,198,113,.2),0 0 34px rgba(206,173,87,.18)}
.video img{width:100%;height:100%;object-fit:cover}
.video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,16,29,0) 55%,rgba(0,16,29,.45));pointer-events:none}
.video__play{position:absolute;inset:0;margin:auto;z-index:1;width:clamp(64px,8vw,88px);height:clamp(64px,8vw,88px);border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--ch-oro-claro),var(--ch-oro));box-shadow:0 0 0 6px rgba(206,173,87,.25),0 8px 30px rgba(0,0,0,.45);transition:transform .2s,box-shadow .2s}
.video__play svg{width:40%;height:40%;fill:var(--ch-noche);margin-left:6%}
.video:hover .video__play{transform:scale(1.06);box-shadow:0 0 0 10px rgba(206,173,87,.2),0 8px 30px rgba(0,0,0,.45)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (prefers-reduced-motion:reduce){.video__play{transition:none}.video:hover .video__play{transform:none}}
/* ── FIN VIDEO ── */

/* ── INICIO GALERÍA ───────────────────────────────────── */
.galeria .cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.flechas{display:flex;gap:10px}
.flecha{width:48px;height:48px;border-radius:50%;border:1px solid var(--ch-linea);background:transparent;color:var(--ch-oro);display:grid;place-items:center;cursor:pointer;transition:border-color .15s,background-color .15s}
.flecha:hover:not(:disabled){border-color:var(--ch-oro);background:rgba(206,173,87,.1)}
.flecha:disabled{opacity:.35;cursor:default}
.flecha svg{width:20px;height:20px}
.carrusel{list-style:none;margin:0;padding:4px 0 16px;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,30%,360px);gap:clamp(14px,2vw,24px);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--ch-oro-hondo) transparent}
.carrusel li{scroll-snap-align:start}
/* Desde 768 px caben tres fotos exactas en el ancho (hoy son tres); con más, se desliza */
@media (min-width:768px){.carrusel{grid-auto-columns:calc((100% - 2 * clamp(14px,2vw,24px)) / 3)}}
.flechas.sin-scroll{display:none}
.carrusel img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:1px solid var(--ch-linea)}
@media (max-width:559px){.carrusel{grid-auto-columns:78%}.flechas{display:none}}
/* ── FIN GALERÍA ── */

/* ── INICIO CIERRE (la barra de compra del arte) ─────── */
.cierre{padding-bottom:clamp(40px,5vw,64px)}
.retrato{margin:0}
.cierre .wrap{container-type:inline-size}
.pildora{display:grid;grid-template-columns:minmax(max-content,1fr) 2px auto 2px minmax(max-content,1fr);align-items:center;justify-items:center;gap:clamp(8px,1.5cqw,18px);max-width:1120px;margin:0 auto;
  padding:22px clamp(14px,2.4cqw,28px);border:2px solid var(--ch-cian);border-radius:999px;background:rgba(0,16,29,.6);
  box-shadow:0 0 18px rgba(47,211,240,.45),inset 0 0 18px rgba(47,211,240,.18)}
.pildora>*{flex:none}
.pildora__sep{width:2px;align-self:stretch;min-height:40px;background:var(--ch-cian);box-shadow:0 0 8px var(--ch-cian)}
.pildora__cocreadores{width:clamp(90px,14cqw,160px);height:auto}
.pildora__compra{display:flex;align-items:center;gap:clamp(6px,1cqw,12px);font-weight:600;font-size:clamp(11px,1.55cqw,18px);color:var(--ch-blanco);white-space:nowrap}
.pildora__compra img{width:clamp(90px,14cqw,160px);height:auto;flex:none}
.pildora__produce{display:flex;align-items:center;gap:clamp(6px,1cqw,12px);font:600 clamp(7px,.75cqw,9px)/1 var(--ch-texto-f);letter-spacing:.18em;text-transform:uppercase;color:var(--ch-blanco);white-space:nowrap}
.pildora__produce img{width:clamp(115px,17cqw,195px);height:auto;flex:none}
@media (max-width:767px){
  .pildora{display:flex;flex-direction:column;border-radius:28px;gap:18px;padding:24px}
  .pildora__sep{width:64px;height:2px;min-height:0;align-self:center}
  .pildora__cocreadores{width:150px}
  .pildora__compra{font-size:14px;gap:8px}
  .pildora__compra img{width:110px}
  .pildora__produce{font-size:9px;gap:10px}
  .pildora__produce img{width:180px}
}
/* ── FIN CIERRE ── */

/* ── INICIO PIE ───────────────────────────────────────── */
.pie{border-top:1px solid var(--ch-linea-suave);padding:28px 0 32px;font-size:14px;color:var(--ch-apoyo);text-align:center}
.pie p+p{margin-top:6px}
.pie b{color:var(--ch-texto);font-weight:600}
@media (max-width:767px){.pie{padding-bottom:104px}}
/* ── FIN PIE ── */

/* ── INICIO BARRA DE COMPRA EN MÓVIL ─────────────────── */
.comprar-movil{display:none}
@media (max-width:767px){
  .comprar-movil{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:20;
    padding:12px var(--ch-calle) calc(12px + env(safe-area-inset-bottom));background:rgba(0,16,29,.94);border-top:1px solid var(--ch-oro);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .comprar-movil span{font-size:13px;line-height:1.35;color:var(--ch-apoyo)}
  .comprar-movil b{display:block;color:var(--ch-blanco);font-size:14px}
  .comprar-movil .btn{min-height:44px;padding:0 20px}
}
/* ── FIN BARRA DE COMPRA EN MÓVIL ── */

/* ── INICIO CUENTA REGRESIVA (fragmento del equipo, 2026-09-25) ── */
#dc-countdown,
#dc-countdown * {
  box-sizing: border-box;
}

#dc-countdown {
  --dc-background: #041a26;
  --dc-background-dark: #00101d;
  --dc-gold: #cead57;
  --dc-gold-light: #e6daaa;
  --dc-white: #ffffff;
  --dc-text: #d3dce1;
  --dc-muted: #9db0bb;

  position: relative;
  width: calc(100% - 32px);
  max-width: 950px;
  margin: 40px auto;
  padding: clamp(32px, 6vw, 60px) clamp(18px, 5vw, 55px);
  overflow: hidden;

  color: var(--dc-text);
  text-align: center;
  font-family: "Montserrat", system-ui, sans-serif;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(47, 211, 240, 0.08),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      var(--dc-background) 0%,
      var(--dc-background-dark) 100%
    );

  border: 1px solid var(--dc-gold);
  border-radius: 16px;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.25),
    inset 0 0 40px rgba(47, 211, 240, 0.025);
}

#dc-countdown::before,
#dc-countdown::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 1px;
  top: 37px;
  opacity: 0.5;
  background: linear-gradient(
    90deg,
    transparent,
    var(--dc-gold),
    transparent
  );
}

#dc-countdown::before {
  left: -25px;
}

#dc-countdown::after {
  right: -25px;
}

.dc-countdown__eyebrow {
  margin-bottom: 14px;
  color: var(--dc-gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
}

.dc-countdown__title {
  margin: 0;
  color: var(--dc-white);
  font-family: "Libre Caslon Text", "Bell MT", Georgia, serif;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.08;
}

.dc-countdown__title span {
  color: var(--dc-gold);
}

.dc-countdown__date {
  margin-top: 17px;
  color: var(--dc-muted);
  font-size: clamp(12px, 2vw, 15px);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.dc-countdown__timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 16px);
  width: 100%;
  max-width: 720px;
  margin: clamp(28px, 5vw, 42px) auto 0;
}

.dc-countdown__unit {
  position: relative;
  min-width: 0;
  padding: clamp(16px, 3vw, 25px) 6px;

  background: rgba(47, 211, 240, 0.04);
  border: 1px solid rgba(206, 173, 87, 0.32);
  border-radius: 10px;
}

.dc-countdown__unit strong {
  display: block;
  color: var(--dc-gold-light);
  font-family: "Libre Caslon Text", "Bell MT", Georgia, serif;
  font-size: clamp(30px, 6vw, 52px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dc-countdown__unit span {
  display: block;
  margin-top: 10px;
  color: var(--dc-muted);
  font-size: clamp(9px, 1.5vw, 12px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dc-countdown__message {
  display: none;
  margin: 28px 0 0;
  color: var(--dc-gold-light);
  font-family: "Libre Caslon Text", "Bell MT", Georgia, serif;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 700;
}

#dc-countdown.dc-countdown--finished .dc-countdown__timer,
#dc-countdown.dc-countdown--finished .dc-countdown__date {
  display: none;
}

#dc-countdown.dc-countdown--finished .dc-countdown__message {
  display: block;
}

@media (max-width: 520px) {
  #dc-countdown {
    width: calc(100% - 20px);
    margin: 24px auto;
    padding: 30px 14px;
    border-radius: 12px;
  }

  #dc-countdown::before,
  #dc-countdown::after {
    display: none;
  }

  .dc-countdown__title br {
    display: none;
  }

  .dc-countdown__timer {
    gap: 6px;
    margin-top: 26px;
  }

  .dc-countdown__unit {
    padding: 16px 3px;
    border-radius: 8px;
  }

  .dc-countdown__unit span {
    letter-spacing: 0.04em;
  }
}

@media (max-width: 340px) {
  .dc-countdown__timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}
/* ── FIN CUENTA REGRESIVA ── */

/* ── INICIO ANIMACIONES ────────────────────────────────────
   Todo va bajo html.anima, que se pone en el <head> solo si el usuario no pidió
   reducir el movimiento. Sin JS o con prefers-reduced-motion la página se ve quieta. */
@keyframes ch-sube{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes ch-aparece{from{opacity:0}to{opacity:1}}
@keyframes ch-acerca{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes ch-foto{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes ch-linea{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ch-nombre{from{opacity:0;letter-spacing:.14em;filter:blur(8px)}to{opacity:1;letter-spacing:.005em;filter:blur(0)}}
@keyframes ch-respira{0%,100%{filter:drop-shadow(0 0 0 rgba(221,198,113,0))}50%{filter:drop-shadow(0 0 26px rgba(221,198,113,.4))}}
@keyframes ch-pulso{0%,100%{box-shadow:0 0 18px rgba(47,211,240,.45),inset 0 0 18px rgba(47,211,240,.18)}50%{box-shadow:0 0 32px rgba(47,211,240,.7),inset 0 0 26px rgba(47,211,240,.3)}}

/* Hero: entra en secuencia al cargar */
.anima .hero__fondo img{animation:ch-aparece 1.2s ease both,ch-acerca 9s cubic-bezier(.2,.6,.2,1) both;translate:0 var(--py,0)}
.anima .hero__ante{animation:ch-sube .8s .15s ease both}
.anima .hero__ante::after{transform-origin:50% 50%;animation:ch-linea 1s .55s cubic-bezier(.6,0,.2,1) both}
.anima .hero__foto{animation:ch-respira 5s 1.6s ease-in-out infinite}
.anima .hero__foto img{animation:ch-foto 1.1s .3s cubic-bezier(.2,.7,.2,1) both}
.anima .hero__nombre{animation:ch-nombre 1.1s .75s cubic-bezier(.2,.7,.2,1) both}
.anima .hero__nombre::after{animation:ch-linea 1s 1.2s cubic-bezier(.6,0,.2,1) both}
.anima .hero__lema{animation:ch-sube .8s 1.3s ease both}
.anima .fecha{animation:ch-sube .7s 1.5s ease both}
.anima .fecha:nth-child(2){animation-delay:1.65s}
.anima .fecha:nth-child(3){animation-delay:1.8s}

/* Entradas al hacer scroll (el JS marca .entra y luego .visible) */
.entradas .entra{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.entradas .entra.visible{opacity:1;transform:none}
/* Fotos: suben y se destapan desde un recorte */
.entradas .entra--foto{transform:scale(.94);clip-path:inset(10% 10% 10% 10% round 16px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1),clip-path .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 110ms)}
/* Al terminar, el recorte queda por fuera de la caja para no cortar el brillo del marco */
.entradas .entra--foto.visible{transform:none;clip-path:inset(-40px -40px -40px -40px round 0)}
/* El filete dorado de cada etiqueta se dibuja al entrar la sección */
.entradas .cabeza.entra .etiqueta::after{transform:scaleX(0);transform-origin:0 50%;transition:transform .9s .35s cubic-bezier(.6,0,.2,1)}
.entradas .cabeza.entra.visible .etiqueta::after{transform:scaleX(1)}

/* Desplegable de ciudad: el contenido entra escalonado al abrir */
.anima .ciudad[open] .ciudad__cuerpo>*{animation:ch-sube .55s ease both}
.anima .ciudad[open] .ciudad__cuerpo>*:nth-child(2){animation-delay:.12s}
.anima .ciudad[open] .tabla tbody tr{animation:ch-sube .45s ease both}
.anima .ciudad[open] .tabla tbody tr:nth-child(2){animation-delay:.06s}
.anima .ciudad[open] .tabla tbody tr:nth-child(3){animation-delay:.12s}
.anima .ciudad[open] .tabla tbody tr:nth-child(4){animation-delay:.18s}

/* Barra de logos: el brillo cian respira */
.anima .pildora{animation:ch-pulso 4s ease-in-out infinite}

/* Hover (quietos con prefers-reduced-motion) */
@media (prefers-reduced-motion:no-preference){
  .fecha__marco{transition:transform .25s ease,box-shadow .25s ease}
  .fecha:hover .fecha__marco{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px rgba(221,198,113,.45),0 0 34px rgba(206,173,87,.45)}
  .carrusel li{overflow:hidden;border-radius:12px}
  .carrusel img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .carrusel li:hover img{transform:scale(1.05)}
  .ciudad>summary:hover .ciudad__flecha{border-color:var(--ch-oro);background:rgba(206,173,87,.1)}
}
/* ── FIN ANIMACIONES ── */