/* AiosaPhoto — claro, aireado, liquid glass.
   Movimiento según Emil Kowalski: solo transform/opacity, ease-out fuerte, < 300 ms en UI. */

/* Tipografías alojadas en la propia web (sin Google Fonts: no se envía la IP de nadie a Google) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/inter-tight-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --placeholder: #e8e8ed;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --line: rgba(0, 0, 0, 0.08);

  /* Chino: Inter no tiene esos caracteres, así que se usan las fuentes del sistema (PingFang, YaHei, Noto) */
  --font-display: "Inter Tight", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;

  --radius: 28px;
  --radius-sm: 18px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1280px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* Entrada larga y suave para contenido al hacer scroll */
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);

  /* Cristal */
  --glass-bg: rgba(255, 255, 255, 0.16);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.12);
  --glass-blur: blur(16px) saturate(165%);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; border-radius: 8px; }
section[id], [id="contacto"] { scroll-margin-top: 96px; }

.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.muted { color: var(--ink-2); }
.hidden { display: none; }

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 8px 14px; border-radius: 99px; background: var(--ink); color: #fff;
  transform: translateY(-150%);
}
.skip:focus { transform: none; }

/* ───────── Tipografía ───────── */
.display, .h2, .hero__title, .statement, .about__big, .nav__logo, .svc__title, .gallery__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.display { font-size: clamp(56px, 10vw, 136px); margin: 0; }
.h2 { font-size: clamp(40px, 6vw, 80px); margin: 0; }
.lead { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 34ch; }
.eyebrow { margin: 0 0 16px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; }
.eyebrow--light { color: rgba(255, 255, 255, 0.85); }

.section-head {
  display: flex; align-items: end; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
  margin-bottom: clamp(14px, 2.2vw, 24px);
}
.section-head--light { color: #fff; }
.section-head--light .lead { color: rgba(255, 255, 255, 0.8); }

/* ───────── Liquid glass ───────── */
.glass {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  isolation: isolate;
}
/* Brillo especular: un borde de luz más intenso arriba-izquierda, como en la referencia de Apple */
.glass::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}
/* Variante legible sobre fondo claro: más opaca */
.glass--solid { --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.9); }

/* Alternativa limpia sin backdrop-filter */

/* Usuarios que piden menos transparencia */


/* ───────── Botones ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px;
  border-radius: 999px;
  font-family: var(--font-text); font-weight: 500; font-size: 16px; line-height: 1;
  white-space: nowrap;
  transition: transform 240ms var(--ease-out), background-color 240ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn--dark { background: var(--ink); color: var(--bg); }
.btn--light { background: #fff; color: #1d1d1f; } /* fijo: sobre blanco siempre texto oscuro, también en modo oscuro */
.btn--glass { color: #fff; }
.btn--sm { height: 40px; padding: 0 18px; font-size: 15px; }
.btn--block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: scale(1.04); }
  .btn:active { transform: scale(0.97); }
  .btn--dark:hover { background: #000; }
  .btn--light:hover { background: #f0f0f2; }
  .btn--glass:hover { --glass-bg: rgba(255, 255, 255, 0.26); }
}

.icon-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  transition: transform 240ms var(--ease-out), background-color 240ms ease;
}
.icon-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { transform: scale(1.08); }
  .icon-btn:active { transform: scale(0.94); }
}
.icon-btn svg, .card__bubble svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ───────── Navegación ───────── */
.nav {
  position: fixed; z-index: 50;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  translate: -50% 0;
  width: min(100% - 24px, 760px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 6px 6px 22px;
  border-radius: 999px;
  color: #fff;
  transition: color 320ms ease, background-color 320ms ease;
}
/* Sobre fondo claro el texto pasa a oscuro y el cristal gana opacidad */
.nav.is-solid { --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(255, 255, 255, 0.85); color: var(--ink); }
.nav__logo { display: flex; align-items: center; }
.nav__logo img {
  height: 19px; width: auto;
  filter: brightness(0) invert(1);
  transition: filter 320ms ease, transform 240ms var(--ease-out);
}
.nav.is-solid .nav__logo img { filter: brightness(0); }
@media (hover: hover) and (pointer: fine) { .nav__logo:hover img { transform: scale(1.04); } }
.footer__brand { display: inline-flex; align-items: center; gap: 10px; }
.footer__logo { height: 14px; width: auto; filter: brightness(0); opacity: 0.75; }
.nav__links { display: flex; gap: 28px; font-size: 15px; font-weight: 400; }
.nav__links a { opacity: 0.85; transition: opacity 200ms ease; }
.nav__links a:hover { opacity: 1; }
.nav__cta { height: 40px; padding: 0 18px; font-size: 15px; }
@media (max-width: 720px) {
  .nav__links { display: none; }
}

/* ───────── Portada ───────── */
.hero {
  position: relative;
  height: min(100svh, 940px); min-height: 560px;
  padding: 12px;
}
.hero__media, .hero__media img {
  width: 100%; height: 100%;
}
.hero__media img {
  object-fit: cover; object-position: 22% 20%;   /* en horizontal se ve el cielo dorado de arriba */
  transform-origin: 50% 0;
  border-radius: var(--radius);
}
@media (max-aspect-ratio: 1/1) {
  .hero__media img { object-position: 50% 62%; }
}
.hero::after {
  content: ""; position: absolute; inset: 12px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.hero__content {
  position: absolute; z-index: 1;
  left: calc(12px + var(--gutter)); right: calc(12px + var(--gutter));
  bottom: calc(12px + clamp(28px, 6vw, 72px));
  color: #fff;
}
.hero__title { font-size: clamp(40px, 6vw, 92px); margin: 0 0 22px; }  /* más contenido: tapa menos el frasco */
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Entrada de portada: una sola vez, al cargar */
.js .hero__media img { animation: hero-in 900ms var(--ease-out) both; }
.js .hero__content > * { animation: rise-in 600ms var(--ease-out) both; }
.js .hero__content > :nth-child(2) { animation-delay: 80ms; }
.js .hero__content > :nth-child(3) { animation-delay: 160ms; }
@keyframes hero-in { from { opacity: 0; transform: scale(1.03); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } }

/* ───────── Intro ───────── */
.intro { padding-block: clamp(64px, 10vw, 128px) clamp(48px, 7vw, 88px); }
.statement { margin: 0; font-size: clamp(30px, 4.4vw, 56px); max-width: 22ch; }
.statement .muted { display: block; margin-top: 0.3em; }

/* ───────── Trabajo ───────── */
.work { padding-bottom: clamp(64px, 9vw, 120px); }
.work__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.work__col { padding: 20px 20px 0; border-left: 1px solid var(--line); }
.work__col:first-child { border-left: 0; padding-left: 0; }
.work__col:last-child { padding-right: 0; }
.work__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 16px; font-weight: 500; font-size: 16px;
}
.work__meta .muted { font-weight: 300; font-size: 14px; }

.card {
  position: relative; display: block; width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--placeholder);
  transition: transform 280ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.card:active { transform: scale(0.98); }
.card picture, .card img { width: 100%; height: 100%; }
.card img { object-fit: cover; transition: transform 800ms var(--ease-reveal); }
.card__bubble {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border-radius: 999px;
  color: #fff; font-size: 14px; font-weight: 500;
  transform-origin: left bottom;
  transition: transform 320ms var(--ease-out), background-color 300ms ease;
}
.card__bubble svg { transition: transform 320ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .card:hover img { transform: scale(1.03); }
  .card:hover .card__bubble { transform: scale(1.06); --glass-bg: rgba(255, 255, 255, 0.26); }
  .card:hover .card__bubble svg { transform: translateX(2px); }
}

@media (max-width: 1023px) {
  .work__grid { grid-template-columns: repeat(2, 1fr); border-top: 0; gap: 32px 0; }
  .work__col { border-top: 1px solid var(--line); }
  .work__col:nth-child(odd) { border-left: 0; padding-left: 0; padding-right: 10px; }
  .work__col:nth-child(even) { padding-left: 10px; padding-right: 0; }
}
@media (max-width: 480px) {
  .work__meta { flex-direction: column; gap: 0; font-size: 15px; }
  .card__bubble { left: 8px; bottom: 8px; height: 34px; padding: 0 12px; font-size: 13px; }
}

/* ───────── Servicios ───────── */
.services {
  position: relative;
  margin-inline: 12px;
  border-radius: var(--radius);
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 112px);
  color: #fff;
}
.services__bg { position: absolute; inset: 0; }
.services__bg img { width: 100%; height: 100%; object-fit: cover; }
.services::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10, 10, 30, 0.35), rgba(10, 10, 30, 0.15));
}
.services__inner { position: relative; z-index: 2; }
.services__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  align-items: start;
}
@media (max-width: 720px) { .services__grid { grid-template-columns: 1fr; } }

