:root {
    --color-bg: #050714;
    /* Deep cosmic navy (paleta TradeSafeAccount) */
    --color-paper: #12152c;
    /* Superficie de tarjetas oscura */
    --color-accent: #00d2ff;
    /* Azul claro cian, mismo acento que swgoh/tradesafeaccount.com */
    --color-highlight: #fbbf24;
    /* Neon gold */
    --color-text: #ECEEF7;
    /* Texto claro */
    --color-wood: #0a0d1f;
    /* Fondo oscuro secundario (hovers, header) */
    --font-heading: 'Cinzel', serif;
    --font-body: 'Playfair Display', serif;
    --font-clean: 'Montserrat', sans-serif;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    background:
        linear-gradient(rgba(5, 7, 20, 0.35), rgba(5, 7, 20, 0.35)),
        url('../imagenes/fondos/phoenix-fenghuang.jpg?v=2') center/cover no-repeat var(--color-bg);
    background-attachment: fixed;
    /* Keeps the phoenix image stable while scrolling */
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 1rem;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.highlight {
    color: var(--color-accent);
    font-weight: 700;
}

/* Sticky Nav */
.sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #443224;
    /* Color sólido madera, igual que la web original */
    color: #fff;
    z-index: 2000;
    padding: 0.6rem 0;
    /* Volvemos a 0.6rem para coincidir con el foro */
    line-height: 1.2;
    /* Ajuste para igualar la altura con el foro */
    border-bottom: 1px solid var(--color-highlight);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: none;
}

/* Hero - original size preserved; padding-top clears the fixed nav (no gap) */
.hero {
    height: auto;
    min-height: 164px;
    /* 44px behind fixed nav + 120px visible = same as before */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 56px;
    /* 44px nav + 12px to center title lower in visible area */
    padding-bottom: 12px;
    /* Precise 20px gap between text and border as requested */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://www.metodoquimico.com/styles/prosilver/theme/images/site_logo.png') no-repeat center center;
    background-size: contain;
    background-color: var(--color-wood);
    color: #fff;
    border-bottom: 3px solid var(--color-highlight);
    /* Yellowish gold as per reference hints */
}

.hero-content {
    text-align: center;
    line-height: normal;
}

.hero-content h1 {
    font-size: 3.2rem;
    display: block;
    text-align: center;
    margin: 5px auto -15px auto;
    /* Compensación para el padding y superposición */
    padding-bottom: 10px;
    /* Evita que la cola de la Q se corte */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    line-height: 1.1;
    position: relative;
    z-index: 10;

    /* Parchment gradient effect */
    background: linear-gradient(to bottom, #f4ece1 0%, #d9c5a3 50%, #b8a078 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-content h1 .small-caps {
    font-size: 0.75em;
    vertical-align: baseline;
    letter-spacing: 0;
}

.subtitle {
    font-size: 1.2rem;
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 1px;
    opacity: 0.95;
    margin-top: 6px;
    margin-bottom: 0;
    line-height: 1.4;
    padding-bottom: 6px;
    text-transform: none;
    position: relative;
    z-index: 1;

    /* Parchment gradient effect */
    background: linear-gradient(to bottom, #f4ece1 0%, #d9c5a3 50%, #b8a078 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

/* Hero title image for mobile */
.hero-title-img {
    display: none;
    /* Ocultar por defecto en PC */
}

.hero-title-text {
    display: block;
    /* Mostrar texto por defecto en PC */
}

/* En móviles: Mostrar imagen y ocultar texto */
@media (max-width: 768px) {
    .hero-title-img {
        display: block;
        max-width: 90%;
        width: auto;
        height: auto;
        margin: 0 auto;
        filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.6));
        /* Sombreado para mayor nitidez */
    }

    .hero-title-text {
        display: none;
    }
}

/* Sections - More compact */
.section-v {
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px 1rem 2.4rem 1rem;
    /* Reduced bottom padding by ~10px */
}

.section-l {
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 1rem 2rem 1rem;
    /* Matched 15px top spacing */
    border-top: 3px solid var(--color-highlight);
    /* Added identical line */
}

.section-title {
    text-align: center;
    font-size: 1.5rem;
    margin-top: 0;
    /* Minimized vertical space */
    margin-bottom: 0;
    /* Reduced to 0 as requested */
    position: relative;
}

.section-title::after {
    display: none;
    /* Removed decorative line to save space as requested */
}

.section-subtitle {
    text-align: center;
    font-style: italic;
    font-size: 1.28rem;
    /* Reduced by ~1px */
    margin-bottom: 2rem;
    color: #4a3728;
}

/* Refining Section 1: Camino Layout - More Compressed */
.video-path {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    /* Reduced from 3rem */
    padding: 1.5rem 0 0.2rem 0;
    /* Added top padding for mobile to space out from title */
    position: relative;
}

@media (min-width: 1024px) {
    .video-path {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 1.5rem;
        padding-top: 0;
        /* Reset top padding for PC */
    }

    .video-step:nth-child(even) {
        margin-top: 0;
        /* Aligned horizontally with the others */
    }
}

.video-step {
    max-width: 360px;
    /* Reduced from 400px */
    width: 100%;
}

/* Authentic Wood Frame */
.video-frame {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    overflow: hidden;
    border: 15px solid transparent;
    border-image: url('https://img.freepik.com/free-photo/dark-brown-wooden-textured-background_53876-110023.jpg?t=st=1710000000&exp=1710003600&hmac=...placeholder...') 30 round;
    /* Wood texture placeholder */
    background: #000;
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.8),
        0 20px 40px rgba(0, 0, 0, 0.5);
    margin-bottom: 1.5rem;
}

