/* =============================================================================
   MAHELET Beauty Esthetic · site.css
   Sistema de diseño de la web pública. MOBILE FIRST: la base es para 360–390 px y
   todo lo demás se añade con min-width (600, 900, 1200 y 1440 px).

   Marca (DESIGN.md) pasada por las reglas de la skill design-taste-frontend:
   - sin eyebrows, filetes, cajas con borde, sombras, desenfoques ni degradados;
   - titulares en una sola cara y un solo color;
   - las superficies se separan por escalones de tono y por espacio.
   Se mantienen la paleta, Cormorant Garamond + Outfit, el logo, el mármol y el arco.
   ========================================================================== */

/* ---------- Fuentes (autoalojadas, licencia OFL en ../fonts) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-600-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: "Outfit";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/outfit-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;
}
/* Respaldos con métricas parecidas: el texto no salta cuando llega la fuente. */
@font-face { font-family: "Cormorant respaldo"; src: local("Georgia"); size-adjust: 88%; ascent-override: 94%; descent-override: 29%; }
@font-face { font-family: "Outfit respaldo"; src: local("Arial"); size-adjust: 99%; ascent-override: 101%; descent-override: 26%; }

/* ---------- Tokens ---------- */
:root {
  /* Paleta de la marca. El fondo marfil de DESIGN.md (#FBF7F2) se cambia por una porcelana rosada
     sacada del mármol: el marfil amarillento cae en la familia «cream» que la skill descarta. */
  --porcelana: #fbf6f4;
  --crema: #fffaf8;
  --superficie: #f4ebe8;
  --superficie-2: #ebdfdb;
  --rosa: #efd3d0;
  --rosa-profundo: #ddb8b5;
  --vino: #4a2530;
  --vino-hover: #5e3341;
  --vino-suave: #6e4a52;
  --malva: #3a2a2e;
  --oro: #af893d; /* #B08A3E de DESIGN.md, un punto más oscuro: llega a 3:1 sobre porcelana (indicadores) */
  --oro-claro: #ddbb74;
  --oro-oscuro: #8a5a22;
  --exito: #4f7a5a;
  --exito-tinta: #2e4d36;
  --exito-fondo: #e2ede4;
  --error: #a3372b;
  --error-tinta: #7a2a21;
  --error-fondo: #f7e2df;
  --whatsapp: #18794a;
  --whatsapp-hover: #11603a;
  --borde-campo: #8f7077; /* contraste ≥ 3:1 con el fondo (WCAG 1.4.11) */
  --velo: rgb(74 37 48 / 0.42);

  /* Papeles: cada banda los redefine. */
  --bg: var(--porcelana);
  --ink: var(--malva);
  --ink-titulo: var(--vino);
  --muted: var(--vino-suave);
  --foco: var(--oro-oscuro);

  /* Tipografía: pocos tamaños y muy separados. */
  --font-display: "Cormorant Garamond", "Cormorant respaldo", Georgia, serif;
  --font-text: "Outfit", "Outfit respaldo", "Helvetica Neue", Arial, sans-serif;
  --step-small: 0.875rem;                                   /* 14 px */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);  /* 17–19 */
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);    /* 20–26 */
  --step-sub: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);       /* 24–36: frases y títulos pequeños */
  --step-head: clamp(2.125rem, 1.45rem + 2.6vw, 3.4rem);    /* 34–54 */
  --step-display: clamp(2.8rem, 1.2rem + 6.4vw, 5.6rem);    /* 45–90 */
  --step-titular: clamp(2.125rem, 0.6rem + 5.6vw, 5.6rem);  /* 34–90: titulares de páginas interiores (dos líneas también en el celular) */

  /* Espacio y marco */
  --margin: clamp(1.25rem, 0.55rem + 2.9vw, 3rem);          /* 20 → 48 px */
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --section: clamp(5.5rem, 3rem + 8vw, 14rem);              /* 88 → 224 px entre secciones */
  --content-max: 77.5rem;                                   /* 1240 px */
  --header-h: 4rem;
  --bar-h: 4.75rem;

  /* Formas: píldora para controles, arco para fotos, radio grande para superficies. */
  --r-pill: 999px;
  --r-surface: 1.75rem;
  --r-field: 0.875rem;
  --r-media: 1.25rem;

  /* Movimiento (curvas de la skill; interfaz por debajo de 300 ms) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  --stagger: 70ms;

  color-scheme: light;
}
@media (min-width: 900px) {
  :root { --header-h: 5.25rem; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class], .pie ul, .menu-movil ul, .wa-selector ul, .migas ol { padding: 0; list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
address { font-style: normal; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-titulo);
  text-wrap: balance;
  hyphens: none;
}
h1 { font-size: var(--step-display); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: var(--step-head); line-height: 1.06; letter-spacing: -0.015em; }
h3 { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.005em; }
h4 { font-size: var(--step-body); font-weight: 600; line-height: 1.35; color: var(--ink-titulo); }
p, li { text-wrap: pretty; }
p { max-width: 62ch; }
p + p { margin-top: 0.9em; }
strong { font-weight: 600; }

::selection { background: var(--vino); color: var(--porcelana); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
/* El anillo sigue el radio: en los enlaces de texto, esquinas suaves. */
.nav__enlace, .enlace, .enlace-flecha, .pie a, .menu-movil a, .migas a { border-radius: 0.3rem; }
:target { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Controles: respuesta inmediata al tocar y nada de selección accidental. */
a, button, [role="button"], summary, label { touch-action: manipulation; }
button, .boton, summary, [role="button"] { -webkit-user-select: none; user-select: none; }

/* Toda rejilla de una columna declara minmax(0, 1fr): sin él, un hijo ancho (un carrusel, una tabla)
   ensancha la columna y la página entera se desborda. :where() no suma especificidad, así que las
   variantes de varias columnas de cada componente siguen mandando. */
:where(.pila, .rejilla, .profesional, .carta, .cabecera-interior, .cabecera-interior__texto, .preguntas, .campo,
  .menu-movil__lista, .menu-movil__contacto, .wa-selector ul, .pie__fila, .pie__lugares,
  .error-pagina, .error-pagina__texto, .error-pagina__fotos figure,
  .areas__marco, .areas__cabeza, .areas__mosaico, .equipo-inicio__cabeza, .cita__marco, .cita__cabeza, .reserva-final__marco, .ficha,
  .categoria__marco, .categoria__cabeza, .detalles__marco, .cabeza-servicio__marco, .cabeza-servicio__texto, .puntos__marco,
  .pasos__marco, .incluidos__marco, .incluidos__cabeza, .incluidos__grupos, .otros__marco, .cierre-simple__marco,
  .cabeza-equipo__marco, .suelta__marco, .persona, .cabeza-perfil__marco, .cabeza-perfil__texto, .resto-equipo__marco,
  .cabeza-galeria__marco, .contacto-lineas__marco, .contacto-salon__marco, .contacto-preguntas__marco,
  .contacto-preguntas__cabeza, .cabeza-legal__marco, .documento__parte, .reserva-inicio__cabeza, .opciones, .opcion__texto,
  .otras-opciones) {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- Utilidades de texto ---------- */
.cara-display { font-family: var(--font-display); font-weight: 600; color: var(--ink-titulo); }
.titular { font-size: var(--step-display); line-height: 1.02; letter-spacing: -0.02em; }
.titulo { font-size: var(--step-head); line-height: 1.06; letter-spacing: -0.015em; }
.entradilla { font-size: var(--step-lead); line-height: 1.38; max-width: 40ch; }
.pequeno { font-size: var(--step-small); line-height: 1.5; }
.secundario { color: var(--muted); }
.cifras { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.enlace {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}
.enlace-flecha { display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.75rem; font-weight: 500; color: var(--ink-titulo); text-decoration: none; }
.enlace-flecha .icono { transition: transform var(--t-ui) var(--ease-out); }

/* ---------- Marco y bandas ---------- */
.envoltura {
  width: min(100% - 2 * var(--margin), var(--content-max));
  margin-inline: auto;
}
.seccion { padding-block: calc(var(--section) / 2); }
.seccion--compacta { padding-block: calc(var(--section) / 3); }

/* Cada banda cambia el fondo entero y redefine sus tintas (nada se funde con nada). */
.banda--porcelana { --bg: var(--porcelana); background: var(--porcelana); }
.banda--superficie { --bg: var(--superficie); background: var(--superficie); }
.banda--rosa { --bg: var(--rosa); --muted: var(--vino); background: var(--rosa); color: var(--vino); }
.banda--vino {
  --bg: var(--vino); --ink: var(--porcelana); --ink-titulo: var(--porcelana);
  --muted: var(--rosa); --foco: var(--oro-claro);
  background: var(--vino); color: var(--porcelana);
}
.banda--marmol { position: relative; isolation: isolate; color: var(--vino); }
.banda--marmol > .banda__fondo {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover;
}

.pila { display: grid; gap: var(--gap, 1rem); }
.pila--amplia { --gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }

/* Rejilla de 12 columnas desde 900 px. */
.rejilla { display: grid; gap: var(--gutter); }
@media (min-width: 900px) {
  .rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--vino);
  color: var(--porcelana);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.boton:active { transform: scale(0.97); }
.boton--secundario { background: var(--rosa); color: var(--vino); }
.banda--rosa .boton--secundario { background: var(--crema); }
.boton--whatsapp { background: var(--whatsapp); color: #fff; }
.boton--claro { background: var(--porcelana); color: var(--vino); }
.boton--ancho { width: 100%; }
.boton--icono { width: 3rem; padding: 0; }
.boton:disabled, .boton[aria-disabled="true"] {
  background: var(--superficie-2); color: var(--vino-suave); cursor: not-allowed; transform: none;
}
.boton.is-cargando { pointer-events: none; }
.boton.is-cargando .icono { animation: girar 900ms linear infinite; }
@media (min-width: 900px) {
  .boton { min-height: 3.375rem; padding-inline: 1.75rem; }
  .boton--icono { width: 3.375rem; padding: 0; }
}

/* Hover solo con ratón: en el celular un hover se queda pegado. */
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--vino-hover); }
  .boton--secundario:hover { background: var(--rosa-profundo); }
  .boton--whatsapp:hover { background: var(--whatsapp-hover); }
  .boton--claro:hover { background: var(--rosa); }
  .boton:disabled:hover, .boton[aria-disabled="true"]:hover { background: var(--superficie-2); }
  .enlace:hover { text-decoration-color: currentColor; }
  .enlace-flecha:hover .icono { transform: translateX(3px); }
}

/* ---------- Arco (la silueta de la marca, tomada del flyer) ---------- */
/* --ratio = ancho / alto. La parte de arriba es un semicírculo exacto en cualquier proporción. */
.arco {
  --ratio: 0.75;
  position: relative;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  border-radius: 50% 50% var(--r-media) var(--r-media) / calc(var(--ratio) * 50%) calc(var(--ratio) * 50%) var(--r-media) var(--r-media);
  background: var(--superficie);
}
.arco > img, .arco > picture > img, .arco > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.arco--alto { --ratio: 0.62; }
.arco--medio { --ratio: 0.7; }
.arco--bajo { --ratio: 0.82; }
.foto {
  overflow: hidden;
  border-radius: var(--r-media);
  background: var(--superficie);
}
.foto > img { width: 100%; height: 100%; object-fit: cover; }

/* Arcos en fila: carrusel deslizable en el celular (la siguiente foto asoma en el borde, a propósito)
   y rejilla escalonada desde 900 px (cada arco con su altura, alineados por abajo). */
.carrusel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(13rem, 70%);
  gap: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { scroll-snap-align: start; }
@media (min-width: 600px) { .carrusel { grid-auto-columns: minmax(13rem, 44%); } }
@media (min-width: 900px) {
  .carrusel { grid-auto-flow: row; grid-template-columns: repeat(var(--columnas, 4), minmax(0, 1fr)); align-items: end; overflow: visible; }
}

/* Retrato circular */
.retrato {
  display: block;
  width: var(--tam, 3.5rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--superficie);
  flex: none;
}
.retrato > img { width: 100%; height: 100%; object-fit: cover; }

/* Marcador honesto cuando falta una foto real (nunca una cara generada). */
.foto-pendiente {
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--superficie);
  color: var(--vino-suave);
  font-size: var(--step-small);
  text-align: center;
}