.svc {
  border-radius: var(--radius-sm);
  transition: transform 320ms var(--ease-out), background-color 300ms ease;
}
.svc__head {
  width: 100%;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px;
  padding: 20px 22px;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.svc__title { font-size: clamp(24px, 2.6vw, 32px); }
.svc__price { grid-column: 1; font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, 0.85); }
.svc__toggle {
  grid-column: 2; grid-row: 1 / span 2;
  position: relative; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: transform 360ms var(--ease-drawer);
}
.svc__toggle::before, .svc__toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 1.6px; margin: -0.8px 0 0 -6px;
  background: currentColor; border-radius: 2px;
}
.svc__toggle::after { transform: rotate(90deg); }
.svc.is-open .svc__toggle { transform: rotate(45deg); }

/* Desplegable: grid-rows 0fr → 1fr (altura automática sin medir con JS) */
.svc__body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-drawer);
}
.svc.is-open .svc__body { grid-template-rows: 1fr; }
.svc__inner {
  overflow: hidden; min-height: 0;
  padding: 0 24px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  opacity: 0;
  transition: opacity 260ms ease, padding-bottom 420ms var(--ease-drawer);
}
.svc.is-open .svc__inner { opacity: 1; padding-bottom: 24px; transition-delay: 60ms, 0ms; }
.svc__inner p { margin: 0 0 12px; }
.svc__inner ul { margin: 0 0 20px; padding-left: 18px; }
.svc__inner li { margin: 2px 0; }

@media (hover: hover) and (pointer: fine) {
  .svc:hover { transform: scale(1.02); --glass-bg: rgba(255, 255, 255, 0.22); }
}
.svc:has(.svc__head:active) { transform: scale(0.99); }

/* ───────── Sobre mí ───────── */
.about {
  padding-block: clamp(64px, 9vw, 120px) clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: 5fr 7fr; gap: 40px clamp(32px, 6vw, 96px);
  align-items: center;
}
.about__photo { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; }
.about__photo picture, .about__photo img { width: 100%; }
.about__photo img { aspect-ratio: 4 / 5; object-fit: cover; }
.about__tag {
  position: absolute; left: 14px; bottom: 14px;
  display: grid; gap: 0; padding: 12px 18px;
  border-radius: 18px; color: #fff; font-size: 14px; line-height: 1.35;
}
.about__tag strong { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.02em; }
.about__text .h2 { margin-bottom: 10px; }
.about__big { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.15; margin: 0 0 20px; }
.about__text p:not(.about__big) { color: var(--ink-2); margin: 0 0 14px; max-width: 58ch; }
.facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px;
  margin: 20px 0 0;
}
.facts div { padding: 14px 0; border-top: 1px solid var(--line); }
.facts dt { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.facts dd { margin: 2px 0 0; font-size: 16px; font-weight: 400; }
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; }
  .about__photo { max-width: 460px; order: 2; }
}
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }

.band { margin-block: 0 clamp(48px, 6vw, 88px); }
.band picture, .band img { width: 100%; }
.band img { aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 720px) { .band img { aspect-ratio: 4 / 3; } }

/* ───────── Contacto ───────── */
.contact {
  display: grid; grid-template-columns: 1fr minmax(320px, 460px); gap: 48px clamp(32px, 6vw, 96px);
  align-items: start;
  padding-bottom: clamp(56px, 8vw, 104px);
}
.contact .display { margin-bottom: 10px; }
.contact__person { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; font-size: 15px; line-height: 1.35; }
.avatar {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--surface), 0 6px 20px rgba(0, 0, 0, 0.12);
}
.contact__links { list-style: none; margin: 28px 0 0; padding: 0; font-size: 18px; font-weight: 400; }
.contact__links li { border-top: 1px solid var(--line); }
.contact__links li:last-child { border-bottom: 1px solid var(--line); }
.contact__links a {
  display: flex; align-items: center; gap: 14px; padding: 16px 0;
  transform-origin: left center;
  transition: transform 200ms var(--ease-out);
}
.contact__links .ico { width: 26px; height: 26px; flex: none; }
.contact__links .arrow {
  width: 16px; height: 16px; margin-left: auto;
  fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 200ms var(--ease-out);
}
.contact__links a:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .contact__links a:hover { transform: scale(1.03); }
  .contact__links a:hover .arrow { transform: translate(2px, -2px); }
}
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.form {
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px);
  display: grid; gap: 16px;
  box-shadow: inset 0 1px 0 #fff, 0 20px 60px rgba(0, 0, 0, 0.08);
}
.chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 500; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-size: 15px; font-weight: 400;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.chips label:active span { transform: scale(0.96); }
.chips input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 2px solid #0071e3; outline-offset: 2px; }
.field { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.field em { font-style: normal; font-weight: 300; color: var(--ink-2); }
.field input, .field textarea {
  font: inherit; font-size: 16px; font-weight: 400;
  width: 100%; padding: 13px 16px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus { outline: none; border-color: #0071e3; box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15); }

/* ───────── Pie ───────── */
.footer {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 24px 0 calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-2);
}

/* ───────── Galería (diálogo) ───────── */
.gallery {
  width: min(100% - 24px, 1120px); max-width: none;
  height: min(100% - 24px, 900px); max-height: none;
  padding: 0; border: 0; background: transparent; color: var(--ink);
  overflow: visible;
}
.gallery::backdrop { background: rgba(0, 0, 0, 0.35); }
.gallery__panel {
  height: 100%;
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  --glass-bg: rgba(250, 250, 252, 0.82);
}
.gallery__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px 28px;
}
.gallery__title { margin: 0; font-size: clamp(28px, 4vw, 44px); }
.gallery__head .icon-btn { background: rgba(0, 0, 0, 0.06); }
@media (hover: hover) and (pointer: fine) { .gallery__head .icon-btn:hover { background: rgba(0, 0, 0, 0.1); } }

/* Cuadrícula justificada: filas de la misma altura que llenan el ancho, solo scroll vertical.
   El tamaño de cada foto lo calcula js/main.js (layoutGrid). */
.gallery__scroll {
  flex: 1; min-height: 0;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 28px 28px;
  scrollbar-width: thin;
}
.gallery__grid {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap, 10px);
}
.gallery__grid li { flex: none; margin: 0; }
.thumb {
  display: block; width: 100%; height: 100%;
  border-radius: 12px; overflow: hidden; background: var(--placeholder);
  transition: transform 280ms var(--ease-out);
}
.thumb picture, .thumb img { width: 100%; height: 100%; }
.thumb img { object-fit: cover; transition: opacity 400ms ease, transform 700ms var(--ease-reveal); }
.thumb img[data-loading] { opacity: 0; }
.thumb:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .thumb:hover { transform: scale(1.025); }
  .thumb:hover img { transform: scale(1.04); }
}