/* Using a solid color fallback with grain for wood if image fails or for simplicity */
.video-frame {
    border: 12px solid #3d2b1f;
    border-style: ridge;
    outline: 2px solid #5a3e2a;
}

.step-marker {
    width: 50px;
    /* Reduced from 70px */
    height: 50px;
    background: #8b0000;
    color: #ffd700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0 auto 1rem;
    border: 4px double #d4af37;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset -5px -5px 10px rgba(0, 0, 0, 0.3),
        inset 5px 5px 10px rgba(255, 255, 255, 0.2);
    position: relative;
    cursor: default;
}

.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

.video-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
    opacity: 0.8;
}

.video-placeholder i {
    position: absolute;
    font-size: 4rem;
    color: #e6d7b8;
    opacity: 0.9;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s, color 0.3s;
    z-index: 2;
}

.video-frame:hover .video-placeholder img {
    transform: scale(1.1);
    opacity: 1;
}

.video-frame:hover .video-placeholder i {
    color: var(--color-highlight);
    transform: scale(1.2);
}

/* Wax Seal Detail */
.step-marker::after {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
}

/* Refining Section 2: Topics Grid (1x3 Layout) */
.topics-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    padding: 1rem 0;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .topics-grid {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 3rem;
    }

    .topic-step {
        width: 32%;
        /* Matches the 33% roughly feel */
    }
}

.topic-step {
    max-width: 360px;
    width: 100%;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.topic-card {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 1.5rem;
}

/* Parchment 16:9 for topics - matching video section vibe and wood frames */
.topic-parchment {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    background-color: transparent;
    background-size: cover;
    background-position: center;
    border: 12px solid #3d2b1f;
    border-style: ridge;
    outline: 2px solid #5a3e2a;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s, background-color 0.4s;
    overflow: hidden;
}

.topic-parchment::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    /* Darken background slightly for text readability */
    z-index: 1;
    transition: background 0.4s;
}

.topic-step:hover .topic-parchment::before {
    background: rgba(0, 0, 0, 0.05);
}

.topic-parchment h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    font-size: 1.8rem;
    color: var(--color-paper);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);
    margin: 0;
    z-index: 2;
    font-family: var(--font-heading);
}

.topic-parchment h3::before,
.topic-parchment h3::after {
    display: none !important;
}

.topic-parchment i {
    position: absolute;
    bottom: 10%;
    font-size: 2.5rem;
    opacity: 0.6;
    color: var(--color-highlight);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: opacity 0.4s, transform 0.4s;
    z-index: 3;
}

#tema-1-card,
#tema-2-card,
#tema-3-card {
    background-size: 106% auto;
    /* Scaled up ~6% to crop out internal image margins */
    background-position: center center;
}

.topic-step:hover #tema-1-card,
.topic-step:hover #tema-2-card,
.topic-step:hover #tema-3-card {
    background-size: 125% auto;
    /* Increased zoom effect on hover */
}

.topic-step:hover .topic-parchment i {
    opacity: 0.3;
    transform: scale(1.2);
}

.video-caption,
.topic-caption {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-accent);
    margin-top: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    width: 100%;
    padding: 0 1rem;
}



@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Transition Ribbon - Explicit Centering */
.transition-arrow {
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 20px;
    /* Added 20px extra distance as requested */
    width: 100%;
}

.parchment-ribbon {
    display: inline-block;
    padding: 1rem 3rem;
    background: #e6d7b8;
    border: 1px solid #c9b084;
    position: relative;
    font-family: var(--font-heading);
    font-weight: 700;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    animation: bounce 2s infinite;
    text-align: center;
}

