/* Las dos familias se sirven desde nuestro servidor: sin peticiones a Google
   ni a terceros. Licencias OFL en assets/fonts/OFL-AtkinsonHyperlegibleNext.txt
   y assets/fonts/OFL-SchibstedGrotesk.txt */

/* Atkinson Hyperlegible Next (variable, 200-800): cuerpo, interfaz y datos.
   Dibujada para que cada letra se distinga de las demas (I l 1, O 0) con poca
   vista: encaja con el compromiso de accesibilidad y no es la letra de todas
   las webs generadas. */
@font-face{
  font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("/assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("/assets/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Schibsted Grotesk (variable, 400-900): solo titulares. Grotesca de
   periodico, firme y algo estrecha, como la cabecera impresa de un parte. */
@font-face{
  font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("/assets/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("/assets/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* "Tinta de tampon" (2026-10-19). Papel y tinta; el violeta de la marca es
   la tinta de un sello de caucho, no un brillo sobre azul noche. El turquesa
   y el degradado quedan en el logo. Por defecto se ve el tema claro (el
   script de la cabecera pone data-theme="light" salvo que el visitante haya
   elegido el oscuro); este bloque es el oscuro. Contrastes calculados. */
:root{
  --bg:#141416;        /* grafito, no azul noche */
  --bg-alt:#19191c;
  --card:#1d1d21;
  --border:#2c2c31;
  --text:#ecebe8;      /* 15.4:1 sobre --bg */
  --text-dim:#a3a2aa;  /* 7.3:1 sobre --bg, 6.9:1 sobre --bg-alt */
  /* Violeta tampon: foco, cursor, seleccion, enlaces, sello y hora activa.
     7.2:1 sobre --bg, 6.6:1 sobre --card. */
  --accent:#a593ff;
  --accent-2:#a593ff;
  --accent-2-text:#a593ff;
  /* Solo el logo lleva el degradado de marca; se queda como referencia. */
  --accent-grad:linear-gradient(135deg,#7c5cff,#22d3ee);
  /* Borde de campos de formulario: 3.3:1 sobre --card (WCAG 1.4.11) */
  --field-border:#6f6e78;
  --chat-in:#222226;   /* texto 13.3:1 */
  --chat-out:#1f3b37;  /* texto 10.1:1 */
  /* Velo del hover del boton principal (tinta: fondo --text, letra --bg).
     En oscuro la tinta es clara y el velo la aclara mas; en claro la tinta
     es oscura y el velo la oscurece. En los dos el contraste sube. */
  --btn-velo:rgba(255,255,255,.14);
  --link:#a593ff;
  --success:#4ade80;
  --success-soft:rgba(74,222,128,.13);
  /* Texto de estado sobre --success-soft */
  --success-ink:#4ade80;
  --danger:#ff8a98;
  /* Segunda tinta del tampon: naranja para "te lo pasa a ti" (lo que necesita
     al dueno). No es error: el rojo de error es otro. 10:1 sobre --bg. */
  --tinta-2:#fdb022;
  /* Tinte violeta para bandas de seccion; el violeta encima da 6.5:1 */
  --tinte:#1f1d2b;
  /* Texto secundario sobre el violeta pleno (--accent de fondo): 5.4:1 */
  --sobre-acento-tenue:#2e2556;
  --radius:14px;
  --radius-sm:9px;
  --maxw:1120px;

  /* Tipografia. Nueve tamanos y ninguno mas: antes la portada pintaba 19
     distintos, seis de ellos entre 14.4 y 15.7px, que nadie distingue. Todos
     salen de los que ya existian. Si falta un escalon, se consolida, no se
     anade. */
  --fs-1:.78rem;   /* 12.5px  etiquetas, sellos, pies */
  --fs-2:.85rem;   /* 13.6px  interfaz secundaria */
  --fs-3:.95rem;   /* 15.2px  interfaz, texto de apoyo */
  --fs-4:1rem;     /* 16px    cuerpo */
  --fs-5:1.05rem;  /* 16.8px  entradillas */
  --fs-6:1.15rem;  /* 18.4px  titulos de bloque (h3) */
  --fs-7:1.8rem;   /* 28.8px  */
  --fs-8:2.3rem;   /* 36.8px  titulos de seccion (h2) */
  --fs-9:4.25rem;  /* 68px    titular de portada (era 56: se quedaba corto frente al resto) */
  /* Un solo tracking para todo lo que es display (>= 1.6rem). */
  --track-display:-.025em;

  --font-body:"Atkinson Hyperlegible Next",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Schibsted Grotesk","Atkinson Hyperlegible Next",system-ui,-apple-system,Segoe UI,sans-serif;

  /* Movimiento: una curva, dos duraciones. Solo se animan propiedades de
     pintado (color, fondo, borde, opacidad): nada se mueve bajo el cursor. */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-rapida:.12s;
  --dur:.2s;
}

/* Tema claro, el de por defecto: papel frio (no crema) y tinta casi negra. */
:root[data-theme="light"]{
  --bg:#f6f6f3;
  --bg-alt:#efeee9;
  --card:#ffffff;
  --border:#d9d8d2;
  --text:#1b1a20;      /* 16:1 sobre --bg */
  --text-dim:#5c5b64;  /* 6.2:1 sobre --bg, 5.8:1 sobre --bg-alt */
  /* Violeta tampon: 7.4:1 sobre --bg, 6.9:1 sobre --bg-alt */
  --accent:#4f35c2;
  --accent-2:#4f35c2;
  --accent-2-text:#4f35c2;
  --accent-grad:linear-gradient(135deg,#6d4aff,#0e7490);
  /* 3.4:1 sobre --bg-alt, 3.7:1 sobre --bg */
  --field-border:#807f89;
  --chat-in:#ffffff;
  --chat-out:#dcf5ee;
  --btn-velo:rgba(0,0,0,.12);
  --link:#4f35c2;
  --success:#15803d;
  --success-soft:rgba(21,128,61,.1);
  /* #15803d sobre el verde suave daba 4.39:1; este da 6.6:1 */
  --success-ink:#166534;
  --danger:#c0263a;
  --tinta-2:#b54708;   /* 5.0:1 sobre --bg, 5.4:1 sobre blanco */
  --tinte:#e9e6f3;     /* violeta encima 6.5:1, texto tenue 5.5:1 */
  --sobre-acento-tenue:#d9d2ff; /* 5.6:1 sobre el violeta pleno */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-color:var(--border) var(--bg)}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:var(--fs-4);line-height:1.6;
  -webkit-font-smoothing:antialiased;font-optical-sizing:auto;
}
h1,h2,h3{font-family:var(--font-display);line-height:1.15;text-wrap:balance}
p{text-wrap:pretty}
button,input,textarea,select{font:inherit;color:inherit}
input,textarea{caret-color:var(--accent)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;text-underline-offset:.18em}
/* Letra --bg sobre el violeta: 7.2:1 en oscuro, 7.4:1 en claro */
::selection{background:var(--accent);color:var(--bg)}
.ico{
  width:20px;height:20px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Transiciones entre paginas: el navegador funde una con la siguiente.
   Donde no existe (Firefox), se navega como siempre. */
@view-transition{navigation:auto}
header{view-transition-name:cabecera}
/* Solo el de la cabecera: el pie tambien lleva logo y un nombre de
   transicion repetido invalida la transicion entera. */
header .logo{view-transition-name:logo}

/* Foco de teclado: un solo anillo para todo lo interactivo. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;
}

.skip-link{
  position:absolute;left:12px;top:-56px;z-index:100;
  background:var(--card);color:var(--text);border:1px solid var(--accent);border-radius:8px;
  padding:8px 16px;font-size:var(--fs-3);font-weight:600;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{top:12px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* Los saltos a un ancla (/#precio) no quedan tapados por la cabecera fija */
[id]{scroll-margin-top:80px}

/* ======================================================================
   Cabecera
   ====================================================================== */
/* Fondo opaco, sin cristal esmerilado: el desenfoque detras de la barra es
   decoracion de plantilla y aqui no hay nada detras que merezca verse. */
header{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex;align-items:center;gap:16px;
  height:64px;padding:0 24px;max-width:var(--maxw);margin:0 auto;
}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:var(--fs-6);letter-spacing:var(--track-display);flex:none}
.logo-mark{width:30px;height:32px;object-fit:contain;flex:none}
.logo-mark--light{display:none}
:root[data-theme="light"] .logo-mark--dark{display:none}
:root[data-theme="light"] .logo-mark--light{display:block}

.nav-center{display:flex;gap:4px;list-style:none;flex:1;justify-content:center}
.nav-center li a{
  display:block;padding:8px 12px;border-radius:8px;font-size:var(--fs-3);color:var(--text-dim);
  transition:color var(--dur-rapida) var(--ease),background-color var(--dur-rapida) var(--ease);
}
.nav-center li a:hover{color:var(--text)}
.nav-center li a[aria-current="page"]{color:var(--text);background:var(--card)}

/* Idioma y tema: un control segmentado discreto. El idioma activo se marca
   con fondo y con aria-pressed, no solo con color. */
.prefs{display:flex;align-items:center;gap:8px;flex:none}
.lang-switch{display:flex;padding:2px;border:1px solid var(--border);border-radius:8px}
.bubble{
  min-width:36px;height:32px;padding:0 8px;border:none;border-radius:6px;background:none;
  color:var(--text-dim);font-size:var(--fs-1);font-weight:700;letter-spacing:.02em;cursor:pointer;
  transition:color var(--dur-rapida) var(--ease),background-color var(--dur-rapida) var(--ease);
}
.bubble:hover{color:var(--text)}
.lang-bubble.active{background:var(--card);color:var(--text);box-shadow:0 0 0 1px var(--border)}
.theme-toggle{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:none;
  color:var(--text-dim);display:grid;place-items:center;cursor:pointer;
  transition:color var(--dur-rapida) var(--ease),border-color var(--dur-rapida) var(--ease);
}
.theme-toggle:hover{color:var(--text);border-color:var(--field-border)}
.theme-toggle .ico{width:18px;height:18px}
.ico-luna{display:none}
:root[data-theme="light"] .ico-sol{display:none}
:root[data-theme="light"] .ico-luna{display:block}

/* El boton de la cabecera es WhatsApp: el canal que este cliente ya usa
   todo el dia. Tinta, como el boton principal: el degradado violeta-cian en
   un boton-pildora es el sello de las webs hechas en serie, y la marca ya
   vive en el logo y en el sello del parte. */
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;flex:none;position:relative;isolation:isolate;
  height:40px;padding:0 16px;border-radius:8px;
  background:var(--text);color:var(--bg);font-weight:600;font-size:var(--fs-3);
}
.nav-cta .ico{width:18px;height:18px}
.nav-cta::after,.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--btn-velo);opacity:0;transition:opacity var(--dur) var(--ease);
}
.nav-cta:hover::after,.btn-primary:hover::after{opacity:1}

.menu-toggle{
  display:none;width:44px;height:44px;margin-right:-10px;border-radius:8px;
  background:none;border:none;color:var(--text);cursor:pointer;place-items:center;
}
.menu-toggle .ico{width:24px;height:24px}

@media (max-width:900px){
  .nav{gap:8px}
  .nav-center{
    position:fixed;top:64px;left:0;right:0;flex-direction:column;gap:4px;
    background:var(--bg-alt);border-bottom:1px solid var(--border);padding:12px;
    opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);
  }
  .nav-center.open{opacity:1;pointer-events:auto}
  .nav-center li a{padding:12px 16px;font-size:var(--fs-4)}
  .menu-toggle{display:grid;order:3}
  .nav-cta{order:2;margin-left:auto}
  /* En movil idioma y tema viven dentro del menu (script.js los mueve) */
  .nav-center .prefs{padding:12px 16px 4px;border-top:1px solid var(--border);margin-top:4px}
  .nav-center .bubble{min-width:44px;height:40px}
  .nav-center .theme-toggle{width:44px;height:44px}
}
@media (max-width:380px){
  .nav-cta span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .nav-cta{padding:0 12px}
}

/* ======================================================================
   Botones y enlaces
   ====================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;isolation:isolate;
  min-height:48px;padding:12px 24px;border-radius:8px;font-weight:600;font-size:var(--fs-3);line-height:1.3;
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.btn .ico{width:18px;height:18px}
/* Tinta sobre papel: --text de fondo y --bg de letra (16:1 en los dos temas). */
.btn-primary{background:var(--text);color:var(--bg)}
.btn-ghost{border-color:var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--field-border);background:var(--card)}

.enlace-flecha{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  color:var(--link);font-weight:600;font-size:var(--fs-3);
}
.enlace-flecha span{text-decoration:underline}
.enlace-flecha .ico{width:16px;height:16px}

/* ======================================================================
   Ritmo de pagina: un juego de espaciado (24 32 48 64 96) y nada mas.
   El ritmo de seccion va en el padding de la seccion; entre hermanos, gap.
   ====================================================================== */
section{padding:96px 0}
.sec-cabeza{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:36em}
.sec-cabeza h2{font-size:clamp(var(--fs-7),3.2vw,var(--fs-8));font-weight:800;letter-spacing:var(--track-display);line-height:1.1}
.sec-cabeza p{color:var(--text-dim);font-size:var(--fs-5)}

/* Dos columnas: cabecera a un lado, contenido al otro. La cabecera se
   queda a la vista mientras el contenido baja. */
.wrap-dos{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px 64px;align-items:start;
}
.wrap-dos>*{min-width:0}
.wrap-dos>.sec-cabeza{position:sticky;top:112px}
.wrap-dos-inverso{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.wrap-dos-inverso>.sec-cabeza{order:2}
@media (max-width:900px){
  section{padding:64px 0}
  .wrap-dos,.wrap-dos-inverso{grid-template-columns:1fr;gap:32px}
  .wrap-dos>.sec-cabeza{position:static}
  .wrap-dos-inverso>.sec-cabeza{order:0}
}

/* ======================================================================
   El parte del dia (portada)
   Un dia de un negocio, hora a hora. La linea activa brilla, las demas se
   quedan en segundo plano; nada desaparece: lo hecho queda sellado.
   ====================================================================== */
.parte{padding:48px 0 64px}
.parte-cabeza{display:flex;flex-direction:column;gap:16px;margin-bottom:32px;position:relative}
.parte h1{
  font-size:clamp(2.3rem,5.4vw,var(--fs-9));font-weight:800;
  letter-spacing:var(--track-display);line-height:1;max-width:13em;
}
/* Las dos lineas en el mismo color: la segunda atenuada era el truco de
   titular a dos tonos que repiten todas las portadas generadas. */
.parte h1 span{display:block}
.parte-intro{color:var(--text-dim);font-size:var(--fs-5);max-width:38em}
/* El sello en grande, junto al titular: la marca estampada en la portada.
   Decorativo (aria-hidden): el mismo texto ya se lee en cada linea. */
.sello-portada{
  position:absolute;right:8px;top:32px;
  display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 16px;
  border:3px solid currentColor;border-radius:8px;color:var(--accent-2-text);
  font-size:var(--fs-6);font-weight:800;white-space:nowrap;transform:rotate(-8deg);
}
.sello-portada .pieza-sello{width:30px;height:20px}
.sello-portada .pieza-sello polygon{fill:currentColor}
@media (max-width:1180px){.sello-portada{display:none}}

.parte-mesa{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-alt);overflow:hidden}

.parte-barra{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px;border-bottom:1px solid var(--border);
}
.parte-sectores{display:flex;gap:4px;flex-wrap:wrap}
.parte-sector{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;
  border:1px solid transparent;border-radius:8px;background:none;color:var(--text-dim);
  font-size:var(--fs-3);font-weight:600;cursor:pointer;
  transition:color var(--dur-rapida) var(--ease),background-color var(--dur-rapida) var(--ease),border-color var(--dur-rapida) var(--ease);
}
.parte-sector:hover{color:var(--text)}
.parte-sector[aria-selected="true"]{background:var(--card);color:var(--text);border-color:var(--border)}


.parte-mandos{display:flex;gap:4px;flex:none}
.mando{
  width:44px;height:44px;border-radius:8px;border:1px solid var(--border);background:none;
  color:var(--text-dim);display:grid;place-items:center;cursor:pointer;
  transition:color var(--dur-rapida) var(--ease),border-color var(--dur-rapida) var(--ease);
}
.mando:hover{color:var(--text);border-color:var(--field-border)}
.mando .ico{width:18px;height:18px}
.mando .ico-play{display:none}
.mando.en-pausa .ico-pausa{display:none}
.mando.en-pausa .ico-play{display:block}

.parte-dia{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.parte-dia[hidden]{display:none}
.parte-registro{display:flex;flex-direction:column;gap:16px;padding:24px}
.parte-nota{font-size:var(--fs-1);color:var(--text-dim)}

.parte-lineas{list-style:none;border-top:1px solid var(--border)}
.parte-lineas li{border-bottom:1px solid var(--border)}
.parte-linea{
  width:100%;display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:4px 16px;
  padding:12px;border:none;border-radius:var(--radius-sm);background:none;text-align:left;cursor:pointer;
  transition:background-color var(--dur) var(--ease);
}
.parte-linea:hover{background:color-mix(in srgb,var(--card) 60%,transparent)}
.parte-hora{
  font-size:var(--fs-3);font-weight:600;color:var(--text-dim);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
  transition:color var(--dur) var(--ease);
}
.parte-que{display:flex;flex-direction:column;gap:2px;min-width:0}
.parte-t{font-size:var(--fs-4);font-weight:500;color:var(--text-dim);transition:color var(--dur) var(--ease)}
.parte-r{font-size:var(--fs-2);color:var(--text-dim)}
.parte-linea[aria-pressed="true"]{background:var(--card)}
.parte-linea[aria-pressed="true"] .parte-t{color:var(--text)}
.parte-linea[aria-pressed="true"] .parte-hora{color:var(--accent-2-text)}

/* El sello. La pieza suelta del logo es "la tarea que sale sola": aqui
   marca literalmente eso, estampada con la tinta violeta de un tampon (de
   ahi el borde de 2px). Llena = resuelto solo; hueca = te lo pasa a ti, que
   tambien es una buena noticia y se dice sin dramatismo. */
.sello{
  display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 8px;
  border:2px solid currentColor;border-radius:6px;
  font-size:var(--fs-1);font-weight:700;white-space:nowrap;
}
.pieza-sello{width:18px;height:12px;flex:none}
.sello-solo{color:var(--accent-2-text)}
.sello-solo .pieza-sello polygon{fill:var(--accent-2)}
.sello-ti{color:var(--tinta-2)}
.sello-ti .pieza-sello polygon{fill:none;stroke:var(--tinta-2);stroke-width:1.6;stroke-linejoin:round}

.parte-js .parte-linea .sello{opacity:0;transition:opacity var(--dur) var(--ease)}
.parte-js .parte-linea.sellada .sello{opacity:1}
.parte-js .parte-linea.pasada .sello{color:var(--text-dim)}
.parte-js .parte-linea.pasada .sello-solo .pieza-sello polygon{fill:var(--text-dim)}
.parte-js .parte-linea.pasada .sello-ti .pieza-sello polygon{stroke:var(--text-dim)}
.parte-js .parte-linea[aria-pressed="true"].sellada .sello{animation:sello-cae .42s var(--ease) both}
/* El sello cae una vez, como un tampon: llega algo mas grande y se asienta. */
@keyframes sello-cae{
  0%{opacity:0;transform:scale(1.35) rotate(-4deg)}
  60%{opacity:1;transform:scale(.97) rotate(-4deg)}
  100%{opacity:1;transform:scale(1) rotate(-4deg)}
}
.parte-linea .sello{transform:rotate(-4deg);justify-self:end}
.parte-recuento{font-size:var(--fs-3);font-weight:700;color:var(--text)}
.parte-js .parte-recuento{visibility:hidden}
.parte-js .dia-cerrado .parte-recuento{visibility:visible}
.parte-accion{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:8px}

/* El telefono: lo que ve el cliente del negocio. Altura fija para que
   cambiar de escena no mueva nada de la pagina. */
.telefono{display:flex;flex-direction:column;border-left:1px solid var(--border);background:var(--bg)}
.chat-top{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.chat-avatar{
  width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative;
  background:var(--card);border:1px solid var(--border);color:var(--text-dim);
}
.chat-avatar .ico{width:18px;height:18px}
/* Chapa de robot: el avatar es del negocio (es SU WhatsApp); la chapa dice
   que quien contesta es un automatismo. */
.chat-chapa{
  position:absolute;right:-6px;bottom:-6px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:var(--bg);border:1px solid var(--border);
}
.chat-chapa svg{width:12px;height:12px;fill:none;stroke:var(--text-dim);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-who{display:flex;flex-direction:column;line-height:1.3}
.chat-who strong{font-size:var(--fs-3)}
.chat-who small{font-size:var(--fs-1);color:var(--text-dim);display:flex;align-items:center;gap:6px}
.chat-who small::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success);flex:none}

.chat-conv{flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:400px;padding:16px}
.chat-log{list-style:none;display:flex;flex-direction:column;gap:8px}
.chat-log[hidden]{display:none}
.msg{max-width:86%;padding:8px 12px;border-radius:14px;font-size:var(--fs-2);line-height:1.45}
.msg.in{align-self:flex-start;background:var(--chat-in);border:1px solid var(--border);border-bottom-left-radius:4px}
.msg.out{align-self:flex-end;background:var(--chat-out);border-bottom-right-radius:4px}
.msg-sistema{
  align-self:center;display:flex;align-items:center;gap:8px;margin-top:4px;padding:4px 12px;
  border:1px dashed var(--border);border-radius:999px;font-size:var(--fs-1);color:var(--text-dim);
}

/* La conversacion se escribe sola. Sin JavaScript (o con movimiento
   reducido) se ve entera; con JavaScript, el guion la va mostrando y mete
   el "escribiendo..." antes de cada respuesta. */
.parte-js .chat-log>*{opacity:0;transition:opacity .3s var(--ease)}
.parte-js .chat-log>.visible{opacity:1}
.chat-escribiendo{
  align-self:flex-end;display:flex;gap:4px;align-items:center;width:max-content;
  padding:12px 14px;border-radius:14px;border-bottom-right-radius:4px;background:var(--chat-out);
}
.chat-escribiendo span{width:6px;height:6px;border-radius:50%;background:var(--text-dim);animation:latido 1.2s ease-in-out infinite}
.chat-escribiendo span:nth-child(2){animation-delay:.15s}
.chat-escribiendo span:nth-child(3){animation-delay:.3s}
@keyframes latido{0%,60%,100%{opacity:.35}30%{opacity:1}}

@media (max-width:980px){
  .parte-dia{grid-template-columns:1fr}
  .telefono{border-left:none;border-top:1px solid var(--border)}
  .chat-conv{min-height:340px}
  /* script.js mete el telefono dentro de la linea activa */
  .parte-lineas .telefono{margin:0 0 12px;border:none;background:none}
  .parte-lineas .chat-top{display:none}
  .parte-js .parte-linea:not(.sellada) .sello{display:none}
  .parte-lineas .chat-conv{min-height:0}
}
@media (max-width:640px){
  .parte{padding:40px 0 64px}
  .parte-cabeza{margin-bottom:32px;gap:16px}
  .parte-barra{flex-direction:column;align-items:stretch;padding:8px}
  .parte-sectores{display:grid;grid-template-columns:1fr 1fr}
  .parte-sector{justify-content:center;padding:8px}
  .parte-mandos{justify-content:center}
  .parte-registro{padding:16px 12px}
  .parte-linea{grid-template-columns:48px minmax(0,1fr);padding:12px 8px}
  .parte-linea .sello{grid-column:2;justify-self:start;margin-top:4px}
  .parte-accion .btn{width:100%}
  .parte-accion{justify-content:center}
}

/* ======================================================================
   Lo que montamos: lista con reglas
   ====================================================================== */
.piezas-lista{list-style:none;border-top:1px solid var(--border)}
.pieza{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 32px;
  padding:24px 0;border-bottom:1px solid var(--border);
}
.pieza-titulo{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-6);font-weight:700}
.pieza-titulo .ico{margin-top:2px;color:var(--text-dim)}
.pieza p{color:var(--text-dim)}
.pieza .card-list{grid-column:2}
@media (max-width:640px){
  .pieza{grid-template-columns:1fr}
  .pieza .card-list{grid-column:auto}
}
.card-list{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:8px}
.card-list li{color:var(--text-dim);font-size:var(--fs-3);padding-left:24px;position:relative}
.card-list li::before{
  content:"";position:absolute;left:4px;top:.7em;width:8px;height:1px;background:var(--text-dim);
}

/* ======================================================================
   Como empezamos: una linea de tiempo. El tramo de los pasos 1 a 3 es
   continuo (se hace una vez); el del 4 es discontinuo (no termina).
   ====================================================================== */
/* Banda tintada de violeta: la unica seccion con color de fondo antes del cierre */
.proceso{background:var(--tinte)}
.pasos{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:48px}
.paso{display:grid;grid-template-rows:24px auto auto 1fr;row-gap:8px;padding-right:32px;position:relative}
/* La regla: una linea de 1px a la altura del centro del numero */
.paso::before{content:"";position:absolute;left:0;right:0;top:60px;border-top:2px solid var(--accent-2)}
.paso-continuo::before{border-top-style:dashed}
.paso-tramo{grid-row:1;font-size:var(--fs-2);font-weight:700;color:var(--accent-2-text);white-space:nowrap}
/* El numero se apoya en la linea, como una marca en una regla */
.paso-n{
  grid-row:2;justify-self:start;margin:4px 0 8px;position:relative;
  width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
  background:var(--accent);color:var(--bg);
  font-family:var(--font-display);font-size:var(--fs-6);font-weight:800;font-variant-numeric:tabular-nums;
}
.paso h3{grid-row:3;font-size:var(--fs-6);font-weight:700}
.paso p:last-child{grid-row:4;color:var(--text-dim);font-size:var(--fs-3)}
@media (max-width:900px){
  .pasos{grid-template-columns:1fr;margin-top:32px}
  /* En vertical la linea pasa a la izquierda */
  .paso{
    grid-template-rows:auto;grid-template-columns:48px minmax(0,1fr);column-gap:16px;row-gap:4px;
    padding:0 0 24px;
  }
  .paso::before{top:0;bottom:0;right:auto;left:23px;border-top:none;border-left:2px solid var(--accent-2)}
  .paso-continuo::before{border-left-style:dashed}
  .paso>*,.paso h3,.paso p:last-child{grid-column:2;grid-row:auto}
  /* El numero va a la altura del titulo, haya o no tramo encima */
  .paso-n{grid-column:1;grid-row:1;margin:0}
  .paso-tramo~.paso-n{grid-row:2}
  .paso-tramo{white-space:normal}
}

/* ======================================================================
   Precio: la hoja de presupuesto tal como la recibe el cliente. Sin cifra
   porque no hay ninguna publicada, y la propia hoja lo dice.
   ====================================================================== */
.precio .sec-cabeza .btn{margin-top:8px}
.hoja{border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.hoja-cabeza{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:24px 24px 16px;border-bottom:1px solid var(--field-border);
}
.hoja-titulo{font-family:var(--font-display);font-size:var(--fs-7);font-weight:800;letter-spacing:var(--track-display);line-height:1.1}
.hoja-para{font-size:var(--fs-3);color:var(--text-dim)}
.hoja-titulos{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hoja-sello{transform:rotate(-6deg);font-size:var(--fs-2)}
.hoja-tabla{width:100%;border-collapse:collapse}
.hoja-tabla thead th{
  font-size:var(--fs-1);font-weight:600;color:var(--text-dim);text-align:left;
  padding:12px 24px 8px;border-bottom:1px solid var(--border);
}
.hoja-tabla tbody th,.hoja-tabla td{padding:16px 24px;vertical-align:top;border-bottom:1px solid var(--border);text-align:left}
.hoja-tabla tbody th{font-family:var(--font-display);font-size:var(--fs-5);font-weight:600;width:28%}
.hoja-tabla thead th:last-child,.hoja-cuando{text-align:right;white-space:nowrap}
.hoja-cuando{font-size:var(--fs-3);font-weight:800;color:var(--accent-2-text)}
.hoja-pie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:16px 24px 24px}
.hoja-etiqueta{font-size:var(--fs-1);font-weight:600;color:var(--text-dim);margin-bottom:8px}
.hoja-importe p:last-child{font-size:var(--fs-3)}
.precio-incluye{list-style:none;display:flex;flex-direction:column;gap:8px}
.precio-incluye li{position:relative;padding-left:20px;color:var(--text-dim);font-size:var(--fs-3)}
.precio-incluye li::before{content:"";position:absolute;left:2px;top:.7em;width:8px;height:1px;background:var(--text-dim)}
@media (max-width:640px){
  .hoja-cabeza{padding:16px}
  .hoja-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .hoja-tabla tr,.hoja-tabla tbody th,.hoja-tabla td{display:block;width:auto}
  .hoja-tabla tr{padding:16px;border-bottom:1px solid var(--border)}
  .hoja-tabla tbody th,.hoja-tabla td{padding:0;border:none}
  .hoja-tabla td{margin-top:8px}
  .hoja-cuando{text-align:left}
  .hoja-pie{grid-template-columns:1fr;padding:16px}
}

/* ======================================================================
   El panel del cliente, ensenado con datos de ejemplo
   ====================================================================== */
.panel-vista{margin:0}
.panel-vista-marco{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}
.panel-vista-barra{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg-alt);
}
.panel-vista-titulo{font-weight:600;font-size:var(--fs-3)}
.panel-vista-ejemplo{
  font-size:var(--fs-1);font-weight:600;color:var(--text-dim);
  padding:2px 12px;border:1px dashed var(--field-border);border-radius:999px;
}
.panel-vista-cuerpo{display:flex;flex-direction:column;gap:12px;padding:16px 16px 24px}
.panel-vista-h{font-family:var(--font-body);font-size:var(--fs-1);font-weight:600;color:var(--text-dim);margin-top:8px}
.panel-autos{list-style:none;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-sm)}
.panel-autos li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 12px;font-size:var(--fs-3)}
.panel-autos li+li{border-top:1px solid var(--border)}
.estado{font-size:var(--fs-1);font-weight:600;padding:2px 8px;border-radius:999px}
.estado-ok{color:var(--success-ink);background:var(--success-soft)}
.panel-tabla{width:100%;border-collapse:collapse;font-size:var(--fs-3);font-variant-numeric:tabular-nums}
.panel-tabla th{font-size:var(--fs-1);font-weight:600;color:var(--text-dim);text-align:left;padding:8px 12px;border-bottom:1px solid var(--border)}
.panel-tabla td{padding:8px 12px;border-bottom:1px solid var(--border)}
.panel-tabla th:not(:first-child),.panel-tabla td:not(:first-child){text-align:right}
.panel-vista figcaption{margin-top:12px;font-size:var(--fs-2);color:var(--text-dim)}