/* Cada foto entra suave y escalonada al abrir y al hacer scroll dentro de la galería */
.gallery__grid li {
  opacity: 0; translate: 0 18px; scale: 0.97; filter: blur(4px);
  transition: opacity 700ms var(--ease-reveal), translate 800ms var(--ease-reveal),
              scale 800ms var(--ease-reveal), filter 600ms var(--ease-reveal);
  transition-delay: var(--d, 0ms);
}
.gallery__grid li.is-in { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
.gallery__grid li.is-out:not(.is-in) { transition-duration: 450ms; transition-delay: 0ms; }

@media (max-width: 600px) {
  .gallery__scroll { padding: 4px 16px 16px; }
  .gallery__head { padding-left: 20px; }
}

/* Entrada/salida del diálogo: modal centrado, salida más rápida que la entrada */
.gallery[open] { animation: dialog-in 340ms var(--ease-drawer); }
.gallery[open]::backdrop { animation: fade-in 340ms ease; }
.gallery.is-closing { animation: dialog-out 200ms ease-out forwards; }
.gallery.is-closing::backdrop { animation: fade-out 200ms ease forwards; }
@keyframes dialog-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } }
@keyframes dialog-out { to { opacity: 0; transform: scale(0.98); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* Visor de una foto */
.viewer {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: rgba(16, 16, 18, 0.94);
  border-radius: var(--radius);
}
.viewer[hidden] { display: none; }
.viewer:not([hidden]) { animation: fade-in 200ms ease; }
.viewer__img {
  position: absolute; top: 24px; left: 76px;
  width: calc(100% - 152px); height: calc(100% - 108px);
  object-fit: contain;
  transition: opacity 320ms ease;
}
@media (max-width: 600px) {
  .viewer__img { top: 16px; left: 12px; width: calc(100% - 24px); height: calc(100% - 100px); }
}
.viewer__img[data-loading] { opacity: 0; }
.viewer .icon-btn { position: absolute; top: 50%; translate: 0 -50%; color: #fff; }
.viewer__prev { left: 16px; }
.viewer__next { right: 16px; }
.viewer__back { position: absolute; bottom: 20px; left: 50%; translate: -50% 0; height: 40px; font-size: 15px; }
@media (max-width: 600px) {
  .viewer .icon-btn { top: auto; bottom: 20px; translate: none; }
  .viewer__back { bottom: 20px; }
}

/* ───────── Apariciones al hacer scroll: suaves y escalonadas ───────── */
.js [data-reveal] {
  opacity: 0; translate: 0 28px; filter: blur(6px);
  transition: opacity 1100ms var(--ease-reveal), translate 1200ms var(--ease-reveal), filter 900ms var(--ease-reveal);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; translate: 0 0; filter: blur(0); }
/* Al terminar se quita el filtro y la transición larga, así el hover vuelve a ser rápido */
.js [data-reveal].is-done { filter: none; transition: none; }
.js .svc.is-done { transition: transform 320ms var(--ease-out), background-color 300ms ease; }

/* Fotos: revelado de abajo arriba con clip-path */
.js [data-reveal-img] {
  clip-path: inset(100% 0 0 0 round var(--radius-sm));
  transition: clip-path 1100ms var(--ease-in-out), transform 280ms var(--ease-out);
  transition-delay: var(--d, 0ms), 0ms;
}
.js [data-reveal-img] img { transform: scale(1.08); transition: transform 1400ms var(--ease-reveal); transition-delay: var(--d, 0ms); }
.js [data-reveal-img].is-in { clip-path: inset(0 0 0 0 round var(--radius-sm)); }
.js [data-reveal-img].is-in img { transform: none; }
.js .band [data-reveal-img] { --radius-sm: var(--radius); }
/* Tras revelarse, el hover vuelve a su transición corta */
.js .card.is-done img { transition: transform 800ms var(--ease-reveal); transition-delay: 0ms; }

/* ───────── Movimiento reducido: solo fundidos ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-property: opacity, background-color, color, border-color !important; }
  .js .hero__media img, .js .hero__content > * { animation: fade-in 400ms ease both; }
  .js [data-reveal] { translate: none; filter: none; }
  .js [data-reveal-img] { clip-path: none; opacity: 0; transition: opacity 500ms ease; }
  .js [data-reveal-img].is-in { clip-path: none; opacity: 1; }
  .js [data-reveal-img] img { transform: none; }
  .gallery[open], .gallery.is-closing { animation-name: fade-in; }
  .gallery.is-closing { animation-name: fade-out; }
  .card:hover img, .card:hover .card__bubble, .svc:hover, .thumb:hover, .thumb:hover img,
  .btn:hover, .icon-btn:hover, .contact__links a:hover, .chips label:hover span, .lang__btn:hover { transform: none; }
}

@media (max-width: 400px) {
  .hero__actions .btn { padding: 0 18px; font-size: 15px; }
}

/* ───────── Barra: zona derecha e idioma ───────── */
.nav__right { display: flex; align-items: center; gap: 6px; }
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 40px; padding: 0 12px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.lang__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }
.lang__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang__btn:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .lang__btn:hover { transform: scale(1.06); background: rgba(255, 255, 255, 0.16); }
  .nav.is-solid .lang__btn:hover { background: rgba(0, 0, 0, 0.05); }
  .lang__btn:active { transform: scale(0.95); }
}
/* Menú: aparece desde el botón (origen arriba a la derecha), salida más rápida */
.lang__menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  list-style: none; margin: 0; padding: 6px;
  min-width: 156px;
  border-radius: 18px;
  color: var(--ink);
  transform-origin: top right;
  opacity: 0; transform: scale(0.96) translateY(-4px); visibility: hidden;
  transition: opacity 120ms ease, transform 120ms var(--ease-out), visibility 0s 120ms;
}
.lang.is-open .lang__menu {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity 220ms ease, transform 260ms var(--ease-out), visibility 0s;
}
.lang__menu button {
  width: 100%; text-align: left;
  padding: 10px 14px; border-radius: 12px;
  font-size: 15px; font-weight: 400;
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
.lang__menu button[aria-checked="true"] { font-weight: 500; background: rgba(0, 0, 0, 0.06); }
.lang__menu button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .lang__menu button:hover { background: rgba(0, 0, 0, 0.06); transform: scale(1.03); }
}
@media (max-width: 720px) { .nav { padding-left: 18px; } }

