/* ADDCOR.IA — web de venta (rediseño del 10-oct-2026).
   Idea: la carretera. Todo lo decorativo sale de conducir: asfalto, marcas viales, carteles de orientación,
   hitos kilométricos, el coche de autoescuela y el cuadro de mandos. Colores cálidos de señal (naranja y ámbar)
   sobre carbón cálido, con el azul de los carteles como único color frío. Tipografía Overpass, de la familia
   de las letras de las señales de tráfico. Todo el movimiento respeta prefers-reduced-motion. */

@font-face {
  font-family: "Overpass";
  src: url("/fuentes/overpass-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  interpolate-size: allow-keywords;
  --asfalto: #2a211c;
  --asfalto-2: #3a2e27;
  --asfalto-3: #4b3c33;
  --noche: #1d1612;
  --carbon: #2a211c;
  --tinta: #2a211c;
  --tinta-2: #5e4b40;
  --tinta-3: #76604f;
  --papel: #fff8f1;
  --fondo: #fff8f1;
  --seccion-tinte: #fff1e3;
  --superficie: #ffffff;
  --tinte: #ffebd6;
  --linea: #eadccd;
  --linea-2: #f3e7da;
  --borde-campo: #94796a;
  --naranja: #c2410c;
  --naranja-oscuro: #9a3412;
  --naranja-vivo: #ea580c;
  --ambar: #f5a524;
  --ambar-claro: #ffb547;
  --azul: #1f4f94;
  --azul-oscuro: #173c72;
  --sobre-oscuro: #f7e3cf;
  --verde-texto: #1e6b34;
  --verde-fondo: #e4f4e7;
  --rojo-texto: #a32424;
  --rojo-fondo: #fdecec;
  --rojo-senal: #c81e1e;
  --whatsapp-mio: #dcf6d3;
  /* La marca de la vista previa (la cambia el configurador; js/marca.js calcula las variantes legibles). */
  --primario: #c2410c;
  --sobre-primario: #ffffff;
  --primario-oscuro: #9a3412;
  --tinte-marca: #fbe3d7;
  --fuente: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho: 1180px;
  --margen: max(1.125rem, calc((100vw - var(--ancho)) / 2));
  --radio: 14px;
  --sombra-1: 0 1px 2px rgb(42 33 28 / .06), 0 8px 24px -14px rgb(42 33 28 / .28);
  --sombra-2: 0 2px 4px rgb(42 33 28 / .05), 0 30px 60px -28px rgb(42 33 28 / .5);
  --curva: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--fuente); font-size: 1.0625rem; line-height: 1.55; color: var(--tinta); background: var(--superficie); accent-color: var(--naranja); overflow-x: clip; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
a { color: var(--naranja-oscuro); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--naranja-oscuro); outline-offset: 3px; }
button, input { font: inherit; color: inherit; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: .5rem; top: -4rem; z-index: 60; background: #fff; padding: .5rem .75rem; border-radius: 8px; }
.saltar:focus { top: .5rem; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Botones ---------- */
.boton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: .8rem 1.4rem; border-radius: 12px; border: 2px solid transparent; font-weight: 760; font-size: 1.0625rem; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, box-shadow .25s, translate .2s var(--curva); }
.boton-principal { background: var(--naranja); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 10px 22px -12px rgb(194 65 12 / .75); }
.boton-principal:hover { background: var(--naranja-oscuro); }
.boton-secundario { border-color: var(--carbon); color: var(--carbon); background: rgb(255 255 255 / .6); }
.boton-secundario:hover { background: var(--carbon); color: #fff; }
.boton-claro { border-color: var(--sobre-oscuro); color: var(--sobre-oscuro); background: transparent; }
.boton-claro:hover { background: var(--sobre-oscuro); color: var(--carbon); }
.boton-chico { min-height: 42px; padding: .45rem 1rem; font-size: .9375rem; border-radius: 10px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .boton:hover { translate: 0 -2px; }
  .boton-principal:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 16px 28px -14px rgb(154 52 18 / .85); }
}
.boton:active { translate: 0 0; }
.enlace { border: 0; background: none; padding: 0; color: var(--naranja-oscuro); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.enlace-icono { display: inline-flex; align-items: center; gap: .35rem; }
.enlace-icono .ico { width: 1.05rem; height: 1.05rem; }
.pausa { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: .3rem .8rem; border: 1px solid rgb(247 227 207 / .35); border-radius: 999px; background: rgb(29 22 18 / .85); color: var(--sobre-oscuro); font-size: .8125rem; font-weight: 700; cursor: pointer; }
.pausa .ico { width: 1rem; height: 1rem; }
.pausa:hover { background: var(--noche); border-color: var(--sobre-oscuro); }
.pausa--clara { border-color: var(--linea); background: #fff; color: var(--tinta-2); }
.pausa--clara:hover { background: var(--papel); border-color: var(--borde-campo); color: var(--tinta); }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 1rem; padding: .65rem var(--margen); background: rgb(255 248 241 / .86); border-bottom: 1px solid rgb(234 220 205 / .9); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); }
.logo { display: inline-flex; align-items: center; gap: .55rem; margin-right: auto; font-weight: 860; font-size: 1.1875rem; letter-spacing: -0.02em; color: var(--carbon); text-decoration: none; }
.logo svg { width: 34px; height: 34px; flex: none; }
.menu { display: none; gap: 1.6rem; }
.menu a, .entrar { position: relative; color: var(--tinta-2); font-weight: 680; font-size: .9375rem; text-decoration: none; padding-block: .35rem; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--naranja); scale: 0 1; transform-origin: left; transition: scale .25s var(--curva); }
.menu a:hover, .entrar:hover { color: var(--carbon); }
.menu a:hover::after { scale: 1 1; }
.entrar { display: none; }
@media (min-width: 960px) {
  .menu { display: flex; margin-right: .75rem; }
  .entrar { display: inline; }
}
/* La marca vial que avanza mientras bajas por la página. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .cabecera::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: repeating-linear-gradient(90deg, var(--ambar) 0 22px, transparent 22px 36px); transform-origin: left; animation: avance linear both; animation-timeline: scroll(root); }
    @keyframes avance { from { scale: 0 1; } to { scale: 1 1; } }
  }
}
.menu-movil { position: relative; }
.menu-movil summary { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 12px; background: #fff; cursor: pointer; list-style: none; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil[open] summary { background: var(--carbon); color: #fff; border-color: var(--carbon); }
.menu-movil nav { position: absolute; right: 0; top: calc(100% + .6rem); display: grid; min-width: 15rem; padding: .5rem; background: #fff; border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra-2); }
.menu-movil nav a { padding: .8rem .9rem; border-radius: 10px; color: var(--tinta); font-weight: 700; text-decoration: none; }
.menu-movil nav a:hover { background: var(--papel); }
@media (min-width: 960px) { .menu-movil { display: none; } }
@media (max-width: 420px) { .cabecera .boton-chico { padding-inline: .8rem; } .logo span { font-size: 1.0625rem; } }

/* ---------- Secciones ---------- */
main { display: block; }
main:focus { outline: none; }
.seccion { position: relative; padding: clamp(4rem, 9vw, 7rem) var(--margen); display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); }
.seccion--tinte { background: var(--seccion-tinte); }
.seccion--oscura { background: var(--carbon); color: var(--sobre-oscuro); }
.seccion--oscura h2 { color: #fff; }
.seccion-cabeza { display: grid; gap: 1rem; }
h2 { font-size: clamp(2rem, 2.8vw + 1rem, 3.15rem); line-height: 1.04; font-weight: 860; letter-spacing: -0.03em; max-width: 22ch; text-wrap: balance; }
h3 { font-size: 1.25rem; line-height: 1.2; font-weight: 790; letter-spacing: -0.012em; }
.entrada { font-size: clamp(1.0625rem, .45vw + 1rem, 1.3rem); color: var(--tinta-2); max-width: 60ch; text-wrap: pretty; }
.seccion--oscura .entrada { color: var(--sobre-oscuro); }
.nota-seccion { color: var(--tinta-2); max-width: 70ch; padding-left: 1rem; border-left: 3px solid var(--ambar); }
.dos-col { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 920px) { .dos-col { grid-template-columns: 1fr 1fr; gap: 4.5rem; } }
.pie-ejemplo { font-size: .875rem; color: var(--tinta-3); }
.antetitulo { font-weight: 760; color: var(--naranja-oscuro); }

/* ---------- Héroe ---------- */
.heroe { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 3rem; padding: clamp(2.75rem, 6vw, 5.25rem) var(--margen) clamp(4rem, 8vw, 6.5rem); background: radial-gradient(52rem 36rem at 92% 8%, #ffe1bf 0, rgb(255 225 191 / 0) 62%), var(--papel); }
@media (min-width: 1060px) { .heroe { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: 4rem; } }
/* La carretera de fondo: entra desde arriba y se va por la derecha, con su paso de cebra. */
.heroe-carretera { position: absolute; z-index: -1; right: 0; top: 0; width: min(64rem, 120%); height: 100%; }
.heroe-carretera .calzada { fill: none; stroke-width: 150; stroke-linecap: butt; }
.heroe-carretera .borde { fill: none; stroke: #f0dfcd; stroke-width: 166; }
.heroe-carretera .eje { fill: none; stroke: #fff4e4; stroke-width: 5; stroke-dasharray: 30 24; }
.heroe-carretera .cebra rect { fill: #fff4e4; opacity: .92; }
.heroe-carretera { opacity: .95; }
@media (max-width: 1059px) { .heroe-carretera { top: auto; bottom: 0; height: 62%; width: 140%; right: -20%; opacity: .55; } }
.heroe-texto { display: grid; gap: 1.4rem; align-content: start; }
h1 { font-size: clamp(2.5rem, 2.4vw + 1.35rem, 3.8rem); line-height: 1; font-weight: 880; letter-spacing: -0.04em; text-wrap: balance; }
h1 .linea { display: block; }
h1 .linea--suave { margin-top: .12em; font-weight: 820; color: var(--tinta-2); }
.bajada { font-size: clamp(1.125rem, .5vw + 1rem, 1.3125rem); color: var(--tinta-2); max-width: 54ch; text-wrap: pretty; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.garantias { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; font-size: .9375rem; color: var(--tinta-2); }
.garantias li { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem .3rem .55rem; background: rgb(255 255 255 / .75); border: 1px solid var(--linea); border-radius: 999px; font-weight: 600; }
.garantias .ico { width: 1.05rem; height: 1.05rem; color: var(--naranja); }

/* La entrada: el titular sube línea a línea y la carretera se dibuja. Un solo momento, al cargar. */
@media (prefers-reduced-motion: no-preference) {
  h1 .linea, .heroe .bajada, .heroe .acciones, .heroe .garantias { animation: subir .8s var(--curva) both; }
  h1 .linea:nth-child(2) { animation-delay: .08s; }
  h1 .linea:nth-child(3) { animation-delay: .18s; }
  .heroe .bajada { animation-delay: .3s; }
  .heroe .acciones { animation-delay: .4s; }
  .heroe .garantias { animation-delay: .5s; }
  .heroe .pizarra { animation: aparecer 1s .2s var(--curva) both; }
  .heroe-carretera .eje { animation: trazar 2.4s .1s var(--curva) both; }
  @keyframes subir { from { opacity: 0; translate: 0 .6em; } }
  @keyframes aparecer { from { opacity: 0; translate: 0 2rem; scale: .98; } }
  @keyframes trazar { from { stroke-dashoffset: 540; opacity: 0; } 20% { opacity: 1; } }
}

/* La pizarra: la agenda del jueves que se reacomoda sola, dentro de una ventana del programa. */
.pizarra { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ventana ventana" "pie movil"; column-gap: 1.5rem; }
.ventana { grid-area: ventana; position: relative; background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px rgb(42 33 28 / .07), var(--sombra-2); overflow: hidden; }
.ventana-barra { display: flex; align-items: center; gap: .6rem; padding: .7rem .95rem; background: var(--asfalto); color: var(--sobre-oscuro); }
.ventana-logo { width: 22px; height: 22px; flex: none; }
.ventana-titulo { font-weight: 780; font-size: .9375rem; color: #fff; }
.pizarra-estado { margin-left: auto; padding: .22rem .7rem .18rem; border-radius: 999px; background: rgb(255 255 255 / .1); color: #ffd9a8; font-size: .8125rem; font-weight: 760; white-space: nowrap; transition: background-color .35s, color .35s; }
.pizarra[data-paso="1"] .pizarra-estado, .pizarra[data-paso="2"] .pizarra-estado { background: #b42318; color: #fff; }
.pizarra[data-paso="3"] .pizarra-estado { background: var(--ambar); color: var(--asfalto); }
.pizarra[data-paso="4"] .pizarra-estado { background: #23753d; color: #fff; }
.ventana-cuerpo { display: grid; gap: .5rem; padding: .95rem 1.1rem 1.25rem; }
.pizarra-dia { font-weight: 840; font-size: 1.125rem; letter-spacing: -0.01em; }
.tablero { display: grid; font-variant-numeric: tabular-nums; }
.fila { display: grid; grid-template-columns: 3.4rem repeat(3, minmax(0, 1fr)); gap: .45rem; align-items: center; min-height: 2.9rem; border-top: 1px dashed var(--linea); }
.fila-cabeza { border-top: 0; min-height: 2.4rem; }
.hora { font-size: .8125rem; font-weight: 700; color: var(--tinta-3); }
.profe { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-weight: 800; font-size: .9375rem; transition: color .35s; }
.pizarra:not([data-paso="0"]) .profe--pedro { color: var(--tinta-3); }
.sello { font-style: normal; font-size: .6875rem; font-weight: 800; padding: .12rem .45rem .08rem; border-radius: 4px; background: #b42318; color: #fff; opacity: 0; scale: .6; transition: opacity .3s, scale .4s var(--curva); }
.clase { display: block; padding: .42rem .55rem .36rem; border-radius: 8px; background: var(--tinte); font-weight: 720; font-size: .8125rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .35s, color .35s, opacity .45s, translate .5s var(--curva), box-shadow .35s; }
.clase--nueva { opacity: 0; translate: 0 8px; background: var(--verde-fondo); color: var(--verde-texto); box-shadow: inset 0 0 0 1.5px var(--verde-texto); }
.pizarra:not([data-paso="0"]) .sello { opacity: 1; scale: 1; }
.pizarra[data-paso="2"] .clase--pedro, .pizarra[data-paso="3"] .clase--pedro { background: repeating-linear-gradient(-45deg, #ffe0a8 0 6px, #ffd38a 6px 12px); color: #6b4300; }
.pizarra[data-paso="4"] .clase--pedro { opacity: .38; text-decoration: line-through; background: transparent; box-shadow: inset 0 0 0 1px var(--linea); }
.pizarra[data-paso="4"] .clase--nueva { opacity: 1; translate: 0 0; }
.pizarra[data-paso="4"] .fila:nth-child(1) .clase--nueva { transition-delay: .9s; }
.pizarra[data-paso="4"] .fila:nth-child(3) .clase--nueva { transition-delay: 1.15s; }
.pizarra[data-paso="4"] .fila:nth-child(4) .clase--nueva { transition-delay: 1.4s; }

/* El móvil del alumno, encima de la agenda. */
.pizarra .movil--heroe { grid-area: movil; width: 15.25rem; margin: -3.1rem -1rem 0 0; rotate: 3deg; z-index: 2; }
.movil--heroe .chat { min-height: 15.5rem; grid-template-rows: auto auto auto; }
.chat--heroe .burbuja { opacity: 0; translate: 0 10px; transition: opacity .4s, translate .5s var(--curva); }
.chat--heroe .escribiendo, .chat--heroe .aviso-1 { grid-area: 1 / 1; }
.pizarra[data-paso="3"] .escribiendo { animation: escribiendo 1.5s both; }
.pizarra[data-paso="3"] .aviso-1 { opacity: 1; translate: 0 0; transition-delay: 1.4s; }
.pizarra[data-paso="4"] .aviso-1, .pizarra[data-paso="4"] .aviso-2, .pizarra[data-paso="4"] .aviso-3 { opacity: 1; translate: 0 0; }
.pizarra[data-paso="4"] .aviso-2 { transition-delay: .15s; }
.pizarra[data-paso="4"] .aviso-3 { transition-delay: 1.6s; }
@keyframes escribiendo { 0% { opacity: 0; translate: 0 10px; } 15%, 80% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
.placa-l { position: absolute; z-index: 3; left: -.9rem; top: -1rem; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 8px; background: var(--azul); color: #fff; font-weight: 900; font-size: 1.8rem; line-height: 1; padding-top: .2rem; box-shadow: inset 0 0 0 2px var(--azul), inset 0 0 0 4px #fff, 0 10px 20px -10px rgb(23 60 114 / .8); rotate: -10deg; }
.pizarra figcaption { grid-area: pie; align-self: start; display: grid; gap: .4rem; justify-items: start; max-width: 30rem; margin-top: 1.1rem; font-size: .875rem; color: var(--tinta-2); }
@media (max-width: 640px) {
  .pizarra { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ventana" "movil" "pie"; }
  .pizarra .movil--heroe { justify-self: center; margin: -.9rem 0 0; rotate: 0deg; width: min(17rem, 88%); }
  .pizarra figcaption { margin-top: 1rem; }
  .placa-l { left: -.5rem; top: -1.2rem; width: 2.6rem; height: 2.6rem; font-size: 1.5rem; }
  .ventana-titulo { margin-left: 1.4rem; }
  .profe--pedro { flex-wrap: nowrap; }
  .sello { position: absolute; left: 0; top: -.55rem; }
}

/* ---------- El móvil (héroe, secretaria y vista previa) ---------- */
.movil { position: relative; padding: .45rem; background: #18120f; border-radius: 2.1rem; box-shadow: inset 0 0 0 1.5px #3b302a, 0 28px 50px -26px rgb(29 22 18 / .75); }
.movil-estado { display: flex; justify-content: space-between; align-items: center; padding: .25rem 1rem .35rem; color: #f7e3cf; font-size: .6875rem; font-weight: 760; font-variant-numeric: tabular-nums; }
.movil-senal { width: 2.4rem; height: .55rem; background: linear-gradient(90deg, currentColor 0 50%, transparent 50%) 0 100% / .3rem 100% repeat-x; -webkit-mask: linear-gradient(to top right, #000 50%, transparent 51%); mask: linear-gradient(to top right, #000 50%, transparent 51%); opacity: .85; }
.movil-cabeza { display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; background: var(--primario); color: var(--sobre-primario); border-radius: 1.6rem 1.6rem 0 0; transition: background-color .3s, color .3s; }
.movil-estado + .movil-cabeza { border-radius: 0; }
.movil-cabeza p { display: grid; line-height: 1.2; min-width: 0; }
.movil-cabeza strong { font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.movil-cabeza span { font-size: .72rem; opacity: .85; }
.movil-cabeza--oficina { background: var(--asfalto); color: #fff; }
.movil-cabeza--oficina .avatar { background: var(--ambar); color: var(--asfalto); }
.avatar { flex: none; display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--sobre-primario); color: var(--primario); font-weight: 820; font-size: .8125rem; }
/* El fondo del chat: dibujitos de carretera, casi invisibles. */
.chat { list-style: none; margin: 0; padding: .9rem .7rem 1.1rem; display: grid; gap: .5rem; align-content: start; background-color: #f1e7dc; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%232a211c' stroke-opacity='.08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 36 26 18l6 18zM16 36h20M22.5 28h7'/%3E%3Ccircle cx='86' cy='26' r='10'/%3E%3Ccircle cx='86' cy='26' r='3'/%3E%3Cpath d='M86 29v7M77 23l6 2M95 23l-6 2'/%3E%3Cpath d='M26 82h10M44 82h10M62 82h10'/%3E%3Crect x='86' y='74' width='16' height='16' rx='3'/%3E%3Cpath d='M91 78v8h6'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0 0 1.6rem 1.6rem; }
.burbuja { position: relative; max-width: 86%; padding: .5rem .7rem .35rem; border-radius: 12px; font-size: .875rem; line-height: 1.38; box-shadow: 0 1px 0 rgb(42 33 28 / .1); }
.burbuja p { margin: 0; }
.burbuja--asistente { justify-self: start; background: #fff; border-top-left-radius: 4px; border-left: 3px solid var(--primario); }
.burbuja--oficina { justify-self: start; background: #fff; border-top-left-radius: 4px; border-left: 3px solid var(--asfalto); }
.burbuja--alumno { justify-self: end; background: var(--whatsapp-mio); border-top-right-radius: 4px; }
.burbuja time { display: block; text-align: right; font-size: .6875rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.escribiendo { display: inline-flex; gap: .3rem; align-items: center; padding: .7rem .8rem; }
.escribiendo span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--tinta-3); }
@media (prefers-reduced-motion: no-preference) {
  .escribiendo span { animation: punto 1s infinite ease-in-out; }
  .escribiendo span:nth-child(2) { animation-delay: .15s; }
  .escribiendo span:nth-child(3) { animation-delay: .3s; }
  @keyframes punto { 0%, 60%, 100% { translate: 0 0; opacity: .5; } 30% { translate: 0 -4px; opacity: 1; } }
}

/* ---------- La franja de carteles ---------- */
.ruta { position: relative; padding: 1.15rem 0; background: var(--asfalto); overflow: hidden; }
.ruta::before { content: ""; position: absolute; left: 0; right: 0; bottom: 1.5rem; height: 4px; background: repeating-linear-gradient(90deg, rgb(255 244 228 / .55) 0 36px, transparent 36px 64px); }
.ruta::after { content: ""; position: absolute; left: 0; right: 0; bottom: .35rem; height: 2px; background: rgb(255 244 228 / .35); }
.ruta-calzada { position: relative; display: flex; width: max-content; }
.ruta { padding-bottom: 3.2rem; }
.ruta-ventana { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ruta-senales { display: flex; gap: 1.6rem; padding-inline: .8rem; list-style: none; margin: 0; }
.cartel { display: inline-flex; align-items: center; gap: .6rem; padding: .62rem 1.05rem .55rem .85rem; border-radius: 8px; background: var(--azul); color: #fff; font-weight: 740; font-size: .9375rem; white-space: nowrap; box-shadow: inset 0 0 0 3px var(--azul), inset 0 0 0 5px #fff, 0 10px 18px -12px rgb(0 0 0 / .8); }
.cartel .ico { width: 1.3rem; height: 1.3rem; }
.cartel--ambar { background: var(--ambar); color: var(--asfalto); box-shadow: inset 0 0 0 3px var(--ambar), inset 0 0 0 5px var(--asfalto), 0 10px 18px -12px rgb(0 0 0 / .8); }
.cartel--blanco { background: #fff; color: var(--asfalto); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--asfalto), 0 10px 18px -12px rgb(0 0 0 / .8); }
.ruta .pausa { position: absolute; right: var(--margen); bottom: .6rem; z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .ruta-senales { animation: pasar 70s linear infinite; }
  .ruta-calzada:hover .ruta-senales, .ruta[data-pausa] .ruta-senales { animation-play-state: paused; }
  @keyframes pasar { to { translate: -100% 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .ruta-calzada { width: auto; }
  .ruta-ventana { overflow-x: auto; -webkit-mask: none; mask: none; }
  .ruta { padding-bottom: 2.4rem; }
  .ruta-copia, .ruta .pausa { display: none; }
}

/* ---------- La vitrina del programa: las pantallas pasan solas ---------- */
.programa .seccion-cabeza { max-width: 48rem; }
.vitrina { position: relative; display: grid; gap: 1.25rem; }
@media (min-width: 980px) { .vitrina { grid-template-columns: 17.5rem minmax(0, 1fr); gap: 2rem; align-items: start; } }
.vitrina-pestanas { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem .1rem .6rem; scroll-snap-type: x proximity; scrollbar-width: none; }
.vitrina-pestanas::-webkit-scrollbar { display: none; }
@media (min-width: 980px) { .vitrina-pestanas { flex-direction: column; overflow: visible; padding: 0; } }
.vitrina-pestanas [role="tab"] { position: relative; flex: none; display: flex; align-items: center; gap: .65rem; min-height: 48px; padding: .6rem .9rem; border: 1px solid var(--linea); border-radius: 12px; background: #fff; color: var(--tinta-2); font-weight: 720; font-size: .9375rem; text-align: left; cursor: pointer; scroll-snap-align: start; overflow: hidden; transition: background-color .2s, color .2s, border-color .2s, box-shadow .25s; }
.vitrina-pestanas [role="tab"] .ico { color: var(--tinta-3); transition: color .2s; }
.vitrina-pestanas [role="tab"]:hover { border-color: var(--borde-campo); color: var(--tinta); }
.vitrina-pestanas [role="tab"][aria-selected="true"] { border-color: var(--carbon); background: var(--carbon); color: #fff; box-shadow: var(--sombra-1); }
.vitrina-pestanas [role="tab"][aria-selected="true"] .ico { color: var(--ambar-claro); }
/* Cuánto falta para la pantalla siguiente: una línea de carretera que se completa. */
.vitrina-pestanas [role="tab"]::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 6px; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--ambar) 0 12px, transparent 12px 18px); scale: 0 1; transform-origin: left; }
.vitrina[data-auto="si"] [role="tab"][aria-selected="true"]::after { animation: llenar var(--paso, 7s) linear both; }
.vitrina[data-auto="pausa"] [role="tab"][aria-selected="true"]::after { animation: llenar var(--paso, 7s) linear both paused; }
@keyframes llenar { to { scale: 1 1; } }
.vitrina-paneles { min-width: 0; }
.vitrina-panel { display: grid; gap: 1rem; }
.vitrina-texto { max-width: 62ch; color: var(--tinta-2); font-size: 1.0625rem; }
@media (prefers-reduced-motion: no-preference) {
  .vitrina-panel:not([hidden]) .pantalla { animation: pantalla .55s var(--curva) both; }
  .vitrina-panel:not([hidden]) .vitrina-texto { animation: subir .5s .1s var(--curva) both; }
  @keyframes pantalla { from { opacity: 0; translate: 1.5rem 0; scale: .985; } }
}
.vitrina .pausa { justify-self: start; }
@media (min-width: 980px) { .vitrina .pausa { grid-column: 1; grid-row: 2; } }

/* La pantalla de ejemplo: una ventana del panel, con datos inventados. */
.pantalla { --m-texto: .8125rem; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgb(42 33 28 / .08), var(--sombra-2); overflow: hidden; font-size: var(--m-texto); }
.pantalla-barra { display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem; border-bottom: 1px solid var(--linea); background: var(--papel); }
.pantalla-barra i { width: 1.4rem; height: 1.4rem; border-radius: 6px; background: var(--asfalto); box-shadow: inset 0 0 0 5px var(--asfalto), inset 0 0 0 7px var(--naranja-vivo); }
.pantalla-barra b { font-weight: 800; font-size: .875rem; }
.m-consumo { margin-left: auto; padding: .2rem .6rem; border-radius: 999px; background: var(--tinte); color: var(--tinta-2); font-weight: 700; font-size: .75rem; white-space: nowrap; }
@media (max-width: 520px) { .m-consumo { display: none; } }
.pantalla-cuerpo { display: grid; gap: .85rem; align-content: start; min-height: 20rem; padding: 1rem; }
.m-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.m-cabeza > b { font-size: 1rem; font-weight: 820; margin-right: auto; }
.m-chip { padding: .2rem .65rem; border: 1px solid var(--linea); border-radius: 999px; color: var(--tinta-2); font-weight: 700; font-size: .75rem; }
.m-chip--activo { background: var(--asfalto); border-color: var(--asfalto); color: #fff; }
.m-buscar { flex: 1 1 10rem; padding: .45rem .7rem; border: 1px solid var(--borde-campo); border-radius: 8px; color: var(--tinta-3); }
.m-agenda { display: grid; grid-template-columns: 3rem repeat(3, minmax(0, 1fr)); gap: .4rem; align-items: center; font-variant-numeric: tabular-nums; }
.m-agenda > span { color: var(--tinta-3); font-weight: 700; font-size: .75rem; }
.m-agenda > b { font-weight: 800; }
.m-agenda > i { font-style: normal; min-height: 2.1rem; }
.m-clase { display: flex; align-items: center; padding: .35rem .5rem; border-radius: 7px; background: var(--tinte); font-weight: 720; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--naranja); }
.m-clase--b { background: #e4ecf8; border-left-color: var(--azul); }
.m-clase--c { background: var(--verde-fondo); border-left-color: var(--verde-texto); }
.m-clase--rayas { background: repeating-linear-gradient(-45deg, #ffe0a8 0 6px, #ffd38a 6px 12px); border-left-color: #b45309; color: #6b4300; }
.m-hueco { display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--borde-campo); border-radius: 7px; color: var(--tinta-3); font-weight: 700; }
.m-lista { list-style: none; padding: 0; display: grid; }
.m-lista li { display: flex; align-items: center; gap: .65rem; padding: .6rem .2rem; border-top: 1px solid var(--linea-2); }
.m-lista li:first-child { border-top: 0; }
.m-lista li > b { font-weight: 760; }
.m-lista li > :last-child { margin-left: auto; }
.m-avatar { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--tinte); color: var(--naranja-oscuro); font-weight: 800; font-size: .72rem; }
.m-avatar--b { background: #e4ecf8; color: var(--azul-oscuro); }
.m-avatar--c { background: var(--verde-fondo); color: var(--verde-texto); }
.m-etiqueta { padding: .1rem .45rem; border-radius: 5px; background: var(--papel); border: 1px solid var(--linea); font-weight: 760; font-size: .72rem; color: var(--tinta-2); }
.m-etiqueta--web { background: #e4ecf8; border-color: #c9d7ee; color: var(--azul-oscuro); }
.m-dato { color: var(--tinta-2); }
.m-aviso, .m-bien { padding: .15rem .55rem; border-radius: 999px; font-weight: 760; font-size: .72rem; white-space: nowrap; }
.m-aviso { background: #fff4d9; color: #7a5100; }
.m-bien { background: var(--verde-fondo); color: var(--verde-texto); }
.m-boton { display: inline-flex; align-items: center; justify-content: center; padding: .45rem .9rem; border-radius: 8px; background: var(--naranja); color: #fff; font-weight: 760; }
.m-boton--chico { padding: .25rem .65rem; font-size: .75rem; }
.m-insignia { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--naranja); color: #fff; font-style: normal; font-weight: 800; font-size: .7rem; }
.m-wa { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0; padding: 0; }
.m-chats { list-style: none; padding: .4rem; margin: 0; border-right: 1px solid var(--linea); }
.m-chat { display: flex; align-items: center; gap: .55rem; padding: .55rem .5rem; border-radius: 10px; }
.m-chat > span:nth-child(2) { display: grid; min-width: 0; line-height: 1.25; }
.m-chat small { color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-chat .m-insignia { margin-left: auto; }
.m-chat--activo { background: var(--tinte); }
.m-conversacion { display: grid; align-content: start; gap: .45rem; padding: .9rem; background: #f1e7dc; }
.m-burbuja { justify-self: end; max-width: 80%; padding: .45rem .65rem; border-radius: 10px; border-top-right-radius: 3px; background: var(--whatsapp-mio); }
.m-burbuja--bot { justify-self: start; background: #fff; border-radius: 10px; border-top-left-radius: 3px; border-left: 3px solid var(--naranja); }
.m-atender { justify-self: center; margin-top: .4rem; padding: .3rem .8rem; border-radius: 999px; background: var(--asfalto); color: #fff; font-weight: 760; font-size: .75rem; }
@media (max-width: 560px) { .m-wa { grid-template-columns: 1fr; } .m-chats { border-right: 0; border-bottom: 1px solid var(--linea); } .m-chat:nth-child(n+3) { display: none; } }
.m-barras { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 3rem; gap: .65rem; align-items: center; }
.m-barras > span { font-weight: 720; }
.m-barras > i { height: .85rem; border-radius: 999px; background: linear-gradient(90deg, var(--naranja) var(--v), var(--linea-2) var(--v)); }
.m-barras > b { font-variant-numeric: tabular-nums; }
/* Sin estilos en línea (la política de seguridad del panel los bloquea): cada barra, su valor. */
.m-barras > i:nth-of-type(1) { --v: 82%; }
.m-barras > i:nth-of-type(2) { --v: 74%; }
.m-barras > i:nth-of-type(3) { --v: 68%; }
.m-vence { list-style: none; padding: 0; display: grid; gap: .45rem; }
.m-vence li { display: flex; align-items: center; gap: .6rem; }
.m-dos { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .m-dos { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.m-recibo { display: grid; gap: .5rem; padding: 1rem; border: 1px solid var(--linea); border-radius: 12px; background: repeating-linear-gradient(0deg, #fff 0 27px, #fbf5ee 27px 28px); }
.m-recibo p { display: flex; justify-content: space-between; gap: 1rem; }
.m-recibo-cabeza { padding-bottom: .4rem; border-bottom: 2px solid var(--asfalto); }
.m-recibo-cabeza b { font-size: .95rem; }
.m-recibo-total { padding-top: .45rem; border-top: 1px dashed var(--borde-campo); font-size: .95rem; }
.m-recibo .m-boton { justify-self: start; margin-top: .3rem; }
.m-saldo { display: grid; justify-items: center; gap: .2rem; padding: 1.25rem 1rem; border-radius: 12px; background: var(--verde-fondo); color: var(--verde-texto); text-align: center; font-weight: 700; }
.m-saldo b { font-size: 2.6rem; line-height: 1; font-weight: 880; }
.m-coches { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.m-coche { display: grid; gap: .35rem; justify-items: start; padding: .9rem; border: 1px solid var(--linea); border-radius: 12px; }
.m-coche .ico { width: 1.8rem; height: 1.8rem; color: var(--naranja); }
.m-coche b { font-size: .95rem; }
.m-coche small { padding: .05rem .4rem; border: 1.5px solid var(--asfalto); border-radius: 4px; font-weight: 800; font-size: .72rem; letter-spacing: .04em; }
.m-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .6rem; }
.m-kpis p { display: grid; padding: .7rem .8rem; border-radius: 10px; background: var(--papel); border: 1px solid var(--linea-2); }
.m-kpis b { font-size: 1.6rem; line-height: 1.05; font-weight: 860; font-variant-numeric: tabular-nums; }
.m-kpis span { color: var(--tinta-2); }
.m-columnas { display: flex; align-items: end; gap: .45rem; height: 7rem; padding: .5rem .25rem 0; border-bottom: 2px solid var(--linea); }
.m-columnas i:nth-child(1) { --v: 46%; } .m-columnas i:nth-child(2) { --v: 58%; } .m-columnas i:nth-child(3) { --v: 52%; } .m-columnas i:nth-child(4) { --v: 71%; } .m-columnas i:nth-child(5) { --v: 64%; }
.m-columnas i:nth-child(6) { --v: 80%; } .m-columnas i:nth-child(7) { --v: 76%; } .m-columnas i:nth-child(8) { --v: 88%; } .m-columnas i:nth-child(9) { --v: 70%; } .m-columnas i:nth-child(10) { --v: 93%; }
.m-columnas i { flex: 1; height: var(--v); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--ambar), var(--naranja)); }
@media (prefers-reduced-motion: no-preference) {
  .vitrina-panel:not([hidden]) .m-columnas i, .vitrina-panel:not([hidden]) .m-barras i { animation: crecer .9s .25s var(--curva) both; }
  .vitrina-panel:not([hidden]) .m-columnas i { transform-origin: bottom; }
  .vitrina-panel:not([hidden]) .m-barras i { transform-origin: left; animation-name: crecer-x; }
  @keyframes crecer { from { scale: 1 0; } }
  @keyframes crecer-x { from { scale: 0 1; } }
}
.m-avisos { border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.m-avisos-titulo { display: flex; align-items: center; gap: .5rem; padding: .65rem .8rem; background: var(--asfalto); color: #fff; }
.m-avisos-titulo .ico { width: 1.1rem; height: 1.1rem; color: var(--ambar-claro); }
.m-avisos ul { list-style: none; padding: .4rem .8rem; margin: 0; display: grid; }
.m-avisos li { display: flex; gap: .55rem; align-items: baseline; padding: .5rem 0; border-top: 1px solid var(--linea-2); }
.m-avisos li:first-child { border-top: 0; }
.m-punto { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--rojo-senal); translate: 0 -.05rem; }
.m-punto--ambar { background: var(--ambar); }
.m-punto--verde { background: #2f8f4e; }
.m-equipo { list-style: none; padding: 0; display: grid; gap: .5rem; }
.m-equipo li { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border: 1px solid var(--linea); border-radius: 12px; }
.m-equipo li span:last-child { margin-left: auto; color: var(--tinta-3); font-weight: 700; }

/* ---------- Cómo funciona: el viaje por la carretera ---------- */
.como .seccion-cabeza { max-width: 46rem; }
.viaje { display: grid; gap: 1.5rem; }
.viaje-mapa { display: none; width: 100%; height: auto; overflow: visible; }
.viaje-arcen { fill: none; stroke: #f1e3d4; stroke-width: 74; stroke-linecap: round; }
.viaje-calzada { fill: none; stroke: var(--asfalto); stroke-width: 58; stroke-linecap: round; }
.viaje-eje { fill: none; stroke: #fff4e4; stroke-width: 3; stroke-dasharray: 16 14; }
.hito rect { fill: #fff; stroke: #d4c0ad; stroke-width: 1.5; }
.hito .hito-cabeza { fill: var(--naranja); stroke: none; }
.hito text { fill: var(--asfalto); font: 860 17px var(--fuente); text-anchor: middle; }
.coche-sombra { fill: rgb(0 0 0 / .28); }
.coche-carroceria { fill: var(--naranja-vivo); stroke: #9a3412; stroke-width: 1.5; }
.coche-cristal { fill: #2a211c; opacity: .82; }
.coche-l { fill: var(--azul); stroke: #fff; stroke-width: 1.2; }
.coche-l-letra { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carretera { list-style: none; padding: 0; display: grid; gap: 1.6rem; position: relative; counter-reset: paso; }
.carretera::before { content: ""; position: absolute; left: 1.35rem; top: .5rem; bottom: .5rem; width: 2.6rem; translate: -50% 0; background: var(--asfalto); border-radius: 1.3rem; }
.carretera::after { content: ""; position: absolute; left: 1.35rem; top: 1rem; bottom: 1rem; border-left: 3px dashed #fff4e4; translate: -50% 0; }
.carretera li { position: relative; z-index: 1; display: grid; gap: .35rem; padding-left: 3.75rem; counter-increment: paso; }
.carretera li::before { content: counter(paso); position: absolute; left: 1.35rem; top: -.15rem; translate: -50% 0; display: grid; place-items: center; width: 2.1rem; height: 2.5rem; padding-top: .45rem; border-radius: 1.05rem 1.05rem .4rem .4rem; background: linear-gradient(var(--naranja) 0 .55rem, #fff .55rem); box-shadow: 0 0 0 1.5px #d4c0ad; color: var(--asfalto); font-weight: 860; font-size: .95rem; }
.carretera p { color: var(--tinta-2); }
@media (min-width: 900px) {
  .viaje-mapa { display: block; }
  .carretera { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; text-align: center; }
  .carretera::before, .carretera::after { display: none; }
  .carretera li { padding-left: 0; justify-items: center; }
  .carretera li::before { display: none; }
  .carretera p { max-width: 24ch; }
}

/* ---------- Dos números, dos móviles ---------- */
.dos-moviles { display: grid; gap: 1.5rem; }
@media (min-width: 820px) { .dos-moviles { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.numero { display: grid; align-content: start; gap: .6rem; padding: 1.5rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: 20px; }
.numero > p { color: var(--tinta-2); }
.numero--asistente { box-shadow: inset 0 0 0 2px var(--carbon); border-color: var(--carbon); }
.movil--chico { width: min(100%, 19rem); justify-self: center; margin-bottom: 1rem; }
.movil--chico .chat { min-height: 13.5rem; }

/* ---------- Personalización ---------- */
.personaliza { gap: 2.75rem; }
@media (min-width: 1000px) { .personaliza { grid-template-columns: 1fr 1fr; align-items: start; } }
.personaliza-texto { display: grid; gap: 1.25rem; }
.configurador { display: grid; gap: 1.35rem; padding: 1.4rem; background: var(--papel); border: 1px solid var(--linea); border-radius: 20px; }
.campo { display: grid; gap: .35rem; }
.campo label, legend { font-weight: 760; font-size: .9375rem; }
.campo input { min-height: 50px; padding: .6rem .85rem; border: 1px solid var(--borde-campo); border-radius: 10px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.campo input:focus-visible { outline: none; border-color: var(--naranja-oscuro); box-shadow: 0 0 0 4px rgb(194 65 12 / .2); }
fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: .5rem; min-width: 0; }
.muestras { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.muestra-color { position: relative; display: inline-grid; cursor: pointer; }
.muestra-color input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pastilla { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--borde-campo); transition: scale .2s var(--curva), box-shadow .2s; }
.muestra-color:hover .pastilla { scale: 1.08; }
.muestra-color input:checked + .pastilla { box-shadow: 0 0 0 3px var(--carbon); scale: 1.08; }
.muestra-color input:focus-visible + .pastilla { outline: 3px solid var(--naranja-oscuro); outline-offset: 3px; }
.pastilla--1 { background: #c2410c; }
.pastilla--2 { background: #b91c1c; }
.pastilla--3 { background: #e8a317; }
.pastilla--4 { background: #15803d; }
.pastilla--5 { background: #1d4ed8; }
.pastilla--6 { background: #7e22ce; }
.color-libre { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .7rem 0 .3rem; border: 1px solid var(--borde-campo); border-radius: 999px; background: #fff; font-weight: 700; font-size: .875rem; cursor: pointer; }
.color-libre input { width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.opciones-fila { display: flex; flex-wrap: wrap; gap: .5rem; }
.opciones-fila legend { flex-basis: 100%; margin-bottom: .25rem; }
/* Las opciones, como pastillas: se ve de un vistazo cuál está elegida. */
.opciones-fila label { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .35rem .95rem .35rem .75rem; border: 1px solid var(--borde-campo); border-radius: 999px; background: #fff; font-weight: 650; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.opciones-fila label:hover { border-color: var(--carbon); }
.opciones-fila label:has(input:checked) { background: var(--carbon); border-color: var(--carbon); color: #fff; }
.opciones-fila input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--ambar); }
.vista-previa { display: grid; gap: 1.1rem; justify-items: center; }
@media (min-width: 1000px) { .vista-previa { position: sticky; top: 6rem; } }
.movil--grande { width: min(100%, 21.5rem); }
.movil--grande .chat { min-height: 23rem; }
@media (prefers-reduced-motion: no-preference) {
  #chat-ejemplo .burbuja { animation: subir .45s var(--curva) both; }
  #chat-ejemplo .burbuja:nth-child(2) { animation-delay: .12s; }
  #chat-ejemplo .burbuja:nth-child(3) { animation-delay: .24s; }
  #chat-ejemplo .burbuja:nth-child(4) { animation-delay: .36s; }
}
.panel-mini { width: min(100%, 26rem); display: grid; gap: .75rem; padding: 1rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); border-top: 5px solid var(--primario); box-shadow: var(--sombra-1); transition: border-color .3s; }
.panel-mini-marca { display: flex; align-items: center; gap: .65rem; }
.panel-mini-marca > span:last-child { display: grid; line-height: 1.25; min-width: 0; }
.panel-mini-marca small { font-size: .8125rem; color: var(--tinta-2); }
.avatar--cuadrado { border-radius: 10px; background: var(--primario); color: var(--sobre-primario); transition: background-color .3s, color .3s; }
.panel-mini-boton { display: flex; align-items: center; gap: 1rem; }
.boton-falso { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .9rem; border-radius: 8px; background: var(--primario); color: var(--sobre-primario); font-weight: 760; font-size: .875rem; transition: background-color .3s, color .3s; }
.enlace-falso { color: var(--primario-oscuro); font-weight: 700; font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Lo que hace (sección oscura, con la calzada de fondo) ---------- */
.que-hace { overflow: hidden; isolation: isolate; background: radial-gradient(40rem 26rem at 100% 0%, rgb(245 165 36 / .14), transparent 70%), var(--carbon); }
.que-hace::before { content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; top: 50%; height: 6px; rotate: -4deg; background: repeating-linear-gradient(90deg, rgb(255 244 228 / .07) 0 60px, transparent 60px 110px); }
.lista-hace { list-style: none; padding: 0; display: grid; gap: 1.75rem 3rem; }
@media (min-width: 760px) { .lista-hace { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .lista-hace { grid-template-columns: repeat(3, 1fr); } }
.lista-hace li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.lista-hace .ico { width: 2.75rem; height: 2.75rem; padding: .62rem; border-radius: 12px; background: rgb(245 165 36 / .12); color: var(--ambar-claro); box-shadow: inset 0 0 0 1px rgb(245 165 36 / .35); }
.lista-hace strong { display: block; margin-bottom: .25rem; color: #fff; font-size: 1.125rem; }

/* ---------- El día a día: tarjetas con señales ---------- */
.dia-a-dia { display: grid; gap: 1rem; }
@media (min-width: 760px) { .dia-a-dia { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .dia-a-dia { grid-template-columns: repeat(3, 1fr); } .novedad--grande { grid-column: span 2; grid-row: span 2; } }
.novedad { display: grid; align-content: start; gap: .65rem; padding: 1.4rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; transition: border-color .25s, box-shadow .3s, translate .3s var(--curva); }
.novedad:hover { border-color: #dbc5b0; box-shadow: var(--sombra-1); }
.novedad h3 { font-size: 1.15rem; }
.novedad p { color: var(--tinta-2); }
.novedad .mini-movil p { color: var(--tinta); }
.novedad--grande { gap: 1.25rem; align-content: center; background: linear-gradient(160deg, #fff 0 55%, #fff1e3 100%); border-top: 4px solid var(--naranja); }
@media (min-width: 760px) { .novedad--grande { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.senal-ico { width: 48px; height: 44px; overflow: visible; }
.senal-ico use { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.senal-ico--peligro .forma { fill: #fff; stroke: var(--rojo-senal); stroke-width: 4.5; stroke-linejoin: round; }
.senal-ico--peligro use { stroke: var(--asfalto); }
.senal-ico--info .forma, .senal-ico--obligacion .forma { fill: var(--azul); }
.senal-ico--info use, .senal-ico--obligacion use { stroke: #fff; }
.senal-ico--info, .senal-ico--obligacion { width: 44px; }
.mini-movil { justify-self: center; width: min(100%, 18.5rem); padding: 1rem; border: 8px solid #18120f; border-radius: 28px; background: var(--papel); display: grid; gap: .45rem; box-shadow: 0 24px 40px -26px rgb(29 22 18 / .7); rotate: 2deg; }
.mini-movil p { color: var(--tinta); font-size: .9rem; }
.mini-titulo { font-weight: 820; font-size: 1.05rem !important; border-bottom: 3px solid var(--naranja); padding-bottom: .3rem; }
.mini-dia { display: flex; justify-content: space-between; align-items: center; font-weight: 720; }
.mini-boton { padding: .2rem .6rem; border-radius: 6px; background: #b42318; color: #fff; font-size: .8rem; font-weight: 760; }
.mini-clase { padding: .4rem .55rem; border-radius: 8px; background: #fff; border-left: 3px solid var(--naranja); }
.mini-clase b { margin-right: .4rem; font-variant-numeric: tabular-nums; }

/* ---------- Consumo: el cuadro de mandos ---------- */
.consumo-texto { display: grid; gap: 1.25rem; }
.cuadro { --valor: 71; display: grid; justify-items: center; gap: .5rem; padding: 1.75rem 1.5rem 1.5rem; border-radius: 26px; background: radial-gradient(24rem 14rem at 50% 0%, #3d2f27, var(--noche)); color: var(--sobre-oscuro); box-shadow: inset 0 0 0 1px #3b302a, var(--sombra-2); text-align: center; }
.reloj { width: min(100%, 21rem); overflow: visible; }
.reloj-pista { fill: none; stroke: #3d312a; stroke-width: 18; stroke-linecap: round; }
.reloj-valor { fill: none; stroke: url(#g-reloj); stroke-width: 18; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--valor)); }
.reloj-marcas path { stroke: #8a7464; stroke-width: 3; stroke-linecap: round; }
.reloj-aguja { transform-origin: 130px 140px; rotate: calc(-90deg + var(--valor) * 1.8deg); }
.reloj-aguja path { stroke: #fff4e4; stroke-width: 4; stroke-linecap: round; }
.reloj-aguja circle { fill: var(--ambar); stroke: var(--noche); stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  .reloj-valor { transition: stroke-dashoffset 1.8s var(--curva); }
  .reloj-aguja { transition: rotate 1.8s var(--curva); }
}
.cuadro figcaption { display: grid; gap: .45rem; justify-items: center; }
.consumo-linea { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .25rem .6rem; font-size: 1.0625rem; }
.consumo-linea strong { font-size: 2.6rem; line-height: 1; font-weight: 880; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.consumo-partes { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.25rem; font-weight: 700; }
.consumo-partes span { display: inline-flex; align-items: center; gap: .4rem; }
.punto { width: .65rem; height: .65rem; border-radius: 50%; }
.punto--ia { background: var(--naranja-vivo); }
.punto--wa { background: #34c38f; }
.consumo-prevision { padding: .25rem .8rem; border-radius: 999px; background: rgb(255 255 255 / .08); font-size: .9375rem; }
.cuadro .pie-ejemplo { color: #c9b3a1; }
.lista-check { list-style: none; padding: 0; display: grid; gap: .65rem; }
.lista-check li { position: relative; padding-left: 1.75rem; }
.lista-check li::before { content: ""; position: absolute; left: .15rem; top: .45em; width: .9rem; height: .5rem; border-left: 3px solid var(--naranja); border-bottom: 3px solid var(--naranja); rotate: -45deg; }

/* ---------- Conexión ---------- */
.conexiones { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .conexiones { grid-template-columns: 1fr 1fr; } }
.conexion { display: grid; gap: .9rem; align-content: start; padding: 1.6rem; background: #fff; border: 1px solid var(--linea); border-radius: 20px; }
.conexion-ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 16px; background: var(--azul); color: #fff; box-shadow: inset 0 0 0 3px var(--azul), inset 0 0 0 5px #fff; }
.conexion-ico .ico { width: 1.9rem; height: 1.9rem; }
.conexion-ico--qr { background: var(--asfalto); box-shadow: inset 0 0 0 3px var(--asfalto), inset 0 0 0 5px var(--ambar); color: var(--ambar-claro); }

/* ---------- Datos ---------- */
.lista-datos { list-style: none; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 760px) { .lista-datos { grid-template-columns: 1fr 1fr; gap: 1.1rem 2.5rem; } }
@media (min-width: 1100px) { .lista-datos { grid-template-columns: repeat(3, 1fr); } }
.lista-datos li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; padding: 1.1rem; border-radius: 16px; background: var(--papel); border: 1px solid var(--linea-2); }
.lista-datos .ico { width: 2.5rem; height: 2.5rem; padding: .55rem; border-radius: 12px; background: #fff; color: var(--naranja); box-shadow: inset 0 0 0 1px var(--linea); }
.lista-datos p { color: var(--tinta-2); }
.lista-datos strong { color: var(--tinta); }

/* ---------- Precios ---------- */
.calculadora { display: grid; gap: 1.5rem; }
.planes { display: grid; gap: .9rem; }
.planes legend { margin-bottom: .35rem; }
@media (min-width: 900px) { .planes { grid-template-columns: repeat(3, 1fr); } .planes legend { grid-column: 1 / -1; } }
.plan { position: relative; display: grid; gap: .4rem; align-content: start; padding: 1.3rem 1.3rem 1.4rem 3.1rem; background: #fff; border: 2px solid var(--linea); border-radius: 18px; cursor: pointer; transition: border-color .2s, box-shadow .3s, translate .3s var(--curva), background-color .2s; }
.plan:hover { border-color: #d3b9a2; }
.plan input { position: absolute; left: 1.1rem; top: 1.45rem; width: 1.2rem; height: 1.2rem; margin: 0; }
.plan:has(input:checked) { border-color: var(--naranja); background: #fffaf5; box-shadow: 0 18px 34px -22px rgb(194 65 12 / .65); }
@media (prefers-reduced-motion: no-preference) { .plan:has(input:checked) { translate: 0 -3px; } }
.plan-nombre { font-weight: 840; font-size: 1.25rem; }
.plan-texto { color: var(--tinta-2); font-size: .9375rem; }
.plan-precio { font-weight: 780; color: var(--naranja-oscuro); }
.total { position: relative; overflow: hidden; display: grid; gap: 1rem; padding: 1.5rem 1.6rem; background: var(--carbon); color: var(--sobre-oscuro); border-radius: 20px; }
.total::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--ambar) 0 28px, transparent 28px 46px); opacity: .8; }
@media (min-width: 760px) { .total { grid-template-columns: auto auto 1fr; align-items: center; gap: 1rem 2.75rem; } }
.total-cifra { display: grid; }
.total-cifra span { font-size: .875rem; font-weight: 700; }
.total-cifra strong { font-size: 2.6rem; line-height: 1.05; font-weight: 880; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.total-nota { font-size: .9375rem; }

/* ---------- Preguntas ---------- */
.preguntas { display: grid; gap: .6rem; max-width: 54rem; }
.preguntas details { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; transition: border-color .2s, background-color .2s; }
.preguntas details[open] { background: #fff; border-color: #d9c2ad; }
.preguntas summary { display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 58px; padding: .8rem 1.15rem; font-weight: 760; cursor: pointer; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: linear-gradient(var(--naranja), var(--naranja)) center / .8rem 2.5px no-repeat, linear-gradient(var(--naranja), var(--naranja)) center / 2.5px .8rem no-repeat, #fff; box-shadow: inset 0 0 0 1px var(--linea); transition: rotate .3s var(--curva), background-size .3s; }
.preguntas details[open] summary::after { rotate: 180deg; background-size: .8rem 2.5px, 2.5px 0, auto; }
.preguntas details p { padding: 0 1.15rem 1.15rem; color: var(--tinta-2); max-width: 65ch; }
@media (prefers-reduced-motion: no-preference) {
  .preguntas details::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--curva), content-visibility .35s allow-discrete; }
  .preguntas details[open]::details-content { block-size: auto; }
}

/* ---------- Contacto: la carretera al atardecer ---------- */
.contacto { padding-top: clamp(3.5rem, 7vw, 5.5rem); min-height: clamp(30rem, 70vh, 40rem); overflow: hidden; isolation: isolate; align-content: start; justify-items: center; text-align: center; background: var(--noche); color: var(--sobre-oscuro); }
.contacto h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.contacto .entrada { color: var(--sobre-oscuro); margin-inline: auto; }
.contacto-texto { display: grid; gap: 1.25rem; justify-items: center; }
.contacto .acciones { justify-content: center; }
.sin-contacto { padding: .55rem 1.1rem; border-radius: 999px; background: rgb(29 22 18 / .78); color: var(--sobre-oscuro); box-shadow: inset 0 0 0 1px rgb(247 227 207 / .25); }
.contacto .boton-claro { background: rgb(29 22 18 / .7); }
.contacto .boton-claro:hover { background: var(--sobre-oscuro); }
.horizonte { position: absolute; inset: 0; z-index: -1; }
.cielo { position: absolute; inset: 0 0 38% 0; background: linear-gradient(180deg, var(--noche) 0%, #2a1c15 38%, #6a2f16 70%, #c25a17 90%, #f5a524 100%); }
.sol { position: absolute; left: 50%; bottom: -7rem; width: 15rem; height: 15rem; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, #ffe3a8 0 30%, #f9b343 45%, rgb(245 165 36 / 0) 70%); }
.suelo { position: absolute; inset: 62% 0 0 0; background: linear-gradient(180deg, #1a1310, #241b16); perspective: 20rem; perspective-origin: 50% 0; overflow: hidden; }
.calzada-lejos { position: absolute; left: 50%; top: 0; width: min(46rem, 92vw); height: 260%; translate: -50% 0; transform-origin: 50% 0; transform: rotateX(72deg); background: linear-gradient(90deg, #f1e3d4 0 1.2%, #3a2e27 1.2% 98.8%, #f1e3d4 98.8%); }
.marcas { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.6%; translate: -50% 0; background: repeating-linear-gradient(180deg, #ffd38a 0 70px, transparent 70px 140px); }
@media (prefers-reduced-motion: no-preference) {
  .contacto.en-camino .marcas { animation: venir 1.1s linear 6; }
  @keyframes venir { to { background-position: 0 140px; } }
}

/* ---------- Pie ---------- */
.pie { position: relative; display: grid; gap: .75rem 2rem; padding: 2rem var(--margen) 2.25rem; font-size: .9375rem; color: #c9b3a1; background: var(--noche); border-top: 1px solid #33271f; }
.pie::before { content: ""; position: absolute; left: var(--margen); right: var(--margen); top: -1px; height: 3px; background: repeating-linear-gradient(90deg, rgb(245 165 36 / .6) 0 26px, transparent 26px 44px); }
@media (min-width: 900px) { .pie { grid-template-columns: auto 1fr auto; align-items: center; } }
.logo--claro { margin: 0; color: #fff; }
.pie a { color: var(--sobre-oscuro); }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01s !important; }
}
@media (forced-colors: active) {
  .clase, .boton, .plan, .numero, .conexion, .cartel, .pantalla, .ventana { border: 1px solid CanvasText; }
}

/* ---------- Aviso legal y privacidad ---------- */
main.legal { max-width: 46rem; margin-inline: auto; padding: 2rem 1rem 3rem; }
.legal h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); margin-bottom: .5rem; }
.legal h2 { font-size: 1.25rem; margin: 1.75rem 0 .5rem; }
.legal p, .legal li { color: var(--tinta-2); line-height: 1.6; }
.legal ul { padding-left: 1.25rem; display: grid; gap: .375rem; }
.legal .pendiente { background: #fff4d9; color: #7a5100; padding: 0 .25rem; border-radius: 4px; font-weight: 700; }
.legal-volver { display: inline-block; margin-bottom: 1.5rem; }

/* === Diseño Corporativo B2B Sin Scrollbar en Navegación + Dock Ejecutivo === */
.nav-corp {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem clamp(1rem, 3vw, 2.5rem);
  background: rgb(255 252 248 / .95);
  -webkit-backdrop-filter: saturate(1.8) blur(16px);
  backdrop-filter: saturate(1.8) blur(16px);
  border-bottom: 1px solid #e4d4c3;
}
.nav-corp-enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .15rem .35rem;
}
.nav-corp-link {
  position: relative;
  padding: .45rem .75rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #5e4b40;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s, background-color .18s;
}
.nav-corp-link:hover {
  color: #2a211c;
  background: rgb(42 33 28 / .05);
}
.nav-corp-link[aria-current="page"] {
  color: #2a211c;
  font-weight: 820;
}
.nav-corp-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: 2px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--primario, #c2410c);
}
.nav-corp-acciones {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.selector-idioma-web {
  min-height: 36px;
  padding: .25rem .65rem;
  border: 1px solid #d8c3b0;
  border-radius: 8px;
  background: #fff;
  color: #2a211c;
  font: inherit;
  font-size: .8125rem;
  font-weight: 720;
  cursor: pointer;
}
.app-progreso-barra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2.5px;
  background: transparent;
  overflow: hidden;
}
.app-progreso-barra span {
  display: block;
  height: 100%;
  inline-size: 16%;
  background: linear-gradient(90deg, #f5a524, var(--primario, #c2410c));
  transition: inline-size .4s cubic-bezier(.2, .8, .2, 1);
}

/* Escenario y Dock Inferior Flotante */
.app-escenario {
  min-height: calc(100dvh - 150px);
  padding-bottom: 5rem;
}
.app-segmento[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  .app-segmento--activo {
    animation: vista-corp-entra .38s cubic-bezier(.2, .8, .2, 1) both;
  }
  @keyframes vista-corp-entra {
    from { opacity: 0; translate: 0 12px; }
    to { opacity: 1; translate: 0 0; }
  }
}
.app-dock {
  position: fixed;
  left: 50%;
  bottom: 1.15rem;
  translate: -50% 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem .6rem;
  border-radius: 999px;
  background: rgb(42 33 28 / .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  box-shadow: 0 18px 38px -12px rgb(42 33 28 / .65), 0 0 0 1px rgb(255 255 255 / .12);
}
.app-dock-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 36px;
  padding: .35rem .85rem;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / .1);
  color: #f7e3cf;
  font: inherit;
  font-size: .82rem;
  font-weight: 720;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.app-dock-btn:hover {
  background: rgb(255 255 255 / .2);
  color: #fff;
}
.app-dock-btn--primario {
  background: var(--primario, #c2410c);
  color: #fff;
}
.app-dock-btn--primario:hover {
  background: var(--primario-oscuro, #9a3412);
}
.app-dock-btn .ico {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}
.app-dock-indicadores {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding-inline: .25rem;
}
.app-dock-punto {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / .3);
  cursor: pointer;
  transition: width .25s, background-color .2s;
}
.app-dock-punto.activo {
  width: 22px;
  background: #f5a524;
}

/* Tarjetas Comerciales y Ancla de Precios */
.tarjetas-planes-comerciales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  margin-top: 1.5rem;
}
.tarjeta-plan-comercial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.15rem;
  padding: 1.6rem 1.5rem;
  border-radius: 18px;
  background: #fff;
  border: 1.5px solid #e2d1be;
  box-shadow: 0 12px 30px -20px rgb(42 33 28 / .28);
  transition: translate .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .2s;
}
.tarjeta-plan-comercial--recomendada {
  border: 2px solid #f5a524;
  box-shadow: 0 18px 38px -20px rgb(245 165 36 / .4);
}
.tarjeta-plan-comercial--destacada {
  border: 2.5px solid var(--primario, #c2410c);
  background: linear-gradient(180deg, #fff9f3 0%, #ffffff 45%);
  box-shadow: 0 20px 42px -20px rgb(194 65 12 / .35);
}
.tarjeta-plan-cabecera { display: grid; gap: .45rem; }
.tarjeta-plan-etiqueta { display: inline-block; width: fit-content; padding: .2rem .65rem; border-radius: 999px; background: #f3e6d8; color: #5e4b40; font-size: .75rem; font-weight: 800; }
.tarjeta-plan-etiqueta--ambar { background: #fff4d9; color: #7a5100; }
.tarjeta-plan-etiqueta--destacada { background: var(--primario, #c2410c); color: #fff; }
.tarjeta-plan-cabecera h3 { font-size: 1.35rem; margin: 0; }
.tarjeta-plan-cabecera p { color: #5e4b40; font-size: .92rem; margin: 0; }
.tarjeta-plan-precio { padding: 1rem 1.1rem; border-radius: 14px; background: #fff8f1; border: 1px solid #eadccd; display: grid; gap: .2rem; }
.cifra-sin-iva { font-size: 2.5rem; font-weight: 860; line-height: 1; letter-spacing: -0.03em; color: #2a211c; font-variant-numeric: tabular-nums; }
.cifra-sin-iva small { font-size: 1.05rem; font-weight: 700; color: #5e4b40; }
.aclaracion-sin-iva { font-size: .84rem; font-weight: 700; color: var(--primario-oscuro, #9a3412); }
.caja-capacidad-ia { padding: .9rem 1rem; border-radius: 12px; background: #f8efe6; border-left: 3.5px solid #76604f; display: grid; gap: .3rem; font-size: .86rem; line-height: 1.45; color: #2a211c; }
.caja-capacidad-ia--destacada { background: #ffebd6; border-left-color: var(--primario, #c2410c); }
.caja-capacidad-ia strong { font-size: .88rem; color: #2a211c; }
.caja-capacidad-ia p { margin: 0; color: #5e4b40; }
.tarjeta-plan-lista { margin: 0; flex: 1; }
.tarjeta-plan-boton { width: 100%; justify-content: center; }

/* Apartado Sitio Web Personal */
.apartado-web-personal { margin-top: 2rem; padding: 1.75rem; border-radius: 22px; background: linear-gradient(135deg, #2a211c 0%, #3a2e27 100%); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; box-shadow: 0 22px 44px -22px rgb(42 33 28 / .6); }
@media (min-width: 900px) { .apartado-web-personal { grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .85fr); align-items: center; } }
.apartado-web-contenido { display: grid; gap: .75rem; }
.apartado-web-contenido h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.45rem; color: #fff; margin: 0; }
.apartado-web-contenido h3 .ico { width: 26px; height: 26px; color: #f5a524; }
.apartado-web-contenido > p { margin: 0; color: #f7e3cf; font-size: .96rem; }
.apartado-web-lista { margin: .25rem 0 0; color: #fff; }
.apartado-web-lista strong { color: #ffb547; }
.apartado-web-precio { padding: 1.35rem; border-radius: 18px; background: #fff8f1; color: #2a211c; display: grid; gap: .5rem; text-align: center; justify-items: center; }
.apartado-web-desde { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #76604f; }
.apartado-web-propiedad { margin: .15rem 0; font-size: .82rem; line-height: 1.4; color: #5e4b40; }
.apartado-web-precio .boton { width: 100%; margin-top: .35rem; }
.apartado-web-precio small { font-size: .76rem; color: #76604f; }

/* Pasarela de Contratación y Checkout Simulado */
.pasarela-comercial { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 1.25rem; }
@media (min-width: 960px) { .pasarela-comercial { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.pasarela-selector { display: grid; gap: 1rem; padding: 1.6rem; border-radius: 20px; background: #fff; border: 1px solid #e4d2bf; }
.pasarela-selector h3 { font-size: 1.05rem; margin: .25rem 0 0; }
.pasarela-opciones { display: grid; gap: .6rem; }
.pasarela-opcion { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border-radius: 14px; border: 1.5px solid #e4d2bf; background: #fff8f1; cursor: pointer; }
.pasarela-opcion:has(input:checked) { border-color: var(--primario, #c2410c); background: #ffebd6; }
.pasarela-opcion--web { border-style: dashed; border-color: var(--primario, #c2410c); }
.pasarela-opcion input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--primario, #c2410c); }
.pasarela-opcion span { display: grid; gap: .15rem; }
.pasarela-opcion small { color: #5e4b40; font-size: .84rem; }
.campos-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .85rem; }
.pasarela-tarjeta-simulada { padding: 1rem; border-radius: 14px; background: #f8efe6; border: 1px solid #e4d2bf; display: grid; gap: .6rem; }
.pasarela-factura { position: sticky; top: 90px; display: grid; gap: 1.15rem; padding: 1.75rem; border-radius: 22px; background: #2a211c; color: #fff; box-shadow: 0 24px 48px -24px rgb(42 33 28 / .65); }
.pasarela-factura-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; padding-bottom: .9rem; border-bottom: 1px solid rgb(255 255 255 / .16); }
.pasarela-factura-cabeza span { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #f7e3cf; }
.pasarela-factura-cabeza strong { font-size: 1.3rem; color: #f5a524; }
.pasarela-bloque { display: grid; gap: .45rem; padding: 1rem 1.15rem; border-radius: 14px; background: rgb(255 255 255 / .07); }
.pasarela-bloque h4 { margin: 0 0 .2rem; font-size: .9rem; color: #f7e3cf; }
.pasarela-fila { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; color: #f7e3cf; font-variant-numeric: tabular-nums; }
.pasarela-fila--total { margin-top: .35rem; padding-top: .55rem; border-top: 1px solid rgb(255 255 255 / .22); color: #fff; font-weight: 750; align-items: baseline; }
.pasarela-fila--total strong { font-size: 1.65rem; font-weight: 860; color: #ffb547; }
.pasarela-mitad { margin: .3rem 0 0; font-size: .82rem; color: #f7e3cf; }
.pasarela-modos-nota { margin: 0; padding: .75rem 1rem; border-radius: 12px; background: rgb(245 165 36 / .15); color: #ffe3a8; font-size: .88rem; font-weight: 650; }
.pasarela-qr-info { display: flex; align-items: flex-start; gap: .75rem; padding: .9rem 1rem; border-radius: 14px; background: rgb(255 255 255 / .08); color: #f7e3cf; font-size: .85rem; }
.pasarela-qr-info .ico { width: 22px; height: 22px; flex: none; color: #8fd3a6; }
.pasarela-qr-info p { margin: .15rem 0 0; }
.pasarela-botones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .25rem; }
/* === Corrección de barra de pasos (No tapa el footer) y Rejilla de 2 columnas para las 12 Preguntas Frecuentes === */
.app-escenario {
  min-height: auto !important;
  padding-bottom: 1rem !important;
}
.app-barra-pasos {
  max-width: 72rem;
  width: calc(100% - 2rem);
  margin: 1rem auto 2.5rem;
  padding: .85rem 1.25rem;
  border-radius: 16px;
  background: #fff;
  border: 1.5px solid #e4d2bf;
  box-shadow: 0 12px 28px -18px rgb(42 33 28 / .3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
}
.app-barra-pasos .app-dock-punto {
  background: #d8c3b0;
}
.app-barra-pasos .app-dock-punto.activo {
  background: var(--primario, #c2410c);
}
.faq-rejilla-doble {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: start;
}
@media (min-width: 860px) {
  .faq-rejilla-doble {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.faq-rejilla-doble .preguntas {
  max-width: none !important;
  margin: 0 !important;
}
.pasarela-bloque--gratis { background: rgb(60 207 107 / .16) !important; border: 1.5px solid #4ade80; }


/* ---------- Móvil (320 a 959 px): cabecera en dos filas, sin desborde, con «Acceso clientes» y «Contratar» a la vista ---------- */
html, body { max-width: 100%; overflow-x: clip; }
@media (max-width: 959px) {
  .nav-corp { flex-wrap: wrap; align-items: center; gap: .15rem .5rem; padding: .4rem 1rem; }
  .nav-corp .logo { order: 1; margin-right: 0; min-width: 0; }
  .nav-corp-acciones { order: 2; margin-left: auto; gap: .25rem; flex-wrap: nowrap; }
  .nav-corp .entrar { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; font-size: .875rem; white-space: nowrap; }
  .nav-corp .boton-chico { min-height: 44px; white-space: nowrap; }
  .nav-corp-enlaces {
    order: 3; flex: 0 0 100%; flex-wrap: nowrap; justify-content: flex-start; gap: .1rem;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: -1rem; padding-inline: 1rem; -webkit-overflow-scrolling: touch;
  }
  .nav-corp-enlaces::-webkit-scrollbar { display: none; }
  .nav-corp-link { flex: none; min-height: 44px; padding: .45rem .7rem; white-space: nowrap; }
  .nav-corp-link[aria-current="page"]::after { left: .7rem; right: .7rem; bottom: 4px; }
}
@media (max-width: 380px) {
  .nav-corp { padding-inline: .75rem; }
  .nav-corp .logo span { font-size: 1rem; }
  .nav-corp .logo svg { width: 28px; height: 28px; }
  .nav-corp .entrar { padding-inline: .3rem; font-size: .8125rem; }
  .nav-corp .boton-chico { padding-inline: .7rem; font-size: .8125rem; }
}
.legal-volver { display: inline-flex; align-items: center; min-height: 44px; }
.check { min-height: 44px; }