@media (max-width: 63.99rem) {
    .site-header {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .menu-toggle {
        display: block;
        position: relative;
        z-index: 3;
    }

    .main-nav {
        align-items: stretch;
        background: var(--surface);
        box-shadow: 0 1rem 2rem rgba(11, 31, 75, .12);
        flex-direction: column;
        gap: 0;
        opacity: 0;
        padding: 4.5rem 1.5rem 1.5rem;
        pointer-events: none;
        position: absolute;
        right: 1rem;
        top: .75rem;
        transform: translateY(-.5rem);
        transition: opacity .2s ease, transform .2s ease;
        width: min(18rem, calc(100% - 2rem));
        z-index: 2;
    }

    .main-nav.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Panel del menú: un poco más ancho y con desplazamiento si la pantalla es baja */
    .main-nav {
        max-height: calc(100vh - 1.5rem);
        overflow-y: auto;
        width: min(21rem, calc(100% - 2rem));
    }

    /* En celular y tablet, las opciones van siempre dentro del panel
       (se anula el corrimiento que centra el desplegable en escritorio) */
    .nav-dropdown,
    .nav-subgroup {
        width: 100%;
    }

    .nav-dropdown > .nav-submenu,
    .nav-dropdown:hover > .nav-submenu,
    .nav-dropdown:focus-within > .nav-submenu,
    .nav-dropdown.is-open > .nav-submenu,
    .nav-subgroup > .nav-submenu-nested,
    .nav-subgroup:hover > .nav-submenu-nested,
    .nav-subgroup:focus-within > .nav-submenu-nested,
    .nav-subgroup.is-open > .nav-submenu-nested {
        left: auto;
        min-width: 0;
        right: auto;
        top: auto;
        transform: none;
        width: 100%;
    }

    .main-nav a {
        border-bottom: .08rem solid var(--rule);
        padding: .9rem 0;
    }

    .theme-toggle-label {
        display: none;
    }

    .main-nav .nav-cta {
        border-bottom: 0;
        padding-bottom: 0;
    }

    /* Celular y tablet vertical: el ícono ☰ ya abre el menú, así que se oculta el botón "Menú"
       y las opciones se muestran directamente */
    .nav-dropdown-toggle {
        display: none;
    }

    .nav-submenu-label {
        border-bottom: .08rem solid var(--rule);
        font-size: .8125rem;
        padding: .9rem 0 .6rem;
    }

    /* "Planes" se despliega al tocarlo (o al pasar el mouse) y muestra sus opciones con sangría */
    .nav-subgroup-toggle {
        align-items: center;
        border-bottom: .08rem solid var(--rule);
        border-radius: 0;
        color: var(--chrome-text);
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        padding: .9rem 0;
        pointer-events: inherit;
        width: 100%;
    }

    .nav-subgroup-toggle::after {
        content: "▾";
        font-size: 1.1rem;
        line-height: 1;
        padding: 0 .25rem;
        transition: transform .2s ease;
    }

    .nav-subgroup.is-open .nav-subgroup-toggle::after {
        transform: rotate(180deg);
    }

    .nav-subgroup-arrow,
    .nav-icon {
        display: none;
    }

    .nav-submenu.nav-submenu-nested {
        display: none;
        padding-left: 1rem;
    }

    .nav-subgroup.is-open > .nav-submenu.nav-submenu-nested {
        display: flex;
    }

    .nav-dropdown-arrow {
        display: none;
    }

    .nav-submenu {
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        min-width: 0;
        opacity: 1;
        padding: 0;
        pointer-events: inherit;
        position: static;
        transform: none;
        visibility: inherit;
    }

    .nav-submenu::before {
        display: none;
    }

    .nav-submenu a {
        border-radius: 0;
        color: var(--chrome-text);
        display: flex;
        padding: .75rem 0;
    }
}

@media (max-width: 52rem) {
    .hero {
        min-height: auto;
        padding-bottom: 4rem;
        padding-top: clamp(2rem, 7vw, 3.5rem);
    }

    /* Los círculos quedan asomando abajo, sin cruzarse con el texto ni los botones */
    .hero-decoration {
        bottom: -16.5rem;
        right: -8rem;
    }

    .about,
    .availability-inner,
    .availability-inner:lang(en),
    .contact {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
    }

    /* Pasos del recuadro de ayuda, uno debajo del otro */
    .plans-help-steps {
        grid-template-columns: 1fr;
    }

    .plans-help {
        padding: 1.5rem;
    }

    .plans-help-head {
        align-items: flex-start;
    }

    .about-details {
        align-items: start;
        flex-direction: column;
    }

    .section-heading {
        align-items: start;
        flex-direction: column;
        gap: 1.5rem;
    }

    .section-heading h1.portfolio-page-title {
        font-size: 2rem;
    }

    .portfolio-card-meta {
        padding: 1.1rem;
    }

    .plan-grid {
        grid-template-columns: 1fr;
    }

    .whatsapp-float {
        align-items: center;
        background: #25d366;
        border: .15rem solid var(--white);
        border-radius: 50%;
        bottom: 1rem;
        box-shadow: 0 .35rem 1rem rgba(11, 31, 75, .2);
        color: var(--white);
        display: inline-flex;
        height: 3.4rem;
        justify-content: center;
        padding: 0;
        right: 1rem;
        transition: opacity .2s ease, transform .2s ease;
        width: 3.4rem;
    }

    .whatsapp-icon {
        height: 1.75rem;
        width: 1.75rem;
    }


    .top-float {
        display: none;
    }

    .availability-info {
        border-left: 0;
        border-top: .08rem solid var(--availability-line);
        padding-left: 0;
        padding-top: 1.8rem;
    }
}

/* Tablets y notebooks chicas: entre celular y escritorio amplio */
@media (min-width: 35.01rem) and (max-width: 72rem) {
    .plan-card {
        padding: 2rem 1.75rem;
        row-gap: 1.5rem;
    }

    .plan-card-head h3 {
        font-size: 1.45rem;
    }

    .plan-price {
        font-size: 1.75rem;
    }

    /* Botones de los planes a todo el ancho para que el texto no se corte */
    .plan-card .button {
        justify-self: stretch;
        text-align: center;
        width: 100%;
    }

    .site-footer {
        flex-wrap: wrap;
        gap: .75rem 2rem;
    }

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

/* Tablet horizontal: encabezado más compacto */
@media (min-width: 52.01rem) and (max-width: 63.99rem) {
    .main-nav a,
    .brand {
        white-space: nowrap;
    }

    .nav-group {
        gap: .75rem;
    }

    .lang-switch {
        gap: .15rem;
    }

    .theme-toggle-label {
        display: none;
    }
}

/* Tablet horizontal y notebooks chicas: los tres planes en columnas, más compactos */
@media (min-width: 60.01rem) and (max-width: 72rem) {
    .plan-grid {
        gap: 1.25rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .plan-card .button {
        font-size: .8125rem;
        gap: .5rem;
        padding: 1rem .9rem;
    }
}

/* Tablet vertical: planes en dos columnas, el último ocupa todo el ancho */
@media (min-width: 35.01rem) and (max-width: 60rem) {
    .plan-grid {
        gap: 1.5rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plan-grid > .plan-card:last-child {
        grid-column: 1 / -1;
    }

    .contact-form-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 35rem) {
    /* Encabezado en una sola línea con las tres banderas */
    .brand {
        font-size: .8125rem;
        gap: .5rem;
        white-space: nowrap;
    }

    .nav-group,
    .header-actions {
        gap: .4rem;
    }

    .lang-switch {
        gap: .1rem;
    }

    .lang-flag {
        height: 1.7rem;
        width: 1.7rem;
    }

    .theme-toggle {
        padding: .3rem;
    }

    .hero {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .section-shell,
    .plans {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Celulares: el título entra en tres renglones parejos, sin palabras sueltas */
    .hero h1 {
        font-size: clamp(2.4rem, 12.8vw, 4.8rem);
        max-width: none;
    }

    .hero-copy {
        margin: 1.25rem 0 1.5rem;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .site-footer {
        align-items: start;
        flex-direction: column;
        gap: .65rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}
/* Celulares muy chicos (320 px): solo el logo "JNB" para que entren las tres banderas */
@media (max-width: 22rem) {
    .brand span:not(.brand-mark) {
        display: none;
    }
}


/* Menú del celular o tablet en pantallas con mouse: "Planes" se abre también al pasar el mouse */
@media (max-width: 63.99rem) and (hover: hover) {
    .nav-subgroup:hover > .nav-submenu.nav-submenu-nested {
        display: flex;
    }
}

/* Escritorio: tipografías parejas entre las páginas secundarias */
@media (min-width: 52.01rem) {
    /* Títulos de preguntas y de tarjetas: la misma familia que el resto de los títulos */
    .legal-accordion .legal-block h3,
    .compare-choose-card h3 {
        font-family: "Manrope", sans-serif;
    }

    /* Títulos chicos (pasos y tarjetas): un mismo tamaño */
    .process-step h2,
    .portfolio-card-meta h2,
    .domain-card h3 {
        font-size: 1.25rem;
    }

    /* Aclaraciones al pie: un mismo tamaño */
    .compare-note,
    .budget-help,
    .budget-send-hint,
    .legal-block .domain-hint,
    .domain-guide .domain-note,
    .plan-detail-footnote,
    .process-cta-more {
        font-size: .9375rem;
    }
}

/* Enlaces dentro de un texto: del tamaño del texto que los rodea, en todas las pantallas */
p .text-link,
li:not(.why-item) .text-link {
    font-size: .94em;
    /* Redondeado a px enteros: en textos de 16, 15 y 14 px el enlace queda en 15, 14 y 13 px, dentro de la escala */
    font-size: round(.94em, 1px);
}

/* Celulares: si el enlace es largo, puede pasar al renglón siguiente en vez de salirse de la pantalla */
@media (max-width: 35rem) {
    p .text-link,
    li:not(.why-item) .text-link {
        white-space: normal;
    }
}

/* Celulares: tarjetas de planes más compactas, para que la sección no sea tan larga */
@media (max-width: 35rem) {
    .plan-card {
        padding: 1.5rem 1.25rem;
        row-gap: 1.15rem;
    }

    .plan-badge {
        left: 1.25rem;
    }

    /* Un poco más de separación entre tarjetas, para que entre la etiqueta del plan destacado */
    .plan-grid {
        gap: 1.5rem;
    }

    .plan-features {
        gap: .6rem;
    }

    .plan-features li {
        padding-top: .6rem;
    }

    .plans-more {
        margin: 1.5rem 0 0;
    }
}

/* ============================================================
   Menú hamburguesa: panel debajo de la barra (no tapa el logo, las banderas ni el botón de tema),
   fondo oscurecido que cierra el menú, ícono que pasa a ✕ y "Hablemos" como botón.
   ============================================================ */
@media (max-width: 63.99rem) {
    .main-nav {
        border-radius: 0 0 1rem 1rem;
        border-top: .08rem solid var(--chrome-border);
        left: 0;
        max-height: calc(100vh - 5.5rem);
        max-height: calc(100svh - 5.5rem);
        padding: .5rem 1.25rem 1.5rem;
        right: 0;
        top: 100%;
        width: auto;
    }

    .main-nav .nav-cta {
        background: var(--blue);
        border-radius: 999rem;
        color: var(--white) !important;
        margin-top: 1.25rem;
        padding: .9rem 1rem;
        text-align: center;
    }

    :root[data-theme="dark"] .main-nav .nav-cta {
        color: #0b1f4b !important;
    }

    /* Áreas táctiles de 44 px */
    .menu-toggle {
        padding: .82rem .7rem;
    }

    .menu-toggle span {
        transition: transform .2s ease;
    }

    .menu-toggle[aria-expanded="true"] span:first-child {
        transform: translateY(.21rem) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] span:last-child {
        transform: translateY(-.21rem) rotate(-45deg);
    }

    .theme-toggle {
        justify-content: center;
        min-height: 2.75rem;
        min-width: 2.75rem;
        padding: 0;
    }

    .lang-flag {
        height: 2.75rem;
        width: 2rem;
    }

    .header-actions {
        gap: .25rem;
    }

    .lang-switch {
        gap: 0;
    }
}

/* Celulares: las banderas conservan los 44 px de alto pero van más angostas, para que entre todo el encabezado */
@media (max-width: 35rem) {
    .lang-flag {
        height: 2.75rem;
        width: 1.75rem;
    }
}

@media (max-width: 24rem) {
    .lang-flag {
        width: 1.5rem;
    }

    .lang-flag svg {
        width: 1.1rem;
    }
}

/* Celulares: un enlace del pie por renglón, con más alto para tocarlos; entre grupos, más espacio para que se lean como dos bloques */
@media (max-width: 35rem) {
    .footer-links,
    .footer-group {
        align-items: flex-start;
        flex-direction: column;
        gap: 0;
    }

    .footer-links {
        gap: 1.625rem;
    }

    .footer-links a {
        padding: .5rem 0;
    }
}

/* Celulares grandes (desde unos 420 px): los dos grupos del pie en dos columnas; "Volver arriba" debajo */
@media (min-width: 28rem) and (max-width: 35rem) {
    .footer-links {
        column-gap: 1.5rem;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, max-content));
    }

    .footer-top {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* Computadora: tarjetas de planes más compactas, para ver el nombre, el precio y el botón sin bajar */
@media (min-width: 72.01rem) {
    .plan-card {
        padding: 2rem;
        row-gap: 1.25rem;
    }

    .plan-badge {
        left: 2rem;
    }
}

/* Enlaces dentro de un texto: más alto de toque en celular (el relleno vertical de un enlace en línea no mueve el texto) */
@media (max-width: 35rem) {
    p .text-link,
    li .text-link {
        padding: .55rem 0;
    }
}

/* Celular y tablet: el pie termina más arriba para que el botón de WhatsApp no tape "Volver arriba" */
@media (max-width: 52rem) {
    .site-footer {
        padding-bottom: 4.75rem;
    }
}

/* Celular: más alto de toque en los enlaces de la tabla comparativa y de "¿Cuál te conviene?" (el texto no se mueve) */
@media (max-width: 35rem) {
    .compare-table thead th a,
    .compare-choose-card .text-link {
        display: inline-block;
        margin: -.55rem 0;
        padding: .55rem 0;
    }
}