/* Lectura Section - Strict Centering */
.section-l {
    text-align: center;
}

/* Section 2 technical manuscript feel */
.parchment-card h3 {
    font-size: 1.4rem;
    color: var(--color-accent);
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--color-highlight);
    display: inline-block;
    padding-bottom: 0.3rem;
}

.parchment-card p {
    font-size: 1rem;
    text-align: justify;
    color: #4a3728;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    font-family: var(--font-body);
}

/* Section 3 Redesign - 3x2 Grid Buttons */
.section-c {
    background: transparent;
    padding: 15px 1rem 3rem 1rem;
    /* Precise 15px top padding as requested */
    border-top: 3px solid var(--color-highlight);
    text-align: center;
}

.section-c .section-title {
    margin-top: 0;
    /* Ensures the padding is the only distance */
}

.section-c .section-subtitle {
    margin-bottom: 2.5rem;
    font-style: italic;
    color: #4a3728;
    font-size: 1.2rem;
}

.contact-btn i {
    font-size: 2.8rem;
    margin-bottom: 0.8rem;
    color: var(--color-accent);
}

.contact-btn span {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
}

.contact-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

/* Animations and Responsive fixes */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }

    .video-step {
        max-width: 100%;
    }

    .contact-container {
        padding: 1.5rem;
    }
}

/* Footer */
.main-footer {
    text-align: center;
    padding: 0.8rem 1rem;
    background: var(--color-wood);
    color: #fff;
    width: 100%;
    flex-shrink: 0;
}

.main-footer p {
    margin: 0;
    font-size: 1.1rem;
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 1px;
    opacity: 0.95;

    /* Parchment gradient effect matching the hero subtitle */
    background: linear-gradient(to bottom, #f4ece1 0%, #d9c5a3 50%, #b8a078 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.footer-links-subtle {
    font-size: 0.85rem;
    /* Letra más pequeña sugerida */
    opacity: 0.7;
    /* Color más oscuro/discreto sugerido */
    -webkit-text-fill-color: initial;
    /* Color sólido sugerido */
    margin-left: 8px;
    display: inline-block;
}

.footer-links-subtle a {
    color: inherit;
    text-decoration: none;
}

.footer-text-long {
    display: inline;
}

.footer-text-short {
    display: none;
}

@media (max-width: 768px) and (orientation: portrait) {
    .footer-text-long {
        display: none !important;
    }

    .footer-text-short {
        display: inline !important;
    }
}

/* --- ESTILOS GENERALES (PC) --- */

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    color: #fff;
    text-decoration: none !important;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    outline: none;
}

.nav-links a:hover {
    color: var(--color-highlight);
}

.social-icons {
    display: flex;
    flex-direction: row;
    /* Fuerza una sola línea */
    align-items: center;
    gap: 1.2rem;
    justify-content: flex-end;
}

.social-icons a {
    color: #fff;
    text-decoration: none !important;
    font-size: 1.1rem;
    transition: transform 0.3s, color 0.3s;
    margin: 0 !important;
    /* Elimina márgenes que puedan moverlos */
}

.social-icons a:hover {
    color: var(--color-highlight);
    transform: scale(1.1);
}

.contact-grid-3x2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.contact-btn {
    text-decoration: none !important;
    background: #fff;
    background-image: url('https://www.transparenttextures.com/patterns/old-map.png');
    border: 6px solid #3d2b1f;
    border-style: ridge;
    padding: 1.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    color: var(--color-accent) !important;
    min-width: 0;
}

/* .whatsapp-float definido más abajo con los estilos definitivos */

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* --- RESPONSIVE TABLET / PC MEDIANO --- */
@media (min-width: 1200px) {

    .section-v,
    .section-l {
        padding-left: 5%;
        padding-right: 5%;
    }
}

