/* miaruta · www.miaruta.com
   Mundo: «mapa de la zona». Papel claro con las calles reales en trazo fino, la ruta del técnico marcada a mano con
   rotulador naranja y cada cita nueva como una chincheta. Formas redondeadas y sombras suaves; nada de rejillas. */

@font-face { font-family: "Red Hat Display"; src: url("/fuentes/red-hat-display-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("/fuentes/red-hat-text-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("/fuentes/red-hat-text-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("/fuentes/red-hat-text-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("/fuentes/red-hat-text-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --papel: #FAFAF7;
  --blanco: #FFFFFF;
  --tinta: #12203A;        /* texto y acción */
  --tinta-hover: #22365E;
  --tinta-2: #3B475A;      /* texto secundario */
  --tinta-3: #5C6678;      /* notas y rótulos pequeños */
  --linea: #E3E6EB;
  --linea-2: #CDD3DC;
  --rotulador: #FF6A2B;    /* solo la ruta, las paradas y los subrayados a mano */
  --melocoton: #FFD5BF;    /* subrayador */
  --melocoton-claro: #FFF1E9;
  --agua: #BBDCEB;
  --pie: #C9D1DF;          /* texto sobre azul noche */
  --ok: #1D6E43;
  --error: #B42318;

  --f-titulo: "Red Hat Display", system-ui, sans-serif;
  --f-texto: "Red Hat Text", system-ui, sans-serif;
  --ancho: 1240px;
  --margen: clamp(16px, 4vw, 40px);
  --cabecera: 72px;
  --r-hoja: 28px;
  --r-bocadillo: 18px;
  --r-campo: 12px;
  --sombra: 0 1px 3px rgba(18, 32, 58, .06), 0 10px 26px rgba(18, 32, 58, .07);
  --sombra-alta: 0 3px 10px rgba(18, 32, 58, .06), 0 24px 56px rgba(18, 32, 58, .12);
  --suave: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera) + 16px); -webkit-text-size-adjust: 100%; scrollbar-color: #B6BECB var(--papel); }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; caret-color: var(--rotulador);
}
::selection { background: var(--melocoton); color: var(--tinta); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--papel); }
::-webkit-scrollbar-thumb { background: #B6BECB; border: 3px solid var(--papel); border-radius: 8px; }
img { max-width: 100%; display: block; }
a { color: var(--tinta); text-decoration-thickness: 2px; text-underline-offset: .2em; text-decoration-color: var(--rotulador); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }
.pie :focus-visible { outline-color: var(--melocoton); }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--f-titulo); color: var(--tinta); text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(3rem, 1.2rem + 5.6vw, 6rem); line-height: 1; letter-spacing: -.04em; }
h2 { font-weight: 800; font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.7rem); line-height: 1.04; letter-spacing: -.035em; }
h3 { font-weight: 800; font-size: 1.3rem; line-height: 1.2; letter-spacing: -.01em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.2em; height: 1.2em; flex: none; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinta); color: var(--blanco); font-weight: 700; padding: .6em 1em; border-radius: 999px; }
.saltar:focus { top: 12px; }
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

