/*
 * NAZARI · la web.
 *
 * Una sola hoja, sin marcos de terceros. La página tiene cinco bloques y un formulario:
 * traer aquí un framework entero sería descargar trescientos kilobytes para no usar el
 * noventa por ciento, y además ata el aspecto de la marca a las decisiones de otro.
 *
 * Los colores son los del manual de marca y están arriba, en un solo sitio, para que
 * cambiar el terracota sea cambiar una línea y no buscarlo por cuarenta reglas.
 */

:root {
    --noche: #0B1F33;
    --terracota: #C56A3D;
    --claro: #F7F6F3;
    --gris: #5F6870;
    --gris-medio: #9AA0A6;
    --blanco: #FFFFFF;

    /* Derivados. El terracota oscurecido para el texto sobre claro —el de marca no llega a
       contraste suficiente en cuerpo pequeño— y el gris cálido rebajado para las
       separaciones y el papel. */
    --terracota-honda: #A5522A;
    --terracota-suave: #F6E7DE;
    --linea: #E6E2DB;
    --papel: #FBFAF8;

    --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --ancho: 1140px;
    --radio: 14px;
    --sombra: 0 18px 50px -22px rgba(11, 31, 51, .30);
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--blanco);
    color: var(--noche);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: var(--terracota-honda); }

h1, h2, h3 {
    font-family: var(--serif);
    line-height: 1.15;
    letter-spacing: -.02em;
    text-wrap: balance;
    margin: 0 0 .6em;
}

h1 { font-size: clamp(2.5rem, 5.6vw, 3.9rem); font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -.01em; }
h3 { font-family: var(--sans); font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; }

p { margin: 0 0 1.1em; }

.contenedor {
    width: min(100% - 2.6rem, var(--ancho));
    margin-inline: auto;
}

/* El rótulo de sección: versalitas espaciadas, como en el manual de marca. */
.rotulo {
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--terracota-honda);
    margin: 0 0 1rem;
}

.entradilla {
    font-size: 1.16rem;
    color: var(--gris);
    max-width: 58ch;
}

/* ------------------------------------------------------------------ el logotipo */

/*
 * El logotipo es el del manual de marca —la N caligráfica no está en ninguna fuente—, así
 * que va como imagen con transparencia, en oscuro sobre claro y en blanco sobre el pie.
 * La altura se fija aquí y el ancho sale solo: la proporción es la del original.
 */
.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
}

.logo img { height: 46px; width: auto; display: block; }
.pie .logo img { height: 48px; }


.logo--claro { color: var(--blanco); }

/* -------------------------------------------------------------------- la barra */

.barra {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}

.barra.pegada { border-bottom-color: var(--linea); }

.barra > .contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 76px;
}

.barra nav {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.barra nav a { white-space: nowrap; }

.barra nav a {
    color: var(--noche);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
}

.barra nav a:hover { color: var(--terracota-honda); }

/* Y el botón de la barra se queda con SU color.
   «.barra nav a» pesa más que «.boton--lleno», así que sin esto el botón salía como una
   pastilla azul marino con la letra azul marino dentro: invisible. */
.barra nav a.boton--lleno,
.barra nav a.boton--iso { color: var(--blanco); }

.barra nav a.boton--linea { color: var(--noche); }
.barra nav a.boton--linea:hover { color: var(--terracota-honda); }

@media (max-width: 800px) {
    .barra nav a.solo-ancho { display: none; }
}

/* ------------------------------------------------------------------- botones */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: .98rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, background-color .2s;
}

.boton--lleno {
    background: var(--noche);
    color: var(--blanco);
    box-shadow: 0 10px 26px -14px rgba(11, 31, 51, .8);
}

.boton--lleno:hover { background: #17204a; transform: translateY(-1px); }

.boton--iso { background: var(--terracota); color: var(--blanco); }
.boton--iso:hover { background: var(--terracota-honda); transform: translateY(-1px); }

.boton--linea {
    background: transparent;
    border-color: var(--linea);
    color: var(--noche);
}

.boton--linea:hover { border-color: var(--terracota); color: var(--terracota-honda); }

.boton:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--terracota);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------- portada */

.portada {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
    background: linear-gradient(180deg, var(--papel), var(--blanco) 62%);
}

/* La diana de fondo: el propio isotipo, gigantesco y casi invisible. Es el gesto de la
   marca repetido a otra escala, no un adorno cualquiera. */
.portada .diana {
    position: absolute;
    top: -18%;
    right: -14%;
    width: min(58vw, 640px);
    color: var(--terracota);
    opacity: .11;
    pointer-events: none;
}

.portada .contenedor {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

@media (max-width: 940px) {
    .portada .contenedor { grid-template-columns: 1fr; }
    .portada .diana { top: auto; bottom: -20%; opacity: .08; }
}

.marca-grande {
    font-size: clamp(2.9rem, 7vw, 4.6rem);
    margin-bottom: 1.6rem;
}

.portada h1 {
    margin-bottom: .5em;
}

.portada h1 .segunda { color: var(--terracota-honda); display: block; }

.aviso-fase {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .9rem .35rem .55rem;
    margin-bottom: 1.6rem;
    border-radius: 999px;
    background: var(--claro);
    color: var(--terracota-honda);
    font-size: .82rem;
    font-weight: 600;
}

.aviso-fase .punto {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--terracota);
    box-shadow: 0 0 0 .25rem rgba(110, 134, 217, .25);
}

.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 2rem;
}

/* ------------------------------------------------- el trío de la portada */

/*
 * Lo que hace el programa, dicho en tres tarjetas y no en una captura de pantalla.
 *
 * Una captura de algo que todavía se está construyendo sería enseñar una promesa como si
 * fuera un hecho. Esto dice lo mismo sin fingir nada.
 */
.trio {
    display: grid;
    gap: .9rem;
}

.trio .pieza {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.3rem;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.trio .pieza:nth-child(2) { margin-left: clamp(0px, 4vw, 2.6rem); }
.trio .pieza:nth-child(3) { margin-left: clamp(0px, 8vw, 5.2rem); }

.trio .icono {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--claro);
    color: var(--terracota-honda);
}

.trio .pieza strong {
    display: block;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1.02rem;
}

.trio .pieza span {
    color: var(--gris);
    font-size: .92rem;
}

/* ------------------------------------------------------------------ secciones */

.seccion { padding: clamp(3.5rem, 7vw, 6rem) 0; }

.seccion--claro { background: var(--papel); border-block: 1px solid var(--linea); }

.cabecera-seccion { max-width: 62ch; margin-bottom: 3rem; }

/*
 * Tres columnas y seis tarjetas: dos filas llenas.
 *
 * Con la medida anterior cabían cuatro por fila y quedaban dos huérfanas al final, con
 * medio renglón de sitio vacío al lado. Una rejilla se lee mejor cuando las filas están
 * completas, así que la columna se mide para que entren tres y no cuatro.
 */
.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.4rem;
}

