:root {
    --ink: #142521;
    --cream: #f3f2ea;
    --lime: #B2E9A8;
    --mint: #d9eddb;
    --line: rgba(20, 37, 33, .18);
    --serif: Georgia, serif;
    /* Una sola tipografía para todo el sitio. Para cambiarla basta con editar --font
       (o dar a --display / --mono su propia fuente cuando se definan más) */
    --font: 'DM Sans', Arial, sans-serif;
    --sans: var(--font);
    --mono: var(--font);
    --display: var(--font)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5
}

.punto {
    font-size: larger;
    margin-right: 4px;
    color: var(--lime);
}

.p-solucion {
    border-left: 2px solid var(--lime);
    padding-left: 0.7rem;
    color: var(--lime);
}

.noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .035;
    z-index: 10;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

.header {
    height: 80px;
    padding: 0 5vw;
    display: flex;
    align-items: center;
    gap: 3rem;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: #f3f2eae8;
    backdrop-filter: blur(12px);
    z-index: 20
}

.brand {
    font: 600 1.3rem var(--display);
    letter-spacing: -.07em;
    color: var(--ink);
    text-decoration: none;
    margin-right: auto
}

.brand span {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400
}

.nav {
    display: flex;
    gap: 1.55rem;
    align-items: center;
    font-size: .75rem
}

.nav a,
footer a {
    color: var(--ink);
    text-decoration: none
}

.nav a:hover,
.text-link:hover,
footer a:hover {
    color: #718000
}

.nav-wa {
    font-weight: 600
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 1.8rem;
    padding: 1rem 1.25rem;
    background: var(--lime);
    border: 1px solid var(--ink);
    border-radius: 25px;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    font-size: .82rem;
    transition: .2s;
    box-shadow: 4px 4px 0 var(--ink)
}

.button:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--ink)
}

.button.small {
    padding: .65rem .9rem;
    gap: 1rem;
    font-size: .7rem
}

.menu-toggle {
    display: none
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5vw;
}

.hero {
    min-height: 760px;
    padding: 3vw 3vw 10vw;
}



.eyebrow,
.label,
.mono,
.time,
.card-top,
footer small,
.micro,
.note {
    font-family: var(--mono);
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase
}

.eyebrow {
    color: #167D32;
    margin: 0 0 1.8rem
}

.hero h1 {
    /*font: 500 clamp(3.6rem, 7vw, 7rem)/.94 var(--display);*/
    font: 500 clamp(3.6rem, 7vw, 3.5rem) var(--display);
    letter-spacing: -.08em;
    margin: 0;
    line-height: 1em;
}

.hero h1 em,
h2 em {
    font-family: var(--serif);
    font-weight: 400
}

.lead {
    max-width: 520px;
    font-size: 1.12rem;
    margin: 2.1rem 0 1.2rem
}

.note {
    display: flex;
    gap: .6rem;
    align-items: center;
    color: #167D32
}

.note b {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #167D32;
    box-shadow: 0 0 0 5px #c8f64a40
}

.actions {
    display: flex;
    align-items: center;
    gap: 1.7rem;
    margin-top: 2.1rem
}

.micro {
    max-width: 430px;
    line-height: 1.7;
    margin-top: 2.4rem;
    color: #52615b;
    text-transform: none;
    letter-spacing: 0
}

.hero-art {
    height: 540px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-inicio {
    display: block;
    width: 100%;
    max-width: 680px;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 22px 55px rgba(20, 37, 33, .16);
}

.orbit {
    position: absolute;
    border: 1px solid #14252133;
    border-radius: 50%
}

.orbit.one {
    width: 510px;
    height: 185px;
    transform: rotate(-20deg)
}

.orbit.two {
    width: 510px;
    height: 330px;
    transform: rotate(35deg)
}

.art-card {
    position: relative;
    width: 340px;
    height: 400px;
    background: var(--ink);
    color: var(--cream);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: rotate(-5deg);
    box-shadow: 15px 20px #1425211f
}

.card-top {
    font-size: .55rem;
    color: var(--lime)
}

.card-top span {
    float: right;
    color: #85918a
}

.play {
    position: absolute;
    right: 1.4rem;
    top: 4.2rem;
    color: var(--lime);
    font-size: 1.7rem
}

.art-title {
    font: 600 3.5rem/.83 var(--display);
    letter-spacing: -.1em
}

.art-title i {
    font: 400 1em var(--serif)
}

.card-bottom {
    font: var(--mono) .58rem;
    color: #a4b0a7;
    display: flex;
    justify-content: space-between
}

.chip,
.metric,
.lead-card {
    position: absolute;
    background: var(--lime);
    padding: .6rem .8rem;
    font: 500 .7rem var(--mono);
    box-shadow: 4px 4px 0 var(--ink)
}

.youtube {
    top: 15%;
    right: 4%;
    background-color: #f00;
}

.podcast {
    bottom: 20%;
    left: 5%;
    background: var(--mint)
}

.news {
    bottom: 9%;
    right: 15%;
    background: #fff
}

.metric,
.lead-card {
    background: #fff;
    border: 1px solid var(--ink);
    padding: .8rem 1rem
}

.metric {
    left: 1%;
    top: 22%;
    transform: rotate(-8deg)
}

.metric strong,
.lead-card strong {
    font: 600 1.8rem var(--display);
    display: block
}

.metric small,
.lead-card small {
    display: block;
    font: var(--mono) .58rem
}

.metric div {
    color: #8da52d;
    font-size: 1.6rem;
    line-height: .7
}

.lead-card {
    right: 1%;
    bottom: 29%;
    transform: rotate(7deg);
    background: var(--lime)
}

.lead-card small:first-child {
    font-size: .55rem;
    text-transform: uppercase
}

.section {
    padding: 8vw 5vw
}

.label {
    display: flex;
    gap: 1.3rem;
    color: #718000;
    margin-bottom: 3.5rem
}

.label span {
    color: var(--ink)
}

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6vw
}

.two h2,
h2 {
    font: 500 clamp(2.4rem, 4.5vw, 5rem) var(--display);
    letter-spacing: -.08em;
    margin: 0
}

.solution-cta {
    margin-top: 2rem
}

.copy {
    max-width: 460px;
    font-size: 1.05rem;
    align-self: center;
}

.copy .text-link {
    display: inline-block;
    margin-top: 1.4rem
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    margin-top: 6vw
}

.problem-grid article {
    padding: 1.6rem 1.3rem 0 0;
    border-right: 1px solid var(--line);
    min-height: 180px
}

.problem-grid article+article {
    padding-left: 1.3rem
}

.problem-grid span,
.audience-grid span {
    font: var(--mono) .65rem;
    color: #718000
}

.problem-grid h3,
.audience-grid h3,
.steps h3,
.mapa-grid h3,
.examples h3 {
    font: 600 1.2rem/1.05 var(--display);
    letter-spacing: -.04em;
    margin: 2.2rem 0 .7rem
}

.problem-grid p,
.audience-grid p {
    margin: 0;
    color: #52615b;
    font-size: .9rem
}

.dark {
    background: var(--ink);
    color: var(--cream)
}

.dark .label {
    color: var(--lime)
}

.dark .label span {
    color: var(--cream)
}

.muted {
    color: #a4b0a7
}

.steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 7vw;
    border-top: 1px solid #40514a
}

.steps article {
    padding: 1.2rem 1rem 0 0;
    border-right: 1px solid #40514a;
    min-height: 210px
}

.steps article+article {
    padding-left: 1rem
}

.steps b,
.examples>b {
    font: var(--mono) .65rem;
    color: var(--lime)
}

.steps h3 {
    font-size: 1.45rem;
    max-width: 150px
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    margin: 5vw 0 2.5rem
}

.audience-grid article {
    min-height: 210px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 1.5rem
}

.audience-grid h3 {
    margin: 2rem 0 .8rem
}

.outline {
    background: transparent;
    box-shadow: none
}

.mapa-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #40514a;
    margin-top: 6vw
}

.mapa-grid article {
    background: var(--ink);
    padding: 1.7rem 1.5rem;
    min-height: 290px
}

.letter {
    font: 500 5rem/.8 var(--display);
    letter-spacing: -.12em;
    color: var(--lime)
}

.letter small {
    font: var(--mono) .65rem;
    color: var(--cream);
    letter-spacing: 0
}

.mapa-grid h3 {
    margin-top: 4rem
}

.mapa-grid p {
    color: #a4b0a7;
    font-size: .9rem
}

.client-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    align-self: stretch;
}

.client-grid article {
    min-height: 180px;
    padding: 1.5rem;
    background: var(--cream);
    border: 1px solid var(--line);
}

.client-grid h3 {
    margin: 0 0 .8rem;
    font: 600 1.2rem/1.05 var(--display);
    letter-spacing: -.04em;
}

.client-grid p {
    margin: 0;
    color: #52615b;
    font-size: .9rem
}

.offer {
    background: var(--mint)
}

.offer-box {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 6vw;
    background: var(--cream);
    padding: 5vw;
}

.offer-box h2 {
    max-width: 700px;
    color: var(--ink);
    margin-bottom: 2rem;
    font-size: 3.5rem;
}