/* ======================================================================
   Antes de escribirnos: las preguntas a la vista, a dos columnas. Eran un
   acordeon; siete respuestas cortas se leen mejor sin tener que abrirlas.
   ====================================================================== */
.preguntas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px;margin-top:48px;border-top:1px solid var(--border)}
.pregunta{display:flex;flex-direction:column;gap:8px;padding:24px 0;border-bottom:1px solid var(--border)}
.pregunta h3{font-family:var(--font-body);font-size:var(--fs-5);font-weight:600;line-height:1.4}
.pregunta p{color:var(--text-dim);font-size:var(--fs-3);max-width:62ch}
@media (max-width:760px){
  .preguntas{grid-template-columns:1fr;margin-top:32px}
}

/* ======================================================================
   Cierre: lo que pasa al pulsar. A un lado la peticion, al otro el
   mensaje de WhatsApp tal como saldra, con su burbuja.
   ====================================================================== */
/* Violeta pleno: el unico bloque de color solido de la web, al final. Texto
   en --bg (7.4:1 claro, 7.2:1 oscuro); el foco cambia a --bg para verse. */
.cierre{background:var(--accent);color:var(--bg)}
.cierre a:focus-visible{outline-color:var(--bg)}
.cierre .btn-primary{background:var(--bg);color:var(--text)}
.cierre .enlace-flecha{color:var(--bg)}
.cierre-rejilla{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px 64px;align-items:center}
.cierre-texto{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.cierre h2{font-size:clamp(var(--fs-7),3.6vw,var(--fs-8));font-weight:800;letter-spacing:var(--track-display);line-height:1.1;max-width:16em}
.cierre-sub{color:var(--sobre-acento-tenue);font-size:var(--fs-5);max-width:34em}
.cierre-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:8px}
.cierre-nota{color:var(--sobre-acento-tenue);font-size:var(--fs-2)}
.borrador{
  margin:0;display:flex;flex-direction:column;gap:12px;padding:16px;
  border:none;border-radius:var(--radius);background:var(--bg);color:var(--text);transform:rotate(1.5deg);
}
.borrador-para{font-size:var(--fs-2);color:var(--text-dim);padding-bottom:12px;border-bottom:1px solid var(--border)}
.borrador-msg{max-width:92%;font-size:var(--fs-3)}
.borrador figcaption{font-size:var(--fs-1);color:var(--text-dim);align-self:flex-end}
@media (max-width:820px){
  .cierre-rejilla{grid-template-columns:1fr;gap:32px}
}
@media (max-width:520px){
  .cierre-acciones{flex-direction:column;align-items:stretch;align-self:stretch}
  .cierre-acciones .enlace-flecha{justify-content:center}
}

