* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Lock the page — no scroll. Navigation happens via the side menu only. */
html, body {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;  /* dvh respects mobile browser UI chrome */
}

:root {
    /* === Design tokens — exported from "Mode 1.tokens.json" (Figma) ===
       SINGLE SOURCE OF TRUTH for color. Only these values may be used on the
       site. Do not introduce any other color without Luly's explicit OK. */
    --naranja:          #FF5B23;
    --verde-agua-claro: #ADE6ED;
    --azul:             #3A39FF;  /* electric blue — bg of Hero, Portfolio & Nosotros */
    --lila:             #B4B4ED;
    --amarillo:         #FFCC00;
    --verde:            #167A72;
    --azul-oscuro:      #1A237E;
    --violeta-claro:    #511F99;
    --gris-claro:       #D9D2CC;
    --negro:            #000000;
    --blanco:           #FFFFFF;

    /* === Semantic roles — map UI meaning onto the tokens above ===
       Components reference these (never a raw hex). */
    --bg-primary:       var(--azul-oscuro);
    --bg-section-alt:   var(--violeta-claro);
    --bg-section-2:     var(--verde);
    --bg-contacto:      var(--lila);
    --accent-primary:   var(--naranja);
    --accent-secondary: var(--amarillo);
    --text-primary:     var(--blanco);
    --text-muted:       var(--lila);
    --highlight:        var(--verde-agua-claro);

    /* Cross-section blend zone */
    --fade-zone: 220px;
}

/* Mode switching is PAUSED for now (per Luly). Kept here, mapped to tokens,
   so it stays palette-compliant if we revisit a second mode later. */
[data-theme="light"] {
    --bg-primary:       var(--gris-claro);
    --bg-section-alt:   var(--lila);
    --bg-section-2:     var(--verde-agua-claro);
    --bg-contacto:      var(--lila);
    --accent-primary:   var(--naranja);
    --accent-secondary: var(--amarillo);
    --text-primary:     var(--azul-oscuro);
    --text-muted:       var(--violeta-claro);
    --highlight:        var(--verde);
}

body {
    display: grid;
    grid-template-rows: 80px 1fr;
    grid-template-columns: 1fr 160px;
    min-height: 100vh;
}

header {
    grid-column: 1 / 3;
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 0 1rem;
}

header .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

header .logo img {
    display: block;
    height: clamp(36px, 8vh, 52px);
    width: auto;
    max-width: min(200px, 45vw);
    object-fit: contain;
}

main {
    grid-column: 1;
    grid-row: 2;
    background-color: var(--blanco);
    position: relative;  /* anchor for absolutely-positioned sections */
    overflow: hidden;
}

/* All sections stack in the same position; only the active one is visible.
   Enter/exit: fade + short vertical slide with expo-out easing for a
   controlled "snap into place" feel. Visibility gets a delayed transition
   on exit so the fade-out plays before it's removed from the a11y tree. */
section {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-family: sans-serif;
    color: var(--gris-claro);  /* placeholder text for stub sections */
    visibility: hidden;
    opacity: 0;
    transform: translateY(24px);
    pointer-events: none;
    transition:
        opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.45s;
}

section[data-active] {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
}

/* Active link in the side menu */
nav a[aria-current] {
    color: var(--accent-primary);
    font-weight: 700;
}

/* Cross-section transition system.
   Each participating section declares: its own color, its texture, and the
   colors of its neighbors. The boundary becomes a band where the texture
   fades out and the neighbor's color bleeds in. */
#hero,
#portfolio,
#contacto {
    /* position: absolute + inset: 0 is inherited from the base `section` rule;
       isolation: isolate keeps the negative-z-index ::before/::after texture
       layers contained within each section's stacking context. */
    isolation: isolate;
    background-color: var(--section-bg);
    border-bottom: 0;
}

