/* =============================================================================
   Mento Agency · desarrollo-web.css (solo /desarrollo-web/)
   Se carga después de sitio.css. Reutiliza superficies, botones, .browser, .plate,
   .web-cards, .m-path y .steps; aquí van solo la composición y los ajustes propios.
   Identidad de la página: durazno (la m del héroe, la banda) y los proyectos reales
   en navegadores como protagonistas.

   1 Héroe con pila de navegadores   4 Proyectos en zigzag   7 Movimiento
   2 Banda                           5 Proceso               8 Responsive
   3 Servicios                       6 Web + pauta           9 Ajustes compartidos
   ========================================================================== */


/* ---------- 1 Héroe ------------------------------------------------------ */
.dw-hero .page-hero-m{fill:var(--durazno)}
.dw-hero .kicker{margin-top:1.4rem}
.dw-hero .display-2{margin-top:.28em}
.dw-hero .page-hero-media{max-width:560px}

/* Tres capturas reales en navegador, escalonadas e inclinadas sobre la m */
.dw-stack{aspect-ratio:1/1}
.dw-shots{position:absolute;inset:0}
.dw-b{position:absolute}
.dw-b .browser{box-shadow:0 26px 44px -22px rgba(35,46,92,.62),0 0 0 1.5px rgba(35,46,92,.14)}
.dw-b1{left:0;top:10%;width:84%;rotate:-4deg;z-index:1}
.dw-b2{right:0;top:43%;width:70%;rotate:3deg;z-index:2}
.dw-b3{left:5%;top:72%;width:48%;rotate:-2deg;z-index:3}
.dw-stack .sticker{left:auto;top:auto;right:3%;bottom:-3%;z-index:4;width:clamp(104px,10.5vw,146px);transform:rotate(10deg)}
/* En una columna (≤900) la m vive dentro de la pila (como .collage-m en el inicio)
   para que sus arcos queden siempre entre los botones y el primer navegador */
.dw-stack-m{display:none;position:absolute;z-index:0;fill:var(--durazno);pointer-events:none;aspect-ratio:277/188}
/* "50+" usa .st-big-n (sitio.css) a un cuerpo mayor */
.dw-st-num{font-size:50px;letter-spacing:-.04em}
/* Rótulo bajo "50+" más grande (unidades del viewBox): ~12 px a 1024 y en el teléfono */
.dw-stack .st-c1{font-size:22px}


/* ---------- 2 Banda (durazno, inclinada al revés que en el inicio) ------- */
.dw-band .band{background:var(--durazno);transform:rotate(1.4deg)}
.dw-band .band li svg{fill:var(--navy)}


/* ---------- 3 Servicios -------------------------------------------------- */
.dw-servicios .wc .checks{margin-bottom:1.75rem}
.dw-servicios .wc .tile-link{margin-top:auto}


/* ---------- 4 Proyectos en zigzag ---------------------------------------- */
.pj-list{display:grid;gap:clamp(4.5rem,9vw,8rem);margin-top:clamp(3rem,6vw,5rem)}
.pj{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem clamp(2rem,5vw,5rem);align-items:center}
.pj:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.pj:nth-child(even) .pj-media{order:2}
/* Placa de color con la esquina exterior en arco (la curva de la m) */
.pj-media{padding:clamp(1.25rem,4vw,3.5rem);border-radius:var(--r-card) clamp(80px,14vw,210px) var(--r-card) var(--r-card)}
.pj:nth-child(even) .pj-media{border-radius:clamp(80px,14vw,210px) var(--r-card) var(--r-card) var(--r-card)}
.pj-media .browser{box-shadow:0 26px 44px -24px rgba(27,36,73,.7)}
.pj:hover .browser{transform:translateY(-6px) rotate(-.6deg)}
.pj-n{font-size:clamp(3.25rem,6.5vw,5.75rem);font-weight:800;line-height:.85;letter-spacing:-.05em;color:var(--azul)}
.pj h3{font-size:clamp(2rem,3.6vw,3.25rem);letter-spacing:-.04em;line-height:1;color:var(--navy);margin:1rem 0 1.1rem}
.pj-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.pj-tags li{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;padding:.35rem .85rem;border-radius:var(--r-pill);border:1.5px solid var(--navy);color:var(--navy)}
.pj-tags li:first-child{background:var(--navy);color:#fff}
.pj-desc{margin-top:1.25rem;max-width:34em}
.pj-desc strong{color:var(--navy);font-weight:700}
.pj .tile-link{margin-top:1.6rem;color:var(--navy)}


/* ---------- 5 Proceso ---------------------------------------------------- */
.dw-proc{margin-top:clamp(3rem,6vw,5rem)}
/* En pantallas grandes el trazo se acota para que el bloque no crezca de más */
@media (min-width:1100px){
  .dw-proc{max-width:960px;margin-inline:auto}
}


/* ---------- 6 Web + pauta ------------------------------------------------ */
.dw-puente-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:3.5rem clamp(2.5rem,6vw,6rem);align-items:center}
.dw-puente .lead{margin-top:1.5rem}
.dw-puente .checks{margin:1.75rem 0}
.dw-puente-nota{font-weight:600;max-width:34em}