/* el subrayador, a mano: una pasada de rotulador ancho con los bordes irregulares (herramientas/subrayado.py) */
:root { --subrayador: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48' preserveAspectRatio='none'%3E%3Cpath d='M6 10.3 12 9.8 18 9.7 24 10 30 8.9 36 7.7 42 7.2 48 8.7 54 9.6 60 9.7 66 9 72 9.4 78 9.4 84 8.8 90 6.9 96 6.8 102 7.5 108 8.9 114 8.5 120 8.6 126 8.6 132 9.3 138 8.1 144 6.9 150 5.8 156 7 162 7.6 168 8 174 7.4 180 8.4 186 8.5 192 8.2 198 6 204 5.7 210 5.8 216 7.1 222 6.6 228 7 234 7.2 L238 11.2 239.5 24 237 35.2 L234 38.2 228 40.4 222 40.7 216 40.8 210 38.8 204 39.1 198 38.8 192 39.4 186 38.2 180 39.1 174 39.9 168 41.9 162 40.8 156 40.4 150 39.3 144 40.2 138 39.3 132 39.2 126 38.7 120 40.9 114 41.5 108 42.1 102 40.4 96 40.8 90 40.3 84 40.6 78 39 72 39.7 66 40.4 60 42.5 54 41.9 48 41.8 42 40.9 36 41.9 30 40.7 24 40.2 18 39.4 12 41.3 6 42.1 L3 40.1 1 26 2.5 13.3Z' fill='%23FFD5BF'/%3E%3C/svg%3E"); }
.subrayado {
  background: var(--subrayador) no-repeat 0 94% / 100% 40%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .08em; white-space: nowrap;
}

/* botones píldora */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font: 700 1rem/1 var(--f-texto); text-decoration: none; cursor: pointer; border: 0; border-radius: 999px;
  padding: .85em 1.4em; background: var(--tinta); color: var(--blanco);
  transition: background-color .2s, transform .3s var(--suave), box-shadow .3s var(--suave);
}
.boton:hover { background: var(--tinta-hover); transform: translateY(-1px); box-shadow: var(--sombra); }
.boton:active { transform: translateY(0); }
.boton-grande { font-size: 1.12rem; padding: 1.05em 1.8em; }
.boton-peq { font-size: .95rem; padding: .66em 1.1em; }
.boton-claro { background: var(--blanco); color: var(--tinta); }
.boton-claro:hover { background: var(--melocoton-claro); }
.boton[disabled] { opacity: .65; cursor: progress; transform: none; box-shadow: none; }
.ico-wa { color: var(--rotulador); }
.enlace-flecha { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; color: var(--tinta); text-decoration: none; }
.enlace-flecha:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.enlace-flecha .ico { color: var(--rotulador); transition: transform .3s var(--suave); }
.enlace-flecha:hover .ico { transform: translateX(4px); }
.enlace-boton { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--tinta); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rotulador); text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* ───────────── Cabecera ───────────── */
.cabecera { position: sticky; top: 0; z-index: 40; background: rgba(250, 250, 247, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.cabecera-in { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); height: var(--cabecera); display: flex; align-items: center; gap: 2rem; }
.cabecera-logo { border-radius: 8px; }
.cabecera-logo img { height: 34px; width: auto; }
.cabecera-nav { display: flex; gap: 1.7rem; margin-left: auto; }
.cabecera-logo + .boton { margin-left: auto; }
.menu-boton {
  display: none; align-items: center; justify-content: center; gap: .45em; margin-left: auto; height: 44px; padding: 0 1rem;
  border: 1.5px solid var(--linea-2); border-radius: 999px; background: var(--blanco); color: var(--tinta); font: 700 .95rem var(--f-texto); cursor: pointer;
}
.menu-boton .ico { width: 1.3em; height: 1.3em; }
.menu-boton .ico-cerrar, .menu-abierto .menu-boton .ico-menu { display: none; }
.menu-abierto .menu-boton .ico-cerrar { display: block; }
.cabecera-nav a { font-weight: 600; font-size: .98rem; text-decoration: none; padding: .3em 0; }
.cabecera-nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .4em; }