.offer-box>div>p {
    max-width: 600px;
    margin: 2rem 0;
    color: var(--ink);
}

.p-diferencia p {
    background-color: var(--lime);
    border: 0.0005vw solid ;
    border-color: #d9eddb50;
    border-radius: 2vw;
    padding: 3vw;
    font: var(--mono) .65rem;
    color: var(--ink) !important;
}

.plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin-top: 6vw
}

.plans .plan:first-child {
    grid-column: 1
}

.plan {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--ink);
    transform: translateY(-1.3rem);
    border: 1px solid var(--line);
    padding: 0.5rem;
    position: relative;
    padding-bottom: 1.4rem;
}

.plan p {
    font: 500 clamp(1rem, 4vw, 2rem)/1 var(--display);
    letter-spacing: -.1em
}

.plan p strong {
    font: var(--mono) .7rem;
    letter-spacing: 0;
    font-size: 2.5rem;
}

.arranque {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: transparent;
    border: 0;
    padding: 1rem 0 0;
    transform: none;
}

.arranque p {
    display: table;
    max-width: 100%;
    margin: 0 auto 1rem;
    padding: .8rem 1.2rem;
    color: var(--cream);
    font: 500 clamp(1rem, 4vw, 2rem)/1 var(--display);
}

.examples {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #40514a;
    margin-top: 5vw
}

.examples article {
    padding: 1.5rem;
    background: var(--ink);
    min-height: 360px
}

.examples h3 {
    font-size: 1.5rem;
    margin: 4rem 0 2rem
}

.examples article>b {
    display: block;
    margin-top: 1.5rem
}

.examples ul {
    padding-left: 1rem;
    color: #a4b0a7;
    font-size: .86rem
}

.examples p {
    font-size: .86rem;
    color: #a4b0a7
}

.faq {
    max-width: 900px;
    margin: 5vw 0 0 auto;
    border-top: 1px solid var(--line)
}

details {
    border-bottom: 1px solid var(--line);
    padding: 1.5rem 0
}

summary {
    cursor: pointer;
    list-style: none;
    font: 500 1.25rem var(--display);
    display: flex;
    justify-content: space-between
}

summary:after {
    content: '+';
    font-size: 1.4rem
}

details[open] summary:after {
    content: '−'
}

details p {
    max-width: 650px;
    color: #52615b;
    margin: 1rem 0 .1rem;
    font-size: .95rem
}

.closing {
    text-align: center;
    padding: 10vw 5vw
}

.closing h2 {
    max-width: 950px;
    margin: 1rem auto 1.8rem
}

.closing>p:not(.eyebrow) {
    max-width: 590px;
    margin: 0 auto 2rem;
    color: #a4b0a7
}

footer {
    padding: 5vw;
    color: var(--cream);
    background: #0e1b17
}

footer .brand,
footer a {
    color: var(--cream)
}

.footer-top {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    gap: 5vw
}

.footer-top>p {
    max-width: 250px;
    color: #a4b0a7;
    margin: 0
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 5vw
}

.footer-links a,
.footer-links small {
    white-space: nowrap
}

.footer-links div {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .84rem
}

.footer-links small {
    color: var(--lime);
    margin-bottom: .5rem
}

.footer-bottom {
    border-top: 1px solid #40514a;
    margin-top: 6vw;
    padding-top: 1.2rem;
    display: flex;
    justify-content: space-between;
    color: #7f9187;
    font: var(--mono) .6rem
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s, transform .7s
}

.reveal.visible {
    opacity: 1;
    transform: none
}

@media(max-width:900px) {
    .nav {
        gap: .8rem
    }

    .nav-wa {
        display: none
    }

    .hero {
        min-height: auto;
        padding-top: 2rem
    }

    .hero-art {
        height: 480px
    }

    .img-inicio {
        max-width: 620px;
    }

    .art-card {
        width: 285px;
        height: 350px
    }

    .art-title {
        font-size: 3rem
    }

    .problem-grid,
    .audience-grid,
    .examples {
        grid-template-columns: repeat(2, 1fr)
    }

    .steps,
    .mapa-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .steps article:nth-child(2n),
    .mapa-grid article:nth-child(2n) {
        border-right: 0
    }

    .steps article:nth-child(n+3) {
        border-top: 1px solid #40514a
    }

    .plans {
        grid-template-columns: 1fr
    }

    .plan.featured {
        transform: none
    }

    .offer-box {
        grid-template-columns: 1fr
    }

    .map-list {
        border-left: 0;
        border-top: 1px solid #14252166;
        padding: 32px 0 32 20
    }

    .footer-top {
        grid-template-columns: 1fr auto
    }

    .footer-top>p {
        display: none
    }
}

@media(max-width:650px) {
    .header {
        height: 66px;
        padding: 0 6vw
    }

    .header>.button {
        display: none
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-left: auto;
        background: none;
        border: 0
    }

    .menu-toggle i {
        display: block;
        width: 22px;
        height: 1px;
        background: var(--ink)
    }

    .nav {
        position: absolute;
        display: none;
        top: 66px;
        left: 0;
        right: 0;
        padding: 1rem 6vw 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        background: var(--cream);
        border-bottom: 1px solid var(--line)
    }

    .nav.open {
        display: flex
    }

    .nav-wa {
        display: block
    }

    .hero,
    .section {
        padding-left: 6vw;
        padding-right: 6vw
    }

    .grid,
    .two {
        grid-template-columns: 1fr;
        gap: 2.5rem
    }

    .hero h1 {
        font-size: 3rem
    }

    .lead {
        font-size: 1rem
    }

    .hero-art {
        height: 420px
    }

    .img-inicio {
        max-width: 100%;
        border-radius: 14px;
    }

    .orbit.one,
    .orbit.two {
        width: 360px
    }

    .metric {
        left: -2%;
        top: 16%
    }

    .lead-card {
        right: -2%;
        bottom: 19%
    }

    .art-card {
        width: 250px;
        height: 320px
    }

    .art-title {
        font-size: 2.6rem
    }

    .label {
        margin-bottom: 2rem
    }

    .problem-grid,
    .audience-grid,
    .examples,
    .steps,
    .mapa-grid {
        grid-template-columns: 1fr
    }

    .problem-grid article,
    .problem-grid article+article {
        padding: 1.2rem 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        min-height: 0
    }

    .steps article,
    .steps article+article {
        padding: 1.3rem 0;
        border-right: 0;
        border-bottom: 1px solid #40514a;
        min-height: 0
    }

    .mapa-grid {
        background: none
    }

    .mapa-grid article {
        min-height: 0;
        border-bottom: 1px solid #40514a
    }

    .mapa-grid h3 {
        margin-top: 2rem
    }

    .offer-box {
        padding: 2rem 1.4rem;
        box-shadow: 7px 7px 0 var(--ink)
    }

    .offer-box h2 {
        font-size: 2.7rem
    }

    .plan {
        padding: 1.5rem
    }

    .plan.featured {
        order: -1
    }

    .examples article {
        min-height: 0
    }

    .examples h3 {
        margin: 2rem 0 1.5rem
    }

    .faq {
        margin-top: 2rem
    }

    .closing h2 {
        font-size: 2.8rem
    }

    .footer-top {
        grid-template-columns: 1fr
    }

    .footer-links {
        gap: 2rem 3rem
    }

    .footer-bottom {
        flex-direction: column;
        gap: .5rem
    }
}
/* ===== Ajustes ===== */

/* Espacio entre líneas en títulos (general) */
h1, h2, .two h2, .hero h1 { line-height: 1em !important }

/* Parte 4: más espacio entre líneas en títulos y botón centrado con más aire */
.parte-4 h3 { line-height: 1.25 }
.parte-4 > .button {
    display: flex;
    width: fit-content;
    margin: 4rem auto 0
}

/* Parte 5: bloque negro más grande */
.offer-box .p-diferencia { display: flex }
.offer-box .p-diferencia p {
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 4vw;
    font-size: 1.15rem;
    line-height: 1.65
}

/* Planes: espacio título-botón, bordes redondeados y contenido centrado */
#planes h2 + .copy { margin-top: 2rem }
.plan {
    border-radius: 25px;
    text-align: center;
    padding: 1.5rem 1rem
}
.plan .button { margin-top: .5rem }
.plan ul { list-style-position: inside; padding: 0 }

