/* Dalma Contreras · palette, type and layout from the design "1 · Escenario — versión anterior";
   the hero and the serif wordmark come from the first draft. */

:root {
  --bg: #07072a;
  --band: #0A0A33;
  --card: #0E0E3A;
  --card-2: #0B0B36;
  --line: #22246A;
  --line-2: #2A2C6B;
  --line-soft: #1B1C55;
  --btn: #3D55F0;
  --ghost: #4A4F9A;
  --text: #EEF0FF;
  --text-2: #C9CDF0;
  --text-3: #A9AEDB;
  --muted: #6F74B8;
  --accent: #8EA0FF;
  --accent-2: #6F86FF;
  --logo: #9AA6E8;
  /* show tiles and the form: a quiet top-to-bottom fade and an edge just lighter than the cards */
  --tile: linear-gradient(180deg, #11114A 0%, #0C0C3A 55%, #0A0A33 100%);
  --tile-edge: rgba(142,160,255,.2);
  --head: Unbounded, sans-serif;
  --body: Manrope, system-ui, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  /* the page's side margin: 40px from 800px up, narrowing with the window down to 20px on a phone */
  --gutter: clamp(20px, 5vw, 40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color-scheme: dark; }
a { color: #AFC0FF; }
a:hover { color: #ffffff; }
a, button { -webkit-tap-highlight-color: transparent; }
.page { font-family: var(--body); color: var(--text); background: var(--bg); overflow: hidden; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; }
.line { display: block; }

.kicker { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.sec > h2, .about-text h2, .book-info h2 { margin: 10px 0 0; font-family: var(--head); font-size: clamp(30px, 4vw, 48px); font-weight: 600; }
.sec > h2:first-child { margin-top: 0; } /* a title that opens its section (no label above it) */
.sub { margin: 12px 0 0; color: var(--text-3); max-width: 520px; }
.hl { color: var(--accent); }
/* --top is the space above a section. */
.sec { padding-top: var(--top, 120px); }
.sec-shows { --top: 40px; }   /* the hero already ends 80px under its buttons */
.sec-videos { --top: 80px; }
.sec-traj { --top: 96px; }    /* its first row of venues ends at the bottom of a ~940px window under the about section */
/* Nav links land on the element that carries the id (the "Shows" title, the "Vídeos" label, the
   "Trayectoria" title) right at the top edge of the window, with the small label above it out of
   sight; the header isn't fixed, so nothing covers it. */
#shows, #videos, #galeria, #trayectoria { scroll-margin-top: 0; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 26px; border-radius: 999px; text-decoration: none; font: 700 16px var(--body); white-space: nowrap; cursor: pointer; }
.btn-primary { background: var(--btn); color: #ffffff; border: 0; }
.btn-primary:hover { background: #5068FF; color: #ffffff; }
.btn-ghost { border: 1px solid var(--ghost); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: #ffffff; }
.btn-sm { height: 46px; padding: 0 20px; font-size: 14px; }

/* header */
/* The header stays with the page and never changes size (72px), so nothing jumps on the first scroll.
   Over the hero it shows the top-of-page fade (::before); once the page scrolls it crossfades to a
   see-through bar (::after: the page's dark blue at 60% over a strong blur). It hides while scrolling down,
   so reading stays full screen, and comes back on any scroll up, so the links are always one flick away. */
.hdr { position: fixed; left: 0; right: 0; top: 0; z-index: 20; transition: transform .3s ease; }
.hdr::before, .hdr::after { content: ''; position: absolute; left: 0; right: 0; top: 0; pointer-events: none; transition: opacity .25s ease; }
/* Over the hero the header has no band of its own: any shade of the page's blue across the top, however
   light, drew a line across the whole window where it met the stage, and read as a lid on the video.
   What is behind the logo and the links is the video itself (the dark curtain above the panels) and,
   beside it, the stage's glow, which carries on to the top of the page (build.js, .hero-glow). All that
   is added is a trace of shade at the very top, gone within 90px, and the text's own shadows. */
.hdr::before { bottom: -18px; background: linear-gradient(180deg, rgba(7,7,42,.2) 0%, rgba(7,7,42,.13) 40%, rgba(7,7,42,.05) 75%, rgba(7,7,42,0) 100%); }
.hdr::after { bottom: 0; opacity: 0; background: rgba(7,7,42,.6); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid rgba(142,160,255,.12); }
.hdr.is-solid::before { opacity: 0; }
.hdr.is-solid::after { opacity: 1; }
.hdr.is-hidden { transform: translateY(calc(-100% - 30px)); }
.hdr-in { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.navlinks a[aria-current] { color: #ffffff; } /* the section being read */
.logo { text-decoration: none; color: #ffffff; font-family: var(--serif); font-size: 30px; font-weight: 600; font-style: italic; white-space: nowrap;
  /* Its box is centred in the row, its letters are not: this serif sits low in its line (baseline at 45px
     against the links' 41.5), so the wordmark read as dropped next to the links and the buttons. Lifted
     until the middle of its lowercase is on the row's centre line. */
  position: relative; top: -3px; }
.navlinks { display: flex; gap: 28px; }
.navlinks a { color: #E4E9FF; text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: .01em; }   /* they sit on the stage's curtain, not on a bar: heavier and lighter than body text */
.navlinks a:hover { color: #ffffff; }
.navlinks a, .logo { text-shadow: 0 1px 10px rgba(7,7,42,.9), 0 0 22px rgba(7,7,42,.7); }
.hdr-right { display: flex; align-items: center; gap: 10px; }
/* The language switch sits on the stage's curtain over the hero, where the page's own hairline colour
   disappears: a light outline and a little of the page's blue inside, so the pill and its three choices
   are a visible control on any background. */
.lang { display: flex; border: 1px solid rgba(228,233,255,.42); border-radius: 999px; padding: 3px; background: rgba(7,7,42,.38); }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 34px; border-radius: 999px; font: 600 12px var(--body); color: #E4E9FF; text-decoration: none; }
.lang a:hover { color: #ffffff; background: rgba(228,233,255,.12); }
.lang a[aria-current] { background: var(--text); color: var(--bg); }
.btn-hdr { height: 42px; padding: 0 18px; font-size: 14px; }
/* The menu button and the menu's own "Contacto" only exist where the links don't fit in the row
   (1000px and narrower, further down): there the links become a full-screen menu. */
.menu-btn, .nav-cta { display: none; }

/* hero: exactly one window tall (the header is an overlay on its top 72px), and "La maga de las burbujas"
   is the last line in it. The stage is the show: it is as large as the window lets it be with the whole
   of it on screen (both LED panels, Dalma from head to foot), so the panels reach PAST the page's column
   on both sides, towards the window's edges. The label row and the title keep the column (the header's
   own width) and sit on the stage's foot: the label over the panels' last rows, the title right under.
   The panels start clear of the header's row (--stage-top: 80px, the row's buttons end at 57): the logo
   and the links sit on the dark curtain above them, never on LEDs. The room for that comes off the
   foot, not off the stage's size: the panels end 6px above the title, so the title covers the floor
   and the tips of Dalma's shoes.
   The loop is levelled and centred for this (tools/hero_flatten.py): in its 1440×1080 frame the panels
   are a symmetric trapezoid, seen from a little below: y 333–960, their foot x 107–1333 (1225 wide),
   their top x 140–1300. The hanging lights end at y 265, the floor under Dalma's feet is y 977, the
   audience's heads start at y 1012, a moving-head light stands outside each panel.
   - --stage-w is the panels' width at their foot: what the height allows (.5118 = 627 / 1225, their
     height per unit of that width, between the header and 6px above the title), never wider than the
     window less a margin, and
     never more than 1.3× the column (a very large window: the stage doesn't lose touch with the page).
   - Only then is there height to spare (--slack): split above the panels and below the title.
   The picture has no edge: outside the panels it dissolves into the page's own blue on every side. */
.hero {
  --hero-h: clamp(620px, 100svh, 1400px);
  --content: min(1160px, 100vw - 2 * var(--gutter));
  --title: calc(var(--content) / 14.85);
  --stage-top: 80px;
  /* What stands under the panels' foot: --text-h is the text's own height (here the title's one line; a
     phone stacks more, further down), --gap the space between the panels and it, --foot the least space
     under it. */
  --text-h: var(--title);
  --gap: 6px;
  --foot: 16px;
  --room: calc(var(--hero-h) - var(--foot) - var(--text-h) - var(--gap) - var(--stage-top));
  --stage-w: min(calc(var(--room) / .5118), 100vw - 56px, calc(var(--content) * 1.3));
  --slack: calc(var(--room) - var(--stage-w) * .5118);
  --pad: calc(var(--foot) + var(--slack) * .5);
  --panel-bottom: calc(var(--hero-h) - var(--pad) - var(--text-h) - var(--gap));
  --vid-w: calc(var(--stage-w) * 1440 / 1225);
  /* Where the stage is wider than the window (narrow windows, further down) it also moves a little to
     the right: Dalma starts the trick left of centre and walks to the middle, so the middle of what is
     seen sits between the two. Nothing here: the panels are narrower than the window. */
  --shift: max(0px, calc((var(--stage-w) - 100vw) * .054));
  /* .6667 = 960 / 1440, .2313 = 333 / 1440: the panels' bottom and top as a share of the video's width */
  --vid-top: calc(var(--panel-bottom) - var(--vid-w) * .6667);
  --panel-top: calc(var(--vid-top) + var(--vid-w) * .2313);
  position: relative; height: var(--hero-h); overflow: hidden;   /* the glow is larger than the hero */
}
/* Top: the video itself runs up behind the header, the dark curtain between the panels and the hanging
   lights (.047 above the panels), and stops just under the lights. The panels are whole. Bottom: the panels'
   last rows and Dalma's feet go out softly into the label row; nothing is left where the heads begin
   (.035 below the panels). Several stops each (an eased curve): a straight ramp shows its two ends. */
.hero-photo {
  --m: linear-gradient(180deg,
    transparent calc(var(--panel-top) - var(--vid-w) * .047), rgba(0,0,0,.35) calc(var(--panel-top) - var(--vid-w) * .038), rgba(0,0,0,.8) calc(var(--panel-top) - var(--vid-w) * .028), #000 calc(var(--panel-top) - var(--vid-w) * .018),
    #000 calc(var(--panel-bottom) - var(--vid-w) * .075), rgba(0,0,0,.84) calc(var(--panel-bottom) - var(--vid-w) * .045), rgba(0,0,0,.62) calc(var(--panel-bottom) - var(--vid-w) * .02), rgba(0,0,0,.42) calc(var(--panel-bottom) + var(--vid-w) * .004), rgba(0,0,0,.22) calc(var(--panel-bottom) + var(--vid-w) * .018), rgba(0,0,0,.05) calc(var(--panel-bottom) + var(--vid-w) * .027), transparent calc(var(--panel-bottom) + var(--vid-w) * .033));
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  -webkit-mask-image: var(--m); mask-image: var(--m);
}
/* A scrim behind the text, so "La maga de las burbujas" stays readable over the loop's brightest
   moments (the bubble bursts, the white spotlights), not just over the still frame it was checked
   against. Sits between the photo/video (z 0) and the text (z 2). */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--panel-bottom) - 120px); z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(7,7,42,.5) 45%, rgba(7,7,42,.9));
}
.hero-photo > div { position: absolute; inset: 0; }
/* The stage's light on the page. A blurred, shapeless copy of the stage (made by build.js: the frame's
   band y 300–1000, x 60–1380, in the middle of a canvas of the page's blue 3960 × 1540 frame-pixels) sits
   behind the video at exactly the video's scale and place, and reaches far past it on every side. So the
   video's edges don't fade out against flat blue (that is what drew its rectangle on the page, however
   soft the fade): they fade into their own colours, which then thin out into the page over hundreds of
   pixels, with no line anywhere. 2.75 = 3960 / 1440, 1.0694 = 1540 / 1440, .0833 = (420 − 300) / 1440. */
.hero-glow {
  /* the sides and the foot are the page's blue long before the image's edges; the top is not (the glow
     runs up behind the header), and is off the top of the page */
  --m: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  position: absolute; left: calc(50% + var(--shift)); top: calc(var(--vid-top) - var(--vid-w) * .0833); width: calc(var(--vid-w) * 2.75); height: calc(var(--vid-w) * 1.0694);
  transform: translateX(-50%); z-index: 0; pointer-events: none; background-size: 100% 100%; background-repeat: no-repeat;
  -webkit-mask-image: var(--m); mask-image: var(--m);
}
/* The video's own sides: a plain, wide fade from the frame's edge strip (cut outright: the two moving
   heads stand there) to full at the panels' foot (7.5% in). What it fades into is the glow above. */
.hero-photo img, .hero-loop {
  --m: linear-gradient(90deg,
    transparent 4.1%, rgba(0,0,0,.16) 4.9%, rgba(0,0,0,.5) 5.9%, rgba(0,0,0,.84) 6.9%, #000 7.9%,
    #000 92.1%, rgba(0,0,0,.84) 93.1%, rgba(0,0,0,.5) 94.1%, rgba(0,0,0,.16) 95.1%, transparent 95.9%);
  position: absolute; left: calc(50% + var(--shift)); top: var(--vid-top); width: var(--vid-w); max-width: none; height: auto; aspect-ratio: 4 / 3;
  transform: translateX(-50%); object-fit: cover; object-position: 50% 100%;
  -webkit-mask-image: var(--m); mask-image: var(--m);
}
/* A single element (the video itself, poster = its own first frame): nothing to keep in sync, nothing
   that can show through or double up. A dark veil sits over it and clears once the video is first
   playing, a quick, deliberate "fade up" rather than a hard cut into motion; short, and never fully
   black (so the hero never looks like a blank page while it loads). */
.hero-veil { position: absolute; inset: 0; top: 0; z-index: 1; background: rgba(7,7,42,.4); opacity: 1; transition: opacity .5s ease; pointer-events: none; }
.hero.is-moving .hero-veil, .hero.is-still .hero-veil { opacity: 0; }   /* is-still: the loop isn't going to play (site.js) */
/* an iPhone that won't start a video by itself would draw its own play button over it; the hero has none */
.hero-loop::-webkit-media-controls, .hero-loop::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
/* Scrolling away pushes in: the stage grows a little and the text drifts up and fades (--hp: 0 → 1). */
.hero-photo { transform: scale(calc(1 + var(--hp, 0) * .06)); transform-origin: 50% 62%; }
/* An overlay on the video's lower part (where it's already fading out, and the scrim darkens it further),
   not flow content stacked below it: the title's own size is untouched, and it adds no height of its own. */
.hero-body { position: absolute; left: 0; right: 0; bottom: var(--pad); z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;
  transform: translateY(calc(var(--hp, 0) * -40px)); opacity: calc(1 - var(--hp, 0) * 1.1); }
/* one line: the title is 14.85× its font size wide, and --title is sized so that is exactly the column */
.hero h1 { margin: 0; font-family: var(--head); font-weight: 700; font-size: var(--title); line-height: 1; letter-spacing: -.02em; white-space: nowrap; text-shadow: 0 3px 30px rgba(7,7,42,.95), 0 1px 3px rgba(7,7,42,1); }
/* Above the title, one row the exact width of the title and of the header: the label lines up with
   "Dalma Contreras" and the title's first letter, the Got Talent logos with "Contacto" and its last. */
.hero-meta { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 auto 10px; }
.hero-kicker { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #E4E9FF; text-shadow: 0 1px 3px rgba(7,7,42,1), 0 0 14px rgba(7,7,42,1), 0 0 30px rgba(7,7,42,.9); white-space: nowrap; }
.hero-gt { display: flex; align-items: center; gap: 20px; filter: drop-shadow(0 0 10px rgba(7,7,42,1)) drop-shadow(0 1px 3px rgba(7,7,42,.9)); }
.gt-logo { height: 34px; width: auto; }

/* shows */
.shows-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.card {
  border-radius: 22px; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--tile-edge); background: var(--tile); box-shadow: inset 0 1px 0 rgba(238,240,255,.06);
}
/* the featured show: reel and text side by side (7 : 5). The reel runs edge to edge into the card's
   corners at its full 16:9, never cropped; the text is centred beside it. */
.card-feature { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.card-feature .reel { flex: 7 1 0; border-radius: 21px; overflow: hidden; } /* all four corners round, matching the card (22px minus its 1px edge) */
.card-feature .card-body { flex: 5 1 0; padding: 32px 36px; }
.card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tag { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.card h3 { font-family: var(--head); font-size: 22px; font-weight: 600; }
.card-feature h3 { font-size: 34px; }
.card p { color: var(--text-2); font-size: 15px; line-height: 1.6; }
.card .hook { color: #ffffff; font-size: 17px; }
.ideal { margin-top: auto; padding-top: 10px; color: var(--text-3); font-size: 13px; line-height: 1.6; }
.nb { white-space: nowrap; }   /* an item of a dotted list: where the list has to wrap, it wraps between items */

.reel { position: relative; background: #000; }
.reel-h { aspect-ratio: 16 / 9; }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a vertical reel in a 16:9 frame: the video centred, a blurred copy of its poster behind */
.reel-pillar { overflow: hidden; }
.reel-pillar::before { content: ''; position: absolute; inset: -40px; background: var(--poster) center / cover; filter: blur(28px) brightness(.45); }
.reel-pillar video { object-fit: contain; }
/* full screen: the whole picture, never cropped to fill the screen, on black (two rules: a browser that
   doesn't know one of the two names would otherwise drop both) */
.reel video:fullscreen { object-fit: contain; background: #000; }
.reel video:-webkit-full-screen { object-fit: contain; background: #000; }
/* A reel with a still of its own has two posters; the stylesheet shows the right one as the video's own
   background (the frame it starts on here, the still on a phone held upright, further down). */
.reel-stills video { background: var(--poster) center / cover no-repeat; }
/* the reel that is the first screen on a phone held upright: only there (further down) */
.hero-reel { display: none; }
.reel-tag { position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(7,7,42,.7); border: 1px solid var(--line-2); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #C9D2FF; }
.reel { cursor: pointer; }
.reel-ctrls { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; }
.reel-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(7,7,42,.75); color: var(--text); cursor: pointer; }
.reel-btn:hover { border-color: var(--accent); }
.reel-toggle .i-play, .reel-toggle[aria-pressed="true"] .i-pause { display: none; }
.reel-toggle[aria-pressed="true"] .i-play { display: block; }
/* paused: the play button turns white, so it reads as the thing to press */
.reel-toggle[aria-pressed="true"] { background: #ffffff; border-color: #ffffff; color: var(--btn); }
.reel-toggle[aria-pressed="true"] svg { margin-left: 2px; }
.reel-sound { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(7,7,42,.75); color: var(--text); font: 700 13px var(--body); cursor: pointer; }
.reel-sound:hover { border-color: var(--accent); }
.reel-sound .i-on, .reel-sound[aria-pressed="true"] .i-off { display: none; }
.reel-sound[aria-pressed="true"] .i-on { display: block; }

/* about */
.sec-about { padding-top: 120px; scroll-margin-top: -120px; } /* the link lands on the first line of the portrait and text */
.about { display: flex; align-items: stretch; gap: 48px; }
/* the portrait fills its column and sets the height of the block: the text beside it stretches to
   match, title level with the top of the picture and stat tiles with its bottom (the spare height
   goes above the quote). The picture (src/images/portrait.jpg) keeps some backdrop above her hair, so
   her head sits a little below the title rather than squarely level with it.
   No frame: it melts into the page through one big soft oval, plus a short fade at each edge so no
   straight line is ever left; her fingers (caught mid-gesture) fall in the fade. */
/* the picture's own edge is invisible (it fades in over its first few percent), so the box hangs 24px
   out to the left: what you actually see then starts on the page's left margin, in line with the titles */
.about-photo { flex: 0 0 calc(40% + 24px); margin-left: -24px; align-self: flex-start; }
.about-photo img {
  display: block; width: 100%; height: auto;
  --mask: radial-gradient(ellipse 64% 72% at 49% 51%, #000 50%, transparent 100%),
          linear-gradient(to right, transparent, #000 6%, #000 94%, transparent),
          linear-gradient(transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: var(--mask); mask-image: var(--mask);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.about-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding-top: 23px; } /* the spare height is shared out between the paragraphs; 23px brings the top of the title's capitals level with the top of her head */
.about-text > p:not(.summary) { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.about-text h2 + p { margin-top: 14px; }
.summary { margin: 16px 0 0; padding-left: 18px; border-left: 2px solid var(--accent); font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 24px; line-height: 1.3; color: #ffffff; }
.stats { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 14px; margin-top: 18px; }
.stat { padding: 10px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card-2); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.stat-n { font-family: var(--head); font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--accent); }
.stat-l { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.stat-gt { flex-direction: row; align-items: center; justify-content: space-around; gap: 12px; }
.logo-mask.stat-logo, .logo-mask.stat-logo:hover { height: 30px; background: var(--accent); } /* same colour as the numbers */

/* videos */
/* videos and gallery read as one block about her on stage: small labels, tight gaps */
/* every label sits 24px above its media; every label row starts 48px under the media above it */
/* one unit, without a frame: the player, its caption with the strip's arrows, and the strip of other videos */
.media-tile { margin-top: 28px; }
.player { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.player-bar { display: flex; align-items: center; gap: 16px; margin: 16px 0 0; }
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.player-start { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.player-start img { width: 100%; height: 100%; object-fit: cover; }
/* the big play button: white so it never melts into a blue stage, with a ring that pulses outwards */
.player-start::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(7,7,42,.45), rgba(7,7,42,0) 30%); pointer-events: none; }
.play-btn { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ffffff; color: var(--btn); box-shadow: 0 10px 40px rgba(7,7,42,.6); transition: transform .2s; }
.play-btn::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); animation: play-pulse 2.2s ease-out infinite; }
.play-btn svg { margin-left: 5px; }
.player-start:hover .play-btn { transform: translate(-50%, -50%) scale(1.08); }
@keyframes play-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.player-caption { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin: 0; color: var(--text-3); font-size: 14px; }
.player-caption b { font-family: var(--head); font-size: 18px; font-weight: 600; color: var(--text); }
/* the arrows hang from the label's line without making the row taller, so a label with arrows sits
   as close to its media as the plain "Vídeos" label */
.scroller-head { display: flex; align-items: center; gap: 16px; height: 18px; }
.arrows { display: flex; gap: 8px; margin-left: auto; }
.arrows button { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; }
.arrows button:hover:not(:disabled) { border-color: var(--accent); }
.arrows button:disabled { opacity: .35; cursor: default; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; margin: 16px 0 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar, .strip::-webkit-scrollbar { display: none; }
.rail-card { display: block; width: 100%; height: 100%; padding: 0 0 16px; text-align: left; border-radius: 18px; border: 1px solid var(--line); background: var(--card); color: var(--text); overflow: hidden; cursor: pointer; font-family: var(--body); }
.rail-card:hover, .rail-card.is-active { border-color: var(--accent); }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ffffff; color: var(--btn); box-shadow: 0 6px 20px rgba(7,7,42,.6); }
.thumb-play svg { margin-left: 3px; }
.rail-card b { display: block; margin: 14px 16px 0; font-size: 15px; }
.rail-card small { display: block; margin: 4px 16px 0; font-size: 13px; color: var(--text-3); }

/* photo strip: three equal, cropped tiles per view, kept inside the content column */
/* a full section gap, so arriving at the photos the video thumbnails are out of sight; 130px from the video
   strip to the "Galería" title, the same as from the photos to the "Sobre Dalma" title */
.gallery { padding-top: 130px; }
/* the gallery opens like the videos: a title (one size below the section titles) and an intro line,
   with the counter and arrows on the right, level with the intro */
.gallery-head { height: auto; align-items: flex-end; }
.gallery-head h3 { margin: 0; font-family: var(--head); font-size: 32px; font-weight: 600; line-height: 1.15; }
.gallery-head .sub { margin-top: 8px; }
.count { margin-left: auto; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.count + .arrows { margin-left: 0; }
/* scrolls continuously (touchpad, drag); the arrows move one full view */
.strip { display: flex; gap: 16px; margin: 24px 0 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.strip li { flex: 0 0 calc((100% - 32px) / 3); }
/* every tile keeps the shape the photos are cropped for (376 x 440, its size in the full-width page),
   so a narrower page has the same pictures, only smaller */
.strip button { position: relative; display: block; width: 100%; aspect-ratio: 376 / 440; padding: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--card); cursor: zoom-in; }
.strip picture { display: contents; }   /* only there to offer a touch screen the lighter copy: the photo itself fills the tile */
.strip img { width: 100%; height: 100%; object-fit: cover; }
.cap { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(7,7,42,.75); border: 1px solid var(--line-2); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #C9D2FF; }
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(4,4,24,.94); }
.lightbox img { max-width: 86vw; max-height: 84vh; border-radius: 14px; }
.lightbox button { position: fixed; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(7,7,42,.7); color: var(--text); cursor: pointer; }
.lightbox button:hover { border-color: var(--accent); }
.lb-close { top: 24px; right: 24px; }
.lb-prev, .lb-next { top: calc(50% - 26px); }
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-count { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); font-size: 13px; letter-spacing: .12em; color: var(--text-3); }

/* track record: the list grouped by venue type, countries in the last two columns */
.cv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin-top: 24px; border-top: 1px solid var(--line); }
.cv-col { padding: 18px 0 20px; border-bottom: 1px solid var(--line); min-width: 0; }
.cv-col h3 { margin: 0 0 10px; font-family: var(--head); font-size: 15px; font-weight: 600; color: var(--accent); letter-spacing: .02em; }
.cv-items { display: flex; flex-direction: column; gap: 9px; }
.cv-name { font-size: 15px; font-weight: 700; color: #ffffff; line-height: 1.35; }
.cv-detail { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.cv-brief { margin-top: 4px; font-size: 13px; line-height: 1.45; font-style: italic; color: var(--text-2); }
.cv-countries { grid-column: 1 / -1; }
.cv-countries ul { columns: 5; column-gap: 32px; }
.cv-countries li { font-size: 15px; font-weight: 700; color: #ffffff; line-height: 1.35; padding-bottom: 12px; break-inside: avoid; }

/* banner: Dalma centred, the text over the dark audience below her */
.banner { position: relative; margin-top: 120px; height: 640px; display: flex; align-items: flex-end; }
.banner-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .8;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent);
          mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent);
}
.banner::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(180deg, rgba(7,7,42,0), rgba(7,7,42,.85) 70%, var(--bg)); }
.banner-body { position: relative; z-index: 1; width: 100%; padding-bottom: 40px; text-align: center; }
.banner h2 { margin: 0 auto; font-family: var(--head); font-size: clamp(28px, 3.6vw, 48px); font-weight: 600; line-height: 1.15; text-shadow: 0 2px 20px rgba(7,7,42,.9); }
.banner p { margin: 16px auto 0; font-size: 17px; line-height: 1.6; color: #E1E4FF; max-width: 640px; text-shadow: 0 1px 12px rgba(7,7,42,1); }

/* booking: wide and compact */
.sec-book { padding-top: 90px; padding-bottom: 96px; scroll-margin-top: -90px; } /* the whole contact section, from its top line */
.book { display: flex; gap: 56px; align-items: stretch; }
.book-info { flex: 0 0 480px; display: flex; flex-direction: column; padding-bottom: 28px; }
.book-sub { margin: 12px 0 0; color: var(--text-2); line-height: 1.6; }
/* availability: dots in the same 16 px column as the checkmarks and contact icons */
/* the headline breaks before its highlighted part: "Hablemos de / tu espectáculo" */
.book-info h2 .hl { display: block; }
/* availability sits right under the intro, without a heading, a touch larger than the lists below */
.avail { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.avail li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-2); }
.avail li::before { content: ''; flex: none; width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background: var(--accent); }
.avail .avail-season { font-weight: 700; color: #ffffff; }
.avail .avail-season::before { background: #ffffff; box-shadow: 0 0 0 4px rgba(142,160,255,.35); }
.label { margin-top: 22px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.for-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin-top: 12px; }
.for-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.for-list svg { color: var(--accent); }
.contacts { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 22px; }
.contacts .label { margin: 0 0 6px; }
.contacts a { display: flex; align-items: center; gap: 10px; min-height: 34px; color: var(--text); text-decoration: none; }
.contacts a svg { color: var(--accent); }
.contacts a:hover { color: #ffffff; }
/* the text column is fixed at 480px (narrower wraps the headline onto a third line); the form takes the rest */
.form { flex: 1 1 0; min-width: 0; padding: 28px; border-radius: 24px; border: 1px solid var(--tile-edge); background: var(--tile); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(5, auto) 1fr auto; gap: 14px 16px; }
.form .agencies { margin: 6px 0 0; font-size: 13px; color: var(--text-3); }
/* beside the button: how the details are used, until the sending result takes its place */
.form-note { align-self: center; }
.form-note p { margin: 0; line-height: 1.4; }
.form-status:not(:empty) + .form-privacy { display: none; }
/* the message box takes whatever height the left column needs, so both columns end together */
.fld-msg textarea { flex: 1; }
.req { color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* the result sits beside the button, so it never changes the form's height */
.form-status { align-self: center; margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.form-status.is-ok { color: #BFF3DA; }
.form-status.is-error { color: #FFC9D2; }
.btn:disabled { opacity: .6; cursor: default; }
.full { grid-column: 1 / -1; }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; color: var(--text-3); }
/* a field is as wide as its column, never wider (a text box has a width of its own otherwise) */
.fld input, .fld select, .fld textarea { font: inherit; font-size: 15px; color: var(--text); background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 14px; min-height: 44px; width: 100%; min-width: 0; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.fld textarea { min-height: 108px; resize: vertical; }
/* the button is one field wide, so it sits on the form's grid */
.form-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-foot .btn { width: 100%; }
.form-foot p { font-size: 13px; line-height: 1.5; color: var(--text-3); }

/* date picker (flatpickr) in the site's colours */
.flatpickr-calendar { background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.8); font-family: var(--body); }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--line-2); }
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { border-top-color: var(--line-2); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { color: var(--text); fill: var(--text); background: transparent; font-weight: 600; }
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: var(--card); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--text-2); fill: var(--text-2); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--accent); }
span.flatpickr-weekday { color: var(--text-3); background: transparent; }
.flatpickr-day { color: var(--text); border-radius: 10px; }
.flatpickr-day:hover, .flatpickr-day:focus { background: rgba(142,160,255,.16); border-color: transparent; }
.flatpickr-day.today { border-color: var(--accent); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: rgba(201,205,240,.25); }
.flatpickr-day.inRange { background: rgba(61,85,240,.28); border-color: transparent; box-shadow: -5px 0 0 rgba(61,85,240,.28), 5px 0 0 rgba(61,85,240,.28); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: var(--btn); border-color: var(--btn); color: #ffffff; }

/* logo strip */
.trust { border-top: 1px solid var(--line-soft); padding: 56px 0 60px; background: var(--band); }
.trust h2 { margin: 0 auto; text-align: center; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
/* Everything in the strip is sized in em of this font size (logo heights and the lettering from page.js,
   the gaps here: 4.5em = 72px), so a smaller screen shrinks the whole strip by changing one number. */
.marquee { margin-top: 32px; overflow: hidden; font-size: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 50s linear infinite; }
/* pausing under the pointer is for a mouse: on a touch screen "hover" sticks after a tap */
@media (hover: hover) { .marquee:hover .marquee-track { animation-play-state: paused; } }
.marquee-track > div { display: flex; align-items: center; gap: 4.5em; padding-right: 4.5em; }
.logo-item { color: var(--logo); white-space: nowrap; line-height: 1.2; transition: color .2s; }
.logo-item:hover { color: #ffffff; }
/* official logos in the strip's colour: the logo file is the mask, the colour is the background */
.logo-mask { display: block; flex: none; background: var(--logo); transition: background .2s; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.logo-mask:hover { background: #ffffff; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* footer */
.ftr { border-top: 1px solid var(--line-soft); }
.ftr-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; padding-bottom: 24px; color: var(--text-3); font-size: 14px; }
.ftr-text { display: flex; flex-direction: column; gap: 4px; }
.ftr-legal { font-size: 13px; }
.ftr-legal a, .form-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ftr-legal a:hover, .form-privacy a:hover { color: #ffffff; }
.socials { display: flex; gap: 10px; }

/* plain text pages: legal notice, privacy and cookies; "not found" */
.plain { min-height: 100vh; display: flex; flex-direction: column; }
.plain-hdr { border-bottom: 1px solid var(--line-soft); }
.plain-hdr .hdr-in { height: 72px; }
.plain-body { flex: 1; max-width: 820px; padding-top: 56px; padding-bottom: 96px; color: var(--text-2); font-size: 16px; line-height: 1.7; }
.plain-body h1 { margin: 0 0 8px; font-family: var(--head); font-size: clamp(26px, 4vw, 40px); font-weight: 600; line-height: 1.2; color: var(--text); }
.plain-body h2 { margin: 64px 0 0; padding-top: 24px; border-top: 1px solid var(--line-soft); font-family: var(--head); font-size: 24px; font-weight: 600; color: var(--text); scroll-margin-top: 16px; }
.plain-body h3 { margin: 32px 0 0; font-size: 17px; font-weight: 700; color: var(--text); }
.plain-body p, .plain-body ul { margin: 12px 0 0; }
.plain-body ul { padding-left: 20px; }
.plain-body li + li { margin-top: 6px; }
.plain-body a { color: var(--accent); text-underline-offset: 3px; }
.plain-body strong { color: var(--text); font-weight: 700; }
.plain-body mark { background: #FFC9D2; color: #07072a; padding: 0 4px; border-radius: 4px; }
@media (max-width: 600px) { .plain-hdr .hdr-in { height: 60px; } .plain-hdr .btn-hdr { display: none; } .plain-body { padding-top: 36px; padding-bottom: 64px; } }
.socials a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card-2); color: var(--accent); }
.socials a:hover { border-color: var(--accent); color: #ffffff; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee-track, .play-btn::before { animation: none; } .hdr, .hdr::before, .hdr::after, .hero-veil { transition: none; } }

/* ================= Narrower windows =================
   One design at every width. Everything above is the page on a computer; each block below takes over at
   the width where something stops fitting, and changes only what has to change there:
     1100px  the contact section stacks; the hero's stage may run past the window's sides
     1000px  the header's links become a menu
      900px  tablet: the Bubble Show card stacks, the lists go to two columns
      600px  phone: one column, upright reels, a hero of its own
   In between, sizes follow the window (the side margin, the hero, the titles, the photo tiles), so
   dragging a window narrower re-arranges the page without anything falling out of it. */

@media (max-width: 1100px) {
  /* Hero. In a window that is narrow for its height, the whole stage fitted to the width would be a
     small strip in the middle of a tall page. So from here down the stage may be wider than the window,
     its panels running off both sides, as far as the height has room for (the first term, as above).
     How wide it may get is the largest of:
     - the rule above (the whole stage inside the window): still what a wide, low window gets;
     - 666px + 34.4vw at the panels' foot: 1044px at 1100px wide, the same as the rule above there, so
       nothing jumps; 800px on a phone, where it is twice the screen and Dalma is the picture;
     - in a tall window (an upright tablet), two thirds of the height there is, but no more than
       1461px - 37.9vw (again 1044px at 1100px wide; 1150px on an 820px tablet).
     The hero is also no taller than 1.273x its width (1400px at 1100px wide, the limit above): on an
     upright tablet it ends a little before the screen does, and "Shows" shows under it. */
  .hero {
    --hero-h: clamp(620px, 100svh, min(1400px, 127.3vw));
    --stage-w: min(calc(var(--room) / .5118), max(min(100vw - 56px, calc(var(--content) * 1.3)), calc(666px + 34.4vw), min(calc(var(--room) / .5118 * .66), calc(1461px - 37.9vw))));
  }
  /* Where it runs off, it dissolves into the page over the window's last pixels instead of being cut by
     the window's edge: the picture still has no edge. */
  .hero-photo {
    --e: linear-gradient(90deg, transparent, #000 var(--edge, 28px), #000 calc(100% - var(--edge, 28px)), transparent);
    -webkit-mask-image: var(--m), var(--e); mask-image: var(--m), var(--e);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }

  /* Contact: the 480px text column and the form no longer fit side by side. The text goes above in two
     columns of its own (headline and availability | who we work with and the contacts), the form below
     at full width. */
  .book { flex-direction: column; gap: 36px; }
  .book-info { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; padding-bottom: 0; }
  .book-info > :nth-child(1) { grid-area: 1 / 1; }
  .book-info > .avail { grid-area: 2 / 1; }
  .book-info > :nth-child(3) { grid-area: 1 / 2; }
  .book-info > :nth-child(3) .label { margin-top: 0; }
  .book-info > .contacts { grid-area: 2 / 2; margin-top: 0; padding-top: 20px; }
  .form { flex: none; }
}

@media (max-width: 1000px) {
  /* Header: the five links no longer fit between the wordmark and the buttons, so they move into a
     full-screen menu, opened by a round button at the right end of the bar (two lines that cross into
     an X). The wordmark, the language switch and "Contacto" stay in the bar, above the menu. */
  .hdr-in { justify-content: flex-start; gap: 10px; }
  .hdr-right { margin-left: auto; }
  .menu-btn {
    order: 3; display: flex; align-items: center; justify-content: center; flex: none;
    width: 42px; height: 42px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(228,233,255,.42); background: rgba(7,7,42,.38); color: #E4E9FF;
  }
  .menu-btn:hover { color: #ffffff; border-color: rgba(228,233,255,.7); }
  .menu-btn span { position: relative; display: block; width: 18px; height: 14px; }
  .menu-btn span::before, .menu-btn span::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease, top .25s ease; }
  .menu-btn span::before { top: 3px; }
  .menu-btn span::after { top: 9px; }
  .menu-open .menu-btn span::before { top: 6px; transform: rotate(45deg); }
  .menu-open .menu-btn span::after { top: 6px; transform: rotate(-45deg); }
  /* The menu covers the window, under the bar's own row (it is painted behind the wordmark and the
     buttons, which stay where they are). Closed, it is not there at all: hidden, so its links can't be
     reached by keyboard either. */
  .navlinks {
    position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; gap: 0;
    padding: 100px var(--gutter) 40px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg);   /* plain: the page's own colour, nothing showing through and no lines between the links */
    visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .menu-open .navlinks { visibility: visible; opacity: 1; transition: opacity .25s ease; }
  .navlinks a:not(.nav-cta) {
    display: flex; align-items: center; min-height: 62px; padding: 8px 0;
    font: 600 clamp(22px, 6.2vw, 30px) / 1.2 var(--head); letter-spacing: 0; color: var(--text); text-shadow: none;
  }
  .navlinks a[aria-current]:not(.nav-cta) { color: var(--accent); }
  /* the links arrive one after the other */
  .navlinks a { opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease; }
  .menu-open .navlinks a { opacity: 1; transform: none; }
  .menu-open .navlinks a:nth-child(1) { transition-delay: .05s; }
  .menu-open .navlinks a:nth-child(2) { transition-delay: .09s; }
  .menu-open .navlinks a:nth-child(3) { transition-delay: .13s; }
  .menu-open .navlinks a:nth-child(4) { transition-delay: .17s; }
  .menu-open .navlinks a:nth-child(5) { transition-delay: .21s; }
  .menu-open .navlinks a:nth-child(6) { transition-delay: .25s; }
  /* open, the bar is part of the menu: no band of its own, and the page behind doesn't scroll */
  .menu-open .hdr::before, .menu-open .hdr::after { opacity: 0; }
  html.menu-open, html.menu-open body { overflow: hidden; }
}

@media (max-width: 900px) {
  .sec { --top: 96px; }
  .sec-shows { --top: 40px; }
  .sec-videos { --top: 72px; }
  .sec-traj { --top: 80px; }
  .sec-about { padding-top: 96px; scroll-margin-top: -96px; }
  .gallery { padding-top: 96px; }
  .banner { margin-top: 96px; }

  /* Shows: beside a reel this narrow the text would be a thin column, so the Bubble Show card stacks,
     its reel across the whole card, like the two cards below it. */
  .card-feature { flex-direction: column; align-items: stretch; }
  .card-feature .reel { flex: none; }
  .card-feature .card-body { flex: none; padding: 26px 28px 30px; }
  .card-feature h3 { font-size: 30px; }

  /* three video thumbnails and two photos per view */
  .rail { grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; }
  .strip li { flex-basis: calc((100% - 16px) / 2); }

  .about { gap: 32px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat-gt { grid-column: 1 / -1; min-height: 58px; }

  .cv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-countries ul { columns: 4; }

  /* Contact: two columns of text are too narrow for the headline now, so it is one column: the
     checklist takes as many columns as fit, and email and WhatsApp become two buttons side by side
     (on a phone or a tablet they are the quickest way to get in touch). */
  .book-info { display: flex; flex-direction: column; align-items: stretch; }
  .book-info > :nth-child(3) .label { margin-top: 26px; }
  .for-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .book-info > .contacts { flex-direction: row; flex-wrap: wrap; gap: 12px; padding-top: 26px; }
  .contacts .label { flex: 0 0 100%; margin-bottom: 0; line-height: 1.5; }
  .contacts a { flex: 1 1 240px; min-height: 54px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card-2); font-size: 15px; }
  .contacts a:hover { border-color: var(--accent); }
}

/* two show cards side by side on a narrow tablet: the sound button keeps its icon and drops its words
   (still read out by a screen reader), so the three buttons fit on the reel */
@media (min-width: 601px) and (max-width: 760px) {
  .card .reel-sound { width: 40px; padding: 0; justify-content: center; }
  .card .reel-sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 600px) {
  /* ---- header: a slimmer bar; "Contacto" moves into the menu, as its last, blue line ---- */
  .hdr-in { height: 60px; gap: 8px; }
  .logo { font-size: 23px; top: -2px; }
  .btn-hdr { display: none; }
  .lang { padding: 2px; }
  .lang a { min-width: 32px; height: 30px; font-size: 11px; }
  .menu-btn { width: 40px; height: 40px; }
  .navlinks { padding-top: 84px; }
  .navlinks .nav-cta { display: flex; flex: none; width: 100%; height: 56px; margin-top: 28px; font: 700 16px var(--body); color: #ffffff; text-shadow: none; }

  /* ---- hero: the whole stage across the screen, and under it, stacked and centred: the small label,
     the title on two lines as wide as the screen ("las burbujas" is 7.52x its font size wide), and the
     Got Talent logos. Nothing overlaps the stage: on a phone its middle is where she stands. ---- */
  .hero {
    /* The whole stage, from panel to panel, exactly as wide as the screen (11 Nov 2026: filling the
       screen's height with a cropped stage left it looking empty). The hero is then only as tall as the
       stage and the text under it, not the whole screen: "Shows" and the top of the Bubble Show reel
       are already on the first screen, so there is no empty band and it is plain there is more below. */
    --stage-w: 100vw;
    --hero-h: calc(var(--stage-top) + var(--stage-w) * .5118 + var(--gap) + var(--text-h) + var(--foot));
    --title: min(calc(var(--content) / 7.56), 64px);
    --text-h: calc(var(--title) * 2.04 + 68px);   /* label 16 + 12, two title lines, 16 + logos 24 */
    --stage-top: 66px;
    --gap: 10px;
    --foot: 24px;
    --edge: 10px;
  }
  .hero-meta { display: contents; }               /* the label and the logos become rows of the stack */
  .hero-kicker { order: 1; margin-bottom: 12px; font-size: clamp(10px, 3.1vw, 12px); line-height: 16px; letter-spacing: .18em; }
  .hero h1 { order: 2; white-space: normal; line-height: 1.02; }
  .hero h1 .hl { display: block; }
  .hero-gt { order: 3; margin-top: 16px; gap: 18px; }
  .gt-logo { height: 24px; }

  /* ---- type and rhythm ---- */
  .sec { --top: 72px; }
  .sec-shows { --top: 36px; }
  .sec-videos { --top: 64px; }
  .sec-traj { --top: 64px; }
  .kicker { font-size: 12px; }
  .sec > h2, .about-text h2, .book-info h2 { font-size: clamp(26px, 8vw, 32px); line-height: 1.15; }

  /* ---- shows: one card per row ---- */
  .shows-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
  .card { border-radius: 20px; }
  .card-feature .reel { border-radius: 19px; }
  .card-body, .card-feature .card-body { padding: 20px 20px 24px; }
  .card-feature h3 { font-size: 26px; }
  .card h3 { font-size: 21px; }
  .card .hook { font-size: 16px; }
  /* The family reel, upright by nature, gets a 4:5 frame instead of the 16:9 one. */
  .reel-pillar { aspect-ratio: 4 / 5; }
  .reel-tag { left: 12px; top: 12px; }
  .reel-ctrls { left: 12px; bottom: 12px; }

  /* ---- videos: the player, then its list as a row to swipe (it runs to the screen's edges and each
     card stops at the margin) ---- */
  .media-tile { margin-top: 22px; }
  .player { border-radius: 16px; }
  .play-btn { width: 68px; height: 68px; }
  .play-btn svg { width: 24px; height: 24px; margin-left: 4px; }
  .player-bar { margin-top: 14px; }
  .player-bar .arrows, .gallery-head .arrows { display: none; }   /* a finger does it */
  .player-caption { gap: 2px 12px; font-size: 13px; }
  .player-caption b { font-size: 16px; }
  .rail, .strip { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); scroll-snap-type: x mandatory; }
  .rail > li, .strip > li { scroll-snap-align: start; }
  .rail { grid-auto-columns: 62%; gap: 12px; margin-top: 16px; }
  .rail-card { border-radius: 14px; padding-bottom: 14px; }
  .rail-card b { margin: 12px 12px 0; font-size: 14px; }
  .rail-card small { margin: 4px 12px 0; font-size: 12px; }
  .thumb-play { width: 38px; height: 38px; }
  .thumb-play svg { width: 15px; height: 15px; margin-left: 2px; }

  /* ---- gallery: one photo per view, the next one showing at the edge ---- */
  .gallery { padding-top: 72px; }
  .gallery-head h3 { font-size: 26px; }
  .gallery-head .sub { font-size: 15px; }
  .count { padding-bottom: 2px; font-size: 12px; white-space: nowrap; }
  .strip { gap: 12px; margin-top: 20px; }
  .strip li { flex-basis: 78%; }
  .strip button { border-radius: 16px; }
  .lightbox img { max-width: 100vw; max-height: 74vh; border-radius: 0; }
  .lightbox button { width: 46px; height: 46px; }
  .lb-close { top: 14px; right: 14px; }
  .lb-prev, .lb-next { top: auto; bottom: 20px; }
  .lb-prev { left: 20px; }
  .lb-next { right: 20px; }
  .lb-count { bottom: 34px; }

  /* ---- about: the title, the portrait, then the text ---- */
  .sec-about { padding-top: 64px; scroll-margin-top: -64px; }
  .about { flex-direction: column; align-items: stretch; gap: 0; }
  .about-photo { flex: none; align-self: center; width: min(100% + 16px, 440px); margin: 0 -8px; }
  /* the title comes first, above the portrait (under it, the picture read as belonging to the gallery);
     the text block's children become rows of the same stack so the title can be moved up */
  .about-text { display: contents; }
  .about-text h2 { order: -1; margin: 0 0 12px; }
  .about-photo + .about-text > h2 + p { margin-top: 8px; }
  .about-text > p:not(.summary) { margin-top: 14px; }
  .summary { margin-top: 22px; font-size: 22px; }
  .stats { gap: 12px; margin-top: 24px; }
  .stat { padding: 12px 16px; }
  .stat-n { font-size: 30px; }

  /* ---- track record: one list; the countries in two columns ---- */
  .cv { grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
  .cv-countries { grid-column: auto; }
  .cv-countries ul { columns: 2; column-gap: 20px; }
  .cv-countries li { padding-bottom: 10px; }

  /* ---- banner: as tall as its text needs, the photo behind it ---- */
  .banner { margin-top: 72px; height: auto; min-height: 520px; padding-top: 300px; }
  .banner::after { height: 68%; }
  .banner-body { padding-bottom: 12px; }
  .banner h2 { font-size: clamp(24px, 7.4vw, 30px); }
  .banner p { margin-top: 12px; font-size: 15.5px; }

  /* ---- contact: email and WhatsApp one under the other, then the form in one column ---- */
  .sec-book { padding-top: 56px; padding-bottom: 72px; scroll-margin-top: -56px; }
  .book { gap: 32px; }
  .for-list { grid-template-columns: 1fr 1fr; }
  .book-info > .contacts { gap: 10px; }
  .contacts .label { margin-bottom: 4px; }
  .contacts a { flex: 1 1 100%; }
  .form { padding: 20px; border-radius: 20px; gap: 14px 12px; grid-template-rows: none; }
  .form .fld { grid-column: 1 / -1; }
  .form .fld-half { grid-column: auto; }           /* "from" and "to" stay side by side */
  .fld input, .fld select, .fld textarea { font-size: 16px; }   /* under 16px an iPhone zooms the page in on every tap */
  .fld input, .fld select { height: 48px; padding-top: 0; padding-bottom: 0; }   /* one height for text boxes and lists, easy to hit */
  .fld textarea { min-height: 132px; }
  .form-foot { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .form-foot .btn { height: 56px; }
  .form-status:empty { display: none; }

  /* ---- logo strip and footer ---- */
  .trust { padding: 40px 0 44px; }
  .marquee { margin-top: 24px; font-size: 11.5px; }
  .ftr-in { flex-direction: column-reverse; justify-content: center; gap: 16px; padding-top: 28px; padding-bottom: 32px; text-align: center; font-size: 13px; }
}

/* ================= Held upright =================
   A window up to 1100px wide that is taller than wide: a phone or a tablet held upright, or a tall narrow
   window on a computer (page.js and site.js use the same condition). The stage loop was made for a wide
   screen; upright it was either cropped or a strip with empty bands around it, and it moved at the same
   time as the showreel right under it. So here it is not shown (nor downloaded) at all: the page opens
   on the Bubble Show reel in its portrait cut, the only thing that moves.
   - On a tablet the page starts with the title and goes straight on to "Shows", where the Bubble Show
     reel (the wide one) plays in its card.
   - On a phone (further down) the reel's portrait cut is the first screen, as silent scenery, and the
     card's wide reel waits to be played like the other two. */
@media (max-width: 1100px) and (orientation: portrait) {
  .hero { height: auto; overflow: visible; background: radial-gradient(110% 150% at 50% -30%, rgba(61,85,240,.34), rgba(61,85,240,0) 70%); }
  .hero-glow, .hero-photo, .hero-veil, .hero::after { display: none; }
  .hero-body { position: static; padding-top: 112px; transform: none; opacity: 1; }
  .sec-shows { --top: 52px; }
}

@media (max-width: 600px) and (orientation: portrait) {
  /* The first screen is the reel and nothing else: the hero is exactly one screen tall, so "Shows" starts
     on the next one. The reel runs edge to edge from the very top, behind the bar, in its own 9:16 (cut
     a little at top and foot on a screen that is shorter than that), with no buttons, like the stage
     loop on a computer, and melts into the page at its foot. The only words on it are the wordmark in
     the bar and "La maga de las burbujas", on one line the width of the screen: over the picture's foot
     where the picture fills the screen, in the middle of the band under it where the screen is taller
     than the picture. No label and no Got Talent logos: the reel shows them itself. */
  .hero { background: none; }
  .hero-reel { display: block; height: 100vh; height: 100svh; min-height: 480px; background: none; cursor: default; }
  .hero-reel video {
    /* up to 6% taller than its own 9:16 (3% cut from each side, inside the margin its lettering keeps):
       on a tall screen that is less band left under it */
    bottom: auto; height: min(100%, 188.4vw);
    object-fit: cover; object-position: 50% 15%; background: var(--poster) 50% 15% / cover no-repeat;
    -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent);
  }
  .hero-reel::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none; background: linear-gradient(180deg, rgba(7,7,42,0), rgba(7,7,42,.7) 60%, var(--bg)); }
  .hero-body { position: absolute; left: 0; right: 0; z-index: 2; padding-top: 0; pointer-events: none;
    bottom: 30px; bottom: max(30px, calc((100svh - 188.4vw - var(--content) / 14.85) / 2)); }
  .hero-meta { display: none; }
  .hero h1 { font-size: calc(var(--content) / 14.85); line-height: 1; white-space: nowrap; }
  .hero h1 .hl { display: inline; }
  .sec-shows { --top: 40px; }
  /* under "Shows" the Bubble Show's wide reel waits to be played, like the two after it; its poster is
     the giant arc of soap (build.js -> still) */
  .reel-stills video { background-image: var(--poster-still); }

/* A phone taller than twice its width (most Android phones; any phone in a browser without its bars): the
   picture can't reach the bottom of the screen, and one small line of title left the band under it looking
   empty. There the title is the big two-line one, as wide as the screen, standing right under the picture
   (over its last rows), and the picture only fades at its very foot. */
@media (max-width: 600px) and (orientation: portrait) and (max-aspect-ratio: 1/2) {
  .hero-reel video { -webkit-mask-image: linear-gradient(#000 87%, transparent); mask-image: linear-gradient(#000 87%, transparent); }
  .hero-reel::after { height: 24%; }
  .hero h1 { font-size: min(calc(var(--content) / 7.56), 64px); line-height: 1.02; white-space: normal; }
  .hero h1 .hl { display: block; }
  .hero-body { bottom: 28px; bottom: max(28px, calc((100svh - 188.4vw - var(--content) / 7.56 * 2.04) / 2)); }
}
}
}

/* a very narrow phone: the bar's three things still fit in one row */
@media (max-width: 359px) {
  .logo { font-size: 20px; }
  .lang a { min-width: 28px; }
  .hdr-in { gap: 6px; }
  .for-list { grid-template-columns: 1fr; }
  .form { padding: 16px; }
  .form .fld-half input { padding-left: 10px; padding-right: 10px; }   /* room for a whole date */
  .form .fld-half input::placeholder { font-size: 13px; }               /* and for the whole hint ("DD.MM.AAAA") */
}

@media (prefers-reduced-motion: reduce) { .navlinks, .navlinks a, .menu-btn span::before, .menu-btn span::after { transition: none; } }

/* Phones from before 2022 don't know the "svh" unit the hero's height is given in (the window's height
   with the browser's bars showing): without this the hero would have no height at all there. They get
   the plain window height, the same three rules as above. */
@supports not (height: 100svh) {
  .hero { --hero-h: clamp(620px, 100vh, 1400px); }
  @media (max-width: 1100px) { .hero { --hero-h: clamp(620px, 100vh, min(1400px, 127.3vw)); } }
}