/* ---------- Profesional ---------- */
.profesional { display: grid; gap: 1rem; align-content: start; }
.profesional__foto { display: block; }
.profesional__nombre { font-size: var(--step-head); line-height: 1.04; }
.profesional__especialidad { color: var(--muted); font-weight: 500; }
.profesional__nota { font-size: var(--step-small); color: var(--muted); max-width: 34ch; }

/* ---------- Carta de servicios (sin líneas: aire y alineación) ---------- */
.carta { display: grid; gap: 0.25rem; }
.carta__grupo + .carta__grupo { margin-top: 2.5rem; }
.carta__grupo > h3 { margin-bottom: 0.75rem; }
.servicio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nombre nombre" "desc desc" "meta reservar";
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 1rem 1.125rem;
  border-radius: var(--r-field);
  background: var(--crema);
}
.servicio:nth-child(even) { background: transparent; }
.servicio__nombre { grid-area: nombre; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; color: var(--ink-titulo); }
.servicio__descripcion { grid-area: desc; font-size: var(--step-small); color: var(--muted); }
.servicio__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; margin-top: 0.25rem; font-size: var(--step-small); color: var(--muted); }
.servicio__reservar { grid-area: reservar; justify-self: end; display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (min-width: 900px) {
  .servicio {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "nombre meta reservar" "desc meta reservar";
    padding: 1.1rem 1.5rem;
  }
  .servicio__meta { gap: 1.5rem; margin-top: 0; font-size: 1rem; }
}

/* ---------- Cabecera interior (plantilla de páginas internas) ---------- */
.cabecera-interior { display: grid; gap: 2rem; align-items: center; padding-block: clamp(2rem, 1rem + 4vw, 5rem); }
.cabecera-interior__texto { display: grid; gap: 1.25rem; }
.cabecera-interior__foto { width: min(100%, 22rem); justify-self: center; }
.migas { font-size: var(--step-small); color: var(--muted); }
.migas ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.migas li + li::before { content: "/"; margin-right: 0.5rem; }
.migas a { text-decoration: none; }
@media (min-width: 900px) {
  .cabecera-interior { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cabecera-interior__foto { justify-self: end; }
}

/* ---------- Filtros (píldoras con aria-pressed) ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filtro {
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border-radius: var(--r-pill);
  background: var(--superficie);
  color: var(--vino);
  font-weight: 500;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.filtro:active { transform: scale(0.97); }
.filtro[aria-pressed="true"] { background: var(--vino); color: var(--porcelana); }
@media (hover: hover) and (pointer: fine) {
  .filtro:hover { background: var(--superficie-2); }
  .filtro[aria-pressed="true"]:hover { background: var(--vino-hover); }
}

/* ---------- Preguntas (acordeón nativo) ---------- */
.preguntas { display: grid; gap: 0.5rem; }
.pregunta { border-radius: var(--r-field); background: var(--crema); }
.pregunta > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: 0.75rem 1.25rem;
  font-weight: 500; color: var(--ink-titulo); cursor: pointer; list-style: none;
}
.pregunta > summary::-webkit-details-marker { display: none; }
.pregunta > summary .icono { flex: none; transition: transform var(--t-ui) var(--ease-out); }
.pregunta[open] > summary .icono { transform: rotate(180deg); }
.pregunta__respuesta { padding: 0 1.25rem 1.25rem; color: var(--ink); }

/* ---------- Formularios ---------- */
.campo { display: grid; gap: 0.5rem; }
.campo__etiqueta { font-size: var(--step-small); font-weight: 600; line-height: 1.3; color: var(--ink-titulo); }
.campo__ayuda { font-size: var(--step-small); color: var(--muted); }
.campo__error { display: flex; gap: 0.4rem; align-items: flex-start; font-size: var(--step-small); font-weight: 500; color: var(--error); }
.campo__error .icono { flex: none; margin-top: 0.1rem; }
input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="search"], [type="date"], [type="time"], [type="number"], [type="url"]),
select,
textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--borde-campo);
  border-radius: var(--r-field);
  background: var(--crema);
  color: var(--ink);
  font-size: max(1rem, 16px); /* nunca menos de 16 px: iOS haría zoom */
  line-height: 1.4;
  transition: border-color var(--t-hover) ease;
}
textarea { min-height: 7rem; resize: vertical; }
select { appearance: none; padding-right: 2.75rem; background-image: none; }
.campo__select { position: relative; }
.campo__select .icono { position: absolute; right: 1rem; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--vino); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-color: var(--vino); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); }
input::placeholder, textarea::placeholder { color: var(--vino-suave); opacity: 0.85; }

.opcion {
  display: flex; align-items: flex-start; gap: 0.75rem;
  min-height: 2.75rem; padding-block: 0.5rem;
  cursor: pointer;
}
.opcion input[type="checkbox"], .opcion input[type="radio"] {
  flex: none; width: 1.375rem; height: 1.375rem; margin: 0.15rem 0 0;
  accent-color: var(--vino);
}

/* Interruptor (checkbox con role="switch"). Encendido en verde semántico. */
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; cursor: pointer; }
.interruptor input[role="switch"] {
  appearance: none; flex: none; position: relative;
  width: 3rem; height: 1.75rem; margin: 0;
  border: 1.5px solid var(--borde-campo); border-radius: var(--r-pill);
  background: var(--superficie-2);
  cursor: pointer;
  transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease;
}
.interruptor input[role="switch"]::before {
  content: ""; position: absolute; top: 50%; left: 0.2rem;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--porcelana);
  translate: 0 -50%;
  transition: transform var(--t-ui) var(--ease-out);
}
.interruptor input[role="switch"]:checked { background: var(--exito); border-color: var(--exito); }
.interruptor input[role="switch"]:checked::before { transform: translateX(1.2rem); }

/* ---------- Avisos ---------- */
.aviso {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 1rem 1.25rem;
  border-radius: var(--r-field);
  background: var(--superficie);
  color: var(--ink);
}
.aviso .icono { flex: none; margin-top: 0.15rem; color: var(--vino); }
.aviso--exito { background: var(--exito-fondo); color: var(--exito-tinta); }
.aviso--exito .icono { color: var(--exito-tinta); }
.aviso--error { background: var(--error-fondo); color: var(--error-tinta); }
.aviso--error .icono { color: var(--error-tinta); }

/* ---------- Diálogo de confirmación ---------- */
.dialogo {
  width: min(100% - 2 * var(--margin), 32rem);
  max-height: calc(100dvh - 2rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border: 0;
  border-radius: var(--r-surface);
  background: var(--crema);
  color: var(--ink);
  overscroll-behavior: contain;
  opacity: 1;
  transform: none;
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), display var(--t-ui) allow-discrete, overlay var(--t-ui) allow-discrete;
}
.dialogo::backdrop { background: var(--velo); }
.dialogo h2 { font-size: var(--step-lead); line-height: 1.25; }
.dialogo__acciones { display: flex; flex-wrap: wrap-reverse; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; }
@starting-style { .dialogo[open] { opacity: 0; transform: scale(0.97); } }