/* Texture layer — masked so it fades at the top and bottom edges. */
#hero::before,
#portfolio::before,
#contacto::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: var(--section-texture);
    background-size: var(--texture-size, cover);
    background-repeat: var(--texture-repeat, no-repeat);
    background-position: center;
    opacity: var(--texture-opacity, 1);
    mix-blend-mode: var(--texture-blend, normal);
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        var(--negro) var(--fade-zone),
        var(--negro) calc(100% - var(--fade-zone)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        var(--negro) var(--fade-zone),
        var(--negro) calc(100% - var(--fade-zone)),
        transparent 100%
    );
}

/* Color blend overlay — pulls neighbor section colors into top/bottom edges.
   Defaults to transparent, so unset neighbors produce no visible fade. */
#hero::after,
#portfolio::after,
#contacto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(to bottom, var(--prev-section-bg, transparent), transparent var(--fade-zone)),
        linear-gradient(to top, var(--next-section-bg, transparent), transparent var(--fade-zone));
}

#hero {
    --section-bg: var(--azul);
    --next-section-bg: var(--azul);
    --section-texture: url("resources/textures/grunge_texture.webp");
    --texture-opacity: 0.3;
    --texture-blend: multiply;
}

#portfolio {
    --section-bg: var(--azul);
    --prev-section-bg: var(--azul);
    --section-texture: url("resources/textures/cuadricula_textura.svg");
    /* TODO: tune the cuadrícula opacity/scale once the real texture is locked. */

    /* Layout: title at top, bento grid filling middle, CTA at bottom. */
    flex-direction: column;
    padding: clamp(2rem, 4vh, 4rem) clamp(2rem, 6vw, 6rem);
    gap: clamp(1rem, 3vh, 2rem);
    color: var(--text-primary);
    font-family: "Montserrat Alternates", system-ui, sans-serif;
}

/* === Eye motif === Two different cutouts at opposite corners, blended into
   the blue background and sitting behind the cards. Decorative only. */
.portfolio-eye {
    position: absolute;
    z-index: 0;
    height: auto;
    pointer-events: none;
    user-select: none;
    /* Light areas (incl. the white paper edge) drop into the blue; only the
       dark halftone remains — the duotone look from the reference. */
    mix-blend-mode: multiply;
    transition: transform 0.2s ease-out;  /* smooth the pointer parallax */
}

.portfolio-eye-tr {  /* top-right */
    top: clamp(-1rem, 1vh, 1.5rem);
    right: clamp(-2rem, -1vw, 0rem);
    width: clamp(150px, 17vw, 280px);
    transform: translate(var(--px, 0px), var(--py, 0px)) rotate(-8deg);
}

.portfolio-eye-bl {  /* bottom-left */
    bottom: clamp(-1rem, 0vh, 1.5rem);
    left: clamp(-2rem, -1vw, 0rem);
    width: clamp(150px, 17vw, 280px);
    transform: translate(var(--px, 0px), var(--py, 0px)) rotate(8deg);
}

/* Keep the portfolio content above the eyes. */
#portfolio .portfolio-title,
#portfolio .bento-grid,
#portfolio .cta-pill {
    position: relative;
    z-index: 1;
}

.portfolio-title {
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    text-align: center;
    line-height: 1.1;
    max-width: 100%;
}

/* Force the two-line split; nowrap keeps each line whole (the erratic effect
   makes every letter its own box, so a narrow line would break mid-word). */
.portfolio-title .erratic { display: block; white-space: nowrap; }

/* Bento grid — 3 columns, 2 rows. Left column splits in two landscape cards;
   middle and right columns are tall portrait cards spanning both rows. */
