/* ═══════════════════════════════════════════════════════
   CINEMATIC DESIGN SYSTEM v3 — Psychology Website
   Video BG + Liquid Glass + Smooth Animations
   ═══════════════════════════════════════════════════════ */

/* ─── Design Tokens ─── */
:root {
    --accent: #00F0FF;
    --accent-rgb: 0, 240, 255;
    --white: #ffffff;
    --text: #e2e6ec;
    --text-dim: #b0b8c4;
    /* Más opaco: el aspecto de vidrio se mantiene con borde/sombra, sin
       backdrop-filter (ese desenfoque encima del vídeo a pantalla completa
       re-rasteriza cada fotograma y vuelve a provocar el parpadeo en Chrome). */
    --glass-bg: rgba(12, 14, 22, 0.88);
    --transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

body.theme-cambio {
    --accent: #ff6c37;
    --accent-rgb: 255, 108, 55;
}

/* ─── Reset & Base ─── */
html {
    /* overflow-y: scroll; removed to fix mobile scrolling */
}
*, *::before, *::after {
    margin: 0; padding: 0; box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: #000;
    overflow-x: hidden;
    position: relative;
    width: 100%;
    line-height: 1.6;
    font-size: 16px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-overflow-scrolling: touch;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

a { color: var(--white); text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--accent); }
strong { color: var(--white); }
em { color: var(--text); }

/* ─── FONDO CINEMATOGRÁFICO ───
   Solo imagen fija. El MP4 a pantalla completa + cualquier capa encima
   (sobre todo backdrop-filter) saturaba la GPU en Retina/Chrome y Cursor. */
.video-placeholder-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('bg_canyon.jpg') center/cover no-repeat;
    z-index: -3;
}

.bg-video {
    display: none !important;
}

/* ─── BOTTOM GRADIENT OVERLAY ─── */
.blur-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.88) 100%);
}

/* ═══ LIQUID GLASS ═══
   Nota de rendimiento (causa del parpadeo en Chrome, medida el 22/07/2026):

   La saturación de GPU venía de combinar:
   · decenas de `backdrop-filter` + `will-change` permanentes, y
   · un vídeo MP4 a pantalla completa debajo (cada fotograma invalidaba el
     desenfoque).

   Ahora no hay vídeo de fondo ni `backdrop-filter`. Los paneles usan fondo
   semiopaco + borde; `.glass-on` solo refuerza la opacidad cerca del viewport. */
.liquid-glass,
.faq-item {
    background: var(--glass-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.45);
    position: relative;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Sin backdrop-filter: el fondo semiopaco + borde ya dan el aspecto de
   cristal, sin forzar al compositor a muestrear el framebuffer detrás. */
.liquid-glass.glass-on,
.faq-item.glass-on {
    background: rgba(12, 14, 22, 0.9);
}

/* Firefox anterior a la v103 y navegadores sin soporte: fondo más opaco
   para conservar el contraste del texto. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .liquid-glass,
    .faq-item,
    .navbar,
    .mobile-menu,
    .modal-content {
        background: rgba(10, 12, 19, 0.94);
    }
}

.liquid-glass::before,
.faq-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.14);
    pointer-events: none;
    z-index: 2;
}

/* ─── SMOOTH FADE-UP ANIMATION ─── */
@keyframes smoothFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.995);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-blur-fade-up {
    opacity: 0;
    animation: smoothFadeUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ─── NAVBAR ─── */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    background: rgba(12, 14, 22, 0.78);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 -1px 2px rgba(255, 255, 255, 0.14),
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(0, 0, 0, 0.2);
}

.navbar-glass {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 2.5rem;
    transition: var(--transition);
}

.logo {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.9);
}

.logo span {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

.nav-desktop ul {
    display: flex; list-style: none; gap: 1.25rem; align-items: center;
}

.nav-desktop a {
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    transition: color 0.3s;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.9);
}

.nav-desktop a:hover { color: var(--white); }

.hamburger {
    display: none;
    width: 44px; height: 44px;
    border-radius: 50%;
    align-items: center; justify-content: center;
    cursor: pointer; color: var(--white);
    border: none; background: none;
}

