/* Landing de Diseño web (/diseno-web/) — se suma a styles.css */
.dw-hero{min-height:88svh}
.dw-h1{font-size:clamp(1.6rem,4.4vw,3.2rem);margin-top:1.2rem;line-height:1.12}
.dw-hero .dw-lead{max-width:640px;margin:1.4rem auto 0;font-size:clamp(1.15rem,2vw,1.5rem);opacity:.95}

/* qué incluye */
.dw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:3rem}
.dw-item{background:var(--paper);padding:1.6rem 1.4rem 1.7rem;border-radius:12px}
.dw-item .num,.dw-steps .num{display:block;font-family:var(--serif);font-size:2rem;line-height:1;letter-spacing:-.03em;margin-bottom:1rem}
.dw-item h3,.dw-steps h3{font-family:var(--wide);font-stretch:150%;font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;line-height:1.35;margin-bottom:.7rem}
.dw-item p,.dw-steps p{font-size:.9rem;line-height:1.6;color:#4a4a4a}
@media (max-width:1000px){.dw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.dw-grid{grid-template-columns:1fr}}

/* proceso */
.dw-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:3rem}
.dw-steps li{border-top:1px solid var(--line-dark);padding-top:1.4rem}
@media (max-width:900px){.dw-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.dw-steps{grid-template-columns:1fr}}