/* ---------- Saltar al contenido ---------- */
.saltar {
  position: absolute; left: var(--margin); top: 0.5rem; z-index: 100;
  padding: 0.75rem 1.25rem; border-radius: var(--r-pill);
  background: var(--vino); color: var(--porcelana); font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--t-ui) var(--ease-out);
}
.saltar:focus { transform: none; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--porcelana);
}
.cabecera__barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.cabecera__logo { display: inline-flex; align-items: center; min-height: 2.75rem; flex: none; }
.cabecera__logo img { width: auto; height: 2.75rem; }
.nav { display: none; }
.nav__lista { display: flex; gap: clamp(1.25rem, 0.2rem + 1.8vw, 2.5rem); }
.nav__enlace {
  position: relative; display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--vino); font-weight: 500; text-decoration: none;
  transition: color var(--t-hover) ease;
}
.nav__enlace[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.35rem;
  height: 3px; border-radius: 2px; background: var(--oro);
}
.cabecera__reservar { display: none; }
.cabecera__menu {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 0.25rem 0 0.75rem;
  color: var(--vino); font-weight: 500; text-decoration: none;
}
@media (min-width: 900px) {
  .cabecera__logo img { height: 3.5rem; }
  .nav { display: block; }
  .cabecera__reservar { display: inline-flex; }
  .cabecera__menu { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .nav__enlace:hover { color: var(--oro-oscuro); }
}

/* ---------- Menú del celular (diálogo a pantalla completa) ---------- */
.menu-movil {
  width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; inset: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) var(--margin) calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
  border: 0;
  background: var(--rosa);
  color: var(--vino);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 1;
  transition: opacity var(--t-ui) var(--ease-out), display var(--t-ui) allow-discrete, overlay var(--t-ui) allow-discrete;
}
.menu-movil::backdrop { background: var(--velo); }
.menu-movil[open] { display: flex; flex-direction: column; gap: 1.75rem; }
@starting-style { .menu-movil[open] { opacity: 0; } }
.menu-movil__cabeza { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }
.menu-movil__cabeza img { width: auto; height: 2.75rem; }
.menu-movil__cerrar { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--vino); }
.menu-movil__cerrar:active { transform: scale(0.94); }
.menu-movil__lista { display: grid; gap: 0.25rem; }
.menu-movil__lista a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 3.25rem;
  font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 2.5vw, 2.5rem); font-weight: 600; line-height: 1.1;
  color: var(--vino); text-decoration: none;
}
.menu-movil__lista a[aria-current="page"] { color: var(--oro-oscuro); }
.menu-movil__equipo h2 { font-family: var(--font-text); font-size: 1rem; font-weight: 600; color: var(--vino); margin-bottom: 0.75rem; }
.menu-movil__equipo ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.menu-movil__equipo a {
  display: grid; justify-items: center; gap: 0.4rem;
  min-height: 2.75rem; text-decoration: none; font-size: var(--step-small); font-weight: 500;
}
.menu-movil__equipo .retrato { --tam: 3.75rem; }
.menu-movil__contacto { display: grid; gap: 0.25rem; margin-top: auto; }
.menu-movil__contacto a {
  display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem;
  text-decoration: none; font-weight: 500;
}
.menu-movil__contacto span { color: var(--vino-suave); font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
  .menu-movil[open] .menu-movil__lista li { animation: entrar 360ms var(--ease-out) backwards; }
  .menu-movil[open] .menu-movil__lista li:nth-child(2) { animation-delay: 40ms; }
  .menu-movil[open] .menu-movil__lista li:nth-child(3) { animation-delay: 80ms; }
  .menu-movil[open] .menu-movil__lista li:nth-child(4) { animation-delay: 120ms; }
  .menu-movil[open] .menu-movil__lista li:nth-child(5) { animation-delay: 160ms; }
}

/* ---------- Barra fija del celular y botón flotante de WhatsApp ---------- */
.con-barra { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
.barra-movil {
  position: fixed; inset: auto 0 0; z-index: 40;
  display: flex; align-items: center; gap: 0.75rem;
  min-height: var(--bar-h);
  padding: 0.75rem var(--margin) calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--superficie);
}
.barra-movil .boton--primario { flex: 1; }
.barra-movil .boton--whatsapp { flex: none; width: 3rem; padding: 0; }
/* Celular en horizontal: la barra ocupa menos alto (los botones siguen en 44 px). */
@media (max-height: 500px) {
  :root { --bar-h: 3.75rem; }
  .barra-movil { padding-block: 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); }
  .barra-movil .boton { min-height: 2.75rem; }
  .barra-movil .boton--whatsapp { width: 2.75rem; }
}
.wa-flotante { display: none; }
@media (min-width: 900px) {
  .con-barra { padding-bottom: 0; }
  .barra-movil { display: none; }
  .wa-flotante {
    position: fixed; z-index: 40;
    right: max(var(--margin), env(safe-area-inset-right, 0px));
    bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
    display: inline-grid; place-items: center;
    width: 3.5rem; height: 3.5rem; border-radius: 50%;
    background: var(--whatsapp); color: #fff;
    transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
  }
  .wa-flotante:active { transform: scale(0.94); }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .wa-flotante:hover { background: var(--whatsapp-hover); }
}

/* Selector de línea de WhatsApp (Popover API; con clase .is-abierto donde no exista). */
.wa-selector {
  display: none;
  position: fixed; inset: auto var(--margin) calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 0.75rem) auto;
  margin: 0;
  width: min(21rem, 100vw - 2 * var(--margin));
  padding: 0.75rem;
  border: 0;
  border-radius: var(--r-surface);
  background: var(--vino);
  color: var(--porcelana);
  transform-origin: bottom right;
  opacity: 1;
  transform: none;
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), display var(--t-ui) allow-discrete, overlay var(--t-ui) allow-discrete;
}
/* Reglas separadas: un navegador sin Popover API descartaría la regla entera por «:popover-open». */
.wa-selector.is-abierto { display: block; }
.wa-selector:popover-open { display: block; }
@starting-style { .wa-selector.is-abierto { opacity: 0; transform: scale(0.97) translateY(6px); } }
@starting-style { .wa-selector:popover-open { opacity: 0; transform: scale(0.97) translateY(6px); } }
.wa-selector__titulo { padding: 0.5rem 0.75rem 0.25rem; font-weight: 600; }
.wa-selector ul { display: grid; gap: 0.25rem; }
.wa-selector a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.25rem 0.75rem;
  min-height: 3.5rem; padding: 0.5rem 0.75rem; border-radius: var(--r-field);
  color: var(--porcelana); text-decoration: none;
}
.wa-selector a .icono { grid-row: span 2; color: var(--oro-claro); }
.wa-selector a strong { font-weight: 600; }
.wa-selector a span { color: var(--rosa); font-size: var(--step-small); }
@media (min-width: 900px) {
  .wa-selector { bottom: calc(max(1.5rem, env(safe-area-inset-bottom, 0px)) + 4.25rem); }
}
@media (hover: hover) and (pointer: fine) {
  .wa-selector a:hover { background: var(--vino-hover); }
}

/* ---------- Pie: el nombre primero y las formas de llegar debajo ---------- */
/* El nombre abre el pie, cortado por arriba por el borde de la banda (el viewBox del SVG empieza por
   debajo de la línea de las mayúsculas). Banda vino: la última del recorrido porcelana → rosa → vino. */
.pie {
  --bg: var(--vino); --ink: var(--porcelana); --ink-titulo: var(--porcelana); --muted: var(--rosa); --foco: var(--oro-claro);
  background: var(--vino); color: var(--porcelana); overflow: clip;
}
.pie__nombre { display: block; width: 100%; height: auto; color: var(--rosa); }
.pie__nombre text { font-family: var(--font-display); font-weight: 600; fill: currentColor; }
.pie__fila { display: grid; gap: 3rem; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.pie__lugares { display: grid; gap: 1.25rem; }
.pie__lugares a {
  display: inline-block; padding-block: 0.2rem;
  font-family: var(--font-display); font-size: var(--step-sub); font-weight: 600; line-height: 1.1;
  color: var(--oro-claro); text-decoration: none; overflow-wrap: anywhere;
  transition: color var(--t-hover) ease;
}
.pie__lugares span { display: block; margin-top: 0.15rem; font-size: var(--step-small); color: var(--rosa); }
.pie__columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.pie__columnas h2 {
  margin-bottom: 0.35rem; font-family: var(--font-text); font-size: var(--step-small); font-weight: 600;
  line-height: 1.3; letter-spacing: 0; color: var(--porcelana);
}
.pie__columnas a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-size: var(--step-small); color: var(--rosa); text-decoration: none; transition: color var(--t-hover) ease;
}
.pie__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 1.5rem;
  margin-top: clamp(3rem, 2rem + 4vw, 6rem); padding-bottom: 1rem; font-size: var(--step-small); color: var(--rosa);
}
.pie__legal p { max-width: none; }
.pie__legal ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.pie__legal a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--porcelana); }
@media (min-width: 900px) {
  .pie { min-height: 90svh; }
  .pie__fila { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .pie__lugares { grid-column: 1 / 6; }
  .pie__columnas { grid-column: 7 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (hover: hover) and (pointer: fine) {
  .pie__lugares a:hover { color: var(--porcelana); }
  .pie__columnas a:hover, .pie__legal a:hover { color: var(--oro-claro); }
}

/* ---------- Página de error ---------- */
.error-detalle { display: block; overflow-x: auto; }
.error-detalle pre { white-space: pre-wrap; }
.error-pagina { display: grid; gap: 2.5rem; align-items: center; }
.error-pagina__texto { display: grid; gap: 1.25rem; }
.error-pagina__fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); align-items: end; }
@media (min-width: 600px) { .error-pagina__fotos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.error-pagina__fotos figure { display: grid; gap: 0.6rem; }
.error-pagina__fotos figcaption { font-size: var(--step-small); color: var(--muted); }
.error-pagina__fotos a { text-decoration: none; }
@media (min-width: 900px) {
  .error-pagina { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* =============================================================================
   Portada. Primera pantalla a sangre con el logo sobre el mármol, una banda de servicios en movimiento y secciones que alternan porcelana, rosa y vino para que la página respire.
   ============================================================================= */

/* ---------- Primera pantalla: el logo 3D arriba sobre el mármol, el lema debajo y las manos ---------- */
/* El fondo es la imagen quieta del vídeo; el vídeo (la luz que cruza el logo) se pone encima cuando arranca.
   Los dos se recortan con «cover». El lema va justo bajo el logo: sin JS a una altura fija; con JS,
   probador.js calcula --lema-y con la misma cuenta de «cover». .portada__escena es lo que mueve la cámara
   del probador, siempre con transform. El suelo de 30rem evita que el logo y el lema se crucen en un celular
   apaisado. */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(30rem, calc(100svh - var(--header-h))); background: var(--rosa);
}
.portada__escena { position: absolute; inset: 0; transform-origin: 0 0; }
.portada__fondo, .portada__fondo picture { position: absolute; inset: 0; }
/* Anclado arriba: en pantallas más anchas que la foto se recortan las muñecas, nunca el logo. */
.portada__fondo img, .portada__fondo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.portada__fondo video { transition: opacity var(--t-ui) ease; }
.portada__texto { position: absolute; top: var(--lema-y, 31%); left: 0; right: 0; padding: 0 var(--margin); text-align: center; }
.portada__lema {
  max-width: 24ch; margin-inline: auto;
  font-family: var(--font-display); font-size: var(--step-sub); font-weight: 600; line-height: 1.2;
  color: var(--vino); text-wrap: balance;
}
@media (orientation: landscape) {
  .portada__texto { top: var(--lema-y, 36%); }
}
@media (min-width: 900px) {
  .portada__lema { max-width: none; }
}

/* ---------- Las manos: tocarlas abre el probador (la señal es una píldora de crema con un punto que late) ---------- */
.portada__manos {
  position: absolute; z-index: 2; display: block; margin: 0; padding: 0; border: 0;
  border-radius: 40% 40% 0 0; background: none; cursor: pointer;
}
.portada__manos[hidden], .probador[hidden] { display: none; }
.portada__manos:focus-visible { outline: 2px solid var(--vino); outline-offset: -0.5rem; }
.portada__senal {
  position: absolute; left: 50%; top: var(--senal-y, 50%); translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 1.1rem 0 0.95rem;
  border-radius: var(--r-pill); background: var(--crema); color: var(--vino);
  font-size: var(--step-small); font-weight: 500; white-space: nowrap;
  opacity: 0; scale: 0.96; transition: opacity var(--t-ui) ease, scale var(--t-ui) var(--ease-out);
}
.portada__punto { position: relative; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--oro); }
.portada__punto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--oro); animation: latido 1800ms var(--ease-out) infinite; }
@keyframes latido { from { opacity: 0.6; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }
/* En el celular la señal se ve siempre (no hay «pasar por encima»); con ratón, al acercarse o con el foco. */
@media (hover: none) {
  .portada__senal { opacity: 1; scale: 1; }
}
.portada.is-cerca .portada__senal, .portada__manos:focus-visible .portada__senal { opacity: 1; scale: 1; }
/* Al acercarse, la escena se inclina un poco hacia las manos: invita a tocarlas. */
@media (hover: hover) and (pointer: fine) {
  .portada.con-probador:not(.is-probando) .portada__escena { transition: transform 1200ms var(--ease-out); }
  .portada.is-cerca:not(.is-probando) .portada__escena { transform: scale(1.015); transform-origin: 50% 80%; }
}
@media (prefers-reduced-motion: reduce) {
  .portada__punto::after { animation: none; }
}

/* ---------- El probador: el lienzo encima de la escena y el panel (abajo en el celular, al lado en la computadora) ---------- */
.probador { position: absolute; inset: 0; z-index: 3; }
.probador__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.probador__panel {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 0.85rem; max-height: 58%; overflow-y: auto;
  padding: 1.25rem var(--margin) calc(1.25rem + env(safe-area-inset-bottom));
  border-radius: var(--r-surface) var(--r-surface) 0 0; background: var(--crema); color: var(--vino);
  opacity: 0; overscroll-behavior: contain;
}
.probador__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.probador__titulo { font-size: var(--step-lead); line-height: 1.1; }
.probador__titulo:focus { outline: none; }
.probador__volver {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 1rem; border: 0;
  border-radius: var(--r-pill); background: var(--rosa); color: var(--vino); font: inherit; font-weight: 500; cursor: pointer;
  transition: background-color var(--t-hover) ease;
}
.probador__volver:active { transform: scale(0.97); }
.probador__grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.probador__grupo legend { margin-bottom: 0.5rem; padding: 0; font-size: var(--step-small); font-weight: 600; }
.probador__elegido { margin-left: 0.35rem; font-weight: 400; color: var(--muted); }
.probador__colores, .probador__pildoras { display: flex; gap: 0.5rem; margin: -0.3rem; padding: 0.3rem; overflow-x: auto; scrollbar-width: none; }
.muestra {
  position: relative; flex: none; width: 2.75rem; height: 2.75rem; border: 1px solid rgb(74 37 48 / 0.18);
  border-radius: 50%; background: var(--c); cursor: pointer; transition: scale var(--t-hover) var(--ease-out);
}
.muestra input, .pildora input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.muestra:has(input:checked), .muestra:has(input:focus-visible) { outline: 2px solid var(--vino); outline-offset: 3px; }
.pildora { position: relative; flex: none; }
.pildora span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--r-pill);
  background: var(--superficie); color: var(--vino); font-size: var(--step-small); font-weight: 500;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.pildora input:checked + span { background: var(--vino); color: var(--porcelana); }