.ham-icon, .close-icon {
    position: absolute;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.close-icon { opacity: 0; transform: rotate(-180deg) scale(0.5); }
.menu-open .ham-icon { opacity: 0; transform: rotate(180deg) scale(0.5); }
.menu-open .close-icon { opacity: 1; transform: rotate(0) scale(1); }

.mobile-menu {
    position: fixed;
    top: 65px; left: 0; right: 0;
    z-index: 40;
    display: flex; flex-direction: column;
    background: rgba(10, 10, 15, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.5rem 1rem;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.menu-open .mobile-menu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu a {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.95rem;
    color: var(--text);
    transition: background 0.3s;
}

.mobile-menu a:hover { background: rgba(255, 255, 255, 0.06); color: var(--white); }

/* ─── HERO ─── */
.hero {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 6.5rem 3rem 2.5rem;
}

.hero-content {
    display: flex;
    align-items: flex-end;
    gap: 2.5rem;
}

.hero-left { flex: 1; }

.hero-meta {
    display: flex; flex-wrap: wrap; gap: 1rem;
    font-size: 0.85rem; color: var(--text-dim);
    margin-bottom: 0.6rem; letter-spacing: 0.04em;
}

.hero h1 {
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 0.7rem;
    color: var(--white);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.hero-subtitle {
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    color: var(--text);
    max-width: 540px;
    margin-bottom: 1.1rem;
    line-height: 1.6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.hero-buttons {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
}

.hero-right {
    flex-shrink: 0;
    max-width: 320px;
}

/* ─── Buttons ─── */
.btn-solid {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--white);
    color: #000;
    padding: 0.6rem 1.4rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-solid:hover {
    background: #e5e5e5;
    color: #000;
}

.btn-glass {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.4rem;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--white);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    transition: var(--transition);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* ─── Linehan Quote (Hero) ─── */
.linehan-quote {
    margin-top: 1rem;
    padding: 0.75rem 1.1rem;
    border-radius: 14px;
    max-width: 520px;
}

.linehan-quote blockquote {
    font-style: italic;
    font-size: 0.88rem;
    color: var(--text);
    margin-bottom: 0.2rem;
    line-height: 1.5;
}

.linehan-quote cite {
    font-size: 0.75rem;
    color: var(--accent);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ─── Profile Card ─── */
.profile-card {
    border-radius: 14px;
    max-width: 320px;
    overflow: hidden;
}

.profile-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    border-radius: 14px 14px 0 0;
}

.profile-text {
    padding: 1rem 1.1rem;
}

.profile-text h3 {
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
    color: var(--white);
}

.profile-text p {
    font-size: 0.82rem;
    color: rgba(238, 242, 246, 0.85);
    margin-bottom: 0.4rem;
    line-height: 1.5;
}

/* ─── CONTENT SECTIONS ─── */
.content-section {
    position: relative;
    z-index: 10;
    padding: 2.5rem 0;
}

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ─── Typography ─── */
h2 {
    font-size: clamp(1.75rem, 2.8vw, 2.3rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    color: var(--white);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9);
}

h3 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9);
}

h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 0.35rem;
}

.section-desc {
    text-align: center;
    color: var(--text);
    font-size: 1.02rem;
    max-width: 660px;
    margin: 0 auto 1.2rem;
    line-height: 1.6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.ref-text {
    font-size: 0.82rem;
    color: var(--text-dim);
    margin-top: 0.6rem;
    line-height: 1.5;
}

.ref-text a { color: var(--accent); }

.fine-print {
    font-size: 0.65rem;
    color: var(--text-dim);
    margin-top: 0.3rem;
    line-height: 1.2;
    opacity: 0.7;
}

/* ─── Glass Panel (content blocks) ─── */
.glass-panel {
    padding: 1.3rem 1.5rem;
    border-radius: 14px;
    margin-bottom: 0.6rem;
}

.glass-panel p {
    color: rgba(238, 242, 246, 0.9);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    line-height: 1.65;
}

.glass-panel ul {
    color: rgba(238, 242, 246, 0.9);
    font-size: 0.95rem;
    margin: 0.3rem 0 0.5rem 1.2rem;
    line-height: 1.65;
}

.glass-panel li { margin-bottom: 0.2rem; }

.glass-panel h3 { margin-bottom: 0.4rem; }

/* ─── Linehan Quote Inline ─── */
.linehan-quote-inline {
    padding: 0.8rem 1.2rem;
    border-radius: 14px;
    margin-bottom: 0.6rem;
}

.linehan-quote-inline blockquote {
    font-style: italic;
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 0.2rem;
}

.linehan-quote-inline cite {
    font-size: 0.8rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ─── Cards Grid — 2-column modern ─── */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
    margin-bottom: 0.8rem;
}

.card {
    padding: 1.2rem 1.4rem;
    border-radius: 14px;
    /* transform handled entirely by JS tilt — no CSS hover transform here */
}

.card p { color: var(--text); font-size: 1.3rem; line-height: 1.65; }
.card h4 { color: var(--white); }

.component-icon {
    color: var(--accent);
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

/* ─── Timeline — compact ─── */
.timeline {
    position: relative;
    max-width: 900px;
    margin: 0.5rem auto 0.8rem;
    padding: 0;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 31px;
    width: 2px;
    background: rgba(255, 255, 255, 0.08);
}

.timeline-item {
    position: relative;
    padding-left: 72px;
    margin-bottom: 0.35rem;
}

.timeline-dot {
    position: absolute;
    left: 24px; top: 12px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
    z-index: 2;
    transition: var(--transition);
}

.timeline-item:hover .timeline-dot {
    transform: scale(1.4);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.7);
}

.timeline-content {
    padding: 1rem 1.3rem;
    border-radius: 14px;
    /* transform handled entirely by JS tilt — no CSS hover transform here */
}

.timeline-content p { color: var(--text); font-size: 1.3rem; line-height: 1.65; }
.timeline-content h4 { margin-bottom: 0.3rem; }

/* ─── Specialties Grid ─── */
.specialties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.35rem;
    margin-bottom: 0.7rem;
}

.specialty-card {
    padding: 1.2rem 1.4rem;
    border-radius: 14px;
}

.specialty-card p { color: var(--text); font-size: 1.3rem; line-height: 1.65; }

/* ─── Manuals Gallery ─── */
.manuals-gallery {
    margin-bottom: 1rem;
    text-align: center;
}

.manuals-gallery h4 {
    color: var(--white);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.manuals-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.manual-item {
    flex: 1 1 180px;
    max-width: 220px;
    text-align: center;
    padding: 0.7rem;
    border-radius: 14px;
}

.manual-img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    transition: var(--transition);
}

/* .manual-item:hover .manual-img transform removed — parent card JS tilt handles it */

.manual-item p { color: var(--text); font-size: 0.95rem; }

/* ─── Quote Banner ─── */
.quote-banner {
    position: relative;
    z-index: 10;
    padding: 1.4rem 2rem;
    text-align: center;
    border-radius: 14px;
}

.quote-banner blockquote {
    font-size: 1.5rem;
    font-family: 'Georgia', serif;
    font-style: italic;
    max-width: 750px;
    margin: 0 auto 0.25rem;
    line-height: 1.5;
    color: var(--text);
}

.quote-banner cite {
    font-size: 0.8rem;
    color: var(--accent);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.quote-banner.accent {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.06), rgba(0, 240, 255, 0.01)) !important;
}

/* ─── Resource Container ─── */
.resource-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.resource-section h3 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.3rem;
    margin-bottom: 0.4rem;
}

