/* Páginas de caso del portafolio: maquetación de revista (imágenes a sangre, pares asimétricos, vertical junto al texto).
   Neutra a propósito (regla 2026-11-06): negro, grises y crema; sin rojo como resaltador. */
.caso{--cg:clamp(14px,2.4vw,34px);--paper:#f4f2ee;--line:#d9d6cf;--mute:#6b6b6b;background:#fff;color:var(--ink-2)}
.caso .wrap{width:min(1180px,100% - 2*var(--cg));margin-inline:auto}
.caso figure{margin:0;position:relative}
.caso figure img{display:block;width:100%;height:auto;background:var(--paper)}
.caso figcaption{font-size:.78rem;line-height:1.4;color:var(--mute);margin-top:10px;letter-spacing:.01em}
.caso figcaption b{color:var(--ink);font-weight:600}

/* Cabecera editorial */
.caso-head{padding:clamp(34px,6vw,76px) 0 clamp(26px,4vw,48px)}
.caso-crumb{font-size:.8rem;color:var(--mute);margin-bottom:22px}
.caso-crumb a{color:var(--mute);border-bottom:1px solid var(--line)}
.caso-crumb a:hover{color:var(--ink)}
.caso-kicker{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding-bottom:6px;border-bottom:2px solid var(--ink);margin-bottom:22px}
.caso-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cg);align-items:end}
.caso-title{grid-column:1 / span 8}
.caso h1{font-size:clamp(2.1rem,5.2vw,4.3rem);line-height:1.03;letter-spacing:-.03em;margin:0 0 22px;max-width:17ch;text-wrap:balance}
.caso-lead{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.2rem,2.1vw,1.65rem);line-height:1.38;color:var(--ink);max-width:36ch;margin:0}
.caso-facts{grid-column:9 / span 4;border-top:2px solid var(--ink);padding-top:14px;font-size:.88rem}
.caso-facts dl{margin:0;display:grid;gap:12px}
.caso-facts dt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700}
.caso-facts dd{margin:2px 0 0;color:var(--ink);font-weight:500}
.caso-facts a{border-bottom:1px solid var(--ink)}

/* Imagen a sangre */
.caso-bleed{width:100%;background:var(--paper)}
.caso-bleed img{width:100%;height:auto;max-height:78vh;object-fit:cover;object-position:top}
.caso-bleed figcaption{width:min(1180px,100% - 2*var(--cg));margin:10px auto 0;text-align:right}

/* Bloques en rejilla de 12 columnas */
.mag{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cg);padding:clamp(34px,6vw,84px) 0;align-items:start}
.mag--tight{padding-top:clamp(10px,2vw,30px)}

/* A: laptop grande + celular que baja */
.rowA .big{grid-column:1 / span 8}
.rowA .phone{grid-column:9 / span 4;margin-top:clamp(40px,9vw,140px)}
.rowA .phone img{background:transparent;max-width:420px;margin-inline:auto}
.caso--b .rowA .big{grid-column:5 / span 8;grid-row:1}
.caso--b .rowA .phone{grid-column:1 / span 4;grid-row:1;margin-top:clamp(0px,3vw,40px)}