.bento-grid {
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.bento-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: 16px;
    overflow: hidden;
    /* Placeholder. Replace `background` with `background-image: url(...)` once
       you have the B&W photo for each category. Keep `background-size: cover`. */
    background: linear-gradient(135deg, var(--violeta-claro), var(--negro));
    background-size: cover;
    background-position: center;
    color: var(--text-primary);
    text-decoration: none;
    font-size: clamp(1.5rem, 3vw, 2.75rem);
    line-height: 1;
    text-align: center;
    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card:hover,
.bento-card:focus-visible {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    outline: none;
}

.bento-grafico  { grid-column: 1; grid-row: 1; }
.bento-web      { grid-column: 1; grid-row: 2; }
.bento-campanas { grid-column: 1; grid-row: 3; }
.bento-3d       { grid-column: 2; grid-row: 1 / 4; }
.bento-motion   { grid-column: 3; grid-row: 1 / 4; }

.cta-pill {
    align-self: center;
    background-color: var(--text-primary);
    color: var(--bg-primary);
    padding: 0.9rem 2.5rem;
    border-radius: 8px;
    font-family: "Montserrat Alternates", system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.cta-pill:hover,
.cta-pill:focus-visible {
    transform: scale(1.05);
    outline: none;
}

#contacto {
    --section-bg: var(--bg-contacto);
    --section-texture: url("resources/textures/grunge_texture_contacto.webp");
    --texture-opacity: 1;
    --texture-blend: screen;
    color: var(--bg-primary);  /* Azul Oscuro — readable on light violet */

    /* Local color tokens for the contact titles. The contact background is the
       same light violet in both themes, so these values work in dark + light. */
    --contacto-title:    var(--violeta-claro);    /* big headline */
    --contacto-subtitle: var(--azul);             /* subtitle — electric blue, per reference */

    /* Override the centered flex layout (base section rule) so the two titles
       can anchor to top-left and bottom-right. */
    align-items: stretch;
    justify-content: stretch;
}

/* Contact layout: title pinned top-left, subtitle bottom-right.
   Column + space-between stacks gracefully on narrow screens. */
.contacto-content {
    position: relative;
    z-index: 2;  /* title + subtitle above the hands and logos */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(2rem, 6vw, 6rem);
    padding-top: clamp(1rem, 3vw, 2.5rem);   /* lift the title toward the top */
    padding-right: clamp(4rem, 10vw, 9rem);  /* breathing room for the right-side nav */
    box-sizing: border-box;
}

/* Big headline — uppercase, left-aligned, violet, with one orange accent letter.
   Uses the .erratic effect (applied per-span by script.js). */
.contacto-title {
    align-self: flex-start;
    margin-top: clamp(1rem, 3vw, 3rem);    /* nudge down */
    margin-left: clamp(1rem, 5vw, 5rem);   /* nudge right */
    color: var(--contacto-title);
    font-size: clamp(2rem, 7vw, 5.5rem);
    line-height: 0.9;
    text-transform: uppercase;
}

.contacto-title .line { display: block; }
.contacto-title .line-2 { margin-left: 0.5em; }   /* slight indent, like the reference */
.contacto-title .line-3 { margin-left: 0.25em; }

/* Subtitle — blue, italic, bottom-right, with a thin/thick weight contrast. */
.contacto-subtitle {
    align-self: flex-end;
    max-width: 100%;
    color: var(--contacto-subtitle);
    font-style: italic;
    font-size: clamp(1.25rem, 3vw, 2.5rem);
    line-height: 1.1;
    text-align: right;
}

/* Stack the two lines; nowrap keeps each line whole so words never break
   mid-letter (the erratic effect turns every character into its own box). */
.contacto-subtitle .erratic { display: block; white-space: nowrap; }

/* === Social logos === Instagram + TikTok grunge cutouts, centered, clickable.
   Staggered vertically for the collage feel of the reference. */
.contacto-social {
    position: absolute;
    z-index: 3;  /* above .contacto-content (z-index 2) so hover/clicks reach the logos */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 6vw, 6rem);
}

.contacto-social-link {
    display: block;
    transition: transform 0.25s ease;
    /* --stagger holds each logo's vertical offset so hover can preserve it. */
    transform: translateY(var(--stagger, 0));
}

.contacto-social-link img {
    display: block;
    width: clamp(170px, 24vw, 360px);
    height: auto;
}

