.static-page {
    color-scheme: light;
    --bg: #f7f2ea;
    --text: #1d1a18;
    --muted: #5e5a55;
    --accent: #006d5b;
    --accent-soft: #d8f2ec;
    --card: #ffffff;
    --border: #d8d0c7;
    margin: 0;
    min-height: 100vh;
    font-family: 'Instrument Sans', sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 12% 18%, #ffe2b5 0, transparent 34%),
        radial-gradient(circle at 88% 78%, #d0eee7 0, transparent 36%),
        var(--bg);
}

.static-page * {
    box-sizing: border-box;
}

.static-page .skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 50;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background: var(--accent);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}

.static-page .skip-link:focus {
    top: 1rem;
}

.static-page .contenedor {
    width: min(1040px, 92%);
    margin: 0 auto;
    padding: 1.75rem 0 3rem;
}

.static-page .encabezado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.static-page .marca {
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.static-page .volver {
    text-decoration: none;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95rem;
}

.static-page .contenido {
    background: color-mix(in srgb, var(--card) 94%, #fff7ef 6%);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 1.6rem;
    line-height: 1.7;
    box-shadow: 0 18px 36px rgba(29, 26, 24, 0.06);
}

.static-page .contenido-bloque {
    margin-top: 1.6rem;
    scroll-margin-top: 7rem;
}

.static-page .contenido-bloque-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.static-page .contenido-bloque-header h2 {
    margin: 0;
}

.static-page h1 {
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    line-height: 1.05;
    max-width: 18ch;
}

.static-page h2 {
    margin: 1.5rem 0 0.4rem;
    font-size: 1.16rem;
}

.static-page h3 {
    margin: 0 0 0.45rem;
    font-size: 1rem;
}

.static-page p {
    margin: 0.6rem 0;
}

.static-page ul {
    margin: 0.4rem 0;
    padding-left: 1.1rem;
}

.static-page a {
    color: var(--accent);
}

.static-page a:hover {
    text-decoration: underline;
}

.static-page a:focus-visible,
.static-page button:focus-visible,
.static-page select:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 65%, white 35%);
    outline-offset: 3px;
}

.static-page .actualizacion {
    margin-top: 0.85rem;
    color: var(--muted);
    font-size: 0.92rem;
}

.static-page .report-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.static-page .report-breadcrumbs a {
    text-decoration: none;
    font-weight: 600;
}

.static-page .report-actions-bar {
    margin-top: 1.2rem;
}

.static-page .report-actions-title {
    margin: 0 0 0.65rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.static-page .report-actions-list,
.static-page .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.static-page .report-action-button,
.static-page .section-share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, white 72%);
    border-radius: 999px;
    background: #ffffff;
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.91rem;
    line-height: 1.2;
    cursor: pointer;
}

.static-page .report-action-button-primary {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

.static-page .section-share-button {
    padding-inline: 0.78rem;
    font-size: 0.82rem;
    white-space: nowrap;
}

.static-page .indice {
    position: sticky;
    top: 1rem;
    z-index: 10;
    margin-top: 1.2rem;
    padding: 1rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--border) 82%, white 18%);
    border-radius: 18px;
    background: color-mix(in srgb, var(--card) 94%, #ecf6f3 6%);
    backdrop-filter: blur(10px);
}