/* --- RESPONSIVE MÓVIL (768px) --- */
@media (max-width: 768px) {

    /* Mejor lectura en móviles: evitar huecos del justificado */
    .content-text,
    .parchment-card p,
    .feature-item {
        text-align: left !important;
    }

    /* Imágenes responsive */
    img {
        max-width: 100%;
        height: auto;
    }

    .nav-container {
        padding: 0.5rem 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-links {
        flex-direction: row;
        gap: 0.8rem;
        align-items: center;
    }

    .nav-links a {
        margin: 0;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    /* Ocultar textos por defecto en móvil vertical */
    .nav-links a span {
        display: none !important;
    }

    /* Mostrar solo el texto de Tablas, EXCEPTO en la página de tablas y comunidad */
    body:not(.page-tablas):not(.page-community) .nav-links a[href*="tablas"] span {
        display: inline !important;
    }

    /* Detecta cuando el móvil se pone de lado */
    @media (max-width: 932px) and (orientation: landscape) {
        .nav-links {
            flex-direction: row !important;
            gap: 1.5rem;
            flex: none;
        }

        .nav-links a span {
            display: inline !important;
        }

        .nav-links a {
            font-size: 0.85rem;
        }

        .hero-title-img {
            max-width: 70%;
        }
    }

    .social-icons {
        display: flex;
        /* Cambiado de grid a flex para una sola línea */
        flex-direction: row;
        gap: 0.6rem;
        max-width: none;
        /* Quitamos el límite de ancho */
    }

    .social-icons a {
        font-size: 1rem;
    }

    .contact-grid-3x2 {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columnas en móvil */
        padding: 0 10px;
    }

    .video-frame,
    .topic-parchment {
        border-width: 8px;
        margin-left: auto;
        margin-right: auto;
    }

    .section-title {
        font-size: 1.4rem;
        /* Tamaño restaurado para Lectura Profunda y contacto */
    }



    .main-footer p {
        font-size: 3.5vw;
        /* Ajuste para que quepa en una línea */
        white-space: nowrap;
        display: inline-block;
    }

    .nav-links a i {
        font-size: 1.1rem;
    }

    /* Ocultar el protocolo en enlaces largos si el espacio es reducido */
    .url-protocol {
        display: none;
    }
}

/* --- AJUSTES EXTRA MÓVIL PEQUEÑO --- */
@media (max-width: 480px) {
    .contact-btn i {
        font-size: 2rem;
    }

    .contact-btn span {
        font-size: 0.8rem;
    }

    .main-footer p {
        font-size: 3.8vw;
    }
}

/* --- PAGINAS DE CONTENIDO / LECTURA PROFUNDA --- */
.content-section {
    max-width: 900px;
    margin: 1rem auto 2.4rem auto;
    padding: 3rem 2.5rem 1.2rem 2.5rem;
    background-color: #fdf6e3;
    background-image: url('../imagenes/fondo.jpg');
    background-repeat: repeat;
    border: 1px solid #dcd0b9;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), inset 0 0 60px rgba(139, 69, 19, 0.1);
    position: relative;
}

.content-section h2 {
    font-family: var(--font-heading);
    color: var(--color-accent);
    text-align: center;
    margin: 0 auto 3rem auto;
    font-size: 1.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    width: fit-content;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
    position: relative;
    padding: 12px 0;
}

.content-section h2::before,
.content-section h2::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--color-accent), transparent);
    border-radius: 50%;
}

.content-section h2::before {
    top: -5px;
}

.content-section h2::after {
    bottom: -5px;
}

.content-section h3 {
    font-family: var(--font-heading);
    color: var(--color-accent);
    text-align: center;
    margin: 3rem auto 1.5rem auto;
    font-size: 1.45rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    width: fit-content;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
    position: relative;
    padding: 10px 0;
}

.content-section h3::before,
.content-section h3::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--color-accent), transparent);
    border-radius: 50%;
}

.content-section h3::before {
    top: -5px;
}

.content-section h3::after {
    bottom: -5px;
}

.content-section h4 {
    font-family: var(--font-heading);
    color: var(--color-accent);
    text-align: left;
    margin: 2.5rem 0 1.2rem;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    border-bottom: 1.5px solid rgba(139, 69, 19, 0.25);
    width: 100%;
    padding-bottom: 5px;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}

.content-text {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #000;
    text-align: justify;
}

.content-text a {
    word-break: break-all;
    overflow-wrap: break-word;
}

.content-text p {
    margin-bottom: 1.5rem;
}

.content-text strong {
    font-weight: bold;
}

.content-text em {
    font-style: italic;
}

.title-icon {
    color: var(--color-accent);
    margin-right: 10px;
    font-size: 1.2rem;
}

.topic-header {
    background-color: #ede2cd;
    background-image: url('https://www.transparenttextures.com/patterns/old-map.png');
    padding: 14px 18px 12px 18px;
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1;
    border-bottom: 2px solid var(--color-highlight);
    box-shadow: inset 0 0 30px rgba(61, 43, 31, 0.12);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
}

