/* =========================================================
   SANE · styles.css (núcleo global)
   Sistema de diseño "Clinical Clarity & Vitality" · Roboto
   Mobile First: la base es móvil; los 4 media queries al final.
   ========================================================= */

/* =========================
   1. Fuentes
   ========================= */
@font-face {
    font-family: "Roboto";
    src: url("../font/roboto/roboto-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../font/roboto/roboto-latin-wght-italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* =========================
   2. Variables (:root)
   ========================= */
:root {
    /* ---------- Tipografía ---------- */
    --font-base: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    --fs-headline-xl: 1.875rem;  --lh-headline-xl: 2.375rem;  --ls-headline-xl: -0.01em;
    --fs-headline-lg: 1.5rem;    --lh-headline-lg: 2rem;      --ls-headline-lg: 0;
    --fs-headline-md: 1.5rem;    --lh-headline-md: 2rem;
    --fs-headline-sm: 1.25rem;   --lh-headline-sm: 1.75rem;
    --fs-body-lg: 1.125rem;      --lh-body-lg: 1.75rem;
    --fs-body-md: 0.9375rem;     --lh-body-md: 1.5rem;
    --fs-body-sm: 0.8125rem;     --lh-body-sm: 1.125rem;
    --fs-label-lg: 0.875rem;     --lh-label-lg: 1.25rem;      --ls-label-lg: 0.01em;
    --fs-label-md: 0.75rem;      --lh-label-md: 1rem;         --ls-label-md: 0.02em;
    --fs-label-sm: 0.6875rem;    --lh-label-sm: 0.875rem;     --ls-label-sm: 0.03em;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ---------- Color: marca ---------- */
    --color-primary: #00356a;
    --color-on-primary: #ffffff;
    --color-primary-container: #004b93;
    --color-on-primary-container: #96bdff;
    --color-primary-fixed: #d6e3ff;
    --color-on-primary-fixed: #001b3c;
    --color-primary-fixed-dim: #a8c8ff;
    --color-primary-hover: #0a58ca;

    --color-secondary: #006e25;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #80f98b;
    --color-on-secondary-container: #007327;
    --color-secondary-fixed: #83fc8e;
    --color-on-secondary-fixed: #002106;

    --color-tertiary: #003954;
    --color-tertiary-container: #005175;
    --color-on-tertiary-container: #6cc5ff;

    /* ---------- Color: superficies ---------- */
    --color-surface: #f8f9ff;
    --color-surface-lowest: #ffffff;
    --color-surface-low: #eff4ff;
    --color-surface-container: #e6eeff;
    --color-surface-high: #dce9ff;
    --color-surface-highest: #d5e3fc;
    --color-on-surface: #0d1c2e;
    --color-on-surface-variant: #424751;
    --color-outline: #727782;
    --color-outline-variant: #c2c6d2;
    --color-inverse-surface: #233144;
    --color-icon-tile: #ebf5ff;

    /* ---------- Color: estados ---------- */
    --color-error: #ba1a1a;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;
    --color-ok-bg: #e8f5e9;
    --color-ok-text: #1b5e20;
    --color-info-bg: #e0f2fe;
    --color-info-text: #0369a1;

    /* ---------- Color: Plan Gold ---------- */
    --color-gold-bg: #fef3c7;
    --color-gold-text: #78350f;
    --color-gold-icon: #d97706;
    --color-gold-border: rgba(217, 119, 6, 0.3);
    --color-gold-card-border: rgba(252, 211, 77, 0.6);
    --gradient-gold-card: linear-gradient(rgba(254, 243, 199, 0.25) 0%, rgba(255, 255, 255, 0.95) 45%, rgba(254, 243, 199, 0.15) 100%);
    --gradient-gold-btn: linear-gradient(135deg, #92400e 0%, #b45309 100%);

    /* ---------- Degradados ---------- */
    --gradient-hero-x: linear-gradient(to right, rgba(0, 34, 68, 0.6), rgba(0, 53, 106, 0.3), transparent);
    --gradient-hero-y: linear-gradient(to top, rgba(248, 249, 255, 0.8), transparent 60%);
    --gradient-banner: linear-gradient(to right, var(--color-primary), var(--color-primary-container), var(--color-tertiary-container));
    --gradient-icon-tile: linear-gradient(135deg, #eff4ff, #d6e3ff, #a8c8ff);

    /* ---------- Formularios ---------- */
    --input-bg: #ffffff;
    --input-border: #d9e4ef;
    --input-focus-border: #004b93;
    --input-focus-ring: 0 0 0 3px rgba(0, 75, 147, 0.15);
    --check-border: #cbd5e1;

    /* ---------- Bordes y radios ---------- */
    --hairline: 1px solid rgba(0, 75, 147, 0.08);
    --divider: 1px solid rgba(0, 75, 147, 0.1);
    --radius-sm: 0.25rem;
    --radius: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* ---------- Sombras ---------- */
    --shadow-1: 0 8px 24px -4px rgba(0, 75, 147, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
    --shadow-2: 0 16px 36px -6px rgba(0, 75, 147, 0.12), 0 4px 12px -2px rgba(0, 75, 147, 0.04);
    --shadow-header: 0 20px 25px -5px rgba(0, 53, 106, 0.1), 0 8px 10px -6px rgba(0, 53, 106, 0.1), 0 0 0 1px rgba(0, 53, 106, 0.05);
    --shadow-cta: 0 4px 14px rgba(0, 75, 147, 0.25);
    --shadow-cta-green: 0 4px 14px rgba(0, 110, 37, 0.25);
    --shadow-icon-tile: inset 0 1px 1px rgba(255, 255, 255, 0.8), inset 0 -2px 4px rgba(0, 35, 70, 0.25),
                        0 8px 16px -4px rgba(0, 53, 106, 0.2), 0 2px 4px rgba(0, 53, 106, 0.1);

    /* ---------- Vidrio ---------- */
    --glass-bg: rgba(255, 255, 255, 0.78);
    --glass-bg-dock: rgba(255, 255, 255, 0.7);
    --glass-blur: blur(14px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.6);

    /* ---------- Espaciado ---------- */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --gutter: 1.5rem;
    --gutter-sm: 1rem;
    --margin: 2rem;
    --margin-sm: 1rem;
    --container-max: 80rem;
    --header-alto: 5.25rem;

    /* ---------- Movimiento ---------- */
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur-fast: 150ms;
    --dur: 300ms;
}

/* =========================
   3. Globales y utilidades
   ========================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-alto) + var(--space-md));
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100dvh;
    font-family: var(--font-base);
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-regular);
    color: var(--color-on-surface);
    background: var(--color-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

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

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
}

strong {
    font-weight: var(--fw-bold);
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--color-primary-container);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Enlace de accesibilidad para saltar al contenido */
.saltarContenido {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    z-index: 100;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: var(--radius);
}

.saltarContenido:focus {
    top: var(--space-md);
}

/* Texto solo para lectores de pantalla */
.soloLector {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Contenedor y secciones */
.contenedor {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--margin-sm);
}

.seccion {
    padding: var(--space-xl) 0;
}

/* Escala tipográfica */
.tituloXL {
    font-size: var(--fs-headline-xl);
    line-height: var(--lh-headline-xl);
    letter-spacing: var(--ls-headline-xl);
    font-weight: var(--fw-bold);
}

.tituloLG {
    font-size: var(--fs-headline-lg);
    line-height: var(--lh-headline-lg);
    letter-spacing: var(--ls-headline-lg);
    font-weight: var(--fw-semibold);
}

.tituloMD {
    font-size: var(--fs-headline-md);
    line-height: var(--lh-headline-md);
    font-weight: var(--fw-semibold);
}

.tituloSM {
    font-size: var(--fs-headline-sm);
    line-height: var(--lh-headline-sm);
    font-weight: var(--fw-semibold);
}

.textoLG {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
}

.textoMD {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
}

.textoSM {
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body-sm);
}

.etiquetaLG {
    font-size: var(--fs-label-lg);
    line-height: var(--lh-label-lg);
    letter-spacing: var(--ls-label-lg);
    font-weight: var(--fw-semibold);
}

.etiquetaMD {
    font-size: var(--fs-label-md);
    line-height: var(--lh-label-md);
    letter-spacing: var(--ls-label-md);
    font-weight: var(--fw-semibold);
}

.etiquetaSM {
    font-size: var(--fs-label-sm);
    line-height: var(--lh-label-sm);
    letter-spacing: var(--ls-label-sm);
    font-weight: var(--fw-medium);
}

.colorPrimario { color: var(--color-primary); }
.colorSecundario { color: var(--color-secondary); }
.colorVariante { color: var(--color-on-surface-variant); }
.colorGold { color: var(--color-gold-icon); }

/* Íconos (sprite SVG en assets/img/icons/sprite.svg) */
.icono {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
    flex-shrink: 0;
}

.icono16 { width: 1rem; height: 1rem; }
.icono18 { width: 1.125rem; height: 1.125rem; }
.icono24 { width: 1.5rem; height: 1.5rem; }
.icono32 { width: 2rem; height: 2rem; }

/* Eyebrow de sección */
.eyebrow {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-full);
    background: var(--color-secondary-container);
    color: var(--color-on-secondary-container);
    font-size: var(--fs-label-md);
    line-height: var(--lh-label-md);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Vidrio (glassmorphism) */
.vidrio {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vidrio {
        background: rgba(255, 255, 255, 0.96);
    }
}

/* =========================
   4. Header
   ========================= */
/* Header Inicio */
.headerSane {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 0.75rem var(--margin-sm) 0;
    pointer-events: none;
}

.headerCapsula {
    position: relative;
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: var(--shadow-header);
    pointer-events: auto;
    transition: box-shadow var(--dur) var(--ease);
}

.headerSane.conScroll .headerCapsula {
    box-shadow: var(--shadow-2), 0 0 0 1px rgba(0, 53, 106, 0.06);
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    width: auto;
    height: 2.75rem;
    transition: transform var(--dur) var(--ease);
}

.logo:hover img {
    transform: scale(1.05);
}

/* Navegación: en móvil es un panel desplegable bajo la cápsula */
.navPrincipal {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    display: none;
    padding: var(--space-sm);
    border-radius: var(--radius-lg);
    background: var(--color-surface-lowest);
    border: var(--hairline);
    box-shadow: var(--shadow-2);
}

.headerSane.navAbierta .navPrincipal {
    display: block;
    animation: desplegarNav var(--dur) var(--ease);
}

.listaNav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.enlaceNav {
    display: block;
    padding: 0.75rem var(--space-md);
    border-radius: var(--radius);
    font-size: var(--fs-label-lg);
    line-height: var(--lh-label-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-on-surface-variant);
    transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.enlaceNav:hover {
    color: var(--color-primary);
    background: var(--color-surface-container);
}

.enlaceNav.activo {
    color: var(--color-primary);
    font-weight: var(--fw-bold);
    background: var(--color-surface-high);
}

.enlaceMisCitasMovil {
    margin-top: var(--space-xs);
    border-top: var(--divider);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Acciones de la derecha */
.accionesHeader {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.btnMisCitas {
    display: none;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-full);
    background: var(--color-surface-container);
    color: var(--color-primary);
    font-size: var(--fs-label-md);
    line-height: var(--lh-label-md);
    font-weight: var(--fw-semibold);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color var(--dur-fast) var(--ease);
}

.btnMisCitas:hover {
    background: var(--color-surface-high);
}

.btnPortal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--color-primary-container);
    color: var(--color-on-primary);
    font-size: var(--fs-label-md);
    line-height: var(--lh-label-md);
    font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-cta);
    transition: background-color var(--dur-fast) var(--ease);
}

.btnPortal:hover {
    background: var(--color-primary);
}

.textoPortal {
    display: none;
}

.avatar {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background: var(--color-surface-container);
    border: 1px solid var(--color-surface-high);
    color: var(--color-primary);
    transition: background-color var(--dur-fast) var(--ease);
}

.avatar:hover {
    background: var(--color-surface-highest);
}

/* Botón hamburguesa */
#hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    background: var(--color-surface-container);
}

#hamburger span {
    display: block;
    width: 1.25rem;
    height: 2px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

#hamburger[aria-expanded="true"] .top-line {
    transform: translateY(7px) rotate(45deg);
}

#hamburger[aria-expanded="true"] .middle-line {
    opacity: 0;
}