.static-page .indice-titulo {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.static-page .indice-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.static-page .indice-links a {
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, white 16%);
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    background: color-mix(in srgb, var(--card) 90%, #f6fffc 10%);
}

.static-page .indice-links a.is-active {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

.static-page .quick-facts-grid {
    display: grid;
    gap: 0.95rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.static-page .quick-fact-card {
    padding: 1rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--border) 76%, white 24%);
    border-radius: 16px;
    background: color-mix(in srgb, var(--card) 94%, #f7fffc 6%);
}

.static-page .quick-fact-card-wide {
    grid-column: 1 / -1;
}

.static-page .quick-fact-card h3 {
    font-size: 0.84rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
}

.static-page .quick-fact-card p,
.static-page .quick-fact-card ul {
    margin: 0;
    font-size: 0.96rem;
}

.static-page .quick-fact-card ul {
    padding-left: 1rem;
}

.static-page .report-trust-strip,
.static-page .report-brief-strip {
    margin-top: 1.35rem;
    display: grid;
    gap: 0.9rem;
}

.static-page .report-brief-strip-primary {
    margin-top: 0.2rem;
}

.static-page .report-trust-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.static-page .report-trust-card,
.static-page .report-brief-card {
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--border) 78%, white 22%);
    border-radius: 16px;
    background: color-mix(in srgb, var(--card) 95%, #fff8f0 5%);
}

.static-page .report-trust-card p:last-child,
.static-page .report-brief-card p:last-child {
    margin-bottom: 0;
}

.static-page .report-trust-card-action .report-action-button {
    margin-top: 0.75rem;
}

.static-page .report-brief-header {
    margin-bottom: 0.1rem;
}

.static-page .report-brief-header h2 {
    margin-top: 0;
}

.static-page .report-brief-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.static-page .report-orientation-strip {
    margin-top: 1.4rem;
    padding: 1rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, white 80%);
    border-radius: 18px;
    background: color-mix(in srgb, var(--card) 94%, #ecf7f3 6%);
}

.static-page .report-orientation-header {
    margin-bottom: 0.2rem;
}

.static-page .report-orientation-header h2 {
    margin-top: 0;
}

.static-page .report-orientation-grid {
    margin-top: 1rem;
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.static-page .report-orientation-card {
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--border) 78%, white 22%);
    border-radius: 16px;
    background: color-mix(in srgb, var(--card) 96%, #fff8f0 4%);
}

.static-page .report-orientation-card p:last-child {
    margin-bottom: 0;
}

.static-page .report-orientation-card-action .report-action-button {
    margin-top: 0.75rem;
}

.static-page .faq-grid,
.static-page .relacionados-grid,
.static-page .journey-grid {
    display: grid;
    gap: 1rem;
}

.static-page .report-rich-list {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.static-page .report-rich-list-pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.static-page .report-rich-item {
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--border) 80%, white 20%);
    border-radius: 16px;
    background: color-mix(in srgb, var(--card) 96%, #f8fcfb 4%);
}

.static-page .report-rich-item-pair h3 {
    margin: 0;
    font-size: 1rem;
}

.static-page .report-rich-item-pair p {
    margin: 0.45rem 0 0;
}

.static-page .report-rich-list-notes .report-rich-item {
    position: relative;
    padding-left: 1.15rem;
}

.static-page .report-rich-list-notes .report-rich-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1rem;
    bottom: 1rem;
    width: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 60%, white 40%);
}

.static-page .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.static-page .relacionados-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.static-page .journey-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.static-page .faq-card,
.static-page .relacionado-card,
.static-page .journey-card,
.static-page .comparador-base-card,
.static-page .compare-table,
.static-page .nota-lectura,
.static-page .territorio-cta,
.static-page .report-trust-card,
.static-page .report-brief-card {
    padding: 1rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--border) 82%, white 18%);
    border-radius: 16px;
    background: color-mix(in srgb, var(--card) 95%, #fff7ef 5%);
}

.static-page .faq-card p,
.static-page .relacionado-card p,
.static-page .journey-card p {
    margin-bottom: 0;
}

.static-page .related-card-actions {
    margin-top: 0.8rem;
}

.static-page .faq-card-accordion {
    overflow: hidden;
}

.static-page .faq-card-accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    list-style: none;
    cursor: pointer;
    font-weight: 700;
}

.static-page .faq-card-accordion summary::-webkit-details-marker {
    display: none;
}

.static-page .faq-card-accordion summary::after {
    content: '+';
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 1rem;
    line-height: 1;
}

.static-page .faq-card-accordion[open] summary::after {
    content: '-';
}

.static-page .faq-card-accordion p {
    margin-top: 0.65rem;
}

.static-page .journey-label {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.static-page .comparador {
    display: grid;
    gap: 1rem;
}

.static-page .compare-suggestions {
    display: grid;
    gap: 0.85rem;
}

.static-page .compare-suggestions-head h3 {
    margin: 0;
}

.static-page .compare-suggestions-head p {
    margin: 0.35rem 0 0;
}

.static-page .compare-suggestions-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.static-page .compare-followups {
    display: grid;
    gap: 0.85rem;
}

.static-page .compare-followups-head h3 {
    margin: 0;
}

.static-page .compare-followups-head p {
    margin: 0.35rem 0 0;
}

.static-page .compare-suggestion-card {
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--border) 78%, white 22%);
    border-radius: 16px;
    background: color-mix(in srgb, var(--card) 96%, #eef8f5 4%);
}

.static-page .compare-suggestion-card h4 {
    margin: 0 0 0.8rem;
    font-size: 1rem;
}

.static-page .compare-suggestion-card .report-action-button {
    margin-top: 0.2rem;
}

.static-page .comparador-controls {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
}

.static-page .comparador-actions,
.static-page .report-mobile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.static-page .comparador-select-field {
    display: grid;
    gap: 0.45rem;
}

.static-page .comparador-select-field span {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.static-page .comparador-select-field select {
    width: 100%;
    min-height: 2.85rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--border) 78%, white 22%);
    border-radius: 14px;
    background: #ffffff;
    font: inherit;
    color: var(--text);
}

.static-page .compare-table-wrap {
    overflow-x: auto;
}