.tarjeta {
    padding: 1.9rem 1.7rem;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.tarjeta .icono {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 1.1rem;
    border-radius: 14px;
    background: var(--claro);
    color: var(--terracota-honda);
}

.tarjeta p { color: var(--gris); font-size: .97rem; margin: 0; }

/* --------------------------------------------------------------- banda oscura */

.banda {
    background: var(--noche);
    color: var(--blanco);
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.banda h2 { color: var(--blanco); }

.banda .entradilla { color: rgba(255, 255, 255, .72); }

.banda .rotulo { color: var(--terracota); }

.sectores {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 2.2rem;
}

.sectores li {
    list-style: none;
    padding: .55rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    font-size: .95rem;
    color: rgba(255, 255, 255, .9);
}

.sectores { padding: 0; margin-inline: 0; }

/* ---------------------------------------------------------------- formulario */

.contacto .contenedor {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

@media (max-width: 900px) {
    .contacto .contenedor { grid-template-columns: 1fr; }
}

.formulario {
    padding: clamp(1.6rem, 3vw, 2.4rem);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo--ancho { grid-column: 1 / -1; }

.campo label {
    font-size: .87rem;
    font-weight: 600;
    color: var(--noche);
}

.campo .pista { font-weight: 400; color: var(--gris); }

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: .78rem .95rem;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: var(--blanco);
    font-family: inherit;
    font-size: .98rem;
    color: var(--noche);
    transition: border-color .15s, box-shadow .15s;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: var(--terracota);
    box-shadow: 0 0 0 4px rgba(110, 134, 217, .18);
    outline: none;
}

.campo textarea { resize: vertical; min-height: 110px; }

.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"] { border-color: #C0392B; }

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

.consentimiento {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin: 1.3rem 0 1rem;
    font-size: .88rem;
    color: var(--gris);
}

.consentimiento input {
    margin-top: .25rem;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--terracota);
    flex: none;
}

/* La trampa para robots: invisible para las personas y sin decir que lo es. */
.telaraña {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.legal-corto {
    margin-top: 1.2rem;
    font-size: .78rem;
    line-height: 1.55;
    color: var(--gris);
}

.recado {
    display: none;
    padding: .95rem 1.1rem;
    margin-bottom: 1.4rem;
    border-radius: 12px;
    font-size: .93rem;
}

.recado.se-ve { display: block; }

.recado--bien {
    background: var(--claro);
    color: var(--terracota-honda);
    border: 1px solid rgba(110, 134, 217, .35);
}

.recado--mal {
    background: #FDF0EE;
    color: #96271A;
    border: 1px solid #F2C7C0;
}

/* La lista de ventajas junto al formulario. */
.ventajas { padding: 0; margin: 1.8rem 0 0; }

.ventajas li {
    list-style: none;
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    color: var(--gris);
    font-size: .97rem;
}

.ventajas svg { flex: none; margin-top: .22rem; color: var(--terracota); }

.ventajas strong { color: var(--noche); font-weight: 600; }

/* -------------------------------------------------------------------- el pie */

.pie {
    padding: 3rem 0 2.4rem;
    background: var(--noche);
    color: rgba(255, 255, 255, .66);
    font-size: .9rem;
}

.pie .contenedor {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    justify-content: space-between;
    align-items: center;
}

.pie a { color: var(--blanco); text-decoration: none; }
.pie a:hover { text-decoration: underline; }

.pie .raya {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, .12);
    margin: 1.8rem 0 0;
}

.pie .letra-pequeña {
    width: 100%;
    font-size: .8rem;
    color: rgba(255, 255, 255, .45);
    margin-top: 1.4rem;
}

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

/* ------------------------------------------------------- las páginas de texto */

/*
 * El aviso legal y la privacidad. Son páginas para leer, así que la medida se estrecha:
 * una línea de ciento veinte caracteres se pierde al saltar de renglón, y estas ya cuestan
 * bastante de leer por lo que dicen.
 */
.texto-legal {
    width: min(100% - 2.6rem, 74ch);
    margin-inline: auto;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 4rem;
}

.texto-legal h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); }

.texto-legal h2 {
    font-size: 1.28rem;
    margin-top: 2.6rem;
}

.texto-legal p,
.texto-legal li { color: #414A63; }

.texto-legal ul { padding-left: 1.2rem; }

.texto-legal li { margin-bottom: .5rem; }

.texto-legal .fecha {
    font-size: .85rem;
    color: var(--gris);
    margin-bottom: 2.5rem;
}

.texto-legal table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0 2rem;
    font-size: .95rem;
}

.texto-legal th,
.texto-legal td {
    text-align: left;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--linea);
    vertical-align: top;
}

.texto-legal th {
    width: 12rem;
    font-weight: 600;
    color: var(--noche);
}

.volver {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 2rem;
    font-size: .95rem;
    text-decoration: none;
}

/* ------------------------------------------------- lo que estaba en atributos style */

/*
 * NADA DE «style=» EN EL HTML, y no por gusto: la política de seguridad de contenido de
 * esta web prohíbe el estilo en línea —«style-src 'self'»—, y con razón, porque es la
 * puerta por la que se cuela media inyección de contenido. Mientras hubo atributos style,
 * el navegador los bloqueaba en silencio y el botón de enviar salía a medio ancho.
 */

/* La hoja donde vive el símbolo reutilizable: ocupa cero y no se ve. */
.sprite {
    position: absolute;
    width: 0;
    height: 0;
}

.boton--ancho { width: 100%; }

.pie .logo { font-size: 1.35rem; }

.pie p { margin: 0; }

.pie .lema { margin-top: .7rem; }

.pie .enlaces { margin-top: .3rem; }

/* La página de «gracias» que sale al enviar el formulario sin JavaScript. */
.gracias {
    max-width: 640px;
    text-align: center;
}

.gracias .simbolo { color: var(--terracota); }

.gracias h1 {
    font-size: 2rem;
    margin-top: 1.5rem;
}

.gracias .entradilla { margin-inline: auto; }

.gracias .vuelta { margin-top: 2rem; }

/* ================================================================== segunda web */

/*
 * Lo que sigue es la web de producto (septiembre de 2026): portada con la agenda de
 * demostración, funcionalidades, especialidades, IRIS, precios y la solicitud de prueba.
 * Sigue sin marcos de terceros y sin una sola regla en línea: la política de seguridad
 * de contenido lo prohíbe y el navegador la haría cumplir en silencio.
 */

:root {
    --verde: #2E9E6B;
    --ambar: #D98E04;
    --rojo: #C0392B;
    --sombra-suave: 0 10px 30px -18px rgba(11, 31, 51, .25);
}

.js .revela { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .revela.visto { opacity: 1; transform: none; }
.js .revela[data-tarda="1"] { transition-delay: .1s; }
.js .revela[data-tarda="2"] { transition-delay: .2s; }
.js .revela[data-tarda="3"] { transition-delay: .3s; }
.js .revela[data-tarda="4"] { transition-delay: .4s; }

/* ------------------------------------------------------------ barra: móvil */

.menu-boton {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: .6rem;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.menu-boton span { display: block; width: 22px; height: 2px; background: var(--noche); border-radius: 2px; transition: transform .2s, opacity .2s; }

.barra nav a[aria-current="page"] { color: var(--terracota-honda); }

.barra nav a.entrar { color: var(--gris); }

@media (max-width: 960px) {
    .menu-boton { display: flex; }
    .barra nav {
        display: none;
        position: absolute;
        left: 0; right: 0; top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .6rem 1.3rem 1.2rem;
        background: var(--blanco);
        border-bottom: 1px solid var(--linea);
        box-shadow: var(--sombra);
    }
    .barra.abierta nav { display: flex; }
    .barra nav a { padding: .75rem 0; border-bottom: 1px solid var(--linea); font-size: 1.05rem; }
    .barra nav a.boton { margin-top: .9rem; border-bottom: 0; }
    .barra.abierta .menu-boton span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .barra.abierta .menu-boton span:nth-child(2) { opacity: 0; }
    .barra.abierta .menu-boton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------------------------------------------------------------- portada 2 */

.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem);
    background: linear-gradient(180deg, var(--papel), var(--blanco) 70%);
}

.hero .diana {
    position: absolute;
    top: -22%;
    right: -10%;
    width: min(52vw, 620px);
    color: var(--terracota);
    opacity: .08;
    pointer-events: none;
    animation: deriva 40s ease-in-out infinite alternate;
}

@keyframes deriva {
    from { transform: translate(0, 0) rotate(0deg); }
    to { transform: translate(-3%, 4%) rotate(12deg); }
}

.hero .contenedor {
    position: relative;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

@media (max-width: 1000px) {
    .hero .contenedor { grid-template-columns: 1fr; }
}

.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); margin-bottom: .55em; }
.hero h1 .segunda { color: var(--terracota-honda); display: block; }