.legal-disclaimer {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.4;
    margin-bottom: 1rem;
    font-style: italic;
    text-align: left;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.course-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.price { font-size: 1.2rem; color: var(--accent); font-weight: 600; }

.file-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1rem !important;
    margin-bottom: 0;
}

.file-card .btn-glass {
    padding: 0.5rem 1.2rem;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.file-info h4 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
    line-height: 1.2;
}

.file-info p {
    font-size: 0.85rem !important;
    color: var(--text);
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0;
}

.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.8rem;
}

/* ─── Video Grid ─── */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.5rem;
}

.video-placeholder {
    aspect-ratio: 16/9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    cursor: pointer;
    overflow: hidden;
}

.video-placeholder iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.play-button {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 0.4rem;
    transition: transform 0.3s;
}

/* .play-button hover scale removed — parent card JS tilt+scale handles it */
.video-placeholder p { color: var(--text); font-size: 1.05rem; }

/* ─── Contact Form ─── */
.contact-form {
    max-width: 560px;
    margin: 0.8rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.contact-form input,
.contact-form textarea {
    padding: 0.8rem 1rem;
    border-radius: 12px;
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    transition: var(--transition);
    background: var(--glass-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.14),
        0 6px 32px rgba(0, 0, 0, 0.48),
        0 0 80px rgba(0, 0, 0, 0.22);
    appearance: none;
    -webkit-appearance: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.2);
}

/* ─── Footer — tight, no extra space ─── */
footer {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0.5rem 2rem 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.3;
    margin: 0;
}

footer p {
    margin: 0;
}

.footer-sub {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 0.2rem !important;
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
    .nav-desktop { display: none; }
    .hamburger { display: flex; }
    .hero-content { flex-direction: column; align-items: flex-start; }
    .hero-right { max-width: 100%; width: 100%; }
    .navbar { padding: 0; }
    .navbar-glass { padding: 0.875rem 1.875rem; }
    .mobile-menu { top: 70px; }
    .hero { padding: 0 1.5rem 1.5rem; }
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    body { font-size: 19px; }
    .hero h1 { font-size: 2.5rem; }
    .hero-meta { gap: 0.4rem; font-size: 1rem; }
    .profile-card { max-width: 100%; }
    .file-card { flex-direction: column; text-align: center; }
    .specialties-grid { grid-template-columns: 1fr; }
    .resource-grid { grid-template-columns: 1fr; }
    .cards-grid { grid-template-columns: 1fr; }
    .content-section { padding: 1.5rem 0; }
    .glass-panel { padding: 1rem 1.2rem; }
    .card { padding: 1rem 1.2rem; }
    .timeline-content { padding: 0.8rem 1rem; }
    h2 { margin-bottom: 0.6rem; }
    .hero { padding: 120px 1rem 1.2rem; }
    .container { padding: 0 1rem; }
    .logo { font-size: 1.3rem; }
    .logo span { font-size: 0.85rem; }
    .navbar-glass { padding: 0.875rem 1.2rem; }
    .download-grid { grid-template-columns: 1fr; }
    .articles-grid { grid-template-columns: 1fr; }
    
    /* FAQ & Manuals scaling for mobile */
    .faq-question {
        padding: 1.2rem !important;
        font-size: 1.15rem !important;
    }
    .faq-answer > div {
        padding: 0 1rem 1rem !important;
    }
    .manuals-grid {
        gap: 0.8rem;
    }
    .manual-item {
        flex: 1 1 130px;
        max-width: 150px;
        padding: 0.5rem;
    }
    .manual-item p {
        font-size: 0.85rem;
        margin-top: 0.5rem;
    }
    .manuals-gallery h4 {
        font-size: 1.1rem;
    }
}

#recursos, #contacto {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}
#recursos .video-grid {
    margin-top: 0.4rem;
}
#contacto .contact-form {
    margin-top: 0.4rem;
}

/* ─── Dial Theme Toggle ─── */
.theme-dial {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    width: 68px;
    height: 35px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 2px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
    margin-left: 0.5rem;
}