/* ======================================================================
   Paginas interiores
   ====================================================================== */
.page-header{max-width:760px;margin:0 auto;padding:64px 24px 32px;display:flex;flex-direction:column;gap:16px}
.page-header--ancha{max-width:var(--maxw)}
.page-header h1{font-size:clamp(2.3rem,4.6vw,2.8rem);font-weight:800;letter-spacing:var(--track-display);line-height:1.08}
.page-header p{color:var(--text-dim);font-size:var(--fs-5);max-width:38em}
.page-header .cierre-acciones{justify-content:flex-start}
/* La cabecera de pagina ya separa: la primera seccion no repite el aire */
.page-header+section{padding-top:32px}
.servicios-demo{margin-top:24px}

/* Sobre nosotros: texto a dos columnas */
.texto-dos{display:grid;grid-template-columns:1fr 1fr;gap:32px 64px}
.texto-dos h2{font-size:var(--fs-6);font-weight:600;margin-bottom:12px}
.texto-dos p{color:var(--text-dim)}
@media (max-width:760px){.texto-dos{grid-template-columns:1fr}}

/* Lo que hacemos y lo que no: dos listas enfrentadas. El "no" lleva una
   raya, no una cruz roja: no es un error, es una decision. */
.trato{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trato-titulo{font-size:clamp(var(--fs-7),3.2vw,var(--fs-8));font-weight:800;letter-spacing:var(--track-display);line-height:1.1}
.trato-listas{display:grid;grid-template-columns:1fr 1fr;gap:32px 64px;margin-top:48px}
.trato-listas h3{font-size:var(--fs-6);font-weight:600;padding-bottom:12px;border-bottom:1px solid var(--field-border)}
.trato-lista{list-style:none}
.trato-lista li{position:relative;padding:16px 0 16px 28px;border-bottom:1px solid var(--border);color:var(--text-dim)}
.trato-lista li::before{
  content:"";position:absolute;left:2px;top:calc(16px + .55em);width:12px;height:7px;
  border-left:2px solid var(--text);border-bottom:2px solid var(--text);transform:rotate(-45deg);
}
.trato-no li::before{top:calc(16px + .75em);width:12px;height:0;border:none;border-top:2px solid var(--text-dim);transform:none}
@media (max-width:760px){.trato-listas{grid-template-columns:1fr;margin-top:32px}}

/* Contacto */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:32px}}
.contact-info{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.contact-item{display:flex;gap:16px;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--border)}
.contact-item h2{font-family:var(--font-body);font-size:var(--fs-3);font-weight:600;margin-bottom:4px}
.contact-item p{color:var(--text-dim);font-size:var(--fs-3)}
.contact-item p a{color:var(--text);text-decoration:underline}
.contact-item .btn{margin-top:12px}
.contact-nota{margin-top:4px;font-size:var(--fs-2)}