/* Texto en dos columnas con capitular y cita que cruza */
.texto{padding:clamp(26px,4vw,56px) 0}
.texto .cols{column-count:2;column-gap:calc(var(--cg)*1.6);max-width:900px;margin-inline:auto;font-size:1.02rem;line-height:1.75}
.texto .cols p{margin:0 0 1.1em}
.texto .cols p:first-child::first-letter{font-family:"Playfair Display",Georgia,serif;float:left;font-size:4.2rem;line-height:.8;padding:6px 10px 0 0;color:var(--ink);font-weight:700}
.texto blockquote{column-span:all;margin:26px 0;padding:18px 0 0;font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:1.25;color:var(--ink)}
.texto blockquote::before{content:"";display:block;width:44px;height:2px;background:var(--ink);margin-bottom:16px}
.texto blockquote small{display:block;margin-top:10px;font-family:var(--font-title);font-style:normal;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

/* B: cuatro imágenes en dos filas; cada fila suma 12 columnas y mide lo mismo (sin huecos) */
.rowB,.rowD{align-items:stretch}
.rowB figure,.rowD figure{display:flex;flex-direction:column}
.rowB figure img,.rowD figure img{flex:1;min-height:0;object-fit:cover;object-position:center top}
.rowB .ancho{grid-column:1 / span 8;grid-row:1}
.rowB .cuadro{grid-column:9 / span 4;grid-row:1}
.rowB .alto{grid-column:1 / span 4;grid-row:2}
.rowB .detalle{grid-column:5 / span 8;grid-row:2}
.rowB .ancho img{aspect-ratio:1.75}.rowB .cuadro img{aspect-ratio:.85}.rowB .alto img{aspect-ratio:.72}.rowB .detalle img{aspect-ratio:1.48}
.caso--b .rowB .ancho{grid-column:5 / span 8}
.caso--b .rowB .cuadro{grid-column:1 / span 4}
.caso--b .rowB .alto{grid-column:9 / span 4}
.caso--b .rowB .detalle{grid-column:1 / span 8}

/* D: piezas para redes, dos filas de 7 + 5 columnas */
.piezas-h{font-size:clamp(1.4rem,2.4vw,2rem);margin:clamp(30px,5vw,70px) 0 0}
.rowD{padding-top:clamp(20px,3vw,34px)}
.rowD .p1{grid-column:1 / span 7;grid-row:1}.rowD .p2{grid-column:8 / span 5;grid-row:1}
.rowD .p3{grid-column:1 / span 5;grid-row:2}.rowD .p4{grid-column:6 / span 7;grid-row:2}
.rowD .p1 img,.rowD .p4 img{aspect-ratio:1.61}.rowD .p2 img,.rowD .p3 img{aspect-ratio:1.14}
.caso--b .rowD .p1{grid-row:2}.caso--b .rowD .p2{grid-row:2}.caso--b .rowD .p3{grid-row:1}.caso--b .rowD .p4{grid-row:1}
.rowD img{border-radius:6px}

/* Banda de identidad a sangre */
.banda{background:var(--paper);padding:clamp(34px,6vw,84px) 0;border-block:1px solid var(--line)}
.banda .mag{padding:0}
.banda .nota{grid-column:1 / span 4;align-self:center}
.banda .nota h2{font-size:clamp(1.5rem,2.6vw,2.2rem);margin:0 0 12px}
.banda .nota p{margin:0;color:var(--ink-2);line-height:1.65}
.banda figure{grid-column:5 / span 8}
.banda figure img{border-radius:14px;box-shadow:0 22px 50px rgba(0,0,0,.12)}

/* C: celular + qué hicimos */
.rowC .m2{grid-column:2 / span 4}
.rowC .m2 img{background:transparent;max-width:400px;margin-inline:auto}
.rowC .hicimos{grid-column:7 / span 6;align-self:center}
.caso--b .rowC .m2{grid-column:8 / span 4;grid-row:1}
.caso--b .rowC .hicimos{grid-column:1 / span 6;grid-row:1}
.hicimos h2{font-size:clamp(1.5rem,2.6vw,2.2rem);margin:0 0 18px}
.hicimos ol{list-style:none;margin:0;padding:0;counter-reset:h;display:grid}
.hicimos li{counter-increment:h;display:grid;grid-template-columns:44px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line);line-height:1.55}
.hicimos li:last-child{border-bottom:1px solid var(--line)}
.hicimos li::before{content:counter(h,decimal-leading-zero);font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:1.25rem;color:var(--mute)}

/* Acciones, relacionados y cierre */
.caso-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.relac{padding:clamp(34px,5vw,70px) 0;border-top:1px solid var(--line)}
.relac h2{font-size:clamp(1.4rem,2.4vw,2rem);margin:0 0 22px}
.relac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--cg)}
.relac-card{display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.relac-card .im{aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:var(--paper)}
.relac-card .im img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .4s var(--ease)}
.relac-card:hover .im img{transform:scale(1.04)}
.relac-card b{font-weight:700;line-height:1.25}
.relac-card span{font-size:.86rem;color:var(--mute);line-height:1.45}
.relac-post{border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--paper)}
.caso-nota{font-size:.78rem;color:var(--mute);margin:26px 0 0}

@media (max-width:860px){
  .caso-title,.caso-facts{grid-column:1 / -1}
  .rowA .big,.caso--b .rowA .big{grid-column:1 / -1;grid-row:auto}
  .rowA .phone,.caso--b .rowA .phone{grid-column:5 / -1;grid-row:auto;margin-top:-30px}
  .rowA .phone img{max-width:280px;margin-inline:0 0}
  .texto .cols{column-count:1}
  .rowB .ancho,.rowB .cuadro,.rowB .alto,.rowB .detalle,.caso--b .rowB .ancho,.caso--b .rowB .cuadro,.caso--b .rowB .alto,.caso--b .rowB .detalle{grid-column:1 / -1;grid-row:auto}
  .rowD .p1,.rowD .p2,.rowD .p3,.rowD .p4,.caso--b .rowD .p1,.caso--b .rowD .p2,.caso--b .rowD .p3,.caso--b .rowD .p4{grid-column:1 / -1;grid-row:auto}
  .banda .nota,.banda figure{grid-column:1 / -1}
  .rowC .m2,.caso--b .rowC .m2{grid-column:1 / span 7;grid-row:auto}
  .rowC .m2 img{max-width:300px;margin-inline:0}
  .rowC .hicimos,.caso--b .rowC .hicimos{grid-column:1 / -1;grid-row:auto}
}

/* Las capturas con fondo blanco se enmarcan para que no se confundan con la página */
.rowB img,.banda figure img{border:1px solid var(--line);border-radius:6px}
.rowB img{box-shadow:0 14px 34px rgba(0,0,0,.08)}
.rowD img{border:1px solid var(--line)}