/* trabajos */
.dw-works{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:clamp(10px,1.6vw,20px);margin-top:3rem;align-items:stretch}
.dw-quote{background:var(--ink);color:var(--paper);padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column;justify-content:center;border-radius:4px}
.dw-quote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.35;letter-spacing:-.02em}
.dw-quote figcaption{margin-top:1.4rem;font-size:.85rem;color:#a6a6a6}
.dw-quote figcaption strong{font-weight:400;color:var(--paper)}
@media (max-width:900px){.dw-works{grid-template-columns:1fr 1fr}.dw-quote{grid-column:1 / -1}}

/* brief */
.dw-brief{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(32px,6vw,90px);align-items:start}
.dw-brief-head{position:sticky;top:110px}
.dw-brief-head .h-serif{font-size:clamp(2rem,3.5vw,3rem);line-height:1.08;margin:.8rem 0 1.2rem}
.dw-note{color:#b4b4b4}
@media (max-width:860px){.dw-brief{grid-template-columns:1fr}.dw-brief-head{position:static}}
.dw-form fieldset{border:0;padding:0;margin:0 0 2.4rem}
.dw-form legend{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;font-family:var(--wide);font-stretch:150%;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.2rem;padding:0}
.dw-form legend span{font-family:var(--serif);font-size:1.5rem;letter-spacing:-.02em;text-transform:none}
.dw-form legend small{font-family:var(--sans);font-stretch:normal;font-size:.78rem;letter-spacing:0;text-transform:none;color:#a6a6a6}
.dw-form .q{font-size:.92rem;margin:0 0 .7rem;color:#d6d6d6}
.dw-form .q~.q{margin-top:1.3rem}
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;padding:.62em 1.1em;border:1px solid rgba(255,255,255,.35);border-radius:999px;font-size:.88rem;line-height:1.3;transition:background .2s,color .2s,border-color .2s}
.chips label:hover span{border-color:#fff}
.chips input:checked+span{background:var(--lila);border-color:var(--lila);color:var(--ink)}
.chips input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.dw-hint{margin-top:.9rem;font-size:.85rem;color:var(--lila)}
.dw-form .btn{margin-top:1rem}

/* Imágenes de proyectos y pausa editorial. */
.dw-aspiration{padding:0;display:grid;grid-template-columns:1fr 1fr;background:#b6aec1;color:#1c1c1c;overflow:hidden}
.dw-aspiration-copy{padding:clamp(40px,7vw,110px);align-self:center}
.dw-aspiration-copy .eyebrow{margin-bottom:28px}
.dw-aspiration-copy h2{font-size:clamp(2.3rem,4.6vw,4.8rem);line-height:1.1;max-width:19ch}
.dw-aspiration>img{width:100%;height:clamp(380px,42vw,620px);object-fit:cover;object-position:50% 42%;display:block}
.dw-works.dw-project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
.dw-project{margin:0;min-width:0}
.dw-project img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;background:#ddd}
.dw-project figcaption{padding:16px 0;font-family:var(--wide);text-transform:uppercase;font-size:.8rem;letter-spacing:.08em}
@media(max-width:900px){.dw-works.dw-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.dw-aspiration{grid-template-columns:1fr}.dw-aspiration>img{height:440px}.dw-aspiration-copy{padding:52px 24px}}
@media(max-width:480px){.dw-works.dw-project-grid{grid-template-columns:1fr}}

/* ---- ajustes 15/10: hero como el de la home ---- */
.dw-hero .ph img{object-position:50% 50%}
.dw-hero .dw-lead{font-family:var(--sans);font-style:normal;font-weight:300;font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.65;max-width:560px;margin:1.4rem auto 0;opacity:.92}

/* banner del medio: se ve el celular entero y el título va al tamaño del resto de la web */
.dw-aspiration-copy h2{font-size:clamp(2rem,3.8vw,3.4rem);line-height:1.08}
.dw-aspiration>img{object-position:50% 12%}

/* brief en fondo claro */
#brief .dw-note{color:#4a4a4a}
#brief .field label{opacity:.6}
#brief .field input,#brief .field textarea{border-bottom-color:rgba(28,28,28,.3)}
#brief .field input:focus,#brief .field textarea:focus{border-bottom-color:var(--ink)}
#brief .field input::placeholder,#brief .field textarea::placeholder{color:#8a8a8a}
#brief .dw-form .q{color:#3a3a3a}
#brief .chips span{border-color:rgba(28,28,28,.3);background:var(--paper)}
#brief .chips label:hover span{border-color:var(--ink)}
#brief .chips input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
#brief .chips input:focus-visible+span{outline-color:var(--ink)}
#brief .dw-form legend small{color:var(--muted)}
#brief .consent{color:#6a6a6a}
#brief .btn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#brief .btn.solid:hover{background:transparent;color:var(--ink)}
#brief .dw-form fieldset{margin-bottom:2rem}

/* ---- webs que diseñamos: tarjetas como las de la home, en carrusel ---- */
.dw-carousel{margin-top:3rem}
.dw-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.dw-track::-webkit-scrollbar{display:none}
.dw-track .dw-card{flex:0 0 calc((100% - 40px)/3);aspect-ratio:4/5;scroll-snap-align:start;background:#d8d8d8}
.dw-track .dw-card img{object-fit:cover}
.dw-track div.dw-card{cursor:default}
.dw-track div.dw-card:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.dw-arrows{display:flex;justify-content:center;gap:.8rem;margin-top:1.8rem}
.dw-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:1.1rem;cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.dw-arrow:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.dw-arrow:disabled{opacity:.25;cursor:default}
@media (max-width:900px){.dw-track .dw-card{flex-basis:calc((100% - 20px)/2)}}
@media (max-width:600px){.dw-track{gap:12px}.dw-track .dw-card{flex-basis:78%}}

/* interlineado del título del hero (landing web y catálogo IA) */
.dw-hero .h-serif{line-height:1.12}
.dw-hero .h-serif em{display:inline-block;margin-top:.08em}
@media (max-width:600px){.dw-hero .eyebrow{letter-spacing:.18em;font-size:.62rem}}

/* banner lila centrado, como el resto de la web */
.dw-quote-band{text-align:center;padding:clamp(72px,10vw,130px) 0}
.dw-quote-band .eyebrow{margin-bottom:1.4rem}
.dw-quote-band .h-serif{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.12;max-width:22ch;margin:0 auto}