/* ============================================================================
   LA CASA DE TODOS · kit "aura"
   Contenido = del donante. Aquí solo hay forma: contornos gruesos, sombra dura,
   nombre gigante, pegatinas, bloques de color con damero, secciones que se tapan.
   Los estados ocultos de animación viven SIEMPRE bajo html.motion.
   ============================================================================ */

/* ---------- fuentes locales (sin Google Fonts remoto) ---------- */
@font-face {
  font-family: "League Gothic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/leaguegothic-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: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("../assets/fonts/fraunces-normal.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: "Fraunces"; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url("../assets/fonts/fraunces-italic.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: "Work Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/worksans.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;
}

/* ---------- tokens (todos derivados de la paleta del donante) ---------- */
:root {
  color-scheme: light;
  --au-main: #8E2A2F;        /* vino de Rioja del donante, un punto más vivo */
  --au-main-deep: #551A1E;   /* oxblood-deep del donante */
  --au-main-ink: #7A2429;    /* oxblood del donante: texto sobre papel (AA) */
  --au-ink: #1C130F;         /* espresso del donante */
  --au-paper: #F3E9D8;       /* papel del donante */
  --au-paper-2: #E9D9BD;     /* paper-dim del donante */
  --au-card: #FBF5E9;        /* papel aclarado para tarjetas */
  --au-sticker: #E6C48E;     /* latón del donante, aclarado para pegatinas */
  --au-bottle: #212F26;      /* verde botella del donante */
  --au-soft: #4A3B32;        /* texto secundario sobre papel (AA) */

  --au-hard: 5px 5px 0 var(--au-ink);
  --au-hard-lg: 10px 10px 0 var(--au-ink);
  --au-line: 3px;
  --au-r: 14px;
  --au-r-lg: 28px;

  --f-display: "League Gothic", "Oswald", "Arial Narrow", Impact, sans-serif;
  --f-body: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --f-serif: "Fraunces", ui-serif, Georgia, serif;

  --pad: clamp(1.25rem, 5vw, 4rem);
  --max: 1240px;
  --hdr: 68px;
  --wm: max(120px, min(23vw, 400px, calc((89svh - 324px) / 1.68)));
  --check: conic-gradient(rgba(0,0,0,.12) 25%, transparent 0 50%, rgba(0,0,0,.12) 0 75%, transparent 0);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 0; overflow-x: clip; }
body {
  font-family: var(--f-body); font-size: 1rem; line-height: 1.6;
  color: var(--au-ink); background: var(--au-paper);
  overflow-x: clip; min-height: 100%;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
h1, h2, h3, h4 { font-weight: inherit; }
::selection { background: var(--au-sticker); color: var(--au-ink); }
:focus-visible { outline: 3px solid var(--au-ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--au-sticker); border-radius: 6px; }
.sr-only, .visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; top: -100%; left: 1rem; z-index: 300;
  background: var(--au-paper); color: var(--au-ink); font-weight: 700;
  padding: .9rem 1.3rem; border: var(--au-line) solid var(--au-ink); border-radius: 999px; box-shadow: var(--au-hard);
  transition: top .25s ease;
}
.skip-link:focus { top: 1rem; }

.au-wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
main { display: block; position: relative; }
main > *:not(.au-hero) { position: relative; z-index: 2; }   /* tapan al inicio fijo */

/* ---------- piezas del lenguaje ---------- */
.au-eyebrow {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: .3rem .95rem; background: var(--au-sticker); color: var(--au-ink);
  border: var(--au-line) solid var(--au-ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--au-ink);
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
  transform: rotate(-2deg); width: fit-content;
}
.au-h2 {
  font-family: var(--f-display); font-weight: 400; font-synthesis: none;
  font-size: clamp(3.2rem, 8.6vw, 7.4rem); line-height: .9; letter-spacing: .005em; text-transform: uppercase;
  margin-block: 1rem 1.2rem;
}
.au-lede { font-size: clamp(1.05rem, .6vw + .9rem, 1.25rem); max-width: 42ch; }

.au-btn-row { display: flex; flex-wrap: wrap; gap: .9rem 1rem; }
.au-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: .75rem 1.7rem; border: var(--au-line) solid var(--au-ink); border-radius: 999px;
  font-size: .95rem; font-weight: 700; letter-spacing: .02em; line-height: 1.1; text-align: center;
  box-shadow: var(--au-hard); background: var(--au-paper); color: var(--au-ink);
  transition: transform .18s cubic-bezier(.23,1,.32,1), box-shadow .18s cubic-bezier(.23,1,.32,1), background-color .18s;
  -webkit-tap-highlight-color: transparent;
}
.au-btn--main { background: var(--au-main); color: var(--au-paper); }
.au-btn--sticker { background: var(--au-sticker); }
@media (hover: hover) and (pointer: fine) {
  .au-btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--au-ink); }
}
.au-btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--au-ink); }

/* bocadillo: la cola va DETRÁS del texto (z-index:-1) */
.au-bubble {
  position: absolute; z-index: 5; isolation: isolate;
  background: var(--au-sticker); color: var(--au-ink);
  border: var(--au-line) solid var(--au-ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--au-ink);
  padding: .5rem 1rem; font-family: var(--f-display); font-size: clamp(1.3rem, 2.1vw, 1.85rem); line-height: 1;
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
.au-bubble::after {
  content: ""; position: absolute; z-index: -1; right: 22px; bottom: -11px; width: 18px; height: 18px;
  background: var(--au-sticker); border-right: var(--au-line) solid var(--au-ink); border-bottom: var(--au-line) solid var(--au-ink);
  transform: rotate(45deg);
}
.au-tag {
  display: inline-block; padding: .25rem .9rem; background: var(--au-paper); color: var(--au-ink);
  border: var(--au-line) solid var(--au-ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--au-ink);
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-3deg);
}

