/*
 * Web comercial · Plataforma DeCA
 * Diseño claro con los colores de la plataforma: azul de señal de autovía
 * y ámbar. Tipografía del sistema: carga al instante y no pide nada a
 * servidores de terceros.
 */

:root {
    --azul: #1F4E9A;
    --azul-oscuro: #163A74;
    --azul-noche: #0F2A55;
    --azul-claro: #EAF0FA;
    --azul-borde: #CBD8EE;
    --ambar: #E4A91A;
    --ambar-claro: #FDF4DC;
    --verde: #2E9C6E;
    --rojo: #C23B3B;
    --tinta: #16213A;
    --texto: #3D4A61;
    --suave: #6A768B;
    --linea: #E3E7EE;
    --fondo: #FFFFFF;
    --fondo-gris: #F5F7FA;
    --radio: 14px;
    --radio-pequeno: 8px;
    --sombra: 0 1px 2px rgba(15, 42, 85, .06), 0 8px 24px rgba(15, 42, 85, .07);
    --sombra-alta: 0 2px 4px rgba(15, 42, 85, .08), 0 24px 48px rgba(15, 42, 85, .14);
    --ancho: 1180px;
    --letra: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--letra);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--tinta); line-height: 1.2; margin: 0 0 .6em; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 750; }
h3 { font-size: 1.2rem; font-weight: 700; }
.h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--azul); text-underline-offset: .18em; }
a:hover { color: var(--azul-oscuro); }
img, svg { display: block; max-width: 100%; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: var(--fondo-gris); padding: .1em .35em; border-radius: 4px; }

:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; border-radius: 4px; }

.ico { width: 1.25em; height: 1.25em; flex: none; }