form.contact-form{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:32px;display:flex;flex-direction:column;gap:16px;
}
.form-titulo{font-size:var(--fs-6);font-weight:600}
.field label{display:block;font-size:var(--fs-2);color:var(--text-dim);margin-bottom:8px}
.field .opt{font-size:var(--fs-1)}
.field input,.field textarea{
  width:100%;background:var(--bg);border:1px solid var(--field-border);border-radius:var(--radius-sm);
  padding:12px 14px;color:var(--text);font-size:var(--fs-3);
  transition:border-color var(--dur-rapida) var(--ease);
}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field textarea{resize:vertical;min-height:120px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--danger)}
.form-note{font-size:var(--fs-2);color:var(--text-dim)}
.field-check{display:flex;align-items:flex-start;gap:12px}
.field-check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--accent)}
.field-check label{margin:0;font-size:var(--fs-2)}
.field-check a{color:var(--text);text-decoration:underline}
/* Honeypot anti-spam: fuera de pantalla (no display:none, que algunos bots detectan) */
.hp-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:var(--fs-3);font-weight:600}
.form-status.ok{color:var(--success)}
.form-status.error{color:var(--danger)}
.form-status a{text-decoration:underline}
@media (max-width:520px){form.contact-form{padding:24px 16px}}

/* Paginas legales */
.legal-content{max-width:760px;margin:0 auto;padding:0 24px 96px}
.legal-content .updated{font-size:var(--fs-2);color:var(--text-dim);margin-bottom:32px}
.legal-content h2{font-size:var(--fs-6);font-weight:700;margin:32px 0 12px}
.legal-content h2:first-of-type{margin-top:0}
.legal-content h3{font-size:var(--fs-4);font-weight:700;margin:24px 0 8px}
.legal-content p{margin-bottom:16px;color:var(--text-dim)}
.legal-content ul{margin:0 0 16px 20px}
.legal-content li{margin-bottom:8px;color:var(--text-dim)}
.legal-content a{color:var(--link);text-decoration:underline}
.legal-content strong{color:var(--text)}