/* ───────────── Portada ───────────── */
/* En escritorio el mapa ocupa todo el fondo, anclado a la derecha y sin deformarse; por la izquierda lo cubre el velo. */
.portada {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(600px, min(calc(100svh - var(--cabecera)), 62.5vw), 900px);
  display: flex; flex-direction: column; justify-content: center; padding-block: 56px 104px;
}
.portada-mapa { position: absolute; top: 0; right: max(0px, (100% - 1600px) / 2); height: 100%; aspect-ratio: 1440 / 900; z-index: -1; }
.mapa { display: block; width: 100%; height: 100%; }
/* el mapa sigue hacia València más allá del encuadre: en pantallas anchas llena el fondo hasta el borde */
#mapa-portada { overflow: visible; }
.velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(250,250,247,.97) 0%, rgba(250,250,247,.93) 34%, rgba(250,250,247,0) 60%); }
@media (min-width: 2600px) {
  /* más allá de lo que cubre el mapa (unos 2.600 px de pantalla), el borde derecho se funde con el papel */
  .portada::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 12%; z-index: -1; pointer-events: none; background: linear-gradient(270deg, var(--papel) 20%, rgba(250, 250, 247, 0)); }
}
.portada-texto h1 { max-width: 7.6em; }
.entradilla { font-size: clamp(1.15rem, 1rem + .4vw, 1.32rem); color: var(--tinta-2); max-width: 27em; margin-top: 1.5rem; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.1rem; }
.sellos { list-style: none; padding: 0; margin: 1.7rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem 1.6rem; max-width: 34em; font-size: .95rem; font-weight: 600; color: var(--tinta-2); }
.sellos li { display: inline-flex; align-items: center; gap: .55em; }
.sellos li::before { content: ""; width: .6em; height: .6em; border-radius: 50%; border: 2.5px solid var(--rotulador); background: var(--blanco); }
/* el pie del mapa va abajo a la izquierda, bajo el texto: abajo a la derecha flota el botón de contacto */
.portada-pie {
  position: absolute; left: max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen))); bottom: 22px; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  font-size: .82rem; line-height: 1.45; color: var(--tinta-2);
}
.portada-pie a { color: var(--tinta-2); }
.ruta-repetir { font: 700 .85rem var(--f-texto); color: var(--tinta); background: none; border: 0; padding: .25em 0 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--rotulador); text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* el mapa: rótulos, ruta, paradas y la chincheta */
.pueblos text { font: 700 12px var(--f-texto); letter-spacing: .14em; fill: var(--tinta-3); text-anchor: middle; paint-order: stroke; stroke: var(--papel); stroke-width: 6px; stroke-linejoin: round; }
.pueblo-este text { text-anchor: end; }
.pueblo-este path { fill: none; stroke: var(--tinta-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ruta-trazo, .ruta-cierre { fill: var(--rotulador); stroke: none; }
.ruta-guia { fill: none; stroke: #FFFFFF; stroke-width: 44; stroke-linecap: round; stroke-linejoin: round; }
.parada circle { fill: var(--blanco); stroke: var(--rotulador); stroke-width: 5; }
.parada text { paint-order: stroke; stroke: var(--papel); stroke-width: 6px; stroke-linejoin: round; }
.parada .hora { font: 800 22px var(--f-titulo); letter-spacing: -.02em; fill: var(--tinta); }
.parada .lugar { font: 600 15px var(--f-texto); fill: var(--tinta-2); }
.parada .fin { text-anchor: end; }
.chincheta path { fill: var(--tinta); }
.chincheta circle { fill: var(--rotulador); }
.sombra-chincheta { fill: var(--tinta); fill-opacity: .22; }
.bocadillo rect { fill: var(--blanco); filter: drop-shadow(0 8px 18px rgba(18, 32, 58, .16)); }
.bocadillo-t { font: 800 16px var(--f-titulo); fill: var(--tinta); }
.bocadillo-d { font: 500 14px var(--f-texto); fill: var(--tinta-2); }

/* el momento: la ruta se dibuja y la chincheta cae en Aldaia (portada.js pone .animar al verse el mapa) */
@media (scripting: enabled) {
  .mapa-vivo .ruta-guia { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .mapa-vivo .chincheta, .mapa-vivo .sombra-chincheta, .mapa-vivo .bocadillo { opacity: 0; }
  /* si portada.js no llegara a cargar, la ruta se dibuja igualmente a los 4 s */
  .mapa-vivo:not(.animar) .ruta-guia { animation: dibujar 1.9s cubic-bezier(.65, 0, .35, 1) 4s forwards; }
  .mapa-vivo:not(.animar) .chincheta, .mapa-vivo:not(.animar) .sombra-chincheta, .mapa-vivo:not(.animar) .bocadillo { animation: aparecer .6s var(--suave) 5.8s forwards; }
}
.mapa-vivo.animar .ruta-guia { animation: dibujar 1.9s cubic-bezier(.65, 0, .35, 1) .2s forwards; }
.mapa-vivo.animar .chincheta { animation: caer .8s var(--suave) 1.9s forwards; }
.mapa-vivo.animar .sombra-chincheta { animation: sombra .8s var(--suave) 1.9s forwards; transform-box: fill-box; transform-origin: center; }
.mapa-vivo.animar .bocadillo { animation: aparecer .6s var(--suave) 2.5s forwards; }
@keyframes dibujar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes caer { 0% { opacity: 0; transform: translateY(-70px); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes sombra { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ───────────── Secciones ───────────── */
.seccion { padding-block: clamp(64px, 7.5vw, 112px); }
.cabecera-seccion { max-width: 46rem; }
.cabecera-seccion p { font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem); color: var(--tinta-2); margin-top: 1.1rem; }
.nota { font-size: .86rem; color: var(--tinta-3); }

/* Cómo funciona: tres paradas sobre un trazo de rotulador, y la conversación */
.como { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); gap: clamp(44px, 6vw, 104px); align-items: start; }
.como-texto h2 { max-width: 10em; }
@media (min-width: 921px) { .como-texto { position: sticky; top: calc(var(--cabecera) + 40px); } }
.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 2.8rem 0 0; position: relative; }
.pasos::before {
  content: ""; position: absolute; left: 13px; top: 30px; bottom: 64px; width: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='150' viewBox='0 0 20 150'%3E%3Cpath d='M10 0C19 25 19 50 10 75C1 100 1 125 10 150' fill='none' stroke='%23FF6A2B' stroke-opacity='.92' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-y center top / 20px 150px;
}
.pasos li { position: relative; padding: 0 0 2.6rem 4.5rem; counter-increment: paso; }
.pasos li:last-child { padding-bottom: 0; }
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -4px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blanco); border: 4px solid var(--rotulador); color: var(--tinta);
  font: 800 1.2rem/1 var(--f-titulo); box-shadow: var(--sombra);
}
.pasos h3 { margin: .2rem 0 .45rem; font-size: 1.35rem; }
.pasos p { color: var(--tinta-2); max-width: 31em; }

/* la conversación (aspecto de WhatsApp, textos reales del asistente) */
.chat { margin: 0; justify-self: end; width: 100%; max-width: 430px; }
.chat-ventana { border-radius: 24px; overflow: hidden; box-shadow: var(--sombra-alta); }
.chat-cab { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: #F0F2F5; color: #111B21; border-bottom: 1px solid #DDE1E5; }
.chat-cab strong { display: block; font: 600 1rem/1.2 system-ui, "Segoe UI", Roboto, sans-serif; }
.chat-cab small { color: #54656F; font: 400 .8rem system-ui, "Segoe UI", Roboto, sans-serif; }
.chat-avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; text-align: center; border: 2px dashed #8A949E; color: #54656F; font: 800 .56rem/1.05 var(--f-titulo); letter-spacing: .05em; }
.chat-cuerpo { background: #EFEAE2; color: #111B21; padding: 1rem .85rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; font: 400 .92rem/1.38 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif; }
.msg { max-width: 88%; padding: .42rem .6rem .3rem; border-radius: 8px; box-shadow: 0 1px .5px rgba(11, 20, 26, .14); }
.msg p { margin: 0 0 .3rem; }
.msg-in { background: #FFFFFF; align-self: flex-start; border-top-left-radius: 0; }
.msg-out { background: #D9FDD3; align-self: flex-end; border-top-right-radius: 0; }
.msg-hora { display: block; text-align: right; font-size: .7rem; line-height: 1; color: #54656F; margin-top: -.1rem; }
.msg-botones { display: flex; flex-direction: column; gap: .28rem; width: 88%; align-self: flex-start; }
.msg-botones span { background: #FFFFFF; color: #027EB5; text-align: center; font-weight: 500; padding: .5rem; border-radius: 8px; box-shadow: 0 1px .5px rgba(11, 20, 26, .14); }
.chat-salto { align-self: center; font-size: .76rem; color: #54656F; background: #FFFFFF; padding: .22rem .65rem; border-radius: 6px; margin: .25rem 0; text-align: center; }
.msg-lista { list-style: none; margin: 0; padding: 0; width: 88%; align-self: flex-start; background: #FFFFFF; border-radius: 8px; box-shadow: 0 1px .5px rgba(11, 20, 26, .14); }
.msg-lista li { position: relative; display: flex; flex-direction: column; padding: .55rem 2.4rem .55rem .75rem; border-bottom: 1px solid #EEF0F2; }
.msg-lista li:last-child { border-bottom: 0; }
.msg-lista b { font-weight: 600; }
.msg-lista span { color: #54656F; font-size: .84rem; line-height: 1.3; }
.msg-lista li::after { content: ""; position: absolute; right: .8rem; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid #8696A0; }
.msg-lista li.elegida { background: #F4FBF1; }
.msg-lista li.elegida::after { border-color: #1DAA61; background: #1DAA61; box-shadow: inset 0 0 0 3px #FFFFFF; }
.chat figcaption { margin-top: .9rem; text-align: center; font-size: .86rem; color: var(--tinta-3); }

/* El panel: capturas reales, superpuestas como hojas sobre la mesa */
.capturas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); }
.captura { margin: 0; }
.captura img { width: 100%; height: auto; border-radius: 20px; background: var(--blanco); box-shadow: var(--sombra-alta); }
.ampliar { display: block; border-radius: 20px; cursor: zoom-in; }
.captura figcaption { font-size: .93rem; color: var(--tinta-2); margin-top: .85rem; max-width: 32em; }
.captura-agenda { grid-column: 1 / span 9; grid-row: 1; }
.captura-campana { grid-column: 6 / -1; grid-row: 2; margin-top: -19%; position: relative; }
.datos { list-style: none; padding: 0; margin: clamp(44px, 5vw, 64px) 0 0; columns: 2; column-gap: 3.5rem; max-width: 66rem; }
.datos li { break-inside: avoid; position: relative; padding-left: 2rem; margin-bottom: 1.4rem; color: var(--tinta-2); }
.datos li::before { content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 16px; border-radius: 50%; background: var(--blanco); border: 4px solid var(--rotulador); }
.datos strong { color: var(--tinta); }
.seccion-panel .nota { margin-top: .6rem; }

/* Calculadora: los números a la izquierda y el ticket del ahorro a la derecha */
.ahorro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: clamp(44px, 6vw, 96px); align-items: center; }
.ahorro-texto > p { color: var(--tinta-2); font-size: 1.12rem; max-width: 32em; margin-top: 1.1rem; }
.calc { margin-top: 1.4rem; }
.calc-campo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .3rem 1rem; margin-top: 1.7rem; }
.calc-campo label { font-weight: 600; }
.calc-campo output { font: 800 2.3rem/1 var(--f-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calc-campo input[type=range] { grid-column: 1 / -1; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; cursor: pointer; margin: 0; --p: 15%; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--rotulador) var(--p), var(--linea-2) var(--p)); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--linea-2); }
input[type=range]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--rotulador); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--blanco); border: 7px solid var(--tinta); box-shadow: var(--sombra); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--blanco); border: 7px solid var(--tinta); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--melocoton); }
input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px var(--melocoton); }
.calc-supuestos { margin-top: 2.2rem; border-top: 1.5px dashed var(--linea-2); padding-top: 1rem; }
.calc-supuestos summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .65rem; font-weight: 700; color: var(--tinta); border-radius: 6px; }
.calc-supuestos summary::-webkit-details-marker { display: none; }
.calc-supuestos summary::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--rotulador); background: var(--blanco); transition: background-color .2s; }
.calc-supuestos[open] summary::before { background: var(--rotulador); }
.supuestos-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; margin-top: 1.1rem; }
.supuestos-rejilla label { display: flex; flex-direction: column; gap: .4rem; font-size: .92rem; font-weight: 600; color: var(--tinta-2); }
.resumen { background: var(--blanco); border-radius: var(--r-hoja); box-shadow: var(--sombra-alta); padding: clamp(26px, 3vw, 38px); }
.resumen h3 { font-size: 1.3rem; }
.lineas { margin: .6rem 0 0; }
.lineas div { display: flex; align-items: baseline; gap: 1rem; padding: .8rem 0; border-bottom: 1.5px dashed var(--linea); }
.lineas dt { font-weight: 600; line-height: 1.25; }
.lineas dt small { display: block; font-size: .88rem; font-weight: 500; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.lineas dd { margin: 0 0 0 auto; font: 800 1.6rem/1 var(--f-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lineas .total { border-bottom: 0; padding-top: 1.1rem; }
.lineas .total dt { font: 800 1.25rem var(--f-titulo); }
.lineas .total dd { font-size: 2.6rem; background: var(--subrayador) no-repeat 0 96% / 100% 42%; padding-inline: .1em; }
.resumen-cuota { font-weight: 600; font-size: .98rem; margin: 1rem 0 .7rem; }
.resumen-cuota a, .precio .mes a { color: var(--tinta); font-weight: 800; text-decoration: none; padding-inline: .05em; border-radius: 4px; }

/* Integraciones */
.integra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: 2.4rem clamp(44px, 6vw, 96px); align-items: start; }
.integraciones { margin: .4rem 0 0; border-top: 1.5px dashed var(--linea-2); }
.integraciones div { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: .35rem 2.4rem; align-items: baseline; padding: 1.4rem 0; border-bottom: 1.5px dashed var(--linea-2); }
.integraciones dt { font: 800 clamp(1.3rem, 1.1rem + .6vw, 1.65rem)/1.2 var(--f-titulo); letter-spacing: -.02em; color: var(--tinta); }
.integraciones dd { margin: 0; font-size: 1.06rem; color: var(--tinta-2); }
.integraciones .subrayado { color: var(--tinta); font-weight: 700; }

/* Precios: una sola hoja con tres columnas */
.tarifa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 60px); background: var(--blanco); border-radius: 30px; box-shadow: var(--sombra-alta); }
.plan { padding: clamp(26px, 3vw, 42px); }
.plan + .plan { border-left: 1.5px dashed var(--linea); }
.plan h3 { font-size: 1.45rem; }
.precio { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45rem; margin: .9rem 0 .7rem; }
.precio .desde { width: 100%; font-weight: 600; color: var(--tinta-2); }
.precio .cifra { font: 800 3.3rem/1 var(--f-titulo); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.precio .mes { font-weight: 600; color: var(--tinta-2); }
.plan .para { color: var(--tinta-2); min-height: 3.2em; }
.plan ul { list-style: none; margin: 1.3rem 0 0; padding: 1.3rem 0 0; border-top: 1.5px dashed var(--linea); display: grid; gap: .65rem; }
.plan li { position: relative; padding-left: 1.6rem; }
.plan li::before { content: ""; position: absolute; left: 0; top: .48em; width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--rotulador); }
.fundadores { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.4rem; padding: 1.15rem 1.15rem 1.15rem 1.6rem; background: var(--melocoton-claro); border-radius: 999px; }
.fundadores p { font-size: 1.06rem; max-width: 44em; }
.notas-precio { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .35rem; color: var(--tinta-2); font-size: .94rem; }

/* Preguntas: bocadillos que se abren */
.preguntas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 2.4rem clamp(44px, 6vw, 96px); align-items: start; }
@media (min-width: 921px) { .preguntas-cab { position: sticky; top: calc(var(--cabecera) + 40px); } }
.preguntas-cab p { color: var(--tinta-2); margin-top: 1.1rem; max-width: 22em; }
.faq details { background: var(--blanco); border-radius: var(--r-bocadillo); box-shadow: var(--sombra); margin-bottom: .75rem; }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 1.15rem 3.6rem 1.15rem 1.4rem; font: 800 1.1rem/1.3 var(--f-titulo); border-radius: var(--r-bocadillo); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 1.4rem; top: 50%; width: 16px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--rotulador); transition: transform .35s var(--suave); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq details p { padding: 0 1.4rem 1.3rem; color: var(--tinta-2); max-width: 44em; }