#hamburger[aria-expanded="true"] .bottom-line {
    transform: translateY(-7px) rotate(-45deg);
}
/* Header Fin */

/* =========================
   5. Footer
   ========================= */
/* Footer Inicio */
.footerSane {
    padding: 0 var(--margin-sm) var(--space-lg);
    margin-top: var(--space-sm);
}

.contFooter {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 20px 25px -5px rgba(0, 53, 106, 0.1), 0 0 0 1px rgba(0, 53, 106, 0.04);
}

.gridFooter {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.colFooter {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.colFooter img {
    align-self: flex-start;
    width: auto;
    height: 3rem;
}

.tituloFooter {
    margin-bottom: var(--space-xs);
    color: var(--color-primary);
}

.colFooter a,
.datoFooter {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body-sm);
    color: var(--color-on-surface-variant);
    transition: color var(--dur-fast) var(--ease);
}

.colFooter a:hover {
    color: var(--color-on-surface);
}

.datoFooter .icono {
    color: var(--color-primary);
}

.barraLegal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: var(--divider);
    font-size: var(--fs-label-md);
    line-height: var(--lh-label-md);
    font-weight: var(--fw-semibold);
    color: var(--color-on-surface-variant);
    text-align: center;
}

.enlacesLegales {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm) var(--space-md);
}