/* ───────── Detalle de servicios ───────── */
.svc__list { margin: 0 0 18px; padding-left: 18px; }
.svc__sub { margin: 0 0 6px !important; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.svc__addons { margin: 0 0 22px; padding: 0; list-style: none; }
.svc__addons li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.svc__addons dd { margin: 0; font-weight: 500; white-space: nowrap; }

/* Chips del formulario también crecen */
@media (hover: hover) and (pointer: fine) {
  .chips label:hover span { transform: scale(1.05); }
  .chips label:active span { transform: scale(0.96); }
}

/* Alternativa sin cristal: textos de servicios legibles sobre fondo claro */



/* ───────── Banderas del selector de idioma ───────── */
.flag {
  width: 20px; height: 20px; flex: none;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.12);
}
.lang__btn .flag { width: 18px; height: 18px; border-radius: 4px; margin-right: 2px; }
.lang__menu button { display: flex; align-items: center; gap: 10px; }

/* Nota pequeña en servicios */
.svc__note { margin: -8px 0 18px !important; font-size: 13px; color: rgba(255, 255, 255, 0.7); }

/* Fondo de Servicios: entra con un fundido y un leve zoom hacia atrás */
.js [data-reveal-bg] img {
  opacity: 0; transform: scale(1.1);
  transition: opacity 1200ms var(--ease-reveal), transform 1800ms var(--ease-reveal);
}
.js [data-reveal-bg].is-in img { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal-bg] img { transform: none; }
}

/* ───────── Salida al subir: mismo movimiento a la inversa, más rápido y sin escalonado ───────── */
.js [data-reveal].is-out:not(.is-in) {
  transition-duration: 650ms, 700ms, 500ms;
  transition-delay: 0ms;
}
.js [data-reveal-img].is-out:not(.is-in) {
  transition-duration: 750ms, 280ms;
  transition-delay: 0ms, 0ms;
}
.js [data-reveal-img].is-out:not(.is-in) img { transition-duration: 750ms; transition-delay: 0ms; }
.js [data-reveal-bg].is-out:not(.is-in) img { transition-duration: 700ms, 900ms; }

/* Foto ancha en la galería: fila propia a todo el ancho, debajo de las demás */
.gallery__grid li.is-wide .thumb { border-radius: 16px; }
@media (prefers-reduced-motion: reduce) {
  .gallery__grid li { translate: none; scale: none; filter: none; }
}

.gallery__scroll:focus { outline: none; }

/* ───────── Packs (estilo C: borde amarillo, etiqueta "Pack"; el central "Recomendado") ───────── */
:root { --yellow: #ffd60a; }
.packs { margin-top: clamp(40px, 6vw, 64px); }
.packs__title {
  margin: 0 0 14px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05;
}
.packs__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  align-items: stretch;
}
.pack {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--yellow);
  --glass-border: var(--yellow);
  transition: transform 320ms var(--ease-out), background-color 300ms ease;
}
.pack.is-featured { --glass-bg: rgba(255, 255, 255, 0.22); }
.pack__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pack__tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
  border-radius: 999px;
  background: var(--yellow); color: #1d1d1f;
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
}
.pack__tag--light { background: #fff; }
.pack__title { margin: 4px 0 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 24px; line-height: 1.1; }
.pack__price { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.pack__price s { font-size: 16px; color: rgba(255, 255, 255, 0.65); }
.pack__price strong { font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.pack__save { margin: 0; color: var(--yellow); font-weight: 500; font-size: 15px; }
.pack__list { margin: 4px 0 8px; padding-left: 18px; font-size: 15px; color: rgba(255, 255, 255, 0.9); }
.pack__list li { margin: 3px 0; }
.pack__cta { margin-top: auto; align-self: flex-start; }
@media (hover: hover) and (pointer: fine) {
  .pack:hover { transform: scale(1.02); --glass-bg: rgba(255, 255, 255, 0.24); }
}
.js .pack.is-done { transition: transform 320ms var(--ease-out), background-color 300ms ease; }
@media (min-width: 901px) {
  /* El recomendado sobresale un poco: es el que se elige */
  .pack.is-featured { scale: 1.04; }
}
@media (max-width: 900px) {
  .packs__grid { grid-template-columns: 1fr; }
  .pack.is-featured { order: -1; }
}



/* Aviso de privacidad bajo el formulario y enlaces legales del pie */
.form__legal { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.form__legal a { text-decoration: underline; text-underline-offset: 2px; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__legal a { transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .footer__legal a:hover { color: var(--ink); } }
@media (max-width: 600px) { .footer { flex-direction: column; } }
.svc__inner .svc__addons { padding-left: 0; }

/* ───────── Cintas en movimiento (marquee) ─────────
   Movimiento constante → curva linear (skill de Emil). Solo transform, en la GPU.
   Dos copias idénticas del contenido: al llegar a -50% la vuelta es invisible. */
.strip {
  display: grid; gap: clamp(12px, 2vw, 20px);
  padding-bottom: clamp(56px, 8vw, 104px);
  overflow: hidden;
}
.marquee {
  display: flex; width: max-content;
  animation: marquee var(--marquee-time, 50s) linear infinite;
  will-change: transform;
}
.marquee--reverse { animation-direction: reverse; }
.marquee__group {
  display: flex; align-items: center; flex: none;
  gap: var(--marquee-gap, 14px); padding-right: var(--marquee-gap, 14px);
  list-style: none; margin: 0;
}
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* Palabras grandes, con un punto entre ellas */
.marquee--words { --marquee-time: 38s; --marquee-gap: clamp(20px, 3vw, 40px); }
.marquee--words li {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 40px);
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.035em;
  font-size: clamp(44px, 8vw, 112px); line-height: 1;
  color: var(--ink);
}
.marquee--words li:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.marquee--words li::after {
  content: ""; width: 0.22em; height: 0.22em; border-radius: 50%;
  background: var(--yellow, #ffd60a);
}

/* Fotos: misma altura, ancho según su forma */
.marquee--photos { --marquee-time: 70s; --marquee-gap: 12px; }
.strip__tile {
  display: block; height: clamp(150px, 20vw, 240px);
  border-radius: 16px; overflow: hidden; background: var(--placeholder);
  transition: transform 320ms var(--ease-out);
}
.strip__tile picture, .strip__tile img { height: 100%; width: auto; }
.strip__tile img { object-fit: cover; transition: transform 800ms var(--ease-reveal); }
.strip__tile:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .strip__tile:hover { transform: scale(1.04); }
  .strip__tile:hover img { transform: scale(1.06); }
  /* Al pasar el ratón, la cinta se para para poder elegir una foto */
}
/* Fuera de pantalla no gasta nada */
.strip.is-paused .marquee { animation-play-state: paused; }

/* ───────── Portada: deriva lenta de la foto (efecto Ken Burns) ───────── */
.hero__media { display: block; overflow: hidden; border-radius: var(--radius); }
.js .hero__media img {
  animation: hero-in 900ms var(--ease-out) both, hero-drift 26s ease-in-out 900ms infinite alternate;
}

/* ───────── Parallax ligado al scroll (CSS puro, fuera del hilo principal) ───────── */
@supports (animation-timeline: view()) {
  .band img, .about__photo img {
    scale: 1.14;
    animation: parallax linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  .services__bg img {
    animation: parallax-soft linear both;
    animation-timeline: view(block);
    animation-range: entry 0% exit 100%;
  }
  @keyframes parallax { from { translate: 0 -6%; } to { translate: 0 6%; } }
  @keyframes parallax-soft { from { translate: 0 -4%; scale: 1.1; } to { translate: 0 4%; scale: 1.1; } }
}

/* Movimiento reducido: todo quieto */
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
  .strip { overflow-x: auto; }
  .js .hero__media img { animation: fade-in 400ms ease both; }
  .band img, .about__photo img, .services__bg img { animation: none !important; translate: none; scale: none; }
}

/* El parallax escala las fotos: se recortan dentro de su marco y nunca crean scroll lateral */
.band picture { display: block; overflow: hidden; border-radius: var(--radius); }
body { overflow-x: clip; }
.marquee__group { padding-left: 0; }

/* Botones que aparecen con scroll: al terminar recuperan su transición de hover */
.js .btn[data-reveal].is-done { transition: transform 240ms var(--ease-out), background-color 240ms ease; }

/* ───────── Toque dorado ─────────
   Oro con degradado (claro → profundo → claro) para que parezca metal y no un amarillo plano. */
:root {
  --gold-light: #fff1c1;
  --gold: #f2c94c;
  --gold-deep: #b8860b;
  --gold-metal: linear-gradient(135deg, #fff4cf 0%, #f2c94c 28%, #b8860b 52%, #f6d77a 74%, #fff4cf 100%);
}

/* Packs: borde de oro, brillo cálido y un destello que cruza la tarjeta cada pocos segundos */
.pack {
  border: 0;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px rgba(242, 201, 76, 0.18),
    0 18px 44px -18px rgba(242, 201, 76, 0.55);
}
.pack.glass::before {
  inset: 0; padding: 2px;
  background: var(--gold-metal);
}
.pack.is-featured {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 0 1px rgba(242, 201, 76, 0.3),
    0 0 36px -6px rgba(242, 201, 76, 0.55),
    0 26px 60px -20px rgba(184, 134, 11, 0.7);
}
.pack::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 207, 0.32) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: gold-sheen 7s var(--ease-in-out) infinite;
}
.pack:nth-child(1)::after { animation-delay: 1.2s; }
.pack:nth-child(2)::after { animation-delay: 0s; }
.pack:nth-child(3)::after { animation-delay: 2.4s; }
@keyframes gold-sheen {
  0% { transform: translateX(-130%); }
  20%, 100% { transform: translateX(130%); }
}
.pack > * { position: relative; z-index: 2; }

/* Etiqueta "Pack" de oro metálico, con su propio brillo */
.pack__tag {
  position: relative; overflow: hidden;
  background: var(--gold-metal);
  color: #2b2100;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 10px -2px rgba(184, 134, 11, 0.6);
}
.pack__tag--light { background: #fff; color: #1d1d1f; box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.3); }
.pack__tag:not(.pack__tag--light)::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.85) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: gold-sheen 5s var(--ease-in-out) 0.6s infinite;
}
.pack__save { color: var(--gold); text-shadow: 0 0 18px rgba(242, 201, 76, 0.45); }

/* ───────── Fotos: sombra suave en capas y un reflejo dorado al pasar el cursor ───────── */
.strip__tile, .gallery__grid .thumb {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 28px -14px rgba(0, 0, 0, 0.45);
}
/* Las fotos con revelado por clip-path no pueden tener sombra mientras se recortan:
   al terminar se quita el recorte y la sombra entra con un fundido */
.card, .about__photo, .band picture {
  transition: transform 280ms var(--ease-out), box-shadow 700ms var(--ease-reveal);
}
.js .card.is-done, .js .about__photo.is-done, .js .band picture.is-done, html:not(.js) .card {
  clip-path: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 22px 44px -22px rgba(0, 0, 0, 0.55);
}
.card::after, .strip__tile::after, .about__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 233, 170, 0.35) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 0ms;
}
.strip__tile { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .card:hover::after, .strip__tile:hover::after, .about__photo:hover::after {
    transform: translateX(130%);
    transition: transform 1100ms var(--ease-in-out);
  }
  .js .card.is-done:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 28px 56px -22px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(242, 201, 76, 0.35);
  }
}
.card__bubble { z-index: 2; }
.about__tag { z-index: 2; }