.hero .entradilla { font-size: 1.12rem; }

.hero .confianza {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .88rem;
    color: var(--gris);
}

.hero .confianza li { display: inline-flex; align-items: center; gap: .4rem; }
.hero .confianza svg { width: 18px; height: 18px; color: var(--terracota); }

/* La ventana en la que va la demostración: un marco de navegador sin más. */
.marco {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.marco-barra {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
}

.marco-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--linea); display: block; }
.marco-barra i:nth-child(1) { background: #F2B8B0; }
.marco-barra i:nth-child(2) { background: #F5D9A6; }
.marco-barra i:nth-child(3) { background: #BFE3CC; }

.marco-barra .url {
    flex: 1;
    margin-left: .6rem;
    padding: .25rem .8rem;
    border-radius: 999px;
    background: var(--blanco);
    border: 1px solid var(--linea);
    font-size: .74rem;
    color: var(--gris);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.marco-pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .55rem .9rem;
    border-top: 1px solid var(--linea);
    font-size: .78rem;
    color: var(--gris);
    background: var(--papel);
}

.marco-pie .boton { padding: .35rem .8rem; font-size: .78rem; white-space: nowrap; }

/* ------------------------------------------------------------ demo: agenda */

.demo-agenda {
    --alto-hora: 70px;
    font-size: .8rem;
    user-select: none;
    position: relative;
}

.demo-agenda-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem .8rem;
    border-bottom: 1px solid var(--linea);
}

.demo-agenda-cab strong { font-family: var(--sans); font-weight: 600; font-size: .9rem; }
.demo-agenda-cab .hoy { color: var(--gris); font-weight: 400; margin-left: .4rem; }

.demo-agenda-cab .botones { display: flex; gap: .35rem; }

.demo-agenda-cab button,
.demo-dialogo button,
.demo-panel button {
    padding: .32rem .7rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--blanco);
    color: var(--noche);
    font: inherit;
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
}

.demo-agenda-cab button.lleno { background: var(--noche); color: var(--blanco); border-color: var(--noche); }

.demo-rejilla {
    display: grid;
    grid-template-columns: 48px repeat(3, 1fr);
}

.demo-col-cab {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .5rem;
    border-bottom: 1px solid var(--linea);
    border-left: 1px solid var(--linea);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}

.demo-col-cab small { display: block; font-weight: 400; color: var(--gris); font-size: .7rem; }

.avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex: none;
    object-fit: cover;
    background: var(--claro);
}

.demo-horas { position: relative; }
.demo-horas div {
    height: var(--alto-hora);
    padding: .15rem .35rem 0 0;
    text-align: right;
    color: var(--gris);
    font-size: .7rem;
    border-top: 1px solid var(--linea);
}

.demo-col {
    position: relative;
    border-left: 1px solid var(--linea);
    background:
        repeating-linear-gradient(180deg, var(--linea) 0 1px, transparent 1px var(--alto-hora));
    min-height: calc(var(--alto-hora) * 5);
}

.demo-col.destino { background-color: var(--claro); }

.demo-ahora {
    position: absolute;
    left: 48px; right: 0;
    height: 2px;
    background: var(--terracota);
    z-index: 3;
    pointer-events: none;
}

.demo-ahora::before {
    content: '';
    position: absolute;
    left: -5px; top: -4px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--terracota);
}

.cita {
    position: absolute;
    left: 4px; right: 4px;
    padding: .3rem .45rem .3rem .55rem;
    border-radius: 9px;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-left: 4px solid var(--terracota);
    box-shadow: var(--sombra-suave);
    display: flex;
    gap: .45rem;
    align-items: flex-start;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    transition: box-shadow .15s, transform .15s;
}

.cita.anima { animation: entra-cita .5s ease both; }

