/* =============================================================================
   Mento Agency · sitio.css (estilos compartidos)
   Dirección "Color & Personas": bloques de color de la paleta completa, titulares
   Poppins 800 enormes alineados a la izquierda, y los tres arcos de la "m" del
   logo convertidos en marcos de retrato, tarjetas, sellos y separadores.

   Orden de carga en cada página:
     fuentes.css  ->  sitio.css  ->  <slug>.css (solo estilos propios de esa página)

   ÍNDICE
     01 Tokens               10 Banda marquesina        19 Proyectos web
     02 Base                 11 Héroes                  20 Contacto (WhatsApp)
     03 Layout y tipografía  12 Cifras                  21 Diálogo de evidencias
     04 Superficies (color)  13 Tarjetas de servicio    22 WhatsApp flotante
     05 Cabecera             14 Bento de resultados     23 Texto legal (.prose)
     06 Pie                  15 Garantía y pilares      24 Utilidades
     07 Botones y enlaces    16 Equipo                  25 Movimiento
     08 Sellos (stickers)    17 Muro de clientes        26 Responsive
     09 Arcos (retratos)     18 Desarrollo web/proceso  27 Impresión

   COMPONENTES (clase · uso en una línea)
   Layout y texto
     .wrap ............ contenedor centrado (max 1312px) con gutters seguros (safe-area).
     .sec ............. sección con el ritmo vertical del sitio; combínala con una superficie .s-*.
     .sec-head ........ cabecera de sección en 2 columnas: <div>.label + h2.h2</div> + p.lead.
     .label ........... etiqueta en mayúsculas con viñeta en arco, encima de cada h2.
     .h2 / .h2-xl ..... titular de sección / titular extra grande (bloque de equipo).
     .display ......... H1 gigante del inicio (líneas con <span class="ln" style="--i:n">).
     .display-2 ....... H1 de páginas internas (más corto que .display; mismas líneas .ln y entrada).
     .lead ............ párrafo de entrada (1.05–1.25rem, máx. 36em).
     .thin / .hl / .c-blue  palabra en itálica fina / subrayado durazno / azul logo (solo
                        titulares grandes sobre crema, blanco o amarillo).
     .sec-more ........ fila de botones "ver más" al final de una sección.
     .cierre .......... fila de cierre: frase grande + botones, con filete superior.
     .actions ......... grupo de botones (envuelve en móvil).
   Superficies (fondo + color de texto + foco accesibles según la tabla de contraste)
     .s-crema .s-blanco .s-amarillo .s-durazno .s-azul .s-navy .s-gris .s-grafito
       Sirven en secciones y en tarjetas (.tile, .fig, .rt, .wc, .plate, .quote).
       Fijan --label, --titulo, --lead, --focus, --acento, --check, --trazo, --hover.
   Navegación y marco
     .site-header/.hdr/.brand/.main-nav/.menu-btn  cabecera sticky (ver index.html).
     .main-nav a[aria-current="page"]  marca la página activa.
     .site-footer/.foot-*  pie navy con logo blanco gigante.
     .migas ........... migas de pan de páginas internas: nav>ol>li (último con aria-current="page").
                        Sus colores siguen a la superficie del héroe (.s-navy, .s-durazno…).
     .skip ............ enlace "Saltar al contenido".
   Botones y enlaces
     .btn + .btn-azul | .btn-navy | .btn-amarillo | .btn-linea  (+ .btn-lg).
       .btn-linea hereda el color del texto: úsalo para "ver más" sobre cualquier superficie.
     .btn-wa .......... píldora de WhatsApp con icono y número (en .s-navy/.s-azul pasa a blanca).
     .wa-big .......... píldora blanca grande de WhatsApp (fondos de color).
     .tile-link ....... enlace subrayado con flecha (al pie de tarjetas).
     .evid ............ botón "Ver captura" que abre el diálogo de evidencias (a[data-lb]).
     .motion-toggle ... botón "Pausar animaciones" (obligatorio si algo se mueve > 5 s).
   Formas de marca
     .sticker ......... sello circular SVG (ver plantilla en index.html); su anillo .ring gira.
       Clases SVG: .st-bg (navy) .st-bg-d (durazno) .st-bg-a (amarillo) .st-ring (texto
       amarillo) .st-ring-n (texto navy) .st-dash .st-big .st-small .st-c1 .st-c2, y sus
       versiones navy para fondos claros: .st-dash-n .st-big-n .st-small-n.
     .arch ............ marco en arco con sombra sólida desplazada (--bk color, --off tamaño).
       .bk-durazno .bk-navy .bk-amarillo cambian el color de la sombra.
     .band-wrap/.band/.band-track  banda amarilla inclinada en marquesina; una <ul> basta,
       sitio.js la duplica (o escribe la copia con aria-hidden="true").
     svg use href="#iso"  isotipo "m" del sprite (fondos gigantes .hero-m, .page-hero-m, .contact-m).
   Bloques de contenido
     .hero + .collage (.cp .cp1-3 .chip-name .cl .cl1-3) ... héroe del inicio con collage.
     .page-hero/.page-hero-grid/.page-hero-media ......... héroe de páginas internas.
     .kicker .......... píldora blanca con punto azul encima del H1.
     .figures > .fig.s-* ...... cifras en arcos (5 por fila, alternando altura).
       .figures.figures-4 ...... variante de 4 cifras (4 en fila hasta 641 px, luego 2 + 2).
     .tiles > .tile.s-* ....... tarjetas de servicio (escalonadas).
       .tile-top .tile-ico .tile-tag .checks .tile-link dentro.
     .checks .......... lista con check (el color del check sigue a la superficie).
     .bento > .rt.s-* + .rt-a ... .rt-g  bento de resultados (posiciones a–g para 7 piezas).
       .rt-case .rt-k .rt-num .rt-metric .rt-sec .rt-cap .rt-shot .evid .bars .chart-note.
     .garantia (+ .garantia-grid/-big/-h/-promesa/-copy, .giant, .giant-sub) bloque "1 mes".
     .pillars ......... tres pilares con icono en arco (.p-ico).
     .team-head/.team-photo/.expertise  cabecera del equipo con foto en arco.
     .team-grid > .person.a-*  tarjetas de persona; áreas: .a-ceo .a-acc .a-paid .a-design .a-admin.
     .logo-wall ....... muro de 10 logos circulares en dos filas desfasadas.
     .web-cards > .wc.s-*  tarjetas de desarrollo web con tope en arco.
     .process (.m-path + ol.steps)  proceso de 4 pasos sobre la "m" en trazo.
     .proj-grid > .proj (.plate.s-* > .browser, .proj-meta, .pf)  proyectos en "navegador".
     .contact (+ .contact-grid .contact-copy .contact-list .contact-m)  bloque azul de contacto.
     .quote.wa-card ... tarjeta de contacto: sello "Consultoría gratuita", .wa-card-txt y .checks.wa-card-list.
     .lb .............. <dialog> de capturas (una sola vez por página, dentro del bloque pie).
     .wa-flotante ..... botón flotante de WhatsApp con llamado a la acción y burbuja (dentro del pie).
       Siempre visible; solo se aparta con el menú móvil abierto.
     .prose ........... texto largo (política de datos): h2, h3, p, ul, ol, a.
   Utilidades
     .sr (solo lectores de pantalla) .nowrap .ico (icono SVG de trazo)
   ========================================================================== */