/* Sin movimiento: sin destellos */
@media (prefers-reduced-motion: reduce) {
  .pack::after, .pack__tag::after { animation: none; display: none; }
  .card::after, .strip__tile::after, .about__photo::after { display: none; }
}
.js .card.is-done, .js .about__photo.is-done, .js .band picture.is-done {
  transition: transform 280ms var(--ease-out), box-shadow 700ms var(--ease-reveal);
}

/* ───────── Movimiento ambiental: lento, suave y en segundo plano ───────── */

/* Luces que flotan detrás del texto (degradados, sin filtros caros) */
.ambient { position: relative; isolation: isolate; }
.orb {
  position: absolute; z-index: -1; pointer-events: none;
  width: clamp(260px, 38vw, 520px); aspect-ratio: 1; border-radius: 50%;
  will-change: transform;
}
.orb--gold {
  top: -10%; right: -8%;
  background: radial-gradient(circle at 50% 50%, rgba(242, 201, 76, 0.28), rgba(242, 201, 76, 0) 68%);
  animation: orb-float-a 22s ease-in-out infinite alternate;
}
.orb--violet {
  bottom: -18%; left: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(140, 110, 255, 0.18), rgba(140, 110, 255, 0) 68%);
  animation: orb-float-b 28s ease-in-out infinite alternate;
}
@keyframes orb-float-a { to { transform: translate3d(-12%, 14%, 0) scale(1.12); } }
@keyframes orb-float-b { to { transform: translate3d(16%, -10%, 0) scale(0.92); } }

/* Barra de progreso dorada arriba del todo, ligada al scroll (CSS puro) */
.scroll-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    display: block;
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    height: 3px;
    background: var(--gold-metal);
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes progress-grow { to { transform: scaleX(1); } }
}

/* Indicador para bajar en la portada: un pequeño balanceo, solo en pantallas grandes */
.hero__cue {
  position: absolute; z-index: 2;
  right: calc(12px + var(--gutter)); bottom: calc(12px + clamp(28px, 6vw, 72px));
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  color: #fff;
  transition: transform 240ms var(--ease-out);
}
.hero__cue svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: cue-bob 2.4s ease-in-out infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.hero__cue:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .hero__cue:hover { transform: scale(1.08); } }
@media (max-width: 720px) { .hero__cue { display: none; } }

/* Punto de "disponible" junto a tu foto: un latido suave */
.avatar-wrap { position: relative; display: inline-flex; flex: none; }
.online {
  position: absolute; right: 2px; bottom: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #34c759; box-shadow: 0 0 0 2.5px var(--bg);
}
.online::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #34c759;
  animation: online-pulse 2.6s ease-out infinite;
}
@keyframes online-pulse { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .orb, .hero__cue svg, .online::after { animation: none; }
  .scroll-progress { display: none; }
}
html { overflow-x: clip; }