.pildora input:focus-visible + span { outline: 2px solid var(--vino); outline-offset: 2px; }
.probador__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.probador__acciones .boton { flex: 1 1 auto; min-height: 2.75rem; }
.probador__nota { font-size: var(--step-small); color: var(--muted); }
body.is-probando .barra-movil, body.is-probando .wa-flotante { display: none; }
/* El panel al lado solo en pantallas apaisadas; en vertical (también una ventana alta en la computadora), abajo. */
@media (min-width: 900px) and (orientation: landscape) {
  .probador__panel {
    top: 50%; right: max(var(--margin), calc((100vw - var(--content-max)) / 2)); bottom: auto; left: auto;
    width: min(26.25rem, 36vw - var(--margin)); max-height: calc(100% - 2.5rem); padding: 1.5rem 1.6rem;
    border-radius: var(--r-surface); translate: 0 -50%;
  }
  .probador__colores, .probador__pildoras { flex-wrap: wrap; overflow: visible; }
}
@media (hover: hover) and (pointer: fine) {
  .muestra:hover { scale: 1.06; }
  .pildora:hover input:not(:checked) + span { background: var(--rosa); }
  .probador__volver:hover { background: var(--rosa-profundo); }
}

/* ---------- Banda de servicios: los nombres pasan despacio sobre el rosa (decorativa; la carta va debajo) ---------- */
.marquesina { overflow: hidden; padding-block: 1.6rem; background: var(--rosa); color: var(--vino); }
.marquesina__pista { display: flex; width: max-content; }
.marquesina__pista span { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: var(--step-sub); font-weight: 600; white-space: nowrap; }
.marquesina__pista span::before { content: ""; width: 0.4rem; height: 0.4rem; margin-inline: 1.6rem; border-radius: 50%; background: var(--oro); }

/* ---------- Áreas: uñas y cabello con su foto y estética sobre el mármol, en mosaico ---------- */
/* El nombre y los servicios van en una pestaña de porcelana encajada en la esquina de la foto (sin degradados
   sobre la imagen); estética no tiene fotos de cabina, así que va en vino con el arco de la marca, en relleno. */
