/* Adecomp — hoja compartida por index.html, servicios.html y noticias.html.
   Extraída del <style> inline de index.html el 2026-08-10: con tres páginas,
   mantenerlo inline garantizaba la deriva que DESIGN.md §3 ya documenta
   (una paleta, ocho juegos de alias, 13 plantillas). Un solo archivo, una
   sola verdad. server.py ya sirve estáticos: no añade build ni dependencias. */
  /* ── Tokens ─────────────────────────────────────────── */
  :root{
    /* Azul de marca REAL, no una aproximación: lo documenta la propia empresa en
       Marketing/Logo/color adecomp.JPG (HTML #2E57A6 · RGB 46/87/166) y aparece
       pixel-exacto en el .ai maestro (fill 0.18/0.345/0.651). Ojo: el sitio viejo
       usa #2563BA, que NO es el color de marca — lo puso el pasante a ojo. */
    --brand:      #2E57A6;
    --brand-deep: #24457F;   /* mismo tono, un escalón más oscuro: hovers y profundidad */
    --ink:        #0B1422;   /* fondo profundo — armoniza con --brand */
    --ink-2:      #101D31;
    --paper:      #F7F5F0;
    --white:      #FFFFFF;
    --accent:     #F2A33C;   /* ámbar taller — EXPLORATORIO, pendiente pregunta 13 */
    --accent-deep:#DA8B25;
    --wa:         #22C15E;
    --muted:      #90A2B8;   /* texto secundario SOBRE tinta */
    --muted-bright:#C9D4E2;  /* idem, un paso más claro (subtítulos, specs) */
    /* Neutros consolidados 2026-08-10. Antes había 11 cálidos y 8 fríos casi
       idénticos haciendo el trabajo de estos cinco — esa acumulación es lo que
       se leía como "muchos colores". Regla desde hoy: ningún hex suelto, todo
       color entra por token. Excepciones documentadas abajo del bloque. */
    --line-warm:  #E2DCCF;   /* filetes y bordes de tarjeta sobre papel */
    --edge-warm:  #CBC3B0;   /* bordes con peso: botones, hover */
    --muted-warm: #8A8474;   /* texto secundario cálido sobre papel */
    --muted-cool: #5A6B80;   /* texto de cuerpo secundario sobre papel */
    --ink-3:      #33415A;   /* texto oscuro secundario, más contraste que --muted-cool */
    --surface-cool:#EAF0F5;  /* única superficie azulada clara (resultado del taller) */
    --line:       rgba(255,255,255,.13);
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
    --sans: 'Inter', system-ui, sans-serif;
    --disp: 'Space Grotesk', var(--sans);
    --ease: cubic-bezier(.22,.61,.21,1);
    --pain-col-w: 290px; /* ancho de tarjeta del carrusel de "¿Te suena?" — ver .pain-col */
  }
  *,*::before,*::after{ box-sizing:border-box; margin:0; }
  html{ scroll-behavior:smooth; }
  body{
    font-family:var(--sans); background:var(--ink); color:var(--white);
    -webkit-font-smoothing:antialiased; line-height:1.6;
  }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

  .mono{ font-family:var(--mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; }

  /* ── Topbar ─────────────────────────────────────────── */
  .topbar{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
    padding:1.1rem clamp(1.25rem,4vw,3.5rem);
    border-bottom:1px solid var(--line); position:relative; z-index:20;
  }
  .lockup{ display:flex; align-items:baseline; gap:.8rem; text-decoration:none; color:var(--white); }
  .topbar-brand{ display:flex; align-items:baseline; gap:.8rem; }
  .lockup .name{ font-family:var(--disp); font-weight:700; font-size:1.35rem; letter-spacing:.02em; }
  .lockup .sep{ width:1px; height:1.05rem; background:var(--line); transform:translateY(2px); }
  .lockup .since{ font-family:var(--mono); font-size:.76rem; letter-spacing:.2em; color:var(--accent); }
  .topbar-nav{ display:flex; align-items:center; justify-content:center; gap:1.4rem; }
  /* ── Nav: los tres ítems son EL MISMO elemento ──────────
     Antes eran tres cosas distintas (botón con chevron, botón sin chevron y un
     <a> pelado) en contenedores distintos — de ahí el espaciado desparejo y que
     solo uno tuviera flecha. Ahora: mismo tag, mismo chevron, mismo gap, misma
     línea base. */
  /* Tamaño: estaba en .7rem (11,2px) — el mismo cuerpo que un eyebrow. Al lado
     de la referencia (Tusker, ~15px) se veía diminuto para ser la navegación
     principal. Sube a .88rem (14,1px) y el tracking baja de .2em a .12em: en
     monoespaciada, mucho tracking a mayor cuerpo separa demasiado las palabras
     y la etiqueta deja de leerse como una unidad. */
  .nav-toggle{
    display:inline-flex; align-items:center; gap:.45rem; appearance:none; border:0; padding:0;
    cursor:pointer; background:transparent; color:var(--accent); font-family:var(--mono);
    font-size:.88rem; letter-spacing:.12em; line-height:1; text-transform:uppercase;
    text-decoration:none; transition:color .2s var(--ease);
  }
  .nav-toggle:hover,.nav-toggle:focus-visible{ color:var(--white); outline:none; }
  .nav-toggle[aria-expanded="true"]{ color:var(--white); }
  .nav-toggle svg{ width:13px; height:13px; transition:transform .24s var(--ease); }
  .nav-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }

  /* ── Deck de menús: SIEMPRE en el mismo sitio ───────────
     Modelo Tusker: abra el menú que abra, el panel sale centrado y con el mismo
     envolvente. Antes cada panel colgaba de su propio ítem (position:absolute
     dentro de .services-nav / .taller-nav) y aparecía en un sitio distinto.
     Va anclado a .topbar, que ocupa el ancho completo -> left:50% ES el centro
     del viewport, y el deck baja con el header al scrollear sin position:fixed.
     Efecto colateral: al limitar el ancho al viewport desaparece el desborde
     horizontal que #servicesMenu provocaba entre 480 y 900px (log it. 19). */
  .menu-deck{
    position:absolute; top:calc(100% + .75rem); left:50%; transform:translateX(-50%);
    z-index:30; width:min(920px, calc(100vw - 2.5rem));
    display:grid; pointer-events:none;
  }
  /* Los tres paneles comparten celda: el deck mide lo que el más alto, así el
     envolvente NO cambia de tamaño al saltar de un menú a otro. */
  .menu-panel{
    grid-area:1/1; display:grid; grid-template-columns:1fr 300px; min-height:340px;
    overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:16px;
    background:var(--paper); color:var(--ink); box-shadow:0 28px 70px rgba(0,0,0,.38);
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .menu-panel.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }

  /* Lista de rutas — a la IZQUIERDA (decisión vigente en MEMORY.md: no se copia
     el orden de Tusker, solo el centrado y el color por menú). */
  .menu-list{ order:1; display:flex; flex-direction:column; padding:.75rem 1.35rem; }
  .menu-label{ padding:.72rem .5rem .45rem; color:var(--muted-warm); font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; }
  .menu-link{
    display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:58px; padding:.75rem .5rem;
    border-top:1px solid var(--line-warm); color:var(--ink); text-decoration:none;
    transition:color .2s var(--ease), padding .2s var(--ease);
  }
  .menu-link:last-child{ border-bottom:1px solid var(--line-warm); }
  .menu-link span:first-child{ display:flex; flex-direction:column; gap:.12rem; }
  .menu-link b{ font-family:var(--disp); font-size:1rem; letter-spacing:-.015em; }
  .menu-link small{ color:var(--muted-cool); font-size:.8rem; }
  .menu-arrow{ color:var(--accent-deep); font-size:1.4rem; line-height:1; transition:transform .2s var(--ease); }
  .menu-link:hover,.menu-link:focus-visible{ padding-left:.85rem; color:var(--accent-deep); outline:none; }
  .menu-link:hover .menu-arrow,.menu-link:focus-visible .menu-arrow{ transform:translate(3px,-3px); }

  /* Panel de color. La imagen es un fotograma REAL del video del negocio, no
     stock: AGENTS.md manda foto propia antes que stock, y el estudio descarta
     el stock corporativo por completo (caso Courser). */
  .menu-side{ order:2; display:flex; flex-direction:column; padding:1.35rem; color:var(--white); }
  .menu-side .mono{ font-size:.68rem; color:rgba(255,255,255,.76); }
  /* height:auto es obligatorio: el <img> lleva height="400" como atributo, y ese
     hint presentacional deja la altura fija, con lo que aspect-ratio se ignora
     por completo (solo actúa si una dimensión es auto). Sin esto la imagen salía
     de 257×400 —vertical— e inflaba el panel a 709px de alto. */
  .menu-side-img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:12px; }
  .menu-side h2{ font-family:var(--disp); font-size:1.4rem; line-height:1.08; letter-spacing:-.02em; margin-top:.85rem; }
  .menu-side p{ margin-top:.5rem; font-size:.88rem; line-height:1.5; color:rgba(255,255,255,.86); }
  .menu-side .pill{
    margin-top:1rem; align-self:flex-start; padding:.6rem 1.15rem; border-radius:100px;
    background:var(--white); color:var(--ink); font-weight:700; font-size:.86rem; text-decoration:none;
    transition:transform .2s var(--ease), background .2s var(--ease);
  }
  .menu-side .pill:hover{ transform:translateY(-2px); background:var(--accent); }

  /* Un token por menú — cero colores nuevos, solo asignación. Es lo que hace que
     el patrón se lea como sistema y no como decoración (Tusker: carbón/verde/mostaza).
     Contraste: blanco sobre --brand 6,9:1 · blanco sobre --ink ~18:1 ·
     --ink sobre --accent-deep 6,8:1. Los tres pasan AA. */
  #menuServicios .menu-side{ background:var(--brand); }
  #menuTaller    .menu-side{ background:var(--ink); }
  #menuNoticias  .menu-side{ background:var(--accent-deep); color:var(--ink); }
  #menuNoticias  .menu-side .mono{ color:rgba(11,20,34,.72); }
  #menuNoticias  .menu-side p{ color:rgba(11,20,34,.82); }
  #menuNoticias  .menu-side .pill{ background:var(--ink); color:var(--white); }
  #menuNoticias  .menu-side .pill:hover{ background:var(--ink-2); }

  /* La consulta de reparación vive DENTRO del panel de color de TALLER, apilada
     a una columna: es la acción real de ese menú, así que ocupa el sitio del CTA. */
  #menuTaller .menu-side form{ display:grid; gap:.5rem; margin-top:.85rem; }
  #menuTaller .menu-side label{ display:grid; gap:.22rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:rgba(255,255,255,.76); }
  #menuTaller .menu-side input{ border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:var(--white); border-radius:7px; padding:.5rem .6rem; font:inherit; font-size:.92rem; }
  #menuTaller .menu-side input::placeholder{ color:rgba(255,255,255,.4); }
  #menuTaller .menu-side button[type=submit]{ margin-top:.15rem; justify-self:start; border:0; border-radius:100px; background:var(--accent); color:var(--ink); font-weight:700; font-size:.86rem; padding:.55rem 1.1rem; cursor:pointer; }
  #tallerMessage{ margin-top:.5rem; font-size:.78rem; color:rgba(255,255,255,.8); }
  .taller-result{ display:none; margin-top:.5rem; padding:.6rem .7rem; border-radius:8px; background:rgba(255,255,255,.1); font-size:.82rem; }
  .taller-result.is-visible{ display:grid; gap:.25rem; }
  .taller-result button{ background:transparent; border:0; padding:0; text-align:left; color:rgba(255,255,255,.55); font:inherit; font-size:.76rem; }

  .menu-scrim{ position:fixed; z-index:15; inset:0; background:rgba(4,10,18,.48); opacity:0; visibility:hidden; transition:opacity .2s var(--ease), visibility .2s; }
  .menu-scrim.is-open{ opacity:1; visibility:visible; }

  @media (max-width:900px){
    .menu-deck{ width:calc(100vw - 1.5rem); }
    .menu-panel{ grid-template-columns:1fr; min-height:0; }
    .menu-side{ order:1; }   /* en móvil la imagen y el CTA van arriba */
    .menu-list{ order:2; }
    .menu-side-img{ aspect-ratio:16/7; }
  }
  .top-actions{ display:flex; justify-content:flex-end; align-items:center; gap:1.4rem; }
  .client-link{ color:var(--muted); font-size:.92rem; text-decoration:none; transition:color .2s; }
  .client-link:hover{ color:var(--white); }
  .wa-pill{
    display:inline-flex; align-items:center; gap:.5rem;
    background:transparent; border:1.5px solid var(--wa); color:var(--wa);
    padding:.5rem 1.1rem; border-radius:100px; font-weight:600; font-size:.92rem;
    text-decoration:none; transition:all .22s var(--ease);
  }
  .wa-pill:hover{ background:var(--wa); color:var(--ink); transform:translateY(-1px); }

  /* ── Hero ───────────────────────────────────────────── */
  .hero{
    position:relative; overflow:hidden;
    padding:clamp(3rem,7vh,5.5rem) clamp(1.25rem,4vw,3.5rem) clamp(3.5rem,8vh,6rem);
  }
  /* grano — lo que separa un fondo plano de uno con materia (lección Tusker) */
  .hero::before{
    content:''; position:absolute; inset:0; opacity:.055; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  /* tinte frío arriba-izquierda, muy leve — profundidad sin degradado-slop */
  .hero::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 90rem 44rem at 12% -10%, rgba(46,87,166,.16), transparent 60%);
  }
  .hero-grid{
    position:relative; z-index:2;
    display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2.5rem,5vw,5rem);
    max-width:1240px; margin:0 auto; align-items:center;
  }

  .eyebrow{ display:flex; align-items:center; gap:.6rem; color:var(--muted); margin-bottom:1.6rem; }
  .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); }

  h1{
    font-family:var(--disp); font-weight:700;
    font-size:clamp(2.7rem, 7.2vw, 5.1rem);
    line-height:1.02; letter-spacing:-0.025em;
  }
  /* cada línea vive en una máscara — GSAP la sube desde abajo del recorte */
  h1 .mask{ display:block; overflow:hidden; padding-block:.06em; margin-block:-.06em; }
  h1 .l{ display:block; }
  h1 .accent{ color:var(--accent); }

  .sub{
    margin-top:1.6rem; max-width:34rem; color:var(--muted-bright); font-size:1.06rem; line-height:1.7;
  }
  .sub strong{ color:var(--white); font-weight:600; }

  .cta-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.1rem; }

  /* ── Insignias de confianza ────────────────────────────────────────
     Una sola fila bajo el argumento: las insignias son prueba, no decoración.
     Se omite la segunda fila bajo la cotización para no duplicarlas ni recargar el hero. */
  .quote-wrap{ display:flex; flex-direction:column; }
  .trust{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:2.1rem; }
  .trust--partners{ gap:.55rem; margin-top:1.85rem; align-items:stretch; }
  .partner-badge{
    display:grid; place-items:center; width:116px; min-height:58px; padding:.38rem .55rem;
    overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:8px;
    background:rgba(255,255,255,.98); box-shadow:0 7px 18px rgba(0,0,0,.14);
    transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
  }
  .partner-badge img{ display:block; width:100%; height:100%; max-height:48px; object-fit:contain; }
  .partner-badge--amd{ background:#0c1015; }   /* fondo exigido por la insignia AMD — literal a propósito */
  .partner-badge--amd img{ transform:scale(1.13); }
  .partner-badge--lenovo{ background:#edf0fb; } /* idem Lenovo */
  .partner-badge--lenovo img{ transform:scale(1.08); }
  .partner-badge:hover{ transform:translateY(-3px); border-color:rgba(242,163,60,.72); box-shadow:0 12px 25px rgba(0,0,0,.22); }
  .badge-slot{
    display:grid; place-items:center; text-align:center;
    border:1.5px dashed rgba(255,255,255,.28); border-radius:10px;
    color:var(--muted); font-family:var(--mono); font-size:.66rem; letter-spacing:.08em;
    padding:.65rem 1.1rem; min-width:92px; min-height:42px;
  }
  .badge-slot.tall{ min-width:72px; min-height:72px; }
  .trust-note{
    margin-top:.6rem; font-size:.78rem; font-style:italic; color:var(--muted); opacity:.75;
  }
  @media (max-width:480px){
    .trust--partners{ gap:.45rem; }
    .partner-badge{ width:calc((100vw - 3.1rem) / 3); min-width:84px; min-height:52px; padding:.3rem .38rem; }
    .partner-badge img{ max-height:43px; }
  }
  .btn{
    display:inline-flex; align-items:center; gap:.55rem;
    padding:.85rem 1.7rem; border-radius:100px; font-weight:600; font-size:.95rem;
    text-decoration:none; transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s, border-color .22s, color .22s;
  }
  .btn-primary{ background:var(--accent); color:var(--ink); box-shadow:0 6px 22px rgba(242,163,60,.22); }
  .btn-primary:hover{ background:var(--accent-deep); transform:translateY(-2px); box-shadow:0 10px 28px rgba(242,163,60,.3); }
  .btn-ghost{ border:1.5px solid rgba(255,255,255,.3); color:var(--white); }
  .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

  .no-pressure{ margin-top:1.15rem; color:var(--muted); }
  .no-pressure b{ color:var(--accent); font-weight:500; }

  /* fila de estadísticas — quieta, el año abre la fila (modelo centrexIT) */
  .stats{
    display:grid; grid-template-columns:repeat(4,auto); gap:clamp(1.4rem,3vw,3rem);
    margin-top:2.8rem; padding-top:1.9rem; border-top:1px solid var(--line); width:fit-content;
  }
  .stat .n{ font-family:var(--disp); font-weight:700; font-size:1.8rem; line-height:1; }
  .stat .t{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.45rem; }

  /* ── Card de cotización (modelo Deel) ───────────────── */
  .quote-card{
    background:var(--paper); color:var(--ink); border-radius:20px;
    padding:2rem 2rem 1.6rem; box-shadow:0 30px 70px rgba(0,0,0,.45);
  }
  .proof-row{ display:flex; flex-wrap:wrap; gap:.4rem .95rem; margin-bottom:1.3rem; }
  .proof{ display:flex; align-items:center; gap:.4rem; font-size:.86rem; font-weight:600; color:var(--ink-3); }
  .proof .ck{ color:var(--accent-deep); font-weight:700; }
  .quote-card h2{ font-family:var(--disp); font-weight:700; font-size:1.45rem; letter-spacing:-.01em; }
  .quote-card .hint{ color:var(--muted-cool); font-size:.9rem; margin-top:.3rem; margin-bottom:1.2rem; }
  .field{ margin-bottom:.85rem; }
  .field input,.field textarea{
    width:100%; border:1.5px solid var(--line-warm); background:var(--white); border-radius:10px;
    padding:.72rem .95rem; font:inherit; font-size:.92rem; color:var(--ink);
    transition:border-color .2s, box-shadow .2s;
  }
  .field textarea{ resize:vertical; min-height:5.2rem; }
  .field input:focus,.field textarea:focus{
    outline:none; border-color:var(--accent-deep); box-shadow:0 0 0 3px rgba(218,139,37,.16);
  }
  .quote-btn{
    width:100%; border:none; cursor:pointer;
    background:var(--ink); color:var(--white);
    padding:.95rem; border-radius:100px; font:inherit; font-weight:600; font-size:.98rem;
    transition:transform .22s var(--ease), background .2s;
  }
  .quote-btn:hover{ background:var(--ink-2); transform:translateY(-2px); }
  .quote-note{ text-align:center; color:var(--muted-cool); margin-top:.9rem; font-size:.72rem; }

  /* ── Banda de marcas (modelo Tusker + Charles IT) ───── */
  .brands{
    background:var(--paper); color:var(--ink);
    padding:clamp(2.6rem,6vh,4rem) clamp(1.25rem,4vw,3.5rem);
  }
  .brands-inner{ max-width:1240px; margin:0 auto; }
  /* marquee de logos — decisión de Esteban 2026-08-09 (revierte la recomendación
     "quieto" del estudio; se ejecuta con los guardarraíles de calidad):
     lento (36s), pausa al hover, desvanecido en los bordes, y reduced-motion lo apaga */
  .marquee{
    margin-top:0; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .track{ display:flex; width:max-content; animation:marquee 36s linear infinite; }
  .set{
    display:flex; align-items:center;
    gap:clamp(3rem,6.5vw,5.5rem); padding-right:clamp(3rem,6.5vw,5.5rem);
  }
  .set img{
    height:48px; width:auto; display:block;
    opacity:.8; transition:opacity .25s, filter .25s, transform .25s;
  }
  /* escala óptica: los wordmarks de Simple Icons viven en caja cuadrada 24×24
     con relleno vertical — necesitan más altura nominal para pesar lo mismo
     que los símbolos compactos (HP, Dell, Intel) */
  .set img[src*="epson"], .set img[src*="samsung"]{ height:86px; }
  .set img[src*="lenovo"], .set img[src*="asus"]{ height:74px; }
  .set img[src*="acer"]{ height:66px; }
  .set img:hover{ opacity:1; filter:brightness(.35); transform:translateY(-2px); }
  .marquee:hover .track{ animation-play-state:paused; }
  @keyframes marquee{ to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce){
    .track{ animation:none; width:auto; flex-wrap:wrap; }
    .marquee{ -webkit-mask-image:none; mask-image:none; }
  }

  /* ── Secciones siguientes (1: dolores · 2: cómo trabajamos · 3: servicios) ── */
  .sec{ padding:clamp(3rem,8vh,5.5rem) clamp(1.25rem,4vw,3.5rem); }
  .sec-inner{ max-width:1240px; margin:0 auto; }
  .sec-title{
    font-family:var(--disp); font-weight:700; letter-spacing:-.015em;
    font-size:clamp(1.45rem,2.8vw,2.1rem); margin-top:.55rem;
  }
  /* revelado seguro: visible por defecto; JS solo lo esconde si está bajo el viewport */
  .reveal{ transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.pre{ opacity:0; transform:translateY(24px); }
  .reveal.in{ opacity:1; transform:none; }

  /* 1 · ¿Te suena? (modelo MIS "Do these challenges sound familiar?") */
  .pains{ background:var(--paper); color:var(--ink); border-top:1px solid var(--line-warm); }
  .pains .mono{ color:var(--muted-warm); }
  .pain-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.2rem; }
  .pain{
    background:var(--white); border:1px solid var(--line-warm); border-radius:16px;
    padding:1.5rem 1.45rem; display:flex; flex-direction:column; gap:.75rem;
    text-decoration:none; color:inherit;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  }
  .pain:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(11,20,34,.09); border-color:var(--edge-warm); }
  .pain .k{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; color:var(--accent-deep); }
  .pain h3{ font-family:var(--disp); font-weight:700; font-size:1.06rem; line-height:1.3; letter-spacing:-.01em; }
  .pain p{ font-size:.94rem; color:var(--muted-cool); line-height:1.55; }
  .pain .go{ margin-top:auto; padding-top:.5rem; font-weight:600; font-size:.92rem; color:var(--accent-deep); }

  /* CTA compartido (lo usa la sección empresas) */
  .how-cta{ margin-top:2.7rem; display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }

  /* 3 · Servicios de taller (los 8 reales de la BD — sin precios, con duración) */
  .services{ background:var(--paper); color:var(--ink); border-top:1px solid var(--line-warm); }
  .services .mono{ color:var(--muted-warm); }
  .svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.2rem; }
  .svc{
    background:var(--white); border:1px solid var(--line-warm); border-radius:16px;
    padding:1.35rem 1.4rem; display:flex; flex-direction:column; gap:.5rem;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  }
  .svc:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(11,20,34,.09); border-color:var(--edge-warm); }
  .svc .dur{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; color:var(--muted-warm); }
  .svc h3{ font-family:var(--disp); font-weight:700; font-size:1rem; letter-spacing:-.01em; }
  .svc p{ font-size:.92rem; color:var(--muted-cool); line-height:1.5; }
  .svc-cta{ margin-top:2.4rem; display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }

  /* anclas visuales — sprite Lucide (icons.svg), trazo 2px, heredan color */
  .ic{ width:22px; height:22px; flex:0 0 auto; }
  .pain .k-row{ display:flex; align-items:center; justify-content:space-between; }
  .pain .k-row .ic{ width:26px; height:26px; color:var(--accent-deep); }
  .step h3 .ic{ width:21px; height:21px; color:var(--accent); vertical-align:-4px; margin-right:.5rem; }
  .svc .ic{ width:24px; height:24px; color:var(--accent-deep); margin-bottom:.15rem; }

  /* Video real de "¿Te suena?" — vivía en la sección de historia (eliminada
     2026-08-11: irrelevante para conversión, ya hay prueba social en Google Reviews).
     El video quedó porque es contenido de TALLER, congruente con esta sección. */
  .story-video{ display:flex; flex-direction:column; align-items:center; gap:.85rem; }
  .story-video video{
    width:100%; max-width:360px; aspect-ratio:608/1080; display:block;
    border-radius:18px; border:1px solid var(--line-warm);
    box-shadow:0 20px 44px rgba(11,20,34,.14); background:#000; object-fit:cover;
  }
  .story-video .cap{
    font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted-warm); text-align:center;
  }


  /* 6 · Para empresas (posicionamiento por contraste — modelo Corsica) */
  .biz{ background:var(--ink); color:var(--white); border-top:1px solid var(--line); }
  .biz .mono{ color:var(--muted); }
  .contrast{ margin-top:1.1rem; font-size:1.08rem; color:var(--muted-bright); max-width:44rem; line-height:1.7; }
  .contrast b{ color:var(--white); }
  .biz-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.4rem; }
  .biz-card{
    border:1px solid var(--line); border-radius:16px; padding:1.5rem 1.4rem;
    display:flex; flex-direction:column; gap:.55rem; background:rgba(255,255,255,.02);
    transition:transform .25s var(--ease), border-color .25s;
  }
  .biz-card:hover{ transform:translateY(-4px); border-color:rgba(242,163,60,.45); }
  .biz-card .ic{ width:26px; height:26px; color:var(--accent); margin-bottom:.3rem; }
  .biz-card h3{ font-family:var(--disp); font-weight:700; font-size:1.03rem; letter-spacing:-.01em; }
  .biz-card p{ color:var(--muted-bright); font-size:.94rem; line-height:1.55; }
  .biz-card .spec{
    list-style:none; padding:.85rem 0 0; margin-top:auto;
    border-top:1px solid var(--line);
    display:flex; flex-direction:column; gap:.42rem;
  }
  .biz-card .spec li{
    font-family:var(--mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
    color:var(--muted); display:flex; gap:.5rem; align-items:baseline;
  }
  .biz-card .spec li::before{ content:'—'; color:var(--accent); }

  /* 7 · Ubicación + CTA final — tinta (2026-08-11: "reseñas de Google" pasó a papel,
     así que ubicación vuelve a tinta para no dejar dos secciones claras seguidas;
     cierra junto al footer, también tinta, como unidad — mismo patrón que iteración 7) */
  .visit{ background:var(--ink); color:var(--white); border-top:1px solid var(--line); }
  .visit .mono{ color:var(--muted); }
  .visit-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,4vw,3.5rem); margin-top:2.2rem; align-items:stretch; }
  .vinfo{ display:flex; flex-direction:column; gap:1.1rem; }
  .vrow{ display:flex; gap:.85rem; align-items:flex-start; font-size:.95rem; color:var(--muted-bright); line-height:1.55; }
  .vrow .ic{ width:20px; height:20px; color:var(--accent); margin-top:2px; }
  .vrow b{ color:var(--white); }
  .vcta{ margin-top:auto; padding-top:1.2rem; display:flex; gap:.9rem; flex-wrap:wrap; }
  .vmap{ border-radius:16px; overflow:hidden; border:1px solid var(--line); min-height:340px; }
  .vmap iframe{ width:100%; height:100%; border:0; display:block; }

  /* footer — solo datos reales */
  .foot{ background:var(--ink); color:var(--muted); padding:2.2rem clamp(1.25rem,4vw,3.5rem); border-top:1px solid var(--line); }
  .foot-inner{ max-width:1240px; margin:0 auto; display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between; font-size:.92rem; }
  .foot a{ color:var(--muted); text-decoration:none; transition:color .2s; }
  .foot a:hover{ color:var(--white); }

  /* ── Responsive ─────────────────────────────────────── */
  @media (max-width: 900px){
    /* Nav en móvil. Se quedaba en .7rem (~11px) porque nunca se ajustó para
       pantallas chicas: eso es tamaño de eyebrow, no de navegación primaria, y
       además dejaba el área táctil muy por debajo del mínimo de 44px. Sube a
       .92rem con menos tracking (si no, las tres etiquetas no entran en una
       línea) y gana altura de toque real. Referencia: la nav de Tusker. */
    .nav-toggle{ font-size:.92rem; letter-spacing:.07em; gap:.38rem; min-height:44px; }
    .nav-toggle svg{ width:16px; height:16px; }
    .topbar-nav{ gap:1.3rem; }

    .hero-grid{ grid-template-columns:1fr; gap:2.6rem; }
    .stats{ grid-template-columns:repeat(2,auto); gap:1.4rem 2.6rem; }
    .client-link{ display:none; }
    .svc-grid{ grid-template-columns:repeat(2,1fr); }
    .steps{ grid-template-columns:1fr; gap:1.8rem; }
    .visit-grid{ grid-template-columns:1fr; }
    .biz-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width: 540px){
    .svc-grid,.biz-grid{ grid-template-columns:1fr; }
  }
  @media (max-width: 480px){
    .cta-row .btn{ width:100%; justify-content:center; }
    .quote-card{ padding:1.5rem 1.25rem 1.25rem; }
    .topbar{ grid-template-columns:1fr; justify-items:center; align-items:center; }
    .topbar-brand,.top-actions{ justify-self:center; }
    .topbar-nav{ display:flex; flex-wrap:wrap; gap:1rem; }
    /* El bloque `position:fixed` que vivía aquí se eliminó: solo entraba bajo
       480px, y entre 480 y 900px dejaba al menú posicionado fuera del viewport
       sumando al scrollWidth del documento — era el desborde horizontal anotado
       en log.md it. 19. El deck centrado con width:min(...,100vw-…) lo resuelve
       en todos los anchos, así que no hace falta ningún caso especial. */
    .menu-deck{ max-height:calc(100vh - 6rem); overflow:auto; }
    .menu-side h2{ font-size:1.25rem; }
    .menu-side p{ display:none; }
    .menu-link{ min-height:56px; }
    .menu-link b{ font-size:.96rem; }
  }

  /* eyebrow + h2 de ancho completo, arriba del grid — no dentro de la columna del
     carrusel (feedback 2026-08-11): así video y carrusel (con su nav) parten de la
     misma línea y se comparan en alto de forma justa. */
  .pain-nav{ display:flex; gap:.6rem; margin-top:1.6rem; }

  /* video a la izquierda + carrusel a la derecha (feedback 2026-08-11: más congruente
     que la sección de historia que ocupaba antes — video de TALLER junto a dolores).
     Columna del carrusel con tope EXACTO de 2 tarjetas (sin sliver de una 3ra: la
     navegación con flechas ya deja claro que hay más, no hace falta asomarla) —
     el resto del ancho se lo queda el video, que crece de 320 a 360px. */
  .pains-layout{
    display:grid;
    grid-template-columns:minmax(260px, calc(var(--pain-col-w) * 2 + 1.1rem)) 1fr;
    gap:clamp(2rem,4vw,3.5rem); align-items:start; margin-top:2.2rem;
  }
  /* orden visual (no de DOM, para no reordenar ~100 líneas de tarjetas): carrusel a
     la izquierda, video a la derecha */
  .pains-content{ order:1; min-width:0; max-width:calc(var(--pain-col-w) * 2 + 1.1rem); }
  .pains-layout > .story-video{ order:2; }
  /* min-width:0 — sin esto, el track del carrusel (más ancho que su columna 1fr)
     obliga al grid item a crecer y desborda la página entera (bug real, 2026-08-11) */
  @media (max-width:900px){ .pains-layout{ grid-template-columns:1fr; } }

  /* ── Galería de dolores: scroll-snap + puntos (decisión 2026-08-10) ──
     tarjetas apiladas de a 2 por columna (feedback 2026-08-11: más densidad ahora
     que el carrusel comparte ancho con el video, no la sección completa) */
  .pain-track{
    display:flex; gap:1.1rem; margin-top:1.6rem; padding:4px 4px 1rem;
    overflow-x:auto; scroll-snap-type:x mandatory; position:relative;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .pain-track::-webkit-scrollbar{ display:none; }
  /* ancho fijo, no vw — el track mide exactamente 2 columnas (ver .pains-content),
     así no queda ni un pixel de sliver de la 3ra tarjeta (feedback 2026-08-11) */
  .pain-col{ flex:0 0 var(--pain-col-w); scroll-snap-align:start; display:flex; flex-direction:column; gap:1.1rem; }
  .k-l{ display:flex; align-items:center; gap:.6rem; }
  .face{
    width:40px; height:40px; border-radius:50%; object-fit:cover;
    border:2px solid var(--white); box-shadow:0 3px 10px rgba(11,20,34,.22);
  }
  .pain-dots{ display:flex; justify-content:center; gap:.45rem; margin-top:1.3rem; }
  .pain-dots button{
    width:8px; height:8px; border-radius:100px; border:0; padding:0; cursor:pointer;
    background:rgba(255,255,255,.28); transition:all .25s var(--ease);
  }
  .pain-dots button.on{ width:22px; background:var(--accent); }

  /* ── Ritmo de color v2 (feedback 2026-08-10): marcas = cola del hero ──
     seccion uno = hero + marcas (tinta) → dolores (papel) → empresas (tinta) →
     taller (papel) → historia (tinta) → testimonios (papel) → ubicación (tinta) = cierre con footer */
  /* cola del hero, no una sección propia: padding vertical chico y parejo
     (antes heredaba el padding-bottom completo de sección, 60px vs 16px arriba — feedback 2026-08-11) */
  .brands{ background:var(--ink); color:var(--white); border-top:0; padding-top:1rem; padding-bottom:1.6rem; }
  .set img:hover{ filter:brightness(1.6); }
  .pain{ color:var(--ink); } /* la tarjeta es blanca: no heredar color de sección */
  .pain-dots button{ background:var(--line-warm); }
  .pain-dots button.on{ background:var(--accent-deep); }

  /* ── Flechas + arrastre del carrusel (desktop) ── */
  .arr{
    width:46px; height:46px; border-radius:50%; cursor:pointer;
    border:1.5px solid var(--edge-warm); background:var(--white); color:var(--ink);
    display:grid; place-items:center;
    transition:transform .22s var(--ease), border-color .22s, color .22s, opacity .2s;
  }
  .arr:hover{ border-color:var(--accent-deep); color:var(--accent-deep); transform:translateY(-2px); }
  .arr[disabled]{ opacity:.32; pointer-events:none; }
  .arr svg{ width:19px; height:19px; }
  .pain-track{ cursor:grab; }
  .pain-track.dragging{ scroll-snap-type:none; cursor:grabbing; }
  .pain-track.dragging .pain{ pointer-events:none; }
  @media (max-width: 700px){ .pain-nav{ display:none; } }

  /* ── Ritmo de color v3 (fusión empresas+taller 2026-08-11, supersede v2): ──
     hero + marcas (tinta) → dolores (papel) → soluciones (tinta) →
     historia (papel) → testimonios (tinta) → ubicación (papel) → footer (tinta) */
  .duo{ background:var(--ink); color:var(--white); border-top:1px solid var(--line); }
  .duo .mono{ color:var(--muted); }
  .duo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,3.5vw,3rem); margin-top:2.8rem; align-items:start; }
  /* Encabezados de columna: son los dos títulos que parten la sección en mitades,
     no eyebrows. Estaban en mono a .66rem — tamaño de etiqueta — y se leían como
     un pie de foto (Esteban, 2026-08-10). Pasan a display, en caja normal: el
     marcado ya dice "Para empresas" / "Taller", era el CSS el que los gritaba
     en mayúsculas y los dejaba diminutos. */
  .duo-head h3{
    font-family:var(--disp); font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:700;
    letter-spacing:-.02em; color:var(--white);
    display:flex; align-items:center; gap:1rem;
  }
  .duo-head h3::after{ content:''; flex:1; height:1px; background:var(--line); }
  .duo-head .contrast{ font-size:.95rem; margin-top:.7rem; line-height:1.6; }
  .duo .biz-grid, .duo .svc-grid{ grid-template-columns:1fr 1fr; margin-top:1.5rem; gap:1rem; }
  .duo .biz-card{ padding:1.2rem 1.15rem; }
  .duo .svc{ background:rgba(255,255,255,.02); border-color:var(--line); }
  .duo .svc:hover{ box-shadow:none; border-color:rgba(242,163,60,.45); }
  .duo .svc h3{ color:var(--white); }
  .duo .svc p{ color:var(--muted-bright); }
  .duo .svc .dur{ color:var(--muted); }
  .duo .svc .ic{ color:var(--accent); }

  /* rotor de audiencias: mismo cuerpo tipográfico, clip propio para no cortar descendentes */
  .rotor{
    display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom;
    color:var(--accent);
    padding:.06em .02em .12em; margin:-.06em -.02em -.12em;
  }
  .rotor-w{ display:inline-block; will-change:transform; }

  /* ── Ritmo de color v5 (2026-08-10, supersede v4 — "soluciones" se fue a
     servicios.html): hero+marcas(tinta) → dolores+video(papel) → CLIENTES(azul)
     → reseñas de Google(papel) → ubicación+footer(tinta).
     Al sacar "soluciones" (que era tinta), "dolores"(papel) quedaba pegado a la
     siguiente clara. El azul de marca en el muro de clientes resuelve la
     alternancia y, de paso, separa visualmente NUESTRA prueba (clientes) de la
     de un TERCERO (Google) — que es justo lo que le da valor a la segunda. */
  .clients{ background:var(--brand); color:var(--white); border-top:0; }
  .clients .mono{ color:rgba(255,255,255,.72); }
  .clients-lead{ margin-top:1rem; max-width:46rem; color:rgba(255,255,255,.88); font-size:1.02rem; line-height:1.6; }
  .client-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.4rem; }
  /* Cada logo va en tarjeta BLANCA sobre el campo azul. Los logos de clientes son
     multicolores y están dibujados para fondo blanco: puestos directo sobre el azul
     se ensucian, y recolorearlos a blanco es peor — alterar el logo de un cliente
     es más delicado que el de un vendor. La tarjeta preserva su color real. */
  .client-chip{
    display:grid; place-items:center; min-height:112px; padding:1rem 1.15rem;
    background:var(--white); border-radius:14px;
  }
  /* Los cinco logos reales (2026-08-10) vienen sobre fondo claro, así que se
     funden solos con la tarjeta blanca: no hizo falta recortarles el fondo, solo
     el margen muerto. `max-height` generoso porque conviven formatos muy
     distintos — banners de 3,9:1 (FOPYMES, MoviLab) con cuadrados 1:1
     (Super Mascotas, bioimágenes); `contain` ajusta cada uno sin deformarlo. */
  .client-chip img{ max-width:100%; max-height:58px; object-fit:contain; display:block; }
  /* Escala óptica por logo — mismo problema y misma solución que la banda de
     marcas (log it. 3). A altura pareja, un logo CUADRADO se ve mucho más chico
     que un banner de 3,9:1, porque el banner llena el ancho y el cuadrado se
     queda limitado por el alto. Se compensa por archivo, no con una regla
     general, porque depende del encaje de cada logotipo. */
  .client-chip img[src*="super-mascotas"]{ max-height:92px; }
  .client-chip img[src*="bioimagenes"]{ max-height:96px; }
  .client-chip img[src*="teneria-diaz"]{ max-height:40px; }  /* muy apaisado (7:1): si no, domina la fila */
  .client-chip img[src*="decor-muebles"]{ max-height:52px; } /* tras recortar el marco quedó 2,3:1 */
  .client-chip img[src*="jokast"]{ max-height:34px; }        /* 10:1, el más apaisado del muro */
  /* Placeholder: tiene que ser IMPOSIBLE confundirlo con un cliente real — mismo
     criterio que los testimonios EJEMPLO y las insignias de partner. */
  .client-chip.is-empty{ background:rgba(255,255,255,.07); border:1px dashed rgba(255,255,255,.36); }
  .client-chip.is-empty span{
    font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; line-height:1.7;
    color:rgba(255,255,255,.62); text-align:center;
  }
  .clients-note{ margin-top:1.4rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color:rgba(255,255,255,.6); }
  @media (max-width:900px){ .client-grid{ grid-template-columns:repeat(2,1fr); } }

  /* Reseñas de Google — widget dedicado con estética de Google, no la tipografía
     del resto del sitio, para que se lea como prueba de un tercero. Ahora sigue a
     una banda azul, así que recupera su filete superior. */
  .google-reviews{ background:var(--paper); color:var(--ink); border-top:1px solid var(--line-warm); }
  .google-reviews .mono{ color:var(--muted-warm); }
  .gr-head{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
    gap:1.4rem; margin-top:2.2rem;
  }
  .gr-agg{ display:flex; align-items:center; gap:1.1rem; }
  .gr-score{ font-family:var(--disp); font-weight:700; font-size:2.6rem; line-height:1; }
  /* Los colores de Google (estrellas + wordmark) y los fondos de las insignias de
   vendor son literales A PROPÓSITO: son marca de un tercero, no paleta nuestra.
   Mismo criterio que DESIGN.md §3 fija para el rojo de Maps y el verde de WhatsApp. */
  .gr-stars{ color:#F2B400; font-size:1.05rem; letter-spacing:.1em; }
  .gr-count{ font-size:.88rem; color:var(--muted-warm); margin-top:.25rem; }
  .gr-actions{ display:flex; align-items:center; gap:.9rem; }
  .gr-arrows{ display:flex; gap:.6rem; }

  .gr-track{
    display:flex; gap:1.1rem; margin-top:2.2rem; padding:4px 4px 1rem;
    overflow-x:auto; scroll-snap-type:x mandatory; cursor:grab;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .gr-track::-webkit-scrollbar{ display:none; }
  .gr-track.dragging{ scroll-snap-type:none; cursor:grabbing; }
  .gr-track.dragging .gr-card{ pointer-events:none; }
  .gr-card{
    flex:0 0 clamp(270px,26vw,330px); scroll-snap-align:start;
    background:var(--white); color:var(--ink); border-radius:16px;
    padding:1.4rem 1.4rem 1.3rem; display:flex; flex-direction:column; gap:.7rem;
  }
  .gr-card-top{ display:flex; align-items:center; gap:.7rem; }
  .gr-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
  .gr-who{ min-width:0; }
  .gr-author{ font-weight:600; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .gr-time{ font-size:.78rem; color:var(--muted-warm); }
  .gr-card-stars{ display:flex; align-items:center; gap:.5rem; }
  .gr-card-stars .st{ color:#F2B400; font-size:.92rem; letter-spacing:.08em; }
  .gr-card-stars .num{ font-size:.78rem; color:var(--muted-warm); }
  .gr-text{ font-size:.93rem; line-height:1.55; color:var(--ink-3); }
  .gr-src{ margin-top:auto; display:flex; align-items:center; gap:.4rem; padding-top:.3rem; }
  .gr-goog{ font-family:var(--disp); font-weight:700; font-size:.92rem; letter-spacing:-.01em; }
  .gr-goog .b{ color:#4285F4; } .gr-goog .r{ color:#EA4335; }
  .gr-goog .y{ color:#FBBC05; } .gr-goog .g{ color:#34A853; }

  .gr-dots{ display:flex; justify-content:center; gap:.45rem; margin-top:1.3rem; }
  .gr-dots button{
    width:8px; height:8px; border-radius:100px; border:0; padding:0; cursor:pointer;
    background:rgba(255,255,255,.28); transition:all .25s var(--ease);
  }
  .gr-dots button.on{ width:22px; background:var(--accent); }

  @media (max-width:700px){ .gr-arrows{ display:none; } }

  @media (max-width:1100px){ .duo-grid{ grid-template-columns:1fr; gap:3rem; } }
  @media (max-width:540px){ .duo .biz-grid, .duo .svc-grid{ grid-template-columns:1fr; } }

  /* ── WhatsApp que sobrevive al scroll ─────────────────────────────────────
     .topbar NO es sticky: en cuanto bajas, la píldora de WhatsApp desaparece y
     no vuelve — y es el único canal de contacto directo del negocio. En
     escritorio reaparece como burbuja abajo a la derecha; en móvil vive como
     barra fija, siempre presente. La detección es IntersectionObserver sobre el
     propio topbar (ver site.js): el archivo no tiene un solo listener de scroll
     y no se va a estrenar aquí. */
  .wa-fab{
    position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem);
    z-index:14;   /* por debajo del scrim del menú (15), a propósito */
    display:flex; align-items:center; justify-content:center;
    width:58px; height:58px; border-radius:50%;
    background:var(--wa); color:#04210F;
    box-shadow:0 12px 30px rgba(0,0,0,.34);
    opacity:0; visibility:hidden; transform:translateY(12px) scale(.92);
    transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .wa-fab.is-on{ opacity:1; visibility:visible; transform:none; }
  .wa-fab.is-on:hover{ transform:translateY(-3px); }
  .wa-fab svg{ width:28px; height:28px; }

  /* El globo sale UNA vez y se retira solo. La regla dura del proyecto es
     `iteration-count: 1` (DESIGN.md, tomada de Tusker): las cosas entran
     animadas y se quedan quietas. Un globo que late o reaparece cada X segundos
     es justo lo que el estudio descartó. Después de la primera vez solo vuelve
     al pasar el mouse por encima — o sea, motivado por una acción del usuario. */
  .wa-bubble{
    position:fixed; z-index:14;
    right:calc(clamp(1rem,2.5vw,2rem) + 70px);
    bottom:calc(clamp(1rem,2.5vw,2rem) + 10px);
    max-width:232px; padding:.72rem .9rem;
    background:var(--white); color:var(--ink);
    border-radius:14px 14px 4px 14px;
    box-shadow:0 14px 34px rgba(0,0,0,.26);
    font-size:.9rem; line-height:1.45;
    opacity:0; visibility:hidden; transform:translateX(10px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    pointer-events:none; cursor:pointer;
  }
  /* clickeable: abre el mismo formulario que el botón. Sigue aria-hidden a
     propósito — el control accesible es el FAB, esto es una comodidad de mouse. */
  .wa-bubble.is-on{ pointer-events:auto; }
  .wa-bubble.is-on{ opacity:1; visibility:visible; transform:none; }
  .wa-bubble::after{           /* colita apuntando al botón */
    content:''; position:absolute; right:-5px; bottom:14px;
    width:12px; height:12px; background:var(--white);
    transform:rotate(45deg); border-radius:2px;
  }

  .wa-bar{ display:none; }
  @media (max-width:900px){
    .wa-fab,.wa-bubble{ display:none; }
    .wa-bar{
      display:flex; align-items:center; justify-content:center; gap:.55rem;
      position:fixed; left:0; right:0; bottom:0; z-index:14; min-height:52px;
      padding:.85rem 1rem calc(.85rem + env(safe-area-inset-bottom, 0px));
      background:var(--wa); color:#04210F;
      font-weight:700; font-size:.95rem; text-decoration:none;
    }
    .wa-bar svg{ width:19px; height:19px; }
    /* Sin esto la barra tapa el footer de forma permanente. */
    body{ padding-bottom:calc(52px + env(safe-area-inset-bottom, 0px)); }
    /* Y la píldora de arriba se oculta: el mismo CTA dos veces en una sola
       pantalla no duplica conversión, diluye jerarquía — lo tiene escrito el
       estudio en §Lo que NO copiamos, caso Courser. */
    .top-actions .wa-pill{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){
    .wa-fab,.wa-bubble{ transition:none; }
  }

  /* ── Noticias ─────────────────────────────────────────────────────────────
     noticias.html no reutilizaba nada: tenía su propio header .bar y 1,3 KB de
     CSS aparte. Ahora comparte shell y tokens con el resto. Sigue el ritmo de
     color: portada en tinta, parrilla en papel. */
  .news-hero{ background:var(--ink); color:var(--white); padding:clamp(3rem,8vw,5.5rem) clamp(1.25rem,4vw,3.5rem) clamp(2rem,5vw,3rem); }
  .news-hero .inner,.news-grid .inner{ max-width:1120px; margin:0 auto; }
  .news-hero h1{ font-family:var(--disp); font-weight:700; font-size:clamp(2.4rem,6vw,4.4rem); line-height:1.0; letter-spacing:-.03em; margin:.85rem 0 0; }
  .news-hero p{ margin-top:1.1rem; max-width:620px; color:var(--muted-bright); font-size:1.04rem; }
  .news-hero .mono{ color:var(--muted); }
  .news-grid{ background:var(--paper); color:var(--ink); border-top:1px solid var(--line-warm); padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,4vw,3.5rem) clamp(3rem,7vw,5rem); }
  .news-grid .inner{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
  .news-card{ background:var(--white); border:1px solid var(--line-warm); border-radius:16px; padding:1.6rem 1.5rem; min-height:210px; display:flex; flex-direction:column; }
  .news-card h2{ font-family:var(--disp); font-size:1.5rem; line-height:1.06; letter-spacing:-.02em; margin:.7rem 0 .5rem; }
  .news-card p{ color:var(--muted-cool); font-size:.9rem; line-height:1.55; }
  .news-card .mono{ font-size:.68rem; color:var(--muted-warm); }
  .news-card a{ margin-top:auto; padding-top:1.3rem; color:var(--accent-deep); font-weight:600; font-size:.94rem; text-decoration:none; }
  .news-card a:hover{ text-decoration:underline; }
  .news-card.is-feature{ background:var(--brand); border-color:transparent; color:var(--white); }
  .news-card.is-feature p{ color:rgba(255,255,255,.86); }
  .news-card.is-feature .mono{ color:rgba(255,255,255,.74); }
  .news-card.is-feature a{ color:var(--white); }
  @media (max-width:760px){ .news-grid .inner{ grid-template-columns:1fr; } }

  /* ── Panel flotante de WhatsApp ───────────────────────────────────────────
     Al hacer click en la burbuja se abre EL MISMO formulario del hero. Reutiliza
     .quote-card / .field / .quote-btn a propósito: si fuera una copia con
     estilos propios, se desincronizaría del original a la primera iteración. */
  .wa-panel{
    position:fixed; z-index:16;
    right:clamp(1rem,2.5vw,2rem);
    bottom:calc(clamp(1rem,2.5vw,2rem) + 74px);
    width:min(360px, calc(100vw - 2rem));
    max-height:calc(100vh - 9rem); overflow:auto;
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
  }
  .wa-panel.is-on{ opacity:1; visibility:visible; transform:none; }
  /* El borde no es decorativo: el panel flota sobre secciones de cualquier tono
     y sobre una banda clara (papel, o el muro de clientes) se fundía con el
     fondo — la sombra sola no basta cuando el panel y el fondo comparten valor. */
  .wa-panel .quote-card{
    position:relative; padding:1.4rem 1.35rem 1.1rem;
    border:1px solid var(--edge-warm);
    box-shadow:0 26px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.5);
  }
  .wa-panel h2{ font-size:1.22rem; }
  .wa-panel .hint{ font-size:.92rem; margin-bottom:1rem; }
  .wa-panel .field{ margin-bottom:.7rem; }
  .wa-panel .field textarea{ min-height:4.2rem; }
  .wa-panel .quote-btn{ padding:.8rem; font-size:.92rem; }
  .wa-close{
    position:absolute; top:.55rem; right:.7rem; width:30px; height:30px;
    display:grid; place-items:center; border:0; border-radius:50%;
    background:transparent; color:var(--muted-cool); cursor:pointer;
    font-size:1.35rem; line-height:1; transition:background .2s, color .2s;
  }
  .wa-close:hover{ background:var(--line-warm); color:var(--ink); }
  @media (max-width:900px){ .wa-panel{ display:none; } }
  @media (prefers-reduced-motion: reduce){ .wa-panel{ transition:none; } }