/* Portadas de Trabajo: mismo fundido suave que el resto (opacidad + desplazamiento + desenfoque) */
.js .card[data-reveal] { translate: 0 36px; scale: 0.97; }
.js .card[data-reveal].is-in { translate: 0 0; scale: 1; }
.js .card[data-reveal] {
  transition: opacity 1100ms var(--ease-reveal), translate 1200ms var(--ease-reveal),
              scale 1200ms var(--ease-reveal), filter 900ms var(--ease-reveal), transform 280ms var(--ease-out);
  transition-delay: var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), 0ms;
}
.js .card[data-reveal].is-out:not(.is-in) { transition-duration: 650ms, 700ms, 700ms, 500ms, 280ms; transition-delay: 0ms; }
.js .card[data-reveal].is-done {
  transition: transform 280ms var(--ease-out), box-shadow 700ms var(--ease-reveal);
}
@media (prefers-reduced-motion: reduce) {
  .js .card[data-reveal] { translate: none; scale: none; }
}

/* ───────── Letras grandes o en negrita: crecen un poco al pasar el cursor ───────── */
.grow { display: inline-block; transform-origin: left center; transition: transform 320ms var(--ease-out); }
h1.grow, h2.grow, h3.grow, p.grow { display: block; width: fit-content; max-width: 100%; }
.js .grow[data-reveal].is-done { transition: transform 320ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .grow:hover { transform: scale(1.04); }
  .hero__title.grow:hover, .display.grow:hover, .statement.grow:hover { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) { .grow:hover { transform: none; } }

/* ───────── Modo oscuro ───────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0b0d;
  --surface: #1c1c1f;
  --placeholder: #26262a;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --line: rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] .glass--solid { --glass-bg: rgba(28, 28, 31, 0.72); --glass-border: rgba(255, 255, 255, 0.14); }
:root[data-theme="dark"] .nav.is-solid { --glass-bg: rgba(22, 22, 25, 0.7); --glass-border: rgba(255, 255, 255, 0.12); }
:root[data-theme="dark"] .nav.is-solid .nav__logo img,
:root[data-theme="dark"] .footer__logo { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .btn--dark:hover { background: #fff; }
:root[data-theme="dark"] .form { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 60px rgba(0, 0, 0, 0.4); }
:root[data-theme="dark"] .gallery__panel { --glass-bg: rgba(20, 20, 23, 0.86); }
:root[data-theme="dark"] .gallery__head .icon-btn,
:root[data-theme="dark"] .lang__menu button[aria-checked="true"] { background: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .nav.is-solid .lang__btn:hover,
:root[data-theme="dark"] .lang__menu button:hover { background: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .orb--gold { background: radial-gradient(circle, rgba(242, 201, 76, 0.18), rgba(242, 201, 76, 0) 68%); }
:root[data-theme="dark"] .orb--violet { background: radial-gradient(circle, rgba(140, 110, 255, 0.22), rgba(140, 110, 255, 0) 68%); }
:root[data-theme="dark"] .strip__tile, :root[data-theme="dark"] .gallery__grid .thumb { box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.9); }

/* Botón claro/oscuro: el icono cambia con giro y fundido */
.theme-btn {
  position: relative; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  transition: transform 240ms var(--ease-out), background-color 200ms ease;
}
.theme-btn svg {
  grid-area: 1 / 1; width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 260ms ease, transform 420ms var(--ease-out), filter 260ms ease;
}
.theme-btn .ico-moon { opacity: 0; transform: rotate(-70deg) scale(0.6); filter: blur(2px); }
:root[data-theme="dark"] .theme-btn .ico-sun { opacity: 0; transform: rotate(70deg) scale(0.6); filter: blur(2px); }
:root[data-theme="dark"] .theme-btn .ico-moon { opacity: 1; transform: none; filter: none; }
.theme-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .theme-btn:hover { transform: scale(1.08); background: rgba(255, 255, 255, 0.16); }
  .nav.is-solid .theme-btn:hover { background: rgba(0, 0, 0, 0.05); }
  :root[data-theme="dark"] .nav.is-solid .theme-btn:hover { background: rgba(255, 255, 255, 0.08); }
}

/* Cambio de tema: fundido cruzado suave de toda la página (el más fluido y sin bordes duros).
   Un leve desenfoque une las dos versiones para que no se vean "dos páginas" superpuestas. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(root) { animation-name: theme-out; }
::view-transition-new(root) { animation-name: theme-in; }
@keyframes theme-out { to { opacity: 0; filter: blur(2px); } }
@keyframes theme-in { from { opacity: 0; filter: blur(2px); } }

/* Navegadores sin View Transitions: los colores se funden igualmente durante el cambio */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color 520ms ease, color 520ms ease, border-color 520ms ease,
              fill 520ms ease, stroke 520ms ease, box-shadow 520ms ease, filter 520ms ease !important;
}
}
:root[data-theme="dark"] a[href*="tiktok"] .ico { filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.7)); }

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ───────── Letra a letra en los títulos grandes ───────── */
.letters .w { display: inline-block; white-space: nowrap; }
.letters .ch {
  display: inline-block;
  transform-origin: 50% 85%;
  transition: transform 320ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .letters .ch:hover { transform: scale(1.14) translateY(-2%); transition-duration: 180ms; }
  /* Las vecinas acompañan un poco para que la ola sea suave */
  .letters .ch:hover + .ch,
  .letters .ch:has(+ .ch:hover) { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .letters .ch:hover, .letters .ch:hover + .ch, .letters .ch:has(+ .ch:hover) { transform: none; } }

/* ───────── Todas las etiquetas y enlaces crecen al pasar el cursor ───────── */
.about__tag, .pack__tag, .nav__links a, .footer__legal a, .form__legal a, .work__meta .muted {
  display: inline-flex;
  transition: transform 260ms var(--ease-out), color 200ms ease, opacity 200ms ease;
}
.about__tag { display: grid; transform-origin: left bottom; }
.pack__tag, .nav__links a, .footer__legal a { transform-origin: center; }
.js .pack__tag[data-reveal].is-done { transition: transform 260ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .about__tag:hover { transform: scale(1.06); }
  .pack__tag:hover { transform: scale(1.1); }
  .nav__links a:hover, .footer__legal a:hover, .form__legal a:hover { transform: scale(1.08); }
  .card__bubble:hover { transform: scale(1.1); }
}

/* ───────── Ajustes para chino ───────── */
:lang(zh) .display, :lang(zh) .h2, :lang(zh) .hero__title, :lang(zh) .statement, :lang(zh) .about__big,
:lang(zh) .packs__title, :lang(zh) .pack__title, :lang(zh) .svc__title, :lang(zh) .gallery__title,
:lang(zh) .marquee--words li {
  letter-spacing: 0.01em;          /* el espaciado negativo apelotona los caracteres chinos */
  line-height: 1.18;
}
:lang(zh) body { line-height: 1.75; }
:lang(zh) .letters .w { display: inline; white-space: normal; }  /* en chino se puede partir entre caracteres */
:lang(zh) .svc__sub { text-transform: none; letter-spacing: 0.04em; }

/* Fotos que cargan tarde: fundido en lugar de aparecer de golpe */
.js .img-fade { opacity: 0; transition: opacity 600ms var(--ease-reveal); }
.js .img-fade.is-loaded { opacity: 1; }
.js picture.img-fade { display: block; }
.strip__tile picture.img-fade { display: inline; }

/* Cintas movidas por JavaScript (arrastrables); la animación CSS queda solo como respaldo sin JS */
.js .marquee { animation: none; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.js .marquee.is-dragging { cursor: grabbing; }
.js .marquee.is-dragging .strip__tile { pointer-events: none; }

/* ───────── Antes y después ───────── */
.compare { padding-bottom: clamp(64px, 9vw, 120px); }
.ba { display: grid; gap: 16px; justify-items: center; }
.ba__frame {
  position: relative; width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--placeholder);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 26px 50px -26px rgba(0, 0, 0, 0.55);
  touch-action: pan-y;             /* en móvil: vertical = scroll, lateral = mover la barra */
  user-select: none; -webkit-user-select: none;
  cursor: ew-resize;
  transition: opacity 260ms ease, filter 260ms ease, scale 360ms var(--ease-out);
}
.ba__frame[data-orient="v"] { aspect-ratio: 2 / 3; max-width: min(560px, 100%); }
.ba__frame.is-switching { opacity: 0; filter: blur(8px); scale: 0.985; }
.ba__img, .ba__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba__img img { object-fit: cover; pointer-events: none; }
/* La foto original se recorta desde la derecha según la posición de la barra */
.ba__before { clip-path: inset(0 50% 0 0); will-change: clip-path; }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  transform: translateX(50%);
  will-change: transform;
  outline: none;
}
.ba__frame.is-jumping .ba__before { transition: clip-path 380ms var(--ease-out); }
.ba__frame.is-jumping .ba__handle { transition: transform 380ms var(--ease-out); }
.ba__line {
  position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
}
.ba__knob {
  position: absolute; top: 50%; left: 0;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  --glass-bg: rgba(255, 255, 255, 0.22);
  transition: transform 260ms var(--ease-out);
}
.ba__knob svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ba__frame.is-dragging .ba__knob { transform: scale(0.92); }
.ba__handle:focus-visible .ba__knob { box-shadow: 0 0 0 3px #0071e3, var(--glass-shadow); }
@media (hover: hover) and (pointer: fine) {
  .ba__frame:hover .ba__knob { transform: scale(1.1); }
  .ba__frame.is-dragging:hover .ba__knob { transform: scale(0.95); }
}
.ba__label {
  position: absolute; top: 14px; z-index: 2;
  padding: 6px 14px; border-radius: 999px;
  color: #fff; font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  pointer-events: none;
  transition: opacity 240ms ease, transform 260ms var(--ease-out);
}
.ba__label--before { left: 14px; }
.ba__label--after { right: 14px; }
/* La etiqueta se aparta cuando la barra se le acerca */
.ba__frame.near-left .ba__label--before, .ba__frame.near-right .ba__label--after { opacity: 0; transform: scale(0.94); }

.ba__picker { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ba__pick {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 5px 16px 5px 5px;
  border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 15px; font-weight: 500; color: var(--ink);
  transition: transform 240ms var(--ease-out), background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}
.ba__pick picture, .ba__pick img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; }
.ba__pick.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ba__pick:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .ba__pick:hover { transform: scale(1.05); } }