.topic-list {
    margin: 2rem 0;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(61, 43, 31, 0.2);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.topic-row {
    display: flex;
    align-items: center;
    padding: 8px 18px;
    border-bottom: 1px solid rgba(61, 43, 31, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    color: inherit;
}

.topic-row:hover {
    background: rgba(255, 255, 255, 0.4);
    padding-left: 28px;
}

.topic-icon-wrap {
    width: 26px;
    height: 26px;
    background: var(--color-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.topic-main {
    flex-grow: 1;
    text-decoration: none;
}

.topic-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #2d1f16;
    line-height: 1.2;
    letter-spacing: 0.4px;
    text-shadow: 0.5px 0.5px 1px rgba(255, 255, 255, 0.5);
}

.topic-desc {
    display: block;
    font-size: 0.85rem;
    color: #7a6352;
    margin-top: 0;
    font-style: italic;
    line-height: 1.1;
}

.topic-arrow-hint {
    color: var(--color-accent);
    opacity: 0.2;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.topic-row:hover .topic-arrow-hint {
    opacity: 1;
    transform: translateX(5px);
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.feature-item {
    background: rgba(255, 255, 255, 0.25);
    border-left: 3px solid var(--color-accent);
    padding: 10px 14px;
    font-size: 0.95rem;
    color: #2d1f16;
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
    line-height: 1.4;
}

.feature-item:hover {
    transform: translateX(4px);
    background: rgba(255, 255, 255, 0.4);
}

.feature-item i {
    margin-right: 10px;
    color: var(--color-accent);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.topic-parchment h3 {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--color-paper) !important;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9) !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
    font-size: 1.8rem !important;
    z-index: 2 !important;
}

@media (max-width: 768px) {
    .content-section {
        padding: 1.2rem 1.2rem !important;
        /* Más espacio para el icono y mejor lectura */
        margin: 0.5rem !important;
        overflow-x: visible !important;
    }

    .content-text {
        font-size: 0.95rem;
        padding: 0;
        text-align: left !important;
    }

    .content-text p {
        text-align: left !important;
    }

    /* Vertical stacking for containers, excluding inline elements, headings and weight-grid */
    .content-section div:not([style*="display: inline"]):not(.weight-grid):not(.weight-card),
    .content-section section,
    .content-section ul:not(.weight-grid),
    .content-section li:not(.weight-card) {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        display: block !important;
    }

    /* Force flex/grid containers to stack but preserve internal alignment for small items */
    .content-section [style*="display: flex"]:not(h2):not(h3):not(h4):not(h5),
    .content-section [style*="display: grid"]:not(.weight-grid),
    .content-section .feature-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Excepción para la cuadrícula de pesos: mantener columnas en móvil */
    .weight-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        /* 2 columnas en vertical */
        gap: 8px !important;
        margin: 1.5rem 0 !important;
    }

    .weight-card {
        display: flex !important;
        flex-direction: column !important;
        min-height: 80px !important;
        width: auto !important;
        padding: 0.8rem 0.3rem !important;
    }

    .weight-result {
        font-size: 1.3rem !important;
    }

    .weight-range {
        font-size: 0.65rem !important;
        min-height: auto !important;
    }

    /* En móvil horizontal (landscape) mostrar 3 columnas */
    @media (orientation: landscape) {
        .weight-grid {
            grid-template-columns: repeat(3, 1fr) !important;
        }
    }

    /* Titles: Ensure icons are integrated and centered with the text */
    .content-section h2,
    .content-section h3,
    .content-section h4,
    .content-section h5 {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .content-section h2 i,
    .content-section h3 i,
    .content-section h4 i,
    .content-section h5 i {
        display: inline-block !important;
        margin-right: 8px !important;
        vertical-align: middle !important;
        float: none !important;
    }

    /* Fix side separators */
    .content-section [style*="border-left"],
    .content-section [style*="border-right"] {
        border-right: none !important;
        border-left-width: 4px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Tighten internal spacing */
    .content-section [style*="padding: 25px"],
    .content-section [style*="padding: 30px"],
    .content-section [style*="padding: 20px"] {
        padding: 15px 10px !important;
    }

    /* Schedule list specific stacking */
    .content-section ul[style*="max-width: 600px"] li {
        display: block !important;
        padding: 12px 10px !important;
    }

    .content-section ul[style*="max-width: 600px"] li div {
        display: block !important;
        text-align: left !important;
        width: 100% !important;
    }

    /* Links: Only expand if they are buttons, not links in text */
    .content-section a[style*="background"],
    .content-section a[style*="border: 1px solid"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin: 10px 0 !important;
        padding: 12px 10px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }

    /* Images - Default to block for single images */
    .content-section img {
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
        margin: 15px auto !important;
    }

    /* Paragraphs with multiple images: show them in a row on mobile */
    .content-text p:has(img + img) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 1.5rem !important;
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }

    /* Override block display for images inside such paragraphs - default for 2 images */
    .content-text p:has(img + img) img {
        display: inline-block !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
        max-width: 48% !important;
        /* 2 images occupy roughly half each */
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* For 3 or more images, reduce to 32% */
    .content-text p:has(img + img + img) img {
        max-width: 32% !important;
    }

    /* Specifically handle if there are more than 3 images to allow them to shrink more */
    .content-text p:has(img + img + img + img) img {
        max-width: 23% !important;
    }

    /* Next Step Button: Stack in narrow vertical, row in wider/landscape */
    .content-section a[href="fibra.html"] {
        display: flex !important;
        flex-direction: column !important;
        /* Stack by default in narrow mobile */
        align-items: center !important;
        justify-content: center !important;
        padding: 20px 15px !important;
        border-radius: 25px !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Prevent children from being forced to stack by global rules */
    .content-section a[href="fibra.html"] div {
        display: block !important;
        width: auto !important;
    }

    .content-section a[href="fibra.html"] div:first-child {
        width: 100% !important;
        margin-bottom: 15px;
        text-align: center !important;
    }

    .content-section a[href="fibra.html"] .next-arrow {
        margin-left: 0 !important;
        width: 48px !important;
        height: 48px !important;
        display: flex !important;
        order: 2;
    }

    /* Switch to Row layout when there is enough width (Landscape or wider devices) */
    @media (min-width: 500px) {
        .content-section a[href="fibra.html"] {
            flex-direction: row !important;
            justify-content: space-between !important;
            text-align: left !important;
            padding: 10px 10px 10px 25px !important;
            border-radius: 60px !important;
            max-width: 480px !important;
            /* Limit width to keep it stylized like PC */
        }

        .content-section a[href="fibra.html"] div:first-child {
            margin-bottom: 0 !important;
            text-align: left !important;
            flex: 1 !important;
            width: auto !important;
        }

        .content-section a[href="fibra.html"] .next-arrow {
            margin-left: 15px !important;
        }
    }

    /* Target headers again to be extra sure icons stay inline */
    .content-section h3,
    .content-section h4 {
        display: block !important;
        text-align: center !important;
    }

    .content-section h3 i,
    .content-section h4 i {
        display: inline-block !important;
        margin-right: 8px !important;
        margin-bottom: 0 !important;
        vertical-align: middle !important;
    }

    .content-section h2 {
        font-size: 1.4rem;
        letter-spacing: 1px;
        width: 100%;
        box-sizing: border-box;
    }

    .feature-list {
        grid-template-columns: 1fr;
    }

    /* Restaurar líneas laterales y 2 columnas en vista horizontal */
    @media (orientation: landscape) {
        .content-section h3 {
            display: flex;
            padding: 0;
        }

        .content-section h3::before,
        .content-section h3::after {
            position: relative;
            left: auto;
            transform: none;
            width: auto;
            flex-grow: 1;
            max-width: 100px;
        }

        .feature-list {
            grid-template-columns: 1fr 1fr;
        }
    }
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1100;
    transition: all 0.3s ease;
    text-decoration: none;
    animation: pulse 2s infinite;
}

.whatsapp-float:hover {
    background-color: #128c7e;
    transform: scale(1.1);
    color: #fff;
}

/* Back to Top Button */
#scrollToTopBtn {
    position: fixed;
    bottom: 6rem;
    /* Ajustado por el menor tamaño */
    right: 2.75rem;
    /* Centrado respecto al botón de whatsapp (que está en right: 2rem y mide 3.5rem) */
    /* Fondo dorado igual que Fase 1, Fase 2, Fase 3 */
    background: linear-gradient(to bottom, #f4ece1 0%, #d9c5a3 50%, #b8a078 100%);
    color: var(--color-wood);
    /* Texto oscuro para contraste */
    border: 1px solid #c9b084;
    border-radius: 50%;
    width: 2rem;
    /* Mitad de tamaño aprox */
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1100;
    opacity: 0;
    /* Inicialmente oculto por JS */
    transform: translateY(20px);
    transition: all 0.3s ease;
    pointer-events: none;
}

#scrollToTopBtn.show {
    opacity: 0.4;
    /* Transparencia del 40% al aparecer */
    transform: translateY(0);
    pointer-events: auto;
}

/* Meal Schedule Styles */
.meal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin: 3rem 0;
    list-style: none;
    padding: 0;
}

.meal-card {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(253, 246, 227, 0.4));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.meal-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--color-highlight);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
}

.meal-icon {
    font-size: 1.5rem;
    color: var(--color-accent);
    margin-bottom: 0.25rem;
}

.meal-name {
    font-family: var(--font-heading);
    color: var(--color-wood);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    min-height: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.meal-time {
    font-family: var(--font-clean);
    color: #5d4037;
    font-size: 0.8rem;
    background: rgba(212, 175, 55, 0.15);
    padding: 2px 8px;
    border-radius: 12px;
    /* Pill shape */
    font-weight: 600;
}

.meal-desc {
    font-size: 0.85rem;
    color: #444;
    margin-top: 0.5rem;
    font-style: italic;
    border-top: 1px dotted rgba(212, 175, 55, 0.5);
    padding-top: 0.5rem;
    width: 100%;
    text-align: center;
}

/* Nutrient Info Styles */
.nutrient-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.nutrient-card {
    background: rgba(255, 255, 255, 0.6);
    border-left: 5px solid var(--color-accent);
    border-radius: 4px;
    /* Slight radius on other corners */
    padding: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nutrient-card:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.nutrient-icon {
    font-size: 2rem;
    color: var(--color-accent);
    width: 50px;
    text-align: center;
    flex-shrink: 0;
}

.nutrient-info {
    flex-grow: 1;
}

.nutrient-info h4 {
    margin: 0 0 0.3rem 0;
    font-size: 0.95rem;
    color: var(--color-wood);
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
}

.nutrient-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}

.nutrient-value {
    font-weight: 700;
    color: #a0522d;
    /* Sienna, slightly distinct from accent */
    font-size: 1.1rem;
}

/* Weight Loss Goals Styles */
.weight-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.8rem;
    margin: 3rem 0;
}

@media (max-width: 768px) {
    .weight-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.5rem;
    }
}

@media (max-width: 580px) {
    .weight-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 3+2 layout = 2 lines */
        gap: 0.5rem;
    }
}

