.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: var(--text-sm);
    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: -.025em;
    line-height: .96;
    margin: 0;
    max-width: 11ch;
}

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: var(--text-sm);
    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: #100b1d;
}

: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);
}

/* Modo oscuro: sobre el violeta claro, el texto del hover va oscuro para leerse bien */
:root[data-theme="dark"] .button-ghost:hover,
:root[data-theme="dark"] .button-ghost:focus-visible {
    color: #100b1d;
}

.time-zone {
    color: var(--availability-muted);
    font-size: var(--text-sm);
    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 .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 .hero-eyebrow {
    font-size: var(--text-sm);
    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 .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 .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);
    }
}

/* Portada: etiqueta "Tomando proyectos nuevos / Agenda completa / No tomo proyectos" (el estado se cambia en intake.js).
   El lugar queda reservado desde el principio, así el título no se mueve cuando aparece. */
.intake-status {
    align-items: center;
    background: var(--surface);
    border: .08rem solid var(--line);
    border-radius: 999rem;
    color: var(--text);
    column-gap: .55rem;
    display: inline-flex;
    flex-wrap: wrap;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 1.25rem;
    min-height: 2.1rem;
    padding: .35rem .95rem;
    row-gap: .1rem;
    visibility: hidden;
}

.intake-status.is-ready {
    visibility: visible;
}

.intake-dot {
    background: #2fae5a;
    border-radius: 50%;
    box-shadow: 0 0 0 .25rem rgba(47, 174, 90, .18);
    flex-shrink: 0;
    height: .55rem;
    width: .55rem;
}

.intake-status[data-state="agenda"] .intake-dot {
    background: #d9a441;
    box-shadow: 0 0 0 .25rem rgba(217, 164, 65, .2);
}

.intake-status[data-state="cerrado"] .intake-dot {
    background: #e05252;
    box-shadow: 0 0 0 .25rem rgba(224, 82, 82, .18);
}

.intake-link {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: .15em;
}

.intake-link:hover,
.intake-link:focus-visible {
    color: var(--blue-dark);
}

:root[data-theme="dark"] .intake-link:hover,
:root[data-theme="dark"] .intake-link:focus-visible {
    color: var(--text);
}

/* Celulares: si el texto es largo, el enlace pasa abajo y la etiqueta deja de ser una píldora */
@media (max-width: 35rem) {
    .intake-status {
        border-radius: .9rem;
    }

    .intake-link {
        flex-basis: 100%;
        padding-left: 1.1rem;
    }
}


/* ------------------------------------------------------------------
   Portada: foto de fondo integrada al color de la sección.
   No es una foto con un velo negro encima: la foto se tiñe con los violetas
   de la marca y se funde con el fondo de la portada (--sky), así no hay
   cortes ni diferencias de color con el resto de la sección.
   Efectos elegidos (no todos los posibles, solo los que van con el estilo):
   1. Color de marca: la foto pasa a violeta (filter) y se mezcla con el fondo
      (mix-blend-mode). En modo claro quedan solo las líneas, en violeta;
      en modo oscuro quedan solo las luces.
   2. Fundido hacia el texto: la foto ocupa el lado derecho y se va borrando
      hacia la izquierda, antes de llegar al párrafo.
   3. Bordes arriba y abajo: la foto aparece y desaparece de a poco, así la
      portada termina en su color de siempre y no hay corte con "Sobre mí".
   4. Desenfoque leve: la foto queda en segundo plano y no se nota que
      es chica cuando se agranda en pantallas grandes.
   5. Halo detrás del texto: un degradé radial del color del fondo, solo donde
      está el texto, para que el título y el párrafo se lean bien.
   ------------------------------------------------------------------ */
.hero {
    --hero-photo-opacity: .55;
    --hero-photo-filter: invert(1) grayscale(1) contrast(.6) brightness(1.1) sepia(1) hue-rotate(215deg) saturate(2.6) blur(var(--hero-photo-blur));
    --hero-photo-blend: multiply;
    --hero-halo: rgba(234, 223, 241, .96);
    --hero-photo-blur: 1.2px;
    isolation: isolate;
}

:root[data-theme="dark"] .hero {
    --hero-photo-opacity: .85;
    --hero-photo-filter: grayscale(1) sepia(1) hue-rotate(215deg) saturate(1.8) brightness(1.15) blur(var(--hero-photo-blur));
    --hero-photo-blend: screen;
    --hero-halo: rgba(24, 17, 43, .92);
}

/* Con la foto de fondo, los círculos decorativos ya no hacen falta:
   la foto cumple ese papel y los dos juntos competían */
.hero-decoration,
.hero .hero-actions::before {
    display: none;
}

/* La foto va del centro hacia la derecha; se ve la zona del código y la red */
.hero::before {
    background: url("../../assets/images/hero-fondo.webp") 35% 60% / cover no-repeat;
    bottom: 0;
    content: "";
    filter: var(--hero-photo-filter);
    left: calc(50% + 12rem);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0, #000 22rem, #000 85%, rgba(0, 0, 0, .55) 100%),
        linear-gradient(180deg, transparent 0, #000 22%, #000 68%, transparent 100%);
    mask-image:
        linear-gradient(90deg, transparent 0, #000 22rem, #000 85%, rgba(0, 0, 0, .55) 100%),
        linear-gradient(180deg, transparent 0, #000 22%, #000 68%, transparent 100%);
    mix-blend-mode: var(--hero-photo-blend);
    opacity: var(--hero-photo-opacity);
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}

/* Pantallas grandes: la foto se agranda, un poco más de desenfoque */
@media (min-width: 100rem) {
    .hero {
        --hero-photo-blur: 2px;
    }
}

/* El halo va detrás del bloque de texto y se desvanece sin borde */
.hero-content::before {
    background: radial-gradient(closest-side, var(--hero-halo) 70%, transparent 100%);
    content: "";
    inset: -5rem -9rem;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

/* Celulares y tablets: el texto ocupa todo el ancho, así que la foto
   queda en la parte de abajo, detrás de los botones, y más tenue */
@media (max-width: 52rem) {
    .hero {
        --hero-photo-opacity: .55;
    }

    :root[data-theme="dark"] .hero {
        --hero-photo-opacity: .55;
    }

    .hero::before {
        background-position: 30% 70%;
        left: 0;
        top: 45%;
        -webkit-mask-image:
            linear-gradient(90deg, transparent 0, #000 70%),
            linear-gradient(180deg, transparent 0, #000 45%, #000 70%, transparent 100%);
        mask-image:
            linear-gradient(90deg, transparent 0, #000 70%),
            linear-gradient(180deg, transparent 0, #000 45%, #000 70%, transparent 100%);
    }

    .hero-content::before {
        inset: -2rem -1.25rem;
    }
}