.areas__marco { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.areas__cabeza { display: grid; gap: 1.25rem; }
.areas__titulo { font-size: var(--step-display); line-height: 0.95; max-width: 12ch; text-wrap: balance; }
.areas__apoyo { display: grid; gap: 0.5rem; justify-items: start; max-width: 34ch; font-size: var(--step-lead); line-height: 1.4; color: var(--muted); }
.areas__apoyo p + p { margin-top: 0; }
.areas__apoyo .enlace-flecha { font-size: var(--step-body); }
.areas__mosaico { display: grid; gap: var(--gutter); }
.area {
  position: relative; isolation: isolate; display: grid; align-items: end; overflow: hidden;
  border-radius: var(--r-media); background: var(--superficie);
}
.area--unas, .area--cabello { aspect-ratio: 4 / 5; }
.area--estetica {
  --ink-titulo: var(--porcelana); --ink: var(--rosa); --foco: var(--oro-claro);
  min-height: 17rem; background: var(--vino);
}
.area--estetica::before {
  content: ""; position: absolute; z-index: -1; top: 1.5rem; right: 1.5rem; width: min(38%, 11rem); aspect-ratio: 0.75;
  border-radius: 999px 999px var(--r-media) var(--r-media); background: var(--vino-suave);
}
.area--estetica .area__flecha { color: var(--oro-claro); }
.area__foto { position: absolute; inset: 0; z-index: -1; margin: 0; }
.area__foto img {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1200ms var(--ease-out);
}
.area--cabello .area__foto img { object-position: 50% 40%; }
.area__texto {
  display: grid; gap: 0.25rem; justify-self: start; max-width: calc(100% - 2rem);
  padding: 1.25rem 1.5rem 1rem; border-radius: 0 var(--r-surface) 0 0; background: var(--porcelana);
}
.area--estetica .area__texto { max-width: none; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: none; }
.area__nombre { font-size: var(--step-head); line-height: 1; }
.area__nombre a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; color: var(--ink-titulo); text-decoration: none; }
.area__flecha { flex: none; color: var(--oro-oscuro); transition: transform var(--t-ui) var(--ease-out); }
.area__lista { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; }
.area__lista a {
  display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em;
  transition: text-decoration-color var(--t-hover) ease;
}
@media (min-width: 900px) {
  .areas__cabeza { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .areas__titulo { grid-column: 1 / 8; }
  .areas__apoyo { grid-column: 9 / 13; }
  .areas__mosaico { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .area--unas { grid-column: 1 / 8; grid-row: 1 / 3; aspect-ratio: auto; min-height: 40rem; }
  .area--cabello { grid-column: 8 / 13; grid-row: 1; }
  .area--estetica { grid-column: 8 / 13; grid-row: 2; min-height: 15rem; }
  .area__texto { max-width: calc(100% - 3rem); padding: 1.75rem 2.25rem 1.25rem; }
}
@media (hover: hover) and (pointer: fine) {
  .area:hover .area__foto img { transform: scale(1.04); }
  .area__nombre a:hover .area__flecha { transform: translateX(4px); }
  .area__lista a:hover { text-decoration-color: currentColor; }
}

/* ---------- Equipo: retratos en color, en arcos a alturas escalonadas ---------- */
/* El tinte de cada ficha es el fondo mientras carga la foto. Cada ficha lleva a su perfil. */
.equipo-inicio__cabeza { display: grid; gap: 1.25rem; }
.equipo-inicio__titulo { font-size: var(--step-display); line-height: 0.95; max-width: 12ch; text-wrap: balance; }
.equipo-inicio__nota { max-width: 34ch; font-size: var(--step-lead); line-height: 1.4; color: var(--muted); }
.fichas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem var(--gutter); margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.ficha { display: grid; gap: 0.2rem; color: var(--ink-titulo); text-decoration: none; }
.ficha__foto {
  display: block; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 0.75rem;
  border-radius: 50% 50% var(--r-media) var(--r-media) / 40% 40% var(--r-media) var(--r-media);
  background: var(--tinte, var(--rosa));
}
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.fichas > li:nth-child(even) { margin-top: 2rem; }
.ficha__foto--rosa { --tinte: var(--rosa); }
.ficha__foto--oro { --tinte: var(--oro-claro); }
.ficha__foto--rosa-profundo { --tinte: var(--rosa-profundo); }
.ficha__foto--piedra { --tinte: var(--superficie-2); }
.ficha__nombre {
  font-family: var(--font-display); font-size: var(--step-sub); font-weight: 600; line-height: 1.1;
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 0.2em;
  transition: text-decoration-color var(--t-hover) ease;
}
.ficha__papel { font-size: var(--step-small); line-height: 1.4; color: var(--muted); }
@media (min-width: 900px) {
  .equipo-inicio__cabeza { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .equipo-inicio__titulo { grid-column: 1 / 8; }
  .equipo-inicio__nota { grid-column: 9 / 13; }
  .fichas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem var(--gutter); }
  .fichas > li:nth-child(even) { margin-top: 3.5rem; }
}
@media (hover: hover) and (pointer: fine) {
  .ficha:hover .ficha__nombre { text-decoration-color: currentColor; }
  .ficha:hover .ficha__foto img { transform: scale(1.04); }
}

/* ---------- La cita: sobre el rosa, el título y el salón en arco se quedan fijos y los tres momentos pasan al lado ---------- */
.cita__marco { display: grid; gap: 3rem; }
.cita__cabeza { display: grid; gap: 1.25rem; align-content: start; }
.cita__titulo { font-size: var(--step-display); line-height: 0.95; }
.cita__intro { max-width: 30ch; font-size: var(--step-lead); line-height: 1.4; }
.cita__salon { display: none; }
.cita__pasos { display: grid; gap: clamp(3rem, 2rem + 3vw, 5rem); margin: 0; padding: 0; list-style: none; }
.paso-cita { display: grid; gap: 0.75rem; }
.paso-cita__foto { margin: 0 0 0.75rem; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-media); background: var(--crema); }
.paso-cita__foto img { width: 100%; height: 100%; object-fit: cover; }
.paso-cita__titulo { font-size: var(--step-head); line-height: 1; }
.paso-cita__texto { max-width: 40ch; }
@media (min-width: 900px) {
  .cita__marco { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .cita__cabeza { grid-column: 1 / 6; position: sticky; top: calc(var(--header-h) + 2.5rem); }
  .cita__salon { display: block; width: min(100%, 17rem); margin-top: 1.25rem; }
  .cita__pasos { grid-column: 7 / 13; }
  .paso-cita:nth-child(2) { padding-left: 18%; }
}

/* ---------- Galería: un muestrario escalonado sobre el vino ---------- */
.muestrario { --ink-titulo: var(--porcelana); --muted: var(--rosa); --foco: var(--oro-claro); background: var(--vino); color: var(--porcelana); }
.muestrario__cabeza { display: grid; gap: 1.25rem; }
.muestrario__titulo { font-size: var(--step-display); line-height: 0.95; max-width: 12ch; }
.muestrario__frase { color: var(--rosa); max-width: 34ch; font-size: var(--step-lead); line-height: 1.4; }
.muestrario__enlace a {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: var(--porcelana); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--oro-claro); text-underline-offset: 0.3em;
}
.muestrario__texto { display: grid; gap: 0.75rem; }
.muestrario__tira { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); margin-bottom: 0; list-style: none; }
.muestrario__foto { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-media); background: var(--vino-suave); }
.muestrario__foto:nth-child(even) { margin-top: 2.5rem; }
.muestrario__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .muestrario__cabeza { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .muestrario__titulo { grid-column: 1 / 8; }
  .muestrario__texto { grid-column: 9 / 13; }
  .muestrario__tira { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .muestrario__foto:nth-child(even) { margin-top: 3.5rem; }
}

/* ---------- Cierre de la portada, sobre el mármol: reservar, con quién, y la fachada en arco ---------- */
.reserva-final__marco { display: grid; gap: 3rem; align-items: center; }
.reserva-final__texto { display: grid; gap: 1.5rem; justify-items: start; }
.reserva-final__titulo { font-size: var(--step-display); line-height: 0.95; max-width: 13ch; text-wrap: balance; }
.reserva-final__dato { max-width: 32ch; font-size: var(--step-lead); line-height: 1.4; }
.reserva-final__estado { font-size: var(--step-small); }
.reserva-final .acciones { margin-top: 0.5rem; }
.con-quien { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.con-quien__enlace {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0.3rem 1.1rem 0.3rem 0.3rem;
  border-radius: var(--r-pill); background: var(--crema); color: var(--vino); font-weight: 500; text-decoration: none;
  transition: background-color var(--t-hover) ease;
}
.con-quien__foto { flex: none; width: 2.5rem; height: 2.5rem; overflow: hidden; border-radius: 50%; background: var(--rosa); }
.con-quien__foto img { width: 100%; height: 100%; object-fit: cover; }
.reserva-final__fachada { display: grid; gap: 0.5rem; justify-items: start; width: min(78%, 22rem); margin: 0; }
.reserva-final__arco { --ratio: 0.75; display: block; width: 100%; }
@media (min-width: 900px) {
  .reserva-final__marco { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .reserva-final__texto { grid-column: 1 / 8; }
  .reserva-final__fachada { grid-column: 9 / 13; width: 100%; }
}
@media (hover: hover) and (pointer: fine) {
  .con-quien__enlace:hover { background: var(--rosa); }
}

/* =============================================================================
   Páginas interiores (Fase 1)
   ============================================================================= */

/* ---------- Servicios: primera pantalla partida; a sangre, el cabello, y unas uñas en arco sobre la unión ---------- */
.servicios-portada { display: grid; }
.servicios-portada__texto { display: grid; align-content: center; gap: 1.25rem; padding: clamp(2.5rem, 1rem + 6vw, 5rem) var(--margin); }
.servicios-portada__titulo { font-size: var(--step-titular); line-height: 0.98; max-width: 17ch; text-wrap: balance; }
.servicios-portada__intro { max-width: 36ch; font-size: var(--step-lead); line-height: 1.4; color: var(--muted); }
.servicios-portada .acciones { margin-top: 0.5rem; }
.servicios-portada__fotos { position: relative; }
.servicios-portada__foto { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--superficie); }
.servicios-portada__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.servicios-portada__detalle { --ratio: 0.8; position: absolute; left: var(--margin); bottom: -2.5rem; width: clamp(7.5rem, 34vw, 10rem); }
@media (min-width: 900px) {
  .servicios-portada { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); min-height: clamp(36rem, calc(100svh - var(--header-h)), 54rem); }
  .servicios-portada__texto { padding: 4rem clamp(5rem, 8vw, 8rem) 4rem max(var(--margin), calc((100vw - var(--content-max)) / 2)); }
  .servicios-portada__titulo { font-size: min(var(--step-titular), 5.6vw); }
  .servicios-portada__foto { height: 100%; aspect-ratio: auto; }
  .servicios-portada__detalle { left: -7rem; bottom: 3rem; width: 14rem; }
}

/* ---------- Servicios: barra fija con las tres categorías ---------- */
.categorias { position: sticky; top: var(--header-h); z-index: 20; background: var(--porcelana); }
.categorias__marco { display: flex; gap: 0.4rem; overflow-x: auto; padding-block: 0.75rem; scrollbar-width: none; }
.categorias__enlace {
  display: inline-flex; flex: none; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 clamp(0.9rem, 0.5rem + 1.5vw, 1.25rem);
  border-radius: var(--r-pill); background: var(--superficie); color: var(--vino); font-weight: 500; text-decoration: none;
  transition: background-color var(--t-hover) ease;
}
.categorias__enlace span { font-size: var(--step-small); color: var(--oro-oscuro); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .categorias { margin-top: 0; }
  .categorias__marco { padding-block: 1rem; }
}
@media (hover: hover) and (pointer: fine) {
  .categorias__enlace:hover { background: var(--rosa); }
}

/* ---------- Servicios: cada categoría en su banda; el nombre, la foto y la línea a un lado, el menú al otro ---------- */
.categoria { scroll-margin-top: calc(var(--header-h) + 4.5rem); }
.categoria__marco { display: grid; gap: 2.5rem; }
.categoria__cabeza { display: grid; gap: 1rem; align-content: start; }
.categoria__titulo { font-size: var(--step-display); line-height: 0.95; }
.categoria__cuenta { color: var(--muted); }
.categoria__foto { display: none; } /* en el celular, directo al menú; la foto sale en escritorio */
.categoria__linea { display: grid; gap: 0.5rem; justify-items: start; margin-top: 0.5rem; }
.categoria__linea span { font-size: var(--step-small); color: var(--muted); }
.categoria__menu { display: grid; gap: 4rem; align-content: start; }
.categoria__grupo { scroll-margin-top: calc(var(--header-h) + 4.5rem); }
.categoria__grupo-titulo { margin-bottom: 1.25rem; font-size: var(--step-sub); }
.categoria__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.5rem var(--gutter); margin: 0; padding: 0; list-style: none; }
.servicio-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-content: start; line-height: 1.4; }
.servicio-fila__nombre { font-family: var(--font-display); font-size: var(--step-lead); font-weight: 600; line-height: 1.2; color: var(--ink-titulo); }
.servicio-fila__precio { grid-area: 1 / 2; align-self: baseline; font-weight: 500; }
.servicio-fila__detalle { grid-column: 1 / -1; margin-top: 0.3rem; font-size: 1rem; color: var(--muted); max-width: 40ch; }
.banda--vino .categoria__cuenta, .banda--vino .categoria__linea span { color: var(--rosa); }
@media (min-width: 900px) {
  .categoria__marco { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .categoria__cabeza { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--header-h) + 6rem); }
  .categoria__foto { display: block; width: 100%; max-width: 18rem; margin-top: 0.5rem; }
  .categoria__menu { grid-column: 6 / 13; gap: 5rem; }
}

