.hero {
    background: var(--sky);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 38rem;
    overflow: hidden;
    padding: clamp(4rem, 9vw, 8rem) max(2rem, calc((100% - var(--content)) / 2));
    position: relative;
}

.hero-content {
    align-self: center;
    justify-self: center;
    max-width: 42rem;
    position: relative;
    z-index: 1;
}

.eyebrow {
    color: var(--blue);
    font-family: "Manrope", sans-serif;
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .16em;
    margin: 0 0 1.2rem;
}

.hero h1 {
    font-family: "Manrope", sans-serif;
    font-size: clamp(3.2rem, 6.5vw, 6.15rem);
    letter-spacing: -.075em;
    line-height: .96;
    margin: 0;
    max-width: 10ch;
}

h1 em,
h2 em {
    color: var(--blue);
    font-family: "Praise", cursive;
    font-size: 1.15em;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
}

.hero-copy {
    color: var(--muted);
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
    margin: 2rem 0;
    max-width: 34rem;
}

.hero-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.button {
    align-items: center;
    border-radius: 999rem;
    display: inline-flex;
    font-family: "Manrope", sans-serif;
    font-size: .8125rem;
    font-weight: 700;
    gap: .8rem;
    justify-content: center;
    padding: 1rem 1.35rem;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.button:hover,
.button:focus-visible {
    transform: translateY(-.15rem);
}

.button-primary {
    background: var(--blue);
    border: .08rem solid var(--blue-dark);
    color: var(--white);
}

.button-primary:hover,
.button-primary:focus-visible {
    background: var(--blue-dark);
}

/* Modo oscuro: el azul principal es claro, el texto va oscuro para leerse bien */
:root[data-theme="dark"] .button-primary {
    color: #0b1f4b;
}

:root[data-theme="dark"] .button-primary:hover,
:root[data-theme="dark"] .button-primary:focus-visible {
    color: var(--white);
}

.button-ghost {
    background: var(--line);
    border: .08rem solid var(--text);
    color: var(--text);
}

.button-ghost:hover,
.button-ghost:focus-visible {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

.time-zone {
    color: var(--availability-muted);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .15em;
}

.hero-decoration {
    bottom: -7rem;
    display: flex;
    gap: 1rem;
    position: absolute;
    right: 7%;
    transform: rotate(-25deg);
}

.hero-decoration span {
    border: .1rem solid var(--decoration);
    border-radius: 50%;
    height: 19rem;
    opacity: .5;
    width: 19rem;
}


/* La frase superior forma parte del h1 (SEO) pero se ve como antes */
.hero h1 .hero-eyebrow {
    display: block;
    line-height: 1.5;
    max-width: none;
}

/* La línea que dice qué hago (landing pages · webs a medida · tiendas online) se lee de un vistazo */
.hero h1 .hero-eyebrow {
    font-size: .8125rem;
    letter-spacing: .14em;
    margin-bottom: 1rem;
}

/* Computadora: el menú y la portada ocupan justo una pantalla al abrir la página.
   Los tamaños y los espacios dependen del ancho y del alto de la pantalla, así
   el texto se ve grande en monitores y entra completo en notebooks, sin saltos. */
@media (min-width: 52.01rem) {
    .hero {
        min-height: calc(100vh - 5.4rem);
        min-height: calc(100svh - 5.4rem);
        padding-bottom: clamp(.6rem, calc(10vh - 3.3rem), 5rem);
        padding-top: clamp(.6rem, calc(10vh - 3.3rem), 5rem);
    }

    .hero h1 {
        font-size: clamp(2.4rem, min(5.2vw, 10vh), 5.4rem);
    }

    .hero h1 .hero-eyebrow {
        margin-bottom: clamp(.6rem, 1.6vh, 1rem);
        white-space: nowrap;
    }

    /* La palabra en cursiva es más alta que el resto: así no separa de más los renglones del título */
    .hero h1 em {
        line-height: .8;
    }

    .hero-copy {
        font-size: clamp(1.05rem, 3.1vh, 1.25rem);
        margin: clamp(1.15rem, calc(6vh - 1.3rem), 2rem) 0 clamp(1rem, calc(6vh - 1.3rem), 2rem);
        max-width: 42rem;
    }

    .hero .button {
        padding-bottom: clamp(.85rem, 2.2vh, 1rem);
        padding-top: clamp(.85rem, 2.2vh, 1rem);
    }
}

/* Computadora: cuatro círculos alrededor del texto (derecha, arriba a la derecha, izquierda y abajo).
   Se ubican tomando como referencia el bloque de texto, que mide 42rem y va centrado, así no cruzan lo escrito. */
@media (min-width: 52.01rem) {
    .hero-decoration {
        display: block;
        inset: 0;
        transform: none;
    }

    /* Más tenues: son fondo, el texto es la figura */
    .hero-decoration span {
        opacity: .32;
        position: absolute;
    }

    /* Los cuatro quedan cortados por un borde de la portada, así se leen como marco y no compiten con el texto */

    /* A la derecha: sale por el borde derecho, sin acercarse al párrafo */
    .hero-decoration span:nth-child(1) {
        bottom: -1.5rem;
        left: max(calc(100% - 13rem), calc(50% + 22.5rem));
    }

    /* Arriba a la derecha del título: asoma desde el borde superior */
    .hero-decoration span:nth-child(2) {
        height: 16rem;
        left: calc(50% + 9rem);
        top: -5rem;
        width: 16rem;
    }

    /* A la izquierda: sale por el borde izquierdo, a media altura */
    .hero-decoration span:nth-child(3) {
        height: 17rem;
        left: min(-6rem, calc(50% - 39.5rem));
        top: calc(50% - 8.5rem);
        width: 17rem;
    }

    /* Abajo: nace a la altura de los botones y pasa por detrás de ellos, sin tocar el párrafo */
    .hero-actions {
        position: relative;
    }

    /* En monitores altos el círculo crece con la pantalla, así siempre queda cortado por el borde de abajo */
    .hero-actions::before {
        --size: max(19rem, 45vh);
        border: .1rem solid var(--decoration);
        border-radius: 50%;
        content: "";
        height: var(--size);
        left: calc(14.5rem - var(--size) / 2);
        opacity: .32;
        pointer-events: none;
        position: absolute;
        top: -.4rem;
        width: var(--size);
        z-index: -1;
    }

    /* Modo claro: sobre fondo claro los círculos necesitan un poco más de presencia para verse */
    :root:not([data-theme="dark"]) .hero-decoration span,
    :root:not([data-theme="dark"]) .hero-actions::before {
        opacity: .4;
    }
}

/* Tablets: la línea superior de la portada entra en un solo renglón */
@media (min-width: 35.01rem) and (max-width: 52rem) {
    .hero h1 .hero-eyebrow {
        white-space: nowrap;
    }
}

/* Desde 1024 px la barra del menú es un poco más alta (por el botón "Hablemos"): la portada lo descuenta */
@media (min-width: 64rem) {
    .hero {
        min-height: calc(100vh - 5.75rem);
        min-height: calc(100svh - 5.75rem);
    }
}