/* Texto legible sobre fondo claro (apartado 07 y cierre del index) */
.section:not(.dark) .muted { color: #52615b }
.closing:not(.dark) > p:not(.eyebrow) { color: #52615b }


/* ===== Apartado 05: texto de la derecha más ancho ===== */
.offer-box h2 { font-size: clamp(2.2rem, 3.8vw, 3.5rem) }
@media (min-width: 901px) {
    .offer-box { grid-template-columns: .8fr 1.2fr }
}

/* ===== Apartado 03: sin números, con el punto de .note ===== */
.client-grid h3 {
    display: flex;
    align-items: flex-start;
    gap: 1rem
}
.client-grid h3 b {
    flex: none;
    width: 7px;
    height: 7px;
    margin: .42em 5px 0 5px;
    border-radius: 50%;
    background-color: #167D32;
    box-shadow: 0 0 0 5px #c8f64a40
}

/* ===== Preguntas (fondo oscuro): textos más visibles ===== */
.dark details p {
    color: #d3dcd6;
    font-size: 1.05rem
}

/* ===== Hero del index: ocupa una pantalla (hasta el botón y el texto) ===== */
:root { --header-h: 80px }

.hero-home {
    min-height: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
    padding: clamp(.75rem, 3vh, 2.5rem) 3vw 1.5rem;
    gap: 3vw;
    align-items: center
}
.hero-home .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0
}
.hero-home .eyebrow { margin: 0 0 clamp(.6rem, 2.2vh, 1.8rem) }
.hero-home h1 { font-size: clamp(1.9rem, min(4.4vw, 7vh), 3.6rem) }
.hero-home .lead {
    font-size: clamp(.9rem, min(1.5vw, 2.6vh), 1.12rem);
    margin: clamp(.8rem, 2.6vh, 2.1rem) 0 clamp(.6rem, 1.6vh, 1.2rem)
}
.hero-home .actions { margin-top: clamp(.8rem, 2.4vh, 2.1rem) }
/* Texto bajo el hero: queda fuera de la primera pantalla y aparece al hacer scroll */
.hero-micro {
    max-width: calc(430px + 3vw);
    margin: .9rem 0 .6rem;
    padding: 0 3vw
}
.hero-home .hero-art { height: 100%; min-height: 0 }
.hero-home .img-inicio {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%
}
.hero-micro + hr { margin: 0 }

/* Pantallas muy bajas: que crezca en vez de solaparse */
@media (min-width: 901px) and (max-height: 600px) {
    .hero-home { height: auto; min-height: calc(100svh - var(--header-h)) }
    .hero-home .hero-art { height: 420px }
}

/* ===== Responsive ===== */

/* Menú hamburguesa hasta 1240px (8 enlaces + botón no caben antes) */
@media (max-width: 1240px) {
    :root { --header-h: 66px }
    .header { height: var(--header-h); padding: 0 6vw }
    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-left: auto;
        padding: 8px 0;
        background: none;
        border: 0;
        cursor: pointer
    }
    .menu-toggle i { display: block; width: 22px; height: 1px; background: var(--ink) }
    .nav {
        position: absolute;
        display: none;
        top: var(--header-h);
        left: 0;
        right: 0;
        padding: 1rem 6vw 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        font-size: .85rem;
        background: var(--cream);
        border-bottom: 1px solid var(--line)
    }
    .nav.open { display: flex }
    .nav-wa { display: inline-flex }
}

/* Tablet y móvil */
@media (max-width: 900px) {
    .grid, .two { grid-template-columns: 1fr; gap: 2.5rem }
    .section { padding: 12vw 6vw }
    .plan { transform: none }
    .plans { margin-top: 3rem }
    .hero-home {
        height: auto;
        padding: 1.5rem 6vw 1rem
    }
    .hero-home h1 { font-size: clamp(2.2rem, 9vw, 3.4rem) }
    .hero-home .lead { font-size: 1rem; margin: 1.5rem 0 1rem }
    .hero-home .actions { margin-top: 1.5rem }
    .hero-micro { padding: 0 6vw; margin: 1rem 0 .5rem }
    .hero-home .hero-art { height: auto }
    .hero-home .img-inicio { width: 100%; max-height: none }
}

@media (max-width: 650px) {
    .client-grid { grid-template-columns: 1fr }
    .client-grid article { min-height: 0 }
    .plan p strong { font-size: 2rem }
    .button { padding: .9rem 1.1rem; gap: 1rem }
    .actions { flex-wrap: wrap; gap: 1rem }
    .closing { padding: 14vw 6vw }
    .p-diferencia p { padding: 1.5rem; font-size: 1rem }
    .offer-box .p-diferencia p { padding: 1.5rem; font-size: 1rem }
}

/* ===== Apartado 03 (tarjetas): más anchas en todas las páginas ===== */
@media (min-width: 901px) {
    .two:has(.client-grid) { grid-template-columns: .6fr 1.4fr; gap: 4vw }
    .two:has(.client-grid) h2 { font-size: clamp(2rem, 3.4vw, 4rem) }
}

/* ===== Footer: Redes arriba a la derecha y Menú desplegable ===== */
.footer-top {
    grid-template-columns: 1.2fr 1fr auto auto;
    align-items: start
}
.footer-redes {
    justify-self: end;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .84rem
}
.footer-redes a { white-space: nowrap }
.footer-redes small { color: var(--lime); margin-bottom: .5rem }


@media (max-width: 900px) {
    .footer-top { grid-template-columns: 1fr auto }
    .footer-top .footer-brand { order: 1 }
    .footer-redes { order: 2 }
    .footer-links { order: 3; grid-column: 1 / -1 }
}
@media (max-width: 650px) {
    .footer-top { grid-template-columns: 1fr }
    .footer-links { order: 2 }
    .footer-redes { order: 3; justify-self: start }
}

/* Nota bajo una cuadrícula de tarjetas: separada de los cuadrados y alineada */
.client-grid + .grid-nota {
    margin: 1.8rem 0 0;
    padding-left: 1rem;
    border-left: 2px solid var(--lime);
    font-size: .95rem;
    color: #52615b
}

/* ===== Apartado 03 (tarjetas): sin espacio vacío abajo ===== */
.client-grid article {
    min-height: 0;
    padding-bottom: 1.3rem
}



/* ===== Texto más grande (index y páginas que usan este CSS) ===== */
body { font-size: 18px }

/* Menú y botones */
.nav { font-size: .9rem }
.button { font-size: 1rem }
.button.small { font-size: .9rem }

/* Etiquetas pequeñas en mayúsculas */
.eyebrow,
.label,
.mono,
.time,
.card-top,
footer small,
.note { font-size: .8rem }
.micro { font-size: .95rem }
.card-top { font-size: .7rem }

/* Textos de párrafo */
.lead { font-size: 1.3rem }
.copy { font-size: 1.2rem }
.problem-grid p,
.audience-grid p,
.mapa-grid p,
.client-grid p { font-size: 1.05rem }
.examples ul,
.examples p { font-size: 1.05rem }
details p { font-size: 1.1rem }
.dark details p { font-size: 1.2rem }
.client-grid + .grid-nota { font-size: 1.1rem }

/* Títulos de tarjetas y preguntas */
.problem-grid h3,
.audience-grid h3,
.steps h3,
.mapa-grid h3,
.examples h3,
.client-grid h3 { font-size: 1.4rem }
.steps h3 { font-size: 1.6rem }
.examples h3 { font-size: 1.65rem }
summary { font-size: 1.4rem }

/* Chips y tarjetas flotantes del hero */
.chip,
.metric,
.lead-card { font-size: .85rem }

/* Footer */
.footer-links div,
.footer-redes,
.footer-bottom { font-size: .8rem }

/* Hero del index: sigue cabiendo en una pantalla */
.hero-home .lead { font-size: clamp(1.05rem, min(1.7vw, 3vh), 1.3rem) }

/* Móvil */
@media (max-width: 900px) {
    .hero-home .lead { font-size: 1.15rem }
}
@media (max-width: 650px) {
    .lead { font-size: 1.15rem }
    .nav { font-size: 1rem }
    summary { font-size: 1.25rem }
}


/* ===== Nav: que nada se parta en dos líneas ===== */
.nav a,
.nav .button { white-space: nowrap }
.header { gap: 2rem; padding: 0 3vw }
.nav { gap: 1.2rem }
.header .button {
    padding: .7rem 1rem;
    gap: .8rem;
    font-size: .9rem
}
@media (max-width: 1240px) {
    .header { padding: 0 6vw }
    .nav { font-size: 1rem; gap: 1rem }
}

/* ===== Footer: texto bajo el logo, menú visible y Contacto debajo de Legal ===== */
@media (min-width: 901px) {
    /* Menú, Legal/Contacto y Redes quedan como columnas iguales, sin huecos grandes entre ellas */
    .footer-top {
        grid-template-columns: minmax(230px, 1.5fr) 1fr 1fr .8fr;
        gap: 3vw;
        align-items: start
    }
    .footer-links { display: contents }
    .footer-redes { justify-self: start }
}
.footer-brand p {
    max-width: 260px;
    color: #a4b0a7;
    margin: 1.2rem 0 0
}
.footer-links { gap: 2rem 6vw }
.footer-links .footer-stack { gap: 1.8rem }

/* ===== Rejillas: se adaptan a cuántos bloques tengan (solo en escritorio) ===== */
@media (min-width: 901px) {
    .problem-grid:has(> article:nth-child(2):last-child),
    .steps:has(> article:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr) }
    .problem-grid:has(> article:nth-child(3):last-child),
    .steps:has(> article:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr) }
    .steps:has(> article:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr) }
    .problem-grid:has(> article:nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr) }
}

/* =====================================================================
   RONDA 3
   ===================================================================== */

/* ===== Tipografía: una sola familia, tracking de títulos algo más abierto ===== */
.hero h1,
.hero-home h1,
h2,
.two h2 { letter-spacing: -.05em }
.brand { letter-spacing: -.05em }
.problem-grid h3,
.audience-grid h3,
.steps h3,
.mapa-grid h3,
.examples h3,
.client-grid h3 { letter-spacing: -.025em }
.plan p,
.art-title { letter-spacing: -.05em }
.letter { letter-spacing: -.06em }