/* ---------- 01 Tokens ---------------------------------------------------- */
:root{
  color-scheme: light;
  /* Paleta exacta del manual */
  --azul-logo:#0270FD; --azul:#255CEC; --navy:#232E5C; --gris:#333333;
  --crema:#F4F1D0; --amarillo:#FAD465; --durazno:#E09F73; --blanco:#FFFFFF;
  /* Derivados (tintes y sombras de la paleta) */
  --navy-900:#1B2449; --azul-700:#1D4FD6; --gris-700:#3E3E3E; --crema-200:#EAE6BF;
  --linea:rgba(35,46,92,.16);
  /* Tipografía */
  --font:"Poppins","Avenir Next","Segoe UI",system-ui,sans-serif;
  --fs-display:clamp(3rem, 15.5vw, 7.5rem);
  --fs-display-2:clamp(2.75rem, 7.6vw, 6.5rem);
  --fs-h2:clamp(2.4rem, 6.2vw, 5.25rem);
  --fs-h2-xl:clamp(2.9rem, 8.4vw, 7.25rem);
  --fs-h3:clamp(1.45rem, 2.3vw, 2.1rem);
  --fs-card:clamp(2rem, 3vw, 2.75rem);
  --fs-lead:clamp(1.05rem, 1.3vw, 1.25rem);
  --fs-body:1.0625rem; --fs-sm:.9375rem; --fs-xs:.8125rem;
  --lh-tight:.95;
  /* Espacio */
  --gut:clamp(16px, 4.5vw, 64px);
  --max:1312px;
  --sp-sec:clamp(4.5rem, 9vw, 8.5rem);
  --hdr-h:76px;
  /* Radios: arco (de la m), tarjeta, píldora */
  --r-arch:999px 999px 0 0;
  --r-card:28px; --r-sm:14px; --r-pill:999px;
  --focus:var(--azul);
}


/* ---------- 02 Base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 16px + env(safe-area-inset-top, 0px));scroll-padding-bottom:96px}
html:has(.lb[open]){overflow:hidden}
@media (prefers-reduced-motion: no-preference){html:focus-within{scroll-behavior:smooth}}
button,input,select,textarea{font:inherit}
body{margin:0;background:var(--crema);color:var(--gris);font-family:var(--font);font-size:var(--fs-body);line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
main:focus{outline:none}
.ico{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Saltar al contenido */
.skip{position:absolute;left:12px;top:-120px;z-index:200;background:var(--navy);color:#fff;padding:.75rem 1.1rem;border-radius:var(--r-sm);font-weight:600;text-decoration:none;--focus:var(--azul)}
.skip:focus{top:calc(12px + env(safe-area-inset-top, 0px))}


/* ---------- 03 Layout y tipografía -------------------------------------- */
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gut));margin-inline:auto;padding-left:max(var(--gut), env(safe-area-inset-left, 0px));padding-right:max(var(--gut), env(safe-area-inset-right, 0px))}
.sec{position:relative;padding:var(--sp-sec) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.5rem clamp(2rem,5vw,5rem);align-items:end}

/* Etiqueta de sección con viñeta en arco */
.label{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:0 0 1.1rem;color:var(--label,var(--azul))}
.label::before{content:"";width:20px;height:13px;background:currentColor;border-radius:var(--r-arch);flex:none}
.h2{font-size:var(--fs-h2);font-weight:800;line-height:1.03;letter-spacing:-.035em;color:var(--titulo,var(--navy));text-wrap:balance}
.h2-xl{font-size:var(--fs-h2-xl);line-height:.93;letter-spacing:-.045em}
.h2-xl .c-blue{display:block;margin-top:.08em}
.lead{font-size:var(--fs-lead);line-height:1.6;max-width:36em;color:var(--lead,currentColor)}
.c-blue{color:var(--azul-logo)}
.thin{font-weight:400;font-style:italic;letter-spacing:-.035em}
.hl{position:relative;z-index:0;display:inline-block}
.hl::after{content:"";position:absolute;z-index:-1;left:-.04em;right:-.02em;bottom:.07em;height:.3em;background:var(--durazno);border-radius:.1em;transform-origin:left center}