.contacto-ig     { --stagger: 4.5rem;  --tilt: -7deg; }   /* lower, tilts left  */
.contacto-tiktok { --stagger: -2.5rem; --tilt: 7deg; }    /* higher, tilts right */

/* Hover: each logo keeps its height, grows a bit and twists (opposite ways). */
.contacto-social-link:hover,
.contacto-social-link:focus-visible {
    transform: translateY(var(--stagger, 0)) scale(1.08) rotate(var(--tilt, -4deg));
    outline: none;
}

/* === Pointing hands === Decorative, blended into the lila background so they
   read as a faint purple watermark (like the reference). Behind everything. */
.contacto-hand {
    position: absolute;
    z-index: 0;
    height: auto;
    pointer-events: none;
    user-select: none;
    opacity: 0.35;
    mix-blend-mode: luminosity;
    transition: transform 0.2s ease-out;  /* smooth the pointer parallax */
}

/* Top hand: tucked into the top-left corner, slightly tilted. Pushed off the
   top/left edges so the wrist (bottom-left) is clipped by main's overflow: hidden. */
.contacto-hand-left {
    top: clamp(4rem, 10vh, 10rem);
    left: clamp(-6rem, -5vw, -2rem);
    width: clamp(220px, 30vw, 480px);
    transform: translate(var(--px, 0px), var(--py, 0px)) rotate(24deg);
}

/* Bottom hand: same image mirrored → points up-left toward the center. Tucked
   into the bottom-right corner, with the wrist clipped by the edge. */
.contacto-hand-right {
    right: clamp(-10rem, -8vw, -4rem);
    bottom: clamp(-5rem, -4vw, -1rem);
    width: clamp(240px, 32vw, 520px);
    transform: translate(var(--px, 0px), var(--py, 0px)) scaleX(-1) rotate(-8deg);
}

/* === Nosotros — "Dream Team" ===
   Three stacked layers (header / team row / CTA) centered on the electric-blue
   background, over a faint cuadrícula grid. */
#nosotros {
    background-color: var(--azul);  /* Azul eléctrico */
    color: var(--text-primary);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(1.5rem, 3vh, 2.5rem);
    padding: clamp(1.5rem, 4vh, 3rem) clamp(2rem, 5vw, 5rem);
    font-family: "Montserrat Alternates", system-ui, sans-serif;
    overflow: hidden;
}

/* Background grid — faint structural texture (the "order" half of the
   order-vs-chaos tension), behind every content layer. */
.nosotros-grid-bg {
    position: absolute;
    inset: 0;
    background-image: url("resources/textures/cuadricula_textura.svg");
    background-size: cover;       /* the SVG is a full grid — stretch to fill */
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;                 /* thin dashed lines need more than a whisper */
    pointer-events: none;
    z-index: 0;
}

/* Keep all content layers above the grid background. */
.nosotros-header,
.nosotros-team,
.nosotros-cta {
    position: relative;
    z-index: 1;
}

/* Spotify code — green tab flush against the section's right edge, where the
   white side-nav begins, so it reads as "emerging from behind the nav". At rest
   only the Spotify logo shows; on hover it grows leftward to reveal the full
   code. The right edge stays pinned (and squared) against the nav. */
.nosotros-spotify {
    position: absolute;
    top: 1rem;
    right: 0;                        /* flush to the nav edge — no floating gap */
    z-index: 2;
    width: 52px;                     /* at rest: a square framing just the logo */
    height: 52px;
    background-color: var(--verde);  /* fills behind the SVG so corners stay seamless */
    border-radius: 8px 0 0 8px;      /* rounded on the left only; right is flush */
    overflow: hidden;                /* clip the rest of the code while compact */
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover / keyboard focus — the tab expands to reveal the full scannable code.
   268px = the SVG's 335×65 ratio scaled to the 52px height. */
.nosotros-spotify:hover,
.nosotros-spotify:focus-visible {
    width: 268px;
    outline: none;
}

/* The code SVG is pinned to the left edge and sized by height; the window's
   overflow:hidden clips whatever doesn't fit. As the tab grows, the logo slides
   left and the bars come into view. */
.nosotros-spotify-img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;            /* keep the SVG's aspect ratio */
    max-width: none;        /* never let the window squash it */
    display: block;
}