/* ===== Menú móvil: botón y nav vienen en el HTML; se muestran/ocultan por CSS + JS ===== */
.menu-toggle:focus-visible,
.nav a:focus-visible { outline: 2px solid #167D32; outline-offset: 3px }

/* ===== Bloques de pasos (cuadrados): el texto ocupa todo el ancho ===== */
.steps h3 { max-width: none }
.two > .copy.muted { max-width: none }
.steps article { padding-right: .8rem }

/* ===== Fondo "papel + pilares + ondas de audio" (secciones con offer-box y 404) ===== */
.section:has(> .offer-box),
.fondo-ondas {
    position: relative;
    background-color: var(--cream);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%27150%27 viewBox=%270 0 14 150%27%3E%3Cline x1=%277%27 y1=%276%27 x2=%277%27 y2=%27150%27 stroke=%27%23167D32%27 stroke-width=%271.6%27/%3E%3Ccircle cx=%277%27 cy=%276%27 r=%276%27 fill=%27%23167D32%27/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%271100%27 height=%27100%27 viewBox=%270 0 1100 100%27%3E%3Cg fill=%27%23142521%27 fill-opacity=%27.78%27%3E%3Crect x=%273%27 y=%2739.2%27 width=%274%27 height=%2721.6%27 rx=%272%27/%3E%3Crect x=%2713%27 y=%2736.1%27 width=%274%27 height=%2727.8%27 rx=%272%27/%3E%3Crect x=%2723%27 y=%2728.3%27 width=%274%27 height=%2743.5%27 rx=%272%27/%3E%3Crect x=%2733%27 y=%2729.7%27 width=%274%27 height=%2740.7%27 rx=%272%27/%3E%3Crect x=%2743%27 y=%2721.2%27 width=%274%27 height=%2757.5%27 rx=%272%27/%3E%3Crect x=%2753%27 y=%2720.5%27 width=%274%27 height=%2759.0%27 rx=%272%27/%3E%3Crect x=%2763%27 y=%2722.9%27 width=%274%27 height=%2754.1%27 rx=%272%27/%3E%3Crect x=%2773%27 y=%2715.5%27 width=%274%27 height=%2769.1%27 rx=%272%27/%3E%3Crect x=%2783%27 y=%2722.4%27 width=%274%27 height=%2755.3%27 rx=%272%27/%3E%3Crect x=%2793%27 y=%2717.5%27 width=%274%27 height=%2765.0%27 rx=%272%27/%3E%3Crect x=%27103%27 y=%2724.3%27 width=%274%27 height=%2751.4%27 rx=%272%27/%3E%3Crect x=%27113%27 y=%2726.4%27 width=%274%27 height=%2747.2%27 rx=%272%27/%3E%3Crect x=%27123%27 y=%2725.9%27 width=%274%27 height=%2748.3%27 rx=%272%27/%3E%3Crect x=%27133%27 y=%2726.5%27 width=%274%27 height=%2747.0%27 rx=%272%27/%3E%3Crect x=%27143%27 y=%2736.0%27 width=%274%27 height=%2728.0%27 rx=%272%27/%3E%3Crect x=%27153%27 y=%2739.3%27 width=%274%27 height=%2721.5%27 rx=%272%27/%3E%3Crect x=%27163%27 y=%2742.0%27 width=%274%27 height=%2715.9%27 rx=%272%27/%3E%3Crect x=%27173%27 y=%2745.7%27 width=%274%27 height=%278.5%27 rx=%272%27/%3E%3Crect x=%27183%27 y=%2745.3%27 width=%274%27 height=%279.4%27 rx=%272%27/%3E%3Crect x=%27193%27 y=%2742.6%27 width=%274%27 height=%2714.9%27 rx=%272%27/%3E%3Crect x=%27203%27 y=%2737.9%27 width=%274%27 height=%2724.2%27 rx=%272%27/%3E%3Crect x=%27213%27 y=%2739.4%27 width=%274%27 height=%2721.1%27 rx=%272%27/%3E%3Crect x=%27223%27 y=%2734.0%27 width=%274%27 height=%2731.9%27 rx=%272%27/%3E%3Crect x=%27233%27 y=%2736.4%27 width=%274%27 height=%2727.2%27 rx=%272%27/%3E%3Crect x=%27243%27 y=%2737.4%27 width=%274%27 height=%2725.3%27 rx=%272%27/%3E%3Crect x=%27253%27 y=%2738.3%27 width=%274%27 height=%2723.4%27 rx=%272%27/%3E%3Crect x=%27263%27 y=%2738.8%27 width=%274%27 height=%2722.3%27 rx=%272%27/%3E%3Crect x=%27273%27 y=%2739.2%27 width=%274%27 height=%2721.6%27 rx=%272%27/%3E%3Crect x=%27283%27 y=%2743.4%27 width=%274%27 height=%2713.2%27 rx=%272%27/%3E%3Crect x=%27293%27 y=%2745.3%27 width=%274%27 height=%279.4%27 rx=%272%27/%3E%3Crect x=%27303%27 y=%2746.5%27 width=%274%27 height=%277.0%27 rx=%272%27/%3E%3Crect x=%27313%27 y=%2744.2%27 width=%274%27 height=%2711.6%27 rx=%272%27/%3E%3Crect x=%27323%27 y=%2741.2%27 width=%274%27 height=%2717.6%27 rx=%272%27/%3E%3Crect x=%27333%27 y=%2740.5%27 width=%274%27 height=%2719.1%27 rx=%272%27/%3E%3Crect x=%27343%27 y=%2738.8%27 width=%274%27 height=%2722.4%27 rx=%272%27/%3E%3Crect x=%27353%27 y=%2736.7%27 width=%274%27 height=%2726.5%27 rx=%272%27/%3E%3Crect x=%27363%27 y=%2733.2%27 width=%274%27 height=%2733.6%27 rx=%272%27/%3E%3Crect x=%27373%27 y=%2734.7%27 width=%274%27 height=%2730.6%27 rx=%272%27/%3E%3Crect x=%27383%27 y=%2736.2%27 width=%274%27 height=%2727.7%27 rx=%272%27/%3E%3Crect x=%27393%27 y=%2736.4%27 width=%274%27 height=%2727.2%27 rx=%272%27/%3E%3Crect x=%27403%27 y=%2739.3%27 width=%274%27 height=%2721.3%27 rx=%272%27/%3E%3Crect x=%27413%27 y=%2742.6%27 width=%274%27 height=%2714.9%27 rx=%272%27/%3E%3Crect x=%27423%27 y=%2745.0%27 width=%274%27 height=%2710.0%27 rx=%272%27/%3E%3Crect x=%27433%27 y=%2745.9%27 width=%274%27 height=%278.3%27 rx=%272%27/%3E%3Crect x=%27443%27 y=%2742.8%27 width=%274%27 height=%2714.4%27 rx=%272%27/%3E%3Crect x=%27453%27 y=%2737.6%27 width=%274%27 height=%2724.7%27 rx=%272%27/%3E%3Crect x=%27463%27 y=%2733.3%27 width=%274%27 height=%2733.4%27 rx=%272%27/%3E%3Crect x=%27473%27 y=%2725.8%27 width=%274%27 height=%2748.4%27 rx=%272%27/%3E%3Crect x=%27483%27 y=%2722.5%27 width=%274%27 height=%2755.1%27 rx=%272%27/%3E%3Crect x=%27493%27 y=%2723.8%27 width=%274%27 height=%2752.4%27 rx=%272%27/%3E%3Crect x=%27503%27 y=%2712.0%27 width=%274%27 height=%2776.1%27 rx=%272%27/%3E%3Crect x=%27513%27 y=%2721.9%27 width=%274%27 height=%2756.1%27 rx=%272%27/%3E%3Crect x=%27523%27 y=%2716.7%27 width=%274%27 height=%2766.6%27 rx=%272%27/%3E%3Crect x=%27533%27 y=%2711.8%27 width=%274%27 height=%2776.3%27 rx=%272%27/%3E%3Crect x=%27543%27 y=%2721.7%27 width=%274%27 height=%2756.6%27 rx=%272%27/%3E%3Crect x=%27553%27 y=%2719.0%27 width=%274%27 height=%2761.9%27 rx=%272%27/%3E%3Crect x=%27563%27 y=%2727.3%27 width=%274%27 height=%2745.4%27 rx=%272%27/%3E%3Crect x=%27573%27 y=%2723.9%27 width=%274%27 height=%2752.2%27 rx=%272%27/%3E%3Crect x=%27583%27 y=%2727.6%27 width=%274%27 height=%2744.8%27 rx=%272%27/%3E%3Crect x=%27593%27 y=%2733.8%27 width=%274%27 height=%2732.5%27 rx=%272%27/%3E%3Crect x=%27603%27 y=%2737.2%27 width=%274%27 height=%2725.7%27 rx=%272%27/%3E%3Crect x=%27613%27 y=%2743.2%27 width=%274%27 height=%2713.7%27 rx=%272%27/%3E%3Crect x=%27623%27 y=%2746.2%27 width=%274%27 height=%277.5%27 rx=%272%27/%3E%3Crect x=%27633%27 y=%2744.9%27 width=%274%27 height=%2710.2%27 rx=%272%27/%3E%3Crect x=%27643%27 y=%2741.8%27 width=%274%27 height=%2716.4%27 rx=%272%27/%3E%3Crect x=%27653%27 y=%2739.4%27 width=%274%27 height=%2721.1%27 rx=%272%27/%3E%3Crect x=%27663%27 y=%2735.6%27 width=%274%27 height=%2728.8%27 rx=%272%27/%3E%3Crect x=%27673%27 y=%2733.5%27 width=%274%27 height=%2733.1%27 rx=%272%27/%3E%3Crect x=%27683%27 y=%2735.4%27 width=%274%27 height=%2729.3%27 rx=%272%27/%3E%3Crect x=%27693%27 y=%2734.6%27 width=%274%27 height=%2730.8%27 rx=%272%27/%3E%3Crect x=%27703%27 y=%2738.7%27 width=%274%27 height=%2722.6%27 rx=%272%27/%3E%3Crect x=%27713%27 y=%2737.4%27 width=%274%27 height=%2725.1%27 rx=%272%27/%3E%3Crect x=%27723%27 y=%2740.1%27 width=%274%27 height=%2719.9%27 rx=%272%27/%3E%3Crect x=%27733%27 y=%2742.2%27 width=%274%27 height=%2715.7%27 rx=%272%27/%3E%3Crect x=%27743%27 y=%2745.4%27 width=%274%27 height=%279.1%27 rx=%272%27/%3E%3Crect x=%27753%27 y=%2746.3%27 width=%274%27 height=%277.3%27 rx=%272%27/%3E%3Crect x=%27763%27 y=%2743.9%27 width=%274%27 height=%2712.3%27 rx=%272%27/%3E%3Crect x=%27773%27 y=%2740.5%27 width=%274%27 height=%2718.9%27 rx=%272%27/%3E%3Crect x=%27783%27 y=%2740.4%27 width=%274%27 height=%2719.2%27 rx=%272%27/%3E%3Crect x=%27793%27 y=%2736.6%27 width=%274%27 height=%2726.8%27 rx=%272%27/%3E%3Crect x=%27803%27 y=%2736.8%27 width=%274%27 height=%2726.3%27 rx=%272%27/%3E%3Crect x=%27813%27 y=%2736.5%27 width=%274%27 height=%2726.9%27 rx=%272%27/%3E%3Crect x=%27823%27 y=%2737.0%27 width=%274%27 height=%2726.1%27 rx=%272%27/%3E%3Crect x=%27833%27 y=%2733.8%27 width=%274%27 height=%2732.4%27 rx=%272%27/%3E%3Crect x=%27843%27 y=%2738.8%27 width=%274%27 height=%2722.5%27 rx=%272%27/%3E%3Crect x=%27853%27 y=%2740.4%27 width=%274%27 height=%2719.2%27 rx=%272%27/%3E%3Crect x=%27863%27 y=%2742.7%27 width=%274%27 height=%2714.6%27 rx=%272%27/%3E%3Crect x=%27873%27 y=%2745.4%27 width=%274%27 height=%279.2%27 rx=%272%27/%3E%3Crect x=%27883%27 y=%2745.8%27 width=%274%27 height=%278.3%27 rx=%272%27/%3E%3Crect x=%27893%27 y=%2741.9%27 width=%274%27 height=%2716.2%27 rx=%272%27/%3E%3Crect x=%27903%27 y=%2737.2%27 width=%274%27 height=%2725.6%27 rx=%272%27/%3E%3Crect x=%27913%27 y=%2730.4%27 width=%274%27 height=%2739.3%27 rx=%272%27/%3E%3Crect x=%27923%27 y=%2725.7%27 width=%274%27 height=%2748.6%27 rx=%272%27/%3E%3Crect x=%27933%27 y=%2720.5%27 width=%274%27 height=%2759.0%27 rx=%272%27/%3E%3Crect x=%27943%27 y=%2723.6%27 width=%274%27 height=%2752.8%27 rx=%272%27/%3E%3Crect x=%27953%27 y=%2719.3%27 width=%274%27 height=%2761.5%27 rx=%272%27/%3E%3Crect x=%27963%27 y=%2718.3%27 width=%274%27 height=%2763.3%27 rx=%272%27/%3E%3Crect x=%27973%27 y=%279.8%27 width=%274%27 height=%2780.4%27 rx=%272%27/%3E%3Crect x=%27983%27 y=%279.0%27 width=%274%27 height=%2782.1%27 rx=%272%27/%3E%3Crect x=%27993%27 y=%2721.9%27 width=%274%27 height=%2756.2%27 rx=%272%27/%3E%3Crect x=%271003%27 y=%2723.4%27 width=%274%27 height=%2753.1%27 rx=%272%27/%3E%3Crect x=%271013%27 y=%2725.4%27 width=%274%27 height=%2749.2%27 rx=%272%27/%3E%3Crect x=%271023%27 y=%2728.7%27 width=%274%27 height=%2742.7%27 rx=%272%27/%3E%3Crect x=%271033%27 y=%2730.4%27 width=%274%27 height=%2739.2%27 rx=%272%27/%3E%3Crect x=%271043%27 y=%2734.2%27 width=%274%27 height=%2731.6%27 rx=%272%27/%3E%3Crect x=%271053%27 y=%2740.0%27 width=%274%27 height=%2719.9%27 rx=%272%27/%3E%3Crect x=%271063%27 y=%2744.1%27 width=%274%27 height=%2711.7%27 rx=%272%27/%3E%3Crect x=%271073%27 y=%2746.7%27 width=%274%27 height=%276.7%27 rx=%272%27/%3E%3Crect x=%271083%27 y=%2744.8%27 width=%274%27 height=%2710.4%27 rx=%272%27/%3E%3Crect x=%271093%27 y=%2741.5%27 width=%274%27 height=%2717.1%27 rx=%272%27/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27380%27 height=%27320%27 viewBox=%270 0 380 320%27%3E%3Cg fill=%27none%27 stroke=%27%238da52d%27 stroke-opacity=%27.38%27 stroke-width=%271.6%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M380 18 C318 34 262 96 272 160 C281 214 344 228 356 184 C366 150 330 130 306 152 C292 166 302 188 320 184%27/%3E%3Cpath d=%27M380 96 C340 108 318 146 330 196 C338 232 372 246 380 240%27/%3E%3Cpath d=%27M300 0 C296 40 270 62 236 70 C204 78 190 108 210 126 C226 140 248 128 244 110%27/%3E%3Cpath d=%27M250 20 C240 44 222 54 204 52%27/%3E%3C/g%3E%3Cg fill=%27%23B2E9A8%27 fill-opacity=%27.7%27%3E%3Cellipse cx=%27214%27 cy=%2756%27 rx=%2712%27 ry=%275%27 transform=%27rotate%28-28 214 56%29%27/%3E%3Cellipse cx=%27338%27 cy=%27128%27 rx=%2711%27 ry=%274.5%27 transform=%27rotate%2824 338 128%29%27/%3E%3Cellipse cx=%27268%27 cy=%2796%27 rx=%2710%27 ry=%274%27 transform=%27rotate%28-48 268 96%29%27/%3E%3C/g%3E%3Cg fill=%27%238da52d%27 fill-opacity=%27.4%27%3E%3Ccircle cx=%27238%27 cy=%27154%27 r=%273%27/%3E%3Ccircle cx=%27352%27 cy=%2762%27 r=%272.4%27/%3E%3Ccircle cx=%27196%27 cy=%2792%27 r=%272%27/%3E%3Ccircle cx=%27290%27 cy=%27212%27 r=%272.6%27/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(ellipse 55% 45% at 78% 16%, rgba(226, 216, 188, .55), transparent 72%),
        radial-gradient(ellipse 50% 55% at 14% 88%, rgba(222, 216, 196, .5), transparent 72%);
    background-repeat: no-repeat, repeat-x, no-repeat, no-repeat, no-repeat;
    background-position: 68% calc(100% - 12px), 0 calc(100% - 20px), right 1% top 0, 0 0, 0 0;
    background-size: 14px 150px, auto 100px, 380px 320px, auto, auto
}
.section:has(> .offer-box) .offer-box {
    position: relative;
    background: transparent
}
@media (max-width: 1100px) {
    .section:has(> .offer-box),
    .fondo-ondas {
        background-size: 14px 120px, auto 80px, 260px 220px, auto, auto
    }
}
@media (max-width: 900px) {
    .section:has(> .offer-box) { padding-bottom: 120px }
}

/* ===== Preguntas: centradas, 15 % de aire a cada lado ===== */
.faq {
    width: 70%;
    max-width: 980px;
    margin: 5vw auto 0
}
details p { max-width: none }
@media (max-width: 900px) {
    .faq { width: 100%; max-width: none; margin-top: 2rem }
}

/* ===== Siguiente paso (producción): más aire entre el h2 y el botón ===== */
.closing-aire h2 { margin-bottom: 3.2rem }

/* ===== YouTube 04: el texto de la derecha ocupa más ancho ===== */
@media (min-width: 901px) {
    #para-quien .two { grid-template-columns: .8fr 1.2fr }
}
#para-quien .copy { max-width: none }

/* ===== Podcast 03: el texto de la derecha más a la izquierda ===== */
@media (min-width: 901px) {
    .two-contrata { grid-template-columns: auto 1fr; gap: 5vw }
}

/* ===== Planes: mismo texto de "incluye" en todas las páginas ===== */
.plan h3 {
    font: 600 1.15rem/1.2 var(--display);
    letter-spacing: -.02em;
    margin: 1.2rem 0 .6rem
}
.plan ul {
    margin: 0 0 1.4rem;
    font-size: 1.05rem;
    line-height: 1.55
}
.plan li { padding: .1rem 0 }
.plan .micro { margin-top: 0 }
.plan .copy { margin: 1rem auto 0; font-size: 1.05rem }

/* ===== Precios 02: texto en una línea, centrado, con el botón debajo ===== */
.copy-centrado {
    max-width: none;
    margin: 3.5rem auto 0;
    text-align: center
}
.copy-centrado p { margin: 0 0 1.6rem }
@media (min-width: 1280px) {
    .copy-centrado p { white-space: nowrap }
}

/* ===== Hero con imagen vertical: marco uniforme ===== */
.hero-home .img-inicio.img-vertical {
    width: 100%;
    height: 100%;
    max-width: 560px;
    object-fit: cover;
    object-position: center
}
@media (max-width: 900px) {
    .hero-home .img-inicio.img-vertical {
        height: auto;
        max-height: none;
        aspect-ratio: 4 / 5
    }
}


/* ===== 404 ===== */
.page-404 {
    min-height: calc(100svh - var(--header-h));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8vw 6vw
}
.page-404 .hero-copy { max-width: 760px }
.page-404 h1 { margin: 0; font: 500 clamp(2.4rem, 5.4vw, 4.4rem)/1 var(--display); letter-spacing: -.05em }
.page-404 .lead { margin: 1.8rem auto 0 }
.page-404 .actions { justify-content: center; flex-wrap: wrap; margin-top: 2.6rem }
.button.outline { background: transparent; box-shadow: none }
.button.outline:hover { background: var(--lime); transform: none }


/* ===== Formulario ===== */
.form-page { padding: 5vw 5vw 180px }
.form-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 5vw;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto
}