/* bloques de color a sangre */
.au-block { position: relative; border-block: var(--au-line) solid var(--au-ink); padding-block: clamp(4rem, 10vw, 8rem); }
.au-main { background-color: var(--au-main); background-image: var(--check); background-size: 120px 120px; color: var(--au-paper); }
.au-paper { background: var(--au-paper); }
.au-paper-2 { background: var(--au-paper-2); }
.au-bottle { background: var(--au-bottle); color: var(--au-paper); }
.au-main .au-eyebrow, .au-bottle .au-eyebrow { transform: rotate(-2deg); }

/* ============================================================================
   HEADER · menú · WhatsApp
   ============================================================================ */
.au-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--hdr);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: env(safe-area-inset-top) calc(var(--pad) + env(safe-area-inset-right)) 0 calc(var(--pad) + env(safe-area-inset-left));
  background: transparent; border-bottom: var(--au-line) solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.au-header.is-solid { background: var(--au-paper); border-bottom-color: var(--au-ink); }
.au-brand { display: flex; align-items: center; gap: .6rem; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.au-header.is-solid .au-brand { opacity: 1; pointer-events: auto; }
.au-brand svg { width: 30px; height: 30px; flex-shrink: 0; }
.au-brand svg path { stroke: var(--au-ink); }
.au-brand-name { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: .03em; text-transform: uppercase; line-height: 1; }
.au-nav { display: none; gap: .4rem; margin-left: auto; }
.au-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1rem; border: var(--au-line) solid transparent; border-radius: 999px;
  font-size: .9rem; font-weight: 700; letter-spacing: .04em; transition: background-color .15s, border-color .15s;
}
@media (hover: hover) { .au-nav a:hover { background: var(--au-sticker); border-color: var(--au-ink); } }
.au-nav-cta { display: none; min-height: 46px; padding: .5rem 1.3rem; font-size: .88rem; }
.au-burger {
  display: inline-flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-left: auto; background: var(--au-paper);
  border: var(--au-line) solid var(--au-ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--au-ink);
}
.au-burger span { width: 20px; height: 2.5px; background: var(--au-ink); border-radius: 2px; transition: transform .25s, opacity .15s; }
.au-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.au-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.au-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.au-panel {
  position: fixed; inset: 0; z-index: 90; background: var(--au-main); background-image: var(--check); background-size: 120px 120px;
  color: var(--au-paper); display: flex; flex-direction: column; justify-content: center; gap: .6rem;
  padding: calc(var(--hdr) + 1rem + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left));
  opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity .25s ease, transform .25s ease;
}
.au-panel.is-open { opacity: 1; pointer-events: auto; transform: none; }
.au-panel a:not(.au-btn) {
  font-family: var(--f-display); font-size: clamp(3rem, 15vw, 4.6rem); line-height: 1; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; width: fit-content;
}
.au-panel .au-btn { align-self: flex-start; margin-top: 1.4rem; }

.au-progress { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 101; pointer-events: none; }
.au-progress i { display: block; height: 100%; background: var(--au-main); transform: scaleX(0); transform-origin: left; border-right: 3px solid var(--au-ink); will-change: transform; }

.au-wa {
  position: fixed; z-index: 80; right: calc(1rem + env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; min-height: 60px; max-width: calc(100% - 2rem);
  background: var(--au-paper); color: var(--au-ink); border: var(--au-line) solid var(--au-ink); border-radius: 999px; box-shadow: var(--au-hard);
  font-size: .875rem; font-weight: 700; line-height: 1.25; -webkit-tap-highlight-color: transparent;
  clip-path: inset(-10px -10px -10px -10px round 999px);
  transition: clip-path .18s cubic-bezier(.77,0,.175,1), transform .18s;
}
.au-wa.is-compact { clip-path: inset(-10px -10px -10px calc(100% - 60px) round 999px); }
.au-wa-label { order: -1; padding-inline: 1.1rem .8rem; transition: opacity .18s, transform .18s; }
.au-wa.is-compact .au-wa-label { opacity: 0; transform: translateX(12px); }
.au-wa.is-compact { background: transparent; border-color: transparent; box-shadow: none; }
.au-wa.is-compact .au-wa-icon { box-shadow: 4px 4px 0 var(--au-ink); }
.au-wa-icon { display: grid; place-items: center; flex: 0 0 54px; width: 54px; height: 54px; margin: -3px; border-radius: 50%; background: #25D366; color: #fff; border: var(--au-line) solid var(--au-ink); }
.au-wa-icon svg { width: 28px; height: 28px; }
@media (hover: hover) and (pointer: fine) { .au-wa:hover { transform: translate(-2px, -2px); } }

/* ============================================================================
   1 · INICIO — nombre gigante, actor, bocadillo, sello
   ============================================================================ */
.au-hero { position: sticky; top: 0; z-index: 0; height: 100svh; min-height: 640px; background: var(--au-paper); }
.au-hero-stage {
  position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--hdr) + 1.2rem) var(--pad) 0; max-width: 1600px; margin-inline: auto;
}
.au-hero-intro { position: absolute; z-index: 4; top: calc(var(--hdr) + 1.6rem); left: var(--pad); max-width: 34rem; display: flex; flex-direction: column; gap: 1rem; }
.au-hero-sub { font-size: clamp(1.05rem, .6vw + .9rem, 1.25rem); font-weight: 500; max-width: 32ch; }

.au-wordmark {
  position: relative; z-index: 2; font-family: var(--f-display); font-weight: 400; font-synthesis: none;
  font-size: var(--wm); line-height: .84; letter-spacing: .005em; text-transform: uppercase;
  margin-bottom: clamp(4.5rem, 11svh, 7rem); width: fit-content;
}
.au-wm-line { position: relative; display: block; white-space: nowrap; padding-top: .02em; }
.au-wm-line.is-clip { overflow: hidden; }
.au-wm-accent { color: var(--au-main-ink); }
.au-wm-t { position: relative; display: block; z-index: 2; }
.au-wm-e { position: absolute; inset: .02em 0 auto 0; display: block; z-index: 1; opacity: 0; pointer-events: none; color: var(--au-main-ink); }