.theme-dial .dial-knob {
    background: var(--white);
    border-radius: 50%;
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0rem;
    color: #000;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s;
    transform: translateX(0);
}

body.theme-cambio .theme-dial {
    border-color: rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.1);
}

body.theme-cambio .theme-dial .dial-knob {
    transform: translateX(33px);
    background: var(--accent);
    color: #000;
}

.mobile-theme-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 1.5rem;
}

/* ─── Scroll Indicator ─── */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: var(--white);
    pointer-events: none;
    z-index: 10;
}

.scroll-indicator span {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 12px rgba(var(--accent-rgb), 0.4);
}

.mouse-scroll {
    width: 28px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    position: relative;
    background: var(--glass-bg);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 6px 20px rgba(0, 0, 0, 0.6),
        0 0 24px rgba(var(--accent-rgb), 0.3);
}

.mouse-wheel {
    width: 5px;
    height: 10px;
    background: var(--accent);
    border-radius: 3px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollMouse 1.8s infinite;
    box-shadow: 0 0 8px var(--accent);
}

@keyframes scrollMouse {
    0% { transform: translate(-50%, 0); opacity: 0; }
    30% { opacity: 1; }
}

@media (max-width: 768px) {
    .scroll-indicator {
        display: none !important;
    }
}

/* El efecto «tilt & glisten» se retiró: el JavaScript que lo generaba ya no
   existe y estas reglas quedaban huérfanas. Eran, además, la segunda fuente de
   capas de composición: `transform-style: preserve-3d` y `will-change` sobre
   .liquid-glass promovían cada panel a su propia textura, y `mix-blend-mode`
   fuerza al compositor a leer todo lo que hay debajo. */

/* ─── Success Modal ─── */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    max-width: 440px;
    width: 90%;
    padding: 2.2rem 2rem;
    text-align: center;
    border-radius: 14px;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-icon {
    width: 52px;
    height: 52px;
    background: rgba(46, 213, 115, 0.15);
    color: #2ed573;
    font-size: 1.8rem;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
}

.modal-content h3 {
    font-size: 1.6rem;
    margin-bottom: 0.6rem;
}

.modal-content p {
    font-size: 1.05rem;
    color: var(--text);
    margin-bottom: 1.4rem;
    line-height: 1.6;
}

.modal-content .btn-solid {
    width: 100%;
}

/* ─── Active Scroll Spy States ─── */
.nav-desktop a.active,
.mobile-menu a.active {
    color: var(--accent) !important;
    font-weight: 600;
}

/* ─── Global Hover Scaling & Glow Effects ─── */
.nav-desktop a,
.mobile-menu a,
.btn-solid,
.btn-glass,
.manual-item,
h2, h3, h4 {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.4s ease, box-shadow 0.4s ease, color 0.3s;
}

.nav-desktop a:hover,
.mobile-menu a:hover {
    text-shadow: 0 0 15px rgba(var(--accent-rgb), 0.95), 0 0 5px rgba(var(--accent-rgb), 0.4) !important;
}

.btn-solid:hover,
.btn-glass:hover {
    box-shadow: 0 0 25px rgba(var(--accent-rgb), 0.8), 0 0 10px rgba(var(--accent-rgb), 0.4) !important;
}

/* manual-item: transform removed (was killing JS tilt with !important). Glow handled by .liquid-glass:hover */

/* h2/h3/h4 hover: ONLY glow, NO transform scale.
   Reason: these elements live inside .liquid-glass tilt cards.
   The parent card already does scale(1.15) via JS — if the heading
   also scales with !important it creates an independent motion that
   makes it LOOK like only the text tilts instead of the whole card. */
h2:hover,
h3:hover:not(#sobre-mi),
h4:hover {
    text-shadow: 0 0 28px rgba(var(--accent-rgb), 0.98), 0 0 10px rgba(var(--accent-rgb), 0.5) !important;
}

/* Glass cards dynamic hover glow (+15%) */
.liquid-glass:hover,
.faq-item:hover {
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.29),
        0 10px 46px rgba(0, 0, 0, 0.69),
        0 0 52px rgba(var(--accent-rgb), 0.63) !important;
}

/* ─── Realce al pasar el ratón ───
   Antes, TODO elemento .liquid-glass escalaba a 1.15 al hacer hover. En un panel
   a ancho completo eso son 15 % de más repartidos a ambos lados: el panel se salía
   del viewport, generaba desbordamiento horizontal y desplazaba la página bajo el
   cursor. Un escalado del 15 % también reescala el texto ya rasterizado y lo
   emborrona en superficies grandes.

   Los elementos pequeños (botones, enlaces) sí pueden escalar: su huella es
   reducida y el gesto se lee bien. Los paneles grandes se elevan y se iluminan,
   sin alterar su tamaño. */
@media (hover: hover) and (pointer: fine) {
    .nav-desktop a:hover,
    .mobile-menu a:hover {
        transform: scale(1.08);
    }

    .btn-solid:hover,
    .btn-glass:hover {
        transform: translateY(-2px) scale(1.04);
    }

    /* Elevación en lugar de escalado: no cambia la huella del elemento. */
    .liquid-glass:not(.navbar-glass):not(.modal-content):not(.glass-panel):hover,
    .faq-item:hover {
        transform: translateY(-4px);
        border-color: rgba(var(--accent-rgb), 0.4);
        box-shadow:
            inset 0 1px 1px rgba(255, 255, 255, 0.18),
            0 14px 42px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(var(--accent-rgb), 0.14);
    }

    /* Los paneles de contenido son superficies de lectura: no se mueven,
       solo ganan definición en el borde. */
    .glass-panel:hover {
        border-color: rgba(var(--accent-rgb), 0.28);
    }
}