/* Columna de texto */
.form-intro { position: sticky; top: calc(var(--header-h) + 2rem) }
.form-intro h1 {
    margin: 0;
    font: 500 clamp(2.4rem, 4.4vw, 3.8rem)/1 var(--display);
    letter-spacing: -.05em
}
.form-intro .lead { max-width: 440px; margin: 1.6rem 0 1.8rem }
.form-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem }
.form-points li {
    position: relative;
    padding-left: 1.7rem;
    font-size: 1.05rem;
    color: var(--ink)
}
.form-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #167D32;
    box-shadow: 0 0 0 5px #c8f64a40
}

/* Tarjeta del formulario */
.form-card {
    background: #fbfaf5;
    border: 1px solid var(--ink);
    border-radius: 25px;
    padding: clamp(1.5rem, 3vw, 2.6rem);
    box-shadow: 8px 8px 0 var(--ink);
    display: grid;
    gap: 2rem
}
.form-card fieldset { border: 0; margin: 0; padding: 0; min-width: 0 }
.form-card legend {
    padding: 0;
    margin-bottom: 1.2rem;
    display: flex;
    gap: 1.1rem;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #718000
}
.form-card legend span { color: var(--ink) }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.4rem }
.form-grid .full { grid-column: 1 / -1 }

.field { display: flex; flex-direction: column; gap: .5rem; min-width: 0 }
.field label { font-weight: 600; font-size: 1rem; line-height: 1.3 }
.field label small { font-weight: 400; color: #52615b; font-size: .9rem; margin-left: .3rem }
.req { color: #167D32 }
.field input,
.field textarea {
    width: 100%;
    font: inherit;
    font-size: 1.05rem;
    color: var(--ink);
    padding: .85rem 1rem;
    background: #fff;
    border: 1px solid rgba(20, 37, 33, .4);
    border-radius: 14px;
    transition: border-color .2s, box-shadow .2s
}
.field textarea { min-height: 104px; resize: vertical; line-height: 1.45 }
.field input::placeholder,
.field textarea::placeholder { color: #8a968f }
.field input:hover,
.field textarea:hover { border-color: var(--ink) }
.field input:focus,
.field textarea:focus {
    outline: 0;
    border-color: var(--ink);
    box-shadow: 0 0 0 4px #b2e9a8b3
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: #b3261e; box-shadow: 0 0 0 4px #b3261e22 }

.consent {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    font-size: .95rem;
    line-height: 1.4;
    color: #52615b;
    cursor: pointer
}
.consent input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: .1rem 0 0;
    accent-color: #167D32;
    cursor: pointer
}
.consent a { color: var(--ink) }
.consent a:hover { color: #718000 }

.form-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap }
.form-card .button { cursor: pointer; font-family: inherit }
.form-note { margin: 0; font-size: .9rem; color: #52615b }

/* Tablet y móvil */
@media (max-width: 900px) {
    .form-page { padding: 10vw 6vw 140px }
    .form-layout { grid-template-columns: 1fr; gap: 2.2rem }
    .form-intro { position: static }
}
@media (max-width: 650px) {
    .form-page { padding: 12vw 6vw 120px }
    .form-grid { grid-template-columns: 1fr }
    .form-card { box-shadow: 6px 6px 0 var(--ink); border-radius: 20px }
    .form-actions { flex-direction: column; align-items: stretch }
    .form-card .button { justify-content: center }
}

/* ===== Fondo de ondas en versión oscura (mismos detalles, colores para fondo oscuro) ===== */
.fondo-ondas-dark {
    position: relative;
    background-color: var(--ink);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%27150%27 viewBox=%270 0 14 150%27%3E%3Cline x1=%277%27 y1=%276%27 x2=%277%27 y2=%27150%27 stroke=%27%23B2E9A8%27 stroke-width=%271.6%27/%3E%3Ccircle cx=%277%27 cy=%276%27 r=%276%27 fill=%27%23B2E9A8%27/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%271100%27 height=%27100%27 viewBox=%270 0 1100 100%27%3E%3Cg fill=%27%23f3f2ea%27 fill-opacity=%27.2%27%3E%3Crect x=%273%27 y=%2739.2%27 width=%274%27 height=%2721.6%27 rx=%272%27/%3E%3Crect x=%2713%27 y=%2736.1%27 width=%274%27 height=%2727.8%27 rx=%272%27/%3E%3Crect x=%2723%27 y=%2728.3%27 width=%274%27 height=%2743.5%27 rx=%272%27/%3E%3Crect x=%2733%27 y=%2729.7%27 width=%274%27 height=%2740.7%27 rx=%272%27/%3E%3Crect x=%2743%27 y=%2721.2%27 width=%274%27 height=%2757.5%27 rx=%272%27/%3E%3Crect x=%2753%27 y=%2720.5%27 width=%274%27 height=%2759.0%27 rx=%272%27/%3E%3Crect x=%2763%27 y=%2722.9%27 width=%274%27 height=%2754.1%27 rx=%272%27/%3E%3Crect x=%2773%27 y=%2715.5%27 width=%274%27 height=%2769.1%27 rx=%272%27/%3E%3Crect x=%2783%27 y=%2722.4%27 width=%274%27 height=%2755.3%27 rx=%272%27/%3E%3Crect x=%2793%27 y=%2717.5%27 width=%274%27 height=%2765.0%27 rx=%272%27/%3E%3Crect x=%27103%27 y=%2724.3%27 width=%274%27 height=%2751.4%27 rx=%272%27/%3E%3Crect x=%27113%27 y=%2726.4%27 width=%274%27 height=%2747.2%27 rx=%272%27/%3E%3Crect x=%27123%27 y=%2725.9%27 width=%274%27 height=%2748.3%27 rx=%272%27/%3E%3Crect x=%27133%27 y=%2726.5%27 width=%274%27 height=%2747.0%27 rx=%272%27/%3E%3Crect x=%27143%27 y=%2736.0%27 width=%274%27 height=%2728.0%27 rx=%272%27/%3E%3Crect x=%27153%27 y=%2739.3%27 width=%274%27 height=%2721.5%27 rx=%272%27/%3E%3Crect x=%27163%27 y=%2742.0%27 width=%274%27 height=%2715.9%27 rx=%272%27/%3E%3Crect x=%27173%27 y=%2745.7%27 width=%274%27 height=%278.5%27 rx=%272%27/%3E%3Crect x=%27183%27 y=%2745.3%27 width=%274%27 height=%279.4%27 rx=%272%27/%3E%3Crect x=%27193%27 y=%2742.6%27 width=%274%27 height=%2714.9%27 rx=%272%27/%3E%3Crect x=%27203%27 y=%2737.9%27 width=%274%27 height=%2724.2%27 rx=%272%27/%3E%3Crect x=%27213%27 y=%2739.4%27 width=%274%27 height=%2721.1%27 rx=%272%27/%3E%3Crect x=%27223%27 y=%2734.0%27 width=%274%27 height=%2731.9%27 rx=%272%27/%3E%3Crect x=%27233%27 y=%2736.4%27 width=%274%27 height=%2727.2%27 rx=%272%27/%3E%3Crect x=%27243%27 y=%2737.4%27 width=%274%27 height=%2725.3%27 rx=%272%27/%3E%3Crect x=%27253%27 y=%2738.3%27 width=%274%27 height=%2723.4%27 rx=%272%27/%3E%3Crect x=%27263%27 y=%2738.8%27 width=%274%27 height=%2722.3%27 rx=%272%27/%3E%3Crect x=%27273%27 y=%2739.2%27 width=%274%27 height=%2721.6%27 rx=%272%27/%3E%3Crect x=%27283%27 y=%2743.4%27 width=%274%27 height=%2713.2%27 rx=%272%27/%3E%3Crect x=%27293%27 y=%2745.3%27 width=%274%27 height=%279.4%27 rx=%272%27/%3E%3Crect x=%27303%27 y=%2746.5%27 width=%274%27 height=%277.0%27 rx=%272%27/%3E%3Crect x=%27313%27 y=%2744.2%27 width=%274%27 height=%2711.6%27 rx=%272%27/%3E%3Crect x=%27323%27 y=%2741.2%27 width=%274%27 height=%2717.6%27 rx=%272%27/%3E%3Crect x=%27333%27 y=%2740.5%27 width=%274%27 height=%2719.1%27 rx=%272%27/%3E%3Crect x=%27343%27 y=%2738.8%27 width=%274%27 height=%2722.4%27 rx=%272%27/%3E%3Crect x=%27353%27 y=%2736.7%27 width=%274%27 height=%2726.5%27 rx=%272%27/%3E%3Crect x=%27363%27 y=%2733.2%27 width=%274%27 height=%2733.6%27 rx=%272%27/%3E%3Crect x=%27373%27 y=%2734.7%27 width=%274%27 height=%2730.6%27 rx=%272%27/%3E%3Crect x=%27383%27 y=%2736.2%27 width=%274%27 height=%2727.7%27 rx=%272%27/%3E%3Crect x=%27393%27 y=%2736.4%27 width=%274%27 height=%2727.2%27 rx=%272%27/%3E%3Crect x=%27403%27 y=%2739.3%27 width=%274%27 height=%2721.3%27 rx=%272%27/%3E%3Crect x=%27413%27 y=%2742.6%27 width=%274%27 height=%2714.9%27 rx=%272%27/%3E%3Crect x=%27423%27 y=%2745.0%27 width=%274%27 height=%2710.0%27 rx=%272%27/%3E%3Crect x=%27433%27 y=%2745.9%27 width=%274%27 height=%278.3%27 rx=%272%27/%3E%3Crect x=%27443%27 y=%2742.8%27 width=%274%27 height=%2714.4%27 rx=%272%27/%3E%3Crect x=%27453%27 y=%2737.6%27 width=%274%27 height=%2724.7%27 rx=%272%27/%3E%3Crect x=%27463%27 y=%2733.3%27 width=%274%27 height=%2733.4%27 rx=%272%27/%3E%3Crect x=%27473%27 y=%2725.8%27 width=%274%27 height=%2748.4%27 rx=%272%27/%3E%3Crect x=%27483%27 y=%2722.5%27 width=%274%27 height=%2755.1%27 rx=%272%27/%3E%3Crect x=%27493%27 y=%2723.8%27 width=%274%27 height=%2752.4%27 rx=%272%27/%3E%3Crect x=%27503%27 y=%2712.0%27 width=%274%27 height=%2776.1%27 rx=%272%27/%3E%3Crect x=%27513%27 y=%2721.9%27 width=%274%27 height=%2756.1%27 rx=%272%27/%3E%3Crect x=%27523%27 y=%2716.7%27 width=%274%27 height=%2766.6%27 rx=%272%27/%3E%3Crect x=%27533%27 y=%2711.8%27 width=%274%27 height=%2776.3%27 rx=%272%27/%3E%3Crect x=%27543%27 y=%2721.7%27 width=%274%27 height=%2756.6%27 rx=%272%27/%3E%3Crect x=%27553%27 y=%2719.0%27 width=%274%27 height=%2761.9%27 rx=%272%27/%3E%3Crect x=%27563%27 y=%2727.3%27 width=%274%27 height=%2745.4%27 rx=%272%27/%3E%3Crect x=%27573%27 y=%2723.9%27 width=%274%27 height=%2752.2%27 rx=%272%27/%3E%3Crect x=%27583%27 y=%2727.6%27 width=%274%27 height=%2744.8%27 rx=%272%27/%3E%3Crect x=%27593%27 y=%2733.8%27 width=%274%27 height=%2732.5%27 rx=%272%27/%3E%3Crect x=%27603%27 y=%2737.2%27 width=%274%27 height=%2725.7%27 rx=%272%27/%3E%3Crect x=%27613%27 y=%2743.2%27 width=%274%27 height=%2713.7%27 rx=%272%27/%3E%3Crect x=%27623%27 y=%2746.2%27 width=%274%27 height=%277.5%27 rx=%272%27/%3E%3Crect x=%27633%27 y=%2744.9%27 width=%274%27 height=%2710.2%27 rx=%272%27/%3E%3Crect x=%27643%27 y=%2741.8%27 width=%274%27 height=%2716.4%27 rx=%272%27/%3E%3Crect x=%27653%27 y=%2739.4%27 width=%274%27 height=%2721.1%27 rx=%272%27/%3E%3Crect x=%27663%27 y=%2735.6%27 width=%274%27 height=%2728.8%27 rx=%272%27/%3E%3Crect x=%27673%27 y=%2733.5%27 width=%274%27 height=%2733.1%27 rx=%272%27/%3E%3Crect x=%27683%27 y=%2735.4%27 width=%274%27 height=%2729.3%27 rx=%272%27/%3E%3Crect x=%27693%27 y=%2734.6%27 width=%274%27 height=%2730.8%27 rx=%272%27/%3E%3Crect x=%27703%27 y=%2738.7%27 width=%274%27 height=%2722.6%27 rx=%272%27/%3E%3Crect x=%27713%27 y=%2737.4%27 width=%274%27 height=%2725.1%27 rx=%272%27/%3E%3Crect x=%27723%27 y=%2740.1%27 width=%274%27 height=%2719.9%27 rx=%272%27/%3E%3Crect x=%27733%27 y=%2742.2%27 width=%274%27 height=%2715.7%27 rx=%272%27/%3E%3Crect x=%27743%27 y=%2745.4%27 width=%274%27 height=%279.1%27 rx=%272%27/%3E%3Crect x=%27753%27 y=%2746.3%27 width=%274%27 height=%277.3%27 rx=%272%27/%3E%3Crect x=%27763%27 y=%2743.9%27 width=%274%27 height=%2712.3%27 rx=%272%27/%3E%3Crect x=%27773%27 y=%2740.5%27 width=%274%27 height=%2718.9%27 rx=%272%27/%3E%3Crect x=%27783%27 y=%2740.4%27 width=%274%27 height=%2719.2%27 rx=%272%27/%3E%3Crect x=%27793%27 y=%2736.6%27 width=%274%27 height=%2726.8%27 rx=%272%27/%3E%3Crect x=%27803%27 y=%2736.8%27 width=%274%27 height=%2726.3%27 rx=%272%27/%3E%3Crect x=%27813%27 y=%2736.5%27 width=%274%27 height=%2726.9%27 rx=%272%27/%3E%3Crect x=%27823%27 y=%2737.0%27 width=%274%27 height=%2726.1%27 rx=%272%27/%3E%3Crect x=%27833%27 y=%2733.8%27 width=%274%27 height=%2732.4%27 rx=%272%27/%3E%3Crect x=%27843%27 y=%2738.8%27 width=%274%27 height=%2722.5%27 rx=%272%27/%3E%3Crect x=%27853%27 y=%2740.4%27 width=%274%27 height=%2719.2%27 rx=%272%27/%3E%3Crect x=%27863%27 y=%2742.7%27 width=%274%27 height=%2714.6%27 rx=%272%27/%3E%3Crect x=%27873%27 y=%2745.4%27 width=%274%27 height=%279.2%27 rx=%272%27/%3E%3Crect x=%27883%27 y=%2745.8%27 width=%274%27 height=%278.3%27 rx=%272%27/%3E%3Crect x=%27893%27 y=%2741.9%27 width=%274%27 height=%2716.2%27 rx=%272%27/%3E%3Crect x=%27903%27 y=%2737.2%27 width=%274%27 height=%2725.6%27 rx=%272%27/%3E%3Crect x=%27913%27 y=%2730.4%27 width=%274%27 height=%2739.3%27 rx=%272%27/%3E%3Crect x=%27923%27 y=%2725.7%27 width=%274%27 height=%2748.6%27 rx=%272%27/%3E%3Crect x=%27933%27 y=%2720.5%27 width=%274%27 height=%2759.0%27 rx=%272%27/%3E%3Crect x=%27943%27 y=%2723.6%27 width=%274%27 height=%2752.8%27 rx=%272%27/%3E%3Crect x=%27953%27 y=%2719.3%27 width=%274%27 height=%2761.5%27 rx=%272%27/%3E%3Crect x=%27963%27 y=%2718.3%27 width=%274%27 height=%2763.3%27 rx=%272%27/%3E%3Crect x=%27973%27 y=%279.8%27 width=%274%27 height=%2780.4%27 rx=%272%27/%3E%3Crect x=%27983%27 y=%279.0%27 width=%274%27 height=%2782.1%27 rx=%272%27/%3E%3Crect x=%27993%27 y=%2721.9%27 width=%274%27 height=%2756.2%27 rx=%272%27/%3E%3Crect x=%271003%27 y=%2723.4%27 width=%274%27 height=%2753.1%27 rx=%272%27/%3E%3Crect x=%271013%27 y=%2725.4%27 width=%274%27 height=%2749.2%27 rx=%272%27/%3E%3Crect x=%271023%27 y=%2728.7%27 width=%274%27 height=%2742.7%27 rx=%272%27/%3E%3Crect x=%271033%27 y=%2730.4%27 width=%274%27 height=%2739.2%27 rx=%272%27/%3E%3Crect x=%271043%27 y=%2734.2%27 width=%274%27 height=%2731.6%27 rx=%272%27/%3E%3Crect x=%271053%27 y=%2740.0%27 width=%274%27 height=%2719.9%27 rx=%272%27/%3E%3Crect x=%271063%27 y=%2744.1%27 width=%274%27 height=%2711.7%27 rx=%272%27/%3E%3Crect x=%271073%27 y=%2746.7%27 width=%274%27 height=%276.7%27 rx=%272%27/%3E%3Crect x=%271083%27 y=%2744.8%27 width=%274%27 height=%2710.4%27 rx=%272%27/%3E%3Crect x=%271093%27 y=%2741.5%27 width=%274%27 height=%2717.1%27 rx=%272%27/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27380%27 height=%27320%27 viewBox=%270 0 380 320%27%3E%3Cg fill=%27none%27 stroke=%27%23B2E9A8%27 stroke-opacity=%27.35%27 stroke-width=%271.6%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M380 18 C318 34 262 96 272 160 C281 214 344 228 356 184 C366 150 330 130 306 152 C292 166 302 188 320 184%27/%3E%3Cpath d=%27M380 96 C340 108 318 146 330 196 C338 232 372 246 380 240%27/%3E%3Cpath d=%27M300 0 C296 40 270 62 236 70 C204 78 190 108 210 126 C226 140 248 128 244 110%27/%3E%3Cpath d=%27M250 20 C240 44 222 54 204 52%27/%3E%3C/g%3E%3Cg fill=%27%23B2E9A8%27 fill-opacity=%27.5%27%3E%3Cellipse cx=%27214%27 cy=%2756%27 rx=%2712%27 ry=%275%27 transform=%27rotate%28-28 214 56%29%27/%3E%3Cellipse cx=%27338%27 cy=%27128%27 rx=%2711%27 ry=%274.5%27 transform=%27rotate%2824 338 128%29%27/%3E%3Cellipse cx=%27268%27 cy=%2796%27 rx=%2710%27 ry=%274%27 transform=%27rotate%28-48 268 96%29%27/%3E%3C/g%3E%3Cg fill=%27%23B2E9A8%27 fill-opacity=%27.35%27%3E%3Ccircle cx=%27238%27 cy=%27154%27 r=%273%27/%3E%3Ccircle cx=%27352%27 cy=%2762%27 r=%272.4%27/%3E%3Ccircle cx=%27196%27 cy=%2792%27 r=%272%27/%3E%3Ccircle cx=%27290%27 cy=%27212%27 r=%272.6%27/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(ellipse 55% 45% at 78% 16%, rgba(178, 233, 168, .07), transparent 72%),
        radial-gradient(ellipse 50% 55% at 14% 88%, rgba(243, 242, 234, .05), transparent 72%);
    background-repeat: no-repeat, repeat-x, no-repeat, no-repeat, no-repeat;
    background-position: 68% calc(100% - 12px), 0 calc(100% - 20px), right 1% top 0, 0 0, 0 0;
    background-size: 14px 150px, auto 100px, 380px 320px, auto, auto;
    padding-bottom: calc(8vw + 110px)
}
@media (max-width: 1100px) {
    .fondo-ondas-dark { background-size: 14px 120px, auto 80px, 260px 220px, auto, auto }
}
@media (max-width: 900px) {
    .fondo-ondas-dark { padding-bottom: 140px }
}
/* Título de sección a ancho completo (cierre del index) */
.titulo-completo { max-width: none; width: 100% }


/* ===== Menú: página actual ===== */
.nav a[aria-current="page"] { color: #167D32; font-weight: 600 }


/* ===== Página de contacto ===== */
.contacto-directo {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
    max-width: 440px
}
.contacto-directo small { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #718000; margin-bottom: .3rem }
.contacto-directo a { color: var(--ink); font-weight: 600; font-size: 1.1rem; text-decoration: none }
.contacto-directo a:hover { color: #718000 }

/* Selector de país con el mismo aspecto que los inputs */
.field select {
    width: 100%;
    font: inherit;
    font-size: 1.05rem;
    color: var(--ink);
    padding: .85rem 2.6rem .85rem 1rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23142521' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 1rem center;
    border: 1px solid rgba(20, 37, 33, .4);
    border-radius: 14px;
    appearance: none;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s
}
.field select:hover { border-color: var(--ink) }
.field select:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 4px #b2e9a8b3 }

/* Motivo de contacto en forma de chips */
.chips { display: flex; flex-wrap: wrap; gap: .6rem }
.chips label { position: relative; cursor: pointer }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px }
.chips span {
    display: inline-block;
    padding: .6rem 1.05rem;
    border: 1px solid rgba(20, 37, 33, .4);
    border-radius: 999px;
    background: #fff;
    font-size: .98rem;
    font-weight: 500;
    transition: background .2s, border-color .2s, box-shadow .2s
}
.chips label:hover span { border-color: var(--ink) }
.chips input:checked + span { background: var(--lime); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink) }
.chips input:focus-visible + span { outline: 2px solid #167D32; outline-offset: 3px }

/* Sedes */
.sedes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    margin-top: 3rem
}
.sedes-grid article {
    background: #fbfaf5;
    border: 1px solid var(--ink);
    border-radius: 25px;
    padding: clamp(1.4rem, 2.6vw, 2.2rem);
    box-shadow: 6px 6px 0 var(--ink)
}
.sedes-grid small { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #718000 }
.sedes-grid h3 { margin: .6rem 0 .9rem; font: 500 clamp(1.8rem, 2.8vw, 2.6rem)/1 var(--display); letter-spacing: -.05em }
.sedes-grid p { margin: 0; color: #52615b; font-size: 1.05rem; line-height: 1.45 }

/* Redes */
.redes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    margin-top: 2.6rem;
    border: 1px solid rgba(243, 242, 234, .2);
    background: rgba(243, 242, 234, .2)
}
.redes-grid a {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.6rem 1.4rem;
    background: var(--ink);
    color: var(--cream);
    text-decoration: none;
    transition: background .2s, color .2s
}
.redes-grid small { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lime) }
.redes-grid span { font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere }
.redes-grid b { position: absolute; top: 1.2rem; right: 1.2rem; font-weight: 400 }
.redes-grid a:hover { background: var(--lime); color: var(--ink) }
.redes-grid a:hover small { color: var(--ink) }

@media (max-width: 900px) {
    .sedes-grid { grid-template-columns: 1fr }
}

/* ===== Rejilla de 6 bloques (Producción audiovisual): 3 + 3 en escritorio ===== */
@media (min-width: 901px) {
    .problem-grid:has(> article:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr) }
    .problem-grid:has(> article:nth-child(6):last-child) article { padding-bottom: 1.6rem }
    .problem-grid:has(> article:nth-child(6):last-child) article:nth-child(3n+1) { padding-left: 0 }
    .problem-grid:has(> article:nth-child(6):last-child) article:nth-child(n+4) { border-top: 1px solid var(--line) }
}
.problem-grid .text-link { display: inline-block; margin-top: .9rem; color: var(--ink); font-weight: 600; text-decoration: none }
.problem-grid .text-link:hover { color: #718000 }

/* Footer: enlaces que cuelgan de Producción audiovisual */
.footer-links a.footer-sub { padding-left: .9rem; opacity: .8 }
.footer-links a.footer-sub::before { content: "– "; }

/* Enlaces dentro de las tarjetas de sedes */
.sedes-grid p a { color: var(--ink); font-weight: 600; text-decoration: none }
.sedes-grid p a:hover { color: #718000 }
/* Redes en contacto: 3 columnas en escritorio para que los nombres no se partan */
.redes-grid { grid-template-columns: repeat(3, 1fr) }
@media (max-width: 900px) { .redes-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 650px) { .redes-grid { grid-template-columns: 1fr } }