.enlacesLegales a:hover {
    color: var(--color-on-surface);
}
/* Footer Fin */

/* =========================
   6. Componentes compartidos
   ========================= */
/* Botones Inicio */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: 2.75rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius);
    font-size: var(--fs-label-lg);
    line-height: var(--lh-label-lg);
    letter-spacing: var(--ls-label-lg);
    font-weight: var(--fw-semibold);
    text-align: center;
    transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.btnPrimario {
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btnPrimario:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-cta);
}

.btnSecundario {
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    box-shadow: 0 4px 6px -1px rgba(0, 110, 37, 0.2);
}

.btnSecundario:hover {
    background: rgba(0, 110, 37, 0.9);
    box-shadow: var(--shadow-cta-green);
}

.btnGhost {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid rgba(0, 75, 147, 0.2);
}

.btnGhost:hover {
    background: var(--color-surface-container);
}

.btnGold {
    background: var(--gradient-gold-btn);
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(146, 64, 14, 0.25);
}

.btnGold:hover {
    box-shadow: 0 6px 16px rgba(146, 64, 14, 0.3);
}

.btnAncho {
    width: 100%;
}

.btnSuave {
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: var(--fs-label-md);
    line-height: var(--lh-label-md);
}

.btnSuave:hover {
    background: var(--color-surface-container);
}
/* Botones Fin */