/* ─── Testimonials ─── */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.testimonial-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.testimonial-text {
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}
.testimonial-author {
    font-weight: 600;
    color: var(--accent);
    text-align: right;
}

/* ─── Articles Grid ─── */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.article-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.article-title {
    color: var(--accent);
    margin-bottom: 0.8rem;
    font-size: 1.25rem;
    line-height: 1.3;
}
.article-excerpt {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    opacity: 0.9;
    line-height: 1.6;
    flex-grow: 1; /* Pushes the button to the bottom */
}

/* ─── FAQ Accordion ─── */
.faq-container {
    max-width: 800px;
    margin: 2rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.faq-item {
    border-radius: 14px;
    overflow: hidden;
}
.faq-question {
    width: 100%;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.3s;
}
.faq-question:hover {
    background: rgba(255, 255, 255, 0.05);
}
.faq-icon {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
    color: var(--accent);
}
.faq-item.active .faq-icon {
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    /* `max-height: 0` oculta a la vista pero NO retira el contenido del árbol de
       accesibilidad: los lectores de pantalla leían todas las respuestas cerradas
       y eran tabulables. `visibility: hidden` sí lo retira, y a diferencia de
       `display: none` permite conservar la transición. */
    visibility: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease, visibility 0s linear 0.4s;
}
.faq-item.active .faq-answer {
    visibility: visible;
    transition: max-height 0.4s ease, padding 0.4s ease, visibility 0s linear 0s;
}
.faq-answer p {
    padding: 0 1.5rem 1.2rem;
    margin: 0;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}
.faq-answer ul {
    padding: 0 2rem 1.5rem 3.5rem;
    margin: 0;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    list-style-type: disc;
}
.faq-answer li {
    margin-bottom: 0.6rem;
}
.faq-answer li:last-child {
    margin-bottom: 0;
}
.faq-item.active .faq-answer {
    max-height: 2000px;
}

/* ─── WhatsApp Float Button ─── */
.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 1000;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 1rem;
}

.whatsapp-float:hover {
    background-color: #1ebe57;
    color: #fff;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

.whatsapp-float svg {
    display: block;
}

/* ─── PWA Floating Button (Mobile & Desktop Scaled) ─── */
.pwa-floating-btn {
    position: fixed;
    bottom: 22px;
    left: 22px;
    z-index: 9999;
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--accent) 0%, #38bdf8 100%);
    border: none;
    color: #0e0c15;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.pwa-floating-btn:hover {
    transform: translateY(-2px) scale(1.04);
}

@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 18px;
        right: 14px;
        padding: 10px;
        border-radius: 50%;
    }
    .whatsapp-float span {
        display: none;
    }
    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }
    .pwa-floating-btn {
        bottom: 18px;
        left: 14px;
        padding: 0.45rem 0.85rem;
        font-size: 0.76rem;
        max-width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ─── Cuestionario de Autoevaluación ─── */
.cuestionario-card {
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
}

.cuestionario-step {
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* El bloque de la pregunta reserva la altura de la más larga.
   Sin reserva, al cambiar de pregunta el texto re-fluye y las opciones saltan:
   medido a 1280 px, las preguntas ocupan 60 px o 91 px (salto de 31 px); a
   360 px el salto llega a 91 px. Un clic emitido durante ese reflujo aterriza
   en el contenedor en lugar del botón, y como el manejador vive en
   `.cuestionario-opcion`, la respuesta se descarta sin aviso. El `min-height`
   anterior era inline y valía 3.5rem (56 px): por debajo incluso de la
   pregunta más corta, así que no reservaba nada. */
#cuestionario-pregunta-texto {
    min-height: 5.75rem;   /* 92 px: la pregunta más alta a partir de 768 px */
}

@media (max-width: 767px) {
    /* A 360 px la pregunta más alta ocupa 242 px. */
    #cuestionario-pregunta-texto { min-height: 15.25rem; }
}

/* El botón «Volver» solo se ofrece a partir de la pregunta 2. Ocultarlo con
   `display: none` hacía crecer el panel al mostrarlo y, como está centrado en
   vertical, desplazaba todo el bloque 10 px hacia arriba justo en la
   transición. Se reserva su hueco desde el principio: `visibility: hidden` lo
   mantiene fuera del foco y del árbol de accesibilidad igual que `hidden`.
   El `!important` es necesario para ganar a la regla global
   `[hidden] { display: none !important }` de más abajo. */
#btn-atras-cuestionario[hidden] {
    display: inline-block !important;
    visibility: hidden;
}

.cuestionario-opcion {
    cursor: pointer;
    width: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

.cuestionario-opcion:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--accent) !important;
    transform: translateX(5px) !important;
}

/* ─── Habilidad DBT del Día Widget ─── */
#habilidad-dbt-widget {
    border: 1px solid rgba(255, 255, 255, 0.22);
}

