/* caso.css · Macuto en Miami (29-oct-2026, Macuto: «actualiza la página web con el viaje a Miami… y como caso de éxito del DAP»; 31-oct: «centra en mi no en maria luna»).
   La usa /miami/. Encima de styles.css (tokens, nav, botones, pie) y paginas.css (nav de las páginas de acción).
   Flujo: héroe con dos fotos, cifras, la semana día a día con su material, para qué le sirve al DAP, nota honesta y cierre.
   Vídeos: mudos, en bucle y sin controles (criterio de Macuto del 14/15-oct); el script del final de la página los pone en marcha
   al entrar en pantalla y los deja en el póster con «reducir movimiento». */

/* ---------- Héroe ---------- */
.caso-hero{padding:64px 0 80px;overflow:clip}
.caso-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.caso-hero h1{font-size:clamp(2.2rem,4.6vw,3.5rem);font-weight:700;line-height:1.05;margin:14px 0 0;text-wrap:balance}
.caso-hero h1 .hl{color:var(--purple)}
.caso-hero .lead{font-size:clamp(1.02rem,1.8vw,1.16rem);margin:20px 0 0;max-width:34rem}
.caso-hero__fotos{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.caso-hero__fotos figure{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--purple-wash)}
.caso-hero__fotos figure:nth-child(2){margin-top:56px}
.caso-hero__fotos img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.caso-hero__fotos figure{position:relative}
.caso-hero__fotos video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}  /* encima de su foto, que hace de póster */
.caso-hero__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- Cifras ---------- */
.caso-cifras{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.caso-cifras li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 20px;box-shadow:var(--shadow-sm)}
.caso-cifras b{display:block;color:var(--purple);font:700 clamp(1.9rem,3.6vw,2.6rem)/1 'Poppins','Poppins Reserva',sans-serif}
.caso-cifras span{display:block;margin-top:8px;color:var(--ink);font-size:.95rem;line-height:1.4}

/* ---------- La semana, día a día ---------- */
.caso-dias{list-style:none;margin:0;padding:0;display:grid;gap:72px}
.dia{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:20px 48px;align-items:start}
.dia__meta{position:sticky;top:100px}
.dia__fecha{display:block;font:600 .78rem/1.3 'Poppins','Poppins Reserva',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)}
.dia__canal{display:inline-block;margin-top:10px;padding:5px 11px;border-radius:99px;background:var(--purple-wash);color:var(--ink);font-size:.84rem;font-weight:500}
.dia h3{font-size:clamp(1.35rem,2.6vw,1.8rem);font-weight:700;margin:14px 0 0;line-height:1.2}
.dia p{margin:12px 0 0;color:var(--text)}
.dia__fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dia__fotos figure{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--purple-wash)}
.dia__fotos img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.dia__fotos video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}  /* encima de su foto, que hace de póster */
.dia__fotos .ancha{grid-column:span 2}
.dia__fotos .ancha img{aspect-ratio:auto;height:100%;min-height:100%}
.dia__fotos figcaption{position:absolute;left:8px;right:8px;bottom:8px;padding:6px 10px;border-radius:10px;background:rgba(13,10,30,.62);color:#fff;font-size:.78rem;line-height:1.3;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dia__fotos figcaption small{display:block;opacity:.8;font-size:.72rem}

/* ---------- Qué hicimos desde el DAP ---------- */
.caso-dap{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;counter-reset:dap}
.caso-dap li{grid-column:span 2}
.caso-dap li:nth-child(n+4){grid-column:span 3}  /* 3 arriba y 2 más anchas abajo: sin hueco con cinco */
.caso-dap li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--shadow-sm);counter-increment:dap}
.caso-dap li::before{content:counter(dap,decimal-leading-zero);display:block;color:var(--purple);font:700 .9rem/1 'Poppins','Poppins Reserva',sans-serif;letter-spacing:.06em}
.caso-dap b{display:block;margin-top:12px;color:var(--ink);font:600 1.08rem/1.3 'Poppins','Poppins Reserva',sans-serif}
.caso-dap span{display:block;margin-top:8px;color:var(--text);font-size:.95rem}
.caso-nota{margin:28px 0 0;padding:18px 20px;border-left:3px solid var(--line-strong);background:var(--purple-wash);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--text);font-size:.93rem;max-width:52rem}

/* ---------- Cierre ---------- */
.caso-cierre{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:24px 40px;align-items:center}
.caso-cierre h2{color:#fff;font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:700;margin:0}
.caso-cierre p{color:#cdc6e3;margin:12px 0 0;max-width:36rem}
.caso-cierre__acciones{display:flex;flex-wrap:wrap;gap:12px}
.caso-cierre .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.caso-cierre .btn-ghost:hover{border-color:#fff}

/* ---------- Anchos intermedios y móvil ---------- */
@media (max-width:980px){
  .caso-hero__grid{grid-template-columns:1fr;gap:40px}
  .caso-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dia{grid-template-columns:1fr}
  .dia__meta{position:static}
  .caso-dap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .caso-dap li,.caso-dap li:nth-child(n+4){grid-column:auto}
  .caso-dap li:last-child{grid-column:1 / -1}
  .caso-cierre{grid-template-columns:1fr}
}
@media (max-width:600px){
  .caso-hero{padding:40px 0 56px}
  .caso-hero__fotos{gap:10px}
  .caso-hero__fotos figure:nth-child(2){margin-top:32px}
  .caso-dias{gap:56px}
  .dia__fotos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;grid-auto-flow:dense}  /* dense: la foto que queda sola sube junto a la otra */
  /* Días con tres fotos: carril que se desliza con el dedo, como .carril-movil de la portada */
  .dia__fotos--3{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-28px;padding:2px 28px 12px;scroll-padding-inline:28px;scrollbar-width:none}
  .dia__fotos--3::-webkit-scrollbar{display:none}
  .dia__fotos--3 > figure{flex:0 0 min(64%,260px);scroll-snap-align:start}
  .dia__fotos .ancha{grid-column:1 / -1}
  .dia__fotos .ancha img{aspect-ratio:16/9;height:auto}
  .caso-dap{grid-template-columns:1fr}
  .caso-cierre__acciones .btn{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.dia__fotos video,.caso-hero__fotos video{display:none}}

/* Texto solo para lectores de pantalla (títulos de sección que se ven por el diseño) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Entrada al hacer scroll: visible sin JS; con JS, sube al entrar en pantalla (el script del final de la página añade .in) */
.reveal{opacity:1;transform:none}
.js .reveal:not(.in){opacity:0;transform:translateY(24px)}
@media (prefers-reduced-motion:reduce){.js .reveal:not(.in){opacity:1;transform:none}}
.dia__fotos--una{grid-template-columns:minmax(0,260px)}