.oculto {
    position: absolute; 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: 1rem; top: -4rem; z-index: 100; background: var(--tinta); color: #fff; padding: .6rem 1rem; border-radius: var(--radio-pequeno); }
.saltar:focus { top: 1rem; }

/* Dato del negocio que falta en la configuración. Se ve a propósito. */
.hueco { background: #FFE58A; color: #5A4300; padding: .05em .35em; border-radius: 4px; font-weight: 600; font-size: .92em; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.contenedor--estrecho { max-width: 820px; }

@media (max-width: 600px) {
    .contenedor { padding: 0 16px; }
}

/* ---------- Botones ---------- */

.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    padding: .7em 1.25em; border-radius: 10px; border: 1.5px solid transparent;
    font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.2;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: none; }
.boton--grande { padding: .9em 1.5em; font-size: 1.05rem; }
.boton--principal { background: var(--azul); color: #fff; box-shadow: 0 6px 16px rgba(31, 78, 154, .25); }
.boton--principal:hover { background: var(--azul-oscuro); color: #fff; }
.boton--secundario { background: #fff; color: var(--azul); border-color: var(--azul-borde); }
.boton--secundario:hover { border-color: var(--azul); color: var(--azul-oscuro); }
.boton--ambar { background: var(--ambar); color: var(--azul-noche); }
.boton--ambar:hover { background: #F0B92E; color: var(--azul-noche); }
.boton--claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.boton--claro:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08); }

/* Nota pequeña dentro de un botón («PDF · 107 KB») */
.boton__nota { font-size: .78em; font-weight: 500; opacity: .75; }
.seccion--foto .boton--claro { margin-top: .6rem; }
.grupo__cabeza .boton { margin-top: .4rem; white-space: normal; }

.botonera { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6rem 0; }

.enlace-boton { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

.enlace-flecha { display: inline-flex; align-items: center; gap: .4em; font-weight: 650; text-decoration: none; }
.enlace-flecha .ico { transition: transform .15s; }
.enlace-flecha:hover .ico { transform: translateX(3px); }

/* ---------- Marca ---------- */

.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--azul); }
.marca__sello {
    background: var(--azul); color: #fff; font-weight: 800; font-size: 1.05rem;
    padding: .18em .5em; border-radius: 6px; letter-spacing: .01em;
}
.marca__sello--mini { font-size: .72rem; padding: .15em .45em; border-radius: 4px; }
.marca__nombre { font-weight: 650; font-size: 1rem; }
.marca--clara { color: #fff; }
.marca--clara .marca__sello { background: #fff; color: var(--azul); }

/* ---------- Cabecera y menú ---------- */

.cabecera {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--linea);
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }

.menu { display: flex; align-items: center; gap: 28px; }
.menu__lista { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu__lista > li > a,
.desplegable > summary {
    display: block; padding: .5em .8em; border-radius: 8px;
    color: var(--tinta); font-weight: 550; font-size: .98rem; text-decoration: none; cursor: pointer;
}
.menu__lista > li > a:hover,
.desplegable > summary:hover { background: var(--fondo-gris); color: var(--azul); }
.menu__lista a[aria-current="page"],
.desplegable > summary.activo { color: var(--azul); background: var(--azul-claro); }

.desplegable { position: relative; }
.desplegable > summary { list-style: none; display: flex; align-items: center; gap: .35em; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::after {
    content: ""; width: .45em; height: .45em; margin-top: -.2em;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .15s;
}
.desplegable[open] > summary::after { transform: rotate(-135deg); margin-top: .15em; }
.desplegable__lista {
    position: absolute; top: calc(100% + 8px); left: -8px; min-width: 270px;
    list-style: none; margin: 0; padding: 8px;
    background: #fff; border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra-alta);
}
.desplegable__lista a {
    display: flex; align-items: center; gap: 10px; padding: .6em .75em; border-radius: 8px;
    color: var(--tinta); text-decoration: none; font-weight: 550; font-size: .96rem;
}
.desplegable__lista a .ico { color: var(--azul); }
.desplegable__lista a:hover, .desplegable__lista a[aria-current="page"] { background: var(--azul-claro); color: var(--azul); }

.menu-boton {
    display: none; background: none; border: 1px solid var(--linea); border-radius: 10px;
    width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--tinta); cursor: pointer;
}
.menu-boton__cerrar { display: none; }

@media (max-width: 960px) {
    .menu-boton { display: inline-flex; }
    .menu {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 12px;
        background: #fff; border-bottom: 1px solid var(--linea); box-shadow: var(--sombra-alta);
        padding: 12px 16px 20px; max-height: calc(100vh - 72px); overflow-y: auto;
    }
    .menu-abierto .menu { display: flex; }
    .menu-abierto .menu-boton__abrir { display: none; }
    .menu-abierto .menu-boton__cerrar { display: block; }
    .menu__lista { flex-direction: column; align-items: stretch; }
    .menu__lista > li > a, .desplegable > summary { padding: .8em .75em; font-size: 1.05rem; }
    .desplegable > summary { justify-content: space-between; }
    .desplegable__lista { position: static; box-shadow: none; border: 0; padding: 0 0 0 8px; min-width: 0; }
    .menu__accion { width: 100%; }
}

/* ---------- Etiquetas y títulos de sección ---------- */

.etiqueta {
    display: inline-flex; align-items: center; gap: .5em;
    background: var(--ambar-claro); color: #7A5600; border: 1px solid #F3DB9C;
    padding: .35em .85em; border-radius: 999px; font-size: .9rem; font-weight: 650; margin-bottom: 1.2rem;
}
.etiqueta .ico { color: #B98300; }

.antetitulo {
    color: var(--azul); font-weight: 700; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .1em; margin-bottom: .7rem;
}
.antetitulo--claro { color: var(--ambar); }

/* ---------- Portada ---------- */

.heroe {
    position: relative; overflow: hidden;
    background:
        radial-gradient(900px 480px at 88% 10%, rgba(31, 78, 154, .10), transparent 70%),
        radial-gradient(600px 400px at 0% 100%, rgba(228, 169, 26, .08), transparent 70%),
        linear-gradient(180deg, #F7F9FC 0%, #FFFFFF 100%);
    padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 7vw, 88px);
}
.heroe__rejilla { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.heroe__entradilla, .cabecera-pagina__entradilla { font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); color: var(--texto); max-width: 38em; }

@media (max-width: 960px) {
    .heroe__rejilla { grid-template-columns: 1fr; }
}

.lista-check { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .55em; }
.lista-check li { display: flex; gap: .6em; align-items: flex-start; }
.lista-check .ico { color: var(--verde); margin-top: .18em; }
.lista-check--linea { display: flex; flex-wrap: wrap; gap: .5em 1.4em; font-weight: 600; color: var(--tinta); font-size: .96rem; }
.lista-check--clara { color: #DCE6F7; }
.lista-check--clara strong { color: #fff; }
.lista-check--clara .ico { color: var(--ambar); }
.lista-check--columnas { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: .9em 2em; }

.lista-puntos { margin: 0 0 1.2em; padding-left: 1.2em; }
.lista-puntos li { margin-bottom: .4em; }
.lista-puntos li::marker { color: var(--azul); }

/* ---------- Tablet de ejemplo ---------- */

.tablet { margin: 0; position: relative; }
.tablet::before {
    content: ""; position: absolute; inset: 8% -4% -6% 6%; z-index: 0;
    background: linear-gradient(135deg, var(--azul) 0%, var(--azul-noche) 100%);
    border-radius: 28px; transform: rotate(3deg); opacity: .12;
}
.tablet__pantalla {
    position: relative; z-index: 1;
    background: #fff; border: 12px solid #1B2438; border-radius: 26px;
    box-shadow: var(--sombra-alta); overflow: hidden;
}
.tablet__barra { display: flex; align-items: center; gap: 10px; background: var(--azul); color: #fff; padding: 10px 16px; font-weight: 650; font-size: .92rem; }
.tablet__barra .marca__sello { background: #fff; color: var(--azul); }
.tablet__aviso { display: flex; align-items: center; gap: 8px; background: var(--ambar-claro); color: #7A5600; font-size: .85rem; font-weight: 650; padding: 8px 16px; border-bottom: 1px solid #F3DB9C; }
.tablet__cuerpo { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; padding: 18px; align-items: start; }
.tablet__codigo { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; color: var(--suave); margin: 0 0 2px; }
.tablet__ruta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--tinta); font-size: 1.1rem; margin: 0 0 12px; }
.tablet__ruta .ico { color: var(--azul); }
.tablet dl { margin: 0 0 14px; display: grid; gap: 8px; }
.tablet dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.tablet dd { margin: 0; font-size: .9rem; color: var(--tinta); font-weight: 550; }
.tablet__qr { display: grid; gap: 10px; justify-items: stretch; }
.tablet__qr .qr { width: 100%; color: var(--tinta); background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 8px; }
.tablet__boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--azul); color: #fff; border-radius: 8px; padding: 8px 12px; font-size: .85rem; font-weight: 650; }
.tablet__boton--ok { background: var(--verde); }
/* «Abrir PDF» de la tablet de ejemplo: enlace de verdad al PDF de ejemplo */
.tablet__boton--enlace { text-decoration: none; transition: background-color .15s, box-shadow .15s; }
.tablet__boton--enlace:hover, .tablet__boton--enlace:focus-visible { color: #fff; background: var(--azul-oscuro, #163A74); box-shadow: 0 0 0 3px rgba(31, 78, 154, .25); }
.tablet figcaption { text-align: center; color: var(--suave); font-size: .82rem; margin-top: 14px; position: relative; }

@media (max-width: 480px) {
    /* El adorno de detrás sobresalía un 4 % por la derecha y, en la cabecera de autobuses (la tablet sin foto),
       ensanchaba la página 12 px en el móvil: había que desplazarse de lado (visto el 16/10/2026) */
    .tablet::before { right: 0; transform: none; }
    .tablet__pantalla { border-width: 8px; }
    .tablet__cuerpo { grid-template-columns: 1fr; }
    .tablet__qr { grid-template-columns: 120px 1fr; align-items: center; }
}

/* Foto de cabecera con la tablet encima: la foto arriba a la derecha y la
   tablet montada sobre su esquina inferior izquierda. */
.escena { position: relative; padding: 0 0 130px 64px; }
.escena__foto { border-radius: 24px; overflow: hidden; box-shadow: var(--sombra-alta); aspect-ratio: 10 / 9; background: var(--azul-claro); }
.escena__foto img { width: 100%; height: 100%; object-fit: cover; }
.escena .tablet { position: absolute; left: 0; bottom: 30px; width: min(84%, 460px); }
.escena .tablet__pantalla { border-width: 10px; }
.escena .tablet__cuerpo { grid-template-columns: 1fr 140px; gap: 14px; padding: 14px 16px; }
.escena .tablet dl { gap: 6px; margin-bottom: 12px; }
.escena .tablet dd { font-size: .85rem; }
.tablet__ruta strong { white-space: nowrap; }
.escena .tablet::before { display: none; }
.escena .tablet figcaption {
    position: absolute; left: 0; right: 0; bottom: -30px; margin: 0;
    white-space: nowrap;
}

@media (max-width: 960px) {
    .escena { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 520px) {
    .escena { padding: 0; }
    .escena__foto { aspect-ratio: 16 / 10; border-radius: 18px; }
    .escena .tablet { position: relative; width: 100%; bottom: auto; margin-top: -48px; padding: 0 14px; }
    .escena .tablet figcaption { position: static; }
}

/* ---------- Cifras ---------- */

.cifras { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: #fff; }
.cifras__rejilla { display: grid; grid-template-columns: repeat(4, 1fr); }
.cifra { padding: 28px 24px; border-left: 1px solid var(--linea); }
.cifra:first-child { border-left: 0; padding-left: 0; }
.cifra strong { display: block; color: var(--azul); font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 6px; }
.cifra span { font-size: .93rem; color: var(--suave); line-height: 1.45; display: block; }

@media (max-width: 860px) {
    .cifras__rejilla { grid-template-columns: repeat(2, 1fr); }
    .cifra { padding: 22px 16px; }
    .cifra:nth-child(odd) { border-left: 0; padding-left: 0; }
    .cifra:nth-child(n+3) { border-top: 1px solid var(--linea); }
}

/* ---------- Secciones ---------- */

.seccion { padding: clamp(56px, 8vw, 104px) 0; }
.seccion--ajustada { padding: clamp(40px, 6vw, 72px) 0; }
.seccion--gris { background: var(--fondo-gris); }
.seccion__cabeza { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.seccion__cabeza p:last-child { margin-bottom: 0; }
.seccion__cabeza > p:not(.antetitulo) { font-size: 1.12rem; }
.seccion__cabeza--separada { margin-top: clamp(40px, 6vw, 64px); }
.seccion__pie { margin: 32px 0 0; }

/* Requisitos de la norma */
.requisitos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1080px) { .requisitos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .requisitos { grid-template-columns: 1fr; } }
.requisito { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px 22px; transition: border-color .15s, box-shadow .15s; }
.requisito:hover { border-color: var(--azul-borde); box-shadow: var(--sombra); }
.requisito__norma { font-weight: 700; color: var(--tinta); margin-bottom: .55em; }
.requisito__solucion { display: flex; gap: .55em; margin: 0; font-size: .96rem; }
.requisito__solucion .ico { color: var(--verde); margin-top: .15em; }

/* Dos pantallas */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .dos-columnas { grid-template-columns: 1fr; } }
.panel { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: clamp(24px, 3vw, 36px); box-shadow: var(--sombra); }
.panel__icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 12px; margin-bottom: 16px;
    background: var(--azul-claro); color: var(--azul);
}
.panel__icono .ico { width: 26px; height: 26px; }

/* Pasos */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: paso; }
@media (max-width: 960px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pasos { grid-template-columns: 1fr; } }
.paso { position: relative; padding: 24px; border-radius: var(--radio); background: linear-gradient(180deg, var(--azul-claro), #fff 70%); border: 1px solid var(--azul-borde); }
.paso__numero {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; margin-bottom: 14px;
    background: var(--azul); color: #fff; font-weight: 800; font-size: 1.1rem;
}
.paso p { margin: 0; font-size: .97rem; }

/* Franja con foto. La foto llega desde la página en --foto, con su versión. */
.seccion--foto {
    color: #DCE6F7;
    background:
        linear-gradient(100deg, rgba(15, 42, 85, .97) 0%, rgba(22, 58, 116, .92) 48%, rgba(22, 58, 116, .72) 100%),
        var(--foto, none) center 60% / cover no-repeat,
        var(--azul-noche);
}
.seccion--foto h2 { color: #fff; }

/* Apartados con foto y velo parejo (normativa y preguntas de la portada):
   el contenido ocupa todo el ancho, no solo la izquierda. Los recuadros
   siguen en blanco y recuperan el color de texto normal: si no, heredarían
   el claro del fondo y no se leerían. */
.seccion--velo {
    background:
        linear-gradient(180deg, rgba(15, 42, 85, .9) 0%, rgba(15, 42, 85, .8) 50%, rgba(15, 42, 85, .92) 100%),
        var(--foto, none) center 55% / cover no-repeat,
        var(--azul-noche);
}
.seccion--velo .seccion__cabeza > p:not(.antetitulo) { color: #DCE6F7; }
.seccion--velo .pregunta,
.seccion--velo .requisito { color: var(--texto); border-color: transparent; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.seccion--velo .requisito:hover { border-color: transparent; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); }
.seccion--velo .enlace-flecha { color: #fff; }
.seccion--velo .enlace-flecha:hover { color: var(--ambar); }

.foto__rejilla { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .foto__rejilla { grid-template-columns: 1fr; } }

.versiones { list-style: none; margin: 0; padding: 22px; display: grid; gap: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radio); backdrop-filter: blur(4px); }
.version { display: flex; gap: 14px; align-items: center; background: #fff; color: var(--texto); border-radius: 10px; padding: 12px 16px; opacity: .78; }
.version strong { display: block; color: var(--tinta); font-size: .98rem; }
.version span:not(.version__num) { font-size: .85rem; color: var(--suave); }
.version__num { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--fondo-gris); color: var(--suave); font-weight: 800; }
.version--actual { opacity: 1; box-shadow: 0 0 0 3px var(--ambar); }
.version--actual .version__num { background: var(--ambar); color: var(--azul-noche); }
.version__qr { display: flex; align-items: center; gap: 14px; padding: 6px 4px 0; color: #fff; font-weight: 650; }
.qr--pequeno { width: 56px; background: #fff; color: var(--tinta); border-radius: 6px; padding: 4px; }

/* Ejemplo del selector de empresa (portada) */
.empresas-ejemplo { margin: 0; }
.empresas-ejemplo__caja { background: #fff; border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra-alta); padding: 22px; max-width: 460px; margin-left: auto; }
.empresas-ejemplo__titulo { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); margin-bottom: 12px; }
.empresas-ejemplo__titulo .ico { color: var(--azul); }
.empresas-ejemplo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.empresas-ejemplo li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 10px; color: var(--tinta); font-weight: 600; }
.empresas-ejemplo li code { background: var(--fondo-gris); color: var(--suave); font-weight: 500; }
.empresas-ejemplo li.activa { border-color: var(--azul); background: var(--azul-claro); box-shadow: inset 4px 0 0 var(--azul); }
.empresas-ejemplo li.activa code { background: #fff; color: var(--azul); }
.empresas-ejemplo li.todas { border-style: dashed; color: var(--suave); font-weight: 550; }
.empresas-ejemplo figcaption { text-align: right; color: var(--suave); font-size: .82rem; margin-top: 12px; max-width: 460px; margin-left: auto; }
@media (max-width: 900px) {
    .empresas-ejemplo__caja, .empresas-ejemplo figcaption { margin-left: 0; }
    .empresas-ejemplo figcaption { text-align: left; }
}

/* Tarjetas de perfil */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
/* Portada, seis perfiles desde el 02/10/2026 (autobuses): de tres en tres, para que no quede uno solo
   en la segunda fila. «Otros perfiles» (cinco) usa .tarjetas a secas: caben los cinco en una fila. */
.tarjetas--tres { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.tarjeta {
    display: flex; flex-direction: column; background: #fff;
    border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px;
    color: var(--texto); text-decoration: none;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--azul-borde); color: var(--texto); }
.tarjeta__icono { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--azul); color: #fff; margin-bottom: 16px; }
.tarjeta__icono .ico { width: 24px; height: 24px; }
.tarjeta h3 { font-size: 1.08rem; margin-bottom: .45em; }
.tarjeta p { font-size: .94rem; margin-bottom: 1em; flex: 1; }
.tarjeta__mas { display: inline-flex; align-items: center; gap: .35em; color: var(--azul); font-weight: 650; font-size: .94rem; }

/* Comparativa de documentos */
.comparativa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .comparativa { grid-template-columns: 1fr; } }
/* En el móvil los botones parten línea: «Ver una hoja de ruta de ejemplo · PDF · 12 KB» medía unos 380 px y la página
   se salía de la pantalla (auditoría del 02/10/2026) */
@media (max-width: 600px) { .boton { white-space: normal; text-align: center; } }
.comparativa__item { background: var(--fondo-gris); border: 1px solid var(--linea); border-radius: var(--radio); padding: 28px; display: flex; flex-direction: column; }
/* Al revés que en el apartado blanco: sobre gris, la caja gris se perdería */
.seccion--gris .comparativa__item { background: #fff; }
.comparativa__item p { font-size: .97rem; }
.comparativa__item--destacado { border: 2px solid var(--azul); box-shadow: var(--sombra); }
.comparativa__para { color: var(--azul); font-weight: 700; text-transform: uppercase; font-size: .78rem !important; letter-spacing: .08em; margin-top: -.3em; }
.comparativa__estado { display: flex; align-items: center; gap: .45em; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--linea); font-weight: 650; color: var(--verde); }
.comparativa__estado--pronto { color: var(--suave); }

/* Preguntas */
.preguntas { display: grid; gap: 10px; }
.pregunta { background: #fff; border: 1px solid var(--linea); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.pregunta[open] { border-color: var(--azul-borde); box-shadow: var(--sombra); }
.pregunta summary {
    list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; position: relative;
    font-weight: 650; color: var(--tinta); font-size: 1.04rem;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
    content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%; background: var(--azul-claro); color: var(--azul);
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 500; line-height: 1;
}
.pregunta[open] summary::after { content: "−"; background: var(--azul); color: #fff; }
.pregunta summary:hover { color: var(--azul); }
.respuesta { padding: 0 22px 20px; }
.respuesta p:last-child { margin-bottom: 0; }
.grupo-preguntas { font-size: 1.35rem; margin: 40px 0 16px; color: var(--azul); }
.grupo-preguntas:first-child { margin-top: 0; }

/* Contacto */
.seccion--contacto { background: linear-gradient(180deg, var(--fondo-gris), #fff); }
.contacto__rejilla { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .contacto__rejilla { grid-template-columns: 1fr; } }
.contacto__texto h2.h3 { margin-top: 1.4em; }
/* La ilustración de la persona con la tablet que iba bajo el texto se quitó el 07/10/2026 (Alberto: ocupaba mucho);
   sus fotos están en datos/no usar/ilustracion-demo-2026-10-07. */
.contacto__texto h2.h3:first-child { margin-top: 0; }

.formulario { background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: clamp(22px, 3.5vw, 40px); box-shadow: var(--sombra-alta); }
.formulario__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
@media (max-width: 600px) { .formulario__rejilla { grid-template-columns: 1fr; } }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-weight: 600; color: var(--tinta); font-size: .95rem; }
.campo input, .campo select, .campo textarea {
    width: 100%; font: inherit; font-size: 1rem; color: var(--tinta);
    background: #fff; border: 1.5px solid #D3DAE5; border-radius: 10px; padding: .7em .85em;
    transition: border-color .15s, box-shadow .15s;
}
.campo textarea { resize: vertical; min-height: 110px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px rgba(31, 78, 154, .14); }
.campo [aria-invalid="true"] { border-color: var(--rojo); }
.campo__error { color: var(--rojo); font-size: .88rem; font-weight: 600; margin: 0; }
.obligatorio { color: var(--rojo); }

.formulario__resumen { display: flex; gap: 10px; align-items: flex-start; background: #FDEDED; color: #8A2323; border: 1px solid #F2C4C4; border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; font-weight: 600; }
.formulario__resumen p { margin: 0; }
.formulario__legal { margin: 22px 0; display: grid; gap: 10px; }
.formulario__rgpd { font-size: .82rem; line-height: 1.5; color: var(--suave); background: var(--fondo-gris); border-radius: 10px; padding: 12px 14px; margin: 0; }
.formulario__nota { font-size: .85rem; color: var(--suave); margin: 12px 0 0; }
.formulario .boton { width: 100%; }

.casilla { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; }
.casilla input { width: 20px; height: 20px; margin: .12em 0 0; accent-color: var(--azul); flex: none; }
.casilla input[aria-invalid="true"] { outline: 2px solid var(--rojo); outline-offset: 1px; }

/* Campo trampa: fuera de la vista pero no con display:none, que algunos robots detectan. */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.gracias { grid-column: 1 / -1; max-width: 560px; margin: 0 auto; text-align: center; background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 48px 32px; box-shadow: var(--sombra-alta); }
.gracias__icono { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; align-items: center; justify-content: center; background: #E3F4EC; color: var(--verde); margin-bottom: 16px; }
.gracias__icono .ico { width: 34px; height: 34px; }
.gracias .boton { margin: 4px; }

/* «Probar demo» (contacto.php, 07/10/2026): las dos demos en tarjetas grandes.
   Mercancías en azul y viajeros en azul noche con ámbar, para distinguirlas de un vistazo. */
.demos { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.5vw, 28px); }
@media (max-width: 800px) { .demos { grid-template-columns: 1fr; } }
.demo {
    --demo-color: var(--azul); --demo-fondo: var(--azul-claro);
    position: relative; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--linea); border-top: 6px solid var(--demo-color);
    border-radius: var(--radio); padding: clamp(20px, 3vw, 32px); box-shadow: var(--sombra-alta);
    transition: transform .2s, box-shadow .2s;
}
.demo:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(15, 42, 85, .1), 0 32px 60px rgba(15, 42, 85, .18); }
.demo--viajeros { --demo-color: var(--azul-noche); --demo-fondo: var(--ambar-claro); }
.demo--destacada { box-shadow: 0 0 0 3px var(--ambar), var(--sombra-alta); }
.demo__cabeza { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.demo__icono {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 68px; height: 68px; border-radius: 18px; background: var(--demo-fondo); color: var(--demo-color);
}
.demo--viajeros .demo__icono { color: #9A6B00; }
.demo__icono .ico { width: 38px; height: 38px; }
.demo__tipo { margin: 0; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--suave); }
.demo__titulo { margin: 0; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); }
.demo__marca {
    margin-left: auto; align-self: flex-start; background: var(--ambar); color: var(--azul-noche);
    font-size: .78rem; font-weight: 800; padding: .3em .8em; border-radius: 999px;
}
.demo__texto { font-size: 1.05rem; color: var(--tinta); font-weight: 550; }
.demo .lista-check { flex: 1; margin-bottom: 1.4rem; }
.demo__boton { width: 100%; }
/* Botones «Demo para transportes» (azul intenso) y «Demo para viajeros» (ámbar a naranja), en las tarjetas y en la
   portada (07/10/2026, Alberto los quería bien destacados, cada uno de su color) */
.boton-demo {
    padding: 1em 1.6em; font-size: 1.12rem; font-weight: 800; letter-spacing: .01em; border: 0;
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.boton-demo .ico { width: 22px; height: 22px; }
.boton-demo:hover { transform: translateY(-2px); filter: brightness(1.06); }
.boton-demo--mercancias {
    background: linear-gradient(135deg, #1F4E9A 0%, #2F74D6 100%); color: #fff;
    box-shadow: 0 8px 22px rgba(31, 78, 154, .38);
}
.boton-demo--mercancias:hover { color: #fff; box-shadow: 0 12px 28px rgba(31, 78, 154, .48); }
.boton-demo--viajeros {
    background: linear-gradient(135deg, #F2B21B 0%, #EE7F1A 100%); color: var(--azul-noche);
    box-shadow: 0 8px 22px rgba(238, 127, 26, .38);
}
.boton-demo--viajeros:hover { color: var(--azul-noche); box-shadow: 0 12px 28px rgba(238, 127, 26, .48); }
.demo__direccion { display: flex; align-items: center; justify-content: center; gap: .45em; margin: .8rem 0 0; font-size: .9rem; color: var(--suave); }
.demo__direccion .ico { width: 18px; height: 18px; color: var(--verde); }
.demos__subtitulo { margin-top: clamp(36px, 5vw, 56px); }
.pasos--tres { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .pasos--tres { grid-template-columns: 1fr; } }
.paso h3 { font-size: 1.05rem; margin-bottom: .35em; }
/* «Dos partes, un botón para cada una»: la oficina en verde y el conductor en azul, como sus botones en la entrada */
.dos-partes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: clamp(28px, 4vw, 44px); }
.dos-partes__cabeza { margin-bottom: 14px; }
.dos-partes__cabeza h3 { font-size: 1.2rem; margin-bottom: .2em; }
.dos-partes__cabeza p { margin: 0; color: var(--suave); }
@media (max-width: 760px) { .dos-partes { grid-template-columns: 1fr; } }
.dos-partes__caja {
    display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px;
    background: #EEF9F3; border: 1px solid #BFE5D0; border-left: 5px solid #1E8E5A; border-radius: var(--radio);
}
.dos-partes__caja--conductor { background: var(--azul-claro); border-color: var(--azul-borde); border-left-color: var(--azul); }
.dos-partes__icono {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 14px; background: #1E8E5A; color: #fff;
}
.dos-partes__caja--conductor .dos-partes__icono { background: var(--azul); }
.dos-partes__icono .ico { width: 28px; height: 28px; }
.dos-partes h3 { font-size: 1.1rem; margin-bottom: .3em; }
.dos-partes h3 span { font-weight: 500; color: var(--suave); font-size: .9em; }
.dos-partes p { margin: 0; font-size: .96rem; }
.demos__nota {
    display: flex; gap: .7em; align-items: flex-start; margin: 24px 0 0; padding: 14px 18px;
    background: var(--fondo-gris); border-radius: var(--radio-pequeno); font-size: .94rem;
}
.demos__nota .ico { flex: none; color: #B98300; margin-top: .15em; }
.botonera--demos { margin: 0 0 1.4rem; }

/* Llamada final */
.llamada { padding: 0 0 clamp(56px, 8vw, 96px); }
.seccion + .llamada, .seccion--gris + .llamada { padding-top: 0; }
.llamada__caja {
    display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
    background:
        linear-gradient(110deg, rgba(15, 42, 85, .96) 0%, rgba(15, 42, 85, .9) 45%, rgba(31, 78, 154, .55) 100%),
        var(--foto, none) center 45% / cover no-repeat,
        var(--azul-noche);
    color: #DCE6F7; border-radius: 22px; padding: clamp(28px, 5vw, 56px);
    max-width: calc(var(--ancho) - 48px);
}
.llamada__caja h2 { color: #fff; margin-bottom: .3em; }
.llamada__caja p { margin: 0; max-width: 40em; }
.llamada__botones { display: flex; gap: 12px; flex-wrap: wrap; }
.seccion--gris + .llamada { background: var(--fondo-gris); }
@media (max-width: 600px) {
    .llamada .contenedor { padding: 0; }
    .llamada__caja { border-radius: 0; }
}

/* ---------- Páginas interiores ---------- */

.cabecera-pagina {
    background:
        radial-gradient(700px 360px at 90% 0%, rgba(31, 78, 154, .10), transparent 70%),
        linear-gradient(180deg, #F7F9FC, #fff);
    padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 48px);
    border-bottom: 1px solid var(--linea);
}
.cabecera-pagina--perfil { padding-bottom: clamp(40px, 6vw, 80px); }
.cabecera-pagina--legal { padding-bottom: clamp(24px, 3vw, 36px); }

/* Cabecera con foto (funcionalidades, normativa, precios, preguntas).
   La foto llega de la página en --foto; el velo oscuro deja leer el texto. */
.cabecera-pagina--foto {
    background:
        linear-gradient(100deg, rgba(15, 42, 85, .95) 0%, rgba(15, 42, 85, .86) 55%, rgba(22, 58, 116, .72) 100%),
        var(--foto, none) center 55% / cover no-repeat,
        var(--azul-noche);
    border-bottom: 0;
    padding-bottom: clamp(40px, 6vw, 72px);
}
.cabecera-pagina--foto h1 { color: #fff; }
.cabecera-pagina--foto .antetitulo { color: var(--ambar); }
.cabecera-pagina--foto .cabecera-pagina__entradilla { color: #DCE6F7; }
.cabecera-pagina--foto .indice a { border-color: transparent; }
.cabecera-pagina--foto .indice a:hover { border-color: var(--ambar); }
.cabecera-pagina--foto .etiqueta { border-color: transparent; }

.migas { font-size: .9rem; color: var(--suave); margin-bottom: 1rem; }
.migas a { color: var(--suave); }

.indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.6rem; }
.indice a {
    display: inline-flex; align-items: center; gap: .45em;
    background: #fff; border: 1px solid var(--linea); border-radius: 999px; padding: .4em .95em;
    color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.indice a .ico { color: var(--azul); width: 1.1em; height: 1.1em; }
.indice a:hover { border-color: var(--azul); color: var(--azul); }

/* Funcionalidades */
.grupo { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 860px) { .grupo { grid-template-columns: 1fr; } }
.grupo__cabeza { position: sticky; top: 96px; }
@media (max-width: 860px) { .grupo__cabeza { position: static; } }
.grupo__cabeza h2 { font-size: 1.7rem; }
.funciones { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.funcion { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 18px 20px; }
.funcion dt { display: flex; align-items: center; gap: .5em; font-weight: 700; color: var(--tinta); margin-bottom: .35em; }
.funcion dt .ico { color: var(--verde); }
.funcion dd { margin: 0; font-size: .95rem; }

.pronto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pronto li { display: flex; gap: .7em; align-items: center; padding: 16px 18px; border: 1.5px dashed var(--azul-borde); border-radius: 12px; color: var(--tinta); font-weight: 550; }
.pronto .ico { color: var(--ambar); }

/* Perfil */
.problema { background: var(--ambar-claro); border: 1px solid #F3DB9C; border-radius: var(--radio); padding: clamp(22px, 3vw, 32px); }
.problema h2 { font-size: 1.35rem; }
.problema ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; }
.problema li { display: flex; gap: .6em; color: #5E4500; font-weight: 550; }
.problema .ico { color: #B98300; margin-top: .15em; }

.ventajas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.ventajas--tres { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.ventaja { border: 1px solid var(--linea); border-radius: var(--radio); padding: 26px; background: #fff; }
.ventaja__icono { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--azul-claro); color: var(--azul); margin-bottom: 14px; }
.ventaja__icono .ico { width: 24px; height: 24px; }
.ventaja p { margin: 0; font-size: .96rem; }

/* Texto largo (normativa, legales) */
.texto-largo h2 { font-size: 1.5rem; margin-top: 2em; }
.texto-largo h2:first-child { margin-top: 0; }

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--linea); border-radius: 12px; margin: 0 0 1.4em; }
.tabla { width: 100%; border-collapse: collapse; font-size: .96rem; }
@media (max-width: 600px) {
    .tabla { font-size: .88rem; }
    .tabla th, .tabla td { padding: 10px 12px !important; }
}
.tabla th { background: var(--azul); color: #fff; text-align: left; padding: 12px 16px; font-weight: 650; }
.tabla td { padding: 12px 16px; border-top: 1px solid var(--linea); vertical-align: top; }
.tabla tbody tr:nth-child(even) td { background: var(--fondo-gris); }

.nota { display: flex; gap: 12px; align-items: flex-start; background: var(--azul-claro); border-radius: 12px; padding: 16px 18px; margin: 1.6em 0; color: var(--azul-noche); }
.nota .ico { color: var(--azul); margin-top: .15em; }
.nota p { margin: 0; }
.nota--simple { margin: 1.2em 0 0; font-size: .95rem; }

.fuentes { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fuentes li { padding: 14px 18px; border: 1px solid var(--linea); border-radius: 10px; }

.datos-legales { list-style: none; padding: 0; margin: 0 0 1.4em; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.datos-legales li { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--linea); }
.datos-legales li:first-child { border-top: 0; }
.datos-legales span { color: var(--suave); font-weight: 600; }
@media (max-width: 560px) { .datos-legales li { grid-template-columns: 1fr; gap: 2px; } }

/* Precios */
.precio-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* minmax(0, 1fr) y overflow-wrap: «transportesdeca.com/deca/tuempresa» no se partía y ensanchaba la caja a 360 px
   (auditoría del 02/10/2026) */
@media (max-width: 860px) { .precio-rejilla { grid-template-columns: minmax(0, 1fr); } }
.precio-caja { overflow-wrap: anywhere; background: #fff; border: 2px solid var(--azul); border-radius: 18px; padding: clamp(24px, 3.5vw, 40px); box-shadow: var(--sombra-alta); }
.precio-caja--clara { border: 1px solid var(--linea); box-shadow: none; background: var(--fondo-gris); }
/* Sobre un apartado gris, la caja gris no se distingue del fondo: ahí va en blanco */
.seccion--gris .precio-caja--clara { background: #fff; }
.precio-caja .lista-check { margin-bottom: 1.6rem; }
.precio-caja .lista-check .ico { color: var(--azul); }
.pasos-lista { margin: 0; padding-left: 1.3em; display: grid; gap: .6em; }
.pasos-lista li::marker { color: var(--azul); font-weight: 800; }

/* Apartado con el título centrado (precio en la portada) */
.seccion--centrada .seccion__cabeza { margin-left: auto; margin-right: auto; text-align: center; }
.seccion--centrada .seccion__pie { text-align: center; }

/* Tarifa: pago único + cuota (Precios y portada) */
.tarifa { display: grid; grid-template-columns: 1.15fr auto 1fr; gap: 20px; align-items: stretch; max-width: 920px; margin: 0 auto; }
.tarifa__caja { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: clamp(24px, 3vw, 36px); box-shadow: var(--sombra); }
.tarifa__caja--principal { border: 2px solid var(--azul); box-shadow: var(--sombra-alta); }
.tarifa__nombre { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--azul); margin-bottom: .6rem; }
.tarifa__importe { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0; color: var(--tinta); }
.tarifa__importe strong { font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.tarifa__importe span { color: var(--suave); font-weight: 600; }
.tarifa__cuando { display: inline-block; align-self: flex-start; margin: 12px 0 20px; padding: .2em .7em; border-radius: 999px; background: var(--ambar-claro); color: #7A5600; font-size: .85rem; font-weight: 700; }
.tarifa__caja .lista-check { margin-bottom: 1.4rem; flex: 1; }
.tarifa__caja .boton { align-self: stretch; }
.tarifa__mas { align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--azul); color: #fff; font-size: 1.6rem; font-weight: 700; line-height: 1; }
/* 1 y 2: primero el software, luego las cuotas (07/10/2026). La flecha del medio dice «y luego» */
.tarifa__caja { position: relative; }
.tarifa__paso {
    position: absolute; top: -18px; left: clamp(20px, 3vw, 32px);
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--ambar); color: var(--azul-noche); font-weight: 800; font-size: 1.2rem; box-shadow: 0 4px 10px rgba(15, 42, 85, .2);
}
.tarifa__caja .tarifa__nombre { margin-top: .5rem; }
.tarifa__accion { text-align: center; margin-top: 22px; }
/* Tramos de la cuota por número de camiones */
.tramos { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; font-size: .95rem; }
.tramos th, .tramos td { padding: .55rem 0; border-bottom: 1px solid var(--linea); }
.tramos th { text-align: left; font-weight: 500; color: var(--texto, inherit); }
.tramos td { text-align: right; font-weight: 700; color: var(--tinta); white-space: nowrap; }
.tramos tr:last-child th, .tramos tr:last-child td { border-bottom: 0; }
/* La tabla de tramos fuera de la tarjeta (página de autobuses): estrecha y centrada */
.tramos--suelta { max-width: 420px; margin-left: auto; margin-right: auto; }
.tramos__nota { margin: -.6rem 0 1.2rem; font-size: .82rem; color: var(--suave); }
.tarifa__nota { margin: 14px auto 0; max-width: 920px; text-align: center; color: var(--suave); font-size: .88rem; }
@media (max-width: 760px) {
    .tarifa { grid-template-columns: 1fr; }
    .tarifa__mas { justify-self: center; margin: 0 0 8px; }
    .tarifa__mas .ico { transform: rotate(90deg); }   /* en columna, la flecha apunta hacia abajo */
}

/* 404 */
.no-existe { text-align: center; }
.no-existe__codigo { font-size: clamp(4rem, 12vw, 7rem); font-weight: 900; color: var(--azul-claro); -webkit-text-stroke: 2px var(--azul-borde); line-height: 1; margin: 0; }
.no-existe .botonera { justify-content: center; }

/* ---------- Pie ---------- */

.pie { background: var(--azul-noche); color: #AFC0DC; padding: 64px 0 0; font-size: .95rem; }
.pie a { color: #DCE6F7; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; }
@media (max-width: 900px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pie__rejilla { grid-template-columns: 1fr; gap: 28px; } }
.pie__marca p { margin: 16px 0 0; max-width: 26em; }
.pie__aviso { display: inline-block; color: var(--ambar); font-weight: 650; }
.pie__titulo { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie__contacto li { display: flex; align-items: center; gap: .6em; }
.pie__contacto .ico { color: var(--ambar); }
.pie__contacto--oscuro { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pie__contacto--oscuro li { display: flex; align-items: center; gap: .6em; }
.pie__contacto--oscuro .ico { color: var(--azul); }
.pie__legal { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 22px; padding-bottom: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .88rem; }
.pie__legal p { margin: 0; }
.pie__legal ul { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pie .enlace-boton { color: #DCE6F7; text-decoration: none; }
.pie .enlace-boton:hover { color: #fff; text-decoration: underline; }

/* ---------- Aviso de cookies ---------- */

/* Botones flotantes: WhatsApp y volver arriba, abajo a la derecha */
.flotantes { position: fixed; z-index: 55; right: 16px; bottom: 16px; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; }
.flotante { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-width: 52px; height: 52px; border-radius: 999px; box-shadow: 0 6px 18px rgba(15, 30, 60, .22); text-decoration: none; font-weight: 700; transition: transform .15s, box-shadow .15s; }
.flotante:hover, .flotante:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 30, 60, .28); }
.flotante .ico { width: 26px; height: 26px; }
.flotante--whatsapp { padding: 0 18px 0 14px; background: #1DA851; color: #fff; }
.flotante--whatsapp:hover, .flotante--whatsapp:focus-visible { color: #fff; background: #168A42; }
.flotante--arriba { width: 44px; min-width: 44px; height: 44px; background: #fff; color: var(--azul); border: 1px solid var(--linea); }
.flotante--arriba .ico { width: 22px; height: 22px; }
.flotante[hidden] { display: none; }
@media (max-width: 600px) {
    /* En el móvil, WhatsApp solo con el icono, para no tapar el texto */
    .flotante__texto { display: none; }
    .flotante--whatsapp { padding: 0; width: 52px; }
}
@media (prefers-reduced-motion: reduce) {
    .flotante { transition: none; }
    .flotante:hover, .flotante:focus-visible { transform: none; }
}
@media print {
    .flotantes { display: none; }
}
/* El aviso de cookies, cuando sale, queda por encima de los botones */
.cookies {
    position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; max-width: 460px;
    background: #fff; border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra-alta);
    padding: 20px 22px; font-size: .94rem;
}
.cookies__titulo { font-weight: 750; color: var(--tinta); margin-bottom: .4em; }
.cookies__botones { display: flex; gap: 10px; justify-content: flex-end; }
.cookies[hidden] { display: none; }

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}

/* ---------- Impresión ---------- */

@media print {
    .cabecera, .pie, .llamada, .cookies, .botonera, .formulario { display: none !important; }
    .seccion--foto { background: none; color: var(--texto); }
    .seccion--foto h2 { color: var(--tinta); }
}

/* ---------- Vídeos tutoriales (16/10/2026; bloque_videos() de inc/bloques.php y js/web.js) ---------- */

.videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.video h3, .video h4 { margin: 14px 0 4px; font-size: 1.2rem; color: var(--tinta); }
.video p { margin: 0; color: var(--texto); }
.video__para { font-weight: 500; color: var(--suave); }
.video__marco, .video__reproductor {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
    border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); background: var(--azul-noche);
}
.video__marco img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.video__marco:hover img, .video__marco:focus-visible img { transform: scale(1.03); }
.video__play {
    position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
    display: grid; place-items: center; background: var(--ambar); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: transform .2s;
}
.video__play svg { width: 34px; height: 34px; margin-left: 4px; fill: var(--azul-noche); }
.video__marco:hover .video__play, .video__marco:focus-visible .video__play { transform: scale(1.08); }
.video__duracion {
    position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 6px;
    background: rgba(15, 42, 85, .85); color: #fff; font-size: .85rem; font-weight: 600;
}
.videos__selector { display: flex; flex-wrap: wrap; gap: 10px; margin: -12px 0 24px; }
.videos__opcion {
    display: inline-flex; align-items: center; gap: 8px; padding: .65em 1.2em; border-radius: 999px; cursor: pointer;
    border: 2px solid var(--azul); background: var(--azul); color: #fff; font: inherit; font-weight: 700;
    transition: background-color .15s, border-color .15s;
}
.videos__opcion:hover { background: var(--azul-oscuro); border-color: var(--azul-oscuro); }
/* El elegido, en naranja con letra blanca (pedido por Alberto, 16/10/2026). #C2570C y no el ámbar de la web: con letra
   blanca, el ámbar no se lee (contraste 2,1); este da 4,5, lo mínimo recomendado */
.videos__opcion[aria-pressed="true"], .videos__opcion[aria-pressed="true"]:hover { background: #C2570C; border-color: #C2570C; color: #fff; }
.videos__opcion .ico { width: 1.2em; height: 1.2em; }
.videos__titulo { margin: 0 0 16px; font-size: 1.1rem; color: var(--azul); }
.videos__grupo + .videos__grupo { margin-top: 32px; }
.videos--con-selector .videos__titulo { display: none; }
.videos__selector[hidden], .videos__grupo[hidden] { display: none; }
.videos--con-selector .videos__grupo + .videos__grupo { margin-top: 0; }
.videos__nota { margin: 20px 0 0; font-size: .9rem; color: var(--suave); }

/* Móvil: un vídeo por fila, a todo el ancho; los botones del selector, mitad y mitad */
@media (max-width: 700px) {
    .videos { grid-template-columns: 1fr; }
    .videos__selector { display: grid; grid-template-columns: 1fr 1fr; }
    .videos__opcion { justify-content: center; padding: .65em .6em; }
    .video__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
}