#btn-otra-habilidad {
    border: 1px solid rgba(255,255,255,0.15) !important;
    transition: all 0.3s ease;
}

#btn-otra-habilidad:hover {
    border-color: var(--accent) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ─── Guía de Respiración Interactiva ─── */
.breathing-circle {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.15), inset 0 0 15px rgba(255,255,255,0.2);
}

.breathing-circle.inhale {
    transform: scale(1.4) !important;
    box-shadow: 0 0 45px rgba(255, 255, 255, 0.4), inset 0 0 25px rgba(255,255,255,0.35) !important;
    opacity: 0.95 !important;
}

.breathing-circle.hold {
    transform: scale(1.4) !important;
    box-shadow: 0 0 55px var(--accent), inset 0 0 30px rgba(255,255,255,0.45) !important;
    opacity: 1 !important;
    animation: breathingGlow 2s infinite alternate ease-in-out;
}

.breathing-circle.exhale {
    transform: scale(0.85) !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1), inset 0 0 10px rgba(255,255,255,0.15) !important;
    opacity: 0.75 !important;
}

@keyframes breathingGlow {
    0% {
        box-shadow: 0 0 35px var(--accent), inset 0 0 20px rgba(255,255,255,0.3);
    }
    100% {
        box-shadow: 0 0 65px var(--accent), inset 0 0 40px rgba(255,255,255,0.5);
    }
}

/* ─── RESPONSIVE BREAKPOINTS (Tablets & Mobile) ─── */
@media (max-width: 1080px) {
    .navbar-glass { padding: 0.65rem 1.5rem; }
    .hero { padding: 5.5rem 1.5rem 2rem; }
    .hero-content { flex-direction: column; align-items: stretch; gap: 1.5rem; }
    .hero-right { max-width: 100%; }
    .profile-card { display: flex; flex-direction: row; align-items: center; max-width: 100%; }
    .profile-img { width: 140px; height: 140px; border-radius: 14px 0 0 14px; flex-shrink: 0; }
    .profile-text { flex: 1; padding: 0.8rem 1rem; }
}

@media (max-width: 768px) {
    body { font-size: 15px; }
    .nav-desktop { display: none; }
    .hamburger { display: flex; }
    .hero { padding: 5rem 1rem 1.5rem; min-height: auto; }
    .hero h1 { font-size: 1.75rem; margin-bottom: 0.5rem; }
    .hero-subtitle { font-size: 0.92rem; margin-bottom: 0.8rem; }
    .hero-buttons { gap: 0.5rem; }
    .btn-solid, .btn-glass { padding: 0.55rem 1.1rem; font-size: 0.85rem; width: 100%; justify-content: center; }
    .profile-card { flex-direction: column; }
    .profile-img { width: 100%; height: 180px; border-radius: 14px 14px 0 0; }
    .cards-grid, .specialties-grid, .courses-grid, .articles-grid { grid-template-columns: 1fr; gap: 0.8rem; }
    h2 { font-size: 1.5rem; }
    .section-desc { font-size: 0.92rem; }
}




/* ═══════════════════════════════════════════════════════════════════
   ACCESIBILIDAD, COMPONENTES DE PORTAL Y ESCALA FLUIDA
   Añadido en la revisión de seguridad y accesibilidad de julio de 2026.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── El atributo [hidden] debe ganar a cualquier display heredado ─── */
[hidden] { display: none !important; }

/* ─── Contenido solo para lectores de pantalla ─── */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ─── Foco visible ───
   No existía ninguna regla :focus-visible: toda la navegación por teclado
   era invisible. Se aplica a cualquier elemento interactivo. */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}
/* Los navegadores que soportan :focus-visible no necesitan el anillo por defecto. */
:focus:not(:focus-visible) { outline: none; }

/* Enlace para saltar al contenido principal. */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 200;
    padding: 0.7rem 1.2rem;
    background: var(--accent);
    color: #0e0c15;
    font-weight: 700;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* ─── Movimiento reducido ───
   Las animaciones persistentes y el parallax son desencadenantes documentados
   de mareo vestibular y de síntomas de desrealización, comorbilidades
   frecuentes en la población a la que se dirige este sitio. */
@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;
    }
    html { scroll-behavior: auto; }
    .animate-blur-fade-up { opacity: 1 !important; transform: none !important; }
    .video-placeholder-bg { animation: none !important; transform: none !important; }
    .bg-video { display: none !important; }
    .scroll-indicator, .mouse-wheel { animation: none !important; }
    #breathing-circle { transition: none !important; }
}

/* Si el JS no llega a ejecutarse, el contenido debe seguir siendo visible. */
.no-js .animate-blur-fade-up { opacity: 1; animation: none; }

/* ─── Escala tipográfica fluida ───
   Antes: tamaños fijos y ningún breakpoint por encima de 1080 px, de modo que
   un monitor 4K mostraba exactamente la misma columna estrecha que un 1080p. */
:root {
    --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.15rem);
    --step-1: clamp(1.15rem, 1.08rem + 0.32vw, 1.4rem);
    --step-2: clamp(1.45rem, 1.3rem + 0.7vw, 2rem);
    --step-3: clamp(1.9rem, 1.6rem + 1.4vw, 3rem);
    --step-4: clamp(2.3rem, 1.8rem + 2.4vw, 4.2rem);
}

