/* ED Web · páginas de caso de estudio. Mismo sistema que EDWeb.html */
:root {
    --ink: #141213;
    --ink-2: #1d1a1b;
    --paper: #ffffff;
    --stone: #ebe6df;
    --stone-2: #d9d2c8;
    --red: #a8353a;
    --red-deep: #7f2529;
    --mute: #66605c;
    --mute-light: #b9b2ab;
    --line-soft: #cfc8bf;
    --radius: 28px;
    --gutter: clamp(16px, 4vw, 64px);
    --max: 1320px;
    --header-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.red { color: var(--red); }
mark { background: var(--red); color: #fff; padding: 0 0.14em; white-space: nowrap; }

/* Botones */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 12px 26px; border-radius: 999px;
    font-size: 0.9rem; font-weight: 700; border: 1.5px solid transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-deep); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--stone); }
.btn-line-light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-line-light:hover { background: #fff; color: var(--ink); }
.arrow-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--red); color: #fff; font-size: 0.85rem; flex: none;
    transition: transform .25s ease;
}

/* Cabecera */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--ink); }
.bar { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ed-logo { display: flex; align-items: center; gap: 10px; color: var(--red); }
.ed-logo img { height: 34px; width: auto; }
.ed-logo-bar { width: 2px; height: 34px; background: currentColor; }
.ed-logo-text { font-weight: 700; font-size: 1.75rem; line-height: 1; }
.bar-end { display: flex; align-items: center; gap: 22px; }
.back-link { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid transparent; padding-block: 4px; }
.back-link:hover { border-bottom-color: currentColor; }

/* Portada del caso */
.caso-hero { background: var(--ink); color: #fff; padding: clamp(56px, 8vw, 110px) 0 0; overflow: hidden; }
.caso-hero .eyebrow { color: var(--mute-light); margin-bottom: 22px; }
.caso-hero h1 { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; max-width: 14ch; }
.caso-hero .lede { font-size: clamp(1.2rem, 2.2vw, 1.75rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; max-width: 30ch; margin-top: 28px; color: #e8e3de; }
.browser {
    margin-top: clamp(48px, 6vw, 80px);
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 -10px 60px rgba(0,0,0,.35);
}
.browser-bar { height: 38px; background: #f1ede8; display: flex; align-items: center; gap: 7px; padding-inline: 16px; }
.browser-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--stone-2); }
.browser img { width: 100%; }

/* Ficha */
.ficha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--ink); }
.ficha div { padding: 30px 28px 30px 0; }
.ficha div + div { padding-left: 28px; border-left: 1px solid var(--line-soft); }
.ficha dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.ficha dd { font-size: 1rem; font-weight: 600; line-height: 1.4; }

/* Secciones */
.section { padding: clamp(72px, 10vw, 130px) 0; }
.section-head { max-width: 860px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head .eyebrow { color: var(--red); margin-bottom: 18px; }
.section-title { font-size: clamp(2rem, 4.6vw, 3.8rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }

.partida { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.partida .prose p { font-size: 1.1rem; color: var(--mute); margin-bottom: 18px; }
.partida .prose p:first-child { font-size: 1.35rem; color: var(--ink); font-weight: 600; line-height: 1.45; }
.antes { position: relative; }
.antes img { border-radius: 18px; border: 1px solid var(--line-soft); }
.antes figcaption { margin-top: 14px; font-size: 0.85rem; color: var(--mute); }
.antes .tag { display: inline-block; margin-bottom: 14px; background: var(--ink); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; }
.antes-vacio {
    border-radius: 18px; background: var(--stone); padding: clamp(32px, 4vw, 56px);
    display: flex; flex-direction: column; gap: 14px;
}
.antes-vacio b { font-size: 1.4rem; line-height: 1.25; letter-spacing: -0.01em; }
.antes-vacio span { color: var(--mute); }

/* Lo que hice: filas */
.hice { border-top: 1px solid var(--ink); }
.hice-row {
    display: grid; grid-template-columns: 90px minmax(0, 4fr) minmax(0, 6fr);
    gap: 28px; padding: 34px 0; border-bottom: 1px solid var(--line-soft); align-items: start;
}
.hice-row .num { font-size: 2.2rem; font-weight: 800; color: var(--red); line-height: 1; letter-spacing: -0.04em; }
.hice-row h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.hice-row p { font-size: 1.05rem; color: var(--mute); }

/* Galería */
.galeria { background: var(--stone); }
.galeria-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.shot { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 20px 40px rgba(20,18,19,.08); }
.moviles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin-top: clamp(32px, 4vw, 56px); max-width: 920px; margin-inline: auto; }
.phone { border-radius: 34px; background: var(--ink); padding: 8px; box-shadow: 0 24px 50px rgba(20,18,19,.18); }
.phone img { border-radius: 27px; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; width: 100%; }

/* Resultado */
.resultado { background: var(--ink); color: #fff; }
.resultado .eyebrow { color: var(--mute-light); margin-bottom: 22px; }
.resultado-frase { font-size: clamp(2rem, 5vw, 4.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; max-width: 20ch; }
.resultado-sub { margin-top: 28px; font-size: 1.15rem; color: #d9d4cf; max-width: 46ch; }

/* Llamada a la acción */
.cta { padding: clamp(72px, 9vw, 120px) 0; }
.cta-block { background: var(--red); color: #fff; border-radius: var(--radius); padding: clamp(36px, 6vw, 80px); }
.cta-block h2 { font-size: clamp(1.9rem, 4.2vw, 3.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; max-width: 20ch; }
.cta-block p { margin-top: 18px; font-size: 1.1rem; color: rgba(255,255,255,.9); max-width: 48ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.siguiente { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 40px 0; border-top: 1px solid var(--ink); }
.siguiente small { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.siguiente b { font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -0.02em; }
.siguiente:hover .arrow-dot { transform: translateX(6px); }
.siguiente .arrow-dot { width: 52px; height: 52px; font-size: 1.3rem; }

/* Pie */
.site-footer { background: var(--ink); color: var(--mute-light); padding: 32px 0; font-size: 0.85rem; }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.site-footer .ed-logo { color: #fff; }
.site-footer a:hover { color: #fff; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.caso-hero :focus-visible, .resultado :focus-visible, .cta-block :focus-visible, .site-footer :focus-visible { outline-color: #fff; }

@media (max-width: 900px) {
    .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ficha div:nth-child(3) { padding-left: 0; border-left: 0; }
    .ficha div:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
    .partida { grid-template-columns: minmax(0, 1fr); }
    .hice-row { grid-template-columns: 60px minmax(0, 1fr); }
    .hice-row p { grid-column: 2; }
    .galeria-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    :root { --header-h: 72px; }
    .back-link { display: none; }
    .ficha { grid-template-columns: minmax(0, 1fr); }
    .ficha div, .ficha div + div { padding-left: 0; border-left: 0; }
    .ficha div + div { border-top: 1px solid var(--line-soft); }
    .moviles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .moviles .phone:nth-child(3) { display: none; }
    .browser-bar { height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}