.weight-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(253, 246, 227, 0.5) 100%);
    border: 1px solid var(--color-accent);
    border-radius: 12px;
    padding: 1.2rem 0.4rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    min-height: 150px;
}

.weight-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--color-highlight);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.weight-range {
    font-family: var(--font-clean);
    color: #555;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weight-result {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.1;
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.weight-period {
    font-size: 0.8rem;
    color: #888;
    font-style: italic;
    font-family: var(--font-body);
    min-height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#scrollToTopBtn:hover {
    opacity: 1;
    /* Opacidad completa al pasar el mouse */
    background-color: #ffd700;
    /* Fallback si la imagen no carga */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* --- REPRODUCTOR AUDIO FLOTANTE --- */
.floating-audio-wrapper {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    z-index: 1200;
}

.floating-audio-btn {
    background: var(--color-wood);
    color: #fdf6e3;
    /* Color pergamino claro */
    border: 2px solid var(--color-highlight);
    border-radius: 30px;
    padding: 0.6rem 1.5rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.floating-audio-control {
    background: var(--color-wood);
    color: #fdf6e3;
    border: 2px solid var(--color-highlight);
    border-radius: 50%;
    width: 2.8rem;
    height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.floating-audio-btn:hover,
.floating-audio-control:hover {
    background: #5a3e2a;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Estado de reproducción activa (afecta a todo el grupo) */
.floating-audio-wrapper.playing button {
    border-color: #4CAF50 !important;
}

.floating-audio-wrapper.playing button i,
.floating-audio-wrapper.playing button span {
    color: #4CAF50 !important;
}

.floating-audio-wrapper.playing .floating-audio-btn i {
    animation: pulse-audio 2s infinite;
}

@keyframes pulse-audio {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .floating-audio-wrapper {
        gap: 0.4rem;
        left: 0.8rem;
        transform: none;
    }
}

@media (max-width: 768px) {
    .floating-audio-wrapper {
        bottom: 1rem;
        top: auto;
        gap: 0.5rem;
    }

    .floating-audio-btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .floating-audio-control {
        width: 2.4rem;
        height: 2.4rem;
        font-size: 0.9rem;
    }

    .whatsapp-float {
        bottom: 1.5rem;
        /* Posición original igual que index.html */
        right: 1.5rem;
        width: 3rem;
        height: 3rem;
        font-size: 1.8rem;
        z-index: 1100;
    }

    #scrollToTopBtn {
        bottom: 5rem;
        /* Posición original igual que index.html */
        right: 2rem;
        width: 1.8rem;
        height: 1.8rem;
        font-size: 0.8rem;
        z-index: 1100;
    }
}

/* --- LECTURA SINCRONIZADA (READ-ALONG) INDICADOR DE AUDIO --- */
/* Eliminamos los resaltados de texto por completo */
.sync-active {
    background-color: transparent !important;
    position: relative;
    /* Necesario para posicionar el icono de forma absoluta respecto al bloque */
}

/* El icono flotante que indica por dónde vamos */
.sync-active::before {
    content: "\f028";
    /* Código unicode para 'fa-volume-high' de FontAwesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: -2.5rem;
    /* Posicionado justo al lado izquierdo del bloque */
    top: 50%;
    /* Centrado verticalmente... */
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #c0a060;
    /* Un poco más oscuro para mejor contraste */
    opacity: 0.9;
    z-index: 10;
    /* Asegurar que flote sobre el fondo */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* Transición nula ya que no hay cambios de color */
[id^="sync-"],
.sync-text,
[id^="txt-"] {
    background-color: transparent;
}

/* En dispositivos móviles (donde no hay tanto margen izquierdo libre), movemos el icono un poco más hacia la derecha para que no se salga de la pantalla */
@media (max-width: 768px) {
    .sync-active::before {
        left: -1.7rem;
        /* Alejado del texto para no molestar la lectura */
        font-size: 1.1rem;
        z-index: 2000;
        /* Por encima de todo en móvil */
        opacity: 1;
    }
}

/* --- Interactive Next Buttons Animation (Audio Narration End) --- */
.interactive-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3.5rem;
    /* Larger font */
    color: #e63946;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.4s ease-in-out;
    filter: drop-shadow(0 0 8px rgba(230, 57, 70, 0.6));
    /* Red glow */
}

.interactive-arrow.left-arrow {
    left: -4.5rem;
}

.interactive-arrow.right-arrow {
    right: -4.5rem;
}

/* More dramatic pointing animation */
@keyframes pointLeft {
    0% {
        transform: translate(-10px, -50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(20px, -50%) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(-10px, -50%) scale(1);
        opacity: 0.8;
    }
}

@keyframes pointRight {
    0% {
        transform: translate(10px, -50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(-20px, -50%) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(10px, -50%) scale(1);
        opacity: 0.8;
    }
}

/* Pulsing border for the container being pointed at */
@keyframes boxPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.4);
        border-color: #e63946;
    }

    70% {
        box-shadow: 0 0 20px 10px rgba(230, 57, 70, 0);
        border-color: #e63946;
    }

    100% {
        box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);
        border-color: rgba(212, 175, 55, 0.3);
    }
}

.sync-active.interactive-next {
    animation: boxPulse 1.5s infinite ease-in-out;
    border-width: 2px !important;
    background-color: rgba(230, 57, 70, 0.05) !important;
}

.sync-active.interactive-next .interactive-arrow {
    opacity: 1;
}

.sync-active.interactive-next .left-arrow {
    animation: pointLeft 0.8s infinite ease-in-out;
}

.sync-active.interactive-next .right-arrow {
    animation: pointRight 0.8s infinite ease-in-out;
}

/* Hide the little golden audio icon on this specific block */
.sync-active.interactive-next::before {
    display: none !important;
}

@media (max-width: 768px) {
    .interactive-arrow {
        font-size: 2.5rem;
    }

    .interactive-arrow.left-arrow {
        left: -1rem;
    }

    .interactive-arrow.right-arrow {
        right: -1rem;
    }
}

/* --- SHARE MODAL & COMMUNITY ACTIONS --- */
#shareModal.visible {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.owner-actions button {
    transition: transform 0.2s, opacity 0.2s;
    opacity: 0.7;
}

.owner-actions button:hover {
    transform: scale(1.2);
    opacity: 1;
}

#foro-fondo-fijo {
    display: none;
}