/* Chips Inicio */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: var(--fs-label-sm);
    line-height: var(--lh-label-sm);
    letter-spacing: var(--ls-label-sm);
    font-weight: var(--fw-semibold);
}

.chipVerde { background: var(--color-secondary-container); color: var(--color-on-secondary-container); }
.chipAzul { background: var(--color-primary-fixed); color: var(--color-on-primary-fixed); }
.chipNeutro { background: var(--color-surface-high); color: var(--color-primary); }
.chipGold { background: var(--color-gold-bg); color: var(--color-gold-text); border: 1px solid var(--color-gold-border); }
.chipOk { background: var(--color-ok-bg); color: var(--color-ok-text); }
.chipInfo { background: var(--color-info-bg); color: var(--color-info-text); }
/* Chips Fin */

/* Formularios Inicio */
.campo {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.campo label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-label-md);
    line-height: var(--lh-label-md);
    letter-spacing: var(--ls-label-md);
    font-weight: var(--fw-semibold);
    color: var(--color-on-surface-variant);
}

.campo label .icono {
    color: var(--color-primary);
}

.control {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body-sm);
    color: var(--color-on-surface);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.control::placeholder {
    color: var(--color-outline);
}

.control:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: var(--input-focus-ring);
}
/* Formularios Fin */

/* Cards Inicio */
.card {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-surface-lowest);
    border: var(--hairline);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cardElevable:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
}

.baldosaIcono {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-lg);
    background: var(--gradient-icon-tile);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: var(--shadow-icon-tile);
    color: var(--color-primary);
    transition: transform var(--dur) var(--ease);
}

.baldosaIcono::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 14px;
    background: linear-gradient(to top, transparent, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.6));
    pointer-events: none;
}

.baldosaIcono .icono {
    position: relative;
    width: 2rem;
    height: 2rem;
    filter: drop-shadow(0 2px 2px rgba(0, 35, 70, 0.3));
}

.card:hover .baldosaIcono {
    transform: scale(1.05);
}
/* Cards Fin */

/* =========================
   7. Micro-animaciones globales
   ========================= */