/* Del anuncio a la venta: dos campañas convergen en la landing y salen leads */
.flow{margin:0;display:flex;flex-direction:column;align-items:center}
.flow-src{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;width:100%;justify-items:center}
.flow-chip{display:inline-flex;align-items:center;gap:.65rem;font-weight:700;font-size:1.0625rem;line-height:1.2;padding:.45rem 1.3rem .45rem .45rem;border-radius:var(--r-pill);white-space:nowrap}
.fc-ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none}
.fc-ico .ico{width:20px;height:20px}
.fc-meta{background:var(--azul);color:#fff}
.fc-meta .fc-ico{background:#fff;color:var(--azul)}
.fc-google{background:#fff;color:var(--navy)}
.fc-google .fc-ico{background:var(--navy);color:#fff}
.flow-lines{display:block;width:100%;height:clamp(56px,6vw,84px)}
.flow-lines path,.flow-down path{fill:none;stroke:var(--amarillo);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.flow-lines path{stroke-dasharray:1 9}
.flow .browser{width:100%;box-shadow:0 30px 50px -26px rgba(0,0,0,.7)}
.flow-down{display:block;width:40px;height:64px;margin:.5rem 0}
.flow-out{display:inline-flex;align-items:center;gap:.65rem;background:var(--amarillo);color:var(--navy);font-weight:800;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.025em;line-height:1.1;padding:.85rem 1.7rem;border-radius:var(--r-pill)}
.flow-out .ico{width:1em;height:1em;stroke-width:2.6}
.flow figcaption{margin-top:1.25rem;font-size:var(--fs-sm);line-height:1.5;color:var(--crema);text-align:center;max-width:30em}


/* ---------- 7 Movimiento ------------------------------------------------- */
/* Entrada del héroe desde un estado visible (solo desplazamiento, nunca opacity:0) */
@media (prefers-reduced-motion: no-preference){
  .dw-b{animation:rise 1s cubic-bezier(.2,.8,.2,1) both;--from:32px}
  .dw-b1{animation-delay:.15s}.dw-b2{animation-delay:.3s}.dw-b3{animation-delay:.45s}
  .dw-stack .sticker{animation:dw-stamp 1.1s cubic-bezier(.3,1.3,.5,1) .6s both}
  .dw-stack-m{animation:drift 1.6s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes dw-stamp{0%{transform:rotate(-60deg) scale(.7)}70%{transform:rotate(16deg) scale(1.05)}100%{transform:rotate(10deg) scale(1)}}


/* ---------- 8 Responsive ------------------------------------------------- */
@media (min-width:641px){
  .dw-proc .sn{font-size:clamp(2.2rem,5.4vw,5rem)}
  .dw-proc .st{font-size:clamp(.9rem,1.7vw,1.5rem);font-weight:700}
}
@media (max-width:1099px){
  .dw-puente-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .flow-chip{font-size:.9375rem;padding-right:1rem}
}
@media (max-width:900px){
  /* En una columna la m pasa a la pila (la de sitio.css mide 130vw y, junto a una pila
     de 500 px como máximo, quedaba tapada a 641-700 o detrás de los botones a 900):
     sus arcos asoman ~70-120 px sobre el primer navegador y quedan 16 px por debajo
     de los botones a cualquier ancho */
  .dw-hero .page-hero-m{display:none}
  .dw-stack-m{display:block;width:146%;left:21%;top:-72px}
  .dw-hero .page-hero-media{max-width:500px;width:calc(100% - 8px);justify-self:end;margin:3.5rem 0 0}
  .pj,.pj:nth-child(even){grid-template-columns:1fr}
  .pj:nth-child(even) .pj-media{order:0}
  .dw-puente-grid{grid-template-columns:1fr}
  .flow{max-width:520px;width:100%;justify-self:center}
}
@media (max-width:640px){
  .dw-stack{aspect-ratio:1/1.02}
  .dw-b1{width:90%;top:12%}
  .dw-b2{width:76%;top:44%}
  .dw-b3{width:54%;top:72%;left:2%}
  /* Sello más grande para que "sitios web" se lea en el teléfono (~12 px) */
  .dw-stack .sticker{top:auto;right:0;bottom:-4%;width:112px}
  .dw-hero .actions{flex-direction:column;align-items:stretch}
  .pj-media,.pj:nth-child(even) .pj-media{border-radius:var(--r-card) 96px var(--r-card) var(--r-card);padding:1.1rem 1.1rem 1.4rem}
  .pj-n{font-size:3rem}
  .pj h3{font-size:2rem;margin:.75rem 0 .9rem}
  .flow-src{gap:.6rem}
  .flow-chip{font-size:.875rem;gap:.45rem;padding:.35rem .9rem .35rem .35rem}
  .fc-ico{width:32px;height:32px}
  .fc-ico .ico{width:17px;height:17px}
  /* "Tu objetivo: leads y ventas" en una sola línea hasta 320 */
  .flow-out{font-size:min(1.25rem,5.3vw);padding:.8rem 1.2rem;gap:.5rem}
  .dw-puente .actions .btn{flex:1 1 100%}
}
@media (max-width:374px){
  /* "Lanzamiento" cabe en su columna de 72 px a 320 */
  .dw-proc .st{letter-spacing:-.025em}
}
@media (max-width:360px){
  .flow-chip{font-size:.8125rem;padding-right:.7rem}
  .fc-ico{width:28px;height:28px}
}