@media (prefers-reduced-motion: reduce) {
  .ba__frame, .ba__frame.is-jumping .ba__before, .ba__frame.is-jumping .ba__handle { transition: opacity 200ms ease; }
  .ba__frame.is-switching { filter: none; scale: none; }
}

/* Página traducida por el navegador (Google Translate marca <html> con estas clases):
   se ocultan las letras sueltas y se muestra el título real ya traducido */
html.translated-ltr .letters, html.translated-rtl .letters { display: none; }
html.translated-ltr .letters-label, html.translated-rtl .letters-label {
  position: static; width: auto; height: auto; margin: 0; overflow: visible;
  clip: auto; white-space: normal;
}

/* ───────── Documental ───────── */
.doc { padding-bottom: clamp(64px, 9vw, 120px); }
.doc__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  isolation: isolate;
}
.doc__poster, .doc__poster img, .doc__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.doc__poster img, .doc__video { object-fit: cover; }
.doc__video { opacity: 0; transition: opacity 900ms var(--ease-reveal), transform 1200ms var(--ease-reveal); }
.doc__frame.is-playing .doc__video { opacity: 1; }
.doc__poster img { transition: transform 1200ms var(--ease-reveal); }
.doc__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.72) 100%),
              linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 60%);
}
.doc__content {
  position: absolute; z-index: 2;
  left: clamp(20px, 4vw, 48px); right: clamp(20px, 4vw, 48px); bottom: clamp(20px, 4vw, 44px);
}
.doc__title { margin: 0 0 6px; }
.doc__lead { margin: 0 0 20px; max-width: 34ch; font-size: clamp(15px, 1.6vw, 19px); color: rgba(255, 255, 255, 0.88); }
.doc__play svg { width: 18px; height: 18px; fill: currentColor; margin-left: -4px; }
@media (hover: hover) and (pointer: fine) {
  .doc__frame:hover .doc__video, .doc__frame:hover .doc__poster img { transform: scale(1.03); }
}


/* Ventana del documental (YouTube) */
.docmodal {
  width: min(100% - 24px, 1160px); max-width: none;
  padding: 0; border: 0; background: transparent; overflow: visible;
}
.docmodal::backdrop { background: rgba(0, 0, 0, 0.82); }
.docmodal__panel { position: relative; }
.docmodal__player {
  aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--radius-sm); overflow: hidden; background: #000;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7);
}
.docmodal__player iframe { width: 100%; height: 100%; border: 0; display: block; }
.docmodal__close {
  position: absolute; top: -56px; right: 0; color: #fff;
}
.docmodal[open] { animation: dialog-in 380ms var(--ease-drawer); }
.docmodal[open]::backdrop { animation: fade-in 380ms ease; }
.docmodal.is-closing { animation: dialog-out 220ms ease-out forwards; }
.docmodal.is-closing::backdrop { animation: fade-out 220ms ease forwards; }
@media (max-width: 600px) { .docmodal__close { top: -52px; } }
@media (prefers-reduced-motion: reduce) {
  .doc__frame:hover .doc__video, .doc__frame:hover .doc__poster img { transform: none; }
}


/* Documental: cuadro 16:9 entero en todas las pantallas; el botón va fuera del vídeo para no tapar caras.
   Sin cristal ni efectos encima del vídeo: así el navegador no recalcula nada en cada fotograma. */
.doc__frame { aspect-ratio: 16 / 9; }
.doc__side { display: grid; gap: 14px; justify-items: start; }
.doc__play svg { width: 16px; height: 16px; fill: currentColor; margin-left: -2px; }
.doc__video { will-change: opacity; }
@media (hover: hover) and (pointer: fine) {
  .doc__frame:hover .doc__video, .doc__frame:hover .doc__poster img { transform: none; }
}

/* Botón del documental: discreto, fuera del vídeo */
.doc__play.btn--sm { height: 38px; padding: 0 16px 0 13px; font-size: 14px; gap: 6px; }
.doc__play.btn--sm svg { width: 14px; height: 14px; }