/* Header — title + tagline, centered. */
.nosotros-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;

    /* TODO(human): dial in the two title tweaks.
       --title-rise : negative value lifts the whole title block up
                      (e.g. -1.5rem, or a responsive clamp(...)).
       --team-shift : how far TEAM slides right of center
                      (e.g. 2rem, 8vw, clamp(1rem, 6vw, 5rem)). */
    --title-rise: -4rem;                    /* lifts the whole title block up */
    --team-shift: clamp(2rem, 7vw, 6rem);   /* TEAM slides right of center */

    transform: translateY(var(--title-rise, 0));
}

/* Title — stacked DREAM / TEAM words, centered. Position context for the cups
   that float on top. */
.nosotros-title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0.9;
    color: var(--blanco);
}

.nosotros-title-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nosotros-title-line1,
.nosotros-title-line2 {
    display: block;
    width: max-content;       /* each word is its own box, sized to its text */
    font-size: clamp(3rem, 8vw, 7rem);
}

/* DREAM — the anchor word, stays centered. */
.nosotros-title-line1 {
    align-self: center;
}

/* TEAM — slides to the right, leaving open space on its left (where the
   toasting cups sit). --team-shift controls how far past center it travels. */
.nosotros-title-line2 {
    align-self: center;
    transform: translateX(var(--team-shift, 0));
}

/* Toasting cups — two hands meeting in the center of the title, clinking.
   Both float absolutely over the words (a collage element, not part of the
   text flow). Anchored at the title's center, then nudged out to either side. */
.nosotros-copa {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;            /* in front of the title letters */
    width: clamp(64px, 7vw, 104px);
    height: auto;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Left hand sits just left of center, leaning right toward the toast. */
.nosotros-copa--left {
    transform: translate(-240%, 0%) rotate(-3deg);
}

/* Right hand is mirrored (scaleX(-1)) and sits just right of center. */
.nosotros-copa--right {
    transform: translate(-160%, 10%) scaleX(-1) rotate(-5deg);
}

/* On hover the two cups clink — they swing toward each other and tilt up.
   Each transform must keep its own translate (and the right one its scaleX(-1))
   or the cup would jump back to origin / un-mirror mid-animation. */
.nosotros-header:hover .nosotros-copa--left {
    transform: translate(-230%, 0%) rotate(15deg);
}

.nosotros-header:hover .nosotros-copa--right {
    transform: translate(-170%, 10%) scaleX(-1) rotate(15deg);
}

@media (prefers-reduced-motion: reduce) {
    .nosotros-copa { transition: none; }
}

/* Tagline — small italic line under the title. */
.nosotros-tagline {
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    /* weight & italic are left to the erratic effect (per-letter jitter) */
    color: var(--blanco);
    opacity: 0.85;
    text-align: center;
    margin-top: 0.25rem;

    /* nudge the phrase to the right of center; raise the number to push further */
    --tagline-shift: 3rem;
    transform: translateX(var(--tagline-shift, 0));
}

/* Team row — five members in a single row on desktop. */
.nosotros-team {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(1.5rem, 4vw, 4rem);
    flex-wrap: nowrap;
}

.nosotros-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}

.nosotros-photo-wrap {
    width: clamp(100px, 12vw, 165px);
    height: clamp(100px, 12vw, 165px);
    border-radius: 50%;
    overflow: hidden;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Each PNG already bakes in its colored circle (naranja for members 1/3/5,
   azul for 2/4) with the person pre-treated in B&W — so the CSS just displays
   it as-is. No background tint, no grayscale: those would fight the artwork. */
.nosotros-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nosotros-name {
    font-size: clamp(0.8rem, 1.3vw, 1rem);
    font-weight: 400;
    color: var(--blanco);
}

.nosotros-role {
    font-size: clamp(0.95rem, 1.6vw, 1.3rem);
    font-weight: 700;
    color: var(--blanco);
}

/* CTA — button with a decorative "order" graphic behind it and the sublink
   pushed to the lower-right (editorial, off-center composition). */
.nosotros-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    /* push the whole CTA block down */
    margin-top: clamp(2.5rem, 6vh, 5rem);
}

