/*
 * Tras el Nombre · Responsive estructural global v4.1
 * Capa correctiva cargada DESPUÉS de site.css y de los CSS de página.
 * Objetivo: evitar la pérdida progresiva de ancho causada por grupos anidados
 * de Gutenberg/GeneratePress en móvil y tablet, sin modificar site.css.
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

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

/* ---------------------------------------------------------
   BOTÓN VOLVER ARRIBA
   --------------------------------------------------------- */
.ten-back-to-top {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 8;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: var(--ten-navy, #132335);
    color: #fff;
    box-shadow: 0 8px 24px rgba(19,35,53,.22);
    font: 700 24px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease, background-color .18s ease;
}

.ten-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ten-back-to-top:hover,
.ten-back-to-top:focus-visible {
    background: var(--ten-navy-hover, #0D1926);
    color: #fff;
}

.ten-back-to-top:focus-visible {
    outline: 2px solid var(--ten-copper, #B6835A);
    outline-offset: 3px;
}

/* ---------------------------------------------------------
   BASE RESPONSIVE: no permitir que flex/grid encoja el texto por debajo
   de su caja disponible.
   --------------------------------------------------------- */
@media (max-width: 1024px) {
    .entry-content,
    .entry-content * {
        min-width: 0;
        box-sizing: border-box;
    }
}

/* ---------------------------------------------------------
   MÓVIL + TABLET VERTICAL
   --------------------------------------------------------- */
@media (max-width: 820px) {
    /*
     * 1) Las secciones principales recuperan el viewport real.
     * El contenido editorial queda protegido con padding propio de 16–24 px.
     */
    html body .site-content .content-area .site-main article .entry-content > .wp-block-group.alignfull.ten-hero,
    html body .site-content .content-area .site-main article .entry-content > .wp-block-group.alignfull.ten-section,
    html body .site-content .content-area .site-main article .entry-content > section.wp-block-group.alignfull.ten-hero,
    html body .site-content .content-area .site-main article .entry-content > section.wp-block-group.alignfull.ten-section {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: clamp(16px, 4.5vw, 24px) !important;
        padding-right: clamp(16px, 4.5vw, 24px) !important;
        box-sizing: border-box !important;
    }

    /*
     * 2) El wrapper .ten-container deja de crear una segunda caja de ancho.
     * Sus hijos pasan a usar directamente el ancho interior de la sección.
     * Es un div semánticamente neutro, por lo que display:contents es seguro aquí.
     */
    html body .site-content .entry-content > :is(.ten-hero, .ten-section) > .ten-container,
    html body .site-content .entry-content > :is(.ten-hero, .ten-section) > .wp-block-group__inner-container > .ten-container {
        display: contents !important;
    }

    /* Compatibilidad con instalaciones que todavía inserten inner-container. */
    html body .site-content .entry-content > :is(.ten-hero, .ten-section) > .ten-container > .wp-block-group__inner-container {
        display: contents !important;
    }

    /*
     * 3) Cualquier hijo directo del contenedor editorial usa todo el ancho útil.
     * Esto corta la cadena observada en Chrome iOS: 390 → 330 → 270 → 182 px.
     */
    html body .site-content .entry-content > :is(.ten-hero, .ten-section) > .ten-container > *,
    html body .site-content .entry-content > :is(.ten-hero, .ten-section) > .ten-container > .wp-block-group__inner-container > *,
    html body .site-content .entry-content > :is(.ten-hero, .ten-section) > .wp-block-group__inner-container > .ten-container > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Anchura de lectura: en móvil no añade otra constricción. */
    html body .site-content .entry-content .ten-reading-width,
    html body .site-content .entry-content .ten-reading-width > .wp-block-group__inner-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    html body .site-content .entry-content .ten-reading-width > *,
    html body .site-content .entry-content .ten-reading-width > .wp-block-group__inner-container > * {
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /*
     * 4) Grids editoriales: una columna hasta 820 px. A 768 px una tarjeta
     * completa es preferible a dos columnas estrechas; a 1024 vuelven a actuar
     * los estilos de tablet/escritorio de cada página.
     */
    html body .site-content .entry-content :is(
        .ten-problem__questions,
        .ten-method__grid,
        .ten-kit__grid,
        .ten-prudence__grid,
        .ten-routes__grid,
        .ten-fit__grid,
        .ten-start-known__grid,
        .ten-start-clues__grid,
        .ten-start-caution__grid,
        .ten-start-public__grid,
        .ten-about-origin__grid,
        .ten-about-principles__grid,
        .ten-about-what__grid,
        .ten-about-public-private__grid,
        .ten-kit-hero__grid,
        .ten-kit-benefits,
        .ten-kit-circuit,
        .ten-kit-rigor__grid,
        .ten-kit-fit__grid,
        .ten-kit-faq__grid,
        .ten-kit-price-section__grid,
        .ten-directory-how__grid,
        .ten-directory-grid,
        .ten-guides-grid,
        .ten-guides-purpose__grid,
        .ten-fgc-question-grid,
        .ten-fgc-trace-grid,
        .ten-fgc-principles,
        .ten-fgc-mistake-list,
        .ten-cgf-concept-grid,
        .ten-cgf-document-grid,
        .ten-cgf-principles,
        .ten-cgf-mistake-list,
        .ten-bcgc-concept-grid,
        .ten-bcgc-document-grid,
        .ten-bcgc-principles,
        .ten-bcgc-mistake-list,
        .ten-bpp-concept-grid,
        .ten-bpp-document-grid,
        .ten-bpp-principles,
        .ten-bpp-mistake-list,
        .ten-anl-concept-grid,
        .ten-anl-analysis-grid,
        .ten-anl-principles,
        .ten-anl-mistake-list
    ) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Wrapper interno de Gutenberg, si existe, no crea otra pista de grid. */
    html body .site-content .entry-content :is(
        .ten-method__grid,
        .ten-kit__grid,
        .ten-prudence__grid,
        .ten-routes__grid,
        .ten-fit__grid,
        .ten-start-known__grid,
        .ten-start-clues__grid,
        .ten-start-caution__grid,
        .ten-start-public__grid,
        .ten-directory-grid,
        .ten-guides-grid,
        .ten-guides-purpose__grid,
        .ten-fgc-question-grid,
        .ten-fgc-trace-grid,
        .ten-fgc-principles,
        .ten-fgc-mistake-list,
        .ten-cgf-concept-grid,
        .ten-cgf-document-grid,
        .ten-cgf-principles,
        .ten-cgf-mistake-list,
        .ten-bcgc-concept-grid,
        .ten-bcgc-document-grid,
        .ten-bcgc-principles,
        .ten-bcgc-mistake-list,
        .ten-bpp-concept-grid,
        .ten-bpp-document-grid,
        .ten-bpp-principles,
        .ten-bpp-mistake-list,
        .ten-anl-concept-grid,
        .ten-anl-analysis-grid,
        .ten-anl-principles,
        .ten-anl-mistake-list
    ) > .wp-block-group__inner-container {
        display: contents !important;
    }

    /*
     * 5) Tarjetas/callouts y sus hijos ocupan la pista completa.
     * Sin max-width heredados, sin márgenes automáticos de layout constrained.
     */
    html body .site-content .entry-content :is(
        .ten-method__step,
        .ten-kit__card,
        .ten-prudence__item,
        .ten-route-card,
        .ten-fit__yes,
        .ten-fit__no,
        .ten-start-known__item,
        .ten-start-clue-card,
        .ten-start-caution__item,
        .ten-start-public__item,
        .ten-about-origin__item,
        .ten-about-principle,
        .ten-about-what__yes,
        .ten-about-what__no,
        .ten-about-public-card,
        .ten-kit-benefit,
        .ten-kit-circuit__item,
        .ten-kit-rigor__item,
        .ten-kit-fit__yes,
        .ten-kit-fit__no,
        .ten-kit-faq__item,
        .ten-kit-page__price-card,
        .ten-kit-price-section__card,
        .ten-directory-card,
        .ten-guides-card,
        .ten-guides-purpose__item,
        .ten-fgc-mini-card,
        .ten-fgc-trace-card,
        .ten-fgc-principle,
        .ten-fgc-mistake,
        .ten-fgc-warning,
        .ten-fgc-callout,
        .ten-fgc-directory-note,
        .ten-cgf-concept-card,
        .ten-cgf-document-card,
        .ten-cgf-principle,
        .ten-cgf-mistake,
        .ten-cgf-warning,
        .ten-cgf-callout,
        .ten-cgf-directory-note,
        .ten-bcgc-concept-card,
        .ten-bcgc-document-card,
        .ten-bcgc-principle,
        .ten-bcgc-mistake,
        .ten-bcgc-warning,
        .ten-bcgc-callout,
        .ten-bcgc-directory-note,
        .ten-bpp-concept-card,
        .ten-bpp-document-card,
        .ten-bpp-principle,
        .ten-bpp-mistake,
        .ten-bpp-warning,
        .ten-bpp-callout,
        .ten-bpp-directory-note,
        .ten-anl-concept-card,
        .ten-anl-analysis-card,
        .ten-anl-principle,
        .ten-anl-mistake,
        .ten-anl-warning,
        .ten-anl-callout,
        .ten-anl-directory-note
    ) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    html body .site-content .entry-content .wp-block-group[class*="ten-"] > :is(h1,h2,h3,h4,p,ul,ol),
    html body .site-content .entry-content .wp-block-group[class*="ten-"] > .wp-block-group__inner-container > :is(h1,h2,h3,h4,p,ul,ol) {
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    /* Empieza aquí: el número no reserva una columna lateral en móvil/tablet. */
    html body .site-content .entry-content .ten-start-known__item,
    html body .site-content .entry-content .ten-start-known__item:last-child {
        padding-left: 1.25rem !important;
    }

    html body .site-content .entry-content .ten-start-known__number {
        position: static !important;
        display: block !important;
        width: auto !important;
        margin: 0 0 .65rem !important;
    }

    /* Titulares largos: escala estable entre 320 y 820 px. */
    html body .site-content .entry-content .ten-section__title {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(1.9rem, 6.8vw, 2.35rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.02em !important;
        overflow-wrap: normal !important;
    }

    html body .site-content .entry-content :is(
        .ten-hero__title,
        .ten-start-page__title,
        .ten-about-page__title,
        .ten-kit-page__title,
        .ten-directory-page__title,
        .ten-guides-page__title,
        .ten-fgc-page__title,
        .ten-cgf-page__title,
        .ten-bcgc-page__title,
        .ten-bpp-page__title,
        .ten-anl-page__title
    ) {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(2.15rem, 8.6vw, 2.85rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.025em !important;
        overflow-wrap: normal !important;
    }

    /* Botones: nunca fuerzan overflow horizontal. */
    html body .site-content .entry-content .wp-block-button,
    html body .site-content .entry-content .wp-block-button__link {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html body .site-content .entry-content .wp-block-button__link {
        white-space: normal !important;
        overflow-wrap: normal !important;
    }

    /* Pie y CTA móvil ya validados. */
    .site-footer {
        padding: 0 !important;
        text-align: left;
    }

    .main-navigation .main-nav ul li > a[href*="/kit-investigacion-familiar-1936-1950/"] {
        display: block !important;
        margin: 14px 20px 18px !important;
        padding: .95rem 1rem !important;
        border: 1px solid var(--ten-navy, #132335) !important;
        border-radius: 3px !important;
        background: var(--ten-navy, #132335) !important;
        color: #fff !important;
        font-weight: 750 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-shadow: 0 6px 18px rgba(19,35,53,.12);
    }

    .main-navigation .main-nav ul li > a[href*="/kit-investigacion-familiar-1936-1950/"]:hover,
    .main-navigation .main-nav ul li > a[href*="/kit-investigacion-familiar-1936-1950/"]:focus-visible,
    .main-navigation .main-nav ul li.current-menu-item > a[href*="/kit-investigacion-familiar-1936-1950/"] {
        border-color: var(--ten-navy-hover, #0D1926) !important;
        background: var(--ten-navy-hover, #0D1926) !important;
        color: #fff !important;
    }

    .ten-back-to-top {
        right: 16px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
}

/* Móviles estrechos: un poco menos de padding, sin reducir la caja de lectura. */
@media (max-width: 430px) {
    html body .site-content .content-area .site-main article .entry-content > .wp-block-group.alignfull.ten-hero,
    html body .site-content .content-area .site-main article .entry-content > .wp-block-group.alignfull.ten-section,
    html body .site-content .content-area .site-main article .entry-content > section.wp-block-group.alignfull.ten-hero,
    html body .site-content .content-area .site-main article .entry-content > section.wp-block-group.alignfull.ten-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html body .site-content .entry-content .ten-section__title {
        font-size: clamp(1.82rem, 8vw, 2.1rem) !important;
    }

    html body .site-content .entry-content :is(
        .ten-hero__title,
        .ten-start-page__title,
        .ten-about-page__title,
        .ten-kit-page__title,
        .ten-directory-page__title,
        .ten-guides-page__title,
        .ten-fgc-page__title,
        .ten-cgf-page__title,
        .ten-bcgc-page__title,
        .ten-bpp-page__title,
        .ten-anl-page__title
    ) {
        font-size: clamp(2.05rem, 9vw, 2.45rem) !important;
    }
}



/* ---------------------------------------------------------
   v4.1 · TIPOGRAFÍA MÓVIL: palabras completas
   El ancho estructural ya está corregido. No se permiten cortes
   arbitrarios dentro de palabras en títulos, párrafos o enlaces.
   --------------------------------------------------------- */
@media (max-width: 820px) {
    html body .site-content .entry-content :is(h1,h2,h3,h4,h5,h6,p,li,a,strong,em,span),
    html body .site-content .entry-content .wp-block-button__link {
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ten-back-to-top {
        transition: none;
    }
}