/* Móvil: `background-attachment: fixed` del body no se renderiza bien hasta el
   primer scroll en muchos navegadores móviles, y además la barra de navegación
   del navegador (Opera, Chrome...) al aparecer/desaparecer durante el scroll
   recalcula el viewport y provoca que el fondo "salte". En su lugar se usa una
   capa aparte (#foro-fondo-fijo, position:fixed) con altura fijada UNA vez en
   píxeles por JS (foroFijarFondoMovil() en foro-engine.js) en vez de vh/svh
   -que sí se recalculan con la barra y re-centran el fondo-. El body se queda
   sin fondo propio (transparente, se ve la capa de detrás). */
@media (max-width: 768px) {
    /* El fondo del body en sí (background:var(--color-bg), transparente) se
       quita vía JS (foroFijarFondoMovil() en foro-engine.js), no aquí: este
       style.css es compartido con TODO el sitio en MQ (comunidad.html,
       index.html...), no solo con el foro, así que una regla CSS incondicional
       aquí ocultaría el fondo en móvil en páginas que no son del foro. */
    #foro-fondo-fijo {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: -1;
        background: linear-gradient(rgba(5, 7, 20, 0.35), rgba(5, 7, 20, 0.35)),
            url('../imagenes/fondos/phoenix-fenghuang.jpg?v=2') center/cover no-repeat var(--color-bg);
    }
}