/* ======================================================================
   Pie
   ====================================================================== */
/* Compacto: marca, secciones y contacto en una fila; lo legal debajo, en
   pequeno. Sin las cuatro columnas con titulo de cualquier plantilla. */
footer{border-top:1px solid var(--border);padding:48px 24px 24px}
.pie,.pie-legal{max-width:var(--maxw);margin:0 auto}
.pie{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:32px;align-items:start}
.pie-marca p{color:var(--text-dim);font-size:var(--fs-3);margin-top:12px;max-width:30em}
.pie-enlaces{list-style:none;display:flex;flex-direction:column}
.pie-enlaces a,.pie-legal a{
  display:inline-flex;align-items:center;min-height:40px;color:var(--text-dim);font-size:var(--fs-3);
  transition:color var(--dur-rapida) var(--ease);
}
.pie-enlaces a:hover,.pie-legal a:hover{color:var(--text)}
.pie-legal{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;
  margin-top:32px;padding-top:16px;border-top:1px solid var(--border);
  color:var(--text-dim);font-size:var(--fs-2);
}
.pie-legal ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 24px}
.pie-legal a{font-size:var(--fs-2)}
@media (max-width:760px){.pie{grid-template-columns:1fr 1fr}.pie-marca{grid-column:1 / -1}}

/* ======================================================================
   Movimiento reducido. No se anula todo con un 0.01ms global: eso borra
   el feedback. Se quitan los movimientos y las animaciones en bucle; los
   cambios de color y opacidad, que informan sin marear, se quedan.
   ====================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
  .chat-escribiendo{display:none !important}
  .parte-linea .sello{animation:none !important}
  .skip-link{transition:none}
}