/* Fila "ver más" y fila de cierre */
.actions{display:flex;flex-wrap:wrap;gap:1rem 1.25rem;align-items:center;margin-top:2rem}
.sec-more{display:flex;flex-wrap:wrap;gap:1rem 1.25rem;align-items:center;margin-top:clamp(2.5rem,5vw,4rem)}
.cierre{margin-top:clamp(3.5rem,7vw,5.5rem);padding-top:2rem;border-top:2px solid var(--titulo,var(--navy));display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem}
.cierre > p{font-size:clamp(1.6rem,3vw,2.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;color:var(--titulo,var(--navy))}
.cierre .actions{margin-top:0}


/* ---------- 04 Superficies (bloques de color) ---------------------------- */
/* Cada superficie fija fondo, texto y foco con pares AA de la tabla del brief. */
.s-crema,.s-blanco{color:var(--gris);--focus:var(--azul);--label:var(--azul);--titulo:var(--navy);--lead:var(--gris);--acento:var(--azul-logo);--check:currentColor;--trazo:rgba(35,46,92,.1);--hover:rgba(35,46,92,.08)}
.s-crema{background:var(--crema)}
.s-blanco{background:#fff}
.s-amarillo,.s-durazno{color:var(--navy);--focus:var(--navy);--label:var(--navy);--titulo:var(--navy);--lead:var(--navy);--acento:var(--navy);--check:currentColor;--trazo:rgba(35,46,92,.1);--hover:rgba(35,46,92,.1)}
.s-amarillo{background:var(--amarillo)}
.s-durazno{background:var(--durazno)}
.s-azul{background:var(--azul);color:#fff;--focus:#fff;--label:#fff;--titulo:#fff;--lead:#fff;--acento:#fff;--check:currentColor;--trazo:rgba(255,255,255,.12);--hover:rgba(255,255,255,.16)}
.s-navy,.s-gris,.s-grafito{color:#fff;--focus:var(--amarillo);--label:var(--amarillo);--titulo:#fff;--lead:#fff;--acento:var(--amarillo);--check:var(--amarillo);--trazo:rgba(255,255,255,.12);--hover:rgba(255,255,255,.16)}
.s-navy{background:var(--navy);--lead:var(--crema)}
.s-gris{background:var(--gris)}
.s-grafito{background:var(--gris-700)}


/* ---------- 05 Cabecera -------------------------------------------------- */
.site-header{position:sticky;top:env(safe-area-inset-top, 0px);z-index:50;background:rgba(244,241,208,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.hdr{display:flex;align-items:center;gap:1.5rem;min-height:var(--hdr-h);position:relative}
.brand{display:block;flex:none;border-radius:6px}
.brand img{height:44px;width:auto}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:.15rem}
.main-nav a{position:relative;display:block;padding:.55rem .85rem;color:var(--gris);font-weight:500;font-size:.96875rem;text-decoration:none;border-radius:var(--r-pill);transition:background-color .2s}
.main-nav a:hover{background:rgba(35,46,92,.08);color:var(--navy)}
/* Página activa: texto navy y arco azul debajo (no depende solo del color) */
.main-nav a[aria-current="page"]{color:var(--navy);font-weight:600}
.main-nav a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:-2px;width:18px;height:9px;margin-left:-9px;background:var(--azul);border-radius:var(--r-arch)}
.menu-btn{display:none;width:48px;height:48px;border-radius:50%;border:2px solid var(--navy);background:transparent;color:var(--navy);align-items:center;justify-content:center;cursor:pointer;flex:none}
.menu-btn .ico{width:22px;height:22px}
.menu-btn .i-close{display:none}
.menu-btn[aria-expanded="true"] .i-open{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}

/* Migas de pan (páginas internas) */
.migas ol{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.migas li{display:inline-flex;align-items:center;gap:.6rem}
.migas li+li::before{content:"";width:12px;height:8px;background:var(--durazno);border-radius:var(--r-arch)}
.migas a{color:var(--azul);text-decoration:none;border-bottom:1.5px solid currentColor}
.migas a:hover{color:var(--navy)}
.migas [aria-current="page"]{color:var(--navy)}
/* Migas sobre héroes de color: el azul no contrasta en amarillo/durazno (2.5) ni en navy (2.4) */
.s-amarillo .migas a,.s-durazno .migas a{color:var(--navy)}
.s-amarillo .migas a:hover,.s-durazno .migas a:hover{color:var(--gris);border-bottom-width:2.5px}
.s-amarillo .migas li+li::before,.s-durazno .migas li+li::before{background:var(--navy)}
.s-navy .migas a,.s-azul .migas a,.s-gris .migas a,.s-grafito .migas a{color:#fff}
.s-navy .migas a:hover,.s-gris .migas a:hover,.s-grafito .migas a:hover{color:var(--amarillo)}
.s-navy .migas [aria-current="page"],.s-gris .migas [aria-current="page"],.s-grafito .migas [aria-current="page"]{color:var(--amarillo)}
.s-azul .migas [aria-current="page"]{color:#fff}


/* ---------- 06 Pie ------------------------------------------------------- */
.site-footer{background:var(--navy);color:#fff;padding:clamp(4rem,8vw,6.5rem) 0 calc(6.5rem + env(safe-area-inset-bottom, 0px));overflow:hidden;--focus:var(--amarillo)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.15fr);gap:2.5rem}
.foot-claim > p{font-size:clamp(1.75rem,3vw,2.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.foot-claim > p span{display:block;color:var(--amarillo)}
.foot-col{min-width:0}
.foot-col li{overflow-wrap:anywhere}
.foot-h{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--amarillo);font-weight:600;margin-bottom:1rem}
.foot-col ul{display:grid;gap:.6rem;font-size:var(--fs-sm)}
.foot-col a,.foot-bottom a{text-decoration:none;border-bottom:1px solid transparent}
.foot-col a:hover,.foot-bottom a:hover{border-color:var(--amarillo)}
.foot-col a[aria-current="page"]{border-color:rgba(255,255,255,.5)}
.foot-logo{display:block;width:150px;height:auto;margin-top:1.75rem}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem 1.5rem;border-top:1px solid rgba(255,255,255,.18);padding-top:1.25rem;margin-top:clamp(1.5rem,3vw,2.5rem);font-size:.875rem;color:var(--crema)}
.foot-bottom a{color:#fff;border-bottom-color:rgba(255,255,255,.45)}


/* ---------- 07 Botones y enlaces ---------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font:600 1rem/1.2 var(--font);padding:.95em 1.5em;min-height:44px;border-radius:var(--r-pill);text-decoration:none;text-align:center;border:2px solid transparent;cursor:pointer;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{background:var(--azul-700)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-900)}
.btn-amarillo{background:var(--amarillo);color:var(--navy)}
.btn-amarillo:hover{background:#FCDD82}
.btn-linea{background:transparent;color:var(--titulo,var(--navy));border-color:currentColor}
.btn-linea:hover{background:var(--hover,rgba(35,46,92,.08))}
.btn-lg{font-size:1.0625rem;padding:1.1em 1.75em}

/* Píldora de WhatsApp para fondos claros */
.btn-wa{display:inline-flex;align-items:center;gap:.75rem;color:var(--navy);text-decoration:none;font-weight:700;font-size:1.0625rem;padding:.4rem 1.25rem .4rem .4rem;border-radius:var(--r-pill);border:2px solid var(--navy);background:rgba(255,255,255,.5);transition:background-color .2s}
.btn-wa:hover{background:#fff}
.btn-wa .wa-ico{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none}
.btn-wa small{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);line-height:1.2}
.btn-wa span{line-height:1.25}
/* Sobre superficies oscuras la píldora va en blanco para que su texto navy contraste */
.s-navy .btn-wa,.s-azul .btn-wa,.s-gris .btn-wa,.s-grafito .btn-wa{background:#fff;border-color:#fff}
.s-navy .btn-wa:hover,.s-azul .btn-wa:hover,.s-gris .btn-wa:hover,.s-grafito .btn-wa:hover{background:var(--crema);border-color:var(--crema)}

/* Enlace subrayado con flecha (pie de tarjetas) */
.tile-link{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-weight:600;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:.2rem}
.tile-link .ico{transition:transform .2s}
.tile-link:hover .ico{transform:translateX(4px)}

/* Botón "Pausar animaciones" */
.motion-toggle{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:.4rem 1rem .4rem .8rem;font-size:.8125rem;font-weight:600;color:var(--navy);background:transparent;border:1.5px solid var(--navy);border-radius:var(--r-pill);cursor:pointer;transition:background-color .2s}
.motion-toggle:hover{background:rgba(35,46,92,.08)}
.motion-toggle .ico{width:16px;height:16px}
.motion-toggle .i-play{display:none}
.paused .motion-toggle .i-play{display:block}
.paused .motion-toggle .i-pause{display:none}


/* ---------- 08 Sellos (stickers) ----------------------------------------- */
.sticker{position:relative;display:block;width:var(--st-w,140px);filter:drop-shadow(0 12px 18px rgba(35,46,92,.28))}
.sticker svg{display:block;width:100%;height:auto}
.st-bg{fill:var(--navy)}
.st-bg-d{fill:var(--durazno)}
.st-bg-a{fill:var(--amarillo)}
.st-ring{fill:var(--amarillo);font:600 15px var(--font);letter-spacing:.06em}
.st-ring-n{fill:var(--navy);font:600 14px var(--font);letter-spacing:.06em}
.st-dash{fill:none;stroke:var(--amarillo);stroke-width:1.5;stroke-dasharray:2 5;opacity:.85}
.st-big{fill:#fff;font:800 40px var(--font);letter-spacing:-.02em}
.st-small{fill:var(--amarillo);font:600 14px var(--font)}
.st-c1{fill:var(--navy);font:700 17px var(--font);letter-spacing:-.01em}
.st-c2{fill:var(--navy);font:800 24px var(--font);letter-spacing:-.03em}
/* Variantes navy para sellos de fondo claro (.st-bg-a, .st-bg-d): el blanco no contrasta ahí */
.st-dash-n{fill:none;stroke:var(--navy);stroke-width:1.5;stroke-dasharray:2 5;opacity:.55}
.st-big-n{fill:var(--navy);font:800 40px var(--font);letter-spacing:-.02em}
.st-small-n{fill:var(--navy);font:600 14px var(--font)}
.ring{transform-origin:100px 100px}


/* ---------- 09 Arcos (marcos de retrato) --------------------------------- */
.arch{border-radius:var(--r-arch);overflow:hidden;aspect-ratio:3/4;background:var(--crema-200);box-shadow:var(--off,14px) var(--off,14px) 0 var(--bk,var(--azul))}
.arch img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.bk-durazno{--bk:var(--durazno)}
.bk-navy{--bk:var(--navy)}
.bk-amarillo{--bk:var(--amarillo)}


/* ---------- 10 Banda marquesina ------------------------------------------ */
.band-wrap{overflow:hidden;padding:1.75rem 0;position:relative;z-index:2;margin-top:-1rem}
.band{background:var(--amarillo);color:var(--navy);transform:rotate(-1.6deg);width:108%;margin-left:-4%;border-block:2px solid var(--navy)}
.band-track{display:flex;width:max-content}
.band ul{display:flex;align-items:center;padding:1rem 0}
.band li{display:flex;align-items:center;font-weight:700;font-size:clamp(1.4rem,3vw,2.6rem);letter-spacing:-.025em;white-space:nowrap;line-height:1.2}
.band li svg{width:1em;height:.68em;margin:0 .65em;fill:var(--azul-logo);flex:none}
.band-ctrl{display:flex;justify-content:flex-start;margin-top:1.1rem}


/* ---------- 11 Héroes ---------------------------------------------------- */
/* Héroe del inicio */
.hero{position:relative;overflow:hidden;padding:clamp(1.5rem,3vw,2.75rem) 0 clamp(3.5rem,7vw,6rem)}
.hero-m{position:absolute;z-index:0;width:min(80vw,1180px);aspect-ratio:277/188;right:-17%;top:7%;fill:var(--amarillo);pointer-events:none}
/* En una columna la m vive dentro del collage para que sus tres arcos se lean detrás de los retratos */
.collage-m{display:none;position:absolute;left:14%;top:2%;width:138%;aspect-ratio:277/188;fill:var(--amarillo);pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.kicker{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);background:#fff;border:1.5px solid var(--navy);padding:.45rem .95rem;border-radius:var(--r-pill)}
.kicker i{width:9px;height:9px;border-radius:50%;background:var(--azul-logo);flex:none}
.display{font-size:clamp(4.25rem,8vw,7.5rem);font-weight:800;line-height:var(--lh-tight);letter-spacing:-.045em;color:var(--navy);margin:.22em 0 .3em}
.display .ln{display:block}
.display .ln:nth-child(3){margin-top:.04em}
.hero .lead{color:var(--gris);max-width:36em}

/* Collage del héroe del inicio */
.collage{position:relative;width:100%;max-width:560px;aspect-ratio:52/60;justify-self:end}
.cp{position:absolute;margin:0}
.cp1{left:3%;top:24%;width:45%;--bk:var(--azul)}
.cp2{left:55%;top:3%;width:39%;--bk:var(--durazno)}
.cp3{left:57%;top:57%;width:33%;--bk:var(--navy)}
.chip-name{position:absolute;left:-8%;bottom:9%;background:#fff;color:var(--navy);font-size:clamp(.6875rem,1.1vw,.8125rem);font-weight:500;padding:.35rem .85rem;border-radius:var(--r-pill);white-space:nowrap;box-shadow:0 8px 20px -8px rgba(35,46,92,.35)}
.chip-name b{font-weight:700}
.cl{position:absolute;border-radius:50%;box-shadow:0 0 0 5px var(--crema),0 14px 26px -12px rgba(35,46,92,.5);z-index:2}
.cl1{left:0;top:82%;width:16%}
.cl2{left:36%;top:84%;width:13%}
.cl3{left:84%;top:45%;width:15%}
.collage .sticker{position:absolute;z-index:3;left:29%;top:3%;width:max(27%,112px);transform:rotate(-12deg)}

/* Héroe de páginas internas: migas + H1 + entrada + acciones, con un medio a la derecha */
.page-hero{position:relative;overflow:hidden;padding:clamp(1.75rem,3.5vw,3rem) 0 clamp(3.5rem,7vw,6rem)}
.page-hero-m{position:absolute;z-index:0;width:min(64vw,940px);aspect-ratio:277/188;right:-15%;top:10%;fill:var(--amarillo);pointer-events:none}
.page-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.display-2{font-size:var(--fs-display-2);font-weight:800;line-height:1.02;letter-spacing:-.045em;color:var(--titulo,var(--navy));margin:.3em 0 .35em;text-wrap:balance}
.display-2 .ln{display:block}
.page-hero .lead{max-width:34em}
.page-hero-media{position:relative;justify-self:end;width:100%;max-width:470px}
.page-hero-media .arch{aspect-ratio:1/1.08;--off:18px}
.page-hero-media .sticker{position:absolute;z-index:3;left:-8%;top:-6%;width:clamp(104px,11vw,150px);transform:rotate(-12deg)}


/* ---------- 12 Cifras ---------------------------------------------------- */
.intro .h2{font-size:clamp(1.9rem,9.4vw,5.25rem)}
.intro-top{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.intro-side{display:grid;gap:1rem}
.intro-side p:last-child{font-weight:600;color:var(--navy)}
.figures{margin-top:clamp(3rem,6vw,5rem);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.75rem,1.6vw,1.5rem);align-items:start}
.fig{border-radius:999px 999px 22px 22px;aspect-ratio:4/5;padding:clamp(1rem,2vw,1.75rem);display:flex;flex-direction:column;justify-content:flex-end;container-type:inline-size;transition:transform .3s ease}
.fig:hover{transform:translateY(-6px)}
.fig strong{display:block;font-size:clamp(1.75rem,29cqi,4.75rem);font-weight:800;line-height:.9;letter-spacing:-.045em}
.fig span{font-size:var(--fs-sm);font-weight:500;line-height:1.3;margin-top:.6rem}
.fig:nth-child(even){margin-top:3rem}
.fig.s-navy strong{color:var(--amarillo)}
/* Cuatro cifras: una fila de 4 hasta tableta (escalón en las pares) y 2 + 2 en móvil */
.figures.figures-4{grid-template-columns:repeat(4,minmax(0,1fr))}


/* ---------- 13 Tarjetas de servicio -------------------------------------- */
/* Escalón deliberado: mismas alturas, cada tarjeta 3rem más abajo que la anterior */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem);margin-top:clamp(2.5rem,5vw,4rem);align-items:stretch}
.tile{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-card);padding:clamp(1.5rem,2.6vw,2.5rem);min-height:540px;display:flex;flex-direction:column}
.tile::after{content:"";position:absolute;z-index:-1;right:-96px;bottom:-160px;width:250px;height:300px;border:30px solid var(--trazo,rgba(255,255,255,.12));border-bottom:0;border-radius:var(--r-arch)}
.tiles > .tile:nth-child(3n+1){margin-bottom:6rem}
.tiles > .tile:nth-child(3n+2){margin-block:3rem}
.tiles > .tile:nth-child(3n){margin-top:6rem}
.tile-top{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.tile-ico{width:62px;height:76px;border-radius:var(--r-arch);display:grid;place-items:center;background:rgba(35,46,92,.12);flex:none}
.tile.s-amarillo .tile-ico{background:var(--navy);color:var(--amarillo)}
.tile.s-navy .tile-ico,.tile.s-gris .tile-ico{background:var(--amarillo);color:var(--navy)}
.tile.s-azul .tile-ico{background:#fff;color:var(--azul)}
.tile.s-durazno .tile-ico{background:var(--navy);color:var(--amarillo)}
.tile-ico .ico{width:28px;height:28px}
.tile-tag{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-align:right;line-height:1.35;max-width:13em}
.tile h3{font-size:var(--fs-card);letter-spacing:-.04em;line-height:1;margin:1.6rem 0 .8rem}
.tile p{font-size:1rem;line-height:1.55}
.checks{margin:1.4rem 0 1.8rem;display:grid;gap:.6rem}
.checks li{display:flex;gap:.65rem;align-items:flex-start;font-size:.96875rem;font-weight:500;line-height:1.4}
.checks .ico{width:20px;height:20px;margin-top:.05em;stroke-width:2.4;color:var(--check,currentColor)}


/* ---------- 14 Bento de resultados --------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.75rem,1.4vw,1.25rem);margin-top:clamp(2.5rem,5vw,4rem)}
.rt{position:relative;color:var(--titulo);border-radius:26px;padding:clamp(1.25rem,2.2vw,2rem);display:flex;flex-direction:column;container-type:inline-size;min-height:270px;overflow:hidden}
/* Posiciones (12 columnas): a grande a la izquierda, b–e en 2×2, f y g en la fila final */
.rt-a{grid-column:1 / 7;grid-row:1 / 3}
.rt-b{grid-column:7 / 10;grid-row:1}
.rt-c{grid-column:10 / 13;grid-row:1}
.rt-d{grid-column:7 / 10;grid-row:2}
.rt-e{grid-column:10 / 13;grid-row:2}
.rt-f{grid-column:1 / 6;grid-row:3}
.rt-g{grid-column:6 / 13;grid-row:3}
.rt-case{font-size:var(--fs-sm);font-weight:600;line-height:1.35;max-width:22em}
.rt-k{font-size:clamp(1rem,7cqi,1.5rem);font-weight:700;letter-spacing:-.01em;margin-top:auto;padding-top:1.25rem}
.rt-num{font-size:clamp(2.75rem,24cqi,11rem);font-weight:800;line-height:.88;letter-spacing:-.05em;margin:.1em 0 .25em}
.rt-a .rt-num{font-size:clamp(4rem,25cqi,11rem)}
.rt-num-abajo{margin-top:auto;padding-top:1.25rem}
.rt-metric{font-weight:600;font-size:1rem;line-height:1.3}
.rt-sec{font-size:var(--fs-sm);line-height:1.4;margin-top:.25rem}
.rt-sec strong{font-weight:700}
/* Recorte solo de la fila de totales: el alto sigue al ancho para que el encuadre no cambie */
.rt-cap{font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;margin-top:1.25rem}
.rt-shot{position:relative;aspect-ratio:33/2;overflow:hidden;border-radius:10px;border:2px solid var(--navy);background:#fff;margin-top:.45rem}
.rt-shot img{position:absolute;right:0;bottom:0;width:165%;max-width:none;height:auto;transform:translateY(3.2%)}
.evid{margin-top:1.1rem;align-self:flex-start;display:inline-flex;gap:.5rem;align-items:center;min-height:40px;font-size:.875rem;font-weight:600;color:inherit;text-decoration:none;padding:.5rem .95rem;border-radius:var(--r-pill);border:1.5px solid currentColor;transition:background-color .2s}
.evid:hover{background:var(--hover,rgba(255,255,255,.18))}
.evid .ico{width:18px;height:18px}
.chart-note{font-size:var(--fs-xs);color:var(--crema);margin-top:.35rem;line-height:1.45}
.bars{margin-top:auto;padding-top:1.5rem;display:grid;gap:.9rem}
.bars li{display:grid;grid-template-columns:min(11.5rem,36%) minmax(0,1fr) 4.6rem;gap:.85rem;align-items:center;font-size:.875rem}
.b-name{line-height:1.3}
.b-track{height:22px;background:rgba(255,255,255,.08);border-radius:0 6px 6px 0;position:relative}
.b-fill{position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--amarillo);border-radius:0 6px 6px 0}
.b-val{font-weight:700;font-size:1rem;text-align:right;color:var(--amarillo)}


/* ---------- 15 Garantía y pilares ---------------------------------------- */
.garantia{overflow:hidden}
.garantia-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem clamp(2rem,5vw,5rem);align-items:end}
.garantia-big{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:start}
.garantia-big .label{grid-column:1 / -1;justify-self:start}
.garantia-h{line-height:.8;color:var(--titulo,var(--navy))}
/* "1 mes" nunca parte en dos: el tamaño garantiza que quepa junto al sello en su columna */
.giant{display:block;font-size:clamp(5.6rem,12.5vw,11.5rem);font-weight:800;letter-spacing:-.065em;word-spacing:.1em;line-height:.8;padding-right:.07em;white-space:nowrap}
.giant-sub{display:block;font-size:clamp(2rem,4.4vw,3.9rem);font-weight:700;letter-spacing:-.035em;line-height:1;margin-top:.2em}
.garantia .sticker{width:clamp(92px,11vw,165px);margin:-.75rem 0 0 .5rem;transform:rotate(14deg)}
.garantia-promesa{font-size:clamp(1.5rem,2.6vw,2.25rem);font-weight:700;line-height:1.15;letter-spacing:-.025em;margin-bottom:1rem}
.pillars{margin-top:clamp(3rem,6vw,5rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem clamp(1.5rem,3vw,3rem);border-top:2px solid var(--titulo,var(--navy));padding-top:2rem}
.pillars li{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.1rem;align-items:start;align-content:start}
.p-ico{grid-row:span 2;width:52px;height:64px;border-radius:var(--r-arch);background:var(--navy);color:var(--amarillo);display:grid;place-items:center}
.p-ico .ico{width:24px;height:24px}
.pillars h3{font-size:1.25rem;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.pillars p{font-size:var(--fs-sm);line-height:1.5}


/* ---------- 16 Equipo ---------------------------------------------------- */
.team-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.team-head .lead{margin-top:1.75rem}
.expertise{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.expertise li{font-size:.875rem;font-weight:600;color:var(--navy);border:1.5px solid var(--navy);border-radius:var(--r-pill);padding:.4rem .95rem}
.team-photo{margin:0;justify-self:end;width:100%;max-width:470px}
.team-photo .arch{aspect-ratio:1/1.08;--off:18px;--bk:var(--amarillo)}
.team-photo .arch img{object-position:50% 70%}
.team-photo figcaption{font-size:var(--fs-xs);margin-top:1.4rem;color:var(--gris)}
.team-grid{margin-top:clamp(3.5rem,6vw,5.5rem);display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3.25rem clamp(1rem,1.8vw,1.75rem)}
.person{grid-column:span 2}
/* 8 personas: 4 + 4 en ladrillo (nueve columnas: la segunda fila corrida media tarjeta) */
.person:nth-child(5){grid-column:2 / span 2}
.p-arch{aspect-ratio:4/5;border-radius:var(--r-arch);overflow:hidden;background:var(--crema-200);box-shadow:10px 10px 0 var(--ac);margin-right:10px;transition:transform .3s ease,box-shadow .3s ease}
.p-arch img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.person:hover .p-arch{transform:translateY(-6px);box-shadow:12px 16px 0 var(--ac)}
.area{display:inline-block;margin-top:1.4rem;font-size:.71875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .75rem;border-radius:var(--r-pill);background:var(--ac);color:var(--ac-ink);border:1.5px solid var(--ac)}
.person h3{font-size:1.25rem;font-weight:700;color:var(--navy);letter-spacing:-.015em;line-height:1.2;margin:.65rem 0 .2rem}
.role{font-size:var(--fs-sm);font-weight:600;color:var(--azul);line-height:1.35;margin-bottom:.5rem}
.bio{font-size:.90625rem;line-height:1.5}
.a-ceo{--ac:var(--navy);--ac-ink:#fff}
.a-acc{--ac:var(--amarillo);--ac-ink:var(--navy)}
.a-paid{--ac:var(--azul);--ac-ink:#fff}
.a-design{--ac:var(--durazno);--ac-ink:var(--navy)}
.a-admin{--ac:#fff;--ac-ink:var(--navy)}
.a-admin .area{border-color:var(--navy)}
.a-admin .p-arch{box-shadow:10px 10px 0 0 #fff,10px 10px 0 2px var(--navy)}
.a-admin:hover .p-arch{box-shadow:12px 16px 0 0 #fff,12px 16px 0 2px var(--navy)}
@media (min-width:641px){.role{min-height:2.7em}}


/* ---------- 17 Muro de clientes ------------------------------------------ */
.logo-wall{position:relative;margin-top:clamp(3rem,6vw,4.5rem);display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:clamp(.6rem,1.2vw,1rem) clamp(.5rem,1.2vw,1rem)}
.logo-wall li{grid-column:span 2}
.logo-wall li:nth-child(6){grid-column:2 / span 2}
.logo-wall img{width:100%;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 3px rgba(244,241,208,.22);transition:transform .3s ease,box-shadow .3s ease}
.logo-wall li:hover img{transform:scale(1.05) rotate(-4deg);box-shadow:0 0 0 5px var(--amarillo)}


/* ---------- 18 Desarrollo web y proceso ---------------------------------- */
.web-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem);margin-top:clamp(2.5rem,5vw,4rem)}
.wc{color:var(--titulo,var(--navy));border-radius:999px 999px 26px 26px;padding:0 clamp(1.4rem,2.6vw,2.5rem) clamp(1.75rem,2.6vw,2.5rem);display:flex;flex-direction:column}
.wc-top{aspect-ratio:2/1;display:grid;place-items:end center;padding-bottom:1.25rem}
.wc-top .ico{width:54px;height:54px;color:var(--acento,var(--azul-logo));stroke-width:1.6}
.wc h3{font-size:var(--fs-card);letter-spacing:-.04em;line-height:1;margin-bottom:.6rem}
.wc p{font-size:1rem;line-height:1.5}
.wc .checks{margin-bottom:0}
.wc .tile-link{margin-top:1.5rem}
.process{margin-top:clamp(4rem,7vw,6rem);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:2rem clamp(2rem,4vw,4rem);align-items:end}
.process h3{font-size:var(--fs-h3);letter-spacing:-.035em;line-height:1.05}
.process-intro p{margin-top:.75rem;font-size:var(--fs-sm);line-height:1.5}
.m-path{display:block;width:100%;height:auto;overflow:visible}
.m-path path{fill:none;stroke:var(--titulo,var(--navy));stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center;margin-top:.9rem}
.steps li{min-width:0}
.sn{display:block;font-size:clamp(1.9rem,4vw,3.6rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.st{display:block;font-weight:600;font-size:clamp(.8rem,1.3vw,1.125rem);margin-top:.3rem}


/* ---------- 19 Proyectos web --------------------------------------------- */
.proj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,3vw,3rem);margin-top:clamp(2.5rem,5vw,4rem);align-items:start}
.proj:nth-child(even){margin-top:5.5rem}
.plate{border-radius:var(--r-card);padding:clamp(1rem,2.6vw,2.25rem)}
.browser{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 22px 40px -22px rgba(35,46,92,.55);transition:transform .35s ease}
.proj:hover .browser{transform:translateY(-6px) rotate(-.6deg)}
.browser-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid var(--linea)}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:var(--durazno)}
.browser-bar i:nth-child(2){background:var(--amarillo)}
.browser-bar i:nth-child(3){background:var(--azul)}
.browser-bar span{margin-left:auto;font-size:.6875rem;font-weight:500;color:var(--gris)}
.browser img{width:100%;aspect-ratio:622/297;object-fit:cover}
.proj-meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1rem;margin-top:1.4rem}
.proj h3{font-size:var(--fs-h3);letter-spacing:-.035em;color:var(--navy);line-height:1.1}
.pf{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--azul)}
.proj p{margin-top:.6rem;max-width:34em}


/* ---------- 20 Contacto (WhatsApp) ---------------------------------------- */
.contact{overflow:hidden}
.contact-m{position:absolute;right:-8%;bottom:-30%;width:min(58vw,780px);aspect-ratio:277/188;fill:rgba(255,255,255,.07);pointer-events:none}
.contact-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
.contact .lead{margin-top:1.5rem}
.wa-big{display:flex;align-items:center;gap:1rem;margin-top:2.25rem;padding:.75rem 1.75rem .75rem .75rem;background:#fff;color:var(--navy);border-radius:var(--r-pill);text-decoration:none;width:fit-content;max-width:100%;transition:transform .2s}
.wa-big:hover{transform:translateY(-2px)}
.wa-big .wa-ico{width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none}
.wa-big .ico{width:26px;height:26px}
.wa-big small{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--gris)}
.wa-big b{display:block;font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.contact-list{margin-top:2rem;display:grid;gap:.75rem}
.contact-list li{display:flex;align-items:center;gap:.75rem;font-weight:500;overflow-wrap:anywhere}
.contact-list .ico{width:20px;height:20px}

.quote{position:relative;border-radius:var(--r-card);padding:clamp(1.75rem,3.5vw,3rem);color:var(--navy)}
.quote h3{font-size:clamp(1.6rem,2.4vw,2rem);letter-spacing:-.035em;line-height:1.1;margin-bottom:.6rem;max-width:12em}
.quote h3:focus{outline:none}
.quote .sticker{position:absolute;right:-16px;top:-52px;width:128px;transform:rotate(10deg)}
/* Tarjeta de contacto: sello "Consultoría gratuita", texto y tres compromisos */
.wa-card-txt{font-size:1.0625rem;line-height:1.55;max-width:30em;padding-right:4.5rem}
.wa-card-list{margin-top:1.75rem;margin-bottom:0;padding-top:1.5rem;border-top:1px solid rgba(35,46,92,.15)}


/* ---------- 21 Diálogo de evidencias ------------------------------------- */
.lb{border:0;padding:0;border-radius:20px;background:#fff;color:var(--navy);width:min(1000px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;--focus:var(--azul)}
.lb::backdrop{background:rgba(27,36,73,.82)}
.lb-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1rem 1rem 1.5rem;border-bottom:1px solid var(--linea)}
.lb-cap{font-size:var(--fs-sm);font-weight:600;line-height:1.35}
.lb-close{width:44px;height:44px;border-radius:50%;border:2px solid var(--navy);background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;flex:none}
.lb-fig{margin:0;padding:1rem}
.lb-fig img{width:auto;max-width:100%;height:auto;margin-inline:auto}
.lb-hint{display:none;font-size:var(--fs-xs);padding:.75rem 1.5rem 0;color:var(--gris)}


/* ---------- 22 WhatsApp flotante ----------------------------------------- */
/* Píldora en verde WhatsApp (#25D366, el color que la gente reconoce) con texto navy: contraste 6,5:1 */
.wa-flotante{position:fixed;z-index:60;right:calc(16px + env(safe-area-inset-right, 0px));bottom:calc(16px + env(safe-area-inset-bottom, 0px));display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;pointer-events:none;transition:opacity .25s,visibility .25s,transform .25s}
.wa-flotante > *{pointer-events:auto}
/* Siempre visible; solo se aparta mientras el menú móvil está abierto */
.wa-flotante.is-away{opacity:0;visibility:hidden;transform:translateY(12px)}
.wa-flotante.sobre-pie .wa-burbuja{display:none}
.wa-float{--wa:#25D366;position:relative;display:inline-flex;align-items:center;gap:.7rem;min-height:60px;padding:.4rem 1.4rem .4rem .4rem;border-radius:var(--r-pill);background:var(--wa);color:var(--navy);text-decoration:none;border:3px solid #fff;box-shadow:0 14px 30px -12px rgba(35,46,92,.75);transition:transform .2s}
.wa-float:hover{transform:translateY(-2px) scale(1.02)}
.wa-float:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 7px var(--navy)}
.wa-float-ico{width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none}
.wa-float-ico svg{width:26px;height:26px;fill:currentColor}
.wa-float-txt{display:flex;flex-direction:column;line-height:1.15}
.wa-float-txt small{font-size:.75rem;font-weight:600}
.wa-float-txt b{font-size:1rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.wa-burbuja{--focus:var(--navy);position:absolute;right:0;bottom:calc(100% + .75rem);width:max-content;cursor:pointer;max-width:270px;background:#fff;color:var(--navy);border-radius:18px 18px 4px 18px;padding:.9rem 2.6rem .95rem 1.1rem;box-shadow:0 16px 34px -14px rgba(35,46,92,.6);font-size:.9rem;line-height:1.4}
.wa-burbuja b{display:block;font-weight:700;margin-bottom:.15rem}
.wa-burbuja-cerrar{position:absolute;top:.3rem;right:.3rem;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--navy);display:grid;place-items:center;cursor:pointer}
.wa-burbuja-cerrar:hover{background:var(--crema)}
.wa-burbuja-cerrar .ico{width:16px;height:16px}
/* Pulso de atención: tres latidos al cargar (menos de 5 s, así que no necesita control de pausa) */
@media (prefers-reduced-motion: no-preference){
  .wa-float::before{content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;animation:wa-pulso 1.5s ease-out 1.2s 3}
  .wa-burbuja:not([hidden]){animation:wa-burbuja .35s cubic-bezier(.3,1.4,.5,1) both}
}
@keyframes wa-pulso{0%{box-shadow:0 0 0 0 rgba(37,211,102,.65)}100%{box-shadow:0 0 0 20px rgba(37,211,102,0)}}
@keyframes wa-burbuja{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .wa-float{min-height:54px;padding-right:1.1rem;gap:.55rem}
  .wa-float-ico{width:40px;height:40px}
  .wa-float-ico svg{width:22px;height:22px}
  .wa-largo{display:none}
  .wa-burbuja{max-width:236px;font-size:.85rem}
}


/* ---------- 23 Texto legal (.prose) -------------------------------------- */
.prose{max-width:46rem;font-size:var(--fs-body);line-height:1.7}
.prose > * + *{margin-top:1em}
.prose h2{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--titulo,var(--navy));margin-top:2.2em}
.prose h3{font-size:1.25rem;font-weight:700;letter-spacing:-.015em;line-height:1.3;color:var(--titulo,var(--navy));margin-top:1.8em}
.prose > h2:first-child,.prose > h3:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.35em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--azul)}
/* Solo enlaces de texto: los componentes con clase (.btn-wa, .btn…) conservan su estilo */
.prose a:not([class]){color:var(--azul);font-weight:600;text-underline-offset:.18em}
.prose strong{font-weight:700;color:var(--navy)}


/* ---------- 24 Utilidades ------------------------------------------------ */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}


/* ---------- 25 Movimiento ------------------------------------------------ */
/* Un solo momento orquestado en el héroe; todo parte de un estado visible (nada de opacity:0). */
@media (prefers-reduced-motion: no-preference){
  .display .ln,.display-2 .ln{animation:rise .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i, 0) * 90ms)}
  .hl::after{animation:sweep .7s cubic-bezier(.6,0,.2,1) .55s both}
  .cp{animation:rise 1s cubic-bezier(.2,.8,.2,1) both;--from:28px}
  .cp1{animation-delay:.2s}.cp2{animation-delay:.32s}.cp3{animation-delay:.44s}
  .cl{animation:pop .6s cubic-bezier(.3,1.5,.5,1) both}
  .cl1{animation-delay:.75s}.cl2{animation-delay:.85s}.cl3{animation-delay:.95s}
  .collage .sticker{animation:stamp 1.1s cubic-bezier(.3,1.3,.5,1) .6s both}
  .sticker .ring{animation:spin 26s linear infinite}
  .hero-m,.page-hero-m{animation:drift 1.6s cubic-bezier(.2,.8,.2,1) both}
  .band-track{animation:marquee 36s linear infinite}
  .band:hover .band-track{animation-play-state:paused}
  /* Botón visible "Pausar animaciones" (WCAG 2.2.2) */
  html.paused .band-track,html.paused .ring{animation-play-state:paused}
}
@keyframes rise{from{transform:translateY(var(--from,.2em))}to{transform:none}}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pop{from{transform:scale(.72)}to{transform:none}}
@keyframes stamp{0%{transform:rotate(-70deg) scale(.7)}70%{transform:rotate(-6deg) scale(1.05)}100%{transform:rotate(-12deg) scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{from{transform:translateX(5%) rotate(3deg)}to{transform:none}}
/* sitio.js fija --band-paso (ancho exacto de una copia de la lista, en px); sin JS, -50% = una de dos copias */
@keyframes marquee{to{transform:translateX(calc(-1 * var(--band-paso, 50%)))}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .band-track{width:auto}
  .band ul[aria-hidden="true"]{display:none}
  /* Banda quieta: la m pasa a ir delante de cada servicio, como viñeta, para que ninguna línea termine colgando en una m */
  .band ul{flex-wrap:wrap;padding-inline:calc(4vw + max(20px, env(safe-area-inset-left, 0px)));gap:.25rem .9em}
  .band li svg{order:-1;margin:0 .3em 0 0}
  .band li{white-space:normal}
  .band-ctrl{display:none}
}
/* Sin JavaScript: nada se mueve sin poder pausarse (WCAG 2.2.2) y el botón de menú, que no haría nada, se oculta */
html:not(.js) .menu-btn,html:not(.js) .motion-toggle,html:not(.js) .band-ctrl{display:none}
html:not(.js) .band-track,html:not(.js) .ring{animation:none}
html:not(.js) .band-track{width:auto}
html:not(.js) .band ul[aria-hidden="true"]{display:none}
html:not(.js) .band ul{flex-wrap:wrap;padding-inline:calc(4vw + max(20px, env(safe-area-inset-left, 0px)));gap:.25rem .9em}
html:not(.js) .band li svg{order:-1;margin:0 .3em 0 0}
html:not(.js) .band li{white-space:normal}


/* ---------- 26 Responsive ------------------------------------------------ */
@media (min-width:901px){
  .intro .h2{font-size:clamp(2.2rem,5.8vw,5.25rem)}
  /* Con el escalón, el "ver más" se aloja en el hueco bajo la primera tarjeta (6rem libres) */
  .tiles + .sec-more{margin-top:-4.5rem;max-width:calc((100% - 2 * clamp(1rem,2vw,1.75rem)) / 3)}
}
@media (max-width:1180px){
  .team-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .person:nth-child(5){grid-column:auto / span 2}
  .person:nth-child(7){grid-column:2 / span 2}
}
@media (max-width:1099px){
  .hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem}
  .bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .rt-a{grid-column:1 / -1;grid-row:auto}
  .rt-b,.rt-c,.rt-d,.rt-e{grid-column:span 3;grid-row:auto}
  .rt-f{grid-column:span 2;grid-row:auto}
  .rt-g{grid-column:span 4;grid-row:auto}
  /* La tarjeta grande pasa a todo el ancho: el recorte no crece más allá de ~1x de la captura (983px) */
  .rt-a .rt-shot{max-width:600px}
  .foot-top{grid-template-columns:minmax(0,.8fr) minmax(0,.85fr) minmax(0,1.3fr)}
  .foot-claim{grid-column:1 / -1}
}
@media (min-width:901px) and (max-width:1199px){
}
@media (max-width:959px){
  .hero-grid{grid-template-columns:1fr}
  .display{font-size:var(--fs-display)}
  .collage{justify-self:end;width:min(100%,540px);margin-top:1rem}
  .hero-m{display:none}
  .collage-m{display:block}
}
@media (max-width:900px){
  .menu-btn{display:inline-flex;order:3;margin-left:auto}
  .js .main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--crema);border-bottom:2px solid var(--navy);padding:.75rem max(var(--gut), env(safe-area-inset-right, 0px)) .75rem max(var(--gut), env(safe-area-inset-left, 0px));margin:0;max-height:calc(100vh - var(--hdr-h));max-height:calc(100dvh - var(--hdr-h) - env(safe-area-inset-top, 0px));overflow-y:auto}
  .js .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:0}
  .main-nav a{font-size:1.375rem;font-weight:700;color:var(--navy);padding:.7rem 0;border-radius:0;border-bottom:1px solid var(--linea);letter-spacing:-.02em}
  .main-nav li:last-child a{border-bottom:0}
  .main-nav a:hover{background:transparent;color:var(--azul)}
  .main-nav a[aria-current="page"]{font-weight:800;display:flex;align-items:center;gap:.6rem}
  .main-nav a[aria-current="page"]::after{position:static;order:-1;margin:0;width:20px;height:13px;flex:none}
  html:not(.js) .main-nav{margin-left:0;order:4;width:100%}
  html:not(.js) .hdr{flex-wrap:wrap}
  /* Sin JavaScript el menú va abierto dentro de la cabecera: deja de ser sticky para no tapar media pantalla */
  html:not(.js) .site-header{position:relative}
  .sec-head,.intro-top,.garantia-grid,.team-head,.contact-grid,.page-hero-grid{grid-template-columns:1fr}
  .tiles,.web-cards{grid-template-columns:1fr}
  .tiles > .tile:nth-child(n){margin:0;min-height:0}
  .figures{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fig:nth-child(even){margin-top:0}
  .fig:nth-child(2),.fig:nth-child(5){margin-top:2rem}
  .figures-4 .fig:nth-child(n){margin-top:0}
  .figures-4 .fig:nth-child(even){margin-top:2rem}
  .giant{font-size:clamp(4.4rem,21vw,11.5rem)}
  .wc{border-radius:180px 180px 24px 24px}
  .wc-top{aspect-ratio:auto;height:150px}
  .process{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .team-photo,.page-hero-media{justify-self:start;max-width:420px;margin-right:18px}
  .page-hero-m{width:130vw;right:-55%;top:auto;bottom:-6%}
  .proj-grid{grid-template-columns:1fr}
  .proj:nth-child(even){margin-top:0}
  /* Tablet y móvil: el nombre del caso va encima de su barra, a todo el ancho */
  .bars li{grid-template-columns:minmax(0,1fr) 3.9rem;gap:.3rem .6rem}
  .b-name{grid-column:1 / -1}
  /* Pie: Navegación y Servicios lado a lado; Contacto a todo el ancho para que los marcadores no se corten */
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 1.25rem}
  .foot-contact{grid-column:1 / -1}
}
/* Tableta: las cinco cifras del inicio en 3 + 2, con la segunda fila centrada */
@media (min-width:641px) and (max-width:900px){
  .intro .figures{grid-template-columns:repeat(6,minmax(0,1fr))}
  .intro .fig{grid-column:span 2}
  .intro .fig:nth-child(4){grid-column:2 / span 2}
}
@media (max-width:640px){
  :root{--hdr-h:64px}
  .brand img{height:32px}
  .hdr{gap:.75rem}
  .hero{padding-top:1.5rem}
  /* Móvil: el collage del equipo sube justo debajo del H1 para que las personas salgan en el primer pantallazo */
  .hero-grid{gap:0}
  .hero-copy{display:contents}
  .kicker{order:1;justify-self:start;font-size:.6875rem;letter-spacing:.04em}
  .display{order:2}
  .collage{order:3;justify-self:center;width:100%;max-width:340px;aspect-ratio:52/50;margin:.25rem auto 1.5rem}
  .hero .lead{order:4}
  .hero .actions{order:5;flex-direction:column;align-items:stretch}
  .actions .btn,.btn-wa{justify-content:center}
  .cp1{left:5%;top:22%}
  .cp2{top:2%}
  .cp3{top:52%;width:32%}
  .cl3{left:2%;top:5%}
  .chip-name{left:-4%}
  .figures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fig:nth-child(n){margin-top:0}
  .fig:nth-child(even){margin-top:1.75rem}
  .fig:nth-child(5){grid-column:1 / -1;aspect-ratio:auto;border-radius:var(--r-pill);flex-direction:row;align-items:center;justify-content:flex-start;gap:1rem;padding:1.1rem 1.75rem;margin-top:0}
  .fig:nth-child(5) strong{font-size:2.6rem}
  .fig:nth-child(5) span{margin-top:0}
  .figures.figures-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .figures-4 .fig:nth-child(even){margin-top:1.75rem}
  .bento{grid-template-columns:1fr}
  .rt-a,.rt-b,.rt-c,.rt-d,.rt-e,.rt-f,.rt-g{grid-column:1 / -1}
  .rt{min-height:0}
  .rt-k,.rt-num-abajo{padding-top:1.75rem}
  .bars li{font-size:.8125rem}
  .team-grid{grid-template-columns:1fr;gap:2.25rem}
  .person,.person:nth-child(5),.person:nth-child(7){grid-column:auto;display:grid;grid-template-columns:118px minmax(0,1fr);gap:0 1.25rem;align-items:start}
  .p-arch{grid-row:span 5;margin-right:8px;box-shadow:8px 8px 0 var(--ac)}
  .a-admin .p-arch{box-shadow:8px 8px 0 0 #fff,8px 8px 0 2px var(--navy)}
  .area{margin-top:.25rem;justify-self:start}
  .person h3{font-size:1.125rem}
  .logo-wall{grid-template-columns:repeat(6,minmax(0,1fr))}
  .logo-wall li:nth-child(n){grid-column:auto / span 2}
  .logo-wall li:nth-child(4),.logo-wall li:nth-child(9){grid-column:2 / span 2}
  .logo-wall li:nth-child(6){grid-column:1 / span 2}
  .wc{border-radius:150px 150px 22px 22px}
  .wc-top{height:120px}
  .steps{margin-top:.6rem}
  .st{font-size:.75rem}
  .quote .sticker{width:100px;top:-62px;right:-6px}
  .quote h3{padding-right:4.5rem}
  .wa-big{padding-right:1.25rem}
  .wa-card-txt{padding-right:0}
  .sec-more .btn,.cierre .btn{flex:1 1 100%}
  .cierre .actions{width:100%}
  .site-footer{padding-bottom:calc(6rem + env(safe-area-inset-bottom, 0px))}
  .foot-bottom{flex-direction:column;align-items:flex-start}
  .h2{line-height:1.04}
  .rt-shot,.rt-cap{display:none}
  .lb-hint{display:block}
  .lb-fig{overflow-x:auto}
  .lb-fig img{max-width:none;width:900px}
  .page-hero-media .sticker{left:auto;right:-4%;top:-8%}
}
@media (max-width:360px){
  /* "Lanzamiento" cabe en su columna de 72 px a 320 */
  .st{font-size:.6875rem;letter-spacing:-.025em}
}
@media (max-width:359px){
  /* El sello "Consultoría gratuita" no pisa el cierre de "[Ciudad, Colombia]" (12 px libres a 320) */
  .quote .sticker{top:-54px;width:88px}
  /* El sello solo ocupa el primer renglón: "Hablemos por WhatsApp" queda en dos y no en tres */
  .quote h3{padding-right:3rem}
  /* "especialidades," cabe en 288 px y la columna no se ensancha */
  .sec-head{grid-template-columns:minmax(0,1fr)}
  /* :where() deja la especificidad en una clase: no pisa tamaños propios como .intro .h2 */
  :where(.h2):not(.h2-xl){font-size:2.25rem}
}
@media (max-width:340px){
  .garantia .sticker{width:76px}
}
@media (max-width:309px){
  .intro .h2 .nowrap{white-space:normal}
}


/* ---------- 27 Impresión ------------------------------------------------- */
@media print{
  .site-header{position:static;backdrop-filter:none}
  .wa-flotante,.band-wrap,.menu-btn,.motion-toggle,.skip,.lb{display:none!important}
  .sec,.hero,.page-hero{padding:2rem 0}
}