@keyframes desplegarNav {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulso {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.puntoActivo {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--color-secondary);
    animation: pulso 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================
   6b. Modal de login (componente compartido)
   ========================= */
/* Login Inicio */
button.btnPortal {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.modalLogin {
    width: min(100% - 2 * var(--margin-sm), 26rem);
    max-height: calc(100dvh - 2 * var(--margin-sm));
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--color-surface-lowest);
    color: var(--color-on-surface);
    box-shadow: var(--shadow-2);
    overflow: auto;
}

.modalLogin::backdrop {
    background: rgba(35, 49, 68, 0.4);
    backdrop-filter: blur(4px);
}

.modalLogin[aria-busy="true"] .formLogin {
    opacity: 0.6;
    pointer-events: none;
}

.formLogin {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.cabeceraModal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 2.75rem;
}

.btnCerrarModal,
.btnAtrasLogin {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    color: var(--color-primary);
    cursor: pointer;
}

.btnCerrarModal {
    justify-content: center;
    margin-left: auto;
}

.btnCerrarModal:hover,
.btnAtrasLogin:hover {
    background: var(--color-surface-low);
}

.btnAtrasLogin .icono {
    transform: rotate(180deg);
}

.iconoModal {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-full);
    background: var(--color-primary-fixed);
    color: var(--color-primary);
}

.pasoLogin {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.pasoLogin[hidden] {
    display: none;
}

.pasoLogin.entrando {
    animation: entrarPasoLogin var(--dur) var(--ease);
}

@keyframes entrarPasoLogin {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.etiquetaLogin {
    padding: 0;
    color: var(--color-on-surface);
    font-size: var(--fs-label-lg);
    font-weight: var(--fw-semibold);
}

.modalLogin .controlGrande {
    min-height: 3rem;
    font-size: var(--fs-body-lg);
}

.modalLogin .controlCodigo {
    letter-spacing: 0.4em;
    text-align: center;
}

.btnLogin {
    width: 100%;
    min-height: 2.75rem;
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.btnLogin:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-cta);
}

.opcionesDestino {
    display: grid;
    gap: var(--space-sm);
}

.btnDestino {
    min-height: 3rem;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-lowest);
    color: var(--color-primary);
    font: inherit;
    font-weight: var(--fw-semibold);
    text-align: left;
    cursor: pointer;
}

.btnDestino:hover,
.btnDestino:focus-visible {
    border-color: var(--input-focus-border);
    box-shadow: var(--input-focus-ring);
}

.avisoLogin {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

.pieLogin a {
    color: var(--color-primary-container);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
}

.btnEnlaceLogin {
    align-self: center;
    min-height: 2.75rem;
    border: 0;
    background: none;
    color: var(--color-primary-container);
    font: inherit;
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    cursor: pointer;
}

.contadorLogin {
    text-align: center;
    color: var(--color-on-surface-variant);
}

.contadorLogin strong {
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.contadorLogin.vencido,
.contadorLogin.vencido strong {
    color: var(--color-error);
}

.btnLogin:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .pasoLogin.entrando { animation: none; }
}
/* Login Fin */

/* =========================
   8. Media queries
   ========================= */

/* 1) Tablets / Móviles grandes */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    /* Globales Inicio */
    .contenedor {
        padding: 0 var(--gutter);
    }
    /* Globales Fin */

    /* Header Inicio */
    .headerSane {
        padding: 0.75rem var(--gutter) 0;
    }
    .logo img {
        height: 3rem;
    }
    .btnMisCitas,
    .avatar {
        display: flex;
    }
    .textoPortal {
        display: inline;
    }
    .btnPortal {
        padding: 0.5rem 1rem;
    }
    /* Header Fin */

    /* Footer Inicio */
    .footerSane {
        padding: 0 var(--gutter) var(--space-lg);
    }
    .gridFooter {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Footer Fin */
}

/* 2) Tablets Pro vertical */
@media only screen and (min-width: 769px) and (max-width: 1279px) and (orientation: portrait) {
    /* Variables Inicio */
    :root {
        --fs-headline-xl: 2.5rem;  --lh-headline-xl: 3rem;    --ls-headline-xl: -0.02em;
        --fs-headline-lg: 2rem;    --lh-headline-lg: 2.5rem;  --ls-headline-lg: -0.015em;
    }
    /* Variables Fin */

    /* Globales Inicio */
    .contenedor {
        padding: 0 var(--gutter);
    }
    /* Globales Fin */

    /* Header Inicio */
    .headerSane {
        padding: 0.75rem var(--gutter) 0;
    }
    .headerCapsula {
        padding: 0.625rem 0.75rem 0.625rem 1.5rem;
    }
    .logo img {
        height: 3.5rem;
    }
    .btnMisCitas,
    .avatar {
        display: flex;
    }
    .textoPortal {
        display: inline;
    }
    .btnPortal {
        padding: 0.5rem 1rem;
    }
    /* Header Fin */

    /* Footer Inicio */
    .footerSane {
        padding: 0 var(--gutter) var(--space-lg);
    }
    .contFooter {
        padding: var(--space-lg);
    }
    .gridFooter {
        grid-template-columns: repeat(2, 1fr);
    }
    .barraLegal {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    /* Footer Fin */
}

/* 3) Laptops pequeñas / Tablets horizontal */
@media only screen and (min-width: 769px) and (max-width: 1279px) and (orientation: landscape) {
    /* Variables Inicio */
    :root {
        --fs-headline-xl: 2.5rem;  --lh-headline-xl: 3rem;    --ls-headline-xl: -0.02em;
        --fs-headline-lg: 2rem;    --lh-headline-lg: 2.5rem;  --ls-headline-lg: -0.015em;
    }
    /* Variables Fin */

    /* Globales Inicio */
    .contenedor {
        padding: 0 var(--gutter);
    }
    /* Globales Fin */

    /* Header Inicio */
    .headerSane {
        padding: 0.75rem var(--gutter) 0;
    }
    .headerCapsula {
        padding: 0.625rem 0.75rem 0.625rem 1.5rem;
    }
    .logo img {
        height: 3.5rem;
    }
    .btnMisCitas,
    .avatar {
        display: flex;
    }
    .textoPortal {
        display: inline;
    }
    .btnPortal {
        padding: 0.5rem 1rem;
    }
    .navPrincipal {
        left: auto;
        width: 20rem;
    }
    /* Header Fin */

    /* Footer Inicio */
    .footerSane {
        padding: 0 var(--gutter) var(--space-lg);
    }
    .contFooter {
        padding: var(--space-lg);
    }
    .gridFooter {
        grid-template-columns: repeat(2, 1fr);
    }
    .barraLegal {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    /* Footer Fin */
}

/* 4) Escritorio / Monitores grandes */
@media only screen and (min-width: 1280px) {
    /* Variables Inicio */
    :root {
        --fs-headline-xl: 2.5rem;  --lh-headline-xl: 3rem;    --ls-headline-xl: -0.02em;
        --fs-headline-lg: 2rem;    --lh-headline-lg: 2.5rem;  --ls-headline-lg: -0.015em;
    }
    /* Variables Fin */

    /* Globales Inicio */
    .contenedor {
        padding: 0 var(--gutter);
    }
    /* Globales Fin */

    /* Header Inicio */
    .headerSane {
        padding: 0.75rem var(--gutter) 0;
    }
    .headerCapsula {
        padding: 0.625rem 0.75rem 0.625rem 1.5rem;
    }
    .logo img {
        height: 3.5rem;
    }
    .navPrincipal,
    .headerSane.navAbierta .navPrincipal {
        position: static;
        display: block;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
        animation: none;
    }
    .listaNav {
        flex-direction: row;
        align-items: center;
        gap: 0.375rem;
    }
    .enlaceNav {
        padding: 0.375rem var(--space-sm);
        border-radius: var(--radius-full);
        font-size: var(--fs-label-md);
        line-height: var(--lh-label-md);
        letter-spacing: var(--ls-label-md);
    }
    .enlaceMisCitasMovil {
        display: none !important;
    }
    .btnMisCitas,
    .avatar {
        display: flex;
    }
    .textoPortal {
        display: inline;
    }
    .btnPortal {
        padding: 0.5rem 1rem;
    }
    #hamburger {
        display: none;
    }
    /* Header Fin */

    /* Footer Inicio */
    .footerSane {
        padding: 0 var(--gutter) var(--space-lg);
    }
    .contFooter {
        padding: var(--space-lg);
    }
    .gridFooter {
        grid-template-columns: repeat(4, 1fr);
    }
    .barraLegal {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    /* Footer Fin */
}

/* =========================
   Crédito del desarrollo (KAD v1.0)
   ========================= */
.creditoKad { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; font-size: 0.75rem; opacity: 0.85; }
.creditoKad img { width: auto; height: 1rem; }