/* ---------- Servicios: las seis páginas como fotos escalonadas con su nombre ---------- */
.detalles__marco { display: grid; gap: 2.5rem; }
.detalles__cabeza { display: grid; gap: 0.75rem; }
.detalles__titulo { font-size: var(--step-head); line-height: 1; }
.detalles__intro { max-width: 40ch; color: var(--muted); }
.detalles__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem var(--gutter); margin: 0; padding: 0; list-style: none; }
.detalles__lista > li:nth-child(even) { margin-top: 2.5rem; }
.detalle { display: grid; gap: 0.85rem; color: var(--ink-titulo); text-decoration: none; }
.detalle__foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-media); background: var(--superficie); }
.detalle__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.detalle__nombre {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  font-family: var(--font-display); font-size: var(--step-lead); font-weight: 600; line-height: 1.15;
}
.detalle__flecha { flex: none; color: var(--oro-oscuro); transition: transform var(--t-ui) var(--ease-out); }
@media (min-width: 900px) {
  .detalles__marco { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .detalles__cabeza { grid-column: 1 / 7; }
  .detalles__lista { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem var(--gutter); }
  .detalles__lista > li:nth-child(even) { margin-top: 0; }
  .detalles__lista > li:nth-child(3n + 2) { margin-top: 4rem; }
  .detalle__nombre { font-size: var(--step-sub); }
}
@media (hover: hover) and (pointer: fine) {
  .detalle:hover .detalle__foto img { transform: scale(1.04); }
  .detalle:hover .detalle__flecha { transform: translateX(4px); }
}

/* ---------- Cierre de una frase y una acción, sobre el mármol, con un plano real en arco ---------- */
.cierre-simple__marco { display: grid; gap: 2.5rem; align-items: center; }
.cierre-simple__frase { max-width: 30ch; font-size: var(--step-sub); line-height: 1.15; color: var(--vino); text-wrap: balance; }
.cierre-simple .acciones { margin-top: 1.75rem; }
.cierre-simple__video { width: min(62%, 18rem); justify-self: end; }
@media (min-width: 900px) {
  .cierre-simple__marco { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .cierre-simple__texto { grid-column: 1 / 8; }
  .cierre-simple__video { grid-column: 9 / 13; justify-self: stretch; width: auto; max-width: 20rem; }
}

/* ---------- Página de servicio: titular y foto en arco, más baja ---------- */
.cabeza-servicio { padding-block: clamp(2rem, 1rem + 4vw, 5rem) clamp(2rem, 1rem + 4vw, 6rem); }
.cabeza-servicio__marco { display: grid; gap: 2.5rem; }
.cabeza-servicio__texto { display: grid; gap: 1.5rem; }
.cabeza-servicio__titulo { font-size: var(--step-head); }
.cabeza-servicio__intro { max-width: 46ch; }
.cabeza-servicio__foto { --ratio: 0.8; width: 80%; justify-self: end; }
@media (min-width: 900px) {
  .cabeza-servicio__marco { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .cabeza-servicio__texto { grid-column: 1 / 7; gap: 1.75rem; padding-top: 4rem; }
  .cabeza-servicio__foto { grid-column: 7 / 13; justify-self: stretch; width: auto; }
}

/* ---------- Beneficios: foto en arco cortada por el borde y puntos marcados con el arco ---------- */
.puntos__marco { display: grid; gap: 2.5rem; }
.puntos__foto {
  --fuera: max(var(--margin), (100vw - var(--content-max)) / 2);
  width: 82vw; height: min(60svh, 30rem); overflow: hidden; translate: -12% 0;
  border-radius: 999px 999px var(--r-media) var(--r-media); background: var(--superficie);
}
.puntos__foto img { width: 100%; height: 100%; object-fit: cover; }
.puntos__texto { width: min(100% - 2 * var(--margin), var(--content-max)); margin-inline: auto; }
.puntos__titulo, .puntos__subtitulo { font-size: var(--step-sub); }
.puntos__subtitulo { margin-top: 3rem; }
.puntos__lista { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
.puntos__lista li { position: relative; padding-left: 1.6rem; max-width: 40ch; }
.puntos__lista li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 0.75em; height: 0.95em;
  border-radius: 999px 999px 2px 2px; background: var(--forma, var(--rosa-profundo));
}
.puntos__lista li:nth-child(odd) { --forma: var(--oro); }
.puntos__para-quien { margin-top: 0.75rem; max-width: 52ch; }
@media (min-width: 900px) {
  .puntos__marco { width: min(100% - 2 * var(--margin), var(--content-max)); margin-inline: auto; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .puntos__foto { grid-column: 1 / 6; width: calc(100% + var(--fuera)); height: 78svh; max-height: 46rem; margin-left: calc(-1 * var(--fuera)); }
  .puntos__texto { grid-column: 7 / 13; width: auto; margin: 0; }
  .puntos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem 2.5rem; margin-top: 3.5rem; }
  .puntos__lista li:nth-child(odd) { --forma: var(--oro); }
  .puntos__lista li:nth-child(even) { --forma: var(--rosa-profundo); }
}

/* ---------- Cómo trabajamos: los pasos en escalera (sin números: el orden lo da la posición) ---------- */
.pasos__titulo { font-size: var(--step-sub); color: var(--muted); }
.pasos__marco { display: grid; }
.pasos__lista { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.pasos__foto { width: 62%; justify-self: end; margin-top: 2.5rem; aspect-ratio: 3 / 4; overflow: hidden; background: var(--superficie); }
.pasos__foto img { width: 100%; height: 100%; object-fit: cover; }
.pasos__lista li { max-width: 30ch; font-family: var(--font-display); font-size: var(--step-sub); font-weight: 600; line-height: 1.15; color: var(--ink-titulo); }
.pasos__lista li:nth-child(2) { margin-left: 6vw; }
.pasos__lista li:nth-child(3) { margin-left: 12vw; }
.pasos__lista li:nth-child(4) { margin-left: 18vw; }
.pasos__lista li:nth-child(5) { margin-left: 24vw; }
@media (min-width: 900px) {
  .pasos__marco { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .pasos__titulo { grid-column: 1 / -1; }
  .pasos__lista { grid-column: 1 / -1; grid-row: 2; gap: 2.25rem; margin-top: 2.25rem; }
  .pasos__lista li { max-width: 26ch; }
  .pasos__lista li:nth-child(2) { margin-left: calc((100% - 26ch) / 4); }
  .pasos__lista li:nth-child(3) { margin-left: calc((100% - 26ch) / 2); }
  .pasos__lista li:nth-child(4) { margin-left: calc((100% - 26ch) * 3 / 4); }
  .pasos__lista li:nth-child(5) { margin-left: calc(100% - 26ch); }
  /* La foto del proceso cierra el hueco que deja la escalera abajo a la izquierda. */
  .pasos__foto { grid-column: 1 / 5; grid-row: 2; align-self: end; justify-self: stretch; width: auto; margin: 0; aspect-ratio: 4 / 3; }
}

/* ---------- Servicios incluidos: filas de dos extremos ---------- */
.incluidos__marco { display: grid; gap: 1.25rem; }
.incluidos__cabeza { display: grid; gap: 0.75rem; }
.incluidos__titulo { font-size: var(--step-sub); }
.incluidos__nota { color: var(--muted); }
.filas { display: grid; margin-top: 1.25rem; }
.filas__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: baseline; min-height: 2.75rem; padding-block: 0.55rem; }
.filas__nombre { position: relative; padding-left: 1.4rem; font-weight: 500; color: var(--ink-titulo); }
.filas__nombre::before {
  content: ""; position: absolute; left: 0; top: 0.32em; width: 0.6em; height: 0.75em;
  border-radius: 999px 999px 2px 2px; background: var(--rosa-profundo);
}
.filas__valor { font-size: var(--step-small); color: var(--muted); }
.filas__detalle { grid-column: 1 / -1; padding-left: 1.4rem; font-size: var(--step-small); color: var(--muted); }
@media (min-width: 900px) {
  .incluidos__marco { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .incluidos__cabeza { grid-column: 1 / 5; }
  .filas { grid-column: 6 / 13; margin-top: 0; }
}

/* ---------- Preguntas grandes, respuesta al lado (todo abierto) ---------- */
.preguntas-grandes__titulo { font-size: var(--step-sub); color: var(--muted); }
.preguntas-grandes__tabla { display: grid; gap: 3.5rem; margin-top: 2rem; }
.preguntas-grandes__fila dt { font-family: var(--font-display); font-size: var(--step-sub); font-weight: 600; line-height: 1.1; color: var(--ink-titulo); }
.preguntas-grandes__fila dd { margin: 0.75rem 0 0; max-width: 40ch; }
@media (min-width: 900px) {
  .preguntas-grandes__tabla { gap: 4.5rem; margin-top: 3.5rem; }
  .preguntas-grandes__fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; }
  .preguntas-grandes__fila dt { grid-column: 1 / 7; }
  .preguntas-grandes__fila dd { grid-column: 8 / 13; margin: 0; }
}

/* ---------- Otros servicios: dos fotos a distinto tamaño ---------- */
.otros__marco { display: grid; gap: 3rem; }
.otros__titulo { font-size: var(--step-sub); }
.otro__enlace { display: grid; gap: 1rem; color: var(--ink-titulo); text-decoration: none; }
.otro__foto { display: block; overflow: hidden; background: var(--superficie); }
.otro__foto img { width: 100%; height: 100%; object-fit: cover; }
.otro--1 .otro__foto { aspect-ratio: 4 / 5; width: 78%; }
.otro--2 .otro__foto { aspect-ratio: 1; width: 62%; margin-left: auto; }
.otro__nombre {
  font-size: var(--step-sub);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 0.06em; text-underline-offset: 0.2em;
  transition: text-decoration-color var(--t-hover) ease;
}
.otro__texto { margin-top: 0.6rem; max-width: 40ch; }
@media (min-width: 900px) {
  .otros__marco { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3.5rem var(--gutter); align-items: start; }
  .otros__titulo { grid-column: 1 / -1; }
  .otro--1 { grid-column: 1 / 6; }
  .otro--2 { grid-column: 8 / 12; margin-top: 8rem; }
  .otro--1 .otro__foto, .otro--2 .otro__foto { width: 100%; margin: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .otro__enlace:hover .otro__nombre { text-decoration-color: currentColor; }
}

/* ---------- Equipo: cada profesional a su tamaño y a su lado («Loose scatter») ---------- */
.cabeza-equipo, .cabeza-galeria { padding-block: clamp(2.5rem, 1rem + 6vw, 8rem) clamp(2rem, 1rem + 3vw, 4rem); }
.cabeza-equipo__marco, .cabeza-galeria__marco { display: grid; gap: 1.25rem; }
.cabeza-equipo__titulo, .cabeza-galeria__titulo, .cabeza-perfil__nombre { font-size: var(--step-titular); }
.cabeza-equipo__intro, .cabeza-galeria__intro { max-width: 46ch; }
@media (min-width: 900px) {
  .cabeza-equipo__marco, .cabeza-galeria__marco { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .cabeza-equipo__titulo, .cabeza-galeria__titulo { grid-column: 1 / 9; }
  .cabeza-equipo__intro, .cabeza-galeria__intro { grid-column: 9 / 13; padding-bottom: 0.75rem; }
}
.suelta__marco { display: grid; gap: 4.5rem; }
.persona { display: grid; gap: 1.25rem; align-content: start; }
.persona__foto { display: block; }
.arco--retrato { --ratio: 0.8; }
.arco--cuadrado { --ratio: 1; }
.persona--2 { justify-self: end; width: 68%; }
.persona--3 { width: 82%; }
.persona__nombre { font-size: var(--step-sub); }
.persona__nombre a { text-decoration: none; }
.persona__papel { color: var(--muted); }
.persona .acciones { gap: 0 1.5rem; }
.persona .acciones .enlace { display: inline-flex; align-items: center; min-height: 2.75rem; }
.suelta__nota { max-width: 30ch; font-family: var(--font-display); font-size: var(--step-lead); font-weight: 600; line-height: 1.25; color: var(--ink-titulo); }
@media (min-width: 900px) {
  .suelta__marco {
    grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6rem var(--gutter); align-items: start;
    container-type: inline-size; --col: calc((100cqw - 11 * var(--gutter)) / 12);
  }
  .persona { justify-self: stretch; width: auto; }
  .persona--1 { grid-column: 1 / 6; grid-row: 1; }
  /* Empieza a media altura de la primera foto: las dos se solapan en altura y la nota llena el hueco de arriba. */
  .persona--2 { grid-column: 9 / 13; grid-row: 1 / 3; margin-top: calc((5 * var(--col) + 4 * var(--gutter)) * 0.62); }
  /* La nota ocupa el hueco que deja la primera foto a su derecha. */
  .suelta__nota { grid-column: 7 / 12; grid-row: 1; align-self: start; margin-top: 3rem; }
  .persona--3 { grid-column: 4 / 9; grid-row: 3; }
  .persona--4 { grid-column: 8 / 12; grid-row: 4; margin-top: -8rem; }
}
@media (hover: hover) and (pointer: fine) {
  .persona__nombre a:hover { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.2em; }
}

/* ---------- Perfil de una profesional ---------- */
.cabeza-perfil { padding-block: clamp(2rem, 1rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 6rem); }
.cabeza-perfil__marco { display: grid; gap: 2.5rem; }
.cabeza-perfil__texto { display: grid; gap: 1.25rem; align-content: start; }
.cabeza-perfil__papel { max-width: 30ch; font-size: var(--step-lead); line-height: 1.35; color: var(--muted); }
.cabeza-perfil__bio { max-width: 52ch; }
.cabeza-perfil__estado { max-width: 44ch; }
.cabeza-perfil__foto { --ratio: 0.75; width: 82%; justify-self: end; }
@media (min-width: 900px) {
  .cabeza-perfil__marco { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .cabeza-perfil__texto { grid-column: 1 / 7; padding-top: 4rem; }
  .cabeza-perfil__foto { grid-column: 8 / 13; justify-self: stretch; width: auto; }
}
.incluidos__grupos { display: grid; gap: 2.5rem; }
.incluidos__grupo-titulo { margin-bottom: 0.5rem; font-size: var(--step-lead); }
@media (min-width: 900px) {
  .incluidos__grupos { grid-column: 6 / 13; }
}
.resto-equipo__marco { display: grid; gap: 2rem; }
.resto-equipo__titulo { font-size: var(--step-sub); }
.resto-equipo__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 900px) {
  .resto-equipo__marco { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .resto-equipo__titulo { grid-column: 1 / 5; }
  .resto-equipo__lista { grid-column: 5 / 13; }
}
.trabajos-perfil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
@media (min-width: 900px) { .trabajos-perfil { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Una foto o un vídeo de la galería con su pie (perfil de cada profesional) ---------- */
.medio { display: grid; gap: 0.6rem; }
.medio__marco { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--superficie); }
.medio__marco img, .medio__marco video { width: 100%; height: 100%; object-fit: cover; }
.medio figcaption { font-size: var(--step-small); color: var(--muted); }

/* ---------- Galería: la barra de filtros (la de Servicios) y una cuadrícula serena ----------
   Todas las piezas en 4:5 y muy juntas; cada nueve, una destacada a doble tamaño que cambia de lado.
   grid-auto-flow: dense rellena cada hueco, así la rejilla queda cerrada con cualquier filtro. */
.galeria-filtros .categorias__enlace[aria-current="page"] { background: var(--vino); color: var(--porcelana); }
.galeria-filtros .categorias__enlace[aria-current="page"] span { color: var(--oro-claro); }
@media (max-width: 599px) {
  .galeria-filtros .categorias__marco { width: 100%; padding-inline: var(--margin); scroll-padding-inline: var(--margin); }
}
.galeria { padding-block: 0.5rem calc(var(--section) / 2); }
.galeria__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 0.375rem; }
.galeria__pieza { min-width: 0; }
.galeria__pieza--destacada { grid-column: 1 / -1; }
.galeria__enlace {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 0.5rem; background: var(--superficie); color: var(--vino);
}
.galeria__enlace img, .galeria__enlace video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--ease-out), filter var(--t-ui) ease;
}
.galeria__play {
  position: absolute; top: 0.625rem; right: 0.625rem; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--porcelana); color: var(--vino);
}
.galeria__play .icono { margin-left: 2px; fill: currentColor; }
/* El pie, en una píldora de papel que sube al pasar el ratón; en el celular se lee en el visor. */
.galeria__pie {
  position: absolute; left: 0.625rem; bottom: 0.625rem; max-width: calc(100% - 1.25rem);
  padding: 0.4rem 0.85rem; border-radius: var(--r-pill); background: var(--porcelana); color: var(--vino);
  font-size: var(--step-small); line-height: 1.3; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(0.5rem);
  transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out);
}
.galeria__enlace:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.galeria__enlace:focus-visible .galeria__pie { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .galeria__enlace { cursor: zoom-in; }
  .galeria__enlace:hover img, .galeria__enlace:hover video { transform: scale(1.04); }
  .galeria__enlace:hover .galeria__pie { opacity: 1; transform: none; }
}
@media (min-width: 600px) {
  .galeria__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .galeria__pieza--destacada { grid-column: span 2; grid-row: span 2; }
  .galeria__pieza--destacada .galeria__enlace { aspect-ratio: auto; height: 100%; }
  .galeria__pieza--derecha { grid-column: 2 / -1; }
  .galeria__enlace { border-radius: 0.75rem; }
}
@media (min-width: 900px) {
  .galeria__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
  .galeria__pieza--derecha { grid-column: 3 / -1; }
}

/* ---------- Galería: el visor a pantalla completa (js/galeria.js) ---------- */
.visor {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: #1d1215; color: var(--porcelana); overflow: hidden;
}
.visor::backdrop { background: #1d1215; }
.visor[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.visor__escena {
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0;
  padding: calc(3.5rem + env(safe-area-inset-top)) 0.75rem 0.5rem; touch-action: pan-y;
}
.visor__escena img, .visor__escena video {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0.5rem;
}
.visor__pie {
  max-width: none; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: 0.75rem var(--margin) calc(1rem + env(safe-area-inset-bottom)); font-size: var(--step-small);
}
.visor__cuenta { flex: none; color: var(--rosa-profundo); font-variant-numeric: tabular-nums; }
.visor__boton {
  position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: rgb(251 246 244 / 0.12); color: var(--porcelana);
  transition: background-color var(--t-hover) ease, transform var(--t-press) ease;
}
.visor__boton:active { transform: scale(0.94); }
.visor__boton:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 2px; }
.visor__cerrar { top: calc(0.5rem + env(safe-area-inset-top)); right: 0.5rem; }
.visor__anterior, .visor__siguiente { top: 50%; translate: 0 -50%; display: none; }
.visor__anterior { left: 1rem; }
.visor__siguiente { right: 1rem; }
@media (min-width: 900px) {
  .visor__escena { padding: 4rem 5.5rem 0.5rem; }
  .visor__anterior, .visor__siguiente { display: grid; }
}
@media (hover: hover) and (pointer: fine) {
  .visor__boton:hover { background: rgb(251 246 244 / 0.22); }
}
@media (prefers-reduced-motion: no-preference) {
  .visor[open] .visor__escena > * { animation: visor-entra var(--t-ui) var(--ease-out); }
}
@keyframes visor-entra { from { opacity: 0; transform: scale(0.98); } }

/* ---------- Contacto: primera pantalla partida, el titular y, a sangre, la fachada ---------- */
.contacto-portada { display: grid; }
.contacto-portada__texto { display: grid; align-content: center; gap: 1.25rem; padding: clamp(2.5rem, 1rem + 6vw, 5rem) var(--margin); }
.contacto-portada__titulo { font-size: var(--step-titular); line-height: 0.98; max-width: 15ch; text-wrap: balance; }
.contacto-portada__intro { max-width: 38ch; font-size: var(--step-lead); line-height: 1.4; color: var(--muted); }
.contacto-portada .acciones { margin-top: 0.5rem; }
.contacto-portada__foto { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--superficie); }
.contacto-portada__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (min-width: 900px) {
  .contacto-portada { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(36rem, calc(100svh - var(--header-h)), 54rem); }
  .contacto-portada__texto { padding: 4rem clamp(3rem, 6vw, 6rem) 4rem max(var(--margin), calc((100vw - var(--content-max)) / 2)); }
  .contacto-portada__foto { aspect-ratio: auto; }
}

/* ---------- Contacto: las dos líneas de WhatsApp en tarjetas de papel sobre el mármol ---------- */
.contacto-lineas { position: relative; isolation: isolate; overflow: hidden; padding-block: calc(var(--section) / 2); }
.contacto-lineas__marmol { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.contacto-lineas__marco { display: grid; gap: 2rem; }
.contacto-lineas__cabeza { display: grid; gap: 0.75rem; }
.contacto-lineas__titulo { font-size: var(--step-head); line-height: 1; max-width: 12ch; }
.contacto-lineas__intro { max-width: 34ch; color: var(--vino); }
.contacto-lineas__lista { display: grid; gap: var(--gutter); margin: 0; padding: 0; list-style: none; }
.linea-wa { display: grid; gap: 0.35rem; justify-items: start; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-surface); background: var(--crema); }
.linea-wa__servicio { font-size: var(--step-sub); }
.linea-wa__numero { margin-bottom: 1.25rem; font-size: var(--step-lead); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--vino); }
.contacto-lineas__otros { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.contacto-lineas__otros a {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; max-width: 100%; padding: 0.5rem 1.25rem;
  border-radius: var(--r-pill); background: var(--crema); color: var(--vino); font-weight: 500; text-decoration: none; overflow-wrap: anywhere;
}
.contacto-lineas__otros .icono { flex: none; color: var(--oro-oscuro); }
@media (min-width: 900px) {
  .contacto-lineas__marco { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--gutter); align-items: end; }
  .contacto-lineas__cabeza { grid-column: 1 / 6; }
  .contacto-lineas__lista { grid-column: 6 / 13; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contacto-lineas__otros { grid-column: 6 / 13; }
}

/* ---------- Contacto: el salón por dentro, a todo lo ancho, y los datos en un panel que sube sobre la foto ---------- */
.contacto-salon { padding-bottom: calc(var(--section) / 2); }
.contacto-salon__foto { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--superficie); }
.contacto-salon__foto img { width: 100%; height: 100%; object-fit: cover; }
.contacto-salon__panel {
  position: relative; display: grid; gap: 1rem; margin-top: -3rem;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: var(--r-surface); background: var(--porcelana);
}
.contacto-salon__titulo { font-size: var(--step-head); line-height: 1; }
.contacto-salon__entrada { max-width: 36ch; font-size: var(--step-lead); line-height: 1.4; }
.contacto-salon__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem 1.5rem; margin: 0.5rem 0 0; }
.contacto-salon__datos dt { font-size: var(--step-small); color: var(--muted); }
.contacto-salon__datos dd { margin: 0.2rem 0 0; font-weight: 500; color: var(--ink-titulo); }
.contacto-salon__mapa { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
.contacto-salon__mapa .icono { color: var(--oro-oscuro); transition: transform var(--t-ui) var(--ease-out); }
@media (min-width: 900px) {
  .contacto-salon__foto { aspect-ratio: auto; height: clamp(28rem, 72svh, 46rem); }
  .contacto-salon__marco { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .contacto-salon__panel { grid-column: 1 / 8; margin-top: -11rem; }
}

/* ---------- Contacto: preguntas en tarjetas sobre la banda rosa; el título y la foto se quedan al lado ---------- */
.contacto-preguntas__marco { display: grid; gap: 2.5rem; }
.contacto-preguntas__cabeza { display: grid; gap: 2rem; align-content: start; }
.contacto-preguntas__titulo { font-size: var(--step-head); line-height: 1; max-width: 10ch; }
.contacto-preguntas__foto { width: min(62%, 18rem); }
.contacto-preguntas__lista { display: grid; gap: 0.75rem; align-content: start; }
.pregunta-tarjeta { border-radius: var(--r-field); background: var(--crema); color: var(--vino); }
.pregunta-tarjeta > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; padding: 0.9rem 1.25rem;
  font-weight: 500; cursor: pointer; list-style: none;
}
.pregunta-tarjeta > summary::-webkit-details-marker { display: none; }
.pregunta-tarjeta > summary .icono { flex: none; color: var(--oro-oscuro); transition: transform var(--t-ui) var(--ease-out); }
.pregunta-tarjeta[open] > summary .icono { transform: rotate(180deg); }
.pregunta-tarjeta > p { max-width: 52ch; padding: 0 1.25rem 1.25rem; }
.contacto-preguntas__mas { margin-top: 1rem; }
@media (min-width: 900px) {
  .contacto-preguntas__marco { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .contacto-preguntas__cabeza { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--header-h) + 2rem); }
  .contacto-preguntas__foto { width: 100%; }
  .contacto-preguntas__lista { grid-column: 6 / 13; }
  .pregunta-tarjeta > summary { min-height: 4.5rem; padding-inline: 1.75rem; font-size: var(--step-lead); }
  .pregunta-tarjeta > p { padding-inline: 1.75rem; }
}
@media (hover: hover) and (pointer: fine) {
  .pregunta-tarjeta:not([open]) > summary:hover .icono { transform: translateY(2px); }
  .contacto-salon__mapa:hover .icono { transform: translateX(4px); }
}

/* ---------- Privacidad: títulos a la izquierda, texto al lado ---------- */
.cabeza-legal { padding-block: clamp(2.5rem, 1rem + 6vw, 8rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.cabeza-legal__marco { display: grid; gap: 1.25rem; }
.cabeza-legal__titulo { font-size: var(--step-titular); }
.cabeza-legal__intro { max-width: 52ch; }
.documento__parte { display: grid; gap: 0.75rem; padding-block: 2rem; }
.documento__titulo { font-size: var(--step-lead); }
.documento__texto { max-width: 62ch; }
@media (min-width: 900px) {
  .cabeza-legal__marco { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .cabeza-legal__titulo { grid-column: 1 / 8; }
  .cabeza-legal__intro { grid-column: 8 / 13; padding-bottom: 0.75rem; }
  .documento__parte { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; padding-block: 2.5rem; }
  .documento__titulo { grid-column: 1 / 5; }
  .documento__texto { grid-column: 5 / 12; }
}

.tira-salon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.tira-salon figure { aspect-ratio: 3 / 4; overflow: hidden; background: var(--superficie); }
.tira-salon img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 600px) { .tira-salon { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Reservar, paso 1: elegir con quién ---------- */
.reserva-inicio { padding-block: clamp(2rem, 1rem + 4vw, 5rem) clamp(4rem, 2rem + 6vw, 8rem); }
.reserva-inicio__cabeza { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
.reserva-inicio__titulo { font-size: var(--step-titular); }
.reserva-inicio__intro { max-width: 46ch; }
.reserva-inicio__volver { margin-top: 2.5rem; }
.elecciones { display: grid; gap: 2rem; }
.eleccion { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem 1.25rem; align-items: start; }
.eleccion__foto {
  display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 50% 50% var(--r-media) var(--r-media) / 40% 40% var(--r-media) var(--r-media); background: var(--superficie);
}
.eleccion__foto img { width: 100%; height: 100%; object-fit: cover; }
.eleccion__texto { display: grid; gap: 0.5rem; }
.eleccion__nombre { font-size: var(--step-sub); }
.eleccion__papel { color: var(--muted); }
.eleccion__estado { max-width: 40ch; }
.eleccion .enlace { display: inline-flex; align-items: center; min-height: 2.75rem; }
.eleccion__acciones { grid-column: 1 / -1; }
.reserva-inicio__intro { font-size: var(--step-lead); line-height: 1.4; }
.otras-opciones { display: grid; gap: 1.5rem; margin-top: 4rem; }
.otras-opciones__titulo { font-size: var(--step-sub); }
@media (min-width: 900px) {
  .reserva-inicio__cabeza { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .reserva-inicio__titulo { grid-column: 1 / 8; }
  .reserva-inicio__intro { grid-column: 8 / 13; padding-bottom: 0.75rem; }
  .elecciones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
  .eleccion { grid-template-columns: minmax(0, 1fr); }
  .elecciones--una { grid-template-columns: minmax(0, 1fr); }
  .elecciones--una .eleccion { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .eleccion__acciones { grid-column: auto; }
  .elecciones--una .eleccion__foto { grid-column: 1 / 5; grid-row: 1 / 3; }
  .elecciones--una .eleccion__texto { grid-column: 6 / 12; align-self: end; }
  .elecciones--una .eleccion__acciones { grid-column: 6 / 12; align-self: start; }
  .otras-opciones { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .otras-opciones__titulo { grid-column: 1 / 5; }
  .otras-opciones .resto-equipo__lista { grid-column: 5 / 13; }
}

/* ---------- Movimiento (solo transform y opacity; nada se queda oculto sin JS) ---------- */
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } }
@keyframes zoom-lento { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes asentarse { from { opacity: 0.55; transform: translateY(14px); } }

/* Orden de entrada dentro de una sección (60–90 ms entre piezas). */
.retardo-1 { --i: 1; }
.retardo-2 { --i: 2; }
.retardo-3 { --i: 3; }

@media (prefers-reduced-motion: no-preference) {
  /* Fotos dentro de los arcos: acercamiento muy lento, nunca quietas ni bruscas. */
  .arco > img, .ficha__foto > img, .opcion__foto > img { animation: zoom-lento 8s var(--ease-soft) infinite alternate; }

  /* Secuencia de carga de la primera pantalla: el texto se lee desde el primer fotograma (parte de
     opacidad 0,55, nunca de 0) y se asienta en 0,7 s. No retrasa el LCP. */
  .entra { animation: asentarse 700ms var(--ease-expo) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }

  /* Aparición al entrar en pantalla: solo con JS (clase .js en <html>) y nunca en la primera pantalla. */
  .js [data-aparece] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms var(--ease-out), transform var(--t-reveal) var(--ease-expo);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }
  .js [data-aparece].is-visible { opacity: 1; transform: none; }

  /* Portada: el lema sube y aparece cuando ya se ve el logo. */
  .js .portada .carga { opacity: 0; transform: translateY(12px); animation: carga-sube 600ms var(--ease-out) 400ms forwards; }
}
@keyframes carga-sube { to { opacity: 1; transform: none; } }

/* Portada: la banda de servicios pasa sin fin (se para al pasar el ratón). Con «reducir movimiento», quieta. */
@media (prefers-reduced-motion: no-preference) {
  .marquesina__pista { animation: marquesina 52s linear infinite; }
  .marquesina:hover .marquesina__pista { animation-play-state: paused; }
}
@keyframes marquesina { to { transform: translateX(-50%); } }

/* El nombre del pie sube hasta su sitio mientras el pie entra en pantalla (ligado al scroll). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pie__nombre { animation: nombre-sube linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}
@keyframes nombre-sube { from { transform: translateY(22%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .boton:active, .filtro:active { transform: none; }
}