/* Contacto: la ruta acaba en tu empresa */
.contacto { position: relative; padding-bottom: clamp(64px, 7.5vw, 112px); }
.contacto-mapa { height: clamp(240px, 24vw, 340px); }
.destino { font: 800 26px var(--f-titulo); letter-spacing: -.01em; fill: var(--tinta); }
.contacto .parada circle { stroke-width: 5; }
.contacto-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(44px, 6vw, 96px); align-items: start; margin-top: clamp(8px, 2vw, 28px); }
.contacto-texto > p { color: var(--tinta-2); font-size: 1.15rem; max-width: 26em; margin: 1.1rem 0 1.9rem; }
.contacto-texto .contacto-tel { margin: .95rem 0 0; font-size: 1rem; color: var(--tinta-2); }
.contacto-tel a { font-weight: 800; }
.otras-vias { list-style: none; padding: 0; margin: 2.3rem 0 0; display: grid; gap: 1rem; }
.via { display: inline-flex; align-items: center; gap: .7rem; background: none; border: 0; padding: 0; cursor: pointer; font: 600 1.05rem var(--f-texto); color: var(--tinta); text-decoration: underline; text-decoration-color: var(--linea-2); text-decoration-thickness: 2px; text-underline-offset: .25em; border-radius: 6px; }
.via:hover { text-decoration-color: var(--rotulador); }
.via .ico { color: var(--rotulador); width: 1.3em; height: 1.3em; }
.formulario { background: var(--blanco); border-radius: var(--r-hoja); box-shadow: var(--sombra-alta); padding: clamp(24px, 3.4vw, 42px); }
.formulario h3 { font-size: 1.5rem; }
.formulario-sub { color: var(--tinta-2); margin-top: .45rem; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; margin-top: 1.5rem; position: relative; }
.campo { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.campo > span { font-size: .9rem; font-weight: 700; }
.campo-ancho { grid-column: 1 / -1; }
.formulario input:not([type=checkbox]), .formulario select, .formulario textarea, .supuestos-rejilla input {
  width: 100%; font: 500 1rem/1.4 var(--f-texto); color: var(--tinta); background: var(--papel);
  border: 1.5px solid var(--linea-2); border-radius: var(--r-campo); padding: .72rem .85rem; transition: border-color .2s, box-shadow .2s;
}
.formulario textarea { resize: vertical; min-height: 6.5em; }
.formulario select { -webkit-appearance: none; appearance: none; padding-right: 2.4rem; background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2312203A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .9rem center; }
.formulario input:not([type=checkbox]):focus, .formulario select:focus, .formulario textarea:focus, .supuestos-rejilla input:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 4px var(--melocoton); }
.formulario ::placeholder { color: #677183; }
.formulario [aria-invalid=true] { border-color: var(--error) !important; }
.campo-error { font-size: .85rem; font-weight: 600; color: var(--error); }
.campo-error:empty { display: none; }
.casilla { display: flex; align-items: flex-start; gap: .65rem; font-size: .95rem; color: var(--tinta-2); }
.casilla input { width: 20px; height: 20px; flex: none; margin-top: .15rem; accent-color: var(--rotulador); }
.casilla input[aria-invalid=true] { outline: 2px solid var(--error); outline-offset: 2px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.formulario-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 1.5rem; }
.estado-form { font-weight: 600; }
.estado-form:empty { display: none; }
.estado-form.ok { color: var(--ok); }
.estado-form.err { color: var(--error); }

/* ───────────── Pie ───────────── */
.pie { background: var(--tinta); color: var(--pie); padding-block: 56px 40px; font-size: .98rem; }
.pie a { color: var(--blanco); text-decoration-color: var(--rotulador); }
.pie-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.2rem 3rem; align-items: start; }
.pie-marca img { height: 38px; width: auto; }
.pie-lema { margin: .9rem 0 1rem; font: 800 1.15rem/1.2 var(--f-titulo); color: var(--melocoton); }
.pie-marca p + p { margin-top: .35rem; }
.acceso label { font-weight: 700; color: var(--blanco); }
.acceso-fila { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.acceso-fila input { width: 12rem; font: 500 1rem var(--f-texto); color: var(--blanco); background: #1B2C4D; border: 1.5px solid #3A4C70; border-radius: var(--r-campo); padding: .62rem .8rem; }
.acceso-fila input::placeholder { color: #9AA6BC; }
.acceso-fila input:focus { outline: none; border-color: var(--melocoton); box-shadow: 0 0 0 3px rgba(255, 213, 191, .35); }
.acceso-dom { font-weight: 600; }
.error { display: block; margin-top: .4rem; font-size: .9rem; font-weight: 600; color: #FFB4A6; }
.error:empty { display: none; }
.pie-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; border-top: 1px solid #2A3A5C; padding-top: 1.3rem; }
.pie .enlace-boton { color: var(--blanco); font-weight: 600; }

/* ───────────── Aviso de cookies (consent.js) ───────────── */
.ck-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 760px; margin-inline: auto;
  background: var(--blanco); color: var(--tinta); border-radius: 22px; padding: 1.2rem 1.3rem; box-shadow: var(--sombra-alta);
  transform: translateY(calc(100% + 32px)); visibility: hidden; transition: transform .45s var(--suave), visibility 0s .45s;
}
.ck-bar.is-on { transform: none; visibility: visible; transition: transform .45s var(--suave); }
.ck-bar-in { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.ck-txt { flex: 1 1 24rem; }
.ck-txt h2 { font: 800 1.15rem/1.2 var(--f-titulo); letter-spacing: -.01em; margin: 0 0 .35rem; }
.ck-txt p { font-size: .93rem; color: var(--tinta-2); }
.ck-acc { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.ck-btn { font: 700 .95rem/1 var(--f-texto); padding: .75em 1.2em; border-radius: 999px; border: 1.5px solid var(--tinta); cursor: pointer; min-width: 7.5rem; }
.ck-btn-pri { background: var(--tinta); color: var(--blanco); }
.ck-btn-sec { background: var(--blanco); color: var(--tinta); }
.ck-link { background: none; border: 0; color: var(--tinta); font: 600 .93rem var(--f-texto); text-decoration: underline; text-decoration-color: var(--rotulador); cursor: pointer; padding: .4em; }
.ck-modal { position: fixed; inset: 0; z-index: 60; background: rgba(18, 32, 58, .45); display: grid; place-items: center; padding: 16px; }
.ck-modal[hidden] { display: none; }
.ck-panel { background: var(--blanco); color: var(--tinta); border-radius: 24px; width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; padding: 1.5rem; box-shadow: var(--sombra-alta); }
.ck-panel-h { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.ck-panel-h h2 { font: 800 1.35rem/1.2 var(--f-titulo); margin: 0; }
.ck-x { background: none; border: 0; color: var(--tinta); cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.ck-x:hover { background: var(--papel); }
.ck-x svg { width: 22px; height: 22px; }
.ck-cat { padding: .9rem 0; border-top: 1.5px dashed var(--linea); }
.ck-cat-t { font-weight: 700; }
.ck-cat-d { font-size: .92rem; color: var(--tinta-2); margin-top: .35rem; }
.ck-siempre { font-weight: 600; color: var(--tinta-3); font-size: .85rem; margin-left: .4rem; }
.ck-enc { color: var(--tinta-3); }
.ck-sw { display: flex; align-items: center; gap: .7rem; cursor: pointer; }
.ck-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ck-track { width: 44px; height: 26px; border-radius: 13px; background: var(--linea-2); position: relative; flex: none; transition: background-color .2s; }
.ck-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--blanco); box-shadow: 0 1px 3px rgba(18, 32, 58, .2); transition: transform .25s var(--suave); }
.ck-sw input:checked + .ck-track { background: var(--rotulador); }
.ck-sw input:checked + .ck-track::after { transform: translateX(18px); }
.ck-sw input:focus-visible + .ck-track { outline: 3px solid var(--tinta); outline-offset: 2px; }
.ck-panel-f { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1.5px dashed var(--linea); }

/* ───────────── Páginas legales y 404 ───────────── */
.legal { padding-block: clamp(52px, 7vw, 100px); }
.legal .contenedor { max-width: 860px; }
.legal h1 { font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem); }
.legal h2 { font-size: 1.6rem; margin: 2.4rem 0 .7rem; letter-spacing: -.02em; }
.legal h3 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; }
.legal p, .legal li, .legal td, .legal th { color: var(--tinta-2); }
.legal p, .legal li { max-width: 68ch; }
.legal p + p { margin-top: .8rem; }
.legal ul { padding-left: 1.2rem; margin: .6rem 0; }
.legal li + li { margin-top: .4rem; }
.legal li::marker { color: var(--rotulador); }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; background: var(--blanco); border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); }
.legal th, .legal td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.legal th { color: var(--tinta); font-weight: 700; }
.legal tr:last-child td { border-bottom: 0; }
.legal .actualizado { color: var(--tinta-3); margin-top: .8rem; }
.tabla-scroll { overflow-x: auto; }
.error-404 { min-height: calc(100svh - var(--cabecera) - 280px); display: grid; align-content: center; padding-block: 72px; }
.error-404 p { font-size: 1.2rem; color: var(--tinta-2); margin: 1.2rem 0 2rem; max-width: 32em; }

/* Caso de cliente (en borradores/; se publica solo con permiso) */
.caso-intro { font-size: 1.15rem; color: var(--tinta-2); max-width: 40em; margin-top: 1.1rem; }
.cita-cliente { margin: 2.5rem 0 0; padding: 1.6rem 1.8rem; background: var(--blanco); border-radius: var(--r-hoja); box-shadow: var(--sombra); max-width: 46rem; }
.cita-cliente p { font: 800 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.2 var(--f-titulo); }
.cita-cliente footer { margin-top: .9rem; color: var(--tinta-2); font-weight: 600; }

/* ───────────── Tabletas y móviles ───────────── */
@media (max-width: 1060px) {
  .menu-boton { display: inline-flex; }
  .cabecera-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0;
    padding: .3rem var(--margen) 1.2rem; background: var(--papel); border-bottom: 1px solid var(--linea); box-shadow: 0 18px 30px rgba(18, 32, 58, .10);
  }
  .menu-abierto .cabecera-nav { display: flex; }
  .cabecera-nav a { font: 800 1.35rem/1.2 var(--f-titulo); letter-spacing: -.01em; padding: .85rem 0; border-bottom: 1.5px dashed var(--linea); }
  .cabecera-nav a:last-child { border-bottom: 0; }
  .cabecera-nav a:hover { text-underline-offset: .25em; }
  /* la portada: el texto primero y el mapa como una ventana encuadrada en la ruta (portada.js recoloca el encuadre) */
  .portada { min-height: 0; padding-block: 44px 24px; justify-content: flex-start; }
  .portada-texto { order: 1; }
  .portada-mapa {
    order: 2; position: relative; top: auto; right: auto; height: auto; z-index: 0;
    width: calc(100% - 2 * var(--margen)); max-width: calc(var(--ancho) - 2 * var(--margen)); margin: 36px auto 0;
    aspect-ratio: 880 / 640; border-radius: 26px; overflow: hidden; box-shadow: var(--sombra-alta); background: var(--papel);
  }
  .velo { display: none; }
  .portada-pie { order: 3; position: static; align-self: center; width: calc(100% - 2 * var(--margen)); max-width: calc(var(--ancho) - 2 * var(--margen)); margin: 10px auto 0; }
}
@media (max-width: 920px) {
  .como, .ahorro, .preguntas, .integra, .contacto-in { grid-template-columns: minmax(0, 1fr); }
  .chat { justify-self: start; }
  .pie-in { grid-template-columns: minmax(0, 1fr); }
  .capturas { display: block; }
  .captura-campana { margin-top: 2.4rem; }
  .ampliar { max-width: 600px; }
}
@media (max-width: 760px) {
  :root { --cabecera: 64px; }
  .cabecera-in { gap: 1rem; }
  .cabecera-logo img { height: 30px; }
  .datos { columns: 1; }
  .integraciones div, .supuestos-rejilla, .campos { grid-template-columns: minmax(0, 1fr); }
  .tarifa { grid-template-columns: minmax(0, 1fr); }
  .plan + .plan { border-left: 0; border-top: 1.5px dashed var(--linea); }
  .plan .para { min-height: 0; }
  .fundadores { border-radius: 24px; padding: 1.25rem; }
  .lineas .total dd { font-size: 2.2rem; }
}
@media (max-width: 600px) {
  .menu-boton { width: 44px; padding: 0; }
  .menu-boton span { display: none; }
  .portada-mapa { aspect-ratio: 680 / 760; }
  /* en la ventana estrecha el mapa se ve a la mitad: los rótulos y la chincheta crecen para leerse */
  #mapa-portada .pueblos > text { font-size: 19px; }
  #mapa-portada .pueblo-este { scale: 1.55; transform-origin: 1430px 466px; }
  #mapa-portada .ruta-trazo { stroke: var(--rotulador); stroke-width: 3; stroke-linejoin: round; }
  #mapa-portada .parada circle { stroke-width: 6; }
  #mapa-portada .parada .hora { font-size: 30px; }
  #mapa-portada .parada .lugar { font-size: 23px; transform: translateY(6px); }
  #mapa-portada .bocadillo { scale: 1.35; transform-origin: 888px 360px; }
  #mapa-portada .chincheta { scale: 1.3; transform-origin: 862px 404px; }
  #mapa-portada .sombra-chincheta { scale: 1.3; transform-box: fill-box; transform-origin: center; }
  .boton-grande { width: 100%; }
  .acciones { gap: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}