/* ================================================= */
/* === TIPOGRAFÍA Y ESTILOS BASE === */
/* ================================================= */


@media (min-width: 768px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 20px;
    }
}


h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #2c3e50;
}




/* Títulos de sección y subsección */
.section-title {
    font-size: 1.8rem;
    margin: 2rem 0 1rem 0;
    border-bottom: 2px solid #3d4f5a;
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.subsection-title {
    font-size: 1.4rem;
    margin: 2rem 0 1rem 0;
    color: #34495e;
}
/* ================================================= */
 /* === COHERENCIA TIPOGRÁFICA DE CONTENIDO === */
 /* ================================================= */

.content-box,
.content-box p,
.content-box li,
.content-box span,
.content-box div {
    font-family: 'Lato', sans-serif;
    color: #2c3e50;
    font-weight: 400;
}

.content-box p {
    text-align: justify;
    text-justify: inter-word;
}

.content-box h2,
.content-box h3 {
    font-family: 'Playfair Display', serif;
    color: #1f3a5f;
}



/* ================================================= */
/* === ÍCONOS SVG (reemplazo de Font Awesome) === */
/* ================================================= */

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* ================================================= */
/* === HEADER === */
/* ================================================= */

header {
    text-align: center;
    padding: 2rem 1rem 1rem;
    border-bottom: 3px solid #b9976f;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 50;
}

header h1 {
    font-size: 1.8em;
    color: #3d3a50;
    margin: 0;
}

header p {
    color: #5a6570;
    margin: 0.5rem 0 0;
    font-size: 1rem;
}

/* ================================================= */
/* === CONTENEDORES Y CAJAS === */
/* ================================================= */



.content-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}




/* ================================================= */
/* === TARJETAS Y GRILLAS === */
/* ================================================= */

.door-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.door-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.door-card img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.doors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

/* ================================================= */
/* === ÍNDICE TEMÁTICO === */
/* ================================================= */

.indice-tematico {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 15px;
    padding: 2rem;
    margin: 2rem 0;
    border: 2px solid #B9976F;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.indice-title {
    color: #2c3e50;
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

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



.indice-item a {
    text-decoration: none;
    color: #2c3e50;
    font-weight: 500;
}

.indice-item a:hover {
    color: #B9976F;
}


/* ================================================= */
/* === BLOQUE DE ACOMPAÑAMIENTO === */
/* ================================================= */

.bloque-acompanamiento {
    max-width: 825px;
    margin: 3rem auto;
    padding: 2rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(185, 151, 111, 0.12);
    border: 1px solid rgba(185, 151, 111, 0.3);
}

.bloque-acompanamiento h3,
.bloque-acompanamiento h4,
.bloque-acompanamiento h5 {
    text-align: left;
    margin: 0.8em 0 1em 0;
    color: #1c1510;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.feature-item {
    background: #f8f5f1;
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(185, 151, 111, 0.15);
}

.feature-item i {
    font-size: 2rem;
    color: var(--bronze);
    margin-bottom: 0.8rem;
}

.bloque-acompanamiento .key-points {
    background: #f5f9fa;
    padding: 1.5rem 2rem;
    border: 1px solid #dfe6e9;
    text-align: left;
}

.bloque-acompanamiento .key-points ul {
    list-style-type: disc;
    padding-left: 2em;
}

/* ================================================= */
/* === BRIDGE POST-CERTIFICADO === */
/* ================================================= */

.bridge-postcert {
  max-width: 760px;
  margin: 3rem auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.bridge-postcert__inner {
  background: #fffefb;
  border: 1px solid rgba(185,151,111,0.18);
  border-top: none;
  border-radius: 14px;
  padding: 2.5rem 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 28px rgba(185,151,111,0.09), 0 1px 4px rgba(28,21,16,0.04);
}

/* Gradiente bronce en borde superior */
.bridge-postcert__inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #B9976F 25%, #d4b87a 75%, transparent 100%);
  border-radius: 14px 14px 0 0;
}

/* Ornamento decorativo fondo */
.bridge-postcert__inner::after {
  content: '✦';
  position: absolute;
  bottom: 1rem;
  right: 2rem;
  font-size: 5rem;
  color: rgba(185,151,111,0.045);
  font-family: 'Playfair Display', serif;
  pointer-events: none;
  line-height: 1;
}

.bridge-postcert__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1c1510;
  margin: 0.25rem 0 0;
  line-height: 1.25;
}

/* Regla corta bajo el título */
.bridge-postcert__title::after {
  content: '';
  display: block;
  width: 2.2rem;
  height: 1.5px;
  background: rgba(185,151,111,0.55);
  margin-top: 0.65rem;
}

.bridge-postcert__done {
  margin-bottom: 2rem;
}

.bridge-postcert__done p {
  font-size: 0.975rem;
  line-height: 1.82;
  color: #4a3f35;
  margin: 0.9rem 0 0;
}

/* Divisor ✦ con reglas a los lados */
.bridge-postcert__ahead-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #B9976F;
  margin: 0 0 0.75rem;
}

.bridge-postcert__ahead-label::before,
.bridge-postcert__ahead-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(185,151,111,0.22);
}

.bridge-postcert__units {
  display: flex;
  flex-direction: column;
}

.bridge-postcert__unit {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.4rem;
  border-bottom: 1px solid rgba(185,151,111,0.09);
  border-radius: 6px;
  transition: background 0.18s ease;
}

.bridge-postcert__unit:last-child { border-bottom: none; }

.bridge-postcert__unit:hover {
  background: rgba(185,151,111,0.05);
}

/* Badge tipográfico para número de unidad */
.bridge-postcert__unit-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 1.5rem;
  background: rgba(185,151,111,0.1);
  border: 1px solid rgba(185,151,111,0.28);
  border-radius: 4px;
  font-family: 'Playfair Display', serif;
  font-size: 0.67rem;
  font-weight: 700;
  color: #8f6b3e;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.bridge-postcert__unit-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #5a4a3a;
  flex: 1;
}

/* Flecha sutil al final de cada fila */
.bridge-postcert__unit::after {
  content: '→';
  color: rgba(185,151,111,0.35);
  font-size: 0.78rem;
  flex-shrink: 0;
  transition: color 0.18s, transform 0.18s;
}

.bridge-postcert__unit:hover::after {
  color: #B9976F;
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .bridge-postcert__inner { padding: 1.5rem 1.25rem; }
  .bridge-postcert__title { font-size: 1.25rem; }
  .bridge-postcert__inner::after { display: none; }
}

/* ================================================= */
/* === DATOS ONÍRICOS === */
/* ================================================= */

.dato-onirico {
    background: linear-gradient(145deg, #0b1c39 0%, #13294b 100%);
    border-radius: 16px;
    padding: 2.8em 1.8em;
    text-align: center;
    max-width: 900px;
    margin: 3em auto;
    box-shadow: 0 8px 32px rgba(10, 20, 40, 0.6);
    color: #f5f7fa;
}

.dato-titulo {
    font-size: 1.2em;
    color: #ffe99b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.8em;
    text-shadow: 0 0 10px rgba(255, 200, 80, 0.6);
}

.dato-texto {
    font-size: 1.8em;
    line-height: 1.5;
    color: #eaf1ff;
    max-width: 85%;
    margin: 0 auto;
}

/* ================================================= */
/* === GLOSARIO === */
/* ================================================= */

.glosario-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

.glosario-item {
    background: rgba(255, 255, 255, 0.8);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #B9976F;
}


/* ================================================= */
/* === LISTAS === */
/* ================================================= */

ul {
    list-style: none;
    padding: 0;
}

ul li {
    margin: 0.4em 0;
}

ul li a {
    text-decoration: none;
    color: #2d5fa8;
    font-weight: 600;
}

ul li a:hover {
    color: #b9976f;
}



/* ================================================= */
/* === CONTENT BOX E IFRAME === */
/* ================================================= */

iframe {
    display: block;
    border: none;
    border-radius: 12px;
    margin: 1.5rem 0;
    width: 100%;}


.content-box iframe {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 12px;
    width: 100%;
    line-height: 0;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* ================================================= */
/* === MULTIMEDIA === */
/* ================================================= */

.image-container,
.media-container {
    text-align: center;
    margin: 2rem auto;
    max-width: 720px;
}

.image-container img,
.media-container img,
.media-container video {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 1rem;
}





/* ================================================= */
/* === CAJAS DE INFORMACIÓN === */
/* ================================================= */

.exercise-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid #3498db;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}



.key-points {
    background: linear-gradient(135deg, #fdf7ed 0%, #f8f1e4 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 1px solid #e6d7c3;
}

.key-points ul {
    list-style-type: circle;
    padding-left: 1.5rem;
}

.key-points li {
    margin-bottom: 0.8rem;
}


/* ================================================= */
/* === MODALES === */
/* ================================================= */

.modal-puerta {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease;
}

.modal-puerta.show {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-contenido-puerta {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    padding: 0;
    border-radius: 25px;
    max-width: 650px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.4s ease;
    overflow: hidden;
    width: 90%;
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.cerrar-modal {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #aaa;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 1;
}

.cerrar-modal:hover {
    color: #2c3e50;
}

.modal-header {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(142, 68, 173, 0.1));
    padding: 2.5rem 2rem 2rem;
    text-align: center;
}

.modal-header h3 {
    color: #2c3e50;
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
}

.modal-body {
    padding: 2rem;
}

.modal-lista {
    margin: 1.5rem 0;
}

.modal-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(52, 152, 219, 0.05);
    border-radius: 10px;
    border-left: 3px solid #3498db;
}

.modal-icono {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.modal-item p {
    margin: 0;
    color: #546E7A;
}

.modal-nota {
    margin-top: 1.5rem;
    padding: 1.2rem;
    background: linear-gradient(135deg, #fdf7ed 0%, #f8f1e4 100%);
    border-radius: 12px;
    border-left: 4px solid #B9976F;
}

.modal-nota p {
    margin: 0;
    color: #2c3e50;
    line-height: 1.6;
}

.modal-footer {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.02);
}

.btn-modal-secundario,
.btn-modal-primario {
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.btn-modal-secundario {
    background: #ecf0f1;
    color: #546E7A;
}

.btn-modal-secundario:hover {
    background: #bdc3c7;
    transform: translateY(-2px);
}

.btn-modal-primario {
    background: linear-gradient(135deg, #3498db 0%, #8e44ad 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.btn-modal-primario:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}

/* ================================================= */
/* === FOOTER === */
/* ================================================= */

.pie-pagina-discreto {
    text-align: right;
    font-size: 0.8rem;
    color: #78909c;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #dce9ec;
    font-family: 'Lato', sans-serif;
}

.footer-completo {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: #ecf0f1;
    font-family: 'Lato', sans-serif;
    margin-top: 3rem;
    padding: 3rem 0 1.5rem 0;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    font-family: 'Playfair Display', serif;
    color: #B9976F;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #B9976F;
    padding-bottom: 0.5rem;
}

.footer-section p,
.footer-section li {
    line-height: 1.6;
    margin-bottom: 0.8rem;
    color: #bdc3c7;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    padding: 0.3rem 0;
    transition: color 0.3s ease;
}

.footer-section ul li:hover {
    color: #B9976F;
    cursor: pointer;
}

.footer-section ul li i {
    margin-right: 0.5rem;
    color: #B9976F;
    width: 16px;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}



.contact-info {
    background-color: rgba(185, 151, 111, 0.1);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #B9976F;
}

.contact-info h4 {
    color: #B9976F;
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
}

.contact-item i {
    color: #B9976F;
    margin-right: 0.8rem;
    width: 20px;
}

.newsletter-form {
    display: flex;
    margin-top: 1rem;
    gap: 0.5rem;
}

.newsletter-form input {
    flex: 1;
    padding: 0.8rem;
    border: none;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(185, 151, 111, 0.3);
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.newsletter-form button {
    padding: 0.8rem 1.5rem;
    background-color: #B9976F;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.newsletter-form button:hover {
    background-color: #a08660;
}





/* ================================================= */
/* === SECCIÓN Y FOOTER (layout base) === */
/* ================================================= */


section {
    /* base mínima: cada sección define su propio fondo, borde y sombra vía clase */
    padding: 1.5rem;
}

.section-block {
    max-width: 900px;
    margin: 2rem auto;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

footer {
    text-align: center;
    font-size: 0.9em;
    color: #666;
    padding: 1rem;
}

/* ================================================= */
/* === SCROLLBAR === */
/* ================================================= */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(10, 20, 40, 0.6);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8ac7e6 0%, #b9976f 100%);
    border-radius: 10px;
    border: 2px solid rgba(18, 28, 48, 0.8);
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #b9976f 0%, #8ac7e6 100%);
}

* {
    scrollbar-width: thin;
    scrollbar-color: #b9976f rgba(10, 20, 40, 0.6);
}

/* ================================================= */
/* === RESPONSIVE === */
/* ================================================= */

@media (max-width: 768px) {
    .doors-grid,
    .feature-grid,
    .glosario-grid,
    .indice-grid {
        grid-template-columns: 1fr;
    }

    .bloque-acompanamiento {
        padding: 1rem;
    }

  

    .section-title {
        font-size: 1.4rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .social-links {
        justify-content: center;
    }

    .modal-contenido-puerta {
        margin: 10% 1rem;
        max-width: 100%;
    }

    .modal-footer {
        flex-direction: column;
    }

    .btn-modal-secundario,
    .btn-modal-primario {
        width: 100%;
    }

    header h1 {
        font-size: 1.5em;
    }

    header p {
        font-size: 0.95em;
    }

    iframe {
        height: 120px;
    }
}
#entre-la-certeza .key-points {
    background: #fff7eb;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-top: 1.25rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

#entre-la-certeza .key-points h4 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #795548;
}

#entre-la-certeza .key-points ul {
    margin: 0;
    padding-left: 1.2rem;
}

#entre-la-certeza .key-points li {
    margin-bottom: 0.35rem;
}

/* Un poco menos de espacio antes de "Perspectivas..." */
#entre-la-certeza {
    margin-bottom: 2rem;
    border-top: 4px solid #b9976f;
}

#sueno-infantil {
    margin-top: 0.5rem;
}
.actividad-cierre {
    background: linear-gradient(135deg, #ffe9df, #ffeef5);
    border-left: 6px solid #f2994a;
    margin-bottom: 2.5rem;
}

.actividad-intro {
    font-size: 1.05rem;
    color: #4a4a4a;
}

.actividad-subtitulo {
    font-size: 1.1rem;
    color: #d35400;
    margin-top: 1.4rem;
    margin-bottom: 0.5rem;
}

.actividad-nota {
    font-style: italic;
    color: #6b6b6b;
    margin-bottom: 1rem;
}

.actividad-pasos {
    color: #3d3d3d;
    padding-left: 1.3rem;
    margin-bottom: 1.2rem;
}

.actividad-pasos li {
    margin-bottom: 0.4rem;
}

.actividad-registro {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.7);
    border-left: 4px solid #e67e22;
    border-radius: 8px;
    color: #4a4a4a;
}
.actividad-guia {
    background: #e9f6ff;
    border-left: 4px solid #3498db;
    margin-bottom: 2.5rem;
}

.section-title-guia {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2878b5;
    margin-bottom: 0.75rem;
}

.guia-lista {
    color: #2c3e50;
    margin-bottom: 0.6rem;
    padding-left: 1.2rem;
}

.guia-lista li {
    margin-bottom: 0.3rem;
}

.guia-consejo {
    color: #5a6f7c;
    font-style: italic;
    margin: 0;
}
/* Modo cinematográfico para recursos interactivos */
.puerta-onirica-externa iframe {
    overflow: hidden;
    scrollbar-width: none;
}

.puerta-onirica-externa iframe::-webkit-scrollbar {
    display: none;
}

/* Remover cualquier padding del contenedor */
.puerta-onirica-externa {
    margin: 0;
    padding: 0;
}
/* Icono onírico: brillo mínimo, elegante */
.icono-onirico {
    animation: brillo-suave 6s ease-in-out infinite;
    display: inline-block;
}

@keyframes brillo-suave {
    0%, 95% { opacity: 1; filter: brightness(1); }
    100% { opacity: 0.92; filter: brightness(1.1); }
}

/* Sin respiración en el título — estático y elegante */
.titulo-onirico {
    letter-spacing: 0;
    opacity: 1;
}

/* Subtítulo sutil en hover */
.subtitulo-onirico:hover {
    color: #b9976f;
    transition: color 0.3s ease;
}

/* Botón PDF suave */
.btn-pdf-onirico:hover {
    background: #b9976f;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.10);
    transition: all 0.25s ease;
}
/* Titileo suave para textos específicos */
.txt-titileo {
    animation: titileo-texto 5s ease-in-out infinite;
    display: inline-block;
}

@keyframes titileo-texto {
    0%, 95% { opacity: 1; filter: brightness(1); }
    100% { opacity: 0.88; filter: brightness(1.13); }
}
/* ========================================= */
/* === ESTILO SIMPLIFICADO: TARJETAS === */
/* ========================================= */




.encabezado-ejercicios p {
    color: #5a6c7d;
    max-width: 700px;
    margin: 0 auto;
}

/* LA GRILLA MAGICA (Se adapta sola) */

/* ESTILO DE LA TARJETA (Como la captura) */


/* ICONO SUPERIOR */


/* ETIQUETA DE OBJETIVO */

/* LISTA DE PASOS LIMPIA */


.lista-pasos li:last-child {
    border-bottom: none;
}

/* Pequeño punto personalizado para la lista */
/* === GRILLA INTELIGENTE (1 en Móvil, 2 en PC) === */


/* 2. ESCRITORIO (Media Query): A partir de 768px (tablets/PC), fuerza 2 columnas */
@media (min-width: 768px) {
    .grilla-tarjetas {
        /* "repeat(2, 1fr)" significa: Haz exactamente 2 columnas iguales */
        grid-template-columns: repeat(2, 1fr); 
    }
}


.main-title {
  font-size: 2.2rem;
  text-align: center;

  margin: 0.9rem auto 1.2rem; /* 🔧 sube medio espacio */

  color: #2c3e50;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: 900px;
  letter-spacing: 0.02em;
}


.main-subtitle {
  display: block;
  font-size: 0.78em;
  color: #5a6c7d;

  /* separación natural, sin “corte” visual */
  margin-top: 0.15rem;

  letter-spacing: 0.01em;
}


/* Quitar los puntos/viñetas de la lista */
.referencias-biblio ul {
    list-style-type: none;
    padding-left: 0;
}

/* Aplicar la Sangría Francesa (Hanging Indent) típica de APA */
.referencias-biblio li {
    padding-left: 2em; /* Espacio a la izquierda */
    text-indent: -2em; /* Mueve la primera línea hacia atrás */
    margin-bottom: 1rem; /* Espacio entre referencias */
}
/* ========================================= */
/*       ESTILOS BARRA EDITORIAL (FOOTER)    */
/* ========================================= */


/* Contenedor interno para centrar el texto, no la barra */



.columna-legal p {
    line-height: 1.6;
    margin-bottom: 10px;
    opacity: 0.9;
}

.legal-small {
    font-size: 0.8rem;
    color: #aaa;
    margin-top: 10px;
    border-top: 1px solid #444;
    padding-top: 10px;
}

/* Iconos simples con CSS si no tienes FontAwesome cargado */
/* footer.css */

/* ========================================= */
/*       ESTILOS BARRA EDITORIAL (FOOTER)    */
/* ========================================= */


/* Contenedor interno para que el TEXTO sí quede centrado y no se vaya a los bordes */
.barra-contenido {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

/* Columnas */
.columna-legal {
    flex: 1;
    min-width: 250px;
    margin-bottom: 20px;
}

.columna-legal h5 {
    color: #B9976F;
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-family: "Playfair Display", serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.columna-legal p {
    line-height: 1.6;
    margin-bottom: 10px;
    opacity: 0.9;
}

/* Icono CC */
.ico-cc {
    font-weight: bold;
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.8em;
    margin-right: 5px;
}

/* Línea divisoria */
.footer-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #B9976F, transparent);
    margin: 40px auto 30px auto;
    border-top: 1px solid #444;
    width: 90%;
    max-width: 1100px;
}

/* Copyright */
.footer-copyright {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(185, 151, 111, 0.2);
    color: #999;
    font-size: 0.85rem;
}

.footer-copyright a {
    color: #ccc;
    text-decoration: none;
    margin: 0 8px;
    transition: color 0.3s;
}

.footer-copyright a:hover {
    text-decoration: underline;
    color: #B9976F;
}

/* Eliminar márgenes blancos del body por si acaso */
.final-card {
  max-width: 900px;
  margin: 3rem auto;
}

.final-qr__image {
  max-width: 180px;   /* prueba 160–200 hasta que te guste */
  width: 100%;
  height: auto;
}


.final-qr {
    margin-top: 1.5rem;
    background: #e0f7f3;
    padding: 1.5rem;
    border-radius: 16px;
    display: inline-block;
}
.warning-stripe {
  width: 100%;
  padding: 6px 20px;
  font-size: 0.72rem;
  font-family: 'Lato', sans-serif;
  color: #7b8a96;
  background: transparent;
  display: flex;
  justify-content: flex-end;
  letter-spacing: 0.2px;
}


    .curiosidades-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
        padding: 1rem;
    }

    .curiosidad-card {
        background: white;
        padding: 2rem;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        border: 1px solid #f0f0f0;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .curiosidad-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 35px rgba(185, 151, 111, 0.15);
        border-color: #b9976f;
    }

    .curiosidad-icon {
        width: 60px;
        height: 60px;
        background: #fdf7f0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.2rem;
        color: #b9976f;
        font-size: 1.5rem;
        transition: all 0.3s ease;
    }

    .curiosidad-card:hover .curiosidad-icon {
        background: #b9976f;
        color: white;
        transform: scale(1.1) rotate(10deg);
    }

    .curiosidad-card h3 {
        font-family: 'Playfair Display', serif;
        font-size: 1.4rem;
        color: #333;
        margin-bottom: 0.8rem;
    }

    .curiosidad-card p {
        font-size: 0.95rem;
        line-height: 1.6;
        color: #555;
        margin: 0;
    }

    /* Pequeño adorno decorativo en la esquina de las tarjetas */
    .curiosidad-card::after {
        content: '';
        position: absolute;
        top: -10px;
        right: -10px;
        width: 40px;
        height: 40px;
        background: rgba(185, 151, 111, 0.05);
        border-radius: 50%;
    }

    .certeza-container {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        margin-top: 20px;
    }

    .certeza-col {
        flex: 1;
        min-width: 300px;
    }

    .certeza-header {
        font-family: 'Playfair Display', serif;
        font-size: 1.3rem;
        color: #2c3e50;
        border-bottom: 2px solid #eee;
        padding-bottom: 10px;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .certeza-lista {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .certeza-lista li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 18px;
        font-size: 1rem;
        line-height: 1.5;
        color: #4a4a4a;
    }

    .certeza-lista li i,
    .certeza-lista li svg.icon {
        margin-right: 12px;
        margin-top: 4px;
        font-size: 1.1rem;
        color: #b9976f;
        flex-shrink: 0;
    }

    .certeza-icon-header {
        color: #b9976f;
        margin-right: 10px;
        flex-shrink: 0;
    }

    .certeza-lista li strong {
        color: #2c3e50;
        font-weight: 700;
    }

    /* Efecto responsivo */
    @media (max-width: 768px) {
        .certeza-container {
            flex-direction: column;
        }
    }
 /* Caja ancha para iframes de recursos especiales */
.content-box#iframe-fabrica {
  max-width: 1000px;
  margin: 40px auto;
}
/* Layout de 1 columna para iframes / pantallas angostas */
@media (max-width: 900px) {
  .discoveries-grid {
    grid-template-columns: 1fr;
  }

  .discovery-card {
    height: auto;
    min-height: 420px;
  }

  .card-content {
    height: auto;
  }
}
/* ============================================= */
/*   LABORATORIO DEL SOÑADOR – EJERCICIOS GRID   */
/* ============================================= */

#laboratorio {
  max-width: 825px;
  margin: 4rem auto;
}

@keyframes girar {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(20deg); }
}

.contenedor-ejercicios-simple {
    max-width: 850px;
    margin: 0 auto;
    padding: 15px;
}

.encabezado-ejercicios {
    text-align: center;
    margin-bottom: 20px;
}

.titulo-ejercicios {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #5a4a42;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.titulo-ejercicios i {
  color: #B9976F;
  animation: girar 3s ease-in-out infinite;
}

.descripcion-ejercicios {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.4;
}

/* Grid – 4 columnas en desktop */
.grilla-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

/* Tarjetas compactas */
.tarjeta-ejercicio {
    background: linear-gradient(135deg, #fff 0%, #f9f7f4 100%);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(185, 151, 111, 0.12);
    border: 1px solid rgba(185, 151, 111, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

.tarjeta-ejercicio:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(185, 151, 111, 0.25);
    border-color: #B9976F;
}

.icono-grande {
    font-size: 1.5rem;
    color: #B9976F;
    margin-bottom: 8px;
    transition: transform 0.3s ease;
    display: inline-block;
}

.tarjeta-ejercicio:hover .icono-grande {
  transform: scale(1.15) rotate(-10deg);
}

.tarjeta-ejercicio h3 {
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: #333;
    font-weight: 600;
    line-height: 1.2;
}

/* Objetivo */
.objetivo-tag {
    background: linear-gradient(90deg, #B9976F 0%, #d4af77 100%);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.65rem;
    display: inline-block;
    margin-bottom: 10px;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(185, 151, 111, 0.3);
}

/* Lista */
.lista-pasos {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    padding-left: 0;
    margin-top: 8px;
}

.lista-pasos li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    color: #555;
    font-size: 0.75rem;
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.lista-pasos li:hover {
  color: #B9976F;
}

.lista-pasos li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 0.78rem;
    width: 5px;
    height: 5px;
    background: #B9976F;
    transform: rotate(45deg);
}

/* Brillo al hover */
.tarjeta-ejercicio::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 9px;
  width: 6px;
  height: 6px;
  background: #B9976F;
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(185, 151, 111, 0.35);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tarjeta-ejercicio:hover::after {
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .grilla-tarjetas {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .grilla-tarjetas {
    grid-template-columns: 1fr;
  }
}
/* --- ESTILO VITRINA / PECERA MINIMALISTA --- */

.vitrina-container {
    position: relative;
    width: 100%;
    max-width: 1100px; /* Un poco más ancho para que respire */
    height: 850px;     /* Altura suficiente para que no haya scroll */
    margin: 4rem auto;
    
    /* El efecto Cristal/Pecera */
    background: linear-gradient(
        180deg, 
        rgba(255, 255, 255, 0.05) 0%, 
        rgba(255, 255, 255, 0.02) 100%
    );
    border-radius: 30px; /* Bordes muy redondeados */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde sutil */
    
    /* Sombras complejas para dar profundidad 3D */
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.15), /* Sombra externa suave */
        inset 0 0 0 1px rgba(255, 255, 255, 0.1), /* Brillo interior */
        inset 0 10px 40px rgba(0, 0, 0, 0.1); /* Sombra interna (profundidad) */
    
    backdrop-filter: blur(10px); /* Efecto vidrio esmerilado detrás */
    overflow: hidden;
}

/* La "Luz" de la vitrina */
.vitrina-luz {
    position: absolute;
    top: -50px;
    left: 20%;
    right: 20%;
    height: 60px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.4) 0%, transparent 70%);
    filter: blur(20px);
    z-index: 1;
    pointer-events: none;
}

/* El Iframe como contenido flotante */
.vitrina-cristal {
    width: 100%;
    height: 100%;
    border: none;
    position: relative;
    z-index: 2;
    /* Esto es clave: hacemos transparente el fondo del iframe si es posible */
    background: transparent; 
}

/* Efecto de piso/base */
.vitrina-piso {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);
    pointer-events: none;
    z-index: 1;
}

/* RESPONSIVE: Ajuste para celulares */
@media (max-width: 768px) {
    .vitrina-container {
        height: 1400px; /* Más alto en móviles porque las puertas se apilan */
        border-radius: 16px;
    }
}
.header-unidad {
  margin-top: -0.4rem;   /* 🔧 sube el título hacia la barra */
}
#conceptos-clave {
    padding: 0;
    margin: 2rem 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

#conceptos-clave iframe {
    margin: 0;
    padding: 0;
    border: none;
}
/* iframe rule eliminada — sección Puertas Oníricas migrada a HTML inline */
/* --- AJUSTE AL BODY PRINCIPAL --- */

/* --- ESTILOS BARRA EDITORIAL --- */
.barra-editorial {
    width: 50px;
    background-color: #d8dee3;
    color: #e0e0e0;
    font-family: "Lato", "Open Sans", sans-serif;
    font-size: 0.9rem;
    padding: 40px 0;
    margin-top: 80px;
    border-top: 4px solid #B9976F;
    position: fixed;
    left: 50%;
    right: 0;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    padding-top: 60px;
    padding-bottom: 30px;
    top: 0;
    bottom: 0;
    border-left: 1px solid #b0b8bf;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    box-shadow: -2px 0 5px rgba(0,0,0,0.05);
}

.contenido-vertical {
    /* Esta es la magia para el texto vertical */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    
    /* Ajustes de fuente */
    font-family: 'Montserrat', sans-serif; /* Usando tu fuente actual */
    font-size: 11px; /* Letra pequeña tipo legal */
    color: #556b7f; /* Color gris oscuro elegante */
    line-height: 1.5;
    
    /* Para que ocupe casi todo el alto pero con margen */
    max-height: 95vh;
    padding: 20px 0;
    
    /* Flex para distribuir el copyright y el aviso */
    display: flex;
    justify-content: space-between; 
    align-items: center;
    gap: 20px;
}

.aviso-legal {
    text-align: justify; /* Para que el bloque de texto se vea cuadradito */
}

.aviso-legal strong {
    color: #2c3e50; /* Un poco más oscuro para el título */
}

.separador {
    color: #a0a0a0;
}

/* Opcional: Ocultar en celulares muy pequeños si molesta */
@media (max-width: 600px) {
    body { padding-right: 0; }
    .barra-editorial { display: none; }
}
.promo-card-final {
  max-width: 900px; margin: 4rem auto; padding: 3rem 2rem;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #0f3460 100%);
  border-radius: 24px; box-shadow: 0 25px 50px rgba(0,0,0,0.3);
  color: #fff; position: relative; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.promo-bg-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><radialGradient id="g" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff11"/><stop offset="70%" stop-color="%23ffffff00"/></radialGradient></defs><circle cx="20" cy="20" r="8" fill="url(%23g)"><animate attributeName="r" values="8;12;8" dur="3s" repeatCount="indefinite"/></circle><circle cx="80" cy="70" r="6" fill="url(%23g)"><animate attributeName="r" values="6;10;6" dur="4s" repeatCount="indefinite"/></circle></svg>') no-repeat center/cover;
  opacity: 0.5; animation: float 6s ease-in-out infinite;
}

@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }

.promo-content { position: relative; z-index: 2; text-align: center; }
.promo-logo { max-width: 180px; margin-bottom: 1.5rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
.promo-title { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.promo-text { font-size: clamp(1rem, 3vw, 1.1rem); line-height: 1.6; margin: 0 0 2.5rem; max-width: 700px; margin-inline: auto; }
.promo-cta {
  display: inline-block; padding: 1.2rem 3rem; background: linear-gradient(90deg, #ffd700, #ffed4e);
  color: #1e3c72; font-weight: 700; font-size: 1.1rem; text-decoration: none; border-radius: 50px;
  box-shadow: 0 12px 30px rgba(255,215,0,0.4); transition: all 0.3s ease; margin-bottom: 1rem;
}
.promo-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(255,215,0,0.5); color: #1e3c72; }
.promo-free-teaser { opacity: 0.9; font-size: 0.95rem; }
.promo-free-link { color: #b8d4ff; text-decoration: none; border-bottom: 1px solid transparent; transition: border 0.3s; }
.promo-free-link:hover { border-color: #fff; }
.promo-footer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.2); font-size: 0.85rem; opacity: 0.8; }
.promo-site-link a { color: #ffd700; text-decoration: none; }

@media (max-width: 768px) {
  .promo-card-final { margin: 2rem 1rem; padding: 2rem 1.5rem; border-radius: 20px; }
  .promo-title { margin-bottom: 1rem; }
  .promo-text { margin-bottom: 2rem; }
  .promo-cta { padding: 1rem 2.5rem; font-size: 1rem; }
}




.iframe-wrapper iframe {
    width: 100%;
    height: 550px;
    border: 4px solid #3498db;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    background: #e2eff3;
    display: block;
}

.iframe-wrapper {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
}

.iframe-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(
    to bottom,
    rgba(226,239,243,0) 0%,
    rgba(226,239,243,0.9) 80%,
    rgba(226,239,243,1) 100%
  );
  pointer-events: none;
}
.acciones-puerta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;

    /* 🔧 ESTO SUBE TODO EL BLOQUE */
    margin-top: 1.4rem;
}
#bienvenida p {
    text-align: justify;
    line-height: 1.7;
}
/* ============================================
   PARCHE PARA TARJETA DE CONVERSIÓN
   Copiar este código AL FINAL de final.css
   ============================================ */

/* Reset forzado del contenedor */

.ec-conversion-wrap *,
.ec-conversion-wrap *::before,
.ec-conversion-wrap *::after {
  box-sizing: border-box;
}

/* Variables de color (forzadas) */
.ec-conversion-wrap {
    all: initial;
    display: block;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #2c3e50;
    background: transparent;
    margin: 0;
    padding: 0;
    --ec-gold: #B9976F;
    --ec-gold-light: rgba(185, 151, 111, 0.08);
    --ec-ink: #2c3e50;
    --ec-muted: #6c757d;
    --ec-line: rgba(0, 0, 0, 0.06);
    --ec-bg: #ffffff;
    --ec-bg-alt: #f8f9fa;
}

/* Contenedor principal */
.ec-conversion-container {
  max-width: 900px;
  margin: 60px auto;
  background: var(--ec-bg);
  border: 1px solid var(--ec-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}

/* Header */
.ec-conversion-header {
  text-align: center;
  padding: 50px 40px 40px;
  background: linear-gradient(to bottom, #fafbfc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--ec-line);
}

.ec-conversion-kicker {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ec-gold);
  font-weight: 900;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ec-gold-light);
}

.ec-conversion-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 600;
  margin: 0 0 14px;
  line-height: 1.2;
  color: var(--ec-ink);
}

.ec-conversion-subtitle {
  font-size: 1.05rem;
  color: var(--ec-muted);
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Body Grid */
.ec-conversion-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* Visual del libro */
.ec-conversion-visual {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: 60px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-right: 1px solid var(--ec-line);
}

.ec-conversion-visual::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 25% 35%, rgba(185, 151, 111, 0.04) 0%, transparent 50%),
              radial-gradient(circle at 75% 65%, rgba(185, 151, 111, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.ec-book-preview {
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 3/4;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12), 0 5px 15px rgba(0, 0, 0, 0.08);
  transform: perspective(1000px) rotateY(-6deg) rotateX(2deg);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ec-book-preview:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.03);
}

.ec-book-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Contenido derecho */
.ec-conversion-content {
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ec-bg);
}

.ec-conversion-content h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 24px;
  color: var(--ec-ink);
  line-height: 1.3;
}

/* Lista de beneficios */
.ec-benefit-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}

.ec-benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 12px 0;
  font-size: 0.95rem;
  color: var(--ec-muted);
  line-height: 1.5;
}

.ec-benefit-icon {
  width: 5px;
  height: 5px;
  background: var(--ec-gold);
  border-radius: 50%;
  margin-top: 9px;
  flex-shrink: 0;
}

.ec-benefit-list strong {
  color: var(--ec-ink);
  font-weight: 700;
}

/* Box personalizado */
.ec-personalized-box {
  background: var(--ec-gold-light);
  border-left: 3px solid var(--ec-gold);
  padding: 18px 20px;
  margin: 26px 0;
  border-radius: 4px;
}

.ec-personalized-box strong {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 8px;
  color: var(--ec-ink);
}

.ec-personalized-box p {
  font-size: 0.88rem;
  color: var(--ec-muted);
  margin: 0;
  line-height: 1.6;
}

/* CTA Button */
.ec-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  background: var(--ec-ink);
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.3px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid var(--ec-ink);
  cursor: pointer;
}

.ec-cta-btn:hover {
  background: transparent;
  color: var(--ec-ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* Footer */
.ec-conversion-footer {
  background: var(--ec-bg-alt);
  padding: 45px 40px;
  text-align: center;
  border-top: 1px solid var(--ec-line);
}

.ec-conversion-footer h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 28px;
  color: var(--ec-ink);
}

.ec-courses-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 28px;
}


.ec-course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border-color: var(--ec-gold);
}

.ec-course-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.ec-course-card-body {
  padding: 20px;
  text-align: left;
}

.ec-course-card-body h5 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  margin: 0 0 10px;
  color: var(--ec-ink);
  font-weight: 600;
}

.ec-course-card-body p {
  font-size: 0.9rem;
  color: var(--ec-muted);
  margin: 0;
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 768px) {
  .ec-conversion-container {
    margin: 30px 15px;
    border-radius: 12px;
  }

  .ec-conversion-body {
    grid-template-columns: 1fr;
  }

  .ec-conversion-visual {
    padding: 45px 30px;
    border-right: none;
    border-bottom: 1px solid var(--ec-line);
  }

  .ec-conversion-content {
    padding: 40px 30px;
  }

  .ec-conversion-header {
    padding: 40px 30px 35px !important;
  }

  .ec-conversion-title {
    font-size: 1.8rem !important;
  }

  .ec-conversion-footer {
    padding: 40px 25px !important;
  }

  .ec-courses-preview {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}
.final-minimal__footer{
  display: flex;
  justify-content: center;
}

.final-minimal__small{
  text-align: center;
}

/* ============================================
   FIX PARA IFRAMES - ANCHO UNIFORME
   Agregar al final de final.css
   ============================================ */

/* Clase para iframes de ancho completo */
.iframe-full-width {
    padding: 0 !important;
    margin: 3rem auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    max-width: 100% !important;
    width: 100% !important;
}

.iframe-full-width:hover {
    transform: none;
    box-shadow: none;
}

.iframe-full-width iframe {
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Asegura que el contenedor padre no limite el ancho */
.container-custom .iframe-full-width {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Anula estilos heredados de .content-box */
.content-box.iframe-full-width {
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    border: none;
}

/* Responsive */
@media (max-width: 768px) {
    .iframe-full-width {
        margin: 2rem 0 !important;
    }
    
    .iframe-full-width iframe {
        border-radius: 12px !important;
    }
}
/* ============================================
   TARJETA CONVERSIÓN - VERSION COMPLETA FUNCIONAL
   BORRAR FIX ANTERIOR Y PEGAR ESTO AL FINAL
============================================ */

/* Contenedor raíz */
.checkout-scope {
  all: initial;
  display: block !important;
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #2c3e50 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  --ec-gold: #B9976F;
  --ec-gold-light: rgba(185, 151, 111, 0.08);
  --ec-ink: #2c3e50;
  --ec-muted: #6c757d;
  --ec-line: rgba(0, 0, 0, 0.06);
  --ec-bg: #ffffff;
  --ec-bg-alt: #f8f9fa;
}

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

/* Contenedor principal */
.checkout-scope .conversion-container {
  max-width: 900px !important;
  margin: 60px auto !important;
  background: var(--ec-bg) !important;
  border: 1px solid var(--ec-line) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06) !important;
}

/* Header */
.checkout-scope .conversion-header {
  text-align: center !important;
  padding: 50px 40px 40px !important;
  background: linear-gradient(to bottom, #fafbfc 0%, #ffffff 100%) !important;
  border-bottom: 1px solid var(--ec-line) !important;
}

.checkout-scope .conversion-kicker {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ec-gold);
  font-weight: 900;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ec-gold-light);
}

.checkout-scope .conversion-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2.2rem !important;
  font-weight: 600 !important;
  margin: 0 0 14px !important;
  line-height: 1.2 !important;
  color: var(--ec-ink) !important;
}

.checkout-scope .conversion-subtitle {
  font-size: 1.05rem;
  color: var(--ec-muted);
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Body Grid */
.checkout-scope .conversion-body {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
}

/* Visual del libro */
.checkout-scope .conversion-visual {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
  padding: 60px 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  border-right: 1px solid var(--ec-line) !important;
}

.checkout-scope .book-preview {
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 3/4;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12), 0 5px 15px rgba(0, 0, 0, 0.08);
  transform: perspective(1000px) rotateY(-6deg) rotateX(2deg);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.checkout-scope .book-preview:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.03);
}

.checkout-scope .book-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Contenido derecho */
.checkout-scope .conversion-content {
  padding: 50px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: var(--ec-bg) !important;
}

.checkout-scope .conversion-content h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 24px;
  color: var(--ec-ink);
  line-height: 1.3;
}

/* Lista de beneficios */
.checkout-scope .benefit-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}

.checkout-scope .benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: var(--ec-muted);
  line-height: 1.5;
}

.checkout-scope .benefit-icon {
  width: 5px;
  height: 5px;
  background: var(--ec-gold);
  border-radius: 50%;
  margin-top: 9px;
  flex-shrink: 0;
}

.checkout-scope .benefit-list strong {
  color: var(--ec-ink);
  font-weight: 700;
}

/* Box personalizado */
.checkout-scope .personalized-box {
  background: var(--ec-gold-light);
  border-left: 3px solid var(--ec-gold);
  padding: 18px 20px;
  margin: 26px 0;
  border-radius: 4px;
}

.checkout-scope .personalized-box strong {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 8px;
  color: var(--ec-ink);
}

.checkout-scope .personalized-box p {
  font-size: 0.88rem;
  color: var(--ec-muted);
  margin: 0;
  line-height: 1.6;
}

/* CTA Button */
.checkout-scope .cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  background: var(--ec-ink);
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.3px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid var(--ec-ink);
  cursor: pointer;
}

.checkout-scope .cta-btn:hover {
  background: transparent;
  color: var(--ec-ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* Footer */
.checkout-scope .conversion-footer {
  background: var(--ec-bg-alt);
  padding: 45px 40px;
  text-align: center;
  border-top: 1px solid var(--ec-line);
}

.checkout-scope .conversion-footer h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 28px;
  color: var(--ec-ink);
}

.checkout-scope .courses-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 28px;
}

.checkout-scope .course-card {
  background: var(--ec-bg);
  border: 1px solid var(--ec-line);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: block;
}

.checkout-scope .course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border-color: var(--ec-gold);
}

.checkout-scope .course-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.checkout-scope .course-card-body {
  padding: 20px;
}

.checkout-scope .course-card-body h5 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  margin: 0 0 10px;
  color: var(--ec-ink);
  font-weight: 600;
}

.checkout-scope .course-card-body p {
  font-size: 0.9rem;
  color: var(--ec-muted);
  margin: 0;
  line-height: 1.55;
}

/* Icono flecha (FontAwesome o fallback) */
.checkout-scope .cta-btn i {
  font-family: "Font Awesome 6 Free", Arial;
  font-weight: 900;
  font-size: 0.9em;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .checkout-scope .conversion-container {
    margin: 30px 15px !important;
    border-radius: 12px !important;
  }
  .checkout-scope .conversion-body {
    grid-template-columns: 1fr !important;
  }
  .checkout-scope .conversion-visual {
    padding: 45px 30px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--ec-line) !important;
  }
  .checkout-scope .conversion-content {
    padding: 40px 30px !important;
  }
  .checkout-scope .conversion-header {
    padding: 40px 30px 35px !important;
  }
  .checkout-scope .conversion-title {
    font-size: 1.8rem !important;
  }
}

.book-preview img {
  width: 260px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}





.course-card-body {
  margin-top: 12px;
}


.courses-preview {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-top: 30px;
    flex-wrap: wrap;
    margin: 50px 0 20px;
}


.course-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.course-card:hover img {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.25);
}

.course-card-body {
  margin-top: 12px;
}

.course-card-body h5 {
    font-size: 1rem;
    margin-bottom: 6px;
    color: #1f2f3a;
    margin: 6px 0 4px;
}

.course-card-body p {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.3;
}

.course-card {
    width: 130px;
    background: transparent;
    box-shadow: none;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
}
/* Contenedor de los dos medios libros */
.books-divider {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 40px;
}

/* Estilo base de cada medio libro */
.half-book {
  width: 48px;
  height: 22px;
  background: #f6efe6;
  border: 2px solid #b9976f;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Lado izquierdo */
.half-book.left {
  border-right: none;
  border-radius: 6px 0 0 6px;
}

/* Lado derecho */
.half-book.right {
  border-left: none;
  border-radius: 0 6px 6px 0;
}
/* Nueva cabecera estilo etiqueta minimalista */
    .conversion-footer .gallery-label {
        font-family: 'Arial', sans-serif; /* Palo seco para contraste */
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 3px; /* Mucho aire entre letras (muy premium) */
        color: #8c9b9f;      /* Gris suave, no negro */
        margin-bottom: 40px;
        display: inline-block;
        position: relative;
    }

    /* Opcional: Una pequeña línea decorativa debajo */
    .conversion-footer .gallery-label::after {
        content: '';
        display: block;
        width: 40px;
        height: 1px;
        background-color: #d4af37; /* Toque dorado sutil */
        margin: 15px auto 0 auto;  /* Centrado abajo del texto */
    }
/* ESTILO DEFINITIVO: TARJETA WIDE (Alineación Perfecta 100%) */

/* Ajuste seguridad móvil */
@media (max-width: 900px) {
    .tarjeta-premium-wide {
        width: 100% !important;
        margin-left: 0 !important;
        border-radius: 16px;
    }
}
/* ==========================================================
   🚨 REGLAS DE SEGURIDAD "ANTI-COLAPSO" PARA CAPÍTULO 1 🚨
   ========================================================== */

/* 1. Asegurar que el cuerpo de la página permita scroll y no se corte */
html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important; /* Fuerza las barras de scroll si son necesarias */
    overflow-x: hidden !important; /* Evita scroll horizontal indeseado */
    position: relative !important;
}

/* 2. Arreglar el contenedor principal para que crezca con el contenido */

/* 3. Estabilizar las Tarjetas (Flip Cards) para que no oculten texto */

/* 4. Ajuste específico para móviles (Evita que la tarjeta se salga de la pantalla) */
@media (max-width: 768px) {
    .discoveries-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .discovery-card {
        width: 100% !important;
        height: 500px !important; /* Un poco más altas en móvil para que quepa el texto */
    }
}

/* 5. Asegurar que el Header siempre se vea y tenga espacio */
.header {
    position: relative;
    margin-top: 20px;
    margin-bottom: 40px;
    z-index: 100;
}



/* Si la pantalla es muy chica (tablet/móvil), ahí sí dejamos que bajen */
@media (max-width: 900px) {
    .discoveries-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* 3. CONTROLAR ALTURA DE TARJETAS (Para que no empujen hacia abajo) */
.discovery-card {
    /* Cambiamos height fijo por min-height para evitar cortes en textos largos */
    height: 450px !important;
    min-height: 450px !important;
    margin-bottom: 30px !important;
    transform-style: preserve-3d !important;
    background: transparent;
    width: 100%;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

/* 4. ASEGURAR QUE EL CONTENEDOR NO TENGA MARGENES RAROS */
.main-wrapper {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding-bottom: 80px;
    display: block;
    padding: 2rem 1rem;
    max-width: 100%;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
}.discoveries-grid {
    display: grid;
    /* ESTA ES LA REGLA QUE EVITA LA CAÍDA: */
    grid-template-columns: 1fr 1fr 1fr !important; 
    
    gap: 1.5rem; /* Un poco menos de gap ayuda */
    width: 100%;
    margin-bottom: 4rem;
    perspective: 1000px;
    box-sizing: border-box;
}

/* Solo dejamos que se caigan si es un celular (menos de 768px) */
@media (max-width: 768px) {
    .discoveries-grid {
        grid-template-columns: 1fr !important;
    }
}
.tarjeta-premium-wide {
    width: 100% !important;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    display: block;
    margin: 3.5rem auto !important;
    max-width: 1100px !important;
}
.container-custom {
    max-width: 100vw !important;
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%) !important;
    display: flex;
    justify-content: center;
}


/* =============================================
   TARJETA IDENTIDAD ONÍRICA – AJUSTE COMPACTO
============================================= */

.io-card-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 44px 0 48px;
  padding: 0 24px;
  box-sizing: border-box;
  isolation: isolate;
}

.io-card {
  width: 100%;
  max-width: 640px; /* antes 920px */
  background: linear-gradient(180deg, rgba(255,255,255,0.70) 0%, rgba(244,249,252,0.48) 100%);
  border-radius: 18px;
  padding: 34px 32px 30px;
  text-align: center;
  position: relative;

  box-shadow:
    0 12px 30px rgba(46, 61, 72, 0.055),
    inset 0 1px 0 rgba(255,255,255,0.75);

  border: 1px solid rgba(190,210,225,0.55);
  transition: transform .3s ease, box-shadow .3s ease;
}

.io-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 38px rgba(46, 61, 72, 0.075),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.io-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at top, rgba(52,152,219,0.08), transparent 62%);
  pointer-events: none;
}

.io-title {
  font-family: "Playfair Display", serif;
  font-size: 1.45rem;
  font-weight: 500;
  color: #6b7383;
  margin-bottom: 18px;
  letter-spacing: 0.4px;
}

.io-question {
  font-family: "Playfair Display", serif;
  font-size: 2.05rem;
  font-weight: 700;
  color: #35AEE2;
  text-shadow: none;
  line-height: 1.15;
}

@media (max-width: 768px) {
  .io-card {
    max-width: 92%;
    padding: 30px 22px;
  }

  .io-question {
    font-size: 1.6rem;
  }

  .io-title {
    font-size: 1.2rem;
  }
}

/* ====== MODO IMPRESIÓN PDF ====== */
@media print {
  html, body {
    background: #e2eff3 !important;   /* tu celeste */
    margin: 0 !important;
    padding: 0 !important;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  section, div, article {
    page-break-inside: avoid;
    break-inside: avoid;
    background-clip: padding-box;
  }

  .content-box, .main-container, .page, .card {
    background: #e2eff3 !important;
  }
}

.ec-course-video {
  width: 100%;
  height: 180px;        /* o lo que uses en tus tarjetas */
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  display: block;
}

/* ================================================= */
/* === DESIGN TOKENS U1 (Etapa 2) === */
/* ================================================= */

:root {
    /* Marca */
    --bronze:        #B9976F;
    --bronze-dark:   #a8865d;
    --bronze-soft:   #fbf8f3;
    
    /* Fondo psicológico */
    --celeste-bg-1:  #e2eff3;
    --celeste-bg-2:  #c0dfe8;
    
    /* Superficies */
    --surface:       #ffffff;
    
    /* Tipografía */
    --text-deep:     #1e293b;
    --text-body:     #374151;
    --text-muted:    #6b7280;
    
    /* Bordes y acentos */
    --border-soft:   rgba(185, 151, 111, 0.18);
    --verde-progreso: #4FB4B3;
    --accent-rose:   #c4687a;
    --accent-purple: #4a3f8a;
    
    /* Sombras (3 únicas) */
    --shadow-soft:   0 4px 14px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-glow:   0 0 30px rgba(185, 151, 111, 0.15);
    
    /* Radios (2 únicos) */
    --radius:        16px;
    --radius-sm:     10px;
    
    /* Transición */
    --transition:    all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* === Aliases legacy (compatibilidad con código viejo) === */
    --color-text-main:  var(--text-deep);
    --color-bg-general: var(--celeste-bg-1);
    --color-accent:     var(--bronze);
    
    /* Spacing legacy (preservados, no migrados) */
    --space-xs: 0.8rem;
    --space-sm: 1.5rem;
    --space-md: 2.5rem;
    --space-lg: 4rem;
}



/* =====================================================
   BODY BASE
===================================================== */
body {
    background: var(--color-bg-general);
    font-family: 'Lato', sans-serif;
    line-height: 1.7;
    color: var(--color-text-main);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    padding-right: 60px;
}

/* =====================================================
   CONTENT BOX (estructura, no estética)
===================================================== */
.content-box {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    padding: var(--space-md);
    margin: var(--space-lg) auto;
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    margin-bottom: 2.5rem;
    max-width: 900px;
}

/* Pieles opcionales */
.content-box--blanca { background: #ffffff; }
.content-box--marfil { background: #fdfbf7; }
.content-box--suave  { background: linear-gradient(to bottom, #ffffff, #f7fbfc); }
.content-box--profunda { background: #eef6f9; }

/* =====================================================
   CITA EDITORIAL
===================================================== */
.quote-box {
    font-family: 'Lato', sans-serif;
    font-style: italic;
    color: #3d4f5a;
    background: #ffffff;
    padding: 1.6rem 2rem;
    margin: var(--space-md) 0;
    border-radius: 14px;
    border-left: 4px solid var(--color-accent);
    box-shadow: var(--shadow-soft);
}

/* =====================================================
   ÍNDICE TEMÁTICO – MÁS VIVO
===================================================== */
.indice-item {
    background: rgba(185, 151, 111, 0.1);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid #B9976F;
    transition: all 0.25s ease;
}

.indice-item:hover {
    background: rgba(185, 151, 111, 0.2);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* =====================================================
   SCROLL ELEGANTE Y ANCLAS
===================================================== */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 120px;
}

/* =====================================================
   JERARQUÍA TIPOGRÁFICA
===================================================== */
h1, h2 {
  letter-spacing: 0.02em;
}

h3 {
  letter-spacing: 0.01em;
}

p {
  line-height: 1.7;
}

/* =====================================================
   SEPARADOR EDITORIAL
===================================================== */
.section-divider {
  height: 2px;
  width: 140px;
  margin: var(--space-lg) auto;
  background: linear-gradient(to right, transparent, var(--color-accent), transparent);
}




    /* 1. CONTENEDOR PRINCIPAL */
    section#datos-curiosos {
        background: linear-gradient(to bottom, #ffffff, #fafafa) !important;
        max-width: 825px !important;
        margin: 4rem auto !important;
        padding: 4rem 2rem !important; /* Mucho aire arriba y abajo */
        border-radius: 20px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.05) !important;
    }

    /* 2. TÍTULO DE LA SECCIÓN */
    section#datos-curiosos .section-title {
        text-align: center;
        font-family: 'Playfair Display', serif;
        font-size: 2.2rem;
        color: #2c3e50;
        margin-bottom: 2rem; /* Separación con el texto de abajo */
        
        /* Línea decorativa más elegante */
        border-bottom: none; 
        position: relative;
        display: inline-block;
        width: 100%;
    }
    
    /* Pequeña línea dorada centrada debajo del título */
    section#datos-curiosos .section-title::after {
        content: "";
        display: block;
        width: 80px;
        height: 3px;
        background: #b9976f;
        margin: 15px auto 0 auto;
        border-radius: 2px;
    }

    /* 3. TEXTO INTRODUCTORIO (SOLUCIÓN A "SALTOS RAROS") */
    section#datos-curiosos > p {
        max-width: 750px; /* Limitamos el ancho para que no se estire tanto */
        margin: 0 auto 4rem auto; /* Centrado y con mucho margen abajo */
        text-align: center;
        font-size: 1.15rem;
        line-height: 1.8; /* MÁS AIRE ENTRE LÍNEAS */
        color: #546e7a;
    }

    /* 4. LA GRILLA (Tarjetas) */
    section#datos-curiosos .curiosidades-grid {
        display: grid !important;
        /* Esto asegura que las columnas no sean ni muy finas ni muy anchas */
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
        gap: 3rem !important; /* Más espacio entre tarjeta y tarjeta */
        padding: 0 1rem !important;
    }

    /* 5. LAS TARJETAS INDIVIDUALES */
    section#datos-curiosos .curiosidad-card {
        background: #ffffff;
        padding: 2.5rem 2rem; /* Más relleno interno */
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.04);
        border: 1px solid #f0f0f0;
        text-align: center;
        transition: transform 0.3s ease;
        
        /* Flex para distribuir mejor el contenido verticalmente */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    section#datos-curiosos .curiosidad-card:hover {
        transform: translateY(-8px);
        border-color: #b9976f;
    }

    /* Iconos */
    section#datos-curiosos .curiosidad-icon {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
        margin-bottom: 1.5rem; /* Aire entre icono y título */
        background: #fdfbf7;
        color: #b9976f;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Título dentro de la tarjeta */
    section#datos-curiosos .curiosidad-card h3 {
        font-family: 'Playfair Display', serif;
        font-size: 1.4rem;
        margin-bottom: 1rem;
        color: #2c3e50;
    }

    /* Texto dentro de la tarjeta (SOLUCIÓN A "COMPRIMIDO") */
    section#datos-curiosos .curiosidad-card p {
        font-size: 1rem;
        line-height: 1.75; /* Aquí está la clave del aire */
        color: #666;
        margin: 0;
    }

    /* Ajuste para móviles */
    @media (max-width: 768px) {
        section#datos-curiosos { padding: 3rem 1.5rem; }
        section#datos-curiosos .curiosidades-grid { gap: 2rem; }
    }
/* Sacar el storybook del layout en columna */
#storybook {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 140px 0;
    background: transparent;
    box-shadow: none;
    border: none;
}

/* Centro absoluto */
#recurso-storybook {
    width: 100%;
    max-width: 825px;
    display: flex;
    justify-content: center;
    margin: var(--section-gap) auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Pantalla de cine */
.iframe-storybook {
    width: 90%;
    max-width: 1100px;
    height: 680px;
    border-radius: 18px;
    background: #000;

    box-shadow:
        0 0 0 8px rgba(0,0,0,0.6),
        0 40px 80px rgba(0,0,0,0.7);
}

/* Asegura que las imágenes también obedezcan al idioma */
img.lang-es, img.lang-pt, img.lang-en {
    display: none;
}

body.modo-es img.lang-es { display: block; }
body.modo-pt img.lang-pt { display: block; }
body.modo-en img.lang-en { display: block; }



    @media (max-width: 768px) {
        /* Forzamos al contenedor y al iframe a tener altura suficiente */
        #recurso-storybook,
        .iframe-storybook {
            height: 620px !important;      /* Altura fija para que no se aplaste */
            min-height: 620px !important;  /* Seguro anti-colapso */
            width: 96% !important;         /* Un poquito de margen a los lados */
            margin-left: auto !important;
            margin-right: auto !important;
        }
    }
/* --- REGLAS EXCLUSIVAS PARA MÓVIL --- */
@media screen and (max-width: 768px) {

    /* 1. REGLA REMOVIDA 2026-05-23 — anulaba word-spacing y text-align
       en toda la cascada mobile, peleando con parches más específicos.
       Era: p, li, span, div { text-align: left !important; word-spacing: normal !important }
       El centrado de .curiosidad-card y el word-spacing de u1-mobile-typographic-root
       quedaban pisados por esta regla nuclear. Eliminada — cada sección
       maneja su alineación con selectores propios. */

    /* .main-content y body con overflow:hidden removidos —
       eran de una herramienta app y bloqueaban el scroll de la página principal */

    /* 3. SCROLL INTERNO (EFECTO TARJETA DE LA CAPTURA) */
    /* Aplicamos esto a todas las tarjetas contenedoras */
    .intro-card, 
    .clock-container, 
    .breathing-container, 
    .calculator-container, 
    .tracker-container, 
    .quiz-container {
        /* Altura máxima para que quepa en pantalla sin tapar el menú */
        max-height: 70vh; 
        width: 100%;
        
        /* ACTIVA EL SCROLL INTERNO */
        overflow-y: auto; 
        
        /* Estética de la tarjeta */
        padding: 20px 15px; /* Menos padding lateral para ganar espacio */
        border-radius: 20px;
        background: #fff; /* Asegura fondo blanco */
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        
        /* Suavizar el scroll */
        scrollbar-width: thin; /* Para Firefox */
        -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    }

    /* Estilo del scrollbar interno para que sea sutil */
    .intro-card::-webkit-scrollbar,
    .clock-container::-webkit-scrollbar {
        width: 6px;
    }
    .intro-card::-webkit-scrollbar-thumb,
    .clock-container::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.2);
        border-radius: 10px;
    }

    /* 4. AJUSTES ESPECÍFICOS PARA ELEMENTOS ROTOS */
    
    /* Menú de navegación (Pills) */
    .nav-container {
        overflow-x: auto; /* Permite scroll horizontal en los botones */
        white-space: nowrap;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        flex-shrink: 0; /* Evita que el menú se aplaste */
    }
    
    .nav-pills {
        display: inline-flex; /* Botones en una sola línea */
        width: max-content;
    }

    /* Reloj Circadiano */
    .circadian-clock {
        width: 280px; /* Reducir tamaño del reloj */
        height: 280px;
        margin: 0 auto 20px auto; /* Centrar */
    }

    .clock-legend {
        flex-direction: column; /* Leyenda una debajo de otra */
        align-items: flex-start;
        gap: 10px;
    }

    /* Formularios e Inputs (Calculadora/Tracker) */
    .form-group, .input-group {
        flex-direction: column;
        align-items: flex-start;
    }
    
    input, select, textarea {
        width: 100%; /* Que ocupen todo el ancho disponible */
        max-width: 100%;
        box-sizing: border-box; /* Para que el padding no rompa el ancho */
    }
    
    /* Botones */
    .btn-primary, .btn-secondary {
        width: 100%; /* Botones grandes fáciles de tocar */
        margin-bottom: 10px;
        justify-content: center;
    }
    
    /* Tipografía de títulos */
    h1.main-title {
        font-size: 1.5rem; /* Título más pequeño */
    }
    
    #recurso-ritmos h2 {
        font-size: 1.3rem;
        text-align: center;
    }
}
.scene {
    position: relative;
    overflow: hidden;
}
.text-content .line-1,
.text-content .line-2 {
    display: block;
}

.text-content .line-2 {
    margin-top: 0.4em;
}
.scene-opening .text-content {
    font-size: 1.1rem;   /* igual que las demás */
    line-height: 1.7;
}
.scene-opening .drop-cap {
    font-size: 3.2rem;   /* antes probablemente ~3rem */
    line-height: 0.95;
    margin-right: 0.25rem;
}
/* OPCIÓN A: AURA PULSANTE (Pegar en CSS) */

@keyframes auraDorada {
    0% {
        box-shadow: 0 0 10px rgba(185, 151, 111, 0.2);
        transform: scale(1);
    }
    100% {
        box-shadow: 0 0 25px rgba(185, 151, 111, 0.8), 0 0 10px #ffd700;
        border-color: #ffd700;
        transform: scale(1.02); /* Crece un poquito */
    }
}
/* OPCIÓN B: BORDE DE FUEGO (Pegar en CSS) */
.ec-course-card {
    background: var(--ec-bg) !important;
    border: 1px solid #B9976F;
    border-radius: 10px !important;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: block !important;
    position: relative;
    animation: auraDorada 3s infinite alternate;
    z-index: 1;
    padding: 3px;
}

/* El fuego giratorio */
.ec-course-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        transparent, 
        transparent, 
        transparent, 
        #ff4d4d, /* Rojo fuego */
        #ff9f43, /* Naranja */
        #feca57  /* Amarillo */
    );
    animation: rotarFuego 4s linear infinite;
    z-index: -2;
}

/* Capa blanca interna para tapar el centro */
.ec-course-card::after {
    content: '';
    position: absolute;
    inset: 3px; /* Grosor del borde */
    background: #ffffff;
    border-radius: 10px;
    z-index: -1;
}

@keyframes rotarFuego {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Efecto hover para acelerar el fuego */
.ec-course-card:hover::before {
    animation-duration: 1.5s;
}
/* ================================================= */
/* === CORRECCIONES DE ESCRITORIO (PC) === */
/* ================================================= */

/* 1. TEXTO GENERAL (Adiós al justificado feo) */
/* Esto arregla "A lo largo...", "Semilla", etc. */
.content-box p, 
.content-box li, 
.actividad-intro,
#recurso-semilla p, 
.intro-text {
    text-align: left;       /* Alineación natural */
    text-wrap: pretty;      /* Balancea las líneas para que no queden palabras huerfanas */
    line-height: 1.8;       /* Más aire para leer mejor */
    letter-spacing: 0.01em; 
    word-spacing: normal;   /* Elimina los huecos gigantes */
}

/* 2. GLOSARIO (Títulos alineados) */
.glosario-item h4 {
    color: #2c3e50;
    margin-bottom: 0.8rem;
    text-align: left;
}

#glosario {
    max-width: 825px;
}
#glosario:hover {
    transform: none;
    box-shadow: var(--shadow-soft);
}
#glosario .glosario-item p {
    text-align: left;
    text-wrap: pretty;
}

/* 3. CERTIFICADO */
#cierre-certificado {
    max-width: 825px;
}
#cierre-certificado:hover {
    transform: none;
    box-shadow: var(--shadow-soft);
}
#cierre-certificado p {
    max-width: 100% !important;
    width: 100% !important;
    white-space: nowrap !important;
}
@media (max-width: 768px) {
    #cierre-certificado p { white-space: normal !important; }
}

/* 4. ICONOS DEL FOOTER (Reparación) */
/* Los forzamos a ser visibles y dorados */
.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #1e293b;
    color: #B9976F;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #B9976F;
    margin: 0 5px;
}

.social-links a i {
    font-size: 1.2rem;
    color: #B9976F;
    visibility: visible; /* Asegura que se vea */
}

.social-links a:hover {
    background-color: #B9976F;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(185, 151, 111, 0.3);
    color: #ffffff;
}

.social-links a:hover i {
    color: #ffffff;
}

/* ============================================= */
/*    ESTILO EDITORIAL: PERSPECTIVAS PSICOLÓGICAS  */
/* ============================================= */

#perspectivas-psicologicas {
    background: linear-gradient(180deg, #ffffff 0%, #f4f9fb 100%);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    margin: 2rem auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    max-width: 1200px;
    position: relative;
}

/* TÍTULO - Compacto y centrado */
#perspectivas-psicologicas .section-title {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    margin-bottom: 2.8rem !important;
    color: #2c4a6a;
    text-align: center;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
    padding-bottom: 0.7rem;
}

/* PÁRRAFOS */
#perspectivas-psicologicas p {
    margin-bottom: 1.5rem;
    text-align: justify;
    line-height: 1.7;
    hyphens: auto;
    font-size: 1.1rem;
    color: #333;
}

/* CAJA DE CITA (Quote Box) */
#perspectivas-psicologicas .quote-box {
    margin: 2.5rem 0;
    padding: 2rem 2.2rem;
    background: linear-gradient(135deg, #fbf7f1 0%, #f5e9d8 100%);
    border-left: 6px solid #b9976f;
    border-radius: 12px;
    font-style: italic;
    text-align: justify;
    line-height: 1.65;
    font-size: 1.15rem;
    box-shadow: 0 4px 12px rgba(185,151,111,0.15);
    position: relative;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    #perspectivas-psicologicas {
        padding: 2rem 1.5rem;
        margin: 1.5rem 1rem;
    }
    
    #perspectivas-psicologicas .section-title {
        font-size: clamp(1.3rem, 5vw, 1.7rem);
        margin-bottom: 2.2rem !important;
    }
    
    #perspectivas-psicologicas p,
    #perspectivas-psicologicas .quote-box {
        text-align: left;
        font-size: 1rem;
    }
}

@media (min-width: 1400px) {
    #perspectivas-psicologicas p {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================
   CLASES COMPARTIDAS INDEXGPT + INDEX
   ============================================================ */

/* --- Sección de orientación (Cómo trabajar esta unidad) --- */
.orientacion-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 1rem auto 4rem auto;
    padding: 0 15px;
}

.orientacion-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    border-top: 5px solid #b9976f;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.orientacion-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

.icon-circle {
    width: 64px;
    height: 64px;
    background-color: #fdfbf7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem auto;
}

.icon-circle i {
    font-size: 1.8rem;
    color: #b9976f;
}

.orientacion-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #1e293b;
    margin-bottom: 0.8rem;
    display: block;
}

.orientacion-text {
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    color: #334155;
    line-height: 1.6;
    margin: 0;
}

/* --- Lista de beneficios (bloque acompañamiento) --- */
.lista-beneficios ul {
    list-style: none;
    padding-left: 0;
}

.lista-beneficios li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    line-height: 1.6;
    color: #475569;
}

.lista-beneficios li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.42rem;
    width: 10px;
    height: 6px;
    border-left: 2px solid #10b981;
    border-bottom: 2px solid #10b981;
    transform: rotate(-45deg);
}

.lista-beneficios h4 {
    color: #0f172a;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

/* --- Tarjeta editorial (content-box con acento dorado) --- */
.tarjeta-editorial {
    border-left: 5px solid #b9976f;
    background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 100%);
}

/* --- Sección visual (imagen de apertura) --- */
.bloque-visual {
    max-width: 1000px;
    margin: 1.8rem auto;
    padding: 0 1rem;
}

.bloque-visual .media-container {
    margin-top: 0;
    margin-bottom: 45px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* --- Contenedor premium para iframes (Johari, Ritmos, etc.) --- */
.iframe-premium-container {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 24px;
    width: 100%;
    max-width: 1200px;
    margin: 3rem auto;
    overflow: hidden;
    box-shadow:
        0 20px 40px -5px rgba(74,144,164,0.15),
        0 10px 15px -3px rgba(0,0,0,0.05);
}

/* =============================================
   17 RECURSO INTERACTIVO: RITMOS CIRCADIANOS
   ============================================= */
#recurso-ritmos .lang-es,
#recurso-ritmos .lang-pt,
#recurso-ritmos .lang-en {
    width: 100%;
    display: none;
}
body.modo-es #recurso-ritmos .lang-es { display: block !important; }
body.modo-pt #recurso-ritmos .lang-pt { display: block !important; }
body.modo-en #recurso-ritmos .lang-en { display: block !important; }

.iframe-ritmos {
    width: 100%;
    border: none;
    display: block;
    overflow: hidden;
    transition: height 0.3s ease;
    background: transparent;
}

#recurso-ritmos {
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 24px;
    width: 100%;
    max-width: 825px;
    margin: var(--section-gap) auto;
    overflow: hidden;
    box-shadow:
        0 25px 50px -12px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.05) inset;
}

/* =============================================
   RECURSO INTERACTIVO: VENTANA DE JOHARI
   ============================================= */
#recurso-johari .lang-es,
#recurso-johari .lang-pt,
#recurso-johari .lang-en { width: 100%; display: none; }

body.modo-es #recurso-johari .lang-es { display: block !important; }
body.modo-pt #recurso-johari .lang-pt { display: block !important; }
body.modo-en #recurso-johari .lang-en { display: block !important; }

.iframe-johari {
    width: 100%;
    border: none;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    display: block;
}

@media (max-width: 768px) {
    .orientacion-wrapper {
        grid-template-columns: 1fr;
    }
    .orientacion-card {
        padding: 1.5rem 1rem;
    }
}

/* =============================================
   ESTILOS EXTRAÍDOS — Etapa 2
   ============================================= */

/* Grupo 1 — Reset común de iframes sin clase propia */
.iframe-reset {
    border: none;
    display: block;
}

/* Iframes de Semilla Interior: fallback de altura antes de que JS resice */
.iframe-semilla {
    height: 600px;
}

/* Grupo 2 — Reglas por ID (antes eran inline) */
#recurso-fabrica {
    /* .fabrica-nocturna maneja su propio background, border-radius y box-shadow */
    overflow: hidden;
    width: 100%;
}

#bloque-diario {
    margin-top: 3rem;
    margin-bottom: 3rem;
    width: 100%;
}

/* legacy #puertas-oniricas eliminado — estilos ahora bajo .dream-door-app */

/* ================================================= */
/* === DICCIONARIO ONÍRICO U1 === */
/* ================================================= */

/* Marcado de términos en el texto */
.term {
    background: linear-gradient(to bottom, transparent 65%, var(--border-soft) 65%);
    cursor: help;
    position: relative;
    transition: background 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.term:hover {
    background: linear-gradient(to bottom, transparent 60%, rgba(185, 151, 111, 0.32) 60%);
}

/* Tooltip vía ::after */
.term::after {
    content: attr(data-def);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1f2937;
    color: #f5f5f5;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.5;
    font-weight: 400;
    width: max-content;
    max-width: 280px;
    white-space: normal;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 999;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.term::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1f2937;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 999;
}

.term:hover::after,
.term:hover::before,
.term.active::after,
.term.active::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
    .term::after { max-width: 220px; font-size: 0.78rem; }
}

/* FAB flotante */
.dict-fab {
    position: fixed;
    bottom: 24px;
    left: 20px;
    right: auto;
    z-index: 1500;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--bronze, #B9976F);
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
    font-size: 1.4rem;
}

.dict-fab:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

.dict-fab-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--verde-progreso, #4FB4B3);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid #ffffff;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dict-fab-count.visible {
    opacity: 1;
}

/* Overlay y modal */
.dict-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 30, 45, 0.45);
    z-index: 1600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}

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

.dict-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    background: #ffffff;
    border-radius: 14px;
    width: min(92vw, 520px);
    max-height: 80vh;
    z-index: 1700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}

.dict-modal.active {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.dict-modal-header {
    padding: 1.1rem 1.3rem 0.85rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
}

.dict-modal-header h3 {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.15rem;
    color: var(--text-deep, #1e293b);
    font-weight: 600;
}

.dict-modal-close {
    border: none;
    background: transparent;
    color: var(--text-muted, #6b7280);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.dict-modal-close:hover {
    background: rgba(0, 0, 0, 0.05);
}

.dict-modal-body {
    overflow-y: auto;
    padding: 1rem 1.3rem 1.3rem;
    flex: 1;
}

.dict-modal-empty {
    text-align: center;
    color: var(--text-muted, #6b7280);
    font-size: 0.9rem;
    padding: 2rem 1rem;
    font-style: italic;
    line-height: 1.6;
}

.dict-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dict-list li {
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.dict-list li:last-child {
    border-bottom: none;
}

.dict-list .dict-term {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.02rem;
    color: var(--text-deep, #1e293b);
    margin: 0 0 0.3rem;
    font-weight: 600;
}

.dict-list .dict-def {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-body, #374151);
    margin: 0;
}

.dict-modal-footer {
    padding: 0.75rem 1.3rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.dict-clear {
    background: transparent;
    border: 1px solid var(--border-soft, rgba(185, 151, 111, 0.25));
    color: var(--text-muted, #6b7280);
    padding: 0.45rem 0.95rem;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.dict-clear:hover {
    background: rgba(196, 104, 122, 0.08);
    color: var(--accent-rose, #c4687a);
    border-color: rgba(196, 104, 122, 0.3);
}

@media print {
    .dict-fab, .dict-overlay, .dict-modal { display: none !important; }
    .term::after, .term::before { display: none !important; }
    .term { background: none !important; }
}

/* =========================================================
   RECURSO CONCEPTOS · FLIP CARDS
   ========================================================= */
#recurso-conceptos {
    max-width: 825px !important;
    --color-primary: #d4af37;
    --color-primary-light: #f4d03f;
    --color-secondary: #2a5298;
    --color-accent: rgba(212, 175, 55, 0.8);
    --bg-gradient-start: rgba(20, 30, 48, 1);
    --bg-gradient-mid: rgba(25, 35, 50, 1);
    --bg-gradient-end: rgba(30, 40, 55, 1);
    --bg-card-front: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.08) 100%);
    --bg-card-back: linear-gradient(135deg, rgba(139,69,19,0.15) 0%, rgba(160,82,45,0.1) 25%, rgba(210,180,140,0.08) 50%, rgba(160,82,45,0.1) 75%, rgba(139,69,19,0.15) 100%);
    --text-title: #ffffff;
    --text-subtitle: rgba(212, 175, 55, 0.8);
    --text-description: #e8eaf6;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-size-title: 2.2rem;
    --font-size-card-title: 1.6rem;
    --font-size-card-subtitle: 0.9rem;
    --font-size-description: 1.05rem;
    --font-size-icon: 4.5rem;
    --card-height: 200px;
    --card-height-mobile: 170px;
    --border-radius: 20px;
    --gap-grid: 0.95rem;
    --shadow-card: 0 10px 30px rgba(0,0,0,0.3);
    --border-card-front: 1px solid rgba(212,175,55,0.2);
    --border-card-back: 1px solid rgba(212,175,55,0.4);
    --transition-flip: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#recurso-conceptos .conceptos-clave {
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
    width: 100%;
    padding: 3rem 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-sizing: border-box;
}

#recurso-conceptos .conceptos-title,
#recurso-conceptos .concepto-title { border-bottom: none; }

#recurso-conceptos .conceptos-title {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 30%, var(--color-secondary) 70%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-align: center;
    margin-bottom: 1rem;
    font-size: var(--font-size-title);
    font-weight: 700;
}

#recurso-conceptos .conceptos-instruction {
    text-align: center;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#recurso-conceptos .conceptos-instruction p {
    color: var(--color-accent);
    font-size: 1.1rem;
    margin: 0;
}

#recurso-conceptos .btn-reiniciar {
    background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(212,175,55,0.1));
    border: 1px solid rgba(212,175,55,0.3);
    color: var(--color-primary);
    padding: 0.6rem 1.8rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    font-family: var(--font-family);
}

#recurso-conceptos .btn-reiniciar:hover,
#recurso-conceptos .btn-reiniciar:focus {
    background: linear-gradient(135deg, rgba(212,175,55,0.3), rgba(212,175,55,0.2));
    border-color: rgba(212,175,55,0.5);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

#recurso-conceptos .conceptos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-grid);
    align-items: stretch;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding-bottom: 20px;
}

@media (max-width: 1024px) {
    #recurso-conceptos .conceptos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 680px;
    }
}

@media (max-width: 640px) {
    #recurso-conceptos .conceptos-clave { padding: 2rem; }
    #recurso-conceptos .conceptos-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 0.85rem;
    }
}

#recurso-conceptos .flip-card {
    background-color: transparent;
    width: 100%;
    height: var(--card-height);
    min-height: var(--card-height);
    perspective: 1000px;
    overflow: visible;
    cursor: pointer;
}

#recurso-conceptos .flip-card:focus { outline: none; }

#recurso-conceptos .flip-card:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: var(--border-radius);
}

@media (max-width: 640px) {
    #recurso-conceptos .flip-card {
        height: var(--card-height-mobile);
        min-height: var(--card-height-mobile);
    }
}

#recurso-conceptos .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    text-align: center;
    transition: var(--transition-flip);
    transform-style: preserve-3d;
    border-radius: var(--border-radius);
}

#recurso-conceptos .flip-card-inner.flipped { transform: rotateX(180deg); }

@media (hover: hover) {
    #recurso-conceptos .flip-card:hover .flip-card-inner:not(.flipped) {
        transform: rotateX(180deg);
    }
}

#recurso-conceptos .flip-card-front,
#recurso-conceptos .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    box-shadow: var(--shadow-card);
    box-sizing: border-box;
}

#recurso-conceptos .flip-card-front {
    background: var(--bg-card-front);
    backdrop-filter: blur(15px);
    border: var(--border-card-front);
    padding: 1rem 0.8rem;
}

#recurso-conceptos .flip-card-back {
    background: var(--bg-card-back);
    backdrop-filter: blur(15px);
    transform: rotateX(180deg);
    border: var(--border-card-back);
    position: relative;
    padding: 0.9rem;
}

#recurso-conceptos .flip-card-back::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(139,69,19,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(160,82,45,0.1) 0%, transparent 50%),
        linear-gradient(45deg, transparent 40%, rgba(212,175,55,0.05) 50%, transparent 60%);
    pointer-events: none;
}

#recurso-conceptos .flip-card-back::after {
    content: '';
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 15px;
    pointer-events: none;
}

#recurso-conceptos .concepto-icon {
    height: 3.5rem;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    margin-bottom: 0.55rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(212,175,55,0.4));
    transition: all 0.3s ease;
    line-height: 1;
}

@media (max-width: 640px) {
    #recurso-conceptos .concepto-icon {
        height: 3.15rem;
        min-height: 3.15rem;
        font-size: 3.15rem;
    }
}

#recurso-conceptos .flip-card:hover .concepto-icon,
#recurso-conceptos .flip-card:focus .concepto-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 30px rgba(212,175,55,0.8));
}

#recurso-conceptos .concepto-title {
    min-height: 2.32em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-title);
    -webkit-text-fill-color: var(--text-title);
    font-size: 1.28rem;
    font-weight: 700;
    margin: 0 0 0.35rem 0;
    text-shadow: 0 0 15px rgba(255,255,255,0.3);
    letter-spacing: 0.5px;
}

@media (max-width: 640px) {
    #recurso-conceptos .concepto-title { font-size: 1.18rem; }
}

#recurso-conceptos .concepto-subtitle {
    color: var(--text-subtitle);
    font-size: 0.84rem;
    font-weight: 400;
    opacity: 0.8;
    margin: 0;
}

#recurso-conceptos .concepto-description {
    color: var(--text-description);
    font-size: 0.91rem;
    line-height: 1.42;
    font-style: italic;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0.72rem;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    border-left: 3px solid rgba(212,175,55,0.6);
    margin: 0;
}

#recurso-conceptos .papiro-ornament {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, rgba(212,175,55,0.3) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.6;
    z-index: 1;
}

#recurso-conceptos .papiro-ornament::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 7px;
    height: 7px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: rgba(212,175,55,0.8);
    box-shadow: 0 0 10px rgba(212,175,55,0.35);
}

#recurso-conceptos .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================================
   DIARIO DE SUEÑOS · Widget inline trilingüe
   ============================================================ */

#bloque-diario .diario-header-card {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    padding: 2.5rem;
    border-radius: 20px;
    max-width: 900px;
    width: 100%;
    margin: 0 auto 1.5rem auto;
    box-shadow: 0 15px 35px rgba(20, 184, 166, 0.25);
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

#bloque-diario .diario-header-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(20, 184, 166, 0.38);
}

#bloque-diario .diario-chevron {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: rgba(240, 253, 244, 0.8);
    transition: transform 0.3s ease;
}

#bloque-diario .diario-header-title {
    color: #f0fdf4;
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
    font-weight: 700;
}

#bloque-diario .diario-header-subtitle {
    color: #ccfbf1;
    font-family: 'Lato', sans-serif;
    font-size: 1.1rem;
    margin: 0;
    letter-spacing: 0.5px;
}

#bloque-diario .diario-widget {
    width: 100%;
    max-width: 800px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,.1);
    padding: 2rem;
    margin: 0 auto;
    font-family: Georgia, serif;
    color: #0f172a;
    box-sizing: border-box;
}

#bloque-diario .diario-title {
    text-align: center;
    color: #0d9488;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

#bloque-diario .diario-subtitle {
    text-align: center;
    font-size: 0.95rem;
    color: #475569;
    margin: 0 0 2rem 0;
}

#bloque-diario .diario-label {
    display: block;
    font-weight: bold;
    margin-top: 1.2rem;
    margin-bottom: 0.3rem;
    color: #0f172a;
}

#bloque-diario .diario-input,
#bloque-diario .diario-textarea {
    width: 100%;
    padding: 0.7rem;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-family: Georgia, serif;
    font-size: 0.95rem;
    box-sizing: border-box;
    color: #0f172a;
}

#bloque-diario .diario-textarea {
    min-height: 100px;
    resize: vertical;
}

#bloque-diario .diario-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

#bloque-diario .diario-btn {
    padding: 0.7rem 1.4rem;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
    font-family: Georgia, serif;
}

#bloque-diario .diario-btn-save {
    background: #14b8a6;
    color: #ffffff;
}

#bloque-diario .diario-btn-save:hover {
    background: #0d9488;
}

#bloque-diario .diario-btn-load {
    background: #e2e8f0;
    color: #0f172a;
}

#bloque-diario .diario-btn-load:hover {
    background: #cbd5e1;
}

#bloque-diario .diario-btn-clear {
    background: #fee2e2;
    color: #7f1d1d;
}

#bloque-diario .diario-btn-clear:hover {
    background: #fecaca;
}

#bloque-diario .diario-footer-note {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.8rem;
    color: #64748b;
}

/* ── Gancho al Atlas ── */
#bloque-diario .diario-atlas-hook {
    margin-top: 1.4rem;
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    background: var(--bg-surface, #f8f5f1);
    border: 1px solid rgba(185,151,111,0.28);
    position: relative;
    overflow: hidden;
}
#bloque-diario .diario-atlas-hook::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 20%, rgba(185,151,111,0.07), transparent 55%);
    pointer-events: none;
}
#bloque-diario .diario-atlas-inner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}
#bloque-diario .diario-atlas-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent, #b9976f), var(--accent-gradient-end, #d6bf9f));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}
#bloque-diario .diario-atlas-title {
    font-family: 'Playfair Display', serif;
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--accent, #b9976f);
    margin: 0 0 0.25rem;
}
#bloque-diario .diario-atlas-desc {
    font-family: 'Lato', sans-serif;
    font-size: 0.82rem;
    color: var(--text-secondary, #546e7a);
    line-height: 1.5;
    margin: 0 0 0.8rem;
}
#bloque-diario .diario-atlas-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}
#bloque-diario .diario-atlas-btn {
    display: none;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1rem;
    background: linear-gradient(135deg, var(--accent, #b9976f), var(--accent-gradient-end, #d6bf9f));
    border: none;
    border-radius: 8px;
    color: #1a1208;
    font-family: 'Lato', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}
#bloque-diario .diario-atlas-btn:hover { opacity: 0.88; }
#bloque-diario .diario-atlas-locked {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    background: rgba(185,151,111,0.1);
    border: 1px solid rgba(185,151,111,0.28);
    border-radius: 8px;
    color: rgba(185,151,111,0.7);
    font-family: 'Lato', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: default;
}
#bloque-diario .diario-atlas-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    background: var(--teal-soft, rgba(79,180,179,0.12));
    border: 1px solid rgba(79,180,179,0.2);
    border-radius: 999px;
    color: var(--teal-dark, #3a9190);
    font-family: 'Lato', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
@media (max-width: 600px) {
    #bloque-diario .diario-atlas-inner { flex-direction: column; }
    #bloque-diario .diario-atlas-icon  { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   EVALUACIÓN UNIDAD 1 — estilos del quiz
   Pegar al final de final.css.
   Todas las clases usan prefijo .qz- + scope .quiz-scope
   para no contaminar el CSS general.
   Paleta: bronze/crema/rose/dorado (coherente con U1).
   ════════════════════════════════════════════════════════════════ */

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

#evaluacion { padding: 2rem 1rem; }

.qz-wrap {
  max-width: 825px;
  margin: 0 auto;
  padding: 2.5rem;
  background: linear-gradient(135deg, rgba(212,168,83,.06), rgba(185,151,111,.09));
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(26,26,62,.08);
  border: 1px solid rgba(185,151,111,.18);
}

/* ─── INTRO ─────────────────────────────────── */
.qz-intro { text-align: center; padding: 1.5rem 0; }
.qz-intro-icon { font-size: 3.5rem; margin-bottom: 1rem; display: block; animation: qz-pulse 2s ease infinite; }
.qz-intro-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.7rem; font-weight: 700;
  color: #1a1a3e; margin: 0 0 .8rem;
}
.qz-intro-desc {
  color: #5b6b7a; line-height: 1.7; max-width: 560px;
  margin: 0 auto 2rem; font-size: .95rem;
}
.qz-stats { display: flex; justify-content: center; gap: 1.8rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
.qz-stat { text-align: center; }
.qz-stat strong { display: block; font-size: 1.4rem; color: #b9976f; font-family: 'Playfair Display', Georgia, serif; }
.qz-stat span { font-size: .8rem; color: #5b6b7a; }
.qz-badges { display: flex; justify-content: center; gap: .6rem; margin-bottom: 2rem; flex-wrap: wrap; }
.qz-badge {
  display: inline-block; padding: .25rem .75rem;
  border-radius: 999px; font-size: .7rem;
  font-weight: 700; letter-spacing: .06em;
}
/* progresión: dorado → bronze → rose */
.qz-b1 { background: rgba(212,168,83,.18); color: #a07a2c; }
.qz-b2 { background: rgba(185,151,111,.22); color: #8f7354; }
.qz-b3 { background: rgba(196,104,122,.16); color: #a84d61; }
.qz-bc { background: rgba(26,26,62,.07); color: #5b6b7a; margin-left: .4rem; }

/* ─── QUIZ ACTIVO ───────────────────────────── */
.qz-header-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem; font-weight: 700;
  color: #1a1a3e; margin: 0 0 .8rem; text-align: center;
}
.qz-progress {
  width: 100%; height: 6px;
  background: rgba(26,26,62,.08);
  border-radius: 999px; overflow: hidden; margin-bottom: .4rem;
}
.qz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #b9976f, #d4b896);
  border-radius: 999px; transition: width .4s;
}
.qz-meta {
  display: flex; justify-content: space-between;
  font-size: .85rem; color: #5b6b7a; margin-bottom: 1.2rem;
}
.qz-card { animation: qz-fade .4s ease; min-height: 240px; margin-bottom: 1rem; }
.qz-question {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem; font-weight: 600;
  color: #1a1a3e; line-height: 1.5;
  margin: .8rem 0 1.2rem;
}

/* opciones múltiple */
.qz-options { display: flex; flex-direction: column; gap: .5rem; }
.qz-opt {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; padding: .9rem 1.1rem;
  background: #f8f5f1;
  border: 2px solid transparent; border-radius: 11px;
  cursor: pointer; text-align: left;
  font-family: 'Lato', system-ui, sans-serif;
  font-size: .95rem; color: #1a1a3e;
  transition: all .25s;
}
.qz-opt:hover:not(:disabled) {
  background: rgba(185,151,111,.1);
  border-color: rgba(185,151,111,.45);
  transform: translateX(4px);
}
.qz-opt:disabled { cursor: default; opacity: .85; }
.qz-opt-letter {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(185,151,111,.18);
  color: #8f7354;
  font-weight: 700; font-size: .8rem;
  flex-shrink: 0; transition: all .25s;
}
.qz-correct { border-color: #10b981 !important; background: rgba(16,185,129,.12) !important; }
.qz-correct .qz-opt-letter { background: #10b981; color: #fff; }
.qz-wrong { border-color: #ef4444 !important; background: rgba(239,68,68,.1) !important; }
.qz-wrong .qz-opt-letter { background: #ef4444; color: #fff; }

/* verdadero/falso */
.qz-tf { display: flex; gap: 1rem; justify-content: center; }
.qz-tf button {
  flex: 1; max-width: 200px; padding: 1.1rem;
  border: 2px solid transparent; border-radius: 11px;
  cursor: pointer; text-align: center;
  font-size: 1rem; font-weight: 600;
  background: #f8f5f1;
  transition: all .25s;
  font-family: 'Lato', system-ui, sans-serif;
  color: #1a1a3e;
}
.qz-tf button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26,26,62,.08);
}
.qz-tf button:disabled { cursor: default; }

/* respuesta corta */
.qz-input {
  width: 100%; padding: .9rem 1.1rem;
  border: 2px solid rgba(26,26,62,.1);
  border-radius: 11px;
  font-family: 'Lato', system-ui, sans-serif;
  font-size: 1rem; color: #1a1a3e;
  background: #f8f5f1;
  outline: none; transition: all .25s;
}
.qz-input:focus {
  border-color: #b9976f;
  box-shadow: 0 0 0 3px rgba(185,151,111,.18);
}
.qz-input:disabled { opacity: .7; }
.qz-input.qz-correct { border-color: #10b981 !important; background: rgba(16,185,129,.05) !important; }
.qz-input.qz-wrong { border-color: #ef4444 !important; background: rgba(239,68,68,.05) !important; }
.qz-hint { margin-top: .5rem; font-size: .85rem; color: #5b6b7a; }

/* escala de confianza */
.qz-scale { display: flex; flex-direction: column; gap: .4rem; max-width: 480px; margin: 0 auto; }
.qz-sc {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem 1.1rem;
  border: 2px solid transparent; border-radius: 10px;
  cursor: pointer; background: #f8f5f1;
  transition: all .25s; width: 100%; text-align: left;
  font-family: 'Lato', system-ui, sans-serif;
  color: #1a1a3e; font-size: .95rem;
}
.qz-sc:hover:not(:disabled) {
  background: rgba(185,151,111,.1);
  border-color: rgba(185,151,111,.45);
}
.qz-sc:disabled { cursor: default; }
.qz-sc-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(185,151,111,.18);
  color: #8f7354;
  font-weight: 700; flex-shrink: 0;
  transition: all .25s;
}
.qz-sc.qz-correct { border-color: #b9976f; background: rgba(185,151,111,.14); }
.qz-sc.qz-correct .qz-sc-num { background: #b9976f; color: #fff; }

/* feedback */
.qz-fb {
  margin-top: 1.1rem; padding: .9rem 1.1rem;
  border-left: 4px solid #b9976f;
  border-radius: 0 8px 8px 0;
  font-style: italic; color: #5b6b7a;
  line-height: 1.5; animation: qz-fade .3s;
  background: rgba(185,151,111,.06);
}
.qz-fb-ok { background: rgba(16,185,129,.08); border-left-color: #10b981; }
.qz-fb-no { background: rgba(239,68,68,.08); border-left-color: #ef4444; }

/* acciones / botones */
.qz-actions { display: flex; justify-content: space-between; gap: .8rem; margin-top: 1.5rem; }
.qz-btn {
  padding: .7rem 1.8rem;
  border: none; border-radius: 10px;
  font-family: 'Lato', system-ui, sans-serif;
  font-size: .95rem; font-weight: 700;
  cursor: pointer; transition: all .25s;
}
.qz-btn-p {
  background: linear-gradient(135deg, #b9976f, #8f7354);
  color: #fff;
  box-shadow: 0 3px 10px rgba(185,151,111,.32);
}
.qz-btn-p:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(185,151,111,.42);
}
.qz-btn-p:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.qz-btn-s {
  background: transparent; color: #5b6b7a;
  border: 2px solid rgba(26,26,62,.12);
}
.qz-btn-s:hover:not(:disabled) { border-color: #b9976f; color: #8f7354; }
.qz-btn-s:disabled { opacity: .3; cursor: not-allowed; }
.qz-btn-g {
  background: linear-gradient(135deg, #d4a853, #b9976f);
  color: #fff;
  box-shadow: 0 3px 10px rgba(212,168,83,.32);
  width: 100%;
}
.qz-btn-g:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(212,168,83,.45);
}

/* dots de navegación */
.qz-dots { display: flex; justify-content: center; gap: 6px; margin-top: 1.2rem; flex-wrap: wrap; }
.qz-dot {
  width: 12px; height: 12px;
  border-radius: 50%; border: none;
  cursor: pointer; transition: all .2s;
  padding: 0;
}

/* ─── RESULTADOS ─────────────────────────────── */
.qz-results {
  background: #fff; border-radius: 18px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(26,26,62,.08);
}
.qz-results-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem; text-align: center;
  margin: 0 0 1.2rem; color: #1a1a3e;
}
.qz-circle-wrap { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.qz-circle {
  width: 130px; height: 130px;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff; animation: qz-pop .5s ease .2s both;
}
.qz-circle-num { font-size: 2.2rem; font-weight: 900; line-height: 1; font-family: 'Playfair Display', Georgia, serif; }
.qz-circle-lbl { font-size: .75rem; font-weight: 600; opacity: .9; margin-top: .2rem; letter-spacing: .05em; }
.qz-hi { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 8px 24px rgba(16,185,129,.3); }
.qz-mid { background: linear-gradient(135deg, #b9976f, #8f7354); box-shadow: 0 8px 24px rgba(185,151,111,.32); }
.qz-low { background: linear-gradient(135deg, #c4687a, #a84d61); box-shadow: 0 8px 24px rgba(196,104,122,.3); }

.qz-msg {
  text-align: center; padding: .9rem;
  margin-bottom: 1.2rem; border-radius: 10px;
  font-weight: 600; font-size: .95rem;
}
.qz-msg-hi { background: rgba(16,185,129,.1); color: #059669; }
.qz-msg-mid { background: rgba(185,151,111,.12); color: #8f7354; }
.qz-msg-low { background: rgba(196,104,122,.1); color: #a84d61; }

.qz-breakdown {
  background: #f8f5f1; border-radius: 12px;
  padding: 1rem 1.3rem; margin-bottom: 1.2rem;
}
.qz-bline {
  display: flex; justify-content: space-between;
  padding: .35rem 0; font-size: .95rem; color: #1a1a3e;
  border-bottom: 1px solid rgba(26,26,62,.06);
}
.qz-bline:last-child { border-bottom: none; }

.qz-cats { margin: 1rem 0; }
.qz-cat { margin-bottom: .5rem; }
.qz-cat-row { display: flex; align-items: center; gap: .6rem; }
.qz-cat-lbl { font-size: .85rem; color: #5b6b7a; min-width: 100px; }
.qz-cat-track {
  flex: 1; height: 8px;
  background: rgba(26,26,62,.06);
  border-radius: 999px; overflow: hidden;
}
.qz-cat-fill { height: 100%; border-radius: 999px; transition: width .5s; }
.qz-cat-cnt { font-size: .8rem; font-weight: 700; color: #1a1a3e; min-width: 36px; text-align: right; }

.qz-cert-label { display: block; margin: .8rem 0 .3rem; font-size: .85rem; color: #5b6b7a; text-align: center; }
.qz-ra { display: flex; flex-direction: column; gap: .6rem; margin-top: .8rem; }

.qz-review {
  margin-top: 1.2rem;
  border-top: 1px solid rgba(26,26,62,.08);
  padding-top: 1.2rem; animation: qz-fade .3s;
}
.qz-rv-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem; margin: 0 0 .8rem; color: #1a1a3e;
}
.qz-rv-item {
  display: flex; gap: .6rem;
  padding: .6rem; border-radius: 8px;
  margin-bottom: .4rem;
  font-size: .85rem; line-height: 1.4; color: #1a1a3e;
}
.qz-rv-ok { background: rgba(16,185,129,.06); }
.qz-rv-no { background: rgba(239,68,68,.06); }

/* ─── ANIMACIONES ─────────────────────────────── */
@keyframes qz-fade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes qz-pop {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes qz-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ─── MOBILE ──────────────────────────────────── */
@media (max-width: 640px) {
  #evaluacion { padding: 1.2rem .5rem; }
  .qz-wrap { padding: 1.2rem .8rem; border-radius: 12px; }
  .qz-question { font-size: 1.05rem; }
  .qz-header-title { font-size: 1.15rem; }
  .qz-intro-title { font-size: 1.4rem; }
  .qz-actions { flex-direction: column-reverse; }
  .qz-actions .qz-btn { width: 100%; }
  .qz-tf { flex-direction: column; }
  .qz-tf button { max-width: 100%; }
  .qz-stats { gap: 1rem; }
}

/* ─── ACCESIBILIDAD: respeto a prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  .qz-intro-icon { animation: none; }
  .qz-card, .qz-fb, .qz-circle, .qz-review {
    animation-duration: .01ms !important;
  }
  .qz-opt:hover:not(:disabled),
  .qz-tf button:hover:not(:disabled),
  .qz-btn-p:hover:not(:disabled),
  .qz-btn-g:hover {
    transform: none;
  }
}
/* ════════════════════════════════════════════════════════════════
   PUERTAS ONÍRICAS — galería + modal
   Pegar al final de final.css. Todo bajo .dream-door-app, scope
   propio, paleta bronze/crema/rose coherente con U1.
   ════════════════════════════════════════════════════════════════ */

.dream-door-app {
  --dd-bronze:   #b9976f;
  --dd-bronze-d: #8f7354;
  --dd-bronze-l: #d4b896;
  --dd-gold:     #d4a853;
  --dd-rose:     #c4687a;
  --dd-cream:    #f8f5f1;
  --dd-cream-d:  #f0ebe4;
  --dd-ink:      #1a1a3e;
  --dd-text:     #4a4a6a;
  --dd-muted:    #7a7a8c;
  --dd-border:   rgba(185,151,111,.22);
  --dd-shadow:   rgba(26,26,62,.12);
  --dd-trans:    all .3s cubic-bezier(.4, 0, .2, 1);

  font-family: 'Lato', system-ui, sans-serif;
  color: var(--dd-text);
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 0;
}
.dream-door-app *, .dream-door-app *::before, .dream-door-app *::after {
  box-sizing: border-box;
}

/* ─── Galería ────────────────────────────────────────────────── */
.dream-door-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 280px));
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.dream-door-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px var(--dd-shadow);
  border: 1px solid var(--dd-border);
  transition: var(--dd-trans);
  display: flex;
  flex-direction: column;
}
.dream-door-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(185,151,111,.28);
  border-color: var(--dd-bronze);
}
.dream-door-card-image {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--dd-cream-d);
  position: relative;
  overflow: hidden;
}
.dream-door-card-image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(143,115,84,.45) 100%);
  opacity: .8;
  transition: opacity .3s;
}
.dream-door-card:hover .dream-door-card-image::after { opacity: .55; }

.dream-door-card-content {
  padding: 1.4rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.dream-door-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--dd-bronze-d);
  margin: 0 0 .5rem;
  line-height: 1.25;
}
.dream-door-card-description {
  font-size: .92rem;
  color: var(--dd-muted);
  line-height: 1.5;
  margin: 0 0 1.2rem;
  flex-grow: 1;
  font-style: italic;
}
.dream-door-card-button {
  width: 100%;
  padding: .75rem 1rem;
  background: linear-gradient(135deg, var(--dd-bronze), var(--dd-bronze-d));
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: var(--dd-trans);
  font-family: inherit;
}
.dream-door-card-button:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(185,151,111,.4);
}
.dream-door-card-button:active { transform: scale(.98); }

/* ─── Mensaje de cierre ──────────────────────────────────────── */
.dream-door-closing {
  background: linear-gradient(135deg, rgba(212,168,83,.08), rgba(185,151,111,.12));
  border: 1px solid var(--dd-border);
  border-radius: 14px;
  padding: 2rem 2.5rem;
  text-align: center;
  margin-bottom: 1rem;
}
.dream-door-closing-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  color: var(--dd-bronze-d);
  font-style: italic;
  line-height: 1.7;
  margin: 0;
}

/* ─── Modal ──────────────────────────────────────────────────── */
.dream-door-modal {
  position: fixed; inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: dd-fade .25s ease-out;
}
.dream-door-modal[hidden] { display: none; }
.dream-door-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(26,26,62,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.dream-door-modal-content {
  position: relative;
  background: linear-gradient(160deg, #fff, var(--dd-cream));
  border: 1px solid var(--dd-border);
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,.3);
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: dd-slide .35s cubic-bezier(.34, 1.56, .64, 1);
}

.dream-door-modal-header {
  padding: 1.8rem 2rem 1.4rem;
  border-bottom: 2px solid var(--dd-border);
  position: relative;
}
.dream-door-modal-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--dd-bronze-d);
  margin: 0 0 .35rem;
  padding-right: 2.5rem;
  line-height: 1.2;
}
.dream-door-modal-description {
  font-size: .9rem;
  color: var(--dd-muted);
  font-style: italic;
  margin: 0;
}
.dream-door-modal-close {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  width: 2.2rem; height: 2.2rem;
  background: var(--dd-cream);
  border: 1px solid var(--dd-border);
  border-radius: 50%;
  font-size: 1.05rem;
  cursor: pointer;
  transition: var(--dd-trans);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dd-text);
  font-family: inherit;
}
.dream-door-modal-close:hover {
  background: var(--dd-bronze);
  color: #fff;
  border-color: var(--dd-bronze);
  transform: rotate(90deg);
}

.dream-door-modal-body {
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.dream-door-modal-section {
  background: #fff;
  padding: 1.3rem 1.4rem;
  border-radius: 11px;
  border: 1px solid var(--dd-border);
}
.dream-door-modal-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dd-bronze-d);
  margin: 0 0 .8rem;
}
.dream-door-modal-section-text {
  font-size: .95rem;
  color: var(--dd-text);
  line-height: 1.7;
  margin: 0;
}
.dream-door-modal-journal-prompt {
  font-style: italic;
  color: var(--dd-bronze-d);
}

.dream-door-modal-hint {
  background: var(--dd-cream);
  border-left: 3px solid var(--dd-bronze);
  padding: .8rem 1rem;
  border-radius: 0 8px 8px 0;
  margin-top: .9rem;
}
.dream-door-modal-hint p {
  font-size: .85rem;
  color: var(--dd-muted);
  margin: 0;
}
.dream-door-modal-hint-text {
  font-size: .82rem;
  color: var(--dd-muted);
  margin-top: .9rem;
  font-style: italic;
}

.dream-door-modal-footer {
  padding: 1.3rem 2rem 1.8rem;
  border-top: 2px solid var(--dd-border);
  display: flex;
  gap: .7rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.dream-door-modal-button {
  padding: .65rem 1.3rem;
  border: none;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--dd-trans);
  font-family: inherit;
}
.dream-door-modal-button-secondary {
  background: var(--dd-cream);
  color: var(--dd-text);
  border: 1px solid var(--dd-border);
}
.dream-door-modal-button-secondary:hover {
  background: var(--dd-cream-d);
  border-color: var(--dd-bronze);
}
.dream-door-modal-button-primary {
  background: linear-gradient(135deg, var(--dd-bronze), var(--dd-bronze-d));
  color: #fff;
  box-shadow: 0 3px 10px rgba(185,151,111,.32);
}
.dream-door-modal-button-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(185,151,111,.45);
}
.dream-door-modal-button:active { transform: scale(.98); }

/* ─── Toast (reemplaza alert nativo) ─────────────────────────── */
.dream-door-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 11000;
  background: linear-gradient(135deg, var(--dd-bronze), var(--dd-bronze-d));
  color: #fff;
  padding: .9rem 1.5rem;
  border-radius: 11px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-size: .92rem;
  font-weight: 600;
  max-width: 90%;
  text-align: center;
  animation: dd-toast-in .35s ease-out, dd-toast-out .35s ease-in 3.6s forwards;
}
.dream-door-toast[hidden] { display: none; }

/* ─── Animaciones ────────────────────────────────────────────── */
@keyframes dd-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes dd-slide {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dd-toast-in {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes dd-toast-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, 20px); }
}

/* ─── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .dream-door-gallery { grid-template-columns: 1fr; gap: 1rem; }
  .dream-door-card-image { height: 180px; }
  .dream-door-modal-content { max-height: 95vh; border-radius: 12px; }
  .dream-door-modal-header { padding: 1.4rem 1.5rem 1.1rem; }
  .dream-door-modal-title { font-size: 1.4rem; }
  .dream-door-modal-body { padding: 1.2rem 1.5rem; }
  .dream-door-modal-footer { padding: 1.1rem 1.5rem 1.4rem; flex-direction: column; }
  .dream-door-modal-button { width: 100%; }
  .dream-door-closing { padding: 1.5rem 1.2rem; }
  .dream-door-closing-text { font-size: 1rem; }
}

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dream-door-modal, .dream-door-modal-content, .dream-door-toast {
    animation-duration: .01ms !important;
  }
  .dream-door-card:hover { transform: none; }
  .dream-door-card-button:hover { transform: none; }
}
section.identidad,
.tarjeta-identidad-onirica {
  max-width: 660px !important;
  width: min(92%, 660px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

section.identidad {
  padding: 30px 44px 28px !important;
}
/* Aire entre título, subtítulo y tarjeta */
.hero h1,
.header-unidad-premium h1 {
  margin-bottom: 1.15rem !important;
}

.subtitle,
.header-unidad-premium h2,
.hero h2 {
  margin-bottom: 2.35rem !important;
}

/* Baja un poco la caja */
section.identidad,
.tarjeta-identidad-onirica {
  margin-top: 42px !important;
}
.hero h1,
.header-unidad-premium h1 {
  margin-bottom: 1.35rem !important;
}
/* Baja la tarjeta Dream Identity */
.io-card-wrapper,
section.identidad,
.tarjeta-identidad-onirica {
  margin-top: 56px !important;
}
/* Baja el bloque principal del hero */
.header-unidad-premium .hero-content,
.hero .hero-content,
.wrap.hero-content {
  padding-top: 22px !important;
}
.io-card-wrapper,
section.identidad,
.tarjeta-identidad-onirica {
  margin-top: 46px !important;
}
section.identidad {
  padding: 28px 44px 24px !important;
}
section.identidad {
  padding: 28px 44px 20px !important;
}

.nav-unidades {
  flex: 1;
  justify-content: flex-start;
  max-width: none;
  grid-column: 1;
  grid-row: 1;
  clip-path: inset(0 0% 0 0);
  transition: clip-path 0.32s cubic-bezier(0.77, 0, 0.175, 1);
}

.nav-superior-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ========== ROADMAP SECTION ========== */
.programa-roadmap {
  background: transparent;
  padding: 3rem 0;
  margin: 3rem 0 0;
}

.programa-roadmap > .wrap {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 3rem 2rem;
  max-width: 900px;
}

/* Header row */
.rmap-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}

.rmap-kicker {
  font-family: 'Lato', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4FB4B3;
  margin-bottom: 0.4rem;
  display: block;
}

.rmap-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
  color: #1e293b;
  margin-bottom: 0;
  text-align: center;
}

.rmap-header h2 em {
  font-style: italic;
  color: #b9976f;
}

/* Progress mini */
.rmap-progress-mini {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.rmap-progress-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #546e7a;
}

.rmap-progress-track {
  width: 120px;
  height: 4px;
  background: rgba(30,41,59,0.1);
  border-radius: 4px;
  overflow: hidden;
}

.rmap-progress-fill {
  height: 100%;
  background: #4FB4B3;
  border-radius: 4px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.rmap-progress-count {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: #4FB4B3;
}

/* Grid */
.unidades-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
  width: 72%;
  margin-left: auto;
  margin-right: auto;
}

/* Card base */
.unidad-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(30,41,59,0.08);
  box-shadow: 0 2px 8px rgba(30,41,59,0.06);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.unidad-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(30,41,59,0.12);
  border-color: rgba(185,151,111,0.35);
}

.unidad-card.unlocked:hover {
  border-color: #4FB4B3;
  box-shadow: 0 12px 32px rgba(79,180,179,0.16);
}

/* Remove old pseudo-element */
.unidad-card::before { display: none; }

/* Image zone */
.card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 5/3;
  overflow: hidden;
  flex-shrink: 0;
}

.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.4s ease, filter 0.3s ease;
  display: block;
}

.unidad-card:hover .card-img-wrap img { transform: scale(1.04); }
.unidad-card.locked .card-img-wrap img { filter: grayscale(60%) brightness(0.65); }

/* Badge */
.card-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  right: auto;
  font-family: 'Lato', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.28em 0.65em;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.unidad-card.completed .card-badge { background: rgba(79,180,179,0.92); color: #fff; }
.unidad-card.unlocked .card-badge  { background: rgba(255,255,255,0.92); color: #4FB4B3; border: 1px solid #4FB4B3; }
.unidad-card.preview .card-badge   { background: rgba(255,255,255,0.85); color: #b9976f; border: 1px solid rgba(185,151,111,0.5); }
.unidad-card.locked .card-badge    { background: rgba(30,41,59,0.6); color: rgba(255,255,255,0.55); }

/* Lock overlay */
.card-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30,41,59,0.25);
}

.lock-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  backdrop-filter: blur(4px);
}

/* Card body */
.card-body {
  padding: 0.75rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-unit-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #546e7a;
  margin-bottom: 0.3rem;
}

.unidad-card.locked .card-unit-label { opacity: 0.5; }

.unidad-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.25;
  color: #1e293b;
  margin-bottom: 0.35rem;
  flex: 1;
}

.unidad-card.locked h3 { color: #6b7280; }

.card-tags {
  font-family: 'Lato', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b9976f;
  margin-bottom: 0.85rem;
}

.unidad-card.locked .card-tags { color: rgba(185,151,111,0.4); }

/* Buttons */
.cta-card {
  font-family: 'Lato', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.55em 0;
  width: 100%;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.22s ease;
  text-align: center;
  min-height: 36px;
}

.unidad-card.completed .cta-card {
  background: transparent;
  color: #4FB4B3;
  border: 1px solid #4FB4B3;
}
.unidad-card.completed .cta-card:hover { background: rgba(79,180,179,0.08); }

.unidad-card.unlocked .cta-card {
  background: #4FB4B3;
  color: #fff;
}
.unidad-card.unlocked .cta-card:hover { background: #3a9190; box-shadow: 0 4px 16px rgba(79,180,179,0.3); }

.unidad-card.preview .cta-card {
  background: transparent;
  color: #b9976f;
  border: 1px solid rgba(185,151,111,0.45);
}
.unidad-card.preview .cta-card:hover { background: rgba(185,151,111,0.08); border-color: #b9976f; }

.unidad-card.locked .cta-card {
  background: rgba(30,41,59,0.04);
  color: rgba(30,41,59,0.3);
  border: 1px solid rgba(30,41,59,0.1);
  cursor: default;
}

/* CTA Strip */
.cta-roadmap-section {
  width: 72%;
  max-width: none;
  margin: 44px auto 0;
  padding: 20px 28px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(232,248,250,0.94), rgba(246,252,253,0.96));
  border: 1px solid rgba(72,174,181,0.22);
  box-shadow: 0 14px 34px rgba(22,58,72,0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
  text-align: left;
}

.cta-roadmap-eyebrow {
  font-family: 'Lato', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #44b8b5;
  margin-bottom: 0.3rem;
}

.cta-roadmap-section h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 400;
  color: #1e293b;
  line-height: 1.25;
  margin-bottom: 4px;
}

.cta-roadmap-section h3 em {
  font-style: italic;
  color: #b9976f;
}

.cta-roadmap-section p {
  font-size: 0.82rem;
  font-weight: 300;
  color: #546e7a;
  line-height: 1.55;
  max-width: 420px;
  margin-bottom: 0;
}

.cta-roadmap-action {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.cta-roadmap-pills {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cta-roadmap-pill {
  font-family: 'Lato', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28em 0.65em;
  border-radius: 20px;
  background: rgba(68,184,181,0.1);
  color: #3a9190;
}

.btn-cta-premium-large {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7em 1.6em;
  border-radius: 10px;
  background: #44b8b5;
  color: #fff;
  border: 1px solid rgba(68,184,181,0.9);
  box-shadow: 0 8px 18px rgba(68,184,181,0.20);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
  min-height: 40px;
}

.btn-cta-premium-large:hover {
  background: #329f9d;
  box-shadow: 0 6px 20px rgba(68,184,181,0.35);
  transform: translateY(-1px);
}

.cta-roadmap-note {
  font-family: 'Lato', sans-serif;
  font-size: 0.62rem;
  color: rgba(30,41,59,0.35);
  letter-spacing: 0.04em;
}

/* Responsive */
@media (max-width: 860px) {
  .unidades-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .unidades-grid { grid-template-columns: 1fr; }
  .programa-roadmap { padding: 2.5rem 0 3rem; }
  .rmap-header { flex-direction: column; align-items: flex-start; }
  .rmap-progress-mini { align-items: flex-start; }
  .rmap-progress-track { width: 140px; }
  .cta-roadmap-section { flex-direction: column; }
  .cta-roadmap-action { align-items: flex-start; }
  .cta-roadmap-pills { justify-content: flex-start; }
}

/* ── ROADMAP MINI — tratamiento editorial premium ─────────────────── */

/* Contenedor: card ivory flotante con regla bronce */
.roadmap-mini {
  position: relative;
  background: transparent;
  padding: 1.5rem 0 1.75rem;
  margin: 1.75rem 0 2rem;
  width: 100%;
}

.roadmap-mini::before { display: none; }

.roadmap-mini .programa-roadmap  { padding: 0; background: transparent; margin: 0; }
.roadmap-mini .programa-roadmap > .wrap { padding: 0; }
.roadmap-mini .rmap-header {
  margin-bottom: 0.85rem; gap: 0.5rem;
  width: 845px; max-width: 100%;
  margin-left: auto; margin-right: auto;
  text-align: left; align-items: flex-start;
}

/* Kicker con ornamento bronce */
.roadmap-mini .rmap-kicker {
  font-size: 0.38rem;
  letter-spacing: 0.22em;
  color: #B9976F;
}
.roadmap-mini .rmap-kicker::before {
  content: '✦\00a0';
  opacity: 0.75;
}

/* H2 refinado */
.roadmap-mini .rmap-header h2   { font-size: 0.85rem; color: #1e293b; }
.roadmap-mini .rmap-header h2 em{ color: #B9976F; font-style: italic; }

/* Barra de progreso en bronce */
.roadmap-mini .rmap-progress-mini { gap: 0.35rem; }
.roadmap-mini .rmap-progress-label{ font-size: 0.38rem; color: #6b7280; }
.roadmap-mini .rmap-progress-track{ width: 60px; height: 3px; background: rgba(185,151,111,0.15); }
.roadmap-mini .rmap-progress-fill { background: linear-gradient(90deg, #B9976F, #d6bf9f); }
.roadmap-mini .rmap-progress-count{ font-size: 0.38rem; color: #B9976F; font-weight: 700; }

/* Tira de tarjetas sin marco */
.roadmap-mini .unidades-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  width: 845px; max-width: 100%;
  margin: 0 auto 0;
  padding: 0;
  background: transparent;
  border: none;
}

/* Tarjetas */
.roadmap-mini .unidad-card {
  font-size: 0.38rem;
  border-radius: 5px;
  animation: rmapMiniReveal 0.5s ease both;
}
.roadmap-mini .card-img-wrap   { aspect-ratio: 7/5; }
.roadmap-mini .card-body       { padding: 0.17rem 0.23rem; gap: 0.06rem; }
.roadmap-mini .card-badge      { font-size: 0.35rem; padding: 1px 4px; border-radius: 2px; }
.roadmap-mini .card-unit-label { font-size: 0.32rem; letter-spacing: 0.05em; color: #B9976F; }
.roadmap-mini .unidad-card h3  {
  font-size: 0.37rem; line-height: 1.2; font-weight: 500;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2;
}
.roadmap-mini .card-tags,
.roadmap-mini .cta-card        { display: none; }

/* Hover micro-lift */
.roadmap-mini .unidad-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(185,151,111,0.22);
  border-color: rgba(185,151,111,0.35);
}

/* Stagger reveal */
@keyframes rmapMiniReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.roadmap-mini .unidad-card:nth-child(1) { animation-delay: 0.05s; }
.roadmap-mini .unidad-card:nth-child(2) { animation-delay: 0.12s; }
.roadmap-mini .unidad-card:nth-child(3) { animation-delay: 0.19s; }
.roadmap-mini .unidad-card:nth-child(4) { animation-delay: 0.26s; }
.roadmap-mini .unidad-card:nth-child(5) { animation-delay: 0.33s; }
.roadmap-mini .unidad-card:nth-child(6) { animation-delay: 0.40s; }

/* Las desbloqueadas con leve sombra bronce */
.roadmap-mini .unidad-card.completed,
.roadmap-mini .unidad-card.unlocked,
.roadmap-mini .unidad-card.preview {
  box-shadow: 0 2px 10px rgba(185,151,111,0.18);
}

/* Roadmap mini: mas presencia sin competir con el bloque visual principal */
.roadmap-mini {
  max-width: 860px;
  margin: 1.05rem auto 2.45rem;
  padding: 0.6rem 0 1.1rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.roadmap-mini::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0.55rem;
  height: 54px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(185,151,111,0.18) 0 1px,
      transparent 1px 12px
    );
  border: 1px solid rgba(185,151,111,0.12);
  border-radius: 8px;
  opacity: 0.32;
  transform: translate(10px, 9px);
  pointer-events: none;
  z-index: 0;
}

.roadmap-mini .rmap-header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: 0.82rem;
  padding: 0 0 0 0.15rem;
  align-items: flex-end;
  justify-content: space-between;
  text-align: left;
}

.roadmap-mini .rmap-header > div:first-child {
  max-width: 460px;
  text-align: left;
}

.roadmap-mini .rmap-kicker {
  margin-bottom: 0.25rem;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
}

.roadmap-mini .rmap-kicker::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  margin-right: 0.45rem;
  vertical-align: middle;
  background: currentColor;
}

.roadmap-mini .rmap-header h2 {
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.15;
  text-align: left;
}

.roadmap-mini .rmap-progress-mini {
  min-width: 128px;
  align-items: flex-end;
  margin-left: auto;
}

.roadmap-mini .rmap-progress-label,
.roadmap-mini .rmap-progress-count {
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.roadmap-mini .rmap-progress-track {
  width: 112px;
  height: 4px;
}

.roadmap-mini .unidades-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  gap: 10px;
}

.roadmap-mini .unidad-card {
  border-radius: 7px;
  border-color: rgba(30,41,59,0.1);
  box-shadow: 0 8px 20px rgba(30,41,59,0.08);
}

.roadmap-mini .card-img-wrap {
  aspect-ratio: 16/9;
}

.roadmap-mini .card-body {
  min-height: 58px;
  padding: 0.46rem 0.5rem 0.52rem;
  gap: 0.15rem;
}

.roadmap-mini .card-badge {
  top: 7px;
  left: 7px;
  font-size: 0.47rem;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.08em;
}

.roadmap-mini .card-unit-label {
  font-size: 0.47rem;
  letter-spacing: 0.08em;
}

.roadmap-mini .unidad-card h3 {
  font-size: 0.58rem;
  line-height: 1.2;
}

.roadmap-mini .card-lock-overlay .lock-icon {
  width: 34px;
  height: 34px;
  font-size: 1rem;
}

.roadmap-mini .unidad-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(30,41,59,0.12);
}

@media (max-width: 900px) {
  .roadmap-mini {
    max-width: calc(100% - 2rem);
  }
  .roadmap-mini .unidades-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .roadmap-mini .rmap-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .roadmap-mini .unidades-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Roadmap preview final: miniatura editorial intencional */
.roadmap-preview-block {
  max-width: 900px;
  margin: 3.25rem auto 3.25rem;
  padding: 2rem 2.1rem 2.15rem;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(185, 151, 111, 0.24);
  border-radius: 18px;
  box-shadow: 0 22px 58px rgba(42, 58, 70, 0.075);
  text-align: center;
}

.roadmap-preview-block::after {
  display: none;
}

.roadmap-preview-block .programa-roadmap,
.roadmap-preview-block .programa-roadmap > .wrap {
  padding: 0;
  margin: 0;
}

.roadmap-preview-block .rmap-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.5rem;
  align-items: end;
  margin: 0 auto 1.25rem;
  padding: 0;
  text-align: left;
}

.roadmap-preview-block .rmap-header > div:first-child {
  max-width: 620px;
}

.roadmap-preview-block .rmap-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.45rem;
  color: #B9976F;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.roadmap-preview-block .rmap-kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  margin: 0;
  background: rgba(185, 151, 111, 0.58);
}

.roadmap-preview-block .rmap-kicker::after {
  content: "";
  width: 22px;
  height: 1px;
  background: rgba(185, 151, 111, 0.38);
}

.roadmap-preview-block .rmap-header h2 {
  margin: 0;
  color: #263545;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.25rem, 2vw, 1.58rem);
  font-weight: 400;
  line-height: 1.15;
  text-align: left;
}

.roadmap-preview-block .rmap-header h2 em {
  color: #B9976F;
  font-style: italic;
}

.roadmap-preview-text {
  max-width: 560px;
  margin: 0.65rem 0 0;
  color: #667381;
  font-size: 0.86rem;
  line-height: 1.6;
}

.roadmap-preview-block .rmap-progress-mini {
  min-width: 135px;
  margin-left: 0;
  align-items: flex-end;
  gap: 0.35rem;
}

.roadmap-preview-block .rmap-progress-label,
.roadmap-preview-block .rmap-progress-count {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.roadmap-preview-block .rmap-progress-track {
  width: 118px;
  height: 4px;
  background: rgba(185, 151, 111, 0.16);
}

.roadmap-preview-frame {
  max-width: 820px;
  margin: 0 auto;
  padding: 12px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(185, 151, 111, 0.16);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.68),
    0 16px 38px rgba(40, 52, 65, 0.075);
  overflow: hidden;
}

.roadmap-preview-frame .unidades-grid {
  width: 100%;
  gap: 9px;
}

.roadmap-preview-frame .unidad-card {
  box-shadow: 0 8px 18px rgba(30,41,59,0.075);
}

.roadmap-preview-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.35rem;
  padding: 0.72rem 1.25rem;
  color: #8a6847;
  background: rgba(185, 151, 111, 0.08);
  border: 1px solid rgba(185, 151, 111, 0.42);
  border-radius: 999px;
  font-family: 'Lato', sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.roadmap-preview-cta:hover {
  color: #fff;
  background: #B9976F;
  box-shadow: 0 10px 24px rgba(185, 151, 111, 0.22);
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .roadmap-preview-block {
    max-width: calc(100% - 2rem);
    padding: 1.6rem 1.25rem 1.8rem;
  }
}

@media (max-width: 680px) {
  .roadmap-preview-block .rmap-header {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }
  .roadmap-preview-block .rmap-progress-mini {
    align-items: flex-start;
  }
}

/* Ajustes editoriales U1: anclas, rail, bienvenida y tarjetas intro */
section[id],
div[id],
article[id] {
  scroll-margin-top: 110px;
}

.barra-editorial-nuclear,
.side-rail,
.rail-editorial,
.barra-lateral-editorial {
  opacity: 0.45;
}

@media (max-width: 1200px) {
  .barra-editorial-nuclear,
  .side-rail,
  .rail-editorial,
  .barra-lateral-editorial {
    display: none;
  }
}

.orientacion-card,
.work-card,
.info-card,
.recorrido-card {
  min-height: 124px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#bienvenida .section-title {
  display: inline-block;
  width: auto;
  max-width: min(100%, 420px);
  padding-bottom: 0.42rem;
  border-bottom: 2px solid rgba(185, 151, 111, 0.85);
}

#bienvenida .section-title::after,
.tarjeta-bienvenida .section-title::after {
  width: 56%;
  max-width: 420px;
}

#bienvenida .quote-box,
.tarjeta-bienvenida .quote-box,
.quote-box.cita-editorial,
.cita-editorial {
  background: rgba(185, 151, 111, 0.10);
  border-left: 4px solid rgba(185, 151, 111, 0.75);
  border-radius: 10px;
}
/* ─────────────────────────────────────────────────────────────────── */

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  background-color: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: white;
  padding: 2.5rem;
  border-radius: 20px;
  max-width: 500px;
  width: 90%;
  position: relative;
  animation: roadmapSlideUp 0.3s ease;
}

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

.modal-close {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #6b7280;
  line-height: 1;
}

.modal .modal-header {
  background: none;
  padding: 0 0 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(185,151,111,0.2);
}

.modal .modal-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: #1e293b;
  margin: 0 0 0.5rem;
}

.modal .modal-header p {
  font-size: 0.9rem;
  color: #546e7a;
  margin: 0;
}

.modal .modal-body { padding: 0; }

.modal .modal-body p {
  margin-bottom: 1rem;
  line-height: 1.7;
  color: #546e7a;
}

.modal-cta {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.btn-modal {
  flex: 1;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.85rem;
  font-family: 'Lato', sans-serif;
}

.btn-modal.btn-primary {
  background: #4fb4b3;
  color: white;
}

.btn-modal.btn-primary:hover {
  background: #3a9190;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(79,180,179,0.3);
}

.btn-modal.btn-secondary {
  background: transparent;
  color: #546e7a;
  border: 1px solid rgba(30,41,59,0.15);
}

.btn-modal.btn-secondary:hover {
  background: rgba(30,41,59,0.04);
}

/* ========== GLOBO IDIOMAS ========== */
.lang-globe {
  position: relative;
  margin-left: auto;
  align-self: center;
}

.lang-globe-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  border: 1.5px solid rgba(185, 151, 111, 0.4);
  background: rgba(255, 255, 255, 0.95);
  color: #6b5843;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s;
  white-space: nowrap;
}

.lang-globe-btn:hover,
.lang-globe.open .lang-globe-btn {
  border-color: #B9976F;
  background: #fff;
  color: #B9976F;
  box-shadow: 0 4px 14px rgba(185, 151, 111, 0.22);
}

.lang-globe-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.2s;
}

.lang-globe-btn:hover .lang-globe-icon,
.lang-globe.open .lang-globe-icon {
  opacity: 1;
}

.lang-globe-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
}

.lang-globe-chevron {
  width: 9px;
  height: 5px;
  flex-shrink: 0;
  opacity: 0.45;
  transition: transform 0.22s ease, opacity 0.2s;
}

.lang-globe.open .lang-globe-chevron {
  transform: rotate(180deg);
  opacity: 0.75;
}

.lang-globe-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  flex-direction: column;
  min-width: 148px;
  padding: 5px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(185, 151, 111, 0.25);
  box-shadow: 0 12px 32px rgba(80, 55, 30, 0.13);
  z-index: 200;
}

.lang-globe.open .lang-globe-menu {
  display: flex;
  animation: lgMenuIn 0.16s ease;
}

@keyframes lgMenuIn {
  from { opacity: 0; transform: translateY(-5px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.lang-globe-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  padding: 9px 11px;
  border-radius: 8px;
  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
  color: #6b5843;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.14s ease;
}

.lang-globe-menu button:hover {
  background: rgba(185, 151, 111, 0.09);
}

.lang-globe-menu button.active {
  background: rgba(185, 151, 111, 0.14);
  color: #a07840;
}

.lang-option-code {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  min-width: 20px;
  color: inherit;
}

.lang-option-name {
  font-size: 0.82rem;
  font-weight: 400;
  color: inherit;
  flex: 1;
}

.lang-globe-menu button.active .lang-option-code {
  color: #B9976F;
}

.lang-globe-menu button.active .lang-option-name {
  font-weight: 600;
}

.lang-globe-menu button.active::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #B9976F;
  flex-shrink: 0;
}

/* ========== GLOBE SCROLL FLOAT ANIMATION ========== */
@keyframes lgFloat {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-3px); }
  70%  { transform: translateY(-1.5px); }
  100% { transform: translateY(0); }
}

.lang-globe-btn.is-floating {
  animation: lgFloat 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ========== DICT FAB — ESTILO UNIFICADO CON GLOBO ========== */
.dict-fab {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 1500;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid rgba(185, 151, 111, 0.4);
  color: #B9976F;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(185, 151, 111, 0.18);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  padding: 0;
  font-size: 1.25rem;
  backdrop-filter: blur(6px);
}

.dict-fab:hover {
  border-color: #B9976F;
  box-shadow: 0 6px 22px rgba(185, 151, 111, 0.28);
  transform: scale(1.06);
}

/* ── Clara + dict-fab · aparición sincronizada por sección ── */
.clara-root,
.dict-fab {
  transition: opacity 0.4s ease, transform 0.35s ease;
}
.clara-root.fab-oculto,
.dict-fab.fab-oculto {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

/* ================================================= */
/* === FÁBRICA DE IDEAS NOCTURNA                 === */
/* ================================================= */
#recurso-fabrica {
    --fab-night: #022c22;
    --fab-emerald: #10b981;
    --fab-emerald-soft: #34d399;
    --fab-emerald-glow: rgba(16,185,129,.15);
    --fab-emerald-bright: #6ee7b7;
    --fab-glass: rgba(6,78,59,.35);
    --fab-glass-border: rgba(16,185,129,.22);
    --fab-text: #f0fdf4;
    --fab-text-high: #ecfdf5;
    --fab-text-mid: rgba(220,252,231,.82);
    --fab-text-soft: rgba(209,250,229,.6);
    --fab-gold: #B9976F;
    --fab-gold-light: #d4b896;
    --fab-focus-ring: #22d3ee;
    --fab-focus-bg: rgba(34,211,238,.12);
    --fab-tap-min: 48px;
    background: var(--fab-night);
    color: var(--fab-text);
    font-family: 'DM Sans', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    border-radius: 18px;
}
#recurso-fabrica *,#recurso-fabrica *::before,#recurso-fabrica *::after{box-sizing:border-box}
#recurso-fabrica *:focus-visible{outline:3px solid var(--fab-focus-ring);outline-offset:4px;box-shadow:0 0 0 6px var(--fab-focus-bg);border-radius:6px}
#recurso-fabrica *:focus:not(:focus-visible){outline:none;box-shadow:none}
#recurso-fabrica button,#recurso-fabrica a{min-height:var(--fab-tap-min);min-width:var(--fab-tap-min)}
#recurso-fabrica .page{position:relative;max-width:880px;margin:0 auto;padding:2rem 1.25rem 3rem}
#recurso-fabrica .hdr{text-align:center;margin-bottom:2rem}
#recurso-fabrica .hdr h2{font-family:'Playfair Display',serif;font-size:clamp(1.75rem,5.5vw,3.2rem);font-weight:900;line-height:1.12;color:var(--fab-text);border-bottom:none;-webkit-text-fill-color:var(--fab-text)}
#recurso-fabrica .em{color:var(--fab-emerald);-webkit-text-fill-color:var(--fab-emerald)}
#recurso-fabrica .sub{margin-top:.45rem;color:var(--fab-text-soft);font-size:clamp(.88rem,2.5vw,1.1rem);font-weight:300;letter-spacing:.4px}
#recurso-fabrica .intro{max-width:660px;margin:0 auto 2.5rem;padding:1.5rem 1.6rem;background:var(--fab-glass);border:1px solid var(--fab-glass-border);border-radius:18px;text-align:center;color:var(--fab-text-mid);font-size:.95rem;line-height:1.8}
#recurso-fabrica .intro strong{color:var(--fab-emerald-soft);font-weight:600}
#recurso-fabrica .discoveries{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:2.5rem}
#recurso-fabrica .disc{border:1px solid var(--fab-glass-border);border-radius:18px;overflow:hidden;background:linear-gradient(168deg,rgba(6,78,59,.32),rgba(2,44,34,.55));transition:box-shadow .35s,border-color .35s}
#recurso-fabrica .disc:has([aria-expanded="true"]){box-shadow:0 4px 30px rgba(16,185,129,.14);border-color:rgba(16,185,129,.35)}
#recurso-fabrica .disc-trigger{display:flex;align-items:center;gap:1rem;width:100%;padding:1.1rem 1.4rem;min-height:80px;border:none;background:none;color:var(--fab-text);cursor:pointer;text-align:left;font-family:inherit;transition:background .25s}
#recurso-fabrica .disc-trigger:hover{background:rgba(16,185,129,.06)}
#recurso-fabrica .disc-vis{flex-shrink:0;width:64px;height:64px;position:relative;display:flex;align-items:center;justify-content:center}
#recurso-fabrica .vinyl{width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,#1a1a1a 18%,transparent 19%),radial-gradient(circle,#333 19%,transparent 20%),repeating-radial-gradient(circle,transparent 24%,rgba(255,255,255,.03) 25%,transparent 26%),radial-gradient(circle,#111 35%,#1a1a1a 55%,#0d0d0d);box-shadow:0 2px 15px rgba(0,0,0,.5),inset 0 0 3px rgba(255,255,255,.05);animation:fab-spin 3s linear infinite;position:relative}
#recurso-fabrica .vinyl::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--fab-gold-light),var(--fab-gold));box-shadow:0 0 6px rgba(185,151,111,.4)}
@keyframes fab-spin{to{transform:rotate(360deg)}}
#recurso-fabrica .tonearm{position:absolute;top:-2px;right:-2px;width:28px;height:3px;background:linear-gradient(90deg,#999,#666);border-radius:2px;transform-origin:right center;transform:rotate(-28deg);box-shadow:0 1px 3px rgba(0,0,0,.4)}
#recurso-fabrica .tonearm::before{content:'';position:absolute;right:-2px;top:-2px;width:7px;height:7px;border-radius:50%;background:#888}
#recurso-fabrica .tonearm::after{content:'';position:absolute;left:-1px;top:-1px;width:5px;height:5px;border-radius:1px;background:#aaa}
#recurso-fabrica .microscope-wrap{width:60px;height:60px;position:relative}
#recurso-fabrica .micro-body{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:8px;height:30px;background:linear-gradient(180deg,#94a3b8,#64748b);border-radius:2px 2px 0 0}
#recurso-fabrica .micro-eyepiece{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:14px;height:8px;background:linear-gradient(180deg,#475569,#334155);border-radius:3px 3px 0 0}
#recurso-fabrica .micro-base{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:32px;height:6px;background:linear-gradient(180deg,#64748b,#475569);border-radius:3px}
#recurso-fabrica .micro-stage{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:22px;height:3px;background:#94a3b8;border-radius:1px}
#recurso-fabrica .micro-particles{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:40px;height:40px}
#recurso-fabrica .micro-p{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--fab-emerald);opacity:0;animation:fab-pfloat 2.5s ease-out infinite}
#recurso-fabrica .micro-p:nth-child(1){left:30%;animation-delay:0s}
#recurso-fabrica .micro-p:nth-child(2){left:55%;animation-delay:.5s;background:var(--fab-emerald-soft)}
#recurso-fabrica .micro-p:nth-child(3){left:70%;animation-delay:1s;width:3px;height:3px}
#recurso-fabrica .micro-p:nth-child(4){left:15%;animation-delay:1.4s;background:var(--fab-emerald-bright);width:3px;height:3px}
#recurso-fabrica .micro-p:nth-child(5){left:45%;animation-delay:.8s;width:5px;height:5px;background:rgba(52,211,153,.6)}
@keyframes fab-pfloat{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-28px) translateX(8px);opacity:0}}
#recurso-fabrica .micro-glow{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.35),transparent 70%);animation:fab-gpulse 2s ease-in-out infinite}
@keyframes fab-gpulse{0%,100%{opacity:.4;transform:translateX(-50%) scale(.9)}50%{opacity:1;transform:translateX(-50%) scale(1.15)}}
#recurso-fabrica .tree-wrap{width:64px;height:64px;position:relative}
#recurso-fabrica .tree-trunk{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:5px;height:22px;background:linear-gradient(180deg,#8B7355,#6B5B45);border-radius:2px}
#recurso-fabrica .tree-trunk::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:16px;height:4px;border-bottom:2px solid #6B5B45;border-radius:0 0 50% 50%}
#recurso-fabrica .canopy{position:absolute;left:50%;border-radius:50%;animation:fab-cbreathe 4s ease-in-out infinite}
#recurso-fabrica .canopy-1{width:38px;height:28px;top:8px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(16,185,129,.5),rgba(6,78,59,.3));animation-delay:0s}
#recurso-fabrica .canopy-2{width:30px;height:22px;top:4px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(52,211,153,.45),rgba(16,185,129,.2));animation-delay:.6s}
#recurso-fabrica .canopy-3{width:20px;height:16px;top:1px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(110,231,183,.4),rgba(52,211,153,.15));animation-delay:1.2s}
@keyframes fab-cbreathe{0%,100%{transform:translateX(-50%) scale(1);opacity:.8}50%{transform:translateX(-50%) scale(1.08);opacity:1}}
#recurso-fabrica .bio-dot{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--fab-emerald-bright);opacity:0;animation:fab-bblink 3s ease-in-out infinite}
#recurso-fabrica .bio-dot:nth-child(5){top:12px;left:18px;animation-delay:0s}
#recurso-fabrica .bio-dot:nth-child(6){top:8px;left:38px;animation-delay:.8s}
#recurso-fabrica .bio-dot:nth-child(7){top:20px;left:42px;animation-delay:1.6s}
#recurso-fabrica .bio-dot:nth-child(8){top:18px;left:14px;animation-delay:2.2s}
#recurso-fabrica .bio-dot:nth-child(9){top:6px;left:28px;animation-delay:.4s}
@keyframes fab-bblink{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:.9;transform:scale(1.2)}}
#recurso-fabrica .disc-info{flex:1;min-width:0}
#recurso-fabrica .disc-cat{display:inline-block;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--fab-emerald);margin-bottom:.1rem}
#recurso-fabrica .disc-name{font-family:'Playfair Display',serif;font-size:clamp(1.15rem,3.5vw,1.5rem);font-weight:700;line-height:1.2;color:var(--fab-text);border-bottom:none;-webkit-text-fill-color:var(--fab-text)}
#recurso-fabrica .disc-work{color:var(--fab-text-soft);font-style:italic;font-size:.88rem}
#recurso-fabrica .disc-arrow{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.04);color:var(--fab-emerald);font-size:.85rem;transition:transform .35s ease,background .25s;min-height:unset;min-width:unset}
#recurso-fabrica [aria-expanded="true"] .disc-arrow{transform:rotate(180deg);background:var(--fab-emerald-glow)}
#recurso-fabrica .disc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease,padding .35s;padding:0 1.5rem}
#recurso-fabrica .disc-panel[aria-hidden="false"]{grid-template-rows:1fr;padding:0 1.5rem 1.5rem}
#recurso-fabrica .disc-panel-inner{overflow:hidden}
#recurso-fabrica .disc-line{height:1px;background:var(--fab-glass-border);margin-bottom:1.2rem}
#recurso-fabrica .story-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--fab-emerald);margin-bottom:.5rem}
#recurso-fabrica .story-text{color:var(--fab-text-mid);font-size:.93rem;line-height:1.8;margin-bottom:1.1rem}
#recurso-fabrica .impact-box{background:rgba(16,185,129,.07);border-left:3px solid var(--fab-emerald);padding:.8rem 1.1rem;border-radius:0 10px 10px 0;margin-bottom:1.1rem}
#recurso-fabrica .impact-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:1.8px;color:var(--fab-emerald-soft);margin-bottom:.3rem}
#recurso-fabrica .impact-text{color:var(--fab-text-mid);font-size:.86rem;line-height:1.6}
#recurso-fabrica .source-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;color:var(--fab-emerald);text-decoration:none;padding:.55rem 1rem;border:1px solid var(--fab-glass-border);border-radius:10px;min-height:var(--fab-tap-min);transition:background .25s,color .25s}
#recurso-fabrica .source-link:hover,#recurso-fabrica .source-link:focus-visible{background:var(--fab-emerald-glow);color:#fff}
#recurso-fabrica .otto-exp{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin:.8rem 0 1.1rem;padding:.7rem 1rem;background:rgba(0,0,0,.2);border-radius:12px}
#recurso-fabrica .otto-heart{font-size:1.15rem;transition:transform .3s}
#recurso-fabrica .otto-heart[data-on="true"]{animation:fab-beat .7s infinite}
@keyframes fab-beat{0%,100%{transform:scale(1.3)}50%{transform:scale(1)}}
#recurso-fabrica .otto-track{width:75px;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
#recurso-fabrica .otto-bar{height:100%;width:0;background:linear-gradient(90deg,var(--fab-emerald),var(--fab-emerald-soft));border-radius:3px;transition:width .75s ease}
#recurso-fabrica .otto-bar[data-on="true"]{width:100%}
#recurso-fabrica .otto-btn{padding:.5rem .9rem;border:1px solid var(--fab-emerald);border-radius:9px;background:none;color:var(--fab-emerald);font-family:inherit;font-size:.68rem;font-weight:600;cursor:pointer;min-height:var(--fab-tap-min);transition:background .2s,color .2s}
#recurso-fabrica .otto-btn:hover,#recurso-fabrica .otto-btn:focus-visible{background:var(--fab-emerald);color:var(--fab-night)}
#recurso-fabrica .tips-section{padding-top:2rem;border-top:1px solid var(--fab-glass-border)}
#recurso-fabrica .tips-title{text-align:center;font-family:'Patrick Hand',cursive;font-size:1.3rem;color:var(--fab-text-mid);letter-spacing:.8px;margin-bottom:1.3rem}
#recurso-fabrica .tips-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem;max-width:620px;margin:0 auto;list-style:none;padding:0}
@media(min-width:580px){#recurso-fabrica .tips-grid{grid-template-columns:repeat(4,1fr)}}
#recurso-fabrica .tip{text-align:center;padding:1rem .6rem;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.04);border-radius:14px}
#recurso-fabrica .tip-icon{font-size:1.5rem;display:block;margin-bottom:.35rem}
#recurso-fabrica .tip h4{font-family:'Patrick Hand',cursive;font-size:.95rem;color:var(--fab-text-high);margin-bottom:.2rem;border-bottom:none;-webkit-text-fill-color:var(--fab-text-high)}
#recurso-fabrica .tip p{font-size:.76rem;color:var(--fab-text-soft);line-height:1.45}
#recurso-fabrica .foot{text-align:center;margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(16,185,129,.08);font-size:.68rem;color:var(--fab-text-soft);letter-spacing:.8px}

/* ================================================= */
/* === PUERTAS ONÍRICAS · INTRO + EPÍLOGO          === */
/* ================================================= */

/* Presentación intro */
.po-intro {
  text-align: center;
  padding: 2.6rem 1.5rem 2.8rem;
}
.po-eyebrow {
  font-family: 'Lato', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #B9976F;
  margin: 0 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}
.po-eyebrow::before,
.po-eyebrow::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 1px;
  background: #B9976F;
  opacity: 0.45;
}
.po-arch {
  display: block;
  margin: 0 auto 1.5rem;
  opacity: 0.82;
}
.po-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #1c1510;
  line-height: 1.15;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.po-subtitle {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #B9976F;
  margin: 0 0 1.9rem;
  letter-spacing: 0.01em;
}
.po-rule {
  width: 4rem;
  height: 1px;
  background: linear-gradient(to right, transparent, #B9976F 40%, transparent);
  margin: 0 auto 1.9rem;
}
.po-body {
  font-family: 'Lato', sans-serif;
  font-size: 1.04rem;
  color: #3d4f5a;
  line-height: 1.8;
  max-width: 540px;
  margin: 0 auto;
}
.po-body em {
  font-style: italic;
  color: #2d6a8f;
  font-family: 'Playfair Display', serif;
}

/* Card 7 centrada en desktop */
@media (min-width: 900px) {
  #puertas-oniricas .dream-door-card[data-door-id="7"] {
    grid-column: 2;
  }
}
@media (max-width: 899px) {
  #puertas-oniricas .dream-door-card[data-door-id="7"] {
    grid-column: auto;
  }
}

/* Epílogo editorial */
#puertas-oniricas .dream-door-epilogue {
  width: min(620px, 86%);
  margin: 3.5rem auto 0;
  padding: 2.4rem 2rem;
  text-align: center;
  border: 1px solid rgba(185, 151, 111, 0.18);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.26);
  box-shadow: none;
}
#puertas-oniricas .dream-door-epilogue svg {
  width: 54px;
  height: auto;
  margin: 0 auto 1.1rem;
  opacity: 0.72;
  display: block;
}
#puertas-oniricas .dream-door-epilogue p {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.75;
  font-style: italic;
  color: rgba(42, 55, 70, 0.85);
}
@media (max-width: 700px) {
  #puertas-oniricas .dream-door-epilogue {
    margin-top: 2rem;
    padding: 2rem 1.35rem;
    border-radius: 18px;
  }
  #puertas-oniricas .dream-door-epilogue p {
    font-size: 1rem;
  }
}

/* =========================================================
   FABRICA - FIX RESPONSIVE MOBILE
   ========================================================= */
@media (max-width: 600px) {
  #recurso-fabrica {
    width: calc(100% - 1.2rem) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
    overflow-x: visible !important;
    border-radius: 18px !important;
  }

  #recurso-fabrica *,
  #recurso-fabrica *::before,
  #recurso-fabrica *::after {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #recurso-fabrica .fabrica-nocturna {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 2.4rem 0.7rem 3rem !important;
    overflow: visible !important;
    border-radius: 18px !important;
  }

  #recurso-fabrica .fn-inner,
  #recurso-fabrica .page,
  #recurso-fabrica .container,
  #recurso-fabrica .fabrica-container,
  #recurso-fabrica .fn-container,
  #recurso-fabrica .card,
  #recurso-fabrica .content,
  #recurso-fabrica .fabrica-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  #recurso-fabrica .fn-header {
    margin-bottom: 1.6rem !important;
    padding: 1.45rem 1rem 1.25rem !important;
    border-radius: 14px !important;
  }

  #recurso-fabrica h2,
  #recurso-fabrica .section-title,
  #recurso-fabrica .fabrica-title,
  #recurso-fabrica .fn-title {
    font-size: clamp(1.25rem, 6vw, 1.65rem) !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  #recurso-fabrica .fn-subtitle {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.2rem !important;
    text-align: center !important;
  }

  #recurso-fabrica .fn-progress-counter {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0.85rem 0.9rem !important;
  }

  #recurso-fabrica .fn-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.95rem !important;
    width: 100% !important;
    overflow: visible !important;
  }

  #recurso-fabrica .fn-card {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 360px !important;
  }

  #recurso-fabrica .fn-card-inner {
    min-height: 360px !important;
  }

  #recurso-fabrica .fn-card-front,
  #recurso-fabrica .fn-card-back {
    padding: 1.15rem 1rem !important;
    overflow: visible !important;
  }

  #recurso-fabrica .fn-icon-wrap {
    min-height: auto !important;
    padding: 0.35rem 0 !important;
  }

  #recurso-fabrica .fn-card-svg {
    width: 64px !important;
    height: 64px !important;
  }

  #recurso-fabrica .fn-card-title {
    font-size: 1.05rem !important;
    line-height: 1.24 !important;
  }

  #recurso-fabrica p,
  #recurso-fabrica li,
  #recurso-fabrica .fn-card-case,
  #recurso-fabrica .fn-card-universal,
  #recurso-fabrica .story-text,
  #recurso-fabrica .impact-text {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    text-align: left !important;
  }

  #recurso-fabrica .fn-card-case,
  #recurso-fabrica .fn-card-universal {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  #recurso-fabrica .tabs,
  #recurso-fabrica .tab-list,
  #recurso-fabrica .fabrica-tabs,
  #recurso-fabrica .fn-modal-progress {
    display: flex !important;
    gap: 0.55rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 0.5rem !important;
    scrollbar-width: none !important;
  }

  #recurso-fabrica .tabs::-webkit-scrollbar,
  #recurso-fabrica .tab-list::-webkit-scrollbar,
  #recurso-fabrica .fabrica-tabs::-webkit-scrollbar,
  #recurso-fabrica .fn-modal-progress::-webkit-scrollbar {
    display: none !important;
  }

  #recurso-fabrica .tab,
  #recurso-fabrica .tab-btn,
  #recurso-fabrica .fabrica-tab,
  #recurso-fabrica .fn-progress-step {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    font-size: 0.72rem !important;
    padding: 0.55rem 0.75rem !important;
  }

  #recurso-fabrica .fn-references {
    padding: 1.35rem 1rem !important;
    overflow: visible !important;
  }

  #recurso-fabrica .fn-ref-list,
  #recurso-fabrica .tips-grid {
    grid-template-columns: 1fr !important;
    gap: 0.7rem !important;
  }

  #recurso-fabrica .fn-modal-overlay {
    padding: 0.6rem !important;
  }

  #recurso-fabrica .fn-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem !important;
    border-radius: 16px !important;
  }
}

/* ── Nav secciones inline: reemplaza unidades al scrollear ── */
@keyframes nav-fade-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.nav-secciones-inline {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  gap: 0;
  grid-column: 1;
  grid-row: 1;
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
  transition: clip-path 0.32s cubic-bezier(0.77, 0, 0.175, 1) 0.06s;
}
.nav-secciones-inline::-webkit-scrollbar { display: none; }

/* Items del inline-nav: mismo lenguaje editorial que nav-unidad */
.nav-secciones-inline .ancla-item {
  display: flex;
  align-items: center;
  height: 62px;
  padding: 0 0.85rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  border-bottom: 2.5px solid transparent;
  color: rgba(28, 21, 16, 0.48);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-secciones-inline .ancla-item:hover {
  color: rgba(28, 21, 16, 0.82);
  border-bottom-color: rgba(185, 151, 111, 0.28);
}

.nav-secciones-inline .ancla-item.activa {
  color: rgba(28, 21, 16, 0.88);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* Estado activo: wipe hacia la izquierda */
.nav-superior.modo-secciones .nav-unidades {
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}
.nav-superior.modo-secciones .nav-secciones-inline {
  clip-path: inset(0 0% 0 0);
  pointer-events: auto;
}
.nav-superior.modo-secciones ~ .nav-anclas-bar {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.nav-unidad.nav-unidad-locked {
  color: rgba(28, 21, 16, 0.34);
  cursor: pointer;
}

.nav-unidad.nav-unidad-locked::after {
  content: "Premium";
  margin-left: 0.45rem;
  padding: 0.1rem 0.34rem;
  border: 1px solid rgba(185, 151, 111, 0.28);
  border-radius: 999px;
  color: #9a713e;
  background: rgba(185, 151, 111, 0.07);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-unidad.nav-unidad-locked:hover {
  color: rgba(138, 104, 64, 0.9);
  border-bottom-color: rgba(185, 151, 111, 0.32);
}

.nav-unidad.nav-unidad-unlocked:not(.activa)::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: 0.45rem;
  border-radius: 999px;
  background: #4FB4B3;
  box-shadow: 0 0 0 3px rgba(79, 180, 179, 0.12);
}

/* Nav temas U1: full width, contenido centrado y activo editorial */
.nav-anclas-bar {
  background: rgba(252, 248, 242, 0.96) !important;
  border-top: 1px solid rgba(185, 151, 111, 0.16) !important;
  border-bottom: 1px solid rgba(185, 151, 111, 0.28) !important;
  box-shadow: 0 10px 24px rgba(40, 52, 65, 0.05) !important;
}

.nav-anclas-inner {
  max-width: 1120px !important;
  margin: 0 auto !important;
  justify-content: flex-start !important;
  padding: 0 1.4rem !important;
}

.nav-anclas-inner .ancla-item,
.nav-secciones-inline .ancla-item {
  color: rgba(28, 21, 16, 0.56);
}

.nav-anclas-inner .ancla-item:hover,
.nav-secciones-inline .ancla-item:hover {
  color: #2F8F8C;
  border-bottom-color: #B9976F;
}

.nav-anclas-inner .ancla-item.activa,
.nav-secciones-inline .ancla-item.activa {
  color: #2F8F8C;
  font-weight: 700;
  border-bottom-color: #B9976F;
}

.roadmap-preview-block {
  scroll-margin-top: 132px;
}

/* Nav unidades: mantiene visibles las 6 unidades con estado Premium */
.nav-superior-inner {
  max-width: 1240px !important;
}

.nav-unidades {
  max-width: none !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
  gap: 0.45rem !important;
  overflow: visible !important;
}

.nav-unidad {
  min-width: auto !important;
  height: 62px !important;
  padding: 0 0.68rem !important;
  white-space: nowrap !important;
  font-size: 0.78rem !important;
}

.nav-unidad.nav-unidad-locked::after {
  margin-left: 0.32rem;
  padding: 0.08rem 0.26rem;
  font-size: 0.46rem;
  letter-spacing: 0.06em;
}

@media (max-width: 980px) {
  .nav-unidades {
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .nav-unidades::-webkit-scrollbar {
    display: none;
  }
}

/* Quiz U1 premium override: editorial financiero + gamificacion sobria */
.quiz-scope {
  --qz-ink: #17130f;
  --qz-muted: #6d6256;
  --qz-paper: #fff7ef;
  --qz-line: rgba(23, 19, 15, .16);
  --qz-gold: #b68b4f;
  --qz-gold-deep: #7a5429;
  --qz-green: #0f8f68;
  --qz-red: #a54958;
}

#evaluacion {
  padding: 3rem 1rem;
  background:
    linear-gradient(90deg, rgba(23,19,15,.035) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(180deg, rgba(255,247,239,.38), rgba(244,227,208,.35));
}

.qz-wrap {
  max-width: 900px;
  padding: 0;
  overflow: hidden;
  color: var(--qz-ink);
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,247,239,.92)), var(--qz-paper);
  border: 1px solid var(--qz-line);
  border-radius: 8px;
  box-shadow: 0 22px 55px rgba(23, 19, 15, .14);
}

.qz-wrap::before {
  content: "EL CAMINO INTERIOR · EVALUACIÓN U1";
  display: block;
  padding: .72rem 1.25rem;
  color: var(--qz-paper);
  background: var(--qz-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: left;
}

.qz-intro,
.qz-results,
.qz-card {
  padding: 2rem;
}

.qz-intro {
  text-align: left;
}

.qz-intro-icon {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 1.1rem;
  color: var(--qz-ink);
  background: linear-gradient(135deg, #f7dca9, #b68b4f);
  border: 1px solid rgba(23, 19, 15, .25);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px rgba(255,247,239,.45), 0 14px 28px rgba(122,84,41,.22);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .02em;
  animation: qz-premium-pulse 3.6s ease infinite;
}

.qz-intro-title,
.qz-header-title,
.qz-results-title,
.qz-question,
.qz-rv-title {
  color: var(--qz-ink);
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}

.qz-intro-title {
  max-width: 720px;
  font-size: 2rem;
  line-height: 1.08;
  margin-bottom: .75rem;
}

.qz-intro-desc {
  max-width: 700px;
  margin: 0 0 1.6rem;
  color: var(--qz-muted);
  font-size: 1rem;
}

.qz-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 0;
  margin: 1.5rem 0;
  border: 1px solid var(--qz-line);
  background: rgba(255, 255, 255, .42);
}

.qz-stat {
  min-height: 92px;
  padding: 1rem .9rem;
  text-align: left;
  border-right: 1px solid var(--qz-line);
}

.qz-stat:last-child {
  border-right: 0;
}

.qz-stat strong {
  color: var(--qz-ink);
  font-size: 1.25rem;
  line-height: 1.15;
}

.qz-stat span {
  display: block;
  margin-top: .5rem;
  color: var(--qz-gold-deep);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.qz-badges {
  justify-content: flex-start;
  gap: .45rem;
  margin-bottom: 1.7rem;
}

.qz-badge {
  border-radius: 3px;
  border: 1px solid currentColor;
  background: transparent;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.qz-b1 { color: #7f622a; background: rgba(182,139,79,.1); }
.qz-b2 { color: #26384f; background: rgba(38,56,79,.08); }
.qz-b3 { color: #8f3447; background: rgba(165,73,88,.08); }
.qz-bc { color: var(--qz-muted); background: rgba(23,19,15,.035); }

.qz-header-title {
  padding: 1.3rem 2rem .4rem;
  margin: 0;
  text-align: left;
  font-size: 1.2rem;
}

.qz-progress {
  height: 9px;
  margin: .85rem 2rem .5rem;
  border-radius: 0;
  background: rgba(23, 19, 15, .1);
}

.qz-progress-fill {
  border-radius: 0;
  background: linear-gradient(90deg, var(--qz-gold-deep), var(--qz-gold), #e7c27c);
  box-shadow: 0 0 18px rgba(182,139,79,.32);
}

.qz-meta {
  margin: 0 2rem 1rem;
  color: var(--qz-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.qz-card {
  min-height: 300px;
  margin: 0;
  border-top: 1px solid var(--qz-line);
  border-bottom: 1px solid var(--qz-line);
  background: rgba(255, 255, 255, .38);
}

.qz-question {
  max-width: 760px;
  font-size: 1.35rem;
  line-height: 1.35;
}

.qz-options,
.qz-scale {
  gap: .65rem;
}

.qz-opt,
.qz-sc,
.qz-tf button,
.qz-input {
  color: var(--qz-ink);
  background: rgba(255, 255, 255, .64);
  border: 1px solid var(--qz-line);
  border-radius: 6px;
  font-family: "Lato", system-ui, sans-serif;
  box-shadow: 0 1px 0 rgba(255,255,255,.65) inset;
}

.qz-opt:hover:not(:disabled),
.qz-sc:hover:not(:disabled),
.qz-tf button:hover:not(:disabled) {
  background: #fffaf5;
  border-color: rgba(122, 84, 41, .48);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(23,19,15,.08);
}

.qz-opt-letter,
.qz-sc-num {
  background: var(--qz-ink);
  color: var(--qz-paper);
  border-radius: 3px;
  font-family: Georgia, "Times New Roman", serif;
}

.qz-correct {
  border-color: rgba(15,143,104,.72) !important;
  background: rgba(15,143,104,.1) !important;
}

.qz-correct .qz-opt-letter,
.qz-sc.qz-correct .qz-sc-num {
  background: var(--qz-green);
}

.qz-wrong {
  border-color: rgba(165,73,88,.72) !important;
  background: rgba(165,73,88,.1) !important;
}

.qz-wrong .qz-opt-letter {
  background: var(--qz-red);
}

.qz-fb {
  border-left: 0;
  border-top: 3px solid var(--qz-gold);
  border-radius: 4px;
  background: rgba(255,255,255,.58);
  color: var(--qz-muted);
  font-style: normal;
}

.qz-fb-ok { border-top-color: var(--qz-green); }
.qz-fb-no { border-top-color: var(--qz-red); }

.qz-actions {
  padding: 1.2rem 2rem 0;
  margin: 0;
}

.qz-btn {
  border-radius: 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.qz-btn-p,
.qz-btn-g {
  color: var(--qz-paper);
  background: var(--qz-ink);
  box-shadow: 0 10px 24px rgba(23,19,15,.18);
}

.qz-btn-p:hover:not(:disabled),
.qz-btn-g:hover {
  background: #2a2119;
  box-shadow: 0 14px 28px rgba(23,19,15,.24);
}

.qz-btn-s {
  color: var(--qz-ink);
  border: 1px solid var(--qz-line);
  background: rgba(255,255,255,.38);
}

.qz-btn-s:hover:not(:disabled) {
  border-color: var(--qz-gold-deep);
  color: var(--qz-gold-deep);
}

.qz-dots {
  padding: 1.15rem 2rem 1.7rem;
  margin: 0;
}

.qz-dot {
  width: 22px;
  height: 6px;
  border-radius: 999px;
}

.qz-results {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.qz-results-title {
  font-size: 1.6rem;
  text-align: left;
}

.qz-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid rgba(255,247,239,.6);
}

.qz-circle-num {
  font-size: 2.6rem;
}

.qz-hi { background: radial-gradient(circle at 30% 25%, #4bd0a5, var(--qz-green)); }
.qz-mid { background: radial-gradient(circle at 30% 25%, #dcb36f, var(--qz-gold-deep)); }
.qz-low { background: radial-gradient(circle at 30% 25%, #d78291, var(--qz-red)); }

.qz-msg,
.qz-breakdown,
.qz-review {
  border: 1px solid var(--qz-line);
  border-radius: 6px;
  background: rgba(255,255,255,.54);
}

.qz-msg {
  color: var(--qz-ink);
  text-align: left;
}

.qz-msg-hi { border-left: 4px solid var(--qz-green); }
.qz-msg-mid { border-left: 4px solid var(--qz-gold); }
.qz-msg-low { border-left: 4px solid var(--qz-red); }

.qz-breakdown {
  background: rgba(255,255,255,.48);
}

.qz-cat-track {
  height: 10px;
  border-radius: 0;
  background: rgba(23,19,15,.1);
}

.qz-cat-fill {
  border-radius: 0;
}

.qz-rv-item {
  border: 1px solid rgba(23,19,15,.08);
  border-radius: 4px;
}

.qz-rv-mark {
  min-width: 34px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 3px;
  color: var(--qz-paper);
  background: var(--qz-muted);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.qz-rv-ok .qz-rv-mark {
  background: var(--qz-green);
}

.qz-rv-no .qz-rv-mark {
  background: var(--qz-red);
}

@keyframes qz-premium-pulse {
  0%, 100% { transform: translateY(0); box-shadow: inset 0 0 0 5px rgba(255,247,239,.45), 0 14px 28px rgba(122,84,41,.22); }
  50% { transform: translateY(-2px); box-shadow: inset 0 0 0 5px rgba(255,247,239,.58), 0 18px 34px rgba(122,84,41,.28); }
}

@media (max-width: 720px) {
  .qz-wrap::before {
    font-size: .6rem;
    line-height: 1.35;
  }
  .qz-intro,
  .qz-results,
  .qz-card {
    padding: 1.25rem;
  }
  .qz-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .qz-stat:nth-child(2) {
    border-right: 0;
  }
  .qz-stat:nth-child(1),
  .qz-stat:nth-child(2) {
    border-bottom: 1px solid var(--qz-line);
  }
  .qz-header-title,
  .qz-progress,
  .qz-meta,
  .qz-actions,
  .qz-dots {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    padding-left: 0;
    padding-right: 0;
  }
  .qz-intro-title {
    font-size: 1.55rem;
  }
  .qz-question {
    font-size: 1.12rem;
  }
}

/* Ajustes finales U1: anclas, rail, bienvenida y tarjetas intro */
section[id],
div[id],
article[id] {
  scroll-margin-top: 110px !important;
}

.roadmap-preview-block {
  scroll-margin-top: 132px !important;
}

.barra-editorial-nuclear,
.side-rail,
.rail-editorial,
.barra-lateral-editorial {
  opacity: 0.45 !important;
}

@media (max-width: 1200px) {
  .barra-editorial-nuclear,
  .side-rail,
  .rail-editorial,
  .barra-lateral-editorial {
    display: none !important;
  }
}

.orientacion-card,
.work-card,
.info-card,
.recorrido-card {
  min-height: 124px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#bienvenida .section-title {
  display: inline-block !important;
  width: auto !important;
  max-width: min(100%, 420px) !important;
  padding-bottom: 0.42rem !important;
  border-bottom: 2px solid rgba(185, 151, 111, 0.85) !important;
}

#bienvenida .section-title::after,
.tarjeta-bienvenida .section-title::after {
  width: 56% !important;
  max-width: 420px !important;
}

#bienvenida .quote-box,
.tarjeta-bienvenida .quote-box,
.quote-box.cita-editorial,
.cita-editorial {
  background: rgba(185, 151, 111, 0.10) !important;
  border-left: 4px solid rgba(185, 151, 111, 0.75) !important;
  border-radius: 10px !important;
}

/* Nav superior: unidades más distribuidas, con presencia institucional liviana */
.nav-superior-inner {
  max-width: 1180px !important;
  width: min(1180px, calc(100% - 4rem)) !important;
  padding-inline: 0 !important;
  gap: 1.25rem !important;
}

.nav-superior:not(.modo-secciones) .nav-unidades {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 0.28rem !important;
  max-width: none !important;
  margin-right: 0.5rem !important;
  overflow: visible !important;
}

.nav-superior:not(.modo-secciones) .nav-unidad {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 62px !important;
  padding: 0 0.35rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: #7a7470 !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid transparent !important;
  border-right: 1px solid transparent !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
}

.nav-superior:not(.modo-secciones) .nav-unidad:hover {
  color: rgba(138, 90, 40, 0.9) !important;
  background: rgba(185, 151, 111, 0.035) !important;
  border-bottom-color: rgba(185, 151, 111, 0.24) !important;
}

.nav-superior:not(.modo-secciones) .nav-unidad.activa,
.nav-superior:not(.modo-secciones) .nav-unidad.active {
  color: #8a5a28 !important;
  font-weight: 700 !important;
  background: rgba(185, 151, 111, 0.06) !important;
  border-left-color: rgba(185, 151, 111, 0.35) !important;
  border-right-color: rgba(185, 151, 111, 0.35) !important;
  border-bottom-color: rgba(185, 151, 111, 0.72) !important;
}

.nav-superior:not(.modo-secciones) .nav-unidad.nav-unidad-locked::after {
  flex-shrink: 0 !important;
  margin-left: 0.36rem !important;
}

.nav-superior .lang-globe {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
}

@media (max-width: 980px) {
  .nav-superior-inner {
    width: 100% !important;
    padding-inline: 0.75rem !important;
    gap: 0.75rem !important;
  }

  .nav-superior:not(.modo-secciones) .nav-unidades {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .nav-superior:not(.modo-secciones) .nav-unidades::-webkit-scrollbar {
    display: none !important;
  }

  .nav-superior:not(.modo-secciones) .nav-unidad {
    flex: 0 0 auto !important;
    min-width: 7.2rem !important;
    padding: 0 0.7rem !important;
  }
}

/* Ajuste final portada U1: cajón con más cuerpo editorial */
.header-unidad-premium,
.hero.header-unidad-premium {
  padding-top: 50px !important;
  padding-bottom: 64px !important;
}

.header-unidad-premium .hero-content,
.hero.header-unidad-premium .hero-content,
.wrap.hero-content {
  padding-top: 10px !important;
}

section.identidad,
.tarjeta-identidad-onirica {
  width: min(860px, 92%) !important;
  max-width: 860px !important;
  min-height: 295px !important;
  margin: 34px auto 0 !important;
  padding: 46px 56px 42px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 0 !important;
  background: rgba(255, 255, 255, 0.74) !important;
  border: 1px solid rgba(185, 151, 111, 0.22) !important;
  border-radius: 22px !important;
  box-shadow:
    0 18px 44px rgba(20, 35, 45, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  position: relative !important;
}

section.identidad::before,
.tarjeta-identidad-onirica::before {
  content: "" !important;
  position: static !important;
  display: block !important;
  width: 58px !important;
  height: 3px !important;
  margin: -2px auto 24px !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    rgba(185, 151, 111, 0.08),
    rgba(185, 151, 111, 0.9),
    rgba(185, 151, 111, 0.08)
  ) !important;
  transform: none !important;
}

section.identidad .titulo-menor,
.tarjeta-identidad-onirica h2,
.tarjeta-identidad-onirica .identidad-titulo {
  margin: 0 0 8px !important;
  color: rgba(30, 42, 58, 0.58) !important;
}

section.identidad .pregunta-central,
section.identidad #pregunta-onirica,
.tarjeta-identidad-onirica h3,
.tarjeta-identidad-onirica .identidad-pregunta {
  margin: 0 0 26px !important;
  color: #3b9994 !important;
}

section.identidad .identidad-meta {
  margin: 0 0 36px !important;
  color: rgba(185, 151, 111, 0.9) !important;
  letter-spacing: 0.16em !important;
}

section.identidad .cta-explorar,
.tarjeta-identidad-onirica .cta-explorar {
  color: rgba(85, 98, 115, 0.58) !important;
  letter-spacing: 0.18em !important;
}

@media (max-width: 900px) {
  .header-unidad-premium,
  .hero.header-unidad-premium {
    padding-top: 36px !important;
    padding-bottom: 48px !important;
  }

  section.identidad,
  .tarjeta-identidad-onirica {
    width: min(92%, 720px) !important;
    min-height: 250px !important;
    padding: 36px 28px 34px !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 640px) {
  section.identidad,
  .tarjeta-identidad-onirica {
    padding: 34px 22px 32px !important;
  }
}

/* Nav interno U1: ajuste para 12 temas */
.nav-anclas-inner {
  max-width: 1220px !important;
  justify-content: center !important;
  padding: 0 1rem !important;
}

.nav-anclas-inner .ancla-item {
  padding-left: 0.95rem !important;
  padding-right: 0.95rem !important;
  font-size: 0.82rem !important;
}

.nav-secciones-inline .ancla-item {
  padding-left: 0.72rem !important;
  padding-right: 0.72rem !important;
  font-size: 0.78rem !important;
}

.nav-anclas-bar,
.nav-secciones-inline {
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.nav-anclas-bar::-webkit-scrollbar,
.nav-secciones-inline::-webkit-scrollbar {
  display: none !important;
}


/* =========================================================
   FABRICA NOCTURNA CSS INTEGRADO
   Fuente: fabrica-nocturna.css
   ========================================================= */
/* ============================================================
   FÁBRICA NOCTURNA — Sueños Universales
   Sección integrada (no iframe). Todo scopeado bajo .fabrica-nocturna.
   Paleta nocturna verde #0B3D34 (no choca con tarjeta de conceptos).
   ============================================================ */

.fabrica-nocturna {
  /* tokens locales — no contaminan el resto de la U1 */
  --fn-base:           #0B3D34;
  --fn-base-mid:       #082B25;
  --fn-base-deep:      #051A16;

  --fn-psych-green:    #0a8b7f;
  --fn-psych-light:    #1fbfa8;
  --fn-psych-glow:     rgba(31, 191, 168, 0.20);
  --fn-cyan:           #00d9ff;
  --fn-cyan-dark:      #0099cc;
  --fn-cyan-glow:      rgba(0, 217, 255, 0.15);

  --fn-billie-dark:    #0d0d0d;
  --fn-billie-green:   #1a3f3c;
  --fn-glitch-red:     #ff006e;

  --fn-text-high:      #f0f9f8;
  --fn-text-mid:       rgba(240, 249, 248, 0.75);
  --fn-text-soft:      rgba(240, 249, 248, 0.50);

  --fn-card-h:         440px;

  /* container / atmósfera */
  position: relative;
  margin: 0;
  padding: 4rem 1.5rem 5rem;
  background: linear-gradient(180deg, var(--fn-base-deep) 0%, var(--fn-base-mid) 40%, var(--fn-base-deep) 100%) !important;
  color: var(--fn-text-high);
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.6;
  overflow: hidden;
  isolation: isolate;

  /* neutraliza reglas globales de section{} que puedan colisionar */
  max-width: 100%;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* halo sutil arriba para suavizar el corte con la sección anterior */
.fabrica-nocturna::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 200px;
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 217, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.fabrica-nocturna .fn-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
}

/* ============================================================
   HEADER
   ============================================================ */
.fabrica-nocturna .fn-header {
  text-align: center;
  margin-bottom: 3.5rem;
  background: rgba(5, 26, 22, 0.55);
  border-radius: 14px;
  padding: 2.4rem 2rem 2rem;
}

.fabrica-nocturna .fn-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 1rem;
  background: linear-gradient(135deg, var(--fn-cyan) 20%, var(--fn-psych-light) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fabrica-nocturna .fn-subtitle {
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  color: var(--fn-text-mid);
  max-width: 680px;
  margin: 0 auto 2rem;
  line-height: 1.8;
}

.fabrica-nocturna .fn-progress-counter {
  display: inline-block;
  min-width: 320px;
  max-width: 420px;
  padding: 1rem 1.5rem;
  background: rgba(10, 139, 127, 0.10);
  border-radius: 14px;
  border: 1px solid var(--fn-psych-glow);
  margin: 0 auto;
}

.fabrica-nocturna .fn-counter-text {
  display: block;
  font-weight: 700;
  color: var(--fn-cyan);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.fabrica-nocturna .fn-progress-bar {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.fabrica-nocturna .fn-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--fn-psych-green), var(--fn-cyan));
  border-radius: 3px;
  transition: width 0.7s cubic-bezier(0.25, 1, 0.25, 1);
}

/* ============================================================
   GRID
   ============================================================ */
.fabrica-nocturna .fn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  align-items: start;
}

@media (max-width: 900px) {
  .fabrica-nocturna .fn-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .fabrica-nocturna .fn-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CARD
   ============================================================ */
.fabrica-nocturna .fn-card {
  perspective: 1200px;
  height: var(--fn-card-h);
  cursor: pointer;
  outline: none;
  position: relative;
}

.fabrica-nocturna .fn-card:focus-visible .fn-card-inner {
  outline: 2px solid var(--fn-cyan);
  outline-offset: 4px;
  border-radius: 18px;
}

.fabrica-nocturna .fn-card.is-recognized::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--fn-psych-light), 0 0 20px rgba(31, 191, 168, 0.30);
}

/* EPICENTRO (Billie / parálisis) */
.fabrica-nocturna .fn-card.epicentro {
  position: relative;
  z-index: 5;
}

@media (min-width: 901px) {
  .fabrica-nocturna .fn-card.epicentro {
    transform: scale(1.05);
    filter: drop-shadow(0 0 28px rgba(255, 0, 110, 0.25));
  }
}

/* INNER (flip container) */
.fabrica-nocturna .fn-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1);
  border-radius: 18px;
}

.fabrica-nocturna .fn-card-inner.flipped {
  transform: rotateY(180deg);
}

/* CARAS COMPARTIDAS */
.fabrica-nocturna .fn-card-front,
.fabrica-nocturna .fn-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 18px;
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 217, 255, 0.18);
  overflow: hidden;
}

/* FRONT — base */
.fabrica-nocturna .fn-card-front {
  background:
    linear-gradient(145deg, rgba(10, 139, 127, 0.18) 0%, rgba(8, 43, 37, 0.75) 100%);
  backdrop-filter: blur(10px);
  justify-content: space-between;
  text-align: center;
}

.fabrica-nocturna .fn-card-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 217, 255, 0.06) 0%, transparent 70%);
  border-radius: inherit;
  pointer-events: none;
}

/* FRONT — Billie */
.fabrica-nocturna .billie-front {
  background:
    linear-gradient(145deg, rgba(13, 13, 13, 0.95) 0%, rgba(26, 63, 60, 0.70) 100%);
  border: 1.5px solid var(--fn-glitch-red);
}

.fabrica-nocturna .billie-front::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 0, 110, 0.08) 0%, transparent 70%);
}

/* BACK */
.fabrica-nocturna .fn-card-back {
  transform: rotateY(180deg);
  background:
    linear-gradient(145deg, rgba(0, 217, 255, 0.07) 0%, rgba(8, 43, 37, 0.85) 100%);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 217, 255, 0.22);
  justify-content: center;
  gap: 1.2rem;
}

.fabrica-nocturna .billie-back {
  background:
    linear-gradient(145deg, rgba(13, 13, 13, 0.97) 0%, rgba(255, 0, 110, 0.06) 100%);
  border: 1.5px solid var(--fn-glitch-red);
}

/* ============================================================
   CARD HEADER ROW
   ============================================================ */
.fabrica-nocturna .fn-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.fabrica-nocturna .fn-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fn-cyan);
}

.fabrica-nocturna .fn-year {
  font-size: 0.72rem;
  color: var(--fn-text-soft);
  font-style: italic;
}

.fabrica-nocturna .fn-recognized-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--fn-psych-green);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  flex-shrink: 0;
}

.fabrica-nocturna .fn-recognized-badge[hidden] { display: none; }

/* ============================================================
   ÍCONOS DE TARJETA + ANIMACIONES
   ============================================================ */
.fabrica-nocturna .fn-icon-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
}

.fabrica-nocturna .fn-card-svg {
  width: 80px;
  height: 80px;
  overflow: visible;
}

/* notas musicales */
.fabrica-nocturna .fn-note { fill: var(--fn-cyan); }
.fabrica-nocturna .fn-note-1 { animation: fnNoteFloat1 3s ease-in-out infinite; }
.fabrica-nocturna .fn-note-2 { animation: fnNoteFloat2 3.4s ease-in-out infinite; }
.fabrica-nocturna .fn-note-3 { animation: fnNoteFloat3 2.8s ease-in-out infinite; }

@keyframes fnNoteFloat1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes fnNoteFloat2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes fnNoteFloat3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* caída */
.fabrica-nocturna .fn-falling-svg { animation: fnFallCycle 2.2s ease-in-out infinite; }
@keyframes fnFallCycle {
  0% { transform: translateY(-18px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(20px); opacity: 0; }
}

/* loop */
.fabrica-nocturna .fn-loop-svg { animation: fnLoopSpin 3s linear infinite; transform-origin: 40px 40px; }
@keyframes fnLoopSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* iridiscente */
.fabrica-nocturna .fn-iridescent-svg { animation: fnIridescent 4s ease-in-out infinite; }
@keyframes fnIridescent {
  0%,100% { filter: hue-rotate(0deg) drop-shadow(0 0 6px rgba(0,217,255,0.4)); }
  50%     { filter: hue-rotate(50deg) drop-shadow(0 0 14px rgba(0,217,255,0.7)); }
}

/* glitch */
.fabrica-nocturna .fn-glitch-wrap { position: relative; }
.fabrica-nocturna .fn-glitch-svg { animation: fnGlitchPulse 1.6s ease-in-out infinite; }
@keyframes fnGlitchPulse {
  0%,100% { transform: scale(1) skew(0deg);   filter: drop-shadow(0 0 0 transparent); }
  25%     { transform: scale(1.06) skew(-2deg); filter: drop-shadow(2px 2px 8px rgba(255,0,110,0.5)); }
  50%     { transform: scale(0.97) skew(2deg);  filter: drop-shadow(-2px -2px 8px rgba(0,217,255,0.5)); }
  75%     { transform: scale(1.03) skew(-1deg); filter: drop-shadow(0 0 12px rgba(255,0,110,0.4)); }
}

/* ============================================================
   CARD TEXT
   ============================================================ */
.fabrica-nocturna .fn-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fn-text-high);
  line-height: 1.3;
  margin: 0 0 0.4rem;
}

.fabrica-nocturna .billie-title {
  color: var(--fn-glitch-red);
  font-style: italic;
}

.fabrica-nocturna .fn-billie-marker {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--fn-cyan);
  font-style: normal;
  font-family: 'DM Sans', sans-serif;
  margin-top: 0.25rem;
  animation: fnMarkerBlink 1.3s ease-in-out infinite;
}

@keyframes fnMarkerBlink { 0%,100%{opacity:1} 50%{opacity:0.35} }

.fabrica-nocturna .fn-card-case {
  font-size: 0.82rem;
  color: var(--fn-text-mid);
  line-height: 1.5;
  margin: 0 0 0.35rem;
  font-style: italic;
}

.fabrica-nocturna .fn-card-universal {
  font-size: 0.8rem;
  color: var(--fn-text-soft);
  line-height: 1.4;
  margin: 0;
}

.fabrica-nocturna .billie-universal {
  color: var(--fn-cyan);
  font-weight: 500;
  font-style: italic;
}

/* ============================================================
   HISTORIAN BADGE
   ============================================================ */
.fabrica-nocturna .fn-historian-badge {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.fabrica-nocturna .fn-historian-name {
  font-size: 0.68rem;
  color: var(--fn-text-soft);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ============================================================
   BACK CONTENT
   ============================================================ */
.fabrica-nocturna .fn-back-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.fabrica-nocturna .fn-back-question {
  font-size: 1rem;
  font-style: italic;
  color: var(--fn-text-mid);
  line-height: 1.65;
  font-family: 'Playfair Display', serif;
  margin: 0;
}

.fabrica-nocturna .fn-cta-modal {
  padding: 0.8rem 1.5rem;
  background: linear-gradient(90deg, var(--fn-psych-green), var(--fn-cyan));
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 46px;
  font-family: inherit;
  letter-spacing: 0.02em;
}

.fabrica-nocturna .fn-cta-modal:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 217, 255, 0.35);
}

.fabrica-nocturna .billie-cta {
  background: linear-gradient(90deg, var(--fn-glitch-red), #ff3366);
  box-shadow: 0 4px 16px rgba(255, 0, 110, 0.3);
}

.fabrica-nocturna .billie-cta:hover {
  box-shadow: 0 8px 28px rgba(255, 0, 110, 0.45);
}

.fabrica-nocturna .fn-back-hint {
  font-size: 0.7rem;
  color: var(--fn-text-soft);
  text-align: center;
  line-height: 1.5;
}

/* ============================================================
   REFERENCIAS — bloque "Para profundizar"
   ============================================================ */
.fabrica-nocturna .fn-references {
  margin-top: 4rem;
  padding: 2rem 1.5rem;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 217, 255, 0.12);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}

.fabrica-nocturna .fn-ref-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--fn-text-high);
  text-align: center;
  margin: 0 0 0.4rem;
}

.fabrica-nocturna .fn-ref-subtitle {
  font-size: 0.85rem;
  color: var(--fn-text-soft);
  text-align: center;
  margin: 0 0 1.8rem;
  font-style: italic;
}

.fabrica-nocturna .fn-ref-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.5rem;
}

@media (max-width: 700px) {
  .fabrica-nocturna .fn-ref-list { grid-template-columns: 1fr; }
}

.fabrica-nocturna .fn-ref-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  background: rgba(0, 0, 0, 0.18);
  border-left: 2px solid var(--fn-psych-green);
  border-radius: 0 8px 8px 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.fabrica-nocturna .fn-ref-item:hover {
  border-left-color: var(--fn-cyan);
  background: rgba(0, 0, 0, 0.28);
}

.fabrica-nocturna .fn-ref-item.is-billie {
  border-left-color: var(--fn-glitch-red);
}

.fabrica-nocturna .fn-ref-dream {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--fn-text-high);
  margin-bottom: 0.15rem;
}

.fabrica-nocturna .fn-ref-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--fn-text-mid);
  text-decoration: none;
  padding: 0.18rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
  width: fit-content;
}

.fabrica-nocturna .fn-ref-link:hover,
.fabrica-nocturna .fn-ref-link:focus-visible {
  color: var(--fn-cyan);
  border-bottom-color: var(--fn-cyan);
  outline: none;
}

.fabrica-nocturna .fn-ref-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
  opacity: 0.85;
}

/* ============================================================
   MODAL
   ============================================================ */
.fabrica-nocturna .fn-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 12, 10, 0.88);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.fabrica-nocturna .fn-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.fabrica-nocturna .fn-modal-overlay[hidden] {
  display: none;
}

.fabrica-nocturna .fn-modal-content {
  position: relative;
  background: linear-gradient(145deg, #0d2a26 0%, #082018 100%);
  border: 1px solid rgba(0, 217, 255, 0.22);
  border-radius: 24px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(0, 217, 255, 0.1);
  animation: fnModalSlideIn 0.35s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  outline: none;
}

@keyframes fnModalSlideIn {
  from { transform: translateY(32px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.fabrica-nocturna .fn-modal-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: var(--fn-text-mid);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-family: inherit;
}

.fabrica-nocturna .fn-modal-close:hover {
  background: rgba(255, 0, 110, 0.15);
  border-color: var(--fn-glitch-red);
  color: var(--fn-glitch-red);
}

.fabrica-nocturna .fn-modal-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-right: 2rem;
}

.fabrica-nocturna .fn-modal-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 900;
  margin: 0;
  background: linear-gradient(135deg, var(--fn-cyan), var(--fn-psych-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.25;
}

.fabrica-nocturna .billie-modal-title {
  background: linear-gradient(135deg, var(--fn-glitch-red), #ff6699) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.fabrica-nocturna .fn-modal-progress {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.fabrica-nocturna .fn-progress-step {
  flex: 1;
  min-width: 80px;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fn-text-soft);
  text-align: center;
  letter-spacing: 0.02em;
  transition: all 0.25s ease;
}

.fabrica-nocturna .fn-progress-step.active {
  background: rgba(0, 217, 255, 0.12);
  border-color: var(--fn-cyan);
  color: var(--fn-cyan);
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.2);
}

.fabrica-nocturna .fn-progress-step.done {
  background: rgba(10, 139, 127, 0.15);
  border-color: var(--fn-psych-green);
  color: var(--fn-psych-light);
}

.fabrica-nocturna .fn-modal-body {
  position: relative;
  min-height: 220px;
}

.fabrica-nocturna .fn-modal-step {
  display: none;
  flex-direction: column;
  gap: 1rem;
  animation: fnStepIn 0.3s ease forwards;
}

.fabrica-nocturna .fn-modal-step.active {
  display: flex;
}

@keyframes fnStepIn {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.fabrica-nocturna .fn-step-icon {
  font-size: 2.5rem;
  line-height: 1;
}

.fabrica-nocturna .fn-step-heading {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fn-text-high);
  line-height: 1.35;
  margin: 0;
}

.fabrica-nocturna .fn-step-body {
  font-size: 0.95rem;
  color: var(--fn-text-mid);
  line-height: 1.8;
  margin: 0;
}

.fabrica-nocturna .fn-modal-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.fabrica-nocturna .fn-btn-secondary,
.fabrica-nocturna .fn-btn-primary,
.fabrica-nocturna .fn-btn-finish {
  padding: 0.7rem 1.5rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  min-height: 44px;
  border: none;
}

.fabrica-nocturna .fn-btn-secondary {
  padding: 0.7rem 1.3rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--fn-text-mid);
  font-weight: 600;
}

.fabrica-nocturna .fn-btn-secondary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.fabrica-nocturna .fn-btn-secondary:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--fn-text-high);
}

.fabrica-nocturna .fn-btn-primary {
  background: linear-gradient(90deg, var(--fn-psych-green), var(--fn-cyan));
  color: #fff;
}

.fabrica-nocturna .fn-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 217, 255, 0.35);
}

.fabrica-nocturna .fn-btn-finish {
  background: linear-gradient(90deg, #00c853, var(--fn-psych-light));
  color: #fff;
  animation: fnFinishPulse 1.5s ease-in-out infinite;
}

.fabrica-nocturna .fn-btn-finish[hidden] { display: none; }

@keyframes fnFinishPulse {
  0%,100% { box-shadow: 0 4px 16px rgba(0, 200, 83, 0.30); }
  50%     { box-shadow: 0 4px 28px rgba(0, 200, 83, 0.55); }
}

.fabrica-nocturna .fn-btn-finish:hover {
  transform: translateY(-1px) scale(1.02);
}

/* scrollbar custom */
.fabrica-nocturna .fn-modal-content::-webkit-scrollbar { width: 5px; }
.fabrica-nocturna .fn-modal-content::-webkit-scrollbar-track { background: transparent; }
.fabrica-nocturna .fn-modal-content::-webkit-scrollbar-thumb {
  background: rgba(0, 217, 255, 0.25);
  border-radius: 3px;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fabrica-nocturna *,
  .fabrica-nocturna *::before,
  .fabrica-nocturna *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fabrica-nocturna .fn-card-inner { transition: transform 0.001ms; }
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 900px) {
  .fabrica-nocturna .fn-card.epicentro {
    transform: none;
    filter: none;
  }
}

@media (max-width: 520px) {
  .fabrica-nocturna { --fn-card-h: 400px; padding: 3.5rem 1rem 4rem; }
  .fabrica-nocturna .fn-modal-content { padding: 1.5rem; }
  .fabrica-nocturna .fn-modal-footer { flex-direction: column; }
  .fabrica-nocturna .fn-btn-secondary,
  .fabrica-nocturna .fn-btn-primary,
  .fabrica-nocturna .fn-btn-finish { width: 100%; text-align: center; }
  .fabrica-nocturna .fn-progress-step { font-size: 0.65rem; }
}

/* focus visible */
.fabrica-nocturna :focus-visible {
  outline: 2px solid var(--fn-cyan);
  outline-offset: 3px;
}

.fabrica-nocturna button:focus-visible {
  outline: 2px solid var(--fn-cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Datos curiosos: respiración editorial antes del diario */
section#datos-curiosos .section-title {
  margin-bottom: 1.4rem !important;
}

#diario-suenos {
  margin-top: 4.5rem !important;
}

#diario-suenos .mito-marker {
  color: #b9976f !important;
  font-weight: 700 !important;
  margin-right: 0.35rem !important;
}

#diario-suenos .exercise-box {
  border-left: 3px solid #b9976f !important;
  background: #fbf8f3 !important;
}

#bloque-diario .diario-icono {
  width: 34px;
  height: 34px;
  margin: 0 auto 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.14);
  color: #ffffff;
  font-size: 1.1rem;
  font-family: 'Playfair Display', serif;
}

#bloque-diario .diario-premium h3 {
  margin-bottom: 0.25rem;
}

#bloque-diario .diario-premium p {
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
  opacity: 0.86;
}

#bloque-diario .diario-accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.35);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#bloque-diario .diario-chevron {
  display: none !important;
}

/* Ajustes editoriales finales U1: rail, anclas, bienvenida y tarjetas */
section[id],
div[id],
article[id] {
  scroll-margin-top: 110px !important;
}

.roadmap-preview-block {
  scroll-margin-top: 132px !important;
}

.barra-editorial-nuclear,
.side-rail,
.rail-editorial,
.barra-lateral-editorial {
  opacity: 0.45 !important;
}

@media (max-width: 1200px) {
  .barra-editorial-nuclear,
  .side-rail,
  .rail-editorial,
  .barra-lateral-editorial {
    display: none !important;
  }
}

.orientacion-card,
.work-card,
.info-card,
.recorrido-card {
  min-height: 124px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#bienvenida .section-title {
  display: inline-block !important;
  width: auto !important;
  max-width: min(100%, 420px) !important;
  padding-bottom: 0.42rem !important;
  border-bottom: 2px solid rgba(185, 151, 111, 0.85) !important;
}

#bienvenida .section-title::after,
.tarjeta-bienvenida .section-title::after,
.bienvenida h2::after,
.section-title::after {
  width: 56% !important;
  max-width: 420px !important;
}

#bienvenida .quote-box,
.tarjeta-bienvenida .quote-box,
.quote-box.cita-editorial,
.quote-box,
.cita-editorial {
  background: rgba(185, 151, 111, 0.10) !important;
  border-left: 4px solid rgba(185, 151, 111, 0.75) !important;
  border-radius: 10px !important;
}

/* Nav superior: unidades y secciones ocupan el mismo ancho estructural */
.nav-superior .nav-superior-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  column-gap: 1.25rem !important;
  max-width: 1180px !important;
  width: min(1180px, calc(100% - 4rem)) !important;
  padding-inline: 0 !important;
}

.nav-superior .nav-unidades,
.nav-superior .nav-secciones-inline {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

.nav-superior .lang-globe {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

.nav-superior.modo-secciones .nav-secciones-inline {
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 0.12rem !important;
  width: 100% !important;
}

.nav-superior.modo-secciones .nav-secciones-inline .ancla-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  justify-content: center !important;
  text-align: center !important;
  padding-left: 0.42rem !important;
  padding-right: 0.42rem !important;
  font-size: 0.76rem !important;
}

@media (max-width: 980px) {
  .nav-superior .nav-superior-inner {
    width: 100% !important;
    padding-inline: 0.75rem !important;
    column-gap: 0.75rem !important;
  }

  .nav-superior.modo-secciones .nav-secciones-inline {
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }

  .nav-superior.modo-secciones .nav-secciones-inline .ancla-item {
    flex: 0 0 auto !important;
    min-width: 6.4rem !important;
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
  }
}

/* Origen de la pregunta: evitar espacios artificiales por texto justificado */
#origen-pregunta p {
  text-align: left !important;
  text-align-last: left !important;
  line-height: 1.75;
  letter-spacing: 0.005em;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Diario: respiracion premium del CTA */
.diario-cta,
.diario-premium,
.diario-suenos-cta {
  padding: 2.8rem 2rem 2.6rem;
}

.diario-cta .diario-icono,
.diario-premium .diario-icono,
.diario-suenos-cta .diario-icono {
  margin: 0 auto 1rem;
}

.diario-cta h3,
.diario-premium h3,
.diario-suenos-cta h3 {
  margin: 0 0 0.7rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.diario-cta p,
.diario-premium p,
.diario-suenos-cta p {
  margin: 0 0 1.35rem;
  line-height: 1.45;
  font-size: 0.95rem;
  font-weight: 400;
  opacity: 0.92;
}

.diario-cta .diario-accion,
.diario-premium .diario-accion,
.diario-suenos-cta .diario-accion {
  margin-top: 0.15rem;
}

/* Diario: textos introductorios mas prolijos */
#origen-pregunta > p,
#diario-suenos > p {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  text-align: left !important;
  text-align-last: left !important;
  line-height: 1.78;
  letter-spacing: 0.003em;
  font-size: 1.01rem;
}

#origen-pregunta > p {
  margin-bottom: 0.72rem;
}

#origen-pregunta > p + p {
  margin-top: 0.18rem;
}

#diario-suenos > p {
  margin-top: 1.35rem;
  margin-bottom: 2.35rem;
}
/* =========================================================
   FIX BIENVENIDA · TÍTULO ALINEADO CON COLUMNA DE TEXTO
   ========================================================= */

#bienvenida .section-title {
  display: block !important;
  width: min(560px, 100%) !important;
  max-width: 560px !important;
  margin: 0 auto 2.2rem !important;
  text-align: left !important;
  padding-bottom: 0.55rem !important;
  border-bottom: 2px solid #b9976f !important;
}

/* =========================================================
   JOHARI · VERSION INTEGRADA SIN IFRAME
   ========================================================= */

#recurso-johari.johari-integrado {
  --johari-bg: #f8fbfc;
  --johari-ink: #213447;
  --johari-muted: #607487;
  --johari-teal: #4a90a4;
  --johari-gold: #b9976f;
  --johari-line: rgba(74, 144, 164, 0.18);
  max-width: 825px;
  margin: var(--section-gap) auto;
  padding: 0 1rem 2rem;
  overflow: hidden;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: #7ea6c4;
  box-shadow: 0 22px 44px rgba(74, 144, 164, 0.14), 0 10px 18px rgba(0, 0, 0, 0.05);
  color: var(--johari-ink);
}

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

#recurso-johari .johari-header {
  padding: 2.3rem 1rem 2.8rem;
  text-align: center;
  background: transparent;
  color: #fff;
}

#recurso-johari .johari-header h2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0 0 1.05rem;
  color: #fff;
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2.3rem, 4.6vw, 3.35rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.14);
}

#recurso-johari .johari-header h2 i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #fff;
  color: #5d83a2;
  font-size: 1.25rem;
  box-shadow: 0 8px 18px rgba(51, 91, 122, 0.24);
}

#recurso-johari .johari-badge {
  display: inline-flex;
  justify-content: center;
  width: auto;
  margin: 0 auto 1.15rem;
  padding: 0.72rem 1.6rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: #5b7f9e;
  font-size: 0.95rem;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(51, 91, 122, 0.12);
}

#recurso-johari .johari-header p {
  max-width: 660px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

#recurso-johari .johari-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.8rem;
}

#recurso-johari .johari-stats div {
  padding: 1.25rem 0.75rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

#recurso-johari .johari-stats strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
}

#recurso-johari .johari-stats span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.86rem;
  font-weight: 700;
}

#recurso-johari .is-hidden {
  display: none !important;
}

#recurso-johari .johari-landing {
  display: grid;
  gap: 1.8rem;
}

#recurso-johari .johari-info-card {
  margin: 0;
  padding: 1.9rem 2rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 22px rgba(51, 91, 122, 0.08);
}

#recurso-johari .johari-info-card h3 {
  margin: 0 0 1.25rem;
  color: #587c9c;
  font-size: 1.55rem;
  line-height: 1.2;
  text-align: center;
}

#recurso-johari .johari-info-card p {
  max-width: 640px;
  margin: 0 auto 1rem;
  color: #516173;
  font-size: 1.02rem;
  line-height: 1.62;
  text-align: left;
}

#recurso-johari .johari-info-card p:last-child {
  margin-bottom: 0;
}

#recurso-johari .johari-character-preview {
  text-align: center;
}

#recurso-johari .johari-character-preview p,
#recurso-johari .johari-start-card p {
  text-align: center;
}

#recurso-johari .johari-preview-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.35rem;
}

#recurso-johari .johari-preview-pills span {
  display: inline-flex;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  background: #6f93b0;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(51, 91, 122, 0.18);
}

#recurso-johari .johari-preview-pills span:last-child {
  background: rgba(111, 147, 176, 0.13);
  color: #52677b;
}

#recurso-johari .johari-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

#recurso-johari .johari-preview-card {
  min-height: 140px;
  padding: 1.65rem 1.25rem;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  box-shadow: 0 12px 22px rgba(51, 91, 122, 0.15);
}

#recurso-johari .johari-preview-card strong {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 1.35rem;
  line-height: 1.2;
}

#recurso-johari .johari-preview-card p {
  margin: 0 auto;
  color: rgba(255,255,255,0.92);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

#recurso-johari .johari-preview-publica { background: #62a784; }
#recurso-johari .johari-preview-oculta { background: #d2a06a; }
#recurso-johari .johari-preview-ciega { background: #c38b51; }
#recurso-johari .johari-preview-potencial { background: #8776b3; }

#recurso-johari .johari-start-card {
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

#recurso-johari .johari-start-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  border: 2px solid rgba(24, 40, 58, 0.9);
  border-radius: 10px;
  min-width: min(370px, 100%);
  padding: 0.9rem 2rem;
  background: #7fa6c5;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(51, 91, 122, 0.18);
}

#recurso-johari .johari-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
  color: #657485;
  font-size: 0.9rem;
}

#recurso-johari .johari-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#recurso-johari .johari-workspace.is-hidden {
  display: none !important;
}

#recurso-johari .johari-workspace {
  display: grid;
  gap: 1rem;
  padding: 1.35rem 0 0;
}

#recurso-johari .johari-panel {
  border: 1px solid var(--johari-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 24px rgba(74, 144, 164, 0.08);
}

#recurso-johari .johari-bank {
  padding: 1.25rem;
}

#recurso-johari .johari-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

#recurso-johari .johari-panel h3,
#recurso-johari .johari-quadrant h3 {
  margin: 0;
  color: var(--johari-ink);
  font-size: 1.05rem;
  line-height: 1.25;
}

#recurso-johari .johari-bank > p,
#recurso-johari .johari-quadrant p {
  margin: 0 0 1rem;
  color: var(--johari-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: left;
}

#recurso-johari .johari-reset {
  border: 1px solid rgba(185, 151, 111, 0.35);
  border-radius: 999px;
  padding: 0.45rem 0.78rem;
  background: rgba(185, 151, 111, 0.09);
  color: #86694b;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
}

#recurso-johari .johari-traits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

#recurso-johari .johari-trait {
  display: grid;
  gap: 0.6rem;
  padding: 0.85rem;
  border: 1px solid rgba(74, 144, 164, 0.14);
  border-radius: 12px;
  background: #f8fbfc;
}

#recurso-johari .johari-trait strong {
  color: var(--johari-ink);
  font-size: 0.94rem;
}

#recurso-johari .johari-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

#recurso-johari .johari-choice-group button {
  flex: 1 1 auto;
  border: 1px solid rgba(74, 144, 164, 0.2);
  border-radius: 999px;
  padding: 0.38rem 0.55rem;
  background: #fff;
  color: var(--johari-muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
}

#recurso-johari .johari-choice-group button.is-active {
  border-color: rgba(74, 144, 164, 0.45);
  background: #4a90a4;
  color: #fff;
}

#recurso-johari .johari-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  padding: 1rem;
}

#recurso-johari .johari-quadrant {
  min-height: 190px;
  padding: 1rem;
  border-radius: 14px;
  color: var(--johari-ink);
}

#recurso-johari .johari-arena { background: linear-gradient(135deg, rgba(74, 144, 164, 0.13), rgba(74, 144, 164, 0.06)); }
#recurso-johari .johari-ciego { background: linear-gradient(135deg, rgba(185, 151, 111, 0.15), rgba(185, 151, 111, 0.06)); }
#recurso-johari .johari-fachada { background: linear-gradient(135deg, rgba(95, 128, 151, 0.14), rgba(95, 128, 151, 0.06)); }
#recurso-johari .johari-desconocido { background: linear-gradient(135deg, rgba(68, 85, 116, 0.13), rgba(68, 85, 116, 0.06)); }

#recurso-johari .johari-output {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-content: flex-start;
}

#recurso-johari .johari-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.32rem 0.58rem;
  background: rgba(255, 255, 255, 0.78);
  color: var(--johari-ink);
  font-size: 0.78rem;
  font-weight: 700;
}

#recurso-johari .johari-footer {
  margin: 1.7rem 0 0;
  padding-top: 0;
  border-top: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 760px) {
  #recurso-johari .johari-workspace {
    padding: 1rem;
  }

  #recurso-johari .johari-traits,
  #recurso-johari .johari-matrix {
    grid-template-columns: 1fr;
  }

  #recurso-johari .johari-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   RITMOS CIRCADIANOS · CSS INTEGRADO DESDE EL MODULO
   Scope: solo documentos iframe con body.ritmos-circadianos-module
   ========================================================= */

body.ritmos-circadianos-module {
  --primary-bg: linear-gradient(135deg, #0d1327 0%, #121b35 50%, #172541 100%);
  --secondary-bg: rgba(18, 27, 53, 0.88);
  --card-bg: rgba(21, 33, 61, 0.72);
  --glass-bg: rgba(233, 246, 250, 0.075);
  --primary-color: #7d99ff;
  --secondary-color: #536fd6;
  --accent-color: #66d9e8;
  --success-color: #48c7bd;
  --warning-color: #d6a85f;
  --danger-color: #e17272;
  --text-primary: #f5f8ff;
  --text-secondary: #c7d4ea;
  --text-muted: #91a3bf;
  --border-color: rgba(153, 180, 214, 0.18);
  --hover-bg: rgba(102, 217, 232, 0.1);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 8px 18px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 14px 28px rgba(0, 0, 0, 0.28);
  --shadow-xl: 0 18px 34px rgba(0, 0, 0, 0.32);
  --border-radius: 12px;
  --border-radius-lg: 16px;
  --transition: all 0.25s ease;
  min-height: 0 !important;
  height: auto !important;
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden !important;
  background: var(--primary-bg);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.55;
}

body.ritmos-circadianos-module *,
body.ritmos-circadianos-module *::before,
body.ritmos-circadianos-module *::after {
  box-sizing: border-box;
}

body.ritmos-circadianos-module::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 12%, rgba(102, 217, 232, 0.1), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(125, 153, 255, 0.09), transparent 36%),
    linear-gradient(135deg, rgba(13, 19, 39, 0.85), rgba(23, 37, 65, 0.9));
  pointer-events: none;
}

body.ritmos-circadianos-module .container {
  width: 100%;
  max-width: 1120px;
  height: auto !important;
  margin: 0 auto;
  padding: 14px 18px 16px;
  position: relative;
  z-index: 1;
}

body.ritmos-circadianos-module .header {
  text-align: center;
  margin: 0 0 0.9rem;
  padding: 0.55rem 0 0;
}

body.ritmos-circadianos-module .header-content {
  background: rgba(233, 246, 250, 0.08);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 1.15rem 1.35rem;
  box-shadow: var(--shadow-md);
}

body.ritmos-circadianos-module .main-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 0.35rem;
  color: var(--text-primary);
  font-size: clamp(1.55rem, 4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0;
}

body.ritmos-circadianos-module .main-title i {
  color: var(--accent-color);
  filter: drop-shadow(0 0 12px rgba(102, 217, 232, 0.35));
}

body.ritmos-circadianos-module .subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 400;
}

body.ritmos-circadianos-module .nav-container {
  display: flex;
  justify-content: center;
  margin: 0 0 0.95rem;
}

body.ritmos-circadianos-module .nav-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.38rem;
  padding: 0.38rem;
  background: rgba(8, 16, 34, 0.36);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
}

body.ritmos-circadianos-module .nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  border-radius: 10px;
  padding: 0.55rem 0.82rem;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: var(--transition);
}

body.ritmos-circadianos-module .nav-pill:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

body.ritmos-circadianos-module .nav-pill.active {
  background: linear-gradient(135deg, rgba(83, 111, 214, 0.86), rgba(42, 72, 143, 0.86));
  color: #fff;
  box-shadow: 0 8px 18px rgba(28, 47, 105, 0.3);
}

body.ritmos-circadianos-module .main-content {
  min-height: 0;
}

body.ritmos-circadianos-module .section {
  display: none;
  animation: ritmosFadeIn 0.35s ease-out;
}

body.ritmos-circadianos-module .section.active {
  display: block;
}

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

body.ritmos-circadianos-module .intro-card,
body.ritmos-circadianos-module .clock-container,
body.ritmos-circadianos-module .breathing-container,
body.ritmos-circadianos-module .calculator-container,
body.ritmos-circadianos-module .tracker-container,
body.ritmos-circadianos-module .quiz-container {
  margin-bottom: 0.65rem;
  padding: 1.35rem;
  background: rgba(233, 246, 250, 0.072);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
}

body.ritmos-circadianos-module h2,
body.ritmos-circadianos-module h3,
body.ritmos-circadianos-module h4,
body.ritmos-circadianos-module p {
  margin-top: 0;
}

body.ritmos-circadianos-module .intro-card h2,
body.ritmos-circadianos-module .clock-container h2,
body.ritmos-circadianos-module .breathing-container h2,
body.ritmos-circadianos-module .calculator-container h2,
body.ritmos-circadianos-module .tracker-container h2,
body.ritmos-circadianos-module .quiz-container h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
  color: var(--primary-color);
  text-align: center;
  font-size: clamp(1.25rem, 3vw, 1.62rem);
  line-height: 1.22;
}

body.ritmos-circadianos-module .intro-icon {
  margin-bottom: 0.65rem;
  text-align: center;
}

body.ritmos-circadianos-module .intro-icon i {
  color: var(--accent-color);
  font-size: 2.15rem;
}

body.ritmos-circadianos-module .intro-text,
body.ritmos-circadianos-module .section-description {
  max-width: 760px;
  margin: 0 auto 1.15rem;
  color: var(--text-secondary);
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.62;
}

body.ritmos-circadianos-module .key-points,
body.ritmos-circadianos-module .schedule-grid,
body.ritmos-circadianos-module .breathing-instructions,
body.ritmos-circadianos-module .tips-grid,
body.ritmos-circadianos-module .form-grid,
body.ritmos-circadianos-module .progress-grid,
body.ritmos-circadianos-module .sleep-recommendations,
body.ritmos-circadianos-module .answers {
  display: grid;
  gap: 0.75rem;
}

body.ritmos-circadianos-module .key-points {
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  margin-bottom: 1rem;
}

body.ritmos-circadianos-module .point,
body.ritmos-circadianos-module .schedule-item,
body.ritmos-circadianos-module .instruction-step,
body.ritmos-circadianos-module .tip,
body.ritmos-circadianos-module .progress-item,
body.ritmos-circadianos-module .answer {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.82rem;
  background: rgba(21, 33, 61, 0.66);
  border: 1px solid rgba(153, 180, 214, 0.16);
  border-radius: var(--border-radius);
  transition: var(--transition);
}

body.ritmos-circadianos-module .point:hover,
body.ritmos-circadianos-module .schedule-item:hover,
body.ritmos-circadianos-module .tip:hover,
body.ritmos-circadianos-module .answer:hover {
  border-color: rgba(102, 217, 232, 0.38);
  background: rgba(27, 43, 76, 0.72);
}

body.ritmos-circadianos-module .point i,
body.ritmos-circadianos-module .activity i,
body.ritmos-circadianos-module .tip i {
  color: var(--accent-color);
  font-size: 1.25rem;
  margin-top: 0.2rem;
}

body.ritmos-circadianos-module .point h3,
body.ritmos-circadianos-module .tip h4,
body.ritmos-circadianos-module .step-content h4 {
  margin-bottom: 0.25rem;
  color: var(--text-primary);
  font-size: 0.98rem;
}

body.ritmos-circadianos-module .point p,
body.ritmos-circadianos-module .tip p,
body.ritmos-circadianos-module .step-content p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

body.ritmos-circadianos-module .sleep-cycles-info,
body.ritmos-circadianos-module .results-container,
body.ritmos-circadianos-module .progress-tracking,
body.ritmos-circadianos-module .chart-container,
body.ritmos-circadianos-module .recommendations {
  margin: 1rem 0 0;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(83, 111, 214, 0.12), rgba(102, 217, 232, 0.08));
  border: 1px solid rgba(102, 217, 232, 0.22);
  border-radius: var(--border-radius);
}

body.ritmos-circadianos-module .sleep-cycles-info h3,
body.ritmos-circadianos-module .routine-schedule h3,
body.ritmos-circadianos-module .sleep-tips h3,
body.ritmos-circadianos-module .experiment-form h3,
body.ritmos-circadianos-module .cycle-visualization h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  color: var(--primary-color);
  text-align: center;
}

body.ritmos-circadianos-module .circadian-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.15rem;
}

body.ritmos-circadianos-module .clock-face {
  position: relative;
  width: 250px;
  height: 250px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(15, 24, 48, 0.96), rgba(26, 43, 76, 0.94));
  border: 2px solid rgba(153, 180, 214, 0.2);
  box-shadow: var(--shadow-xl);
}

body.ritmos-circadianos-module .clock-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-color);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 18px rgba(102, 217, 232, 0.8);
}

body.ritmos-circadianos-module .hour-hand {
  position: absolute;
  top: 25%;
  left: 50%;
  width: 4px;
  height: 25%;
  background: var(--accent-color);
  border-radius: 2px;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: bottom;
  transition: transform 1s ease-in-out;
  box-shadow: 0 0 10px rgba(102, 217, 232, 0.65);
}

body.ritmos-circadianos-module .current-time {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 600;
}

body.ritmos-circadianos-module .hour-markers,
body.ritmos-circadianos-module .activity-zone {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

body.ritmos-circadianos-module .hour-markers::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image:
    repeating-conic-gradient(
      from 0deg,
      transparent 0deg 29deg,
      rgba(153, 180, 214, 0.18) 29deg 30deg,
      transparent 30deg 59deg,
      rgba(102, 217, 232, 0.42) 59deg 60deg
    );
}

body.ritmos-circadianos-module .activity-zone {
  opacity: 0.28;
}

body.ritmos-circadianos-module .sleep-zone {
  background: conic-gradient(from 330deg, transparent 0deg, rgba(83, 111, 214, 0.42) 120deg, transparent 120deg);
}

body.ritmos-circadianos-module .rem-zone {
  background: conic-gradient(from 60deg, transparent 0deg, rgba(102, 217, 232, 0.42) 60deg, transparent 60deg);
}

body.ritmos-circadianos-module .alert-zone {
  background: conic-gradient(from 150deg, transparent 0deg, rgba(72, 199, 189, 0.34) 150deg, transparent 150deg);
}

body.ritmos-circadianos-module .zone-label {
  position: absolute;
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

body.ritmos-circadianos-module .clock-legend,
body.ritmos-circadianos-module .export-options,
body.ritmos-circadianos-module .breathing-controls,
body.ritmos-circadianos-module .quiz-controls,
body.ritmos-circadianos-module .mode-selector {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

body.ritmos-circadianos-module .legend-item,
body.ritmos-circadianos-module .activity {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-secondary);
  font-size: 0.86rem;
}

body.ritmos-circadianos-module .legend-color {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

body.ritmos-circadianos-module .sleep-color { background: rgba(83, 111, 214, 0.85); }
body.ritmos-circadianos-module .rem-color { background: rgba(102, 217, 232, 0.85); }
body.ritmos-circadianos-module .alert-color { background: rgba(72, 199, 189, 0.8); }

body.ritmos-circadianos-module .routine-schedule {
  margin-top: 0.75rem;
}

body.ritmos-circadianos-module .schedule-grid {
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
}

body.ritmos-circadianos-module .evening,
body.ritmos-circadianos-module .night,
body.ritmos-circadianos-module .deep-sleep,
body.ritmos-circadianos-module .rem,
body.ritmos-circadianos-module .morning {
  background: rgba(21, 33, 61, 0.66);
}

body.ritmos-circadianos-module .time {
  min-width: 56px;
  color: var(--accent-color);
  font-size: 1.05rem;
  font-weight: 700;
}

body.ritmos-circadianos-module .breathing-exercise {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.05rem;
}

body.ritmos-circadianos-module .breathing-circle,
body.ritmos-circadianos-module .score-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
  box-shadow: 0 0 34px rgba(102, 217, 232, 0.22);
}

body.ritmos-circadianos-module .breathing-circle {
  width: 160px;
  height: 160px;
  transition: all 1s ease-in-out;
}

body.ritmos-circadianos-module .breathing-circle.inhaling,
body.ritmos-circadianos-module .breathing-circle.holding {
  transform: scale(1.22);
}

body.ritmos-circadianos-module .breathing-circle.exhaling {
  transform: scale(0.86);
}

body.ritmos-circadianos-module .breathing-inner {
  color: #fff;
  text-align: center;
}

body.ritmos-circadianos-module .phase-text {
  margin-bottom: 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
}

body.ritmos-circadianos-module .counter {
  font-size: 1.75rem;
  font-weight: 700;
}

body.ritmos-circadianos-module .breathing-instructions,
body.ritmos-circadianos-module .tips-grid {
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

body.ritmos-circadianos-module .step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(102, 217, 232, 0.16);
  color: var(--accent-color);
  font-weight: 700;
}

body.ritmos-circadianos-module .session-stats,
body.ritmos-circadianos-module .score-display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
}

body.ritmos-circadianos-module .session-stats {
  padding: 0.75rem 1.1rem;
  background: rgba(21, 33, 61, 0.66);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

body.ritmos-circadianos-module .stat {
  text-align: center;
}

body.ritmos-circadianos-module .stat-label,
body.ritmos-circadianos-module .progress-label {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--text-secondary);
  font-size: 0.86rem;
}

body.ritmos-circadianos-module .stat-value,
body.ritmos-circadianos-module .progress-value {
  display: block;
  color: var(--accent-color);
  font-size: 1.15rem;
  font-weight: 700;
}

body.ritmos-circadianos-module .btn-primary,
body.ritmos-circadianos-module .btn-secondary,
body.ritmos-circadianos-module .mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
}

body.ritmos-circadianos-module .btn-primary,
body.ritmos-circadianos-module .btn-secondary {
  border: 0;
  padding: 0.62rem 1.1rem;
  font-size: 0.94rem;
}

body.ritmos-circadianos-module .btn-primary {
  background: linear-gradient(135deg, var(--secondary-color), #3654ad);
  color: #fff;
}

body.ritmos-circadianos-module .btn-primary:hover,
body.ritmos-circadianos-module .btn-secondary:hover,
body.ritmos-circadianos-module .mode-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(102, 217, 232, 0.38);
}

body.ritmos-circadianos-module .btn-primary:disabled {
  background: rgba(145, 163, 191, 0.45);
  cursor: not-allowed;
  transform: none;
}

body.ritmos-circadianos-module .btn-secondary {
  background: rgba(21, 33, 61, 0.72);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

body.ritmos-circadianos-module .mode-selector {
  margin-bottom: 1rem;
}

body.ritmos-circadianos-module .calculator-modes,
body.ritmos-circadianos-module .sleep-tips,
body.ritmos-circadianos-module .experiment-form,
body.ritmos-circadianos-module .cycle-visualization {
  margin-top: 0.95rem;
}

body.ritmos-circadianos-module .mode-btn {
  min-width: 180px;
  padding: 0.8rem 1rem;
  flex-direction: column;
  background: rgba(21, 33, 61, 0.66);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  text-align: center;
}

body.ritmos-circadianos-module .mode-btn.active {
  background: linear-gradient(135deg, rgba(83, 111, 214, 0.85), rgba(42, 72, 143, 0.85));
  border-color: rgba(102, 217, 232, 0.28);
  color: #fff;
}

body.ritmos-circadianos-module .calculator-input {
  max-width: 400px;
  margin: 0 auto 1rem;
}

body.ritmos-circadianos-module .input-group {
  margin-bottom: 0.8rem;
}

body.ritmos-circadianos-module .input-group label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text-secondary);
  font-weight: 500;
}

body.ritmos-circadianos-module .input-group input,
body.ritmos-circadianos-module .input-group select,
body.ritmos-circadianos-module .input-group textarea {
  width: 100%;
  padding: 0.66rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: rgba(21, 33, 61, 0.72);
  color: var(--text-primary);
  font-size: 0.95rem;
}

body.ritmos-circadianos-module .input-group input:focus,
body.ritmos-circadianos-module .input-group select:focus,
body.ritmos-circadianos-module .input-group textarea:focus {
  outline: none;
  border-color: rgba(102, 217, 232, 0.55);
  box-shadow: 0 0 0 2px rgba(102, 217, 232, 0.1);
}

body.ritmos-circadianos-module .recommendation,
body.ritmos-circadianos-module .insight {
  margin-bottom: 0.75rem;
  padding: 0.82rem;
  background: rgba(233, 246, 250, 0.07);
  border-left: 4px solid var(--accent-color);
  border-radius: var(--border-radius);
}

body.ritmos-circadianos-module .recommendations-list p {
  margin-bottom: 0.45rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

body.ritmos-circadianos-module .floating-particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

body.ritmos-circadianos-module .particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(102, 217, 232, 0.18);
}

body.ritmos-circadianos-module .recommendation.best {
  background: rgba(72, 199, 189, 0.1);
  border-left-color: var(--success-color);
}

body.ritmos-circadianos-module .cycles-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

body.ritmos-circadianos-module .cycle-block {
  min-width: 76px;
  padding: 0.45rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  text-align: center;
  font-size: 0.78rem;
}

body.ritmos-circadianos-module .cycle-deep { background: rgba(83, 111, 214, 0.16); border-color: rgba(83, 111, 214, 0.42); }
body.ritmos-circadianos-module .cycle-rem { background: rgba(102, 217, 232, 0.14); border-color: rgba(102, 217, 232, 0.42); }
body.ritmos-circadianos-module .cycle-light { background: rgba(72, 199, 189, 0.12); border-color: rgba(72, 199, 189, 0.36); }

body.ritmos-circadianos-module .form-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 1rem;
}

body.ritmos-circadianos-module .form-group.full-width {
  grid-column: 1 / -1;
}

body.ritmos-circadianos-module .form-group textarea {
  min-height: 68px;
  resize: vertical;
}

body.ritmos-circadianos-module .progress-grid {
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  margin-bottom: 1rem;
}

body.ritmos-circadianos-module .progress-item {
  display: block;
  text-align: center;
}

body.ritmos-circadianos-module .progress-bar-container {
  text-align: center;
}

body.ritmos-circadianos-module .progress-bar {
  width: 100%;
  height: 8px;
  margin-bottom: 0.4rem;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(21, 33, 61, 0.72);
}

body.ritmos-circadianos-module .progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
  transition: width 0.5s ease;
}

body.ritmos-circadianos-module .progress-text {
  color: var(--text-secondary);
  font-size: 0.86rem;
}

body.ritmos-circadianos-module .chart-container canvas {
  max-height: 260px;
}

body.ritmos-circadianos-module .quiz-progress {
  margin-bottom: 1rem;
}

body.ritmos-circadianos-module .progress-indicator {
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  text-align: center;
  font-size: 1rem;
}

body.ritmos-circadianos-module .question-container {
  min-height: 210px;
  margin-bottom: 1rem;
}

body.ritmos-circadianos-module .question {
  text-align: center;
}

body.ritmos-circadianos-module .question h3 {
  margin-bottom: 1rem;
  color: var(--text-primary);
  font-size: 1.15rem;
  line-height: 1.45;
}

body.ritmos-circadianos-module .answers {
  max-width: 620px;
  margin: 0 auto;
}

body.ritmos-circadianos-module .answer {
  text-align: left;
  cursor: pointer;
}

body.ritmos-circadianos-module .answer.selected {
  background: rgba(83, 111, 214, 0.2);
  border-color: var(--primary-color);
}

body.ritmos-circadianos-module .answer.correct {
  background: rgba(72, 199, 189, 0.18);
  border-color: var(--success-color);
}

body.ritmos-circadianos-module .answer.incorrect {
  background: rgba(225, 114, 114, 0.16);
  border-color: var(--danger-color);
}

body.ritmos-circadianos-module .quiz-controls {
  justify-content: space-between;
}

body.ritmos-circadianos-module .quiz-results {
  text-align: center;
}

body.ritmos-circadianos-module .score-display {
  flex-direction: column;
  margin: 1rem 0;
}

body.ritmos-circadianos-module .score-circle {
  width: 118px;
  height: 118px;
}

body.ritmos-circadianos-module .score-text {
  color: #fff;
  font-size: 1.65rem;
  font-weight: 700;
}

body.ritmos-circadianos-module .score-description {
  max-width: 440px;
  color: var(--text-secondary);
  font-size: 1rem;
}

body.ritmos-circadianos-module .footer {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(153, 180, 214, 0.14);
  border-radius: var(--border-radius-lg);
  background: rgba(9, 16, 34, 0.38);
  text-align: center;
}

body.ritmos-circadianos-module .footer-content p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

body.ritmos-circadianos-module .footer-content p:first-child {
  color: var(--text-primary);
  font-size: 0.94rem;
  font-weight: 600;
}

body.ritmos-circadianos-module .footer-note {
  margin-top: 0.25rem !important;
  color: var(--text-muted) !important;
  font-size: 0.8rem !important;
}

@media (min-width: 768px) {
  body.ritmos-circadianos-module .key-points .point:last-child {
    grid-column: 1 / -1;
    align-items: center;
    padding: 0.9rem 1rem;
    background: rgba(21, 33, 61, 0.62);
    border-color: rgba(102, 217, 232, 0.2);
    box-shadow: none;
  }

  body.ritmos-circadianos-module .key-points .point:last-child i {
    color: var(--accent-color);
    font-size: 1.65rem;
    margin-top: 0;
  }

  body.ritmos-circadianos-module .key-points .point:last-child div {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.8rem;
  }

  body.ritmos-circadianos-module .key-points .point:last-child h3,
  body.ritmos-circadianos-module .key-points .point:last-child p {
    margin: 0;
  }
}

@media (max-width: 768px) {
  body.ritmos-circadianos-module .container {
    padding: 10px;
  }

  body.ritmos-circadianos-module .header-content,
  body.ritmos-circadianos-module .intro-card,
  body.ritmos-circadianos-module .clock-container,
  body.ritmos-circadianos-module .breathing-container,
  body.ritmos-circadianos-module .calculator-container,
  body.ritmos-circadianos-module .tracker-container,
  body.ritmos-circadianos-module .quiz-container {
    padding: 1rem;
  }

  body.ritmos-circadianos-module .main-title {
    font-size: 1.55rem;
  }

  body.ritmos-circadianos-module .nav-pill {
    padding: 0.48rem 0.62rem;
    font-size: 0.78rem;
  }

  body.ritmos-circadianos-module .nav-pill i {
    display: none;
  }

  body.ritmos-circadianos-module .clock-face {
    width: 230px;
    height: 230px;
  }

  body.ritmos-circadianos-module .breathing-circle {
    width: 140px;
    height: 140px;
  }

  body.ritmos-circadianos-module .session-stats,
  body.ritmos-circadianos-module .quiz-controls {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  body.ritmos-circadianos-module .main-title {
    flex-direction: column;
    gap: 0.45rem;
    font-size: 1.35rem;
  }

  body.ritmos-circadianos-module .mode-btn {
    min-width: 0;
    width: 100%;
  }

  body.ritmos-circadianos-module .breathing-controls,
  body.ritmos-circadianos-module .export-options {
    flex-direction: column;
  }
}

/* =========================================================
   RITMOS CIRCADIANOS · VERSION INTEGRADA SIN IFRAME
   ========================================================= */

#recurso-ritmos.ritmos-circadianos-module {
  --primary-bg: linear-gradient(135deg, #0d1327 0%, #121b35 50%, #172541 100%);
  --secondary-bg: rgba(18, 27, 53, 0.88);
  --card-bg: rgba(21, 33, 61, 0.72);
  --glass-bg: rgba(233, 246, 250, 0.075);
  --primary-color: #7d99ff;
  --secondary-color: #536fd6;
  --accent-color: #66d9e8;
  --success-color: #48c7bd;
  --danger-color: #e17272;
  --text-primary: #f5f8ff;
  --text-secondary: #c7d4ea;
  --text-muted: #91a3bf;
  --border-color: rgba(153, 180, 214, 0.18);
  --hover-bg: rgba(102, 217, 232, 0.1);
  --border-radius: 12px;
  --border-radius-lg: 16px;
  --transition: all 0.25s ease;
  position: relative;
  max-width: 825px;
  margin: var(--section-gap) auto;
  overflow: hidden;
  background: var(--primary-bg);
  color: var(--text-primary);
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.55;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.38);
}

#recurso-ritmos.ritmos-circadianos-module::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(102, 217, 232, 0.1), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(125, 153, 255, 0.08), transparent 36%);
  pointer-events: none;
}

#recurso-ritmos.ritmos-circadianos-module * {
  box-sizing: border-box;
}

#recurso-ritmos.ritmos-circadianos-module .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 18px 16px;
}

#recurso-ritmos .header {
  margin: 0 0 0.9rem;
  padding: 0.55rem 0 0;
  text-align: center;
}

#recurso-ritmos .header-content,
#recurso-ritmos .intro-card,
#recurso-ritmos .clock-container,
#recurso-ritmos .breathing-container,
#recurso-ritmos .calculator-container,
#recurso-ritmos .tracker-container,
#recurso-ritmos .quiz-container {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  background: rgba(233, 246, 250, 0.075);
  box-shadow: 0 14px 28px rgba(0,0,0,0.26);
}

#recurso-ritmos .header-content {
  padding: 1.15rem 1.35rem;
}

#recurso-ritmos .main-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 0.35rem;
  color: var(--text-primary);
  font-size: clamp(1.55rem, 4vw, 2.1rem);
  line-height: 1.18;
  letter-spacing: 0;
}

#recurso-ritmos .main-title i,
#recurso-ritmos .intro-icon i,
#recurso-ritmos .point i,
#recurso-ritmos .tip i,
#recurso-ritmos .activity i {
  color: var(--accent-color);
}

#recurso-ritmos .subtitle,
#recurso-ritmos .section-description,
#recurso-ritmos .intro-text,
#recurso-ritmos .point p,
#recurso-ritmos .tip p,
#recurso-ritmos .step-content p,
#recurso-ritmos .footer-content p {
  color: var(--text-secondary);
}

#recurso-ritmos .nav-container {
  display: flex;
  justify-content: center;
  margin: 0 0 0.95rem;
}

#recurso-ritmos .nav-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.38rem;
  padding: 0.38rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  background: rgba(8, 16, 34, 0.36);
}

#recurso-ritmos .nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  border-radius: 10px;
  padding: 0.55rem 0.82rem;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.86rem;
  white-space: nowrap;
  transition: var(--transition);
}

#recurso-ritmos .nav-pill.active {
  background: linear-gradient(135deg, rgba(83, 111, 214, 0.86), rgba(42, 72, 143, 0.86));
  color: #fff;
}

#recurso-ritmos .section {
  display: none;
}

#recurso-ritmos .section.active {
  display: block;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#recurso-ritmos .intro-card,
#recurso-ritmos .clock-container,
#recurso-ritmos .breathing-container,
#recurso-ritmos .calculator-container,
#recurso-ritmos .tracker-container,
#recurso-ritmos .quiz-container {
  margin-bottom: 0.65rem;
  padding: 1.35rem;
}

#recurso-ritmos h2,
#recurso-ritmos h3,
#recurso-ritmos h4,
#recurso-ritmos p {
  margin-top: 0;
}

#recurso-ritmos h2,
#recurso-ritmos .sleep-cycles-info h3,
#recurso-ritmos .routine-schedule h3,
#recurso-ritmos .sleep-tips h3,
#recurso-ritmos .experiment-form h3 {
  color: var(--primary-color);
  text-align: center;
}

#recurso-ritmos h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
  font-size: clamp(1.25rem, 3vw, 1.62rem);
  line-height: 1.22;
}

#recurso-ritmos .intro-icon {
  margin-bottom: 0.65rem;
  text-align: center;
}

#recurso-ritmos .intro-icon i {
  font-size: 2.15rem;
}

#recurso-ritmos .intro-text,
#recurso-ritmos .section-description {
  max-width: 760px;
  margin: 0 auto 1.15rem;
  text-align: center;
  line-height: 1.62;
}

#recurso-ritmos .key-points,
#recurso-ritmos .schedule-grid,
#recurso-ritmos .breathing-instructions,
#recurso-ritmos .tips-grid,
#recurso-ritmos .form-grid,
#recurso-ritmos .progress-grid,
#recurso-ritmos .answers {
  display: grid;
  gap: 0.75rem;
}

#recurso-ritmos .key-points {
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  margin-bottom: 1rem;
}

#recurso-ritmos .point,
#recurso-ritmos .schedule-item,
#recurso-ritmos .instruction-step,
#recurso-ritmos .tip,
#recurso-ritmos .progress-item,
#recurso-ritmos .answer {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.82rem;
  border: 1px solid rgba(153, 180, 214, 0.16);
  border-radius: var(--border-radius);
  background: rgba(21, 33, 61, 0.66);
}

#recurso-ritmos .sleep-cycles-info,
#recurso-ritmos .results-container,
#recurso-ritmos .progress-tracking,
#recurso-ritmos .chart-container,
#recurso-ritmos .recommendations {
  margin: 1rem 0 0;
  padding: 1rem;
  border: 1px solid rgba(102, 217, 232, 0.22);
  border-radius: var(--border-radius);
  background: linear-gradient(135deg, rgba(83, 111, 214, 0.12), rgba(102, 217, 232, 0.08));
}

#recurso-ritmos .circadian-clock,
#recurso-ritmos .breathing-exercise,
#recurso-ritmos .score-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

#recurso-ritmos .clock-face {
  position: relative;
  width: 250px;
  height: 250px;
  border: 2px solid rgba(153, 180, 214, 0.2);
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(15, 24, 48, 0.96), rgba(26, 43, 76, 0.94));
  box-shadow: 0 18px 34px rgba(0,0,0,0.32);
}

#recurso-ritmos .clock-center,
#recurso-ritmos .hour-hand,
#recurso-ritmos .current-time,
#recurso-ritmos .hour-markers,
#recurso-ritmos .activity-zone {
  position: absolute;
}

#recurso-ritmos .clock-center {
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-color);
  transform: translate(-50%, -50%);
}

#recurso-ritmos .hour-hand {
  top: 25%;
  left: 50%;
  width: 4px;
  height: 25%;
  border-radius: 2px;
  background: var(--accent-color);
  transform-origin: bottom;
}

#recurso-ritmos .current-time {
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
}

#recurso-ritmos .hour-markers,
#recurso-ritmos .activity-zone {
  inset: 0;
  border-radius: 50%;
}

#recurso-ritmos .hour-markers::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: repeating-conic-gradient(from 0deg, transparent 0deg 29deg, rgba(153,180,214,0.18) 29deg 30deg, transparent 30deg 59deg, rgba(102,217,232,0.42) 59deg 60deg);
}

#recurso-ritmos .activity-zone {
  opacity: 0.28;
}

#recurso-ritmos .sleep-zone { background: conic-gradient(from 330deg, transparent 0deg, rgba(83,111,214,0.42) 120deg, transparent 120deg); }
#recurso-ritmos .rem-zone { background: conic-gradient(from 60deg, transparent 0deg, rgba(102,217,232,0.42) 60deg, transparent 60deg); }
#recurso-ritmos .alert-zone { background: conic-gradient(from 150deg, transparent 0deg, rgba(72,199,189,0.34) 150deg, transparent 150deg); }

#recurso-ritmos .zone-label {
  position: absolute;
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 700;
}

#recurso-ritmos .clock-legend,
#recurso-ritmos .export-options,
#recurso-ritmos .breathing-controls,
#recurso-ritmos .quiz-controls,
#recurso-ritmos .mode-selector {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

#recurso-ritmos .legend-item,
#recurso-ritmos .activity {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-secondary);
}

#recurso-ritmos .legend-color {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

#recurso-ritmos .sleep-color { background: rgba(83,111,214,0.85); }
#recurso-ritmos .rem-color { background: rgba(102,217,232,0.85); }
#recurso-ritmos .alert-color { background: rgba(72,199,189,0.8); }

#recurso-ritmos .breathing-circle,
#recurso-ritmos .score-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
}

#recurso-ritmos .breathing-circle {
  width: 160px;
  height: 160px;
  transition: all 1s ease-in-out;
}

#recurso-ritmos .breathing-circle.inhaling,
#recurso-ritmos .breathing-circle.holding {
  transform: scale(1.22);
}

#recurso-ritmos .breathing-circle.exhaling {
  transform: scale(0.86);
}

#recurso-ritmos .breathing-inner,
#recurso-ritmos .stat,
#recurso-ritmos .progress-item,
#recurso-ritmos .quiz-results {
  text-align: center;
}

#recurso-ritmos .counter,
#recurso-ritmos .progress-value,
#recurso-ritmos .stat-value,
#recurso-ritmos .time {
  color: var(--accent-color);
  font-weight: 700;
}

#recurso-ritmos .btn-primary,
#recurso-ritmos .btn-secondary,
#recurso-ritmos .mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: 700;
}

#recurso-ritmos .btn-primary,
#recurso-ritmos .btn-secondary {
  padding: 0.62rem 1.1rem;
  border: 0;
}

#recurso-ritmos .btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--secondary-color), #3654ad);
}

#recurso-ritmos .btn-secondary,
#recurso-ritmos .mode-btn {
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  background: rgba(21, 33, 61, 0.72);
}

#recurso-ritmos .mode-btn {
  min-width: 180px;
  padding: 0.8rem 1rem;
  flex-direction: column;
}

#recurso-ritmos .mode-btn.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(83,111,214,0.85), rgba(42,72,143,0.85));
}

#recurso-ritmos .input-group {
  margin-bottom: 0.8rem;
}

#recurso-ritmos .input-group label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text-secondary);
}

#recurso-ritmos input,
#recurso-ritmos select,
#recurso-ritmos textarea {
  width: 100%;
  padding: 0.66rem;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: rgba(21, 33, 61, 0.72);
}

#recurso-ritmos .form-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

#recurso-ritmos .form-group.full-width {
  grid-column: 1 / -1;
}

#recurso-ritmos .progress-bar {
  width: 100%;
  height: 8px;
  margin-bottom: 0.4rem;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(21,33,61,0.72);
}

#recurso-ritmos .progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
}

#recurso-ritmos .answer {
  cursor: pointer;
  text-align: left;
}

#recurso-ritmos .answer.selected { border-color: var(--primary-color); background: rgba(83,111,214,0.2); }
#recurso-ritmos .answer.correct { border-color: var(--success-color); background: rgba(72,199,189,0.18); }
#recurso-ritmos .answer.incorrect { border-color: var(--danger-color); background: rgba(225,114,114,0.16); }

#recurso-ritmos .score-circle {
  width: 118px;
  height: 118px;
}

#recurso-ritmos .footer {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(153,180,214,0.14);
  border-radius: var(--border-radius-lg);
  background: rgba(9,16,34,0.38);
  text-align: center;
}

@media (max-width: 768px) {
  #recurso-ritmos.ritmos-circadianos-module .container,
  #recurso-ritmos .header-content,
  #recurso-ritmos .intro-card,
  #recurso-ritmos .clock-container,
  #recurso-ritmos .breathing-container,
  #recurso-ritmos .calculator-container,
  #recurso-ritmos .tracker-container,
  #recurso-ritmos .quiz-container {
    padding: 1rem;
  }

  #recurso-ritmos .nav-pill {
    padding: 0.48rem 0.62rem;
    font-size: 0.78rem;
  }

  #recurso-ritmos .nav-pill i {
    display: none;
  }

  #recurso-ritmos .clock-face {
    width: 230px;
    height: 230px;
  }
}

/* Ritmos: encapsulado visual posterior a la integracion sin iframe */
#recurso-ritmos.ritmos-circadianos-module {
  --ritmos-bg: #0b1328;
  --ritmos-panel: #101b35;
  --ritmos-panel-soft: #162440;
  --ritmos-ink: #f5f8ff;
  --ritmos-muted: #c4d2e8;
  --ritmos-subtle: #8ea3bf;
  --ritmos-cyan: #67d7e8;
  --ritmos-indigo: #5f76d8;
  --ritmos-border: rgba(148, 180, 214, 0.22);
  background:
    radial-gradient(circle at 18% 0%, rgba(103, 215, 232, 0.12), transparent 34%),
    linear-gradient(145deg, #0a1124 0%, #101a33 54%, #14233f 100%) !important;
  border: 1px solid rgba(148, 180, 214, 0.18) !important;
  color: var(--ritmos-ink) !important;
}

#recurso-ritmos.ritmos-circadianos-module .container {
  background: transparent;
}

#recurso-ritmos .header {
  margin: 0 0 0.9rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

#recurso-ritmos .header-content {
  background:
    radial-gradient(circle at 18% 24%, rgba(103, 215, 232, 0.15), transparent 32%),
    linear-gradient(135deg, #0c1730 0%, #111f3c 58%, #172a4c 100%) !important;
  border: 1px solid rgba(103, 215, 232, 0.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.32) !important;
}

#recurso-ritmos .main-title {
  color: var(--ritmos-ink) !important;
  text-shadow: none !important;
}

#recurso-ritmos .main-title i {
  color: var(--ritmos-cyan) !important;
  filter: drop-shadow(0 0 10px rgba(103, 215, 232, 0.38));
}

#recurso-ritmos .subtitle {
  color: var(--ritmos-muted) !important;
}

#recurso-ritmos .nav-container,
#recurso-ritmos .main-content,
#recurso-ritmos .section {
  background: transparent !important;
}

#recurso-ritmos .main-content {
  min-height: 0 !important;
}

#recurso-ritmos .nav-pills {
  background: rgba(7, 15, 32, 0.72) !important;
  border-color: var(--ritmos-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#recurso-ritmos .nav-pill {
  color: var(--ritmos-muted) !important;
}

#recurso-ritmos .nav-pill.active {
  background: linear-gradient(135deg, rgba(95, 118, 216, 0.92), rgba(55, 86, 164, 0.92)) !important;
  color: #fff !important;
}

#recurso-ritmos .intro-card,
#recurso-ritmos .clock-container,
#recurso-ritmos .breathing-container,
#recurso-ritmos .calculator-container,
#recurso-ritmos .tracker-container,
#recurso-ritmos .quiz-container {
  background: rgba(16, 27, 53, 0.82) !important;
  border-color: var(--ritmos-border) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26) !important;
}

#recurso-ritmos .intro-card {
  padding-bottom: 1rem !important;
  background: rgba(14, 24, 48, 0.82) !important;
}

#recurso-ritmos h1,
#recurso-ritmos h2,
#recurso-ritmos h3,
#recurso-ritmos h4,
#recurso-ritmos p {
  text-align: inherit;
  text-shadow: none !important;
}

#recurso-ritmos h2,
#recurso-ritmos .sleep-cycles-info h3,
#recurso-ritmos .routine-schedule h3,
#recurso-ritmos .sleep-tips h3,
#recurso-ritmos .experiment-form h3 {
  color: #8fa4ff !important;
}

#recurso-ritmos .section-description,
#recurso-ritmos .intro-text,
#recurso-ritmos .point p,
#recurso-ritmos .sleep-cycles-info p,
#recurso-ritmos .footer-content p,
#recurso-ritmos .footer-note {
  color: var(--ritmos-muted) !important;
}

#recurso-ritmos .key-points {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin: 0.75rem 0 0.9rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#recurso-ritmos .point,
#recurso-ritmos .sleep-cycles-info,
#recurso-ritmos .schedule-item,
#recurso-ritmos .tip,
#recurso-ritmos .instruction-step,
#recurso-ritmos .progress-item,
#recurso-ritmos .answer {
  background: rgba(22, 36, 64, 0.72) !important;
  border-color: rgba(148, 180, 214, 0.18) !important;
}

#recurso-ritmos .point {
  background: rgba(25, 39, 68, 0.84) !important;
  border-color: rgba(103, 215, 232, 0.14) !important;
}

#recurso-ritmos .point h3,
#recurso-ritmos .tip h4,
#recurso-ritmos .step-content h4 {
  color: var(--ritmos-ink) !important;
}

#recurso-ritmos .point i,
#recurso-ritmos .intro-icon i,
#recurso-ritmos .activity i,
#recurso-ritmos .tip i,
#recurso-ritmos .time,
#recurso-ritmos .counter,
#recurso-ritmos .progress-value,
#recurso-ritmos .stat-value {
  color: var(--ritmos-cyan) !important;
}

#recurso-ritmos .sleep-cycles-info {
  margin-top: 0.65rem !important;
  background: linear-gradient(135deg, rgba(95, 118, 216, 0.14), rgba(103, 215, 232, 0.08)) !important;
}

#recurso-ritmos .footer {
  margin-top: 0.35rem !important;
  padding: 0.55rem 0.75rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#recurso-ritmos .footer-content {
  max-width: 680px;
  margin: 0 auto;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(148, 180, 214, 0.16);
}

#recurso-ritmos .footer-content p {
  margin: 0 0 0.18rem !important;
  font-size: 0.86rem !important;
  font-weight: 400 !important;
}

#recurso-ritmos .footer-note {
  font-size: 0.78rem !important;
  opacity: 0.82;
}

@media (max-width: 768px) {
  #recurso-ritmos .key-points {
    grid-template-columns: 1fr !important;
  }
}

/* Diario: ancho de lectura más cómodo para el párrafo introductorio */
#diario-suenos > p {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.72 !important;
}

/* Bienvenida: consolidación final del bloque editorial */
#bienvenida {
  max-width: 825px !important;
  margin: var(--section-gap) auto !important;
  padding: 2.6rem 2.2rem !important;
}

#bienvenida .section-title {
  display: block !important;
  width: min(620px, 100%) !important;
  max-width: 620px !important;
  margin: 0 auto 2.2rem !important;
  text-align: left !important;
  padding-bottom: 0.55rem !important;
  border-bottom: 2px solid #b9976f !important;
}

#bienvenida .section-title::after {
  content: none !important;
  display: none !important;
}

#bienvenida p {
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
  line-height: 1.75 !important;
}

#bienvenida .quote-box {
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Bienvenida: interlineado editorial */
#bienvenida p {
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 1.15rem !important;
  text-align: left !important;
  text-align-last: left !important;
  line-height: 1.62 !important;
  font-size: 1.03rem !important;
}

#bienvenida .texto-apertura {
  line-height: 1.64 !important;
}

#bienvenida .texto-reflexivo {
  line-height: 1.68 !important;
  margin-top: 1.65rem !important;
  margin-bottom: 1.35rem !important;
}

#bienvenida .quote-box {
  line-height: 1.58 !important;
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/* Diario: bajar apenas el botón del CTA */
#bloque-diario .diario-accion {
  margin-top: 0.42rem !important;
}

/* Johari: aislamiento final de idioma y acabado editorial */
#recurso-johari .language-switcher,
#recurso-johari .lang-switcher,
#recurso-johari .language-selector,
#recurso-johari .lang-selector,
#recurso-johari .lang-toggle,
#recurso-johari .btn-es,
#recurso-johari .btn-pt,
#recurso-johari .btn-en,
#recurso-johari [data-lang] {
  display: none !important;
}

#recurso-johari .lang-es,
#recurso-johari .lang-pt,
#recurso-johari .lang-en {
  display: none !important;
}

body.modo-es #recurso-johari .lang-es,
body.modo-pt #recurso-johari .lang-pt,
body.modo-en #recurso-johari .lang-en {
  display: inline !important;
}

body.modo-es #recurso-johari .johari-stats .lang-es,
body.modo-pt #recurso-johari .johari-stats .lang-pt,
body.modo-en #recurso-johari .johari-stats .lang-en {
  display: block !important;
}

body.modo-es #recurso-johari .johari-preview-pills .lang-es,
body.modo-pt #recurso-johari .johari-preview-pills .lang-pt,
body.modo-en #recurso-johari .johari-preview-pills .lang-en {
  display: inline-flex !important;
}

#recurso-johari.johari-integrado {
  --johari-bg: #7fa8c6 !important;
  --johari-ink: #213447 !important;
  --johari-muted: #546173 !important;
  --johari-teal: #5f86a7 !important;
  --johari-gold: #b9976f !important;
  --johari-line: rgba(95, 134, 167, 0.16) !important;
  max-width: 900px !important;
  width: min(92vw, 900px) !important;
  background: #7fa8c6 !important;
  border-radius: 18px !important;
  padding: 1rem 1rem 4.35rem !important;
  box-shadow: 0 22px 44px rgba(72, 109, 137, 0.18) !important;
}

#recurso-johari .johari-header {
  margin: 0 0 2rem !important;
  padding: 2.15rem 1rem 0.9rem !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

#recurso-johari .johari-header h2 {
  color: #fff !important;
  font-family: "Lato", sans-serif !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 2px 8px rgba(44, 78, 105, 0.25) !important;
}

#recurso-johari .johari-header h2 i {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #5f86a7 !important;
  box-shadow: 0 6px 12px rgba(44, 78, 105, 0.22) !important;
}

#recurso-johari .johari-badge {
  margin-bottom: 1.1rem !important;
  padding: 0.6rem 1.45rem !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #557998 !important;
  box-shadow: none !important;
}

#recurso-johari .johari-header p:not(.johari-badge) {
  max-width: 720px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

#recurso-johari .johari-stats {
  margin-top: 2.85rem !important;
  gap: 0.8rem !important;
}

#recurso-johari .johari-stats div {
  padding: 1.1rem 0.75rem !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

#recurso-johari .johari-info-card,
#recurso-johari .johari-panel {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(51, 91, 122, 0.08) !important;
}

#recurso-johari .johari-info-card {
  padding: 1.65rem 2rem !important;
}

#recurso-johari .johari-info-card h3 {
  color: #5d7f9f !important;
  font-family: "Lato", sans-serif !important;
  font-size: 1.42rem !important;
  font-weight: 900 !important;
}

#recurso-johari .johari-info-card h3::before {
  display: inline-block !important;
  margin-right: 0.42rem !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

#recurso-johari .johari-info-card:nth-child(1) h3::before { content: "\f02d" !important; }
#recurso-johari .johari-info-card:nth-child(2) h3::before { content: "\f004" !important; }
#recurso-johari .johari-info-card:nth-child(3) h3::before { content: "\f00a" !important; }
#recurso-johari .johari-info-card:nth-child(4) h3::before { content: "\f52b" !important; }

#recurso-johari .johari-info-card p {
  color: #566173 !important;
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
}

#recurso-johari .johari-preview-card {
  min-height: 130px !important;
  padding: 1.35rem 1.1rem !important;
  border-radius: 9px !important;
  box-shadow: 0 6px 13px rgba(51, 91, 122, 0.10) !important;
}

#recurso-johari .johari-preview-card::before {
  display: block !important;
  margin-bottom: 0.55rem !important;
  color: rgba(255, 255, 255, 0.98) !important;
  font-family: "Font Awesome 6 Free" !important;
  font-size: 1.8rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#recurso-johari .johari-preview-publica::before { content: "\f06e" !important; }
#recurso-johari .johari-preview-oculta::before { content: "\f06e" !important; }
#recurso-johari .johari-preview-ciega::before { content: "\f21b" !important; }
#recurso-johari .johari-preview-potencial::before { content: "\f4d8" !important; }

#recurso-johari .johari-preview-card strong {
  font-size: 1.16rem !important;
  font-weight: 900 !important;
}

#recurso-johari .johari-preview-card p {
  font-size: 0.79rem !important;
  font-weight: 800 !important;
}

#recurso-johari .johari-preview-publica { background: #66a985 !important; }
#recurso-johari .johari-preview-oculta { background: #d0a067 !important; }
#recurso-johari .johari-preview-ciega { background: #bd8449 !important; }
#recurso-johari .johari-preview-potencial { background: #8271ad !important; }

#recurso-johari .johari-preview-pills {
  gap: 0.5rem !important;
}

#recurso-johari .johari-preview-pills span {
  padding: 0.38rem 0.78rem !important;
  background: #668dae !important;
  color: #fff !important;
  box-shadow: 0 3px 7px rgba(51, 91, 122, 0.14) !important;
}

#recurso-johari .johari-preview-pills span:last-child {
  background: #edf1f4 !important;
  color: #586477 !important;
}

#recurso-johari .johari-start-button {
  min-width: min(370px, 100%) !important;
  padding: 0.78rem 1.8rem !important;
  background: #7fa8c6 !important;
  border: 2px solid rgba(21, 30, 39, 0.86) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 0.98rem !important;
  font-weight: 900 !important;
}

#recurso-johari .johari-start-button:hover {
  background: #6f9ab9 !important;
  transform: translateY(-1px) !important;
}

#recurso-johari .johari-quadrant {
  border: 1px solid rgba(79, 142, 162, 0.14) !important;
  box-shadow: none !important;
}

#recurso-johari .johari-choice-group button {
  background: #f6fafb !important;
  border: 1px solid rgba(79, 142, 162, 0.18) !important;
}

#recurso-johari .johari-choice-group button.is-active,
#recurso-johari .johari-pill {
  background: rgba(79, 142, 162, 0.13) !important;
  border-color: rgba(79, 142, 162, 0.22) !important;
  color: #244a5c !important;
}

#recurso-johari .johari-footer {
  margin: 1.75rem auto 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

#recurso-johari .johari-footer span {
  display: block !important;
}

@media (max-width: 760px) {
  #recurso-johari.johari-integrado {
    width: calc(100% - 1.2rem) !important;
    padding: 0.75rem 0.75rem 2.4rem !important;
  }

  #recurso-johari .johari-header {
    padding: 1.8rem 0.5rem 0.75rem !important;
  }

  #recurso-johari .johari-stats,
  #recurso-johari .johari-preview-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  #recurso-johari .johari-info-card {
    padding: 1.45rem 1.1rem !important;
  }
}

/* Puertas oníricas: acercar cierre reflexivo a la última tarjeta */
#puertas-oniricas .dream-door-gallery {
  margin-bottom: 1.8rem !important;
}

#puertas-oniricas .dream-door-epilogue {
  margin-top: 2.2rem !important;
}

/* Glosario: anexo de consulta discreto */
#glosario {
  max-width: 825px !important;
  margin: calc(var(--section-gap) * 0.82) auto !important;
  padding: 2.35rem 2.2rem !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(74, 144, 164, 0.13) !important;
  box-shadow: 0 12px 28px rgba(43, 82, 102, 0.07) !important;
}

#glosario .section-title {
  width: min(620px, 100%) !important;
  max-width: 620px !important;
  margin: 0 auto 1.75rem !important;
  padding-bottom: 0.5rem !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(185, 151, 111, 0.75) !important;
}

#glosario .section-title::after {
  content: none !important;
  display: none !important;
}

#glosario .glosario-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  width: min(680px, 100%) !important;
  margin: 0 auto !important;
}

#glosario .glosario-item {
  padding: 1.15rem 1.2rem !important;
  border: 1px solid rgba(74, 144, 164, 0.12) !important;
  border-left: 3px solid rgba(185, 151, 111, 0.62) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: none !important;
}

#glosario .glosario-item h4 {
  margin: 0 0 0.5rem !important;
  color: #24364a !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
}

#glosario .glosario-item p {
  margin: 0 !important;
  color: #4f6072 !important;
  font-size: 0.94rem !important;
  line-height: 1.58 !important;
  text-align: left !important;
  text-align-last: left !important;
}

@media (max-width: 720px) {
  #glosario {
    padding: 2rem 1.25rem !important;
  }

  #glosario .glosario-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   U1 · RESPONSIVE FINAL POLISH
   ========================================================= */

/* Transiciones finales: compactar aire acumulado sin tocar el ritmo global */
#glosario {
  margin-bottom: calc(var(--section-gap) * 0.48) !important;
}

#recurso-semilla .si-main {
  align-items: stretch !important;
  padding-bottom: 1.45rem !important;
}

#recurso-semilla .si-image-section {
  align-items: stretch !important;
}

#recurso-semilla .si-seed-image {
  height: 100% !important;
  min-height: 300px !important;
  object-fit: cover !important;
}

#recurso-semilla .si-science {
  margin-top: 0 !important;
}

#evaluacion {
  padding-top: 1.65rem !important;
  padding-bottom: 1.55rem !important;
}

#cierre-certificado {
  margin-top: calc(var(--section-gap) * 0.62) !important;
}

.bloque-acompanamiento {
  margin-bottom: 1.75rem !important;
}

#roadmap-completo.programa-roadmap {
  margin-top: 1.25rem !important;
  padding-top: 1.75rem !important;
}

#roadmap-completo.programa-roadmap > .wrap {
  padding-top: 1.75rem !important;
}

/* Tablet horizontal/vertical: mantener módulos centrados y sin compresión incómoda */
@media (min-width: 768px) and (max-width: 1024px) {
  #recurso-storybook {
    width: min(94vw, 980px) !important;
    padding-inline: 1rem !important;
  }

  #recurso-storybook .sb-cinema-screen,
  #recurso-storybook .storybook-screen,
  #recurso-storybook .cinema-container,
  #recurso-storybook .iframe-storybook {
    max-width: 100% !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26) !important;
  }

  #recurso-ritmos.ritmos-circadianos-module,
  #recurso-johari.johari-integrado,
  #evaluacion .qz-wrap,
  #roadmap-completo.programa-roadmap > .wrap {
    width: min(92vw, 900px) !important;
  }

  #recurso-ritmos .nav-pills {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #recurso-ritmos .nav-pills::-webkit-scrollbar {
    display: none;
  }

  #recurso-ritmos .nav-pill {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-width: max-content !important;
  }

  #recurso-johari .johari-stats,
  #recurso-johari .johari-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #roadmap-completo .unidades-grid {
    width: min(92%, 760px) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Mobile: evitar overflow, compactar padding interno y preservar legibilidad */
@media (max-width: 767px) {
  .nav-anclas-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .nav-anclas-inner {
    width: max-content !important;
    max-width: none !important;
    padding-inline: 0.75rem !important;
  }

  .ancla-item {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: max(0.85rem, 12px) !important;
  }

  #recurso-storybook {
    width: calc(100% - 1rem) !important;
    max-width: none !important;
    padding-inline: 0 !important;
    overflow: visible !important;
  }

  #recurso-storybook .sb-cinema-screen,
  #recurso-storybook .storybook-screen,
  #recurso-storybook .cinema-container,
  #recurso-storybook .iframe-storybook {
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    min-height: 480px !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24) !important;
  }

  #recurso-storybook .scene-content {
    padding: 1rem !important;
  }

  #recurso-storybook .sb-controls {
    flex-wrap: wrap !important;
    gap: 0.65rem !important;
  }

  #recurso-storybook .sb-btn {
    min-width: 0 !important;
    white-space: normal !important;
  }

  #recurso-ritmos.ritmos-circadianos-module {
    width: calc(100% - 1rem) !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  #recurso-ritmos .nav-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #recurso-ritmos .nav-pills {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: max-content !important;
    max-width: none !important;
    padding: 0.4rem !important;
  }

  #recurso-ritmos .nav-pill,
  #recurso-ritmos .mode-btn,
  #recurso-ritmos .btn-primary,
  #recurso-ritmos .btn-secondary {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    font-size: max(0.85rem, 12px) !important;
    white-space: nowrap !important;
  }

  #recurso-ritmos .header-content,
  #recurso-ritmos .intro-card,
  #recurso-ritmos .clock-container,
  #recurso-ritmos .breathing-container,
  #recurso-ritmos .calculator-container,
  #recurso-ritmos .tracker-container,
  #recurso-ritmos .quiz-container {
    padding: 1rem !important;
  }

  #recurso-ritmos .key-points,
  #recurso-ritmos .schedule-grid,
  #recurso-ritmos .tips-grid,
  #recurso-ritmos .form-grid,
  #recurso-ritmos .progress-grid,
  #recurso-ritmos .answers {
    grid-template-columns: 1fr !important;
  }

  #recurso-johari.johari-integrado {
    width: calc(100% - 1rem) !important;
    padding: 0.85rem 0.85rem 2.2rem !important;
    overflow: visible !important;
  }

  #recurso-johari .johari-header {
    padding-inline: 0.5rem !important;
  }

  #recurso-johari .johari-stats,
  #recurso-johari .johari-preview-grid,
  #recurso-johari .johari-workspace {
    grid-template-columns: 1fr !important;
  }

  #recurso-johari .johari-preview-pills,
  #recurso-johari .johari-trust-row,
  #recurso-johari .johari-choice-group {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  #recurso-johari .johari-preview-pills span,
  #recurso-johari .johari-trust-row span,
  #recurso-johari .johari-choice-group button {
    flex: 0 0 auto !important;
    font-size: max(0.85rem, 12px) !important;
  }

  #recurso-semilla .si-main {
    align-items: start !important;
    padding-bottom: 1rem !important;
  }

  #recurso-semilla .si-seed-image {
    height: auto !important;
    min-height: 0 !important;
  }

  #recurso-semilla .si-science {
    margin-top: 0 !important;
  }

  #evaluacion {
    padding: 1.15rem 0.5rem 1.05rem !important;
  }

  #evaluacion .qz-wrap {
    width: 100% !important;
    max-width: none !important;
    border-radius: 8px !important;
    box-shadow: 0 14px 32px rgba(40, 32, 24, 0.1) !important;
  }

  #evaluacion .qz-intro,
  #evaluacion .qz-results,
  #evaluacion .qz-card {
    padding: 1.15rem !important;
  }

  #evaluacion .qz-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    display: grid !important;
    gap: 0.7rem !important;
  }

  #evaluacion .qz-btn,
  #evaluacion .qz-opt,
  #evaluacion .qz-sc,
  #evaluacion .qz-tf button {
    width: 100% !important;
    white-space: normal !important;
    font-size: max(0.85rem, 12px) !important;
  }

  #cierre-certificado {
    margin-top: 1.4rem !important;
  }

  #cierre-certificado img {
    max-width: 100% !important;
  }

  .bloque-acompanamiento {
    width: calc(100% - 1rem) !important;
    margin-bottom: 1.2rem !important;
    padding: 1.35rem !important;
  }

  #roadmap-completo.programa-roadmap {
    margin-top: 0.75rem !important;
    padding: 1.25rem 0 2rem !important;
  }

  #roadmap-completo.programa-roadmap > .wrap {
    width: calc(100% - 1rem) !important;
    padding: 1.25rem 0.5rem !important;
  }

  #roadmap-completo .rmap-header {
    gap: 0.8rem !important;
    margin-bottom: 1.35rem !important;
  }

  #roadmap-completo .rmap-progress-mini {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  #roadmap-completo .unidades-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  #roadmap-completo .cta-roadmap-section {
    padding: 1.15rem !important;
  }
}

@media (max-width: 440px) {
  #recurso-storybook .sb-title-main,
  #recurso-storybook .sb-chapter-title,
  #recurso-storybook .sb-section-title {
    font-size: clamp(1.15rem, 7vw, 1.55rem) !important;
  }

  #recurso-ritmos .main-title,
  #recurso-johari .johari-header h2,
  #evaluacion .qz-intro-title,
  #evaluacion .qz-header-title,
  #roadmap-completo .rmap-header h2 {
    font-size: clamp(1.25rem, 7vw, 1.55rem) !important;
  }

  #evaluacion .qz-stats {
    grid-template-columns: 1fr !important;
  }
}

/* Ritmos Circadianos: rollback visual parcial, integración compacta */
#recurso-ritmos.ritmos-circadianos-module {
  width: min(92vw, 880px) !important;
  max-width: 880px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(102, 217, 232, 0.16), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(125, 153, 255, 0.12), transparent 34%),
    linear-gradient(135deg, #0d1327 0%, #121b35 50%, #172541 100%) !important;
  border: 1px solid rgba(153, 180, 214, 0.18) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.42) !important;
}

#recurso-ritmos.ritmos-circadianos-module .container {
  padding: 12px 16px 12px !important;
}

#recurso-ritmos .header {
  margin: 0 0 0.65rem !important;
  padding: 0 !important;
}

#recurso-ritmos .header-content {
  padding: 1rem 1.2rem !important;
  background:
    radial-gradient(circle at 20% 22%, rgba(102, 217, 232, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(18, 31, 62, 0.98), rgba(11, 20, 42, 0.98)) !important;
  border-color: rgba(102, 217, 232, 0.24) !important;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#recurso-ritmos .nav-container {
  margin: 0 0 0.65rem !important;
}

#recurso-ritmos .nav-pills {
  background: rgba(7, 15, 32, 0.82) !important;
  border-color: rgba(153, 180, 214, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

#recurso-ritmos .nav-pill.active {
  background: linear-gradient(135deg, rgba(83, 111, 214, 0.92), rgba(42, 72, 143, 0.92)) !important;
}

#recurso-ritmos .main-content,
#recurso-ritmos .section.active {
  min-height: 0 !important;
}

#recurso-ritmos .intro-card,
#recurso-ritmos .clock-container,
#recurso-ritmos .breathing-container,
#recurso-ritmos .calculator-container,
#recurso-ritmos .tracker-container,
#recurso-ritmos .quiz-container {
  padding: 1.1rem !important;
  background:
    linear-gradient(145deg, rgba(22, 36, 64, 0.84), rgba(13, 24, 50, 0.82)) !important;
  border-color: rgba(153, 180, 214, 0.18) !important;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

#recurso-ritmos .key-points {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.85rem !important;
  margin: 0.65rem 0 0.75rem !important;
}

#recurso-ritmos .key-points .point:last-child {
  grid-column: 1 / -1 !important;
  align-items: center !important;
}

#recurso-ritmos .point {
  background: rgba(25, 39, 68, 0.82) !important;
  border-color: rgba(102, 217, 232, 0.16) !important;
}

#recurso-ritmos .sleep-cycles-info {
  margin-top: 0.55rem !important;
}

#recurso-ritmos .footer {
  margin-top: 0.2rem !important;
  padding: 0.25rem 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#recurso-ritmos .footer-content {
  max-width: 620px !important;
  padding-top: 0.5rem !important;
  border-top: 1px solid rgba(153, 180, 214, 0.14) !important;
}

#recurso-ritmos .footer-content p {
  margin: 0 0 0.12rem !important;
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
}

#recurso-ritmos .footer-note {
  font-size: 0.78rem !important;
  opacity: 0.76 !important;
}

@media (max-width: 767px) {
  #recurso-ritmos.ritmos-circadianos-module {
    width: calc(100% - 1rem) !important;
    overflow: hidden !important;
  }

  #recurso-ritmos.ritmos-circadianos-module .container {
    padding: 10px !important;
  }

  #recurso-ritmos .header-content,
  #recurso-ritmos .intro-card,
  #recurso-ritmos .clock-container,
  #recurso-ritmos .breathing-container,
  #recurso-ritmos .calculator-container,
  #recurso-ritmos .tracker-container,
  #recurso-ritmos .quiz-container {
    padding: 0.95rem !important;
  }

  #recurso-ritmos .nav-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #recurso-ritmos .nav-pills {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: max-content !important;
    max-width: none !important;
  }

  #recurso-ritmos .key-points {
    grid-template-columns: 1fr !important;
  }

  #recurso-ritmos .key-points .point:last-child {
    grid-column: auto !important;
  }
}

/* Hero -> Recorrido: puente editorial compacto */
.nav-anclas-bar {
  margin-top: 0 !important;
  box-shadow: 0 8px 18px rgba(40, 52, 65, 0.04) !important;
}

.nav-anclas-inner {
  min-height: 46px !important;
}

.nav-anclas-inner .ancla-item {
  padding-top: 0.78rem !important;
  padding-bottom: 0.72rem !important;
  font-size: 0.82rem !important;
}

#recorrido.roadmap-preview-block {
  margin-top: 1.35rem !important;
  padding-top: 1.15rem !important;
  padding-bottom: 1.45rem !important;
}

#recorrido.roadmap-preview-block > .progress-box {
  margin: 0 0 0.95rem !important;
  padding: 0 0 0.8rem !important;
}

#recorrido.roadmap-preview-block > .progress-box .progress-head {
  margin-bottom: 0.35rem !important;
  font-size: 0.84rem !important;
}

#recorrido.roadmap-preview-block > .progress-box .progress-track {
  height: 4px !important;
}

#recorrido.roadmap-preview-block .programa-roadmap,
#recorrido.roadmap-preview-block .programa-roadmap > .wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#recorrido.roadmap-preview-block .rmap-header {
  margin-bottom: 0.85rem !important;
  row-gap: 0.5rem !important;
}

#recorrido.roadmap-preview-block .rmap-kicker {
  margin-bottom: 0.28rem !important;
}

#recorrido.roadmap-preview-block .roadmap-preview-text {
  margin-top: 0.42rem !important;
  line-height: 1.48 !important;
}

#recorrido.roadmap-preview-block .roadmap-preview-frame {
  padding: 10px !important;
}

#recorrido.roadmap-preview-block .unidades-grid {
  gap: 8px !important;
}

#recorrido.roadmap-preview-block .roadmap-preview-cta {
  margin-top: 1rem !important;
}

@media (max-width: 767px) {
  .nav-anclas-inner {
    min-height: 42px !important;
  }

  .nav-anclas-inner .ancla-item {
    padding-top: 0.65rem !important;
    padding-bottom: 0.6rem !important;
  }

  #recorrido.roadmap-preview-block {
    margin-top: 0.9rem !important;
    padding: 1rem 0.9rem 1.2rem !important;
  }

  #recorrido.roadmap-preview-block > .progress-box {
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.65rem !important;
  }

  #recorrido.roadmap-preview-block .rmap-header {
    margin-bottom: 0.7rem !important;
    row-gap: 0.6rem !important;
  }

  #recorrido.roadmap-preview-block .roadmap-preview-frame {
    padding: 8px !important;
  }
}

/* =========================================================
   U1 · HERO ACCESS BADGE
   ========================================================= */

.hero.header-unidad-premium .wrap.hero-content > .unidad-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.78rem !important;
  width: fit-content !important;
  max-width: min(92vw, 620px) !important;
  margin: 0 auto 1.45rem !important;
  padding: 0.54rem 1.18rem !important;
  border: 1px solid rgba(182, 144, 100, 0.34) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.78), rgba(250, 244, 235, 0.66)) !important;
  color: #8b6946 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 6px 18px rgba(58, 45, 32, 0.055) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: clamp(0.74rem, 0.7rem + 0.12vw, 0.82rem) !important;
  font-weight: 850 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

.hero.header-unidad-premium .wrap.hero-content > .unidad-label::before,
.hero.header-unidad-premium .wrap.hero-content > .unidad-label::after {
  content: "" !important;
  flex: 0 0 auto !important;
  width: clamp(1.8rem, 5vw, 3.2rem) !important;
  height: 1px !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, rgba(187, 144, 92, 0), rgba(187, 144, 92, 0.58)) !important;
  box-shadow: none !important;
}

.hero.header-unidad-premium .wrap.hero-content > .unidad-label::after {
  background: linear-gradient(90deg, rgba(187, 144, 92, 0.58), rgba(187, 144, 92, 0)) !important;
}

@media (max-width: 640px) {
  .hero.header-unidad-premium .wrap.hero-content > .unidad-label {
    max-width: calc(100vw - 2rem) !important;
    margin-bottom: 1.18rem !important;
    padding: 0.52rem 0.82rem !important;
    gap: 0.5rem !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.115em !important;
    white-space: normal !important;
  }

  .hero.header-unidad-premium .wrap.hero-content > .unidad-label::before,
  .hero.header-unidad-premium .wrap.hero-content > .unidad-label::after {
    width: 1.2rem !important;
  }
}

/* =========================================================
   U1 · MOBILE READABILITY POLISH
   ========================================================= */

@media (max-width: 480px) {
  .section-title,
  .card-title,
  .dato-title,
  .cifras-title,
  .conceptos-title,
  #recurso-storybook .sb-section-title,
  #recurso-storybook .sb-chapter-title,
  #recurso-ritmos h2,
  #recurso-johari h2,
  #recurso-puertas h2,
  .roadmap-preview-block .rmap-header h2,
  .unidad-card h3 {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1.16 !important;
  }

  section#datos-curiosos {
    padding-left: clamp(1rem, 5vw, 1.35rem) !important;
    padding-right: clamp(1rem, 5vw, 1.35rem) !important;
  }

  section#datos-curiosos .section-title {
    max-width: 100% !important;
    font-size: clamp(1.42rem, 7.1vw, 1.72rem) !important;
    letter-spacing: 0 !important;
  }

  section#datos-curiosos .section-title span {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .hero.header-unidad-premium .hero-credentials {
    max-width: calc(100vw - 2.2rem) !important;
    font-size: clamp(0.66rem, 2.75vw, 0.74rem) !important;
    letter-spacing: 0.1em !important;
    line-height: 1.35 !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    opacity: 0.92 !important;
  }

  .hero.header-unidad-premium .cta-explorar {
    color: rgba(42, 58, 70, 0.72) !important;
    opacity: 1 !important;
  }

  .hero.header-unidad-premium .cta-microtag {
    color: rgba(42, 58, 70, 0.54) !important;
    opacity: 1 !important;
  }

  #recorrido.roadmap-preview-block .roadmap-preview-frame {
    overflow: visible !important;
    padding: 9px !important;
  }

  #recorrido.roadmap-preview-block .unidades-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  #recorrido.roadmap-preview-block .unidad-card {
    min-width: 0 !important;
    min-height: 156px !important;
    overflow: hidden !important;
  }

  #recorrido.roadmap-preview-block .card-img-wrap {
    min-height: 72px !important;
    aspect-ratio: 1.45 / 1 !important;
  }

  #recorrido.roadmap-preview-block .card-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #recorrido.roadmap-preview-block .card-body {
    min-height: 66px !important;
    padding: 0.46rem 0.48rem 0.52rem !important;
  }

  #recorrido.roadmap-preview-block .card-badge {
    max-width: calc(100% - 14px) !important;
    white-space: normal !important;
    line-height: 1.12 !important;
  }

  #recorrido.roadmap-preview-block .card-lock-overlay {
    display: grid !important;
    place-items: center !important;
    padding-top: 0 !important;
  }

  #recorrido.roadmap-preview-block .lock-circle {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    line-height: 1 !important;
    transform: translateY(-2px) !important;
  }
}

@media (max-width: 370px) {
  section#datos-curiosos .section-title {
    font-size: 1.34rem !important;
  }

  .hero.header-unidad-premium .hero-credentials {
    font-size: 0.64rem !important;
    letter-spacing: 0.075em !important;
  }

  #recorrido.roadmap-preview-block .unidad-card {
    min-height: 164px !important;
  }
}

/* =========================================================
   U1 V11 PREMIUM · EDITORIAL SYSTEM
   Local exploration file: index-v11-premium.html
   ========================================================= */

body.v11-premium {
  --v11-reading: 760px;
  --v11-wide: 1040px;
  --v11-border: rgba(55, 83, 102, 0.11);
  --v11-bronze: #b9976f;
  --v11-card: rgba(255, 255, 255, 0.91);
  --v11-radius: 20px;
  --v11-radius-small: 12px;
  --v11-shadow: 0 12px 34px rgba(34, 54, 69, 0.065);
  --v11-shadow-focus: 0 17px 42px rgba(34, 54, 69, 0.085);
  --v11-gap: clamp(2.8rem, 5vw, 4.6rem);
  background: linear-gradient(180deg, #f7fafb 0%, #f1f7f7 45%, #fbfaf7 100%);
}

body.v11-premium main.wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  padding: 0;
}

/* New reading arc: quick orientation first, full program near the close. */
body.v11-premium main.wrap > #recorrido { order: 4; }
body.v11-premium main.wrap > .bloque-visual { order: 6; }
body.v11-premium main.wrap > #bienvenida { order: 10; }
body.v11-premium main.wrap > .metodo-skills { order: 20; }
body.v11-premium main.wrap > #recurso-conceptos { order: 30; }
body.v11-premium main.wrap > #datos-curiosos { order: 34; }
body.v11-premium main.wrap > #recurso-fabrica { order: 38; }
body.v11-premium main.wrap > #origen-pregunta { order: 39; }
body.v11-premium main.wrap > #diario-suenos { order: 40; }
body.v11-premium main.wrap > #bloque-diario { order: 41; }
body.v11-premium main.wrap > #recurso-storybook { order: 50; }
body.v11-premium main.wrap > #entre-la-certeza { order: 58; }
body.v11-premium main.wrap > #recurso-semilla { order: 60; }
body.v11-premium main.wrap > #perspectivas-psicologicas { order: 68; }
body.v11-premium main.wrap > #recurso-ritmos { order: 70; }
body.v11-premium main.wrap > #laboratorio { order: 71; }
body.v11-premium main.wrap > .media-container { order: 78; }
body.v11-premium main.wrap > #recurso-johari { order: 80; }
body.v11-premium main.wrap > #puertas-oniricas { order: 90; }
body.v11-premium main.wrap > #glosario { order: 100; }
body.v11-premium main.wrap > #evaluacion { order: 110; }
body.v11-premium main.wrap > #cierre-certificado { order: 120; }
body.v11-premium main.wrap > .bridge-postcert { order: 125; }
body.v11-premium main.wrap > .bloque-acompanamiento { order: 130; }
body.v11-premium main.wrap > #roadmap-completo { order: 140; }
body.v11-premium main.wrap > #referencias { order: 150; }

body.v11-premium #recorrido {
  display: block !important;
}

body.v11-premium main.wrap > #recurso-storybook {
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.v11-premium main.wrap > #entre-la-certeza.content-box {
  width: min(calc(100% - 3rem), 825px) !important;
  max-width: 825px !important;
  margin: 3.5rem auto 2rem !important;
  border-top: 4px solid #b9976f !important;
}

body.v11-premium #entre-la-certeza .certeza-container {
  align-items: flex-start !important;
  gap: 40px !important;
  margin-top: 20px !important;
}

body.v11-premium main.wrap > :is(
  #bienvenida,
  #origen-pregunta,
  #recurso-conceptos,
  #diario-suenos,
  #bloque-diario,
  #recurso-storybook,
  #recurso-semilla,
  #recurso-ritmos,
  #laboratorio,
  #recurso-johari,
  #puertas-oniricas,
  #glosario,
  #evaluacion,
  #cierre-certificado,
  #recorrido,
  #roadmap-completo
) {
  scroll-margin-top: 82px;
}

body.v11-premium .hero.header-unidad-premium .cta-explorar {
  color: rgba(39, 57, 70, 0.78) !important;
  opacity: 1 !important;
}

body.v11-premium .hero.header-unidad-premium .cta-microtag {
  color: rgba(39, 57, 70, 0.62) !important;
  opacity: 1 !important;
}

body.v11-premium :is(
  #bienvenida,
  #origen-pregunta,
  #diario-suenos,
  #entre-la-certeza,
  #perspectivas-psicologicas,
  #glosario,
  #cierre-certificado,
  #referencias
) {
  width: min(calc(100% - 3rem), var(--v11-reading)) !important;
  max-width: var(--v11-reading) !important;
  margin: var(--v11-gap) auto 0 !important;
  padding: clamp(1.6rem, 3.6vw, 2.7rem) !important;
  border: 1px solid var(--v11-border) !important;
  border-radius: var(--v11-radius) !important;
  background: var(--v11-card) !important;
  box-shadow: var(--v11-shadow) !important;
}

@media (min-width: 641px) {
  body.v11-premium main.wrap > #bienvenida {
    margin-top: 3rem !important;
  }
}

body.v11-premium :is(
  #recurso-conceptos,
  #bloque-diario,
  #recurso-storybook,
  #recurso-semilla,
  #recurso-ritmos,
  #laboratorio,
  #recurso-johari,
  #puertas-oniricas,
  #evaluacion,
  .bloque-acompanamiento
) {
  width: min(calc(100% - 3rem), var(--v11-wide)) !important;
  max-width: var(--v11-wide) !important;
  margin: var(--v11-gap) auto 0 !important;
  border-radius: var(--v11-radius) !important;
  border-color: var(--v11-border) !important;
  box-shadow: var(--v11-shadow) !important;
  overflow: hidden;
}

/* Conceptos: el panel oscuro conserva una escala editorial propia. */
body.v11-premium main.wrap > #recurso-conceptos {
  width: min(calc(100% - 3rem), 830px) !important;
  max-width: 830px !important;
  margin-top: 2.4rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.v11-premium #recurso-conceptos .conceptos-caption {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
}

body.v11-premium #origen-pregunta .conceptos-cierre {
  max-width: 660px !important;
  margin: 1.4rem auto 0 !important;
}

body.v11-premium main.wrap > #recurso-fabrica {
  width: min(calc(100% - 3rem), 825px) !important;
  max-width: 825px !important;
  margin-top: 2.6rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.v11-premium #recurso-fabrica .fabrica-nocturna {
  padding-top: 3rem !important;
  border-radius: 20px !important;
}

body.v11-premium #recurso-fabrica .fabrica-nocturna .fn-header {
  margin-bottom: 2.7rem !important;
  padding: 2rem 1.6rem 1.7rem !important;
}

body.v11-premium #recurso-fabrica .fabrica-nocturna .fn-title {
  font-size: clamp(1.75rem, 4.2vw, 2.45rem) !important;
}

body.v11-premium main.wrap > #origen-pregunta {
  width: min(calc(100% - 3rem), 760px) !important;
  max-width: 760px !important;
  margin-top: 2.6rem !important;
  padding: clamp(1.8rem, 3.2vw, 2.45rem) !important;
}

body.v11-premium #origen-pregunta .section-title {
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(1.72rem, 3.1vw, 2.12rem) !important;
  font-weight: 400 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  color: #263a4d !important;
  margin-bottom: 1.25rem !important;
}

body.v11-premium main.wrap > #recurso-semilla {
  margin-top: 2.8rem !important;
  margin-bottom: 2.8rem !important;
}

body.v11-premium #recurso-semilla .si-header {
  padding: 2.05rem 1.6rem 1.6rem !important;
}

body.v11-premium #recurso-semilla .si-header h1 {
  font-size: clamp(2rem, 4.1vw, 2.72rem) !important;
  line-height: 1.12 !important;
  margin-bottom: 0.45rem !important;
}

body.v11-premium #recurso-semilla .si-header p {
  font-size: clamp(0.96rem, 1.75vw, 1.12rem) !important;
  line-height: 1.42 !important;
  margin: 0 auto !important;
  text-align: center !important;
}

body.v11-premium #recurso-semilla .si-main {
  gap: 1.5rem !important;
  padding: 2rem 2.3rem 1.55rem !important;
}

body.v11-premium #recurso-semilla .si-quote-section,
body.v11-premium #recurso-semilla .si-concept-section,
body.v11-premium #recurso-semilla .si-science {
  margin-top: 0 !important;
}

body.v11-premium #recurso-semilla .si-science {
  padding: 1.85rem 2.2rem !important;
}

body.v11-premium #recurso-semilla .si-science-title {
  margin-bottom: 1.2rem !important;
  font-size: clamp(1.35rem, 2.45vw, 1.78rem) !important;
}

body.v11-premium #recurso-semilla .si-interactive {
  padding: 1.35rem 1.5rem 2rem !important;
  gap: 0.8rem !important;
}

@media (min-width: 641px) and (max-width: 1024px) {
  body.v11-premium main.wrap > #recurso-conceptos {
    width: min(calc(100% - 1.5rem), 760px) !important;
    max-width: 760px !important;
  }
}

/* Diario: el widget acompana al articulo sin ampliar su escala visual. */
body.v11-premium main.wrap > #bloque-diario {
  width: min(calc(100% - 3rem), var(--v11-reading)) !important;
  max-width: var(--v11-reading) !important;
  margin-top: 1.35rem !important;
  overflow: visible;
}

body.v11-premium #bloque-diario .diario-header-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: clamp(1.8rem, 3vw, 2.25rem);
  background: linear-gradient(135deg, #295f63 0%, #337a78 58%, #549796 100%);
  box-shadow: 0 14px 32px rgba(30, 73, 76, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.v11-premium #bloque-diario .diario-header-card:hover {
  box-shadow: 0 18px 36px rgba(30, 73, 76, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body.v11-premium #diario-suenos .media-container {
  margin-bottom: 1.35rem !important;
}

body.v11-premium :is(#bienvenida, #origen-pregunta, #diario-suenos, #glosario) .section-title,
body.v11-premium #cierre-certificado .section-title {
  max-width: 100% !important;
  text-align: left !important;
  padding-bottom: 0.7rem !important;
  margin-bottom: 1.45rem !important;
  border-bottom: 1px solid rgba(185, 151, 111, 0.5) !important;
}

body.v11-premium :is(#bienvenida, #origen-pregunta, #diario-suenos, #glosario) .section-title::after,
body.v11-premium #cierre-certificado .section-title::after {
  display: none !important;
}

/* Keep orientation, but as a calm bridge after the first substantive reading. */
body.v11-premium main.wrap > .bloque-visual {
  width: min(calc(100% - 3rem), 800px);
  max-width: 800px;
  margin: var(--v11-gap) auto 0 !important;
}

body.v11-premium main.wrap > .bloque-visual .media-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

body.v11-premium main.wrap > .bloque-visual img {
  width: 100% !important;
  height: clamp(320px, 34vw, 440px) !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: var(--v11-radius-small) !important;
  box-shadow: 0 8px 22px rgba(34, 54, 69, 0.1) !important;
}

body.v11-premium main.wrap > .bloque-visual .caption {
  margin-top: 0.8rem !important;
  color: #677583 !important;
  font-style: italic !important;
  text-align: center !important;
}

body.v11-premium main.wrap > .orientacion-wrapper {
  width: min(calc(100% - 3rem), var(--v11-reading));
  max-width: var(--v11-reading) !important;
  margin: 1.25rem auto 0 !important;
}

body.v11-premium .orientacion-grid {
  gap: 0.8rem !important;
}

body.v11-premium .orientacion-card {
  border: 1px solid var(--v11-border) !important;
  border-radius: var(--v11-radius-small) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: none !important;
}

/* The invitation closes the experience instead of interrupting the opening. */
body.v11-premium .bloque-acompanamiento {
  padding: clamp(1.7rem, 4vw, 2.8rem) !important;
  background: var(--v11-card) !important;
  border: 1px solid var(--v11-border) !important;
}

body.v11-premium .bloque-acompanamiento .feature-grid {
  gap: 0.85rem !important;
}

body.v11-premium .bloque-acompanamiento .feature-item {
  padding: 1.15rem !important;
  background: rgba(247, 244, 238, 0.55) !important;
  border: 1px solid rgba(185, 151, 111, 0.15) !important;
  border-radius: var(--v11-radius-small) !important;
}

  body.v11-premium #roadmap-completo.programa-roadmap {
  width: min(calc(100% - 3rem), var(--v11-wide)) !important;
  max-width: var(--v11-wide) !important;
  margin: var(--v11-gap) auto 0 !important;
  padding: clamp(1.45rem, 3vw, 2.2rem) !important;
  border: 1px solid var(--v11-border) !important;
  border-radius: var(--v11-radius) !important;
  background: var(--v11-card) !important;
  box-shadow: var(--v11-shadow) !important;
}

body.v11-premium #roadmap-completo.programa-roadmap > .wrap {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

body.v11-premium #roadmap-completo .unidades-grid {
  display: grid !important;
  width: min(100%, 900px) !important;
  margin: 1.6rem auto 2rem !important;
}

body.v11-premium #roadmap-completo .rmap-header {
  margin-bottom: 1.25rem !important;
}

body.v11-premium #roadmap-completo .cta-roadmap-section {
  margin-top: 0 !important;
}

@media (min-width: 641px) and (max-width: 900px) {
  body.v11-premium main.wrap > .bloque-visual {
    width: 86vw !important;
  }

  body.v11-premium main.wrap > .bloque-visual img {
    height: min(48vw, 350px) !important;
  }
}

/* Mobile reading: fewer controls, wider text, discreet assistance. */
@media (max-width: 640px) {
  body.v11-premium .nav-superior .nav-unidades,
  body.v11-premium .nav-superior .nav-secciones-inline {
    display: none !important;
  }

  body.v11-premium .nav-superior-inner {
    min-height: 44px !important;
    justify-content: flex-end !important;
  }

  body.v11-premium .nav-anclas-bar {
    position: static !important;
  }

  body.v11-premium .nav-anclas-inner .ancla-item:nth-child(n+5) {
    display: none !important;
  }

  body.v11-premium :is(
    #bienvenida,
    #origen-pregunta,
    #diario-suenos,
    #entre-la-certeza,
    #perspectivas-psicologicas,
    #glosario,
    #cierre-certificado,
    #referencias,
    #recurso-conceptos,
    #bloque-diario,
    #recurso-storybook,
    #recurso-semilla,
    #recurso-ritmos,
    #laboratorio,
    #recurso-johari,
    #puertas-oniricas,
    #evaluacion,
    .bloque-acompanamiento,
    #roadmap-completo.programa-roadmap
  ) {
    width: calc(100% - 1.15rem) !important;
    margin-top: clamp(2rem, 8vw, 2.8rem) !important;
  }

  body.v11-premium main.wrap > #recurso-conceptos {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
  }

  body.v11-premium main.wrap > #bloque-diario {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
    margin-top: 1.1rem !important;
  }

  body.v11-premium #bloque-diario .diario-header-card {
    padding: 1.45rem 1rem;
  }

  body.v11-premium #bloque-diario .diario-header-title {
    font-size: clamp(1.38rem, 7vw, 1.65rem);
    line-height: 1.18;
  }

  body.v11-premium #bloque-diario .diario-widget {
    padding: 1.15rem;
  }

  body.v11-premium #bloque-diario .diario-buttons {
    gap: 0.55rem;
  }

  body.v11-premium #bloque-diario .diario-btn {
    width: 100%;
  }

  body.v11-premium :is(
    #bienvenida,
    #origen-pregunta,
    #diario-suenos,
    #entre-la-certeza,
    #perspectivas-psicologicas,
    #glosario,
    #cierre-certificado,
    #referencias
  ) {
    padding: 1.45rem 1.05rem !important;
  }

  body.v11-premium main.wrap > :is(.bloque-visual, .orientacion-wrapper) {
    width: calc(100% - 1.15rem) !important;
  }

  body.v11-premium main.wrap > .bloque-visual img {
    height: min(52vw, 210px) !important;
    object-fit: cover !important;
  }

  body.v11-premium .bloque-acompanamiento .feature-grid {
    grid-template-columns: 1fr !important;
  }

  body.v11-premium #roadmap-completo .rmap-header {
    display: block !important;
    text-align: center !important;
  }

  body.v11-premium #roadmap-completo .rmap-progress-mini {
    width: min(100%, 240px) !important;
    margin: 1rem auto 0 !important;
  }

  body.v11-premium #roadmap-completo .cta-roadmap-section {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 1.25rem 1rem !important;
  }

  body.v11-premium #roadmap-completo .cta-roadmap-action {
    width: 100% !important;
    margin-top: 1.2rem !important;
    align-items: stretch !important;
  }

  body.v11-premium #roadmap-completo .cta-roadmap-pills,
  body.v11-premium #roadmap-completo .cta-roadmap-pill,
  body.v11-premium #roadmap-completo .btn-cta-premium-large {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.v11-premium #roadmap-completo .cta-roadmap-pill {
    white-space: normal !important;
    text-align: center !important;
  }

  body.v11-premium #roadmap-completo .cta-roadmap-note {
    display: block !important;
    text-align: center !important;
    line-height: 1.45 !important;
  }

  body.v11-premium #glosario .glosario-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  body.v11-premium #glosario :is(h4, p, span, .term) {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  body.v11-premium .clara-root {
    right: 10px !important;
    bottom: 10px !important;
  }

  body.v11-premium .clara-button {
    min-width: 44px !important;
    width: 44px !important;
    padding: 0 !important;
  }

  body.v11-premium .clara-button-text {
    display: none !important;
  }

  body.v11-premium main.wrap > :is(
    #bienvenida,
    #origen-pregunta,
    #recurso-conceptos,
    #diario-suenos,
    #bloque-diario,
    #recurso-storybook,
    #recurso-semilla,
    #recurso-ritmos,
    #laboratorio,
    #recurso-johari,
    #puertas-oniricas,
    #glosario,
    #evaluacion,
    #cierre-certificado,
    #recorrido,
    #roadmap-completo
  ) {
    scroll-margin-top: 62px;
  }
}

/* Bienvenida: lectura final para telefonos chicos, sin afectar otros modulos. */
@media (max-width: 390px) {
  body.v11-premium main.wrap > #bienvenida {
    width: calc(100% - 0.5rem) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 1.4rem 0.82rem 1.8rem !important;
    scroll-margin-top: 86px !important;
  }

  body.v11-premium #bienvenida .section-title {
    margin-bottom: 1.18rem !important;
    font-size: 1.16rem !important;
    line-height: 1.26 !important;
  }

  body.v11-premium #bienvenida p {
    max-width: none !important;
    font-size: 0.96rem !important;
    line-height: 1.63 !important;
    margin-bottom: 1.05rem !important;
  }

  body.v11-premium #bienvenida .texto-reflexivo {
    font-size: 0.94rem !important;
    line-height: 1.64 !important;
    margin-top: 1.25rem !important;
    margin-bottom: 1.15rem !important;
  }

  body.v11-premium #bienvenida .quote-box {
    max-width: none !important;
    margin: 1.45rem 0 1.8rem !important;
    padding: 1.05rem 0.82rem 1.05rem 1.55rem !important;
    font-size: 0.91rem !important;
    line-height: 1.58 !important;
  }

  body.v11-premium #bienvenida .quote-box::before {
    left: 0.48rem !important;
  }

  body.v11-premium:has(#bienvenida:target) .clara-root {
    display: none !important;
  }
}

/* Metodo: franja editorial liviana entre la bienvenida y la imagen. */
body.v11-premium main.wrap > .metodo-skills {
  width: min(780px, calc(100% - 3rem)) !important;
  max-width: 780px !important;
  margin: 2.6rem auto 3.2rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  column-gap: 1.45rem;
  row-gap: 1.45rem;
  align-items: stretch;
}

body.v11-premium .metodo-skills-header {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin: 0;
  padding: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  text-align: left;
  z-index: auto;
}

body.v11-premium .metodo-skills-header > h2 {
  max-width: none !important;
  margin: 0 0 0.48rem !important;
  padding: 0 0 0.62rem !important;
  border-bottom: 1px solid rgba(185, 151, 111, 0.58) !important;
  color: #304b60;
  font-family: "Playfair Display", serif;
  font-weight: 400 !important;
  font-size: clamp(1.44rem, 2.04vw, 1.72rem) !important;
  line-height: 1.1 !important;
  text-align: left !important;
  white-space: nowrap;
}

body.v11-premium .metodo-skills-header > h2::after {
  display: none !important;
}

body.v11-premium .metodo-subtitle {
  max-width: 340px;
  margin: 0;
  color: rgba(38, 52, 65, 0.68);
  font-size: 0.97rem;
  line-height: 1.55;
}

body.v11-premium .metodo-skills-grid {
  display: contents;
}

body.v11-premium .metodo-skill-card {
  min-width: 0;
  min-height: 118px;
  padding: 1.18rem 1.28rem !important;
  border: 1px solid rgba(185, 151, 111, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

body.v11-premium .metodo-skill-card:nth-child(1) {
  grid-column: 2;
  grid-row: 1;
}

body.v11-premium .metodo-skill-card:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

body.v11-premium .metodo-skill-card:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

body.v11-premium .metodo-skill-card::before {
  display: none;
}

body.v11-premium .metodo-skill-card > strong {
  display: block;
  margin-bottom: 0.34rem;
  color: #304b60;
  font-family: "Playfair Display", serif;
  font-weight: 600 !important;
  font-size: 1.08rem;
  line-height: 1.25;
}

body.v11-premium .metodo-skill-card > p {
  margin: 0;
  color: rgba(38, 52, 65, 0.72);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Titulos editoriales visibles: conservar serif premium con menos dureza. */
body.v11-premium #bienvenida .section-title,
body.v11-premium #datos-curiosos .section-title {
  color: #29465d !important;
  font-weight: 400 !important;
}

body.v11-premium #bienvenida {
  padding-top: clamp(3.2rem, 5vw, 4.2rem) !important;
}

body.v11-premium #bienvenida .section-title {
  color: #1d2f42 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

body.v11-premium #datos-curiosos .curiosidad-card h3 {
  color: #29465d !important;
  font-weight: 400 !important;
}

/* Hero: restauracion de la tarjeta liviana anterior al cajon ampliado. */
body.v11-premium .hero.header-unidad-premium h1 {
  font-weight: 400 !important;
}

body.v11-premium .hero.header-unidad-premium .wrap.hero-content > section.identidad {
  display: inline-block !important;
  width: min(92%, 660px) !important;
  max-width: 660px !important;
  min-height: 0 !important;
  margin: 54px auto 0 !important;
  padding: 28px 44px 20px !important;
  border: 1px solid rgba(185, 151, 111, 0.2) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 8px 32px rgba(30, 41, 59, 0.04) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

body.v11-premium .hero.header-unidad-premium .wrap.hero-content > section.identidad::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  display: block !important;
  width: 48px !important;
  height: 2px !important;
  margin: 0 !important;
  border-radius: 1px !important;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) !important;
  transform: translateX(-50%) !important;
}

body.v11-premium .hero.header-unidad-premium .titulo-menor,
body.v11-premium .hero.header-unidad-premium #pregunta-onirica {
  font-weight: 400 !important;
}

/* Ritmos Circadianos: recuperar el ancho editorial y compactar su marco. */
body.v11-premium main.wrap > #recurso-ritmos.ritmos-circadianos-module {
  width: min(calc(100% - 3rem), 742px) !important;
  max-width: 742px !important;
}

body.v11-premium #recurso-ritmos.ritmos-circadianos-module .container {
  padding: 10px 12px 12px !important;
}

body.v11-premium #recurso-ritmos .header-content {
  padding: 0.82rem 1rem !important;
}

body.v11-premium #recurso-ritmos .main-title {
  font-size: clamp(1.48rem, 2.35vw, 1.72rem) !important;
}

body.v11-premium #recurso-ritmos .subtitle {
  font-size: clamp(0.92rem, 1.55vw, 1.02rem) !important;
}

body.v11-premium #recurso-ritmos .nav-container {
  margin-bottom: 0.55rem !important;
}

body.v11-premium #recurso-ritmos .nav-pills {
  gap: 0.14rem !important;
  padding: 0.28rem !important;
}

body.v11-premium #recurso-ritmos .nav-pill {
  padding: 0.48rem 0.55rem !important;
  font-size: 0.7rem !important;
}

body.v11-premium #recurso-ritmos .intro-card,
body.v11-premium #recurso-ritmos .clock-container,
body.v11-premium #recurso-ritmos .breathing-container,
body.v11-premium #recurso-ritmos .calculator-container,
body.v11-premium #recurso-ritmos .tracker-container,
body.v11-premium #recurso-ritmos .quiz-container {
  padding: 0.95rem !important;
}

/* Laboratorio: modulo compacto alineado con Ritmos, sin comprimir lectura. */
body.v11-premium main.wrap > #laboratorio {
  width: min(calc(100% - 3rem), 742px) !important;
  max-width: 742px !important;
}

body.v11-premium #laboratorio .contenedor-ejercicios-simple {
  max-width: none;
  padding: 0;
}

body.v11-premium #laboratorio .encabezado-ejercicios {
  margin-bottom: 1.3rem;
}

/* Johari: escala editorial compacta y cabecera legible. */
body.v11-premium main.wrap > #recurso-johari.johari-integrado {
  width: min(calc(100% - 3rem), 742px) !important;
  max-width: 742px !important;
  padding: 0.85rem 0.85rem 2.8rem !important;
}

body.v11-premium #recurso-johari .johari-header {
  margin-bottom: 1.5rem !important;
  padding: 1.65rem 0.65rem 0.75rem !important;
}

body.v11-premium #recurso-johari .johari-header h2 {
  display: flex !important;
  font-size: clamp(1.8rem, 3.4vw, 2.2rem) !important;
  margin-bottom: 0.9rem !important;
}

body.v11-premium #recurso-johari .johari-badge {
  display: flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto 0.95rem !important;
  font-size: 0.88rem !important;
}

body.v11-premium #recurso-johari .johari-header p:not(.johari-badge) {
  max-width: 590px !important;
  font-size: 1rem !important;
}

body.v11-premium #recurso-johari .johari-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-top: 1.7rem !important;
  gap: 0.65rem !important;
}

body.v11-premium #recurso-johari .johari-stats div {
  padding: 0.85rem 0.65rem !important;
}

body.v11-premium #recurso-johari .johari-header,
body.v11-premium #recurso-johari .johari-stats {
  border-bottom: 0 !important;
}

body.v11-premium #recurso-johari .johari-header::after,
body.v11-premium #recurso-johari .johari-stats::after {
  content: none !important;
  display: none !important;
}

/* Semilla Interior: compactacion segura solo del contenedor exterior. */
body.v11-premium main.wrap > #recurso-semilla {
  width: min(calc(100% - 3rem), 880px) !important;
  max-width: 880px !important;
}

/* Puertas Oniricas: cierre compacto con la septima puerta centrada. */
body.v11-premium #puertas-oniricas.dream-door-app {
  width: min(calc(100% - 3rem), 742px) !important;
  max-width: 742px !important;
  padding: 0.75rem 0 1.5rem !important;
}

body.v11-premium #puertas-oniricas .po-intro {
  padding: 2.2rem 1.35rem 2.35rem;
}

@media (min-width: 641px) {
  body.v11-premium #puertas-oniricas .dream-door-gallery {
    grid-template-columns: repeat(2, minmax(0, 280px));
    gap: 1.1rem;
    padding-inline: 1rem;
  }

  body.v11-premium #puertas-oniricas .dream-door-card[data-door-id="7"] {
    grid-column: 1 / -1;
    width: 280px;
    justify-self: center;
  }
}

@media (min-width: 769px) {
  body.v11-premium #laboratorio .grilla-tarjetas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  body.v11-premium main.wrap > #recurso-ritmos.ritmos-circadianos-module {
    width: min(calc(100% - 1.5rem), 742px) !important;
    max-width: 742px !important;
  }

  body.v11-premium #recurso-ritmos .nav-container {
    overflow-x: auto !important;
  }

  body.v11-premium #recurso-ritmos .nav-pills {
    width: max-content !important;
    max-width: none !important;
  }
}

@media (max-width: 640px) {
  body.v11-premium main.wrap > #recurso-ritmos.ritmos-circadianos-module {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
  }

  body.v11-premium main.wrap > #laboratorio {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
  }

  body.v11-premium main.wrap > #recurso-johari.johari-integrado {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
  }

  body.v11-premium #puertas-oniricas.dream-door-app {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
  }

  body.v11-premium #puertas-oniricas .dream-door-gallery {
    grid-template-columns: 1fr;
    padding-inline: 0.75rem;
  }

  body.v11-premium #puertas-oniricas .dream-door-card[data-door-id="7"] {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }

  body.v11-premium #recurso-ritmos .nav-container {
    overflow-x: auto !important;
  }

  body.v11-premium #recurso-ritmos .nav-pills {
    width: max-content !important;
    max-width: none !important;
  }

  body.v11-premium main.wrap > .metodo-skills {
    width: calc(100% - 1.15rem) !important;
    margin: 2rem auto 2.6rem !important;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  body.v11-premium .metodo-skills-header > h2 {
    font-size: clamp(1.48rem, 6.6vw, 1.8rem) !important;
    line-height: 1.16 !important;
    white-space: normal;
  }

  body.v11-premium .metodo-subtitle {
    font-size: 0.91rem;
  }

  body.v11-premium .metodo-skills-grid {
    display: contents;
  }

  body.v11-premium .metodo-skill-card {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: unset;
    padding: 1.05rem 1rem !important;
  }
}

/* Imagen puente: descanso visual centrado en formato contenido. */
body.v11-premium main.wrap > .bloque-visual {
  width: min(800px, calc(100% - 3rem)) !important;
  max-width: 800px !important;
  margin: 3rem auto 3.8rem !important;
}

body.v11-premium main.wrap > .bloque-visual > .figure-puente-onirico {
  width: 100% !important;
  margin: 0 !important;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.v11-premium main.wrap > .bloque-visual > .figure-puente-onirico > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 18px !important;
  object-fit: cover !important;
  object-position: center 38% !important;
  box-shadow: 0 14px 34px rgba(20, 32, 44, 0.10) !important;
}

body.v11-premium main.wrap > .bloque-visual > .figure-puente-onirico > figcaption {
  margin: 0.48rem 0 0 !important;
  padding: 0 !important;
  color: rgba(45, 58, 70, 0.58) !important;
  font-size: 0.82rem !important;
  font-style: italic !important;
  line-height: 1.42 !important;
  text-align: center !important;
}

@media (max-width: 640px) {
  body.v11-premium main.wrap > .bloque-visual {
    width: calc(100% - 1.15rem) !important;
    margin-top: 2rem !important;
    margin-bottom: 2.6rem !important;
  }

  body.v11-premium main.wrap > .bloque-visual > .figure-puente-onirico {
    border-radius: 0;
  }

  body.v11-premium main.wrap > .bloque-visual > .figure-puente-onirico > img {
    height: auto !important;
    border-radius: 15px !important;
    object-position: center 35% !important;
  }
}

/* Descanso visual: pausa editorial baja antes de Johari. */
body.v11-premium main.wrap > .figure-descanso-visual {
  order: 78;
  width: min(800px, calc(100% - 3rem)) !important;
  max-width: 800px !important;
  margin: 3rem auto 3.8rem !important;
  padding: 0 !important;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.v11-premium main.wrap > .figure-descanso-visual > .figure-descanso-visual__figure {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 14px 34px rgba(20, 32, 44, 0.10);
}

body.v11-premium main.wrap > .figure-descanso-visual .figure-descanso-visual__figure > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin-bottom: 0 !important;
  object-fit: cover !important;
  object-position: center 46% !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

body.v11-premium main.wrap > .figure-descanso-visual > .figure-descanso-visual__label {
  margin: 0.48rem 0 0 !important;
  padding: 0 !important;
  color: rgba(45, 58, 70, 0.58) !important;
  font-size: 0.82rem !important;
  font-style: italic !important;
  line-height: 1.35 !important;
  letter-spacing: 0;
  text-align: center !important;
  text-transform: none;
}

body.v11-premium main.wrap > .figure-descanso-visual > .figure-descanso-visual__label::before {
  content: "" !important;
  display: block !important;
  width: 30px !important;
  height: 1px !important;
  margin: 0 auto 8px !important;
  background: #b9976f !important;
}

@media (max-width: 640px) {
  body.v11-premium main.wrap > .figure-descanso-visual {
    width: calc(100% - 1.15rem) !important;
    margin: 2.2rem auto 2.8rem !important;
    border-radius: 0;
  }

  body.v11-premium main.wrap > .figure-descanso-visual > .figure-descanso-visual__figure {
    border-radius: 15px;
  }

  body.v11-premium main.wrap > .figure-descanso-visual .figure-descanso-visual__figure > img {
    height: auto !important;
    object-position: center 46% !important;
    border-radius: 15px !important;
  }

  body.v11-premium main.wrap > .figure-descanso-visual > .figure-descanso-visual__label {
    padding: 0 !important;
    font-size: 0.74rem !important;
  }
}

/* Perspectivas psicologicas: evitar huecos por justificado forzado. */
body.v11-premium #perspectivas-psicologicas p,
body.v11-premium #perspectivas-psicologicas blockquote,
body.v11-premium #perspectivas-psicologicas .quote-box {
  text-align: left !important;
  text-align-last: left !important;
  word-spacing: normal !important;
  hyphens: none;
}

/* Glosario: tarjetas parejas con lectura superior y sin cortes feos. */
body.v11-premium #glosario .glosario-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem 1.1rem !important;
  align-items: stretch !important;
}

body.v11-premium #glosario .glosario-item {
  min-height: 150px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}

body.v11-premium #glosario .glosario-item h4 {
  margin: 0 0 0.65rem !important;
  line-height: 1.25 !important;
}

body.v11-premium #glosario .glosario-item p {
  margin: 0 !important;
  line-height: 1.55 !important;
}

body.v11-premium #glosario .glosario-item :is(h4, p, span, .term) {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  text-wrap: pretty;
}

body.v11-premium #glosario,
body.v11-premium #glosario * {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

body.v11-premium #glosario .glosario-item {
  align-items: flex-start !important;
  text-align: left !important;
}

body.v11-premium #glosario .glosario-item h4 {
  letter-spacing: 0 !important;
  text-align: left !important;
  text-wrap: balance;
  white-space: normal !important;
}

body.v11-premium #glosario .glosario-item p {
  letter-spacing: 0 !important;
  text-align: left !important;
  text-align-last: left !important;
  text-wrap: pretty;
  white-space: normal !important;
}

/* Certificado: preview compacta centrada sin recorte. */
body.v11-premium #cierre-certificado {
  max-width: 700px !important;
  padding: 2.6rem 2.6rem 2.3rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.v11-premium #cierre-certificado .section-title {
  text-align: center !important;
}

body.v11-premium #cierre-certificado > p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Evaluacion: ancho compacto alineado con la escala editorial v11. */
body.v11-premium main.wrap > #evaluacion.quiz-scope {
  width: min(calc(100% - 3rem), 800px) !important;
  max-width: 800px !important;
}

body.v11-premium #evaluacion .qz-wrap {
  width: 100% !important;
  max-width: none !important;
}

@media (max-width: 640px) {
  body.v11-premium main.wrap > #evaluacion.quiz-scope {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
  }
}

body.v11-premium #cierre-certificado > div:has(> img) {
  max-width: 500px !important;
  margin: 1.8rem auto 1.8rem !important;
  text-align: center;
}

body.v11-premium #cierre-certificado img {
  width: auto !important;
  max-width: 100% !important;
  max-height: 500px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(20, 32, 44, 0.12) !important;
}

@media (max-width: 767px) {
  body.v11-premium #cierre-certificado {
    max-width: calc(100vw - 1.25rem) !important;
    padding: 2rem 1.25rem 2rem !important;
  }

  body.v11-premium #cierre-certificado > div:has(> img) {
    max-width: 100% !important;
    margin: 1.5rem auto 1.8rem !important;
  }

  body.v11-premium #cierre-certificado img {
    max-height: 420px !important;
  }
}

@media (max-width: 640px) {
  body.v11-premium #glosario .glosario-grid {
    grid-template-columns: 1fr !important;
  }

  body.v11-premium #glosario .glosario-item {
    min-height: unset;
  }
}

/* Acompanamiento: compactacion premium scoped al bloque real. */
body.v11-premium .bloque-acompanamiento {
  width: min(calc(100% - 3rem), 980px) !important;
  max-width: 980px !important;
  padding: 3.2rem 2.6rem 3rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.v11-premium .bloque-acompanamiento > h3 {
  margin-bottom: 1rem !important;
  font-size: clamp(1.55rem, 2.6vw, 1.9rem) !important;
  line-height: 1.18 !important;
}

body.v11-premium .bloque-acompanamiento > p {
  max-width: 820px !important;
  margin: 0 auto 1.75rem !important;
  line-height: 1.62 !important;
}

body.v11-premium .bloque-acompanamiento > .media-container {
  max-width: 860px !important;
  margin: 1.65rem auto 1.45rem !important;
}

body.v11-premium .bloque-acompanamiento > .media-container video {
  display: block !important;
  width: 100% !important;
  max-width: 820px !important;
  max-height: 320px !important;
  margin: 0 auto 1.85rem !important;
  object-fit: cover;
}

body.v11-premium .bloque-acompanamiento > .media-container:has(video) > h4 {
  max-width: 760px !important;
  margin: 1.35rem auto 0.55rem !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

body.v11-premium .bloque-acompanamiento > .media-container:has(video) > p {
  max-width: 760px !important;
  margin: 0.4rem auto 0.8rem !important;
  font-size: 0.96rem !important;
  line-height: 1.58 !important;
  text-align: center !important;
}

body.v11-premium .bloque-acompanamiento > .media-container:has(video) > div {
  max-width: 750px !important;
  margin: 0.8rem auto 1.2rem !important;
  gap: 0.45rem 0.55rem !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

body.v11-premium .bloque-acompanamiento .acompanamiento-quienes-title {
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 1.35rem auto 0.55rem !important;
  text-align: center !important;
}

body.v11-premium .bloque-acompanamiento .acompanamiento-quienes-text {
  display: block !important;
  max-width: 760px !important;
  margin: 0.4rem auto 0.8rem !important;
  text-align: center !important;
  text-align-last: center !important;
}

body.v11-premium .bloque-acompanamiento .acompanamiento-team-chips {
  max-width: 760px !important;
  margin: 0.8rem auto 1.2rem !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.45rem 0.55rem !important;
}

body.v11-premium .bloque-acompanamiento > .media-container:has(video) > div > span {
  padding: 0.22rem 0.5rem !important;
  gap: 0.32rem !important;
  font-size: 0.72rem !important;
}

body.v11-premium .bloque-acompanamiento > .media-container:has(video) > div > span strong {
  font-size: 0.72rem !important;
}

body.v11-premium .bloque-acompanamiento > .media-container:has(video) > div > span > span:last-child {
  padding: 0.08rem 0.34rem !important;
  font-size: 0.66rem !important;
}

body.v11-premium .bloque-acompanamiento .feature-grid {
  max-width: 790px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 0.9rem !important;
  margin-bottom: 1.45rem !important;
}

body.v11-premium .bloque-acompanamiento .feature-item {
  min-height: 180px !important;
  padding: 1.05rem 0.95rem !important;
}

body.v11-premium .bloque-acompanamiento .feature-item .icon {
  margin-bottom: 0.65rem !important;
  font-size: 1.55rem !important;
}

body.v11-premium .bloque-acompanamiento .feature-item h5 {
  margin-bottom: 0.4rem !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
}

body.v11-premium .bloque-acompanamiento .feature-item p {
  margin: 0 !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
}

body.v11-premium .bloque-acompanamiento > .media-container:has(> img) {
  max-width: 640px !important;
  margin: 1.45rem auto 0.95rem !important;
}

body.v11-premium .bloque-acompanamiento .podcasts-apoyo-img {
  display: block !important;
  width: 100% !important;
  max-width: 520px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto 0.75rem !important;
  object-fit: contain !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 30px rgba(20, 32, 44, 0.1) !important;
}

body.v11-premium .bloque-acompanamiento > .media-container:has(> img) > h4 {
  max-width: 640px !important;
  margin: 0.6rem auto 0.3rem !important;
  font-size: 0.98rem !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

body.v11-premium .bloque-acompanamiento .acompanamiento-biblioteca-title {
  display: block !important;
  width: 100% !important;
  max-width: 640px !important;
  margin: 0.6rem auto 0.3rem !important;
  text-align: center !important;
  text-align-last: center !important;
}

body.v11-premium .bloque-acompanamiento > .media-container:has(> img) > p {
  max-width: 600px !important;
  margin: 0 auto 0.25rem !important;
  font-size: 0.9rem !important;
  line-height: 1.48 !important;
  text-align: center !important;
}

body.v11-premium .bloque-acompanamiento .lista-beneficios {
  max-width: 620px !important;
  margin: 1.1rem auto 0 !important;
  padding: 0.95rem 1.1rem !important;
}

body.v11-premium .bloque-acompanamiento .lista-beneficios h4 {
  margin-bottom: 0.65rem !important;
  font-size: 0.98rem !important;
}

body.v11-premium .bloque-acompanamiento .lista-beneficios ul {
  margin: 0 !important;
  padding-left: 1.1rem !important;
}

body.v11-premium .bloque-acompanamiento .lista-beneficios li {
  margin-bottom: 0.45rem !important;
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
}

@media (max-width: 767px) {
  body.v11-premium .bloque-acompanamiento {
    width: calc(100% - 1.25rem) !important;
    max-width: calc(100% - 1.25rem) !important;
    padding: 2.4rem 1.2rem 2.2rem !important;
  }

  body.v11-premium .bloque-acompanamiento > .media-container,
  body.v11-premium .bloque-acompanamiento > .media-container video,
  body.v11-premium .bloque-acompanamiento > .media-container:has(> img),
  body.v11-premium .bloque-acompanamiento .podcasts-apoyo-img {
    max-width: 100% !important;
  }

  body.v11-premium .bloque-acompanamiento > .media-container:has(> img) {
    margin: 1.25rem auto 0.9rem !important;
  }

  body.v11-premium .bloque-acompanamiento > .media-container video {
    max-height: 240px !important;
  }

  body.v11-premium .bloque-acompanamiento .feature-grid {
    grid-template-columns: 1fr !important;
  }

  body.v11-premium .bloque-acompanamiento .feature-item {
    min-height: unset !important;
  }

body.v11-premium .bloque-acompanamiento .podcasts-apoyo-img {
    max-height: none !important;
  }
}

/* =========================================================
   PUERTAS ONIRICAS - ESCENA DE UMBRAL INLINE
   Recupera el comportamiento "galeria -> pagina interna"
   ========================================================= */

#puertas-oniricas .dream-door-card {
  position: relative;
  cursor: pointer;
}

#puertas-oniricas .dream-door-card-image::before {
  content: "";
  position: absolute;
  inset: 12% 48%;
  z-index: 2;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 235, 170, 0.95), rgba(185, 151, 111, 0.28) 48%, transparent 72%);
  opacity: 0;
  filter: blur(4px);
  transform: scaleX(0.25);
  pointer-events: none;
}

#puertas-oniricas .dream-door-card.is-opening {
  z-index: 5;
  transform: translateY(-8px) scale(1.015);
  border-color: rgba(255, 221, 150, 0.75);
  box-shadow:
    0 22px 52px rgba(95, 67, 34, 0.22),
    0 0 0 1px rgba(255, 226, 168, 0.55),
    0 0 34px rgba(255, 205, 112, 0.45);
}

#puertas-oniricas .dream-door-card.is-opening .dream-door-card-image::before {
  animation: dd-threshold-open 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#puertas-oniricas .dream-door-card.is-opening .dream-door-card-image::after {
  opacity: 0.12;
}

#puertas-oniricas.is-crossing-door .dream-door-card:not(.is-opening) {
  opacity: 0.44;
  filter: saturate(0.72);
  transform: scale(0.985);
}

@keyframes dd-threshold-open {
  0% {
    opacity: 0;
    inset: 18% 49%;
    transform: scaleX(0.18);
  }
  38% {
    opacity: 1;
    inset: 9% 43%;
    transform: scaleX(0.55);
  }
  100% {
    opacity: 0.98;
    inset: -8% -6%;
    border-radius: 18px;
    transform: scaleX(1);
  }
}

#puertas-oniricas .dream-door-page[hidden] {
  display: none !important;
}

#puertas-oniricas .dream-door-page {
  max-width: 1120px;
  margin: 0 auto 2rem;
  padding: 0 1rem 1.5rem;
  animation: dd-page-enter 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#puertas-oniricas .dream-door-page-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 42px;
  margin: 0 0 1.35rem;
  padding: 0.55rem 0.9rem;
  color: #2f6d82;
  background: transparent;
  border: 1px solid rgba(47, 109, 130, 0.18);
  border-radius: 999px;
  font-family: "Lato", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

#puertas-oniricas .dream-door-page-back:hover {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(185, 151, 111, 0.34);
  transform: translateX(-2px);
}

#puertas-oniricas .dream-door-page-grid {
  display: grid;
  grid-template-columns: minmax(430px, 1.34fr) minmax(280px, 0.66fr);
  gap: clamp(1.25rem, 3vw, 2.2rem);
  align-items: start;
}

#puertas-oniricas .dream-door-page-visual {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

#puertas-oniricas .dream-door-page-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 30px 70px rgba(42, 55, 70, 0.18),
    0 0 0 1px rgba(185, 151, 111, 0.12);
  isolation: isolate;
}

#puertas-oniricas .dream-door-page-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 220, 143, 0.2), transparent 38%),
    linear-gradient(180deg, transparent 58%, rgba(36, 55, 70, 0.24));
  pointer-events: none;
}

#puertas-oniricas .dream-door-page-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  animation: dd-image-breathe 8s ease-in-out infinite alternate;
}

#puertas-oniricas .dream-door-page-caption {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

#puertas-oniricas .dream-door-page-kicker {
  margin: 0 0 0.35rem;
  color: #B9976F;
  font-family: "Lato", sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#puertas-oniricas .dream-door-page-title {
  margin: 0;
  color: #2f6d82;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  line-height: 1.12;
}

#puertas-oniricas .dream-door-page-description {
  margin: 0.45rem auto 0;
  color: rgba(65, 82, 94, 0.72);
  font-size: 0.92rem;
  font-style: italic;
}

#puertas-oniricas .dream-door-page-panel {
  padding: clamp(1.15rem, 2.2vw, 1.8rem);
  border: 1px solid rgba(185, 151, 111, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(252, 249, 244, 0.66)),
    radial-gradient(circle at 92% 5%, rgba(185, 151, 111, 0.12), transparent 34%);
  box-shadow: 0 16px 38px rgba(42, 55, 70, 0.09);
  max-height: min(74vh, 720px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(185,151,111,0.5) transparent;
}

#puertas-oniricas .dream-door-page-section {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(185, 151, 111, 0.16);
  animation: dd-section-rise 0.55s ease both;
}

#puertas-oniricas .dream-door-page-section:nth-child(2) { animation-delay: 0.08s; }
#puertas-oniricas .dream-door-page-section:nth-child(3) { animation-delay: 0.16s; }

#puertas-oniricas .dream-door-page-section:first-child {
  padding-top: 0;
}

#puertas-oniricas .dream-door-page-section h4 {
  margin: 0 0 0.55rem;
  color: #8f7354;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1rem;
  line-height: 1.25;
}

#puertas-oniricas .dream-door-page-section p {
  margin: 0;
  color: #3e5263;
  font-size: 0.92rem;
  line-height: 1.72;
  text-align: left;
}

#puertas-oniricas .dream-door-page-note {
  margin-top: 0.85rem !important;
  padding: 0.7rem 0.9rem;
  color: rgba(62, 82, 99, 0.7) !important;
  background: rgba(185, 151, 111, 0.08);
  border-left: 3px solid rgba(185, 151, 111, 0.55);
  border-radius: 0 8px 8px 0;
  font-size: 0.82rem !important;
}

#puertas-oniricas .dream-door-page-journal p {
  color: #8a6847;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.04rem;
  font-style: italic;
}

#puertas-oniricas .dream-door-page-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 1.35rem;
}

#puertas-oniricas .dream-door-page-button {
  min-height: 42px;
  padding: 0.72rem 1.15rem;
  border-radius: 10px;
  font-family: "Lato", sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

#puertas-oniricas .dream-door-page-button-secondary {
  color: #8a6847;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(185, 151, 111, 0.34);
}

#puertas-oniricas .dream-door-page-button-primary {
  color: #fff;
  background: linear-gradient(135deg, #B9976F, #8f7354);
  border: 1px solid rgba(143, 115, 84, 0.55);
  box-shadow: 0 10px 22px rgba(185, 151, 111, 0.24);
}

#puertas-oniricas .dream-door-page-button:hover {
  transform: translateY(-2px);
}

@keyframes dd-page-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dd-section-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dd-image-breathe {
  from { transform: scale(1.02); }
  to   { transform: scale(1.055); }
}

@media (max-width: 900px) {
  #puertas-oniricas .dream-door-page-grid {
    grid-template-columns: 1fr;
  }

  #puertas-oniricas .dream-door-page-panel {
    max-height: none;
    overflow: visible;
  }

  #puertas-oniricas .dream-door-page-actions {
    justify-content: stretch;
  }

  #puertas-oniricas .dream-door-page-button {
    flex: 1 1 100%;
  }
}

@media (max-width: 560px) {
  #puertas-oniricas .dream-door-page {
    padding-inline: 0.25rem;
  }

  #puertas-oniricas .dream-door-page-panel {
    border-radius: 14px;
  }

  #puertas-oniricas .dream-door-page-section p {
    font-size: 0.93rem;
    line-height: 1.68;
  }
}

@media (prefers-reduced-motion: reduce) {
  #puertas-oniricas .dream-door-card.is-opening .dream-door-card-image::before,
  #puertas-oniricas .dream-door-page,
  #puertas-oniricas .dream-door-page-section,
  #puertas-oniricas .dream-door-page-image {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================
   U1 · AJUSTE FINO DE RITMO RESPONSIVE
   Conserva los descansos editoriales y reduce solo el exceso.
   ========================================================= */

/* Desktop bajo: acercar levemente los modulos sin compactar la lectura. */
@media (min-width: 1025px) and (max-width: 1440px) {
  body.v11-premium {
    --v11-gap: clamp(2.5rem, 4.15vw, 3.9rem);
  }

  body.v11-premium main.wrap > #entre-la-certeza.content-box {
    margin-top: clamp(2.75rem, 3.4vw, 3rem) !important;
  }

  body.v11-premium main.wrap > #cierre-certificado {
    margin-top: var(--v11-gap) !important;
  }
}

/* Tablet: lectura amplia, sin grillas de tres columnas ni saltos vacios. */
@media (min-width: 768px) and (max-width: 1024px) {
  body.v11-premium {
    --v11-gap: clamp(2.35rem, 4.2vw, 2.9rem);
  }

  body.v11-premium main.wrap > :is(
    #bienvenida,
    #recurso-conceptos,
    #diario-suenos,
    #recurso-storybook,
    #recurso-semilla,
    #laboratorio,
    #recurso-johari,
    #puertas-oniricas,
    #evaluacion,
    #cierre-certificado,
    #datos-curiosos,
    .bloque-acompanamiento
  ) {
    width: min(calc(100% - 2rem), 900px) !important;
    max-width: 900px !important;
  }

  body.v11-premium main.wrap > #entre-la-certeza.content-box {
    margin-top: clamp(2rem, 4vw, 2.5rem) !important;
  }

  body.v11-premium main.wrap > #cierre-certificado {
    margin-top: var(--v11-gap) !important;
  }

  body.v11-premium #roadmap-completo .unidades-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.v11-premium .clara-root {
    right: 8px !important;
    bottom: 12px !important;
  }

  body.v11-premium .bloque-acompanamiento > .media-container video {
    max-height: clamp(260px, 40vh, 360px) !important;
  }
}

/* Tablet vertical: las tres tarjetas se leen como una secuencia centrada. */
@media (min-width: 768px) and (max-width: 900px) {
  body.v11-premium .bloque-acompanamiento .feature-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 1.25rem !important;
  }

  body.v11-premium .bloque-acompanamiento .feature-item {
    width: 100% !important;
    min-height: unset !important;
    box-sizing: border-box !important;
  }
}

/* Tablet horizontal: dos columnas y tercera tarjeta centrada. */
@media (min-width: 901px) and (max-width: 1024px),
       (min-width: 1025px) and (max-width: 1280px) and (max-height: 900px) {
  body.v11-premium .bloque-acompanamiento .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 760px !important;
  }

  body.v11-premium .bloque-acompanamiento .feature-item:last-child {
    grid-column: 1 / -1;
    width: min(100%, 376px) !important;
    min-height: unset !important;
    justify-self: center;
  }

  body.v11-premium #roadmap-completo .unidades-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.v11-premium .clara-root {
    right: 8px !important;
    bottom: 12px !important;
  }
}

/* Bienvenida: reducción del hueco imagen→apertura.
   NOTA: main.wrap es flex con order; :has(+ #bienvenida) no matchea DOM
   (metodo-skills está entre ellos en el DOM aunque order lo reordene visualmente).
   Selectors directos sin depender de adyacencia DOM. */
@media (min-width: 768px) and (max-width: 1440px) {
  body.v11-premium main.wrap > .bloque-visual {
    margin-bottom: clamp(1.7rem, 2.4vw, 2.4rem) !important;
  }

  body.v11-premium main.wrap > #bienvenida {
    margin-top: clamp(1.1rem, 1.8vw, 1.7rem) !important;
  }
}

/* =========================================================
   U1 · RITMO VERTICAL FINAL
   main.wrap es flex: evitar doble margen entre módulos
   ========================================================= */
body.v11-premium main.wrap > :is(
  .bloque-visual,
  #datos-curiosos,
  #recurso-fabrica,
  #recurso-semilla,
  .figure-descanso-visual
) {
  margin-bottom: 0 !important;
}

/* =========================================================
   U1 · CONTROLES FLOTANTES FIJOS
   Diccionario a la izquierda · Clara a la derecha
   ========================================================= */
body.v11-premium .dict-fab {
  left: 16px !important;
  right: auto !important;
  bottom: 16px !important;
}

body.v11-premium .clara-root {
  left: auto !important;
  right: 16px !important;
  bottom: 16px !important;
}

/* U1 · Tablet horizontal · micro-nudge óptico: dict-fab sube 8px para alinearse con Clara */
@media (min-width: 768px) and (max-width: 1280px) {
  body.v11-premium .dict-fab {
    bottom: 24px !important;
  }
}

/* U1 · Móvil · dict-fab sube 20px para reducir diferencia óptica con Clara (≤767px)
   Selector visual real: .dict-fab es el botón-círculo visible.
   Clara visual: .clara-button dentro de .clara-root */
@media (max-width: 767px) {
  body.v11-premium .dict-fab {
    bottom: 36px !important;
  }
}