.static-page .compare-table-desktop {
    min-width: 760px;
}

.static-page .compare-table {
    background: color-mix(in srgb, var(--card) 97%, #eef8f5 3%);
}

.static-page .compare-table table {
    width: 100%;
    border-collapse: collapse;
}

.static-page .compare-table th,
.static-page .compare-table td {
    padding: 0.8rem 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 66%, white 34%);
    text-align: left;
    vertical-align: top;
}

.static-page .compare-table thead th {
    border-top: 0;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.static-page .compare-table tbody th {
    width: 18%;
    font-size: 0.88rem;
    color: var(--muted);
    position: sticky;
    left: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--card) 97%, #eef8f5 3%);
}

.static-page .compare-table ul {
    margin: 0;
}

.static-page .compare-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--card) 97%, #eef8f5 3%);
}

.static-page .compare-mobile-cards {
    display: none;
    gap: 0.85rem;
}

.static-page .compare-mobile-card {
    padding: 1rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--border) 82%, white 18%);
    border-radius: 16px;
    background: color-mix(in srgb, var(--card) 96%, #eef8f5 4%);
}

.static-page .compare-mobile-card h3 {
    margin-bottom: 0.8rem;
}

.static-page .compare-mobile-row + .compare-mobile-row {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, white 28%);
}

.static-page .compare-mobile-row dt {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.static-page .compare-mobile-row dd {
    margin: 0.3rem 0 0;
}

.static-page .compare-mobile-row ul {
    margin-top: 0.3rem;
}

.static-page .nota-lectura {
    background: color-mix(in srgb, var(--card) 92%, #f1efe8 8%);
}

.static-page .report-mobile-actions {
    display: none;
}

.static-page .nota-lectura h2 {
    margin-top: 0;
}

.static-page .territorio-cta {
    background:
        linear-gradient(130deg, color-mix(in srgb, var(--accent-soft) 72%, white 28%) 0%, #fff6ea 100%);
}

.static-page .pie {
    margin-top: 1.2rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.static-page .pie-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0;
}

.static-page .pie-copy {
    margin-top: 0.6rem;
}

.static-page .pie-nav-grid {
    display: grid;
    width: 100%;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    align-items: start;
}

.static-page .pie-nav-group {
    min-width: 0;
    width: 100%;
    padding: 0.85rem 0.9rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--border) 72%, white 28%);
    border-radius: 12px;
    background: color-mix(in srgb, var(--card) 94%, #fff4e2 6%);
}

.static-page .pie-nav-title {
    margin: 0 0 0.55rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--muted) 82%, var(--text) 18%);
}

.static-page .pie-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.static-page .pie-nav-list li + li {
    margin-top: 0.34rem;
    padding-top: 0.34rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 64%, white 36%);
}

.static-page .pie-nav a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.static-page .correo-protegido {
    color: var(--text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-style: dotted;
}

@media (max-width: 980px) {
    .static-page .comparador-controls {
        grid-template-columns: 1fr;
    }

    .static-page .report-trust-strip,
    .static-page .report-brief-grid,
    .static-page .report-orientation-grid,
    .static-page .report-rich-list-pairs,
    .static-page .compare-suggestions-grid,
    .static-page .faq-grid,
    .static-page .journey-grid {
        grid-template-columns: 1fr;
    }

    .static-page .relacionados-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .static-page .contenedor {
        padding-bottom: 6.25rem;
    }

    .static-page .encabezado,
    .static-page .contenido-bloque-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .static-page .indice {
        position: static;
    }

    .static-page .quick-facts-grid,
    .static-page .relacionados-grid,
    .static-page .pie-nav-grid {
        grid-template-columns: 1fr;
    }

    .static-page .compare-table-desktop {
        display: none;
    }

    .static-page .compare-mobile-cards {
        display: grid;
    }

    .static-page .report-mobile-actions {
        position: fixed;
        left: 50%;
        bottom: 0.85rem;
        transform: translateX(-50%);
        z-index: 45;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
        width: min(96%, 520px);
        padding: 0.55rem;
        border: 1px solid color-mix(in srgb, var(--accent) 18%, white 82%);
        border-radius: 20px;
        background: color-mix(in srgb, var(--card) 92%, #fff6ea 8%);
        box-shadow: 0 14px 34px rgba(29, 26, 24, 0.14);
        backdrop-filter: blur(12px);
    }

    .static-page .report-mobile-actions a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.75rem;
        padding: 0.6rem 0.7rem;
        border-radius: 999px;
        background: #ffffff;
        color: var(--accent);
        text-decoration: none;
        font-size: 0.84rem;
        font-weight: 700;
    }

    .static-page .report-mobile-actions a.is-active {
        background: var(--accent);
        color: #ffffff;
    }
}