/* Crosshair + circle graphic — behind the button (z-index 0) and pulled to the
   right. The SVG's blend modes / 0.3 opacity render it as faint light lines. */
.nosotros-complemento {
    position: absolute;
    width: 150px;
    height: auto;
    top: 50%;
    left: 78%;              /* lean right of the button */
    translate: -50% -50%;   /* center the graphic on this anchor point */
    z-index: 0;             /* behind the button */
    pointer-events: none;
}

.nosotros-btn {
    background-color: var(--blanco);
    color: var(--azul-oscuro);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 2rem;
    font-family: "Montserrat Alternates", system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
    z-index: 1;
}

.nosotros-btn:hover { background-color: var(--amarillo); }

/* Sublink — pulled out of the centered column and pinned to the lower-right
   of the button, so it reads as an off-center caption (not a centered label). */
.nosotros-sublink {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 62%;                /* start in the button's right half, flow rightward */
    white-space: nowrap;      /* keep it on one line */
    font-size: 0.8rem;
    color: var(--blanco);
    opacity: 0.75;
}

/* "manija" highlighted in aqua (the --highlight token), as in the reference. */
.nosotros-sublink strong {
    font-weight: 700;
    opacity: 1;
    color: var(--highlight);
}

/* Mobile — wrap the five members; the last one takes the full final row. */
@media (max-width: 767px) {
    .nosotros-team {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
    }
    .nosotros-member { width: 40%; }
    .nosotros-member:last-child { width: 100%; align-items: center; }
}

/* Placeholder background until this section has real content + textures. */
#destacados {
    background-color: var(--bg-section-alt);  /* Violeta */
    color: var(--text-primary);
}

/* === Erratic typography system ===
   Reusable effect for section titles and highlighted text. The script
   (script.js) wraps each character of any .erratic element in a span and
   randomly assigns family / weight / italic / outline + per-letter jitter.
   Color comes from the parent's currentColor, so outline strokes inherit. */
.erratic {
    display: inline-block;
    font-family: "Montserrat Alternates", system-ui, sans-serif;
    line-height: 0.95;
    letter-spacing: 0.5px;
}

.erratic > span {
    display: inline-block;
    white-space: pre;
    will-change: transform;
}

.erratic .mont { font-family: "Montserrat", system-ui, sans-serif; }
.erratic .malt { font-family: "Montserrat Alternates", system-ui, sans-serif; }

.erratic .w200 { font-weight: 200; }
.erratic .w300 { font-weight: 300; }
.erratic .w400 { font-weight: 400; }
.erratic .w600 { font-weight: 600; }
.erratic .w700 { font-weight: 700; }
.erratic .w800 { font-weight: 800; }

.erratic .it { font-style: italic; }

/* === Hero headline === */
#hero {
    align-items: flex-start;
}

.hero-headline {
    position: relative;
    z-index: 2;  /* above the collage cutouts */
    width: min(1100px, 90%);
    margin: 0 auto;
    /* Nudge toward center so it clears the megaphone on the left.
       --px/--py are the pointer-parallax offsets set by script.js. */
    transform: translateX(clamp(1rem, 6vw, 6rem)) translate(var(--px, 0px), var(--py, 0px));
    transition: transform 0.2s ease-out;
    color: var(--accent-primary);
    font-size: clamp(40px, 7vw, 96px);
    line-height: 1.05;
    padding: 13rem 0;
}

.hero-headline .line {
    display: block;
}

.hero-headline .line-2,
.hero-headline .line-4 {
    font-size: 0.55em;
    margin-left: 4em;
}