body { font-size: var(--step-0); }

.container {
    max-width: min(1320px, 92vw);
}

@media (min-width: 1600px) {
    .container { max-width: min(1480px, 88vw); }
}

/* ─── Toasts (sustituyen a los 19 alert() bloqueantes) ─── */
#toast-stack {
    position: fixed;
    bottom: 1.2rem;
    right: 1.2rem;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: min(380px, calc(100vw - 2.4rem));
    pointer-events: none;
}
.toast {
    position: relative;
    pointer-events: auto;
    padding: 0.85rem 2.4rem 0.85rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--white);
    background: rgba(18, 20, 30, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 4px solid var(--accent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    animation: toastIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
.toast--success { border-left-color: #34d399; }
.toast--error   { border-left-color: #f87171; }
.toast--warning { border-left-color: #fbbf24; }
.toast--info    { border-left-color: var(--accent); }
.toast__close {
    position: absolute;
    top: 0.35rem; right: 0.5rem;
    width: 26px; height: 26px;
    background: none; border: none;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.2rem; line-height: 1;
    cursor: pointer; border-radius: 50%;
}
.toast__close:hover { color: var(--white); background: rgba(255, 255, 255, 0.1); }

/* ─── Panel de crisis ─── */
.crisis-panel {
    position: relative;
    background: rgba(38, 14, 14, 0.92);
    border: 1px solid rgba(248, 113, 113, 0.5);
    border-left: 5px solid #f87171;
    border-radius: 12px;
    padding: 1.6rem 1.8rem;
    line-height: 1.6;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
.crisis-panel h4 {
    color: #fecaca;
    font-size: 1.25rem;
    margin: 0 0 0.6rem;
}
.crisis-panel p { color: rgba(255, 255, 255, 0.88); margin: 0 0 0.8rem; font-size: 0.95rem; }
.crisis-panel ul { margin: 0 0 1rem; padding-left: 1.3rem; color: rgba(255, 255, 255, 0.88); font-size: 0.92rem; }
.crisis-panel li { margin-bottom: 0.55rem; }
.crisis-panel a { color: #fca5a5; font-weight: 600; }
.crisis-panel__urgent {
    background: rgba(248, 113, 113, 0.14);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    font-size: 0.9rem !important;
    margin: 0 !important;
}
.crisis-panel__close {
    position: absolute;
    top: 0.6rem; right: 0.8rem;
    width: 32px; height: 32px;
    background: none; border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.5rem; line-height: 1;
    cursor: pointer; border-radius: 50%;
}
.crisis-panel__close:hover { color: var(--white); background: rgba(255, 255, 255, 0.12); }

/* ─── Estados vacíos ─── */
.empty-state {
    text-align: center;
    padding: 1.8rem 1rem;
    color: rgba(255, 255, 255, 0.8);
}
.empty-state__icon { font-size: 2.2rem; margin-bottom: 0.5rem; opacity: 0.85; }
.empty-state__title { font-weight: 700; color: var(--white); margin: 0 0 0.3rem; font-size: 1rem; }
.empty-state__body { font-size: 0.88rem; line-height: 1.5; margin: 0; max-width: 34ch; margin-inline: auto; }

/* ─── Tarjetas de registro diario ─── */
.log-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 0.8rem;
}
.log-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.log-card__header strong { color: var(--accent); }
.log-card__skill {
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.15rem 0.6rem;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.88);
}
.log-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.86);
}
.log-card__note {
    font-size: 0.86rem;
    margin: 0.6rem 0 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
}

/* ─── Chat ─── */
.chat-row { display: flex; margin-bottom: 0.5rem; }
.chat-row--me { justify-content: flex-end; }
.chat-row--them { justify-content: flex-start; }
.chat-bubble {
    padding: 0.5rem 0.85rem;
    border-radius: 14px;
    max-width: 80%;
    line-height: 1.4;
    font-size: 0.88rem;
    word-break: break-word;
}
.chat-bubble--me { background: var(--accent); color: #0e0c15; font-weight: 600; }
.chat-bubble--them {
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.chat-empty {
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin-top: 2.2rem;
    font-size: 0.88rem;
}

/* ─── Lista de pacientes (ahora son <button>, hay que resetear estilos) ─── */
.patient-item {
    width: 100%;
    font: inherit;
    text-align: left;
    color: inherit;
}

/* ─── Pestañas del terapeuta ─── */
.therapist-nav-btn.active {
    border-color: var(--accent) !important;
    color: var(--white) !important;
    background: rgba(var(--accent-rgb), 0.12);
}

/* Una barra a 0 % debe leerse como «sin datos», no como un valor bajo. */
.chart-bar { min-height: 0; }
.chart-bar[style*="height: 0%"] {
    min-height: 2px;
    opacity: 0.35;
}

/* ─── Botón flotante de instalación PWA ───
   Se muestra únicamente cuando el navegador confirma que la instalación es
   posible (script.js lo revela al recibir `beforeinstallprompt`, o en iOS
   donde el proceso es manual). Antes estaba siempre visible, incluso con la
   aplicación ya instalada. */
.pwa-floating-btn { display: none; }
.pwa-floating-btn.is-available { display: inline-flex; }
@media (display-mode: standalone) {
    .pwa-floating-btn { display: none !important; }
}

/* ─── Aviso de crisis en la landing ─── */
.crisis-strip {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.32);
    border-radius: 12px;
    padding: 1.1rem 1.4rem;
    margin: 0 auto 2rem;
    max-width: 900px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}
.crisis-strip strong { color: #fca5a5; }
.crisis-strip a { color: #fca5a5; font-weight: 600; }

/* ─── Casilla de consentimiento del formulario de contacto ─── */
.consent-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.84rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
    text-align: left;
    margin: 0.2rem 0 0.4rem;
    cursor: pointer;
}
.consent-check input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent);
    cursor: pointer;
}
.consent-check a { color: var(--accent); }

/* ─── Páginas de texto legal ─── */
.legal-page {
    max-width: 820px;
    margin: 120px auto 80px;
    padding: 2.5rem;
    position: relative;
    z-index: 5;
}
.legal-page h1 { font-size: var(--step-3); margin-bottom: 0.4rem; color: var(--white); }
.legal-page h2 { font-size: var(--step-1); margin: 2.2rem 0 0.7rem; color: var(--accent); text-align: left; }
.legal-page p, .legal-page li { color: rgba(255, 255, 255, 0.86); line-height: 1.7; margin-bottom: 0.8rem; }
.legal-page ul { padding-left: 1.4rem; margin-bottom: 1rem; }
.legal-page a { color: var(--accent); }
.legal-page .legal-updated { font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); margin-bottom: 2rem; }

/* ═══════════════════════════════════════════════════════════════════
   RENDIMIENTO DE COMPOSICIÓN Y COMPATIBILIDAD ENTRE NAVEGADORES
   ═══════════════════════════════════════════════════════════════════ */

/* Se descartó `content-visibility: auto` en las secciones: la altura estimada
   por `contain-intrinsic-size` inflaba el documento en ~600 px, lo que mueve la
   barra de desplazamiento a medida que las secciones se renderizan. Ese salto se
   percibe como inestabilidad, justo lo que se quería evitar. El ahorro de
   rasterización ya se consigue reduciendo las capas de composición. */

/* `contain: layout paint` sí es seguro: acota el recálculo de diseño y el
   repintado a cada panel, sin alterar la altura del documento. */
.content-section > .container > .glass-panel,
.card,
.testimonial-card {
    contain: layout paint;
}

/* `will-change` solo mientras dura la interacción, nunca de forma permanente. */
@media (hover: hover) and (pointer: fine) {
    .liquid-glass:hover,
    .btn-solid:hover,
    .btn-glass:hover {
        will-change: transform;
    }
}

/* ─── Compatibilidad entre navegadores ─── */

/* Safari < 15.4 no soporta `inset`. */
.liquid-glass::before,
.faq-item::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Firefox no aplica `-webkit-text-size-adjust`; se declara la propiedad estándar
   junto a la prefijada (ya presente arriba) y se neutraliza el ajuste automático
   de tamaño de Safari en iOS al rotar el dispositivo. */
@media screen and (max-device-width: 926px) {
    html { -webkit-text-size-adjust: 100%; }
}

/* Safari en iOS mide `100vh` incluyendo la barra de direcciones, lo que provoca
   que el hero quede recortado. `dvh` da la altura real del viewport dinámico. */
@supports (height: 100dvh) {
    .hero { min-height: 100dvh; }
    .bg-video,
    .blur-overlay { height: 100dvh; }
}

/* Firefox no soporta `::-webkit-scrollbar`; se usa la propiedad estándar. */
@supports (scrollbar-width: thin) {
    .portal-view,
    #patient-history-container,
    #therapist-patients-list,
    #chat-messages-container,
    #therapist-chat-messages {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    }
}

/* Preferencia de transparencia reducida o pantallas estrechas. */
@media (max-width: 480px), (prefers-reduced-transparency: reduce) {
    .liquid-glass,
    .faq-item,
    .liquid-glass.glass-on,
    .faq-item.glass-on {
        background: rgba(10, 12, 19, 0.94);
    }
}

/* ─── Fachada de vídeo ───
   Los 5 iframes de YouTube se descargaban en cada visita, incluso con el
   acordeón cerrado (`visibility: hidden` no impide que un iframe cargue).
   Eran ~5 MB de JavaScript de terceros, 5 contextos de composición extra y
   cookies de seguimiento fijadas antes de cualquier consentimiento.
   Ahora se muestra una miniatura y el reproductor se inserta solo al pulsar. */
.video-facade {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    display: block;
    background: rgba(10, 12, 19, 0.9);
}
.video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.82;
    transition: opacity 0.3s ease, transform 0.4s ease;
}
.video-facade:hover img { opacity: 1; transform: scale(1.03); }
.video-facade__play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 62px; height: 62px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(10, 12, 19, 0.78);
    border: 2px solid rgba(255, 255, 255, 0.85);
    color: #fff;
    font-size: 1.4rem;
    padding-left: 5px;
    transition: transform 0.25s ease, background 0.25s ease;
}
.video-facade:hover .video-facade__play {
    background: var(--accent);
    color: #0e0c15;
    border-color: var(--accent);
    transform: translate(-50%, -50%) scale(1.08);
}
.video-facade iframe,
.video-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}