/* ───────── Portada con vida ───────── */
/* Luces doradas flotando: cada una sube despacio con un leve vaivén y se desvanece */
.hero__fx {
  position: absolute; inset: 12px; z-index: 0;
  border-radius: var(--radius); overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
.hero__fx span {
  position: absolute; left: var(--x); bottom: var(--y, -40px);
  width: calc(var(--s) * 1.4); height: calc(var(--s) * 1.4); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 195, 1) 0%, rgba(255, 210, 130, 0.6) 34%, rgba(255, 190, 110, 0) 70%);
  opacity: 0;
  animation: hero-mote var(--t) linear var(--dl) infinite;
  will-change: transform, opacity;
}
@keyframes hero-mote {
  0%   { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0; }
  12%  { opacity: min(1, calc(var(--o) + 0.3)); }
  50%  { transform: translate3d(var(--sw), -55svh, 0) scale(1); }
  85%  { opacity: min(0.9, calc(var(--o) + 0.15)); }
  100% { transform: translate3d(calc(var(--sw) * -0.5), -110svh, 0) scale(1.1); opacity: 0; }
}
.hero.is-off .hero__fx span, .hero.is-off .hero__media img { animation-play-state: paused; }

/* Parallax de la portada al bajar (CSS puro): la foto se queda un poco atrás y el texto sube un poco más */
@supports (animation-timeline: scroll()) {
  .js .hero__media img {
    animation: hero-in 900ms var(--ease-out) both, hero-drift 26s ease-in-out 900ms infinite alternate, hero-par linear both;
    animation-timeline: auto, auto, scroll(root block);
    animation-range: normal, normal, 0 100svh;
  }
  @keyframes hero-par { from { translate: 0 0; } to { translate: 0 10%; } }
  .hero__content { animation: hero-content-par linear both; animation-timeline: scroll(root block); animation-range: 0 90svh; }
  @keyframes hero-content-par { to { translate: 0 -40px; opacity: 0.2; } }
}
/* Movimiento suave sin cerrar el encuadre: apenas un 3% de acercamiento */
@keyframes hero-drift { from { scale: 1; } to { scale: 1.03; } }

@media (prefers-reduced-motion: reduce) {
  .hero__fx { display: none; }
  .js .hero__media img { animation: fade-in 400ms ease both; }
  .hero__content { animation: none; }
}

/* Documental más contenido en pantallas anchas: no ocupa toda la pantalla */
.doc.container { width: min(100% - 2 * var(--gutter), 960px); }

/* ───────── Modo ligero (se activa solo en dispositivos que van justos) ─────────
   Mismo diseño, sin los efectos que más cuestan: desenfoque en tiempo real del cristal,
   desenfoque en las apariciones, luces flotantes y destellos dorados. */
.lite .glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
.lite .glass:not(.glass--solid) { background: rgba(22, 22, 26, 0.5); }
.lite .glass--solid { background: rgba(250, 250, 252, 0.97); }
:root[data-theme="dark"].lite .glass--solid { background: rgba(28, 28, 31, 0.97); }
.lite .nav.is-solid { background: rgba(250, 250, 252, 0.94); }
:root[data-theme="dark"].lite .nav.is-solid { background: rgba(22, 22, 25, 0.94); }
.lite .svc.glass, .lite .pack.glass { background: rgba(20, 18, 40, 0.55); }
.lite .lang__menu.glass { background: var(--surface); }
.lite [data-reveal], .lite .gallery__grid li { filter: none !important; }
.lite .orb, .lite .hero__fx, .lite .pack::after, .lite .pack__tag::after { display: none; }
.lite .hero__media img { animation: hero-in 700ms var(--ease-out) both; }
.lite .ba__label, .lite .card__bubble { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Capas permanentes solo donde de verdad ayudan */
.hero__fx span { will-change: auto; }
.ba__before { will-change: auto; }

/* Que conserven el espacio entre palabras (inline-flex se lo comía: "10fotos") */
.work__meta .muted, .form__legal a { display: inline-block; }

/* Móvil: el titular en dos líneas para dejar ver más el frasco */
@media (max-width: 420px) { .hero__title { font-size: 37px; margin-bottom: 18px; } }

/* Móvil en vertical: el texto arriba, sobre el cielo, para que el frasco se vea entero */
@media (max-aspect-ratio: 1/1) {
  .hero__content {
    top: calc(12px + max(84px, env(safe-area-inset-top) + 72px));
    bottom: auto;
  }
  .hero::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.12) 38%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.15));
  }
  .hero__cue { display: none; }
}
/* Seguridad extra: la foto nunca se deforma aunque el navegador se lie con las proporciones */
.hero__media img { min-width: 100%; min-height: 100%; }

/* Logo: nunca se encoge ni se deforma (mantiene siempre su proporción) */
.nav__logo { flex: none; }
.nav__logo img { max-width: none; width: auto; aspect-ratio: 600 / 88; object-fit: contain; }
.footer__logo { max-width: none; aspect-ratio: 600 / 88; }
.nav__right { flex: none; }

/* Móvil estrecho: barra más compacta para que todo quepa sin apretar el logo */
@media (max-width: 430px) {
  .nav { padding: 5px 5px 5px 16px; gap: 6px; }
  .nav__logo img { height: 15px; }
  .nav__right { gap: 2px; }
  .theme-btn { width: 34px; height: 34px; }
  .lang__btn { height: 34px; padding: 0 6px; gap: 3px; }
  .nav__cta { height: 36px; padding: 0 13px; font-size: 14px; }
}
@media (max-width: 350px) {
  .lang__btn [data-lang-current] { display: none; }   /* en pantallas mínimas basta la bandera */
}


/* ───────── Sin efecto cristal ─────────
   Para navegadores sin backdrop-filter o con "Reducir transparencia" activado en el sistema
   (Windows: Efectos de transparencia desactivados; macOS/iOS: Reducir transparencia).
   Cada elemento conserva el contraste: texto blanco sobre fondo oscuro, texto oscuro sobre fondo claro. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Cristal sobre fotos (texto blanco): fondo oscuro translúcido */
.glass:not(.glass--solid) { background: rgba(22, 22, 26, 0.62); color: #fff; }
.nav.glass { background: rgba(22, 22, 26, 0.62); color: #fff; }
.svc.glass, .pack.glass { background: rgba(18, 16, 38, 0.74); color: #fff; }
/* Cristal sobre fondo claro: superficie sólida */
.glass--solid { background: var(--surface); color: var(--ink); }
.nav.glass.is-solid { background: rgba(250, 250, 252, 0.97); color: var(--ink); }
:root[data-theme="dark"] .nav.glass.is-solid { background: rgba(22, 22, 25, 0.97); }
.btn--light { background: #fff; color: #1d1d1f; }
}
@media (prefers-reduced-transparency: reduce) {
.glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Cristal sobre fotos (texto blanco): fondo oscuro translúcido */
.glass:not(.glass--solid) { background: rgba(22, 22, 26, 0.62); color: #fff; }
.nav.glass { background: rgba(22, 22, 26, 0.62); color: #fff; }
.svc.glass, .pack.glass { background: rgba(18, 16, 38, 0.74); color: #fff; }
/* Cristal sobre fondo claro: superficie sólida */
.glass--solid { background: var(--surface); color: var(--ink); }
.nav.glass.is-solid { background: rgba(250, 250, 252, 0.97); color: var(--ink); }
:root[data-theme="dark"] .nav.glass.is-solid { background: rgba(22, 22, 25, 0.97); }
.btn--light { background: #fff; color: #1d1d1f; }
}