@keyframes entra-cita {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.cita:hover { box-shadow: 0 12px 28px -16px rgba(11, 31, 51, .45); z-index: 4; }
.cita.arrastrando { opacity: .85; cursor: grabbing; z-index: 6; transform: scale(1.02); }
.cita.nueva.anima { animation: entra-cita .6s ease both, brilla 1.6s ease 1; }

@keyframes brilla {
    0%, 100% { box-shadow: var(--sombra-suave); }
    40% { box-shadow: 0 0 0 4px rgba(110, 134, 217, .35); }
}

.cita .avatar { width: 24px; height: 24px; margin-top: .05rem; }
.cita .quien { font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cita .linea2 { display: flex; justify-content: space-between; align-items: center; gap: .4rem; margin-top: .15rem; }
.cita .que { color: var(--gris); font-size: .72rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cita .cuerpo { min-width: 0; flex: 1; }
.cita .estado {
    flex: none;
    font-size: .62rem;
    font-weight: 600;
    padding: .1rem .4rem;
    border-radius: 999px;
    background: var(--claro);
    color: var(--terracota-honda);
    white-space: nowrap;
}

.cita--confirmada { border-left-color: var(--verde); }
.cita--confirmada .estado { background: #E4F5EC; color: #1E7A4F; }
.cita--sala { border-left-color: var(--ambar); }
.cita--sala .estado { background: #FFF3D6; color: #9A6400; }
.cita--atendida { border-left-color: var(--gris); opacity: .78; }
.cita--atendida .estado { background: #EEF0F4; color: var(--gris); }
.cita--web { border-left-color: var(--terracota-honda); }

.cita.corta .linea2 { display: none; }

.demo-dialogo {
    position: absolute;
    inset: auto 12px 12px 12px;
    z-index: 8;
    padding: .9rem 1rem;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 14px;
    box-shadow: var(--sombra);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    animation: entra-cita .3s ease both;
}

.demo-dialogo[hidden] { display: none; }
.demo-dialogo label { display: grid; gap: .2rem; font-size: .72rem; font-weight: 600; color: var(--gris); }
.demo-dialogo input, .demo-dialogo select {
    padding: .4rem .55rem;
    border: 1px solid var(--linea);
    border-radius: 8px;
    font: inherit;
    font-size: .82rem;
    color: var(--noche);
}
.demo-dialogo .fila-botones { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .4rem; }
.demo-dialogo button.lleno { background: var(--noche); color: var(--blanco); border-color: var(--noche); }

.aviso-flotante {
    position: absolute;
    right: 12px;
    top: 98px;
    z-index: 9;
    display: flex;
    gap: .6rem;
    align-items: center;
    max-width: 78%;
    padding: .55rem .8rem;
    background: var(--noche);
    color: var(--blanco);
    border-radius: 12px;
    box-shadow: var(--sombra);
    font-size: .78rem;
    animation: aviso 5.5s ease both;
    pointer-events: none;
}

.aviso-flotante .avatar { width: 28px; height: 28px; }
.aviso-flotante strong { display: block; font-weight: 600; }
.aviso-flotante span { color: rgba(255, 255, 255, .72); }
.aviso-flotante .icono-iso { color: var(--terracota); width: 22px; height: 22px; flex: none; }

@keyframes aviso {
    0% { opacity: 0; transform: translateY(-8px); }
    8%, 85% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(-6px); }
}

/* ------------------------------------------------------------- recorrido */

.recorrido {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
    counter-reset: paso;
}

@media (max-width: 1000px) { .recorrido { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .recorrido { grid-template-columns: 1fr 1fr; } }

.paso {
    position: relative;
    padding: 1.3rem 1.2rem 1.4rem;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    transition: border-color .3s, box-shadow .3s, transform .3s;
}

.paso.encendido { border-color: var(--terracota); box-shadow: 0 0 0 4px rgba(110, 134, 217, .14); }

.paso::before {
    counter-increment: paso;
    content: counter(paso);
    display: inline-grid;
    place-items: center;
    width: 30px; height: 30px;
    margin-bottom: .9rem;
    border-radius: 50%;
    background: var(--claro);
    color: var(--terracota-honda);
    font-family: var(--sans);
    font-weight: 600;
    font-size: .85rem;
    transition: background .3s, color .3s;
}

.paso.encendido::before { background: var(--terracota); color: var(--blanco); }

.paso h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.paso p { color: var(--gris); font-size: .9rem; margin: 0; }

.paso .mini {
    margin: 1rem -.4rem 0;
    padding: .6rem;
    border-radius: 10px;
    background: var(--papel);
    border: 1px solid var(--linea);
    display: grid;
    gap: .35rem;
}

/* Piezas de interfaz en miniatura: una fila, una pastilla, una barra. Es la manera de
   enseñar «una pantalla» sin fingir una captura de algo que se ve en la demo real. */
.ui-fila { display: flex; align-items: center; gap: .4rem; font-size: .68rem; color: var(--noche); }
.ui-fila .avatar { width: 18px; height: 18px; }
.ui-barra { height: 7px; border-radius: 999px; background: var(--linea); position: relative; overflow: hidden; }
.ui-barra i { position: absolute; inset: 0 auto 0 0; width: var(--w, 60%); background: var(--terracota); border-radius: inherit; }
.ui-pill { display: inline-block; padding: .1rem .45rem; border-radius: 999px; font-size: .62rem; font-weight: 600; background: var(--claro); color: var(--terracota-honda); }
.ui-pill--ok { background: #E4F5EC; color: #1E7A4F; }
.ui-pill--ambar { background: #FFF3D6; color: #9A6400; }
.ui-linea { height: 6px; border-radius: 999px; background: var(--linea); width: var(--w, 80%); }
.ui-linea--oscura { background: #C9D1E6; }
.ui-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--terracota); flex: none; }
.ui-cifra { font-family: var(--sans); font-weight: 600; font-size: 1rem; }
.ui-onda { display: flex; align-items: center; gap: 2px; height: 18px; }
.ui-onda i { display: block; width: 3px; border-radius: 2px; background: var(--terracota); height: var(--h, 40%); animation: onda 1.1s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }

@keyframes onda { from { transform: scaleY(.45); } to { transform: scaleY(1.15); } }

/* ------------------------------------------------------- diferenciales */

.diferenciales {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
}

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

.diferencial {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1.2rem;
    padding: 2rem 1.9rem;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.diferencial .icono {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: var(--claro);
    color: var(--terracota-honda);
}

.diferencial h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.diferencial p { color: var(--gris); margin: 0; }
.diferencial .por-que { margin-top: .8rem; font-size: .9rem; color: var(--terracota-honda); font-weight: 600; }

.banda .diferencial { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.banda .diferencial h3 { color: var(--blanco); }
.banda .diferencial p { color: rgba(255, 255, 255, .72); }
.banda .diferencial .icono { background: rgba(110, 134, 217, .18); color: var(--terracota); }
.banda .diferencial .por-que { color: var(--terracota); }

/* ------------------------------------------------------------- funciones */

.funciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

@media (max-width: 900px) { .funciones { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .funciones { grid-template-columns: 1fr; } }

.funcion {
    display: block;
    padding: 1.6rem 1.5rem;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    color: inherit;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.funcion:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: #CFD8F0; }
.funcion .icono { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--claro); color: var(--terracota-honda); margin-bottom: 1rem; }
.funcion h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.funcion p { color: var(--gris); font-size: .93rem; margin: 0; }
.funcion .mas { display: inline-block; margin-top: .8rem; font-size: .88rem; font-weight: 600; color: var(--terracota-honda); }

.especialidades-banda {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: 0;
    margin: 2rem 0 0;
    list-style: none;
}

.especialidades-banda a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--blanco);
    color: var(--noche);
    text-decoration: none;
    font-size: .93rem;
    font-weight: 500;
    transition: border-color .2s, color .2s;
}

.especialidades-banda a:hover { border-color: var(--terracota); color: var(--terracota-honda); }

/* ------------------------------------------------------------ demo: panel */

.demo-panel { font-size: .82rem; padding: .9rem; display: grid; gap: .9rem; }

.demo-panel-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.demo-panel-cab strong { font-family: var(--sans); font-size: .95rem; }
.demo-panel-cab .rangos { display: flex; gap: .3rem; }
.demo-panel-cab .rangos button[aria-pressed="true"] { background: var(--noche); color: var(--blanco); border-color: var(--noche); }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
@media (max-width: 640px) { .kpis { grid-template-columns: 1fr 1fr; } }

.kpi {
    padding: .8rem .9rem;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: var(--papel);
}

.kpi small { display: block; color: var(--gris); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.kpi strong { display: block; font-family: var(--sans); font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .tendencia { font-size: .7rem; color: #1E7A4F; font-weight: 600; }
.kpi .tendencia.baja { color: var(--rojo); }

.demo-panel-cuerpo { display: grid; grid-template-columns: 1.3fr 1fr; gap: .9rem; }
@media (max-width: 640px) { .demo-panel-cuerpo { grid-template-columns: 1fr; } }

.demo-caja { border: 1px solid var(--linea); border-radius: 12px; padding: .8rem .9rem; }
.demo-caja h4 { margin: 0 0 .6rem; font-size: .8rem; font-weight: 600; display: flex; justify-content: space-between; }
.demo-caja h4 span { color: var(--gris); font-weight: 400; }

.grafica { width: 100%; height: 130px; display: block; }
.grafica .barra { fill: var(--terracota); transform-origin: bottom; transform: scaleY(0); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.grafica.dibujada .barra { transform: scaleY(1); }
.grafica .barra.hoy { fill: var(--noche); }
.grafica text { font-size: 9px; fill: var(--gris); font-family: 'Inter', sans-serif; }
.grafica .eje { stroke: var(--linea); }

.lista-demo { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.lista-demo li { display: flex; align-items: center; gap: .55rem; }
.lista-demo .quien { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-demo .quien small { display: block; color: var(--gris); font-size: .7rem; }
.lista-demo time { color: var(--gris); font-size: .74rem; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- precios */

.planes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
    align-items: stretch;
}

@media (max-width: 1000px) { .planes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .planes { grid-template-columns: 1fr; } }

.plan {
    display: flex;
    flex-direction: column;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}

.plan:hover { transform: translateY(-3px); box-shadow: var(--sombra); }

.plan-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: 1.2rem 1.4rem 1rem;
    border-bottom: 1px solid var(--linea);
}

.plan-cab h3 { font-size: 1.45rem; margin: 0; }

.plan--destacado { border-color: var(--noche); box-shadow: var(--sombra); }
.plan--destacado .plan-cab { background: var(--noche); color: var(--blanco); border-bottom-color: var(--noche); }
.plan--destacado .plan-cab h3 { color: var(--blanco); }
.plan--destacado .plan-cuerpo { background: var(--claro); }

.etiqueta-popular {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .25rem .55rem;
    border-radius: 6px;
    background: var(--blanco);
    color: var(--noche);
}

.plan-cuerpo { padding: 1.3rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }

.plan-frase { color: var(--gris); font-size: .95rem; margin: 0; min-height: 3.1em; }

.plan-precio { display: flex; flex-direction: column; gap: .1rem; }
.plan-precio strong {
    font-family: var(--sans);
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: opacity .2s;
}
.plan-precio strong.cambia { opacity: .35; }
.plan-precio strong small { font-size: 1.6rem; font-weight: 600; }
.plan-precio span { color: var(--gris); font-size: .84rem; }
.plan-precio .a-convenir { font-size: 1.7rem; }

.plan .boton { width: 100%; }
.plan--destacado .boton--linea { background: var(--blanco); }

.interruptor {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    cursor: pointer;
    font-size: .92rem;
    font-weight: 600;
}

.interruptor .texto { display: grid; gap: .1rem; }

.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }

.interruptor .palanca {
    position: relative;
    width: 44px; height: 24px;
    border-radius: 999px;
    background: #CBD3E6;
    transition: background .2s;
    flex: none;
    margin-top: .1rem;
}

.interruptor .palanca::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--blanco);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s;
}

.interruptor input:checked + .palanca { background: var(--terracota); }
.interruptor input:checked + .palanca::after { transform: translateX(20px); }
.interruptor input:focus-visible + .palanca { outline: 3px solid var(--terracota); outline-offset: 2px; }

.interruptor .rotulo-iris { display: inline-flex; align-items: center; gap: .35rem; }
.interruptor .rotulo-iris svg { width: 14px; height: 14px; color: var(--terracota); }
.interruptor small { font-weight: 400; color: var(--gris); font-size: .8rem; }

.plan-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .92rem; }
.plan-lista li { display: flex; gap: .55rem; align-items: flex-start; }
.plan-lista li::before { display: none; }
.plan-lista svg { width: 18px; height: 18px; flex: none; color: var(--terracota-honda); margin-top: .12rem; }
.plan-lista .titulo-lista { display: block; font-weight: 600; margin-top: .3rem; }

.plan-nota { color: var(--gris); font-size: .8rem; margin: 0; }

.planes-pie { text-align: center; margin-top: 1.6rem; color: var(--gris); font-size: .92rem; }

.incluido {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

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

.incluido .tarjeta ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; color: var(--gris); font-size: .95rem; }
.incluido .tarjeta li { display: flex; gap: .5rem; }
.incluido .tarjeta li svg { width: 18px; height: 18px; flex: none; color: var(--terracota); margin-top: .15rem; }

.anadidos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .anadidos { grid-template-columns: 1fr 1fr; } }
.anadido { padding: 1.3rem 1.3rem; border: 1px solid var(--linea); border-radius: 14px; background: var(--blanco); }
.anadido strong { display: block; font-family: var(--sans); font-weight: 600; }
.anadido span { color: var(--gris); font-size: .9rem; }
.anadido .precio { display: block; margin-top: .6rem; font-weight: 600; color: var(--terracota-honda); }

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }

.tabla-planes { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .93rem; }
.tabla-planes th, .tabla-planes td { padding: .75rem 1rem; text-align: center; border-bottom: 1px solid var(--linea); }
.tabla-planes th:first-child, .tabla-planes td:first-child { text-align: left; position: sticky; left: 0; background: var(--blanco); }
.tabla-planes thead th { font-family: var(--sans); font-weight: 600; background: var(--papel); }
.tabla-planes thead th small { display: block; font-family: 'Inter', sans-serif; font-weight: 400; color: var(--gris); font-size: .78rem; }
.tabla-planes tbody th { font-weight: 500; color: var(--noche); }
.tabla-planes .modulo th { background: var(--papel); font-family: var(--sans); font-weight: 600; color: var(--terracota-honda); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; padding-top: 1.1rem; }
.tabla-planes .si { color: var(--terracota-honda); }
.tabla-planes .si svg { width: 20px; height: 20px; }
.tabla-planes .no { color: #C5CBDA; }
.tabla-planes td.texto { font-size: .85rem; color: var(--gris); }

.faq { display: grid; gap: .7rem; max-width: 820px; margin: 0 auto; }
.faq details { background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; padding: 0 1.3rem; }
.faq summary { padding: 1.05rem 0; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.4rem; color: var(--terracota-honda); line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--gris); margin: 0 0 1.1rem; }

.cierre {
    text-align: center;
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.cierre h2 { margin-bottom: .5rem; }
.cierre .entradilla { margin-inline: auto; }
.cierre .acciones { justify-content: center; }

/* ------------------------------------------------------------ probar */

.probar .contenedor { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .probar .contenedor { grid-template-columns: 1fr; } }

.pasos-form {
    display: flex;
    gap: .6rem;
    margin-bottom: 1.4rem;
    padding: 0;
    list-style: none;
    font-size: .85rem;
    font-weight: 600;
    color: var(--gris);
}

.pasos-form li { display: flex; align-items: center; gap: .45rem; }
.pasos-form li::before { content: attr(data-n); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--linea); color: var(--gris); font-size: .75rem; }
.pasos-form li.activo { color: var(--noche); }
.pasos-form li.activo::before { background: var(--terracota); color: var(--blanco); }
.pasos-form li.hecho::before { background: var(--noche); color: var(--blanco); content: '✓'; }
.pasos-form li + li { margin-left: .4rem; padding-left: 1rem; border-left: 1px solid var(--linea); }

.paso-form[hidden] { display: none; }

.casillas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; margin-top: .3rem; }
@media (max-width: 560px) { .casillas { grid-template-columns: 1fr; } }
.casillas label { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; font-weight: 400; color: var(--noche); }
.casillas input { margin-top: .25rem; accent-color: var(--terracota); width: 1.05rem; height: 1.05rem; flex: none; }

.todos-ninguno { display: flex; gap: .8rem; font-size: .82rem; margin-top: .4rem; }
.todos-ninguno button { border: 0; background: none; color: var(--terracota-honda); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; padding: 0; }

.fila-botones-form { display: flex; justify-content: space-between; gap: .8rem; align-items: center; margin-top: 1.2rem; flex-wrap: wrap; }
.fila-botones-form .atras { border: 0; background: none; color: var(--gris); font: inherit; font-size: .92rem; cursor: pointer; }

.promesa { padding: 0; margin: 1.8rem 0 0; list-style: none; display: grid; gap: .9rem; }
.promesa li { display: flex; gap: .8rem; color: var(--gris); }
.promesa svg { flex: none; width: 22px; height: 22px; color: var(--terracota); margin-top: .1rem; }
.promesa strong { color: var(--noche); display: block; }

.accesos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.8rem 0; text-align: left; }
@media (max-width: 720px) { .accesos { grid-template-columns: 1fr; } }
.acceso { padding: 1.2rem 1.3rem; border: 1px solid var(--linea); border-radius: 14px; background: var(--blanco); }
.acceso strong { display: block; font-family: var(--sans); font-weight: 600; margin-bottom: .5rem; }
.acceso dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .25rem .7rem; font-size: .9rem; }
.acceso dt { color: var(--gris); }
.acceso dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; }
.acceso p { color: var(--gris); font-size: .85rem; margin: .6rem 0 0; }

.aviso-demo {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .9rem 1.1rem;
    border-radius: 12px;
    background: #FFF7E6;
    border: 1px solid #F3DDA8;
    color: #7A5100;
    font-size: .9rem;
    text-align: left;
}

.gracias.ancha { max-width: 860px; }

/* -------------------------------------------------- bloques de funcionalidades */

.bloque {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    border-bottom: 1px solid var(--linea);
}

.bloque:last-of-type { border-bottom: 0; }
.bloque:nth-of-type(even) .bloque-texto { order: 2; }
@media (max-width: 860px) {
    .bloque { grid-template-columns: 1fr; }
    .bloque:nth-of-type(even) .bloque-texto { order: 0; }
}

.bloque h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.bloque .rotulo { margin-bottom: .6rem; }

.puntos { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .6rem; }
.puntos li { display: flex; gap: .6rem; align-items: flex-start; color: #414A63; }
.puntos svg { width: 20px; height: 20px; flex: none; color: var(--terracota); margin-top: .18rem; }
.puntos strong { color: var(--noche); }

.maqueta {
    padding: 1rem;
    display: grid;
    gap: .7rem;
    font-size: .8rem;
}

.maqueta .fila-cab { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.maqueta .fila-cab strong { font-family: var(--sans); }

.maqueta .tarjetita { border: 1px solid var(--linea); border-radius: 10px; padding: .6rem .75rem; background: var(--blanco); display: grid; gap: .35rem; }
.maqueta .tarjetita.firmada { border-left: 4px solid var(--verde); }
.maqueta .tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.maqueta .dos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.maqueta .texto-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; color: var(--gris); word-break: break-all; }
.maqueta .asiento { display: grid; grid-template-columns: 1fr auto auto; gap: .2rem .8rem; font-variant-numeric: tabular-nums; font-size: .74rem; }
.maqueta .asiento span:nth-child(3n+2), .maqueta .asiento span:nth-child(3n) { text-align: right; }
.maqueta .asiento .cab { color: var(--gris); font-weight: 600; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; }
.maqueta .total { border-top: 1px solid var(--linea); padding-top: .3rem; font-weight: 600; }

.diente-fila { display: flex; gap: 3px; }
.diente { width: 100%; aspect-ratio: 1 / 1.35; border-radius: 4px 4px 6px 6px; background: var(--papel); border: 1px solid var(--linea); }
.diente--caries { background: #F6D6D2; border-color: #E29B92; }
.diente--obt { background: var(--claro); border-color: var(--terracota); }
.diente--falta { background: transparent; border-style: dashed; }

.cuerpo-mapa { position: relative; width: 70px; margin: 0 auto; }
.cuerpo-mapa svg { width: 100%; display: block; color: #C9D1E6; }
.cuerpo-mapa .marca { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 3px rgba(192, 57, 43, .25); }

/* ---------------------------------------------------- páginas de especialidad */

.cabecera-pagina {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
    background: linear-gradient(180deg, var(--papel), var(--blanco));
    border-bottom: 1px solid var(--linea);
}

.cabecera-pagina h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
.cabecera-pagina .entradilla { font-size: 1.15rem; }
.cabecera-pagina .acciones { margin-top: 1.6rem; }

.especialidad-cab .contenedor { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .especialidad-cab .contenedor { grid-template-columns: 1fr; } }

.especialidades-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }

.especialidad-tarjeta {
    display: block;
    padding: 1.6rem 1.5rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--blanco);
    color: inherit;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}

.especialidad-tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.especialidad-tarjeta .icono { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--claro); color: var(--terracota-honda); margin-bottom: 1rem; }
.especialidad-tarjeta h3 { margin-bottom: .3rem; }
.especialidad-tarjeta p { color: var(--gris); font-size: .93rem; margin: 0; }

.plantillas-lista { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.2rem 0 0; }
.plantillas-lista li { padding: .4rem .85rem; border-radius: 999px; background: var(--claro); color: var(--terracota-honda); font-size: .88rem; font-weight: 600; }

/* ------------------------------------------------------------ demo: IRIS */

.iris-demo { padding: 1.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; font-size: .84rem; }
@media (max-width: 760px) { .iris-demo { grid-template-columns: 1fr; } }

.iris-escucha { display: grid; gap: .8rem; align-content: start; }
.iris-escucha .estado-grab { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.iris-escucha .estado-grab .punto-rojo { width: 10px; height: 10px; border-radius: 50%; background: var(--rojo); animation: late 1.2s ease-in-out infinite; }
@keyframes late { 50% { opacity: .3; } }
.iris-escucha .onda-grande { display: flex; align-items: center; gap: 3px; height: 48px; }
.iris-escucha .onda-grande i { display: block; flex: 1; border-radius: 3px; background: var(--terracota); height: var(--h, 40%); animation: onda 1s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.iris-escucha .onda-grande.quieta i { animation: none; height: 12%; }
.transcripcion { min-height: 7.5em; padding: .8rem .9rem; border: 1px solid var(--linea); border-radius: 12px; background: var(--papel); color: #414A63; line-height: 1.55; }
.transcripcion .cursor { display: inline-block; width: 2px; height: 1em; background: var(--terracota); vertical-align: -.15em; animation: late .9s steps(1) infinite; }

.iris-resultado { display: grid; gap: .6rem; align-content: start; }
.iris-resultado .campo-iris { padding: .65rem .8rem; border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco); opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.iris-resultado .campo-iris.se-ve { opacity: 1; transform: none; }
.iris-resultado .campo-iris small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--terracota-honda); margin-bottom: .2rem; }
.iris-resultado .alerta { border-color: #F3DDA8; background: #FFF7E6; color: #7A5100; }
.iris-resultado .alerta small { color: #9A6400; }
.iris-resultado .firmar { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font-size: .78rem; color: var(--gris); }
.iris-resultado .firmar button { padding: .38rem .8rem; border-radius: 999px; border: 1px solid var(--noche); background: var(--noche); color: var(--blanco); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.iris-resultado .firmar button:disabled { opacity: .4; cursor: default; }

.no-js-aviso { display: none; }

/* ------------------------------------------------------------- pie ancho */

.pie-rejilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie-rejilla { grid-template-columns: 1fr; } }
.pie-rejilla > div a { display: block; margin-bottom: .45rem; color: rgba(255, 255, 255, .8); }
.pie-rejilla > div a:hover { color: var(--blanco); }
.pie-titulo { font-family: var(--sans); font-weight: 600; color: var(--blanco); margin: 0 0 .8rem; }
.pie-nota { font-size: .85rem; margin-top: .8rem; max-width: 34ch; }
.pie .raya { grid-column: 1 / -1; }
.pie .letra-pequeña { grid-column: 1 / -1; margin-top: 0; }

/* Las cosas que se mueven, quietas para quien lo pide. */
@media (prefers-reduced-motion: reduce) {
    .js .revela { opacity: 1; transform: none; }
    .hero .diana, .cita, .ui-onda i, .onda-grande i, .aviso-flotante, .punto-rojo, .cursor { animation: none !important; }
    .grafica .barra { transform: none; transition: none; }
    .iris-resultado .campo-iris { opacity: 1; transform: none; transition: none; }
}

/* Anchos de las piezas en miniatura: clases, no atributos style (la CSP los prohíbe). */
.w60 { --w: 60%; } .w70 { --w: 70%; } .w80 { --w: 80%; } .w90 { --w: 90%; } .w92 { --w: 92%; }
.ui-barra.crece { flex: 1; }
.ui-onda i:nth-child(1) { --h: 40%; } .ui-onda i:nth-child(2) { --h: 80%; --d: .1s; } .ui-onda i:nth-child(3) { --h: 60%; --d: .2s; }
.ui-onda i:nth-child(4) { --h: 100%; --d: .3s; } .ui-onda i:nth-child(5) { --h: 50%; --d: .4s; } .ui-onda i:nth-child(6) { --h: 75%; --d: .5s; } .ui-onda i:nth-child(7) { --h: 35%; --d: .6s; }
.onda-grande i:nth-child(8n+1) { --h: 35%; } .onda-grande i:nth-child(8n+2) { --h: 70%; --d: .1s; } .onda-grande i:nth-child(8n+3) { --h: 50%; --d: .2s; } .onda-grande i:nth-child(8n+4) { --h: 95%; --d: .3s; }
.onda-grande i:nth-child(8n+5) { --h: 60%; --d: .15s; } .onda-grande i:nth-child(8n+6) { --h: 80%; --d: .35s; } .onda-grande i:nth-child(8n+7) { --h: 40%; --d: .05s; } .onda-grande i:nth-child(8n+8) { --h: 65%; --d: .25s; }
.aparte { margin-top: 3.5rem; }
.cuerpo-mapa .marca--lumbar { left: 26px; top: 74px; }
.maqueta .tarjetita--aviso { border-left: 4px solid var(--ambar); }
.w30 { --w: 30%; } .w40 { --w: 40%; }
.puntos--dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
@media (max-width: 760px) { .puntos--dos { grid-template-columns: 1fr; } }
.maqueta small { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.recorrido--cuatro { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .recorrido--cuatro { grid-template-columns: 1fr 1fr; } }
.campo-rotulo { font-size: .87rem; font-weight: 600; }
.cabecera-pagina .rotulo svg { vertical-align: -.1em; }
.probar h1, .contacto h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
.probar .aviso-demo { margin-top: 1.6rem; }
.iris-escucha .onda-grande i { flex: 0 0 5px; }

/* ------------------------------------------------- la boca, como en el programa */

.boca { --esmalte: #F7F1E4; --esmalte-line: #B9A98A; --od-suave: #E9E2D2; padding: .6rem .4rem .2rem; overflow-x: auto; }
.od-arcada { display: flex; justify-content: center; gap: 2px; min-width: 640px; }
.od-arcada + .od-arcada { margin-top: .4rem; }
.od-diente { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 40px; }
.od-diente .perfil { width: 30px; height: 72px; }
.od-cuadro svg { width: 38px; height: 34px; display: block; }
.od-cuadro path, .od-cuadro rect { fill: var(--esmalte); stroke: var(--esmalte-line); stroke-width: 1; }
.od-cuadro .capa-hallazgo { fill: #E5484D; }
.od-cuadro .capa-propuesto { fill: #3B6DE0; }
.od-cuadro .capa-realizado { fill: #2E9E6B; }
.od-t.ausente path, .od-t.ausente rect { fill: transparent; stroke-dasharray: 2 2; opacity: .5; }
.perfil.ausente { opacity: .25; }
.od-fdi { font-size: .68rem; font-weight: 600; color: var(--gris); font-variant-numeric: tabular-nums; }
.od-leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .72rem; color: var(--gris); margin-top: .5rem; padding: 0 .4rem; }
.od-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.pd-fila { display: flex; justify-content: center; gap: 2px; min-width: 640px; }
.pd-diente { display: flex; flex-direction: column; align-items: center; width: 40px; }
.pd-diente svg { width: 34px; height: 82px; }
.pd-diente path:not(.pd-margen) { fill: var(--esmalte); stroke: var(--esmalte-line); }
.pd-lac { stroke: #9AA3B8; stroke-dasharray: 3 2; stroke-width: 1; }
.pd-margen { fill: none; stroke: #E5484D; stroke-width: 1.6; }
.pd-bolsa { stroke: #B3121F; stroke-width: 2.4; }
.pd-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; padding: .6rem .6rem 0; }
.pd-cifras div { border: 1px solid var(--linea); border-radius: 10px; padding: .5rem .6rem; }
.pd-cifras strong { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #1E7A4F; font-size: .95rem; }
.pd-cifras strong.mal { color: var(--rojo); }
.pd-cifras small { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }

/* ------------------------------------------------- la ficha de la cita (como en la agenda) */

.demo-ficha {
    position: absolute;
    z-index: 9;
    width: 260px;
    padding: .9rem 1rem;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 14px;
    box-shadow: var(--sombra);
    font-size: .8rem;
    animation: entra-cita .2s ease both;
}
.demo-ficha[hidden] { display: none; }
.demo-ficha .cab { display: flex; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.demo-ficha .cab .avatar { width: 36px; height: 36px; }
.demo-ficha .cab strong { display: block; font-size: .92rem; }
.demo-ficha .cab span { color: var(--gris); font-size: .74rem; }
.demo-ficha dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; margin: 0 0 .7rem; }
.demo-ficha dt { color: var(--gris); }
.demo-ficha dd { margin: 0; }
.demo-ficha .botones { display: flex; gap: .4rem; flex-wrap: wrap; }
.demo-ficha .botones a { padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--linea); color: var(--noche); text-decoration: none; font-size: .74rem; font-weight: 600; }
.demo-ficha .botones a.lleno { background: var(--noche); color: var(--blanco); border-color: var(--noche); }
.demo-ficha .cerrar { position: absolute; right: .5rem; top: .35rem; border: 0; background: none; font-size: 1.1rem; color: var(--gris); cursor: pointer; padding: .2rem .4rem; }
.cita { cursor: pointer; }
.cita.elegida { box-shadow: 0 0 0 3px rgba(110, 134, 217, .35); z-index: 5; }

/* ------------------------------------------------- antes de irte */

.salida { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.3rem; background: rgba(11, 31, 51, .55); backdrop-filter: blur(3px); }
.salida[hidden] { display: none; }
.salida-caja { position: relative; width: min(100%, 560px); padding: 2.2rem 2.2rem 2rem; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); animation: entra-cita .25s ease both; }
.salida-caja h2 { font-size: 1.6rem; margin-bottom: .5rem; }
.salida-caja p { color: var(--gris); margin-bottom: 1.4rem; }
.salida-caja .acciones { margin: 0; }
.salida-caja .cerrar { position: absolute; right: .9rem; top: .7rem; border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--gris); cursor: pointer; padding: .3rem .5rem; }
.salida-caja .cerrar:hover { color: var(--noche); }
.salida-caja .iso-grande { width: 42px; height: 42px; color: var(--terracota); margin-bottom: 1rem; }
.od-leyenda .cap-h { background: #E5484D; } .od-leyenda .cap-p { background: #3B6DE0; } .od-leyenda .cap-r { background: #2E9E6B; }
.especialidad-cab .marco .maqueta { font-size: .78rem; }
.especialidad-cab--ancha .contenedor { grid-template-columns: 1fr; }
.especialidad-cab--ancha .boca .od-arcada, .especialidad-cab--ancha .boca .pd-fila { min-width: 0; }
.sin-scroll { overflow: hidden; }
.especialidad-cab--ancha .od-diente, .especialidad-cab--ancha .pd-diente { width: 56px; }
.especialidad-cab--ancha .od-cuadro svg { width: 46px; height: 42px; }
.especialidad-cab--ancha .od-diente .perfil, .especialidad-cab--ancha .pd-diente svg { width: 34px; height: 82px; }
.od-sup .od-diente { flex-direction: column-reverse; }
.barra nav span.entrar { color: var(--gris); font-size: .95rem; font-weight: 500; cursor: default; white-space: nowrap; }
.pie-rejilla > div .pie-pronto { display: block; margin-bottom: .45rem; color: rgba(255, 255, 255, .45); }

/* ------------------------------------------------------ el camino de la cita */

.camino {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1rem;
    min-height: 300px;
}
.camino-linea { position: absolute; inset: 0 0 auto 0; width: 100%; height: 220px; pointer-events: none; }
.hito { position: relative; z-index: 1; text-align: center; padding: 0 .4rem; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.hito--alto { margin-top: 0; }
.hito--bajo { margin-top: 80px; }
.hito--medio { margin-top: 40px; }
.hito:hover { transform: translateY(-10px); }
.hito-icono {
    display: grid; place-items: center;
    width: 64px; height: 64px; margin: 0 auto .8rem;
    border-radius: 50%;
    background: var(--blanco);
    border: 2px solid var(--terracota);
    color: var(--terracota-honda);
    box-shadow: 0 10px 24px -14px rgba(74, 99, 190, .6);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .3s, color .3s;
}
.hito:hover .hito-icono { transform: scale(1.08); background: var(--terracota); color: var(--blanco); }
.hito h3 { font-size: 1.02rem; margin-bottom: .25rem; }
.hito p { color: var(--gris); font-size: .86rem; margin: 0; line-height: 1.45; }
@media (max-width: 800px) {
    .camino { grid-template-columns: 1fr 1fr; min-height: 0; }
    .camino-linea { display: none; }
    .hito, .hito--bajo, .hito--medio { margin-top: 0; }
}

/* ------------------------------------------------------ todo conectado */

.conectado { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .conectado { grid-template-columns: 1fr; } }
.conectado-texto h2 { font-size: clamp(2.4rem, 4.5vw, 3.4rem); }
.conectado-texto .boton { margin-top: .6rem; }
.conectado-mapa {
    position: relative;
    min-height: 520px;
    border-radius: var(--radio);
    background: radial-gradient(circle at 60% 50%, rgba(110, 134, 217, .22), rgba(110, 134, 217, .04) 45%, transparent 70%);
}
.conectado-iso {
    position: absolute; left: 50%; top: 50%; width: 150px; height: 150px;
    transform: translate(-50%, -50%);
    color: var(--terracota);
    filter: drop-shadow(0 24px 40px rgba(74, 99, 190, .35));
    animation: respira 6s ease-in-out infinite;
}
@keyframes respira { 50% { transform: translate(-50%, -50%) scale(1.05); } }
.conectado-nota {
    position: absolute; left: 4%; top: 64%;
    font-family: var(--sans); font-style: italic; font-size: .92rem; line-height: 1.3;
    color: var(--terracota-honda); transform: rotate(-6deg);
}
.nodo {
    position: absolute;
    display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .15rem .7rem; align-items: center;
    width: 226px; padding: .8rem .9rem;
    overflow-wrap: anywhere;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 14px;
    box-shadow: var(--sombra);
    color: inherit; text-decoration: none;
    animation: flota 7s ease-in-out infinite;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.nodo .icono { grid-row: 1 / 3; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--claro); color: var(--terracota-honda); }
.nodo strong { font-family: var(--sans); font-weight: 600; font-size: .92rem; line-height: 1.2; min-width: 0; }
.nodo span:not(.icono) { color: var(--gris); font-size: .76rem; line-height: 1.3; }
.nodo:hover { transform: translateY(-8px) scale(1.04); box-shadow: 0 24px 44px -18px rgba(11, 31, 51, .4); border-color: var(--terracota); animation-play-state: paused; z-index: 3; }
@keyframes flota { 50% { translate: 0 -8px; } }
.nodo-1 { left: 6%; top: 6%; animation-delay: 0s; }
.nodo-2 { right: 4%; top: 12%; animation-delay: -1.2s; }
.nodo-3 { right: 2%; top: 46%; animation-delay: -2.4s; }
.nodo-4 { left: 2%; top: 44%; animation-delay: -3.6s; }
.nodo-5 { left: 10%; bottom: 6%; animation-delay: -4.8s; }
.nodo-6 { right: 4%; bottom: 4%; animation-delay: -6s; }
@media (max-width: 900px) {
    .conectado-mapa { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: 1rem 0; background: none; }
    .conectado-iso { position: static; transform: none; grid-column: 1 / -1; width: 90px; height: 90px; margin: 0 auto .4rem; animation: none; }
    .conectado-nota { display: none; }
    .nodo { position: static; width: auto; animation: none; }
}

/* ------------------------------------------------------ especialidades en losetas */

.esp-cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.esp-cabecera h2 { margin-bottom: 0; }
.esp-todas { font-weight: 600; text-decoration: none; white-space: nowrap; }
.esp-todas:hover { text-decoration: underline; }
.esp-losetas { display: grid; grid-template-columns: repeat(11, 1fr); gap: .8rem; }
@media (max-width: 1100px) { .esp-losetas { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 640px) { .esp-losetas { grid-template-columns: repeat(3, 1fr); } }
.loseta { display: grid; justify-items: center; gap: .55rem; text-decoration: none; color: var(--noche); font-size: .78rem; font-weight: 500; text-align: center; line-height: 1.25; }
.loseta-icono {
    display: grid; place-items: center;
    width: 100%; aspect-ratio: 1 / 1; max-width: 88px;
    border-radius: 22px;
    background: var(--claro);
    color: var(--terracota-honda);
    transition: transform .3s, background .3s, color .3s, box-shadow .3s;
}
.loseta-icono svg { width: 30px; height: 30px; }
.loseta:hover .loseta-icono { transform: translateY(-6px) scale(1.05); background: var(--terracota); color: var(--blanco); box-shadow: 0 16px 30px -16px rgba(74, 99, 190, .7); }

@media (prefers-reduced-motion: reduce) {
    .conectado-iso, .nodo { animation: none; }
    .hito, .hito-icono, .nodo, .loseta-icono { transition: none; }
}