.au-actor { position: absolute; z-index: 3; right: calc(var(--pad) * .6); bottom: calc(clamp(4.5rem, 11svh, 7rem) - .5rem); width: clamp(240px, min(40vw, calc(var(--wm) * 2.25), calc(min(100vw, 1600px) - var(--pad) * 1.6 - var(--wm) * 2.5)), 640px); }
.au-actor-img { width: 100%; height: auto; transform-origin: 50% 100%; }
.au-actor .au-bubble { top: -2.4rem; left: 7%; }
.au-seal {
  position: absolute; z-index: 6; right: -1%; top: -46%; width: clamp(96px, 9.5vw, 150px); aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 50%; background: var(--au-main); color: var(--au-paper);
  border: var(--au-line) solid var(--au-ink); box-shadow: var(--au-hard);
}
.au-seal svg { width: 100%; height: 100%; animation: au-spin 16s linear infinite; }
.au-seal text { font-family: var(--f-body); font-size: 12.4px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; fill: currentColor; }
.au-seal b { position: absolute; font-size: 1.6rem; line-height: 1; }
@keyframes au-spin { to { transform: rotate(360deg); } }

.au-hero-bottom {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2.2rem;
  padding: .85rem var(--pad) calc(.85rem + env(safe-area-inset-bottom)); background: var(--au-ink); color: var(--au-paper);
  border-top: var(--au-line) solid var(--au-ink); font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.au-hero-bottom li { display: flex; align-items: center; gap: .7rem; }
.au-hero-bottom li::before { content: ""; width: 9px; height: 9px; background: var(--au-sticker); transform: rotate(45deg); flex-shrink: 0; }
.au-cue { position: absolute; z-index: 4; left: var(--pad); bottom: 4.2rem; display: flex; align-items: center; gap: .7rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--au-soft); }
.au-cue i { width: 2px; height: 34px; background: var(--au-ink); transform-origin: top; animation: au-cue 2.4s ease-in-out infinite; }
@keyframes au-cue { 0%, 100% { transform: scaleY(.2); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ============================================================================
   2 · MARQUESINA inclinada
   ============================================================================ */
.au-marquee-clip { overflow: hidden; background: transparent; padding-block: 1.6rem; margin-top: -2.6rem; z-index: 6 !important; pointer-events: none; }
.au-marquee { width: 106%; margin-left: -3%; background: var(--au-ink); color: var(--au-paper); border-block: var(--au-line) solid var(--au-ink); transform: rotate(-2deg); box-shadow: 0 6px 0 var(--au-sticker); }
.au-marquee-track { display: flex; width: max-content; will-change: transform; }
.au-marquee-group { display: flex; flex-shrink: 0; }
.au-marquee-group li {
  display: flex; align-items: center; gap: 1.6rem; padding: .55rem 0 .5rem 1.6rem;
  font-family: var(--f-display); font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.au-marquee-group li::after { content: ""; width: 14px; height: 14px; background: var(--au-sticker); transform: rotate(45deg); flex-shrink: 0; }
.au-marquee-group li:nth-child(3n+2) { color: var(--au-sticker); }

/* ============================================================================
   3 · BIENVENIDOS — sección estrella: texto palabra a palabra
   ============================================================================ */
.au-star { padding-block: 0; }
.au-star-sticky { min-height: 100svh; display: flex; align-items: center; padding-block: clamp(4rem, 9vw, 7rem); }
.au-star-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.au-polaroid {
  position: relative; margin: 0; background: var(--au-card); padding: 12px 12px 0; border: var(--au-line) solid var(--au-ink);
  border-radius: var(--au-r); box-shadow: var(--au-hard-lg); rotate: -2.5deg; max-width: 440px; justify-self: center; width: 100%;
}
.au-polaroid .au-par { aspect-ratio: 4 / 5; border-radius: 6px; border: var(--au-line) solid var(--au-ink); }
.au-polaroid .au-tag { position: absolute; right: -10px; bottom: -14px; }
.au-polaroid::after { content: ""; display: block; height: 30px; }
.au-par { position: relative; overflow: hidden; background: var(--au-ink); }
.au-par img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.au-star-copy .au-h2 { color: var(--au-paper); }
.au-star-text { font-size: clamp(1.25rem, 1.6vw + .9rem, 2rem); font-weight: 600; line-height: 1.32; max-width: 34ch; color: var(--au-paper); }
.au-star-text .wr { display: inline-block; }

/* ============================================================================
   4 · LA CASA — cita grande, pegatinas con testimonios, foto
   ============================================================================ */
.au-casa-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
.au-quote {
  position: relative; font-family: var(--f-display); font-size: clamp(3rem, 7.4vw, 6.4rem); line-height: .92; text-transform: uppercase; letter-spacing: .005em;
  margin-block: 1.1rem 1.4rem; color: var(--au-main-ink);
}
.au-quote::before { content: "\201C"; } .au-quote::after { content: "\201D"; }
.au-stickers { display: grid; gap: 1.2rem; margin-top: 2.2rem; }
.au-sticker-card {
  background: var(--au-sticker); border: var(--au-line) solid var(--au-ink); border-radius: 18px; box-shadow: var(--au-hard);
  padding: 1.1rem 1.3rem 1rem; max-width: 30rem;
}
.au-sticker-card:nth-child(1) { rotate: -1.6deg; }
.au-sticker-card:nth-child(2) { rotate: 1.4deg; margin-left: clamp(0rem, 4vw, 2.5rem); }
.au-sticker-card p { font-family: var(--f-serif); font-style: italic; font-size: 1.15rem; line-height: 1.35; }
.au-sticker-card cite { display: block; margin-top: .6rem; font-style: normal; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.au-photo { position: relative; margin: 0; justify-self: center; width: 100%; max-width: 420px; rotate: 2deg; }
.au-photo .au-par { aspect-ratio: 3 / 4; border: var(--au-line) solid var(--au-ink); border-radius: var(--au-r-lg); box-shadow: var(--au-hard-lg); }
.au-photo figcaption {
  position: absolute; left: -12px; bottom: 18px; max-width: 78%; padding: .4rem 1rem; background: var(--au-paper); border: var(--au-line) solid var(--au-ink);
  border-radius: 999px; box-shadow: 3px 3px 0 var(--au-ink); font-size: .85rem; font-weight: 700; transform: rotate(-3deg); line-height: 1.25;
}

/* ============================================================================
   5 · LA CARTA — bloque de color, tarjetas, actor sticky con bocadillo
   ============================================================================ */
.au-svc-grid { display: grid; gap: 2rem; align-items: start; }
.au-svc-actor { position: relative; }
.au-svc-actor .au-bubble { position: relative; display: block; width: fit-content; max-width: 100%; white-space: normal; margin: 0 0 1.6rem; line-height: 1.05; }
.au-svc-img { width: 100%; height: auto; transform-origin: 50% 100%; }
.au-svc-actor .au-tag { position: absolute; right: 4%; bottom: -1.1rem; transform: rotate(-4deg); }
.au-svc-head .au-h2 { color: var(--au-paper); }
.au-svc-head .au-lede { color: var(--au-paper); }
.au-svc-list { display: grid; gap: 1.4rem; margin-top: clamp(2rem, 5vw, 3rem); }
.au-card {
  position: relative; background: var(--au-card); color: var(--au-ink); border: var(--au-line) solid var(--au-ink); border-radius: var(--au-r-lg);
  box-shadow: var(--au-hard-lg); padding: clamp(1.3rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .8rem;
  transition: transform .25s cubic-bezier(.23,1,.32,1), box-shadow .25s;
}
.au-card.is-active { box-shadow: 10px 10px 0 var(--au-sticker), 10px 10px 0 3px var(--au-ink); }
.au-card-num { font-family: var(--f-display); font-size: 1.1rem; letter-spacing: .08em; color: var(--au-main-ink); }
.au-card-title { font-family: var(--f-display); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: .95; text-transform: uppercase; }
.au-card-row { display: flex; justify-content: space-between; gap: 1rem; padding-top: .6rem; border-top: 2px dashed var(--au-ink); font-size: .98rem; font-weight: 500; }
.au-card-row span:last-child { font-weight: 700; white-space: nowrap; color: var(--au-main-ink); }
.au-svc-foot { margin-top: clamp(2rem, 5vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.au-svc-note { font-size: .88rem; max-width: 42ch; color: var(--au-paper); }

/* ---------- interludio a sangre ---------- */
.au-interlude { position: relative; height: 70svh; min-height: 400px; display: grid; place-items: center; border-block: var(--au-line) solid var(--au-ink); overflow: hidden; background: var(--au-ink); }
.au-interlude .au-par { position: absolute; inset: 0; }
.au-interlude::after { content: ""; position: absolute; inset: 0; background: rgba(28,19,15,.38); }
.au-interlude-line {
  position: relative; z-index: 2; font-family: var(--f-display); font-size: clamp(4.2rem, 16vw, 15rem); line-height: .85; text-transform: uppercase; text-align: center;
  color: var(--au-paper); padding-inline: var(--pad); text-shadow: 6px 6px 0 var(--au-ink);
}

/* ============================================================================
   6 · DESTACADOS — tarjetas con pegatinas
   ============================================================================ */
.au-feat-grid { display: grid; gap: 2.4rem; margin-top: clamp(2rem, 5vw, 3rem); }
.au-feat { background: var(--au-card); border: var(--au-line) solid var(--au-ink); border-radius: var(--au-r-lg); box-shadow: var(--au-hard-lg); overflow: hidden; display: flex; flex-direction: column; }
.au-feat-media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-bottom: var(--au-line) solid var(--au-ink); padding: 5%; }
.au-feat-media.is-main { background-color: var(--au-main); background-image: var(--check); background-size: 120px 120px; }
.au-feat-media.is-sticker { background: var(--au-sticker); }
.au-feat-media.is-bottle { background: var(--au-bottle); }
.au-feat-media img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.au-feat-media.is-photo { padding: 0; }
.au-feat-media.is-photo .au-par { position: absolute; inset: 0; }
.au-feat-body { padding: clamp(1.3rem, 3vw, 1.9rem); display: flex; flex-direction: column; gap: .6rem; }
.au-feat-num { align-self: flex-start; font-family: var(--f-display); font-size: 1.2rem; letter-spacing: .06em; padding: 0 .8rem; background: var(--au-ink); color: var(--au-paper); border-radius: 999px; line-height: 1.5; }
.au-feat-title { font-family: var(--f-display); font-size: clamp(2.1rem, 3.4vw, 2.9rem); line-height: .95; text-transform: uppercase; }
.au-feat-text { color: var(--au-soft); max-width: 44ch; }

/* ============================================================================
   7 · EL ESPACIO — bento sin huecos
   ============================================================================ */
.au-gal-head .au-h2 { color: var(--au-paper); }
.au-bento { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(150px, 38vw, 330px); gap: clamp(.8rem, 2vw, 1.4rem); margin-top: clamp(2rem, 5vw, 3rem); }
.au-gal { position: relative; margin: 0; overflow: hidden; border: var(--au-line) solid var(--au-ink); border-radius: var(--au-r-lg); background: var(--au-ink); box-shadow: 6px 6px 0 var(--au-sticker); }
.au-gal:nth-child(1) { grid-row: span 2; }
.au-gal .au-par { position: absolute; inset: 0; }
.au-gal-label {
  position: absolute; z-index: 3; left: 12px; bottom: 12px; padding: .3rem .9rem; background: var(--au-paper); color: var(--au-ink); border: var(--au-line) solid var(--au-ink);
  border-radius: 999px; box-shadow: 3px 3px 0 var(--au-ink); font-size: .85rem; font-weight: 700; transform: rotate(-2deg);
}

/* ============================================================================
   7B · EVENTOS Y CATERING — dos tarjetas-entrada, sello giratorio, chips
   ============================================================================ */
.au-ev-head { position: relative; }
.au-ev-head .au-h2 { color: var(--au-paper); max-width: 13ch; }
.au-ev-head .au-lede { color: var(--au-paper); max-width: 46ch; }
.au-ev-head .au-seal--ev { display: none; background: var(--au-sticker); color: var(--au-ink); }
.au-ev-grid { display: grid; gap: 2.2rem; margin-top: clamp(2rem, 5vw, 3rem); }
.au-ev { background: var(--au-card); color: var(--au-ink); border: var(--au-line) solid var(--au-ink); border-radius: var(--au-r-lg); box-shadow: var(--au-hard-lg); overflow: hidden; display: flex; flex-direction: column; }
.au-ev:nth-child(1) { rotate: -1deg; } .au-ev:nth-child(2) { rotate: 1deg; }
.au-ev-media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-bottom: var(--au-line) solid var(--au-ink); background: var(--au-ink); }
.au-ev-media .au-par { position: absolute; inset: 0; }
.au-ev-media.is-bottle { background: var(--au-bottle); padding: 6%; }
.au-ev-media.is-bottle img { width: min(100%, 440px); height: auto; max-height: 100%; object-fit: contain; }
.au-ev-media .au-tag { position: absolute; z-index: 2; left: 14px; top: 14px; background: var(--au-sticker); }
.au-ev-body { padding: clamp(1.3rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.au-ev-title { font-family: var(--f-display); font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: .92; text-transform: uppercase; }
.au-ev-lead { font-family: var(--f-serif); font-style: italic; font-size: 1.25rem; color: var(--au-main-ink); }
.au-ev-body p:not(.au-ev-lead) { color: var(--au-soft); max-width: 48ch; }
.au-chips { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin-top: auto; padding-top: .8rem; }
.au-chips li { padding: .25rem .85rem; background: var(--au-paper); border: var(--au-line) solid var(--au-ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--au-ink); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.au-chips li:nth-child(3n+1) { rotate: -1.5deg; background: var(--au-sticker); } .au-chips li:nth-child(3n+2) { rotate: 1.2deg; } .au-chips li:nth-child(3n) { rotate: -.6deg; }
.au-ev-cta { margin-top: clamp(2.2rem, 5vw, 3.2rem); display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; }
.au-ev-cta-text { font-family: var(--f-display); font-size: clamp(2rem, 4vw, 3.2rem); line-height: .95; text-transform: uppercase; color: var(--au-paper); max-width: 22ch; }

/* ============================================================================
   8 · CONTACTO
   ============================================================================ */
.au-contact-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.au-contact-card { background: var(--au-card); border: var(--au-line) solid var(--au-ink); border-radius: var(--au-r-lg); box-shadow: var(--au-hard-lg); padding: clamp(1.4rem, 3.5vw, 2.4rem); }
.au-contact-list { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.au-contact-row { display: grid; gap: .2rem; padding-bottom: 1rem; border-bottom: 2px dashed var(--au-ink); }
.au-contact-row:last-child { border-bottom: 0; padding-bottom: 0; }
.au-contact-label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--au-main-ink); }
.au-contact-value { font-size: 1.08rem; font-weight: 500; }
.au-contact-value a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 700; }
@media (hover: hover) { .au-contact-value a:hover { background: var(--au-sticker); } }
.au-contact-card .au-btn-row { margin-top: 1.8rem; }
.au-map { position: relative; aspect-ratio: 4 / 3; border: var(--au-line) solid var(--au-ink); border-radius: var(--au-r-lg); box-shadow: var(--au-hard-lg); overflow: hidden; background: var(--au-paper-2); }
.au-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================================
   9 · CTA FINAL — actor entrando desde abajo
   ============================================================================ */
.au-cta { overflow: hidden; padding-block: clamp(4rem, 9vw, 7rem) 0; }
.au-cta-grid { display: grid; gap: 2rem; align-items: end; }
.au-cta-copy { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.au-cta-copy .au-h2 { font-size: clamp(3.6rem, 11vw, 9rem); color: var(--au-paper); margin-top: 1.2rem; }
.au-cta-copy p { font-size: clamp(1.1rem, .8vw + .95rem, 1.4rem); font-weight: 500; margin-bottom: 1.8rem; }
.au-cta-stage { position: relative; align-self: end; justify-self: center; width: min(100%, 560px); }
.au-cta-frame { position: relative; aspect-ratio: 4 / 3; border: var(--au-line) solid var(--au-ink); border-radius: var(--au-r-lg) var(--au-r-lg) 0 0; border-bottom: 0; overflow: hidden; box-shadow: var(--au-hard-lg); background: var(--au-ink); }
.au-cta-frame .au-par { position: absolute; inset: 0; }
.au-cta-actor { position: absolute; z-index: 4; left: -6%; bottom: -3%; width: 58%; transform-origin: 50% 100%; }

/* ============================================================================
   10 · PIE con nombre gigante
   ============================================================================ */
.au-footer { position: relative; z-index: 2; background: var(--au-ink); color: var(--au-paper); overflow: hidden; padding: calc(min(34vw, 420px) * .52 + 2rem) var(--pad) calc(6.5rem + env(safe-area-inset-bottom)); }
.au-footer .au-wrap { padding-inline: 0; }
.au-foot-stage { position: relative; }
.au-foot-name { position: relative; z-index: 3; font-family: var(--f-display); font-size: 16.2vw; line-height: .86; text-transform: uppercase; white-space: nowrap; color: var(--au-sticker); letter-spacing: .005em; margin-bottom: clamp(1.5rem, 4vw, 3rem); user-select: none; }
.au-foot-actor { position: absolute; right: 3%; bottom: calc(100% - 1.2rem); width: min(34vw, 420px); z-index: 2; pointer-events: none; transform-origin: 50% 100%; }
.au-foot-top { display: flex; flex-direction: column; gap: 1.6rem; padding-bottom: 1.8rem; border-bottom: 2px solid rgba(243,233,216,.28); }
.au-foot-brand { display: flex; align-items: center; gap: .6rem; }
.au-foot-brand svg { width: 28px; height: 28px; } .au-foot-brand svg path { stroke: var(--au-paper); }
.au-foot-brand .au-brand-name { font-size: 1.8rem; }
.au-foot-nav { display: flex; flex-wrap: wrap; gap: .8rem 1.8rem; font-weight: 600; }
.au-foot-nav a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) { .au-foot-nav a:hover { color: var(--au-sticker); } }
.au-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; padding-top: 1.4rem; font-size: .82rem; padding-right: 4.5rem; }
.au-foot-bottom a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.au-footer :focus-visible { outline-color: var(--au-sticker); box-shadow: none; }

/* ============================================================================
   6B · RESEÑAS — panel de nota, barras, tarjetas con pegatinas
   ============================================================================ */
.au-sticker-bg { background-color: var(--au-sticker); background-image: var(--check); background-size: 120px 120px; }
.au-rev-grid { display: grid; gap: 2.2rem; margin-top: clamp(2rem, 5vw, 3rem); align-items: start; }
.au-rev-side { display: grid; gap: 1.4rem; }
.au-rating {
  background: var(--au-card); border: var(--au-line) solid var(--au-ink); border-radius: var(--au-r-lg); box-shadow: var(--au-hard-lg);
  padding: clamp(1.3rem, 3vw, 2rem); display: grid; gap: 1.3rem; rotate: -1deg;
}
.au-rating-top { display: flex; align-items: center; gap: 1.1rem; }
.au-rating-num { font-family: var(--f-display); font-size: clamp(6rem, 15vw, 9.5rem); line-height: .8; color: var(--au-main-ink); letter-spacing: .01em; padding-top: .06em; }
.au-rating-sub { margin-top: .5rem; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.au-stars { display: inline-flex; gap: 2px; }
.au-stars svg { width: 22px; height: 22px; fill: var(--au-main); stroke: var(--au-ink); stroke-width: 1.6; stroke-linejoin: round; }
.au-rating .au-stars svg { width: 26px; height: 26px; }
.au-bars { display: grid; gap: .45rem; }
.au-bars li { display: grid; grid-template-columns: 1rem 1fr 2.4rem; align-items: center; gap: .6rem; font-size: .82rem; font-weight: 700; }
.au-bars li span { text-align: center; }
.au-bars li b { text-align: right; font-weight: 700; color: var(--au-soft); }
.au-bar { display: block; height: 14px; border: 2px solid var(--au-ink); border-radius: 999px; background: var(--au-paper-2); position: relative; overflow: hidden; }
.au-bar::before { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--au-main); border-right: 2px solid var(--au-ink); transform-origin: left; transform: scaleX(var(--k, 1)); }
.au-topics { display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.au-topics li { padding: .2rem .8rem; background: var(--au-sticker); border: var(--au-line) solid var(--au-ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--au-ink); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.au-topics li:nth-child(odd) { rotate: -2deg; } .au-topics li:nth-child(even) { rotate: 2deg; }
.au-topics b { margin-left: .3rem; padding: 0 .45rem; background: var(--au-ink); color: var(--au-paper); border-radius: 999px; }

.au-rev-actor { position: relative; padding-top: 3.6rem; max-width: 380px; }
.au-rev-actor .au-bubble { position: absolute; top: 0; left: 4%; white-space: normal; max-width: 92%; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.05; }
.au-rev-actor .au-bubble::after { right: auto; left: 38px; }
.au-rev-actor img { width: 100%; height: auto; transform-origin: 50% 100%; }

.au-rev-cards { display: grid; gap: 1.6rem; }
.au-rev {
  background: var(--au-card); border: var(--au-line) solid var(--au-ink); border-radius: var(--au-r-lg); box-shadow: var(--au-hard-lg);
  padding: clamp(1.3rem, 3vw, 1.9rem); display: flex; flex-direction: column; gap: 1rem;
}
.au-rev:nth-child(1) { rotate: 1deg; } .au-rev:nth-child(2) { rotate: -1.5deg; } .au-rev:nth-child(3) { rotate: 1.2deg; }
.au-rev-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.au-rev-head > div:nth-child(2) { flex: 1 1 8rem; min-width: 0; }
.au-avatar { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border: var(--au-line) solid var(--au-ink); border-radius: 50%; font-family: var(--f-display); font-size: 1.7rem; line-height: 1; padding-top: .12em; box-shadow: 3px 3px 0 var(--au-ink); }
.au-avatar.is-main { background: var(--au-main); color: var(--au-paper); }
.au-avatar.is-bottle { background: var(--au-bottle); color: var(--au-paper); }
.au-avatar.is-ink { background: var(--au-sticker); color: var(--au-ink); }
.au-rev-name { font-weight: 700; line-height: 1.2; }
.au-rev-src { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--au-soft); }
.au-rev-text { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.1rem, .5vw + 1rem, 1.3rem); line-height: 1.4; }
.au-rev--big .au-rev-text { font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); }
.au-rev-rates { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .9rem; border-top: 2px dashed var(--au-ink); }
.au-rev-rates li { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.au-rev-rates b { margin-left: .25rem; padding: 0 .5rem; background: var(--au-main); color: var(--au-paper); border-radius: 999px; }
.au-rev-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: clamp(2rem, 5vw, 3rem); }
.au-rev-foot p { font-size: .88rem; font-weight: 500; max-width: 36ch; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (min-width: 720px) {
  .au-ev-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .au-ev-head .au-seal--ev { display: grid; position: absolute; right: 0; top: 0; left: auto; bottom: auto; width: 120px; }
}
@media (min-width: 640px) {
  .au-rev-cards { grid-template-columns: 1fr 1fr; }
  .au-rev--big { grid-column: 1 / -1; }
  .au-svc-list { grid-template-columns: 1fr 1fr; }
  .au-feat-grid { grid-template-columns: 1fr 1fr; }
  .au-foot-top { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (min-width: 900px) {
  .au-ev-head .au-seal--ev { width: clamp(120px, 12vw, 170px); right: 4%; top: 1rem; }
  .au-ev-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
  .au-rev-grid { grid-template-columns: minmax(300px, 36%) 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
  .au-rev-side { position: sticky; top: calc(var(--hdr) + 1.5rem); }
  .au-nav, .au-nav-cta { display: inline-flex; }
  .au-burger { display: none; }
  .au-star-grid { grid-template-columns: .8fr 1.2fr; }
  .au-casa-grid { grid-template-columns: 1.15fr .85fr; }
  .au-svc-grid { grid-template-columns: minmax(250px, 32%) 1fr; gap: clamp(2rem, 4vw, 4rem); }
  .au-svc-actor { position: sticky; top: calc(var(--hdr) + 3rem); }
  .au-svc-list { grid-template-columns: 1fr; }
  .au-contact-grid { grid-template-columns: .95fr 1.05fr; }
  .au-cta-grid { grid-template-columns: 1.1fr .9fr; }
  .au-bento { grid-auto-rows: clamp(220px, 24vw, 340px); }
  .au-hero-bottom { justify-content: flex-start; padding-right: 9rem; }
}
@media (min-width: 1200px) {
  .au-feat-grid { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
  .au-feat-media { aspect-ratio: 1 / 1; }
}

/* ---------- móvil: diseño propio ---------- */
@media (max-width: 899px) {
  :root { --wm: min(31vw, 20svh); --hdr: 64px; }
  .au-hero { min-height: 740px; }
  .au-hero-stage { padding-top: calc(var(--hdr) + 1rem); }
  .au-hero-intro { top: calc(var(--hdr) + 1rem); right: var(--pad); max-width: none; gap: .7rem; }
  .au-hero-sub { max-width: 30ch; }
  .au-hero-intro .au-btn { min-height: 48px; padding-inline: 1.2rem; font-size: .88rem; }
  .au-actor { left: 50%; right: auto; transform: translateX(-50%); width: min(78vw, 360px, 40svh); bottom: calc(7rem + var(--wm) * 1.43); }
  .au-actor .au-bubble { top: -3.4rem; left: auto; right: 0; white-space: normal; width: 9.5em; text-align: center; line-height: 1.02; font-size: 1.4rem; }
  .au-actor .au-bubble::after { right: 18px; }
  .au-seal { left: -12%; top: -26%; width: 88px; }
  .au-wordmark { margin-bottom: 7rem; }
  .au-hero-bottom { gap: .35rem 1.1rem; font-size: .66rem; letter-spacing: .08em; padding-right: 5.2rem; justify-content: flex-start; }
  .au-cue { display: none; }
  .au-marquee-clip { margin-top: -2rem; }
  /* franja sticky de la carta con actor y bocadillo */
  .au-svc-actor {
    position: sticky; top: var(--hdr); z-index: 20; height: 92px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    background: var(--au-main-deep); border-block: var(--au-line) solid var(--au-ink); overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  }
  .au-svc-actor .au-bubble { margin: 0; max-width: calc(100% - 150px); font-size: 1.15rem; padding: .35rem .8rem; }
  .au-svc-actor .au-bubble::after { display: none; }
  .au-svc-img { width: 120px; flex-shrink: 0; }
  .au-svc-actor .au-tag { display: none; }
  .au-card { box-shadow: 6px 6px 0 var(--au-ink); }
  .au-card.is-active { box-shadow: 6px 6px 0 var(--au-sticker), 6px 6px 0 3px var(--au-ink); }
  .au-foot-actor { right: 2%; width: min(52vw, 230px); bottom: calc(100% + 13px - 1.2rem); }
  .au-foot-name { font-size: 16.2vw; }
  .au-cta-actor { width: 62%; }
}
/* móviles bajos: el bocadillo y el sello se apoyan sobre el plato en vez de sobre él */
@media (max-width: 899px) and (max-height: 800px) {
  .au-hero-intro { gap: .55rem; }
  .au-actor .au-bubble { top: auto; bottom: -1.2rem; right: -3%; width: auto; white-space: nowrap; font-size: 1.25rem; }
  .au-actor .au-bubble::after { bottom: auto; top: -11px; right: 26px; border: 0; border-left: var(--au-line) solid var(--au-ink); border-top: var(--au-line) solid var(--au-ink); }
  .au-seal { top: 4%; left: -8%; width: 80px; }
  .au-hero-bottom li::before { display: none; }
  .au-hero-bottom { gap: .3rem .9rem; }
  .au-wordmark { margin-bottom: 6rem; }
  .au-actor { bottom: calc(6rem + var(--wm) * 1.43); }
}
@media (max-width: 480px) {
  .au-wa { min-height: 54px; }
  .au-wa-icon { flex-basis: 48px; width: 48px; height: 48px; }
  .au-wa.is-compact { clip-path: inset(-10px -10px -10px calc(100% - 54px) round 999px); }
}


/* ============================================================================
   TABLET (600–899): composición propia, no el móvil estirado
   ============================================================================ */
@media (min-width: 600px) and (max-width: 899px) {
  :root { --wm: min(27vw, 21svh); --pad: clamp(1.75rem, 5.5vw, 3rem); }
  .au-hero { min-height: 700px; }
  .au-hero-intro { max-width: 30rem; }
  .au-hero-sub { max-width: 34ch; }
  .au-actor { width: min(58vw, 440px, 40svh); bottom: calc(5.4rem + var(--wm) * 1.43); }
  .au-actor .au-bubble { font-size: 1.7rem; right: 2%; width: auto; white-space: nowrap; }
  .au-seal { width: 112px; left: -9%; top: -30%; }
  .au-wordmark { margin-bottom: 5.4rem; }
  .au-hero-bottom { font-size: .8rem; letter-spacing: .14em; gap: .5rem 2rem; padding-right: 6rem; }
  .au-hero-bottom li::before { display: block; }
  .au-star-sticky { padding-block: clamp(3rem, 8vw, 5rem); }
  .au-map { aspect-ratio: 16 / 9; }
  .au-svc-actor { height: 104px; }
  .au-svc-img { width: 150px; }
  .au-svc-actor .au-bubble { font-size: 1.4rem; max-width: calc(100% - 190px); }
  .au-foot-actor { width: min(40vw, 320px); }
}
/* iPad grande en vertical (≥900 px de ancho pero más alto que ancho): el plato sube sobre el nombre */
@media (min-width: 900px) and (orientation: portrait) {
  :root { --wm: min(28vw, 22svh); }
  .au-actor { left: 50%; right: auto; transform: translateX(-50%); width: min(56vw, 560px, 38svh); bottom: calc(5.4rem + var(--wm) * 1.43); }
  .au-actor .au-bubble { left: auto; right: 2%; top: -2.9rem; font-size: 1.9rem; }
  .au-seal { left: -9%; right: auto; top: -30%; width: 130px; }
  .au-wordmark { margin-bottom: 5.4rem; }
}
/* reseñas en tablet: panel ancho + actor a un lado */
@media (min-width: 600px) and (max-width: 899px) {
  .au-rev-side { grid-template-columns: 1.4fr .9fr; align-items: center; }
  .au-rev-actor { max-width: none; }
}
/* cabecera con 5 enlaces: en anchos medios se oculta el nombre junto al icono */
@media (min-width: 900px) and (max-width: 1139px) {
  .au-brand-name { display: none; }
  .au-nav a { padding-inline: .7rem; }
}
/* tablet vertical y escritorio estrecho: dos columnas donde hay sitio */
@media (min-width: 720px) and (max-width: 899px) {
  .au-star-grid { grid-template-columns: .8fr 1.2fr; }
  .au-casa-grid { grid-template-columns: 1.1fr .9fr; }
  .au-cta-grid { grid-template-columns: 1.1fr .9fr; }
  .au-photo, .au-polaroid { max-width: 100%; }
}

/* ============================================================================
   PANTALLAS BAJAS (móvil horizontal, portátiles con poca altura):
   el inicio deja de fijarse a la pantalla y se lee con scroll normal
   ============================================================================ */
@media (max-height: 620px) {
  :root { --wm: clamp(120px, 17vw, 190px); --hdr: 58px; }
  .au-hero { position: relative; height: 640px; min-height: 0; }
  .au-hero-intro { max-width: 26rem; gap: .7rem; }
  .au-hero-sub { font-size: 1rem; }
  .au-wordmark { margin-bottom: 5.2rem; }
  .au-actor { left: auto; right: calc(var(--pad) * .6); transform: none; bottom: 4.6rem; width: min(40vw, 380px); }
  .au-actor .au-bubble { top: -2.4rem; bottom: auto; left: 7%; right: auto; width: auto; white-space: nowrap; font-size: 1.4rem; }
  .au-actor .au-bubble::after { top: auto; bottom: -11px; right: 22px; border: 0; border-right: var(--au-line) solid var(--au-ink); border-bottom: var(--au-line) solid var(--au-ink); }
  .au-seal { top: -46%; bottom: auto; left: auto; right: -1%; width: 100px; }
  .au-hero-bottom { justify-content: flex-start; font-size: .78rem; padding-right: 6rem; }
  .au-hero-bottom li::before { display: block; }
  .au-cue { display: none; }
  .au-star-sticky { min-height: 0; }
  .au-interlude { height: 80svh; min-height: 300px; }
  .au-panel { justify-content: flex-start; flex-direction: row; flex-wrap: wrap; align-content: center; gap: .4rem 1.6rem; }
  .au-panel a:not(.au-btn) { font-size: 3rem; }
}
@media (max-height: 620px) and (max-width: 899px) {
  .au-svc-actor { height: 66px; }
  .au-svc-img { width: 100px; }
  .au-svc-actor .au-bubble { font-size: 1rem; padding: .25rem .7rem; max-width: calc(100% - 130px); }
}
@media (max-height: 620px) and (min-width: 900px) {
  .au-svc-actor { top: calc(var(--hdr) + 1rem); max-width: 260px; }
}

/* ============================================================================
   TÁCTIL: objetivos de 44 px
   ============================================================================ */
.au-foot-nav a, .au-foot-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
@media (pointer: coarse) {
  .au-contact-value a { display: inline-block; padding-block: .45rem; }
  .au-btn { min-height: 50px; }
}

/* ============================================================================
   PANTALLAS GRANDES
   ============================================================================ */
@media (min-width: 1700px) {
  :root { --max: 1440px; --pad: 5rem; }
  .au-bento { grid-auto-rows: 380px; }
}

/* ============================================================================
   MOVIMIENTO — estados ocultos solo con html.motion (progressive enhancement)
   ============================================================================ */
html.motion .au-hero-intro, html.motion .au-hero-bottom, html.motion .au-actor-img,
html.motion .au-actor .au-bubble, html.motion .au-seal { opacity: 0; }
html.motion .au-wm-t { opacity: 0; }
html.motion [data-au="benefit"], html.motion [data-au="reveal"], html.motion .au-polaroid { opacity: 0; }
html.motion .au-gal { clip-path: inset(0% 0% 100% 0% round 28px); }
html.hero-off .au-seal svg, html.hero-off .au-cue i { animation-play-state: paused; }
html.motion .au-gal .au-par, html.motion .au-polaroid, html.motion .au-photo { will-change: transform; }
@media (min-width: 900px) {
  html.motion .au-star { height: min(230vh, calc(100vh + 900px)); }
  html.motion .au-star-sticky { position: sticky; top: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .au-card:hover { transform: translate(-3px, -3px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .au-seal svg, .au-cue i { animation: none; }
  .au-btn, .au-card, .au-wa, .au-header, .au-brand { transition: none; }
}
@media print {
  .au-header, .au-progress, .au-panel, .au-wa, .au-cue { display: none; }
  .au-hero { position: relative; }
}