.hero-headline .line-3 {
    margin-left: 1em;
}

.hero-headline .line-4 {
    margin-left: 6em;
}

/* MEJORES — the highlighted, rotated word at the end of the headline */
.hero-headline .mejores {
    background-color: var(--highlight);
    color: var(--accent-primary);
    transform: rotate(-7deg);
    padding: 0.05em;
    display: inline-block;
    margin-left: 4em;
}

/* === Hero collage cutouts ===
   Megaphone (top-left) + brain (bottom-right), sitting above the texture
   (z-index -2/-1) but behind the headline (z-index 2). Decorative only. */
.hero-collage {
    position: absolute;
    z-index: 1;
    height: auto;
    pointer-events: none;
    user-select: none;
    /* Smooth the pointer-parallax movement (--px/--py set by script.js). */
    transition: transform 0.2s ease-out;
}

.hero-megafono {
    top: clamp(2rem, 9vh, 7rem);
    left: clamp(-2rem, 1vw, 2rem);
    width: clamp(170px, 30vw, 460px);
    transform: translate(var(--px, 0px), var(--py, 0px)) rotate(-4deg);
}

.hero-cerebro {
    right: clamp(-1rem, 2vw, 3rem);
    bottom: clamp(2rem, 9vh, 7rem);
    width: clamp(200px, 33vw, 540px);
    transform: translate(var(--px, 0px), var(--py, 0px)) rotate(5deg);
}

nav {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    position: sticky;
    top: 80px;
    z-index: 10;
    height: calc(100vh - 80px);
    width: 100%;
    box-sizing: border-box;
    background-color: var(--blanco);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    font-family: "Montserrat Alternates", sans-serif;
}

nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

nav a {
    text-decoration: none;
    color: inherit;
    text-transform: lowercase;
    font-size: 0.875rem;
    font-weight: 500;
}

nav a:hover {
    text-decoration: underline;
}

/* ===== Modal del manifiesto (video de YouTube) ===== */

/* Cuando tiene [hidden] no se muestra. Esta regla explícita es necesaria
   porque más abajo le damos display:flex, que si no pisaría al [hidden]. */
.video-modal[hidden] { display: none; }

.video-modal {
    position: fixed;
    inset: 0;                 /* arriba/derecha/abajo/izquierda en 0 — cubre toda la pantalla */
    z-index: 1000;            /* por encima del menú lateral */
    display: flex;
    align-items: center;      /* centra el video vertical y horizontalmente */
    justify-content: center;
    padding: 1.5rem;
}

/* Capa oscura detrás del video */
.video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(2px);
    cursor: pointer;          /* indica que clickear afuera cierra */
}

/* Contenedor del video — se queda por encima del fondo oscuro */
.video-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(90vw, 960px);  /* nunca más de 960px ni más del 90% del ancho */
}

/* Mantiene la proporción 16:9 a cualquier ancho */
.video-modal__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 8px;       /* mismas esquinas que los CTA de la marca */
    overflow: hidden;
    background: var(--negro);
    /* Marco de marca — borde fino azul eléctrico (motivo de "orden") + sombra */
    box-shadow: 0 0 0 1px var(--azul), 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* El iframe inyectado llena el contenedor */
.video-modal__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Botón de cerrar — naranja de marca, en la esquina superior del video */
.video-modal__close {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 50%;
    background: var(--naranja);
    color: var(--blanco);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.15s ease, background-color 0.2s ease;
}

.video-modal__close:hover {
    background: var(--amarillo);
    color: var(--azul-oscuro);
    transform: scale(1.08);
}

/* Animación de entrada — se omite si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: no-preference) {
    .video-modal:not([hidden]) .video-modal__dialog {
        animation: modal-pop 0.25s ease-out;
    }
    @keyframes modal-pop {
        from { opacity: 0; transform: scale(0.96); }
        to   { opacity: 1; transform: scale(1); }
    }
}