@charset "UTF-8";

/* ==========================================================================
   By Avellán · Hoja de estilos del sitio público
   Portada del diseño oficial de Stitch (diseno/stitch/modern-luxury-home.html)
   a CSS plano: sin Tailwind, sin framework, sin paso de compilación.

   Orden del archivo
   00. Tipografías
   01. Variables (color, tipografía, aire, sombras)
   02. Reset y base
   03. Utilidades y piezas de texto
   04. Botones y enlaces de acción
   05. Barra, navegación, conmutador de idioma y menú móvil
   06. Héroe partido y collage
   07. Video (héroe y lookbook)
   08. Experiencias de estilo (tarjetas de servicio)
   09. Banda "Sobre María Avellán" (dúo)
   10. Lookbook, galería y visor
   11. Testimonios (banda negra)
   12. Franjas de llamada a la acción
   13. Formularios, campos y avisos
   14. Pie
   15. WhatsApp flotante
   16. Animaciones de entrada y esqueletos de carga
   17. Movimiento reducido e impresión

   Convenciones: móvil primero (base 375px), crece con min-width;
   áreas táctiles de 48px; 100dvh en vez de 100vh; env(safe-area-inset-*).
   ========================================================================== */

/* ============================================== 00. Tipografías de Google */
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Inter:wght@300;400;500;600&display=swap");

/* ================================================ 01. Variables del tema */
:root {
  /* --- Color: los mismos valores del tailwind.config de Stitch --- */
  --fondo: #f9f9f9;              /* fondo general de la página */
  --tinta: #1a1c1c;              /* texto principal */
  --negro: #000000;              /* botones primarios y banda de testimonio */
  --sobre-negro: #ffffff;        /* texto sobre negro */
  --terracota: #b45d38;          /* acento: "Estilo.", comillas, etiquetas */
  --dorado: #c5a358;             /* detalles finos */
  --durazno: #ffb598;            /* acento suave: sobre foto oscura */
  --durazno-claro: #ffdbce;      /* fondos tenues y texto tenue sobre negro */
  --texto-suave: #434747;        /* párrafos secundarios */
  --linea: #c4c7c7;              /* bordes */
  --contorno: #747878;           /* texto tenue */
  --gris-1: #f3f3f3;             /* banda clara (Sobre mí) */
  --gris-2: #eeeeee;             /* banda */
  --gris-3: #e2e2e2;             /* banda (pie) */
  --casi-blanco: #f9f8f6;        /* superficies */
  --inverso: #2f3131;            /* superficie oscura */
  --blanco: #ffffff;             /* superficie de tarjetas y campos */
  --gris-medio: #dadada;         /* atribución sobre negro */

  /* Velos: la barra fija y los degradados no admiten color-mix en navegadores viejos */
  --fondo-velo: rgba(249, 249, 249, 0.9);
  --fondo-velo-firme: rgba(249, 249, 249, 0.96);
  --linea-tenue: rgba(196, 199, 199, 0.35);
  --terracota-humo: rgba(180, 93, 56, 0.1);
  --velo-foto: rgba(26, 28, 28, 0.1);

  /* Estados de formulario */
  --exito: #2f6b4f;
  --exito-fondo: #e9f1ec;
  --error: #ba1a1a;
  --error-fondo: #ffdad6;

  /* Verde de WhatsApp: es un color de marca ajeno, se usa solo en su botón */
  --wa: #1f9d55;
  --wa-oscuro: #167940;

  /* --- Tipografía --- */
  --fuente-titular: "Bodoni Moda", "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif;
  --fuente-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala fluida entre el tamaño móvil (375px) y el de escritorio (1280px).
     El tope se alcanza en 1280px, que es el ancho al que se comparó contra la
     maqueta de Stitch: ahí el titular mide los 72px exactos de la referencia. */
  --display-lg: clamp(2.75rem, 2.03rem + 3.09vw, 4.5rem);   /* 44px → 72px */
  --headline-md: clamp(1.75rem, 1.46rem + 1.23vw, 2.25rem); /* 28px → 36px */
  --headline-sm: clamp(1.3rem, 1.16rem + 0.6vw, 1.5rem);    /* 21px → 24px */
  --body-lg: clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem);  /* 17px → 18px */
  --body-md: 1rem;                                          /* 16px */
  --body-sm: 0.875rem;                                      /* 14px */
  --label-caps: 0.75rem;                                    /* 12px */
  --boton-texto: 0.875rem;                                  /* 14px */

  --interlineado-display: 1.1;
  --interlineado-headline-md: 1.2;
  --interlineado-headline-sm: 1.3;
  --interlineado-body-lg: 1.7;
  --interlineado-body-md: 1.6;
  --interlineado-body-sm: 1.5;

  --tracking-display: -0.01em;   /* en escritorio pasa a -0.02em */
  --tracking-caps: 0.15em;
  --tracking-boton: 0.05em;

  /* --- Aire y medidas --- */
  --ancho-maximo: 90rem;         /* 1440px, el container-max de Stitch */
  --ancho-estrecho: 46rem;
  --margen: 1.25rem;             /* 20px en móvil; 2rem desde 48rem */
  --canal: 1.5rem;               /* separación entre columnas; 2rem en escritorio */
  /* El aire de la referencia (section-gap-lg = 160px, section-gap-md = 80px)
     tiene que estar completo ya en 1280px; antes se alcanzaba recién pasados
     los 1700px y el sitio se veía apretado al lado de la maqueta. */
  --aire-seccion: clamp(4.5rem, 2.22rem + 9.72vw, 10rem);   /* 72px → 160px */
  --aire-seccion-corto: clamp(3rem, 2.17rem + 3.54vw, 5rem);/* 48px → 80px */
  --alto-barra: 5rem;            /* el JS lo mide y lo reescribe en <html> */
  --toque: 3rem;                 /* 48px de área táctil mínima */

  /* --- Sombras y movimiento --- */
  --sombra-editorial: 0 30px 60px rgba(0, 0, 0, 0.08);
  --sombra-pieza: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --sombra-barra: 0 1px 0 rgba(26, 28, 28, 0.06), 0 12px 30px rgba(0, 0, 0, 0.05);
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --transicion: 300ms var(--curva);
  --transicion-media: 500ms var(--curva);
  --transicion-lenta: 700ms var(--curva);
  --transicion-foto: 1000ms var(--curva);

  color-scheme: light;
}

/* ==================================================== 02. Reset y base */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Los anclajes no quedan escondidos bajo la barra fija. */
  scroll-padding-top: calc(var(--alto-barra) + 1.5rem);
}

body {
  /* La barra es fija: este relleno le reserva el sitio al contenido. */
  padding-block-start: var(--alto-barra);
  background-color: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--body-md);
  line-height: var(--interlineado-body-md);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Con el menú móvil o el visor abiertos el fondo no se desplaza. */
body.sin-scroll { overflow: hidden; }

img,
video,
svg,
picture { display: block; max-width: 100%; }

img,
video { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--fuente-titular);
  font-weight: 400;
  font-optical-sizing: auto;
  text-wrap: balance;
}

h1 { font-size: var(--display-lg); line-height: var(--interlineado-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--headline-md); line-height: var(--interlineado-headline-md); }
h3 { font-size: var(--headline-sm); line-height: var(--interlineado-headline-sm); }

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

ul, ol { padding: 0; list-style: none; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

/* Foco visible y sobrio, del mismo terracota de la marca. */
:focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 3px;
}

::selection {
  background: var(--terracota);
  color: var(--sobre-negro);
}

/* ==================================== 03. Utilidades y piezas de texto */

/* Ancho de página: el contenedor central de 1440px con sus márgenes. */
.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: max(var(--margen), env(safe-area-inset-left)) max(var(--margen), env(safe-area-inset-right));
}

/* Variante angosta para textos largos y formularios. */
.contenedor--estrecho { max-width: var(--ancho-estrecho); }

/* Bloque de página con el aire vertical grande del diseño (160px). */
.seccion { padding-block: var(--aire-seccion); }

/* Mismo bloque con la mitad del aire. */
.seccion--compacta { padding-block: var(--aire-seccion-corto); }

/* Banda blanca (la de "Experiencias de Estilo"). */
.seccion--blanca { background-color: var(--blanco); }

/* Banda gris clara (la de "Sobre María Avellán"). */
.seccion--gris { background-color: var(--gris-1); }

/* Alias histórico de la banda gris; se conserva para no romper páginas. */
.seccion--arena { background-color: var(--gris-1); }

/* Banda negra a todo el ancho (el testimonio). */
.seccion--negra {
  background-color: var(--negro);
  color: var(--sobre-negro);
}

/* Banda oscura suave, para bloques secundarios sobre fondo carbón. */
.seccion--oscura {
  background-color: var(--inverso);
  color: var(--sobre-negro);
}

/* Solo para lectores de pantalla. */
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Enlace "saltar al contenido": aparece solo al tabular. */
.saltar {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--margen);
  z-index: 100;
  padding: 0.875rem 1.5rem;
  background: var(--negro);
  color: var(--sobre-negro);
  font-size: var(--label-caps);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.saltar:focus { inset-block-start: 0.75rem; }

/* Etiqueta en mayúsculas pequeñas ("LA CURADORA"). */
.etiqueta {
  display: block;
  font-size: var(--label-caps);
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--terracota);
}

/* Etiqueta clara, para usar sobre fondo negro. */
.etiqueta--claro { color: var(--durazno); }

/* Etiqueta gris, para metadatos discretos. */
.etiqueta--humo { color: var(--contorno); }

/* Titular de sección en Bodoni (36px). */
.titulo-seccion {
  font-family: var(--fuente-titular);
  font-size: var(--headline-md);
  line-height: var(--interlineado-headline-md);
  font-weight: 400;
  color: inherit;
}

/* Titular en cursiva fina, como el "Sobre María Avellán" de la referencia. */
.cursiva-fina { font-style: italic; }

/* Bajada de sección: párrafo de 16px en gris. */
.entradilla {
  font-size: var(--body-md);
  line-height: var(--interlineado-body-md);
  color: var(--texto-suave);
  max-width: 42rem;
}

/* Párrafo grande (18px) para introducciones. */
.texto-grande {
  font-size: var(--body-lg);
  line-height: var(--interlineado-body-lg);
  color: var(--texto-suave);
}

/* Texto secundario en gris. */
.texto-suave { color: var(--texto-suave); }

/* Encabezado de sección: título y bajada a la izquierda, línea a la derecha. */
.encabezado-seccion {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-block-end: 4rem;
}

/* Bloque de texto del encabezado (título + bajada). */
.encabezado-seccion__texto { max-width: 42rem; }
.encabezado-seccion__texto > * + * { margin-block-start: 1rem; }

/* Encabezado centrado (el del Lookbook). */
.encabezado-seccion--centrado {
  align-items: center;
  text-align: center;
}
.encabezado-seccion--centrado .encabezado-seccion__texto { margin-inline: auto; }
.encabezado-seccion--centrado .entradilla { margin-inline: auto; }

/* Línea corta terracota que cierra el encabezado (128 × 2 px). */
.linea-fina {
  display: none;
  flex: none;
  width: 8rem;
  height: 2px;
  background-color: var(--terracota);
}

/* Subrayado fino y discreto para enlaces dentro de párrafos. */
.subrayado-fino {
  border-block-end: 1px solid var(--linea);
  padding-block-end: 2px;
  transition: border-color var(--transicion), color var(--transicion);
}
.subrayado-fino:hover { color: var(--terracota); border-color: var(--terracota); }

/* Encabezado de las páginas interiores. */
.encabezado-pagina {
  padding-block: var(--aire-seccion-corto) var(--aire-seccion-corto);
  border-block-end: 1px solid var(--linea-tenue);
}
.encabezado-pagina > * + * { margin-block-start: 1.25rem; }

/* Titular grande de página interior. */
.encabezado-pagina__titulo {
  font-family: var(--fuente-titular);
  font-size: var(--display-lg);
  line-height: var(--interlineado-display);
  letter-spacing: var(--tracking-display);
  font-weight: 400;
}

/* Bajada del encabezado de página. */
.encabezado-pagina__texto {
  font-size: var(--body-lg);
  line-height: var(--interlineado-body-lg);
  color: var(--texto-suave);
  max-width: 42rem;
}

/* Rejilla genérica de una columna que crece con los modificadores. */
.rejilla {
  display: grid;
  gap: var(--canal);
}
.rejilla--2,
.rejilla--3,
.rejilla--auto { display: grid; gap: var(--canal); }

/* Bloque apilado con separación uniforme. */
.apilado { display: grid; gap: 1.25rem; }

/* Fila de acciones (botones) que se apila en móvil. */
.fila-acciones {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Marco de imagen limpio con zoom lento al pasar el puntero. */
.medio {
  position: relative;
  overflow: hidden;
  background-color: var(--gris-2);
}
.medio > img,
.medio > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transicion-foto);
}
.medio:hover > img,
.medio:hover > video { transform: scale(1.04); }

/* Sombra editorial reutilizable. */
.sombra-editorial { box-shadow: var(--sombra-editorial); }

/* Mensaje de "no hay nada que mostrar" que pinta el JS. */
.vacio {
  grid-column: 1 / -1;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--contorno);
  font-size: var(--body-md);
  border: 1px solid var(--linea-tenue);
}

/* Insignia pequeña en mayúsculas ("Destacado"). */
.insignia {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  background-color: var(--terracota);
  color: var(--sobre-negro);
  font-size: var(--label-caps);
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* La misma insignia colocada sobre la esquina de una tarjeta. */
.insignia--flotante {
  position: absolute;
  inset-block-start: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: 3;
}

/* Fila de cifras (años, clientas, etc.). */
.fila-cifras {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Una cifra con su leyenda. */
.cifra { display: grid; gap: 0.5rem; }

/* El número grande en Bodoni. */
.cifra__valor {
  font-family: var(--fuente-titular);
  font-size: var(--headline-md);
  line-height: 1;
  color: var(--terracota);
}

/* La leyenda de la cifra en mayúsculas pequeñas. */
.cifra__texto {
  font-size: var(--label-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--contorno);
}

/* Paso numerado del proceso de trabajo. */
.paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding-block: 1.75rem;
  border-block-start: 1px solid var(--linea-tenue);
}

/* Número del paso, en Bodoni terracota. */
.paso__numero {
  font-family: var(--fuente-titular);
  font-size: var(--headline-sm);
  line-height: 1;
  color: var(--terracota);
}

/* Texto del paso. */
.paso__cuerpo { display: grid; gap: 0.5rem; }
.paso__cuerpo p { color: var(--texto-suave); font-size: var(--body-md); }

/* ======================================= 04. Botones y enlaces de acción */

/* Botón primario: rectángulo negro, texto blanco en mayúsculas. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-block-size: var(--toque);
  padding: 1.25rem 2.5rem;
  border: 1px solid var(--negro);
  border-radius: 0;                 /* el diseño no lleva esquinas redondeadas */
  background-color: var(--negro);
  color: var(--sobre-negro);
  font-family: var(--fuente-texto);
  font-size: var(--label-caps);
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion),
              color var(--transicion), transform var(--transicion);
}
.boton:hover {
  background-color: var(--terracota);
  border-color: var(--terracota);
  color: var(--sobre-negro);
}
.boton:active { transform: translateY(1px); }
.boton[disabled],
.boton[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Botón secundario: borde fino y fondo transparente. */
.boton--fantasma {
  background-color: transparent;
  border-color: var(--contorno);
  color: var(--tinta);
}
.boton--fantasma:hover {
  background-color: var(--gris-2);
  border-color: var(--negro);
  color: var(--tinta);
}

/* Botón claro para fondos oscuros (banda negra, tarjetas con foto). */
.boton--claro {
  background-color: var(--sobre-negro);
  border-color: var(--sobre-negro);
  color: var(--tinta);
}
.boton--claro:hover {
  background-color: var(--durazno);
  border-color: var(--durazno);
  color: var(--tinta);
}

/* Botón terracota, para una llamada de acento. */
.boton--terracota {
  background-color: var(--terracota);
  border-color: var(--terracota);
  color: var(--sobre-negro);
}
.boton--terracota:hover {
  background-color: var(--negro);
  border-color: var(--negro);
}

/* Botón compacto (barra, pies de tarjeta). */
.boton--pequeno {
  min-block-size: 2.75rem;
  padding: 0.75rem 1.5rem;
}

/* Botón que ocupa todo el ancho disponible. */
.boton--bloque { display: flex; width: 100%; }

/* Botón de WhatsApp: usa su verde de marca. */
.boton--wa {
  background-color: var(--wa);
  border-color: var(--wa);
  color: var(--sobre-negro);
}
.boton--wa:hover { background-color: var(--negro); border-color: var(--negro); }

/* Enlace con flecha ("VER DETALLES →"). */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 2.75rem;
  color: var(--terracota);
  font-size: var(--label-caps);
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  transition: color var(--transicion), gap var(--transicion);
}
.enlace-flecha::after {
  content: "\2192";                 /* flecha → */
  font-size: 1em;
  transition: transform var(--transicion);
}
.enlace-flecha:hover { gap: 0.875rem; }
.enlace-flecha:hover::after { transform: translateX(2px); }

/* La misma flecha sobre foto oscura: durazno para que se lea. */
.enlace-flecha--claro { color: var(--durazno); }
.enlace-flecha--claro:hover { color: var(--sobre-negro); }

/* ============ 05. Barra, navegación, conmutador de idioma y menú móvil */

/* Barra fija con velo y desenfoque, como en la referencia. */
.barra {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  background-color: var(--fondo-velo);
  border-block-end: 1px solid var(--linea-tenue);
  box-shadow: 0 1px 0 rgba(26, 28, 28, 0.04);
  transition: background-color var(--transicion), box-shadow var(--transicion),
              padding var(--transicion);
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .barra {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* Estado compacto: el JS la marca al bajar más de 12px. */
.barra--fija {
  background-color: var(--fondo-velo-firme);
  box-shadow: var(--sombra-barra);
}
.barra--fija .barra__interior { padding-block: 0.625rem; }
.barra--fija .marca__logo { block-size: 2.125rem; }

/* Fila interior de la barra: marca, navegación y acciones. */
.barra__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-block: 1rem;
  padding-inline: max(var(--margen), env(safe-area-inset-left)) max(var(--margen), env(safe-area-inset-right));
  transition: padding var(--transicion);
}

/* Acciones a la derecha: idioma, botón de reserva y hamburguesa. */
.barra__acciones {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* El botón negro "Reserva una consulta" aparece desde tableta. */
.barra__cta { display: none; }

/* Logotipo y nombre de la marca. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-block-size: var(--toque);
  transition: opacity var(--transicion);
}
.marca:hover { opacity: 0.8; }

/* Imagen del logotipo. */
.marca__logo {
  block-size: 2.5rem;
  inline-size: auto;
  object-fit: contain;
  transition: block-size var(--transicion);
}

/* Nombre de la marca en Bodoni. */
.marca__texto {
  display: block;
  font-family: var(--fuente-titular);
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Lema bajo el nombre; solo se ve en pantallas anchas. */
.marca__claim {
  display: none;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--contorno);
}

/* Navegación de escritorio; oculta hasta 72rem (el JS cuenta con ello). */
.nav { display: none; }

/* Enlace de la navegación de escritorio. */
.nav__enlace {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--toque);
  font-size: var(--boton-texto);
  line-height: 1;
  font-weight: 500;
  letter-spacing: var(--tracking-boton);
  color: var(--tinta);
  transition: color var(--transicion);
}
.nav__enlace::after {
  content: "";
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline: 0;
  height: 1px;
  background-color: var(--terracota);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}
.nav__enlace:hover { color: var(--terracota); }
.nav__enlace:hover::after { transform: scaleX(1); }

/* Página actual dentro de la navegación. */
.nav__enlace--activo { color: var(--terracota); }
.nav__enlace--activo::after { transform: scaleX(1); }

/* Conmutador ES/EN: dos botones dentro de un marco fino. */
.conmutador-idioma {
  display: inline-flex;
  border: 1px solid var(--linea);
}

/* Cada opción del conmutador (área táctil completa). */
.conmutador-idioma__opcion {
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-inline: 0.5rem;
  background-color: transparent;
  color: var(--contorno);
  font-size: var(--label-caps);
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  transition: background-color var(--transicion), color var(--transicion);
}
.conmutador-idioma__opcion:hover { color: var(--tinta); }

/* Idioma activo: fondo negro, texto blanco.
   i18n.js marca el botón con la clase suelta "activo" y sitio.js le pasa
   después el modificador BEM; se acepta cualquiera de las dos para que el
   conmutador no parpadee sin marcar en la primera pintada. */
.conmutador-idioma__opcion.activo,
.conmutador-idioma__opcion--activa {
  background-color: var(--negro);
  color: var(--sobre-negro);
}

/* Botón hamburguesa (tres líneas) para abrir el menú móvil. */
.hamburguesa {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  inline-size: var(--toque);
  block-size: var(--toque);
}
.hamburguesa span {
  display: block;
  inline-size: 1.375rem;
  block-size: 1.5px;
  background-color: var(--tinta);
  transition: transform var(--transicion), opacity var(--transicion);
}

/* Hamburguesa en aspa mientras el menú está abierto. */
.hamburguesa--activa span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburguesa--activa span:nth-child(2) { opacity: 0; }
.hamburguesa--activa span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menú móvil a pantalla completa. */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  block-size: 100vh;
  block-size: 100dvh;
  padding: calc(var(--alto-barra) + 1rem) max(var(--margen), env(safe-area-inset-right))
           calc(2rem + env(safe-area-inset-bottom)) max(var(--margen), env(safe-area-inset-left));
  background-color: var(--fondo);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition: opacity var(--transicion-media), transform var(--transicion-media),
              visibility var(--transicion-media);
  overflow-y: auto;
}

/* Menú abierto: el JS pone y quita esta clase. */
.menu-movil--abierto {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Aspa de cerrar del menú móvil. */
.menu-movil__cerrar {
  position: absolute;
  inset-block-start: max(1rem, env(safe-area-inset-top));
  inset-inline-end: max(var(--margen), env(safe-area-inset-right));
  inline-size: var(--toque);
  block-size: var(--toque);
  font-size: 1.25rem;
  color: var(--tinta);
}

/* Lista de enlaces del menú móvil. */
.menu-movil__lista {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Enlace del menú móvil, grande y en Bodoni. */
.menu-movil__enlace {
  display: flex;
  align-items: center;
  min-block-size: var(--toque);
  padding-block: 0.5rem;
  border-block-end: 1px solid var(--linea-tenue);
  font-family: var(--fuente-titular);
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--tinta);
  transition: color var(--transicion), padding-inline-start var(--transicion);
}
.menu-movil__enlace:hover {
  color: var(--terracota);
  padding-inline-start: 0.5rem;
}

/* Página actual dentro del menú móvil. */
.menu-movil__enlace--activo { color: var(--terracota); font-style: italic; }

/* Pie del menú móvil: correo, ciudad y WhatsApp. */
.menu-movil__pie {
  display: grid;
  gap: 1rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--linea-tenue);
  font-size: var(--body-sm);
  color: var(--texto-suave);
}

/* ================================= 05b. Banda de portada (a sangre) ==== */

/* .banda — imagen grande a todo el ancho que abre la portada, encima del
   héroe. El texto va en HTML de verdad (no incrustado en la foto) para que
   siga siendo bilingüe, editable desde el panel y legible por buscadores. */
.banda {
  position: relative;
  isolation: isolate;                 /* el velo no se escapa del contenedor */
  min-block-size: clamp(20rem, 46vw, 34rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--tinta);           /* color de espera mientras carga */
}

/* .banda__foto — la foto NO ocupa todo el ancho: arranca al 38% y llega al
   borde derecho. El origen es un fotograma de 720px y estirarlo a 1920 se veía
   pixelado; ocupando el 62% la ampliación baja de 2.7x a ~1.6x y se ve nítida.
   No se nota el recorte porque el velo ya dejaba esa franja casi negra, y el
   degradado del borde izquierdo funde la foto con el fondo. */
.banda__foto {
  position: absolute;
  inset-block: 0;
  inset-inline: 38% 0;
  inline-size: auto;
  block-size: 100%;
  object-fit: cover;
  object-position: 62% center;
  z-index: -2;
  /* El canto izquierdo se desvanece: no debe verse dónde empieza la foto. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%);
          mask-image: linear-gradient(to right, transparent 0%, #000 22%);
}

/* En pantallas angostas sí va a sangre: ahí el ancho mostrado es menor que el
   del recorte vertical, así que no hay ampliación que perjudique. */
@media (max-width: 61.99rem) {
  .banda__foto {
    inset-inline: 0;
    inline-size: 100%;
    object-position: 62% center;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* .banda__velo — degradado que oscurece el lado del texto sin apagar el
   vestido rojo ni el horizonte. Va como capa aparte para poder ajustarlo
   sin tocar la foto. */
.banda__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right,
      rgba(26, 28, 28, .94) 0%,
      rgba(26, 28, 28, .88) 26%,
      rgba(26, 28, 28, .62) 46%,
      rgba(26, 28, 28, .22) 70%,
      rgba(26, 28, 28, .06) 100%),
    linear-gradient(to top,
      rgba(26, 28, 28, .55) 0%,
      rgba(26, 28, 28, 0) 45%);
}

.banda__contenido {
  position: relative;
  inline-size: 100%;
  max-inline-size: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: max(var(--margen), env(safe-area-inset-left)) max(var(--margen), env(safe-area-inset-right));
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* El logotipo dorado sobre la foto: aquí sí necesita cuerpo, así que va algo
   más grande que en la barra. */
.banda__logo {
  display: block;
  inline-size: clamp(11rem, 20vw, 16rem);
  block-size: auto;
  margin-block-end: clamp(1rem, 2vw, 1.6rem);
}

/* Filete corto dorado entre la marca y la frase: separa los dos registros. */
.banda__filete {
  inline-size: 4.5rem;
  block-size: 1px;
  border: 0;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  background: var(--dorado);
  opacity: .85;
}

.banda__frase {
  margin: 0;
  max-inline-size: 22ch;              /* obliga a partir en dos líneas */
  font-family: var(--fuente-titular);
  font-style: italic;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--sobre-negro);
  text-wrap: balance;
}

.banda__etiqueta {
  display: block;
  margin-block-start: clamp(.9rem, 1.6vw, 1.3rem);
  font-family: var(--fuente-texto);
  font-size: var(--label-caps);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--durazno);
}

@media (min-width: 48rem) {
  .banda__contenido { padding-block-end: clamp(3rem, 5vw, 5rem); }
}

/* En pantallas angostas el recorte apaisado la deja fuera de cuadro, así que
   entra una versión vertical propia y la banda crece de alto. */
@media (max-width: 47.99rem) {
  .banda { min-block-size: clamp(24rem, 92vw, 32rem); }
  .banda__foto { object-position: 62% center; }
}

/* ======================================== 06. Héroe partido y collage */

/* Sección del héroe: dos mitades, texto a la izquierda, collage a la derecha. */
.heroe {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 85vh;
  min-block-size: 85dvh;
  padding-block: clamp(3rem, 2rem + 4.5vw, 7rem) clamp(5rem, 3rem + 8vw, 10rem);
}

/* Rejilla del héroe: una columna en móvil, 12 columnas desde 64rem. */
.heroe__rejilla {
  display: grid;
  gap: var(--canal);
  align-items: center;
}

/* Columna de texto del héroe. */
.heroe__contenido { position: relative; z-index: 2; }

/* Titular del héroe: Bodoni en cursiva. */
.heroe__titulo {
  font-family: var(--fuente-titular);
  font-size: var(--display-lg);
  line-height: var(--interlineado-display);
  letter-spacing: var(--tracking-display);
  font-weight: 400;
  font-style: italic;
  margin-block-end: 2rem;
}

/* "Estilo.": redonda, semibold y terracota, en su propia línea. */
.heroe__acento {
  display: block;
  font-style: normal;
  font-weight: 600;
  color: var(--terracota);
}

/* Párrafo del héroe (18px, gris). */
.heroe__texto,
.heroe__subtitulo {
  font-size: var(--body-lg);
  line-height: var(--interlineado-body-lg);
  color: var(--texto-suave);
  max-width: 36rem;
  margin-block-end: 3rem;
}

/* Botones del héroe: apilados en móvil, en fila desde 30rem. */
.heroe__acciones {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.heroe__acciones .boton:not(.boton--fantasma) { box-shadow: var(--sombra-editorial); }

/* Nota corta bajo los botones (disponibilidad, etc.). */
.heroe__nota {
  margin-block-start: 2rem;
  font-size: var(--body-sm);
  color: var(--contorno);
}

/* Sello o dato suelto del héroe. */
.heroe__sello {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--label-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--contorno);
}

/* Columna derecha del héroe: aloja el collage. */
.heroe__figura {
  position: relative;
  margin-block-start: 4rem;
}

/* Collage: pieza grande al fondo y pieza chica superpuesta. */
.collage {
  position: relative;
  block-size: clamp(24rem, 60vh, 34rem);
}

/* Pieza principal del collage (la foto o el video vertical).
   Va con selector descendente a propósito: si el mismo nodo lleva también
   .video-marco (que declara position: relative), este tiene que ganar. */
.collage .collage__principal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--gris-2);
  box-shadow: var(--sombra-editorial);
}
.collage__principal > img,
.collage__principal > video,
.collage__principal > .video-marco {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Pieza superpuesta abajo a la izquierda; solo desde 48rem, como en Stitch. */
.collage .collage__secundaria {
  display: none;
  position: absolute;
  inset-block-end: -4rem;
  inset-inline-start: -4rem;
  inline-size: 16rem;
  block-size: 20rem;
  overflow: hidden;
  border: 8px solid var(--fondo);
  background-color: var(--gris-2);
  box-shadow: var(--sombra-pieza);
}
.collage__secundaria > img,
.collage__secundaria > video,
.collage__secundaria > .video-marco {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ======================================= 07. Video (héroe y lookbook) */

/* Marco recortado: el video ocupa el mismo hueco que la foto del diseño. */
.video-marco {
  position: relative;
  overflow: hidden;
  background-color: var(--inverso);
}
.video-marco > .video-pieza,
.video-marco > .video-poster {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* El <video> en sí. */
.video-pieza {
  display: block;
  background-color: var(--inverso);
}

/* Imagen de respaldo: oculta mientras el video sí se reproduce. */
.video-poster { display: none; }

/* Marco del héroe: hereda el recorte y la sombra de la foto principal. */
.video-marco--heroe { box-shadow: var(--sombra-editorial); }

/* Marco del lookbook: mismo recorte que las fotos de la rejilla. */
.video-marco--lookbook { box-shadow: var(--sombra-editorial); }

/* Botón de reproducir, visible y con área táctil de sobra. */
.video-boton {
  position: absolute;
  inset-block-end: 1.25rem;
  inset-inline-start: 1.25rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-inline-size: var(--toque);
  min-block-size: var(--toque);
  padding: 0.75rem 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0.45);
  color: var(--sobre-negro);
  font-size: var(--label-caps);
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  transition: background-color var(--transicion), border-color var(--transicion),
              opacity var(--transicion);
}
.video-boton:hover {
  background-color: var(--terracota);
  border-color: var(--terracota);
}
@supports (backdrop-filter: blur(6px)) {
  .video-boton { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}

/* Triángulo de reproducir dibujado con bordes; no necesita icono externo. */
.video-boton__icono {
  inline-size: 0;
  block-size: 0;
  border-block-start: 6px solid transparent;
  border-block-end: 6px solid transparent;
  border-inline-start: 10px solid currentColor;
}

/* Mientras el video corre el botón se retira; vuelve al pasar el puntero. */
.video-marco--reproduciendo .video-boton { opacity: 0; pointer-events: none; }
.video-marco--reproduciendo:hover .video-boton,
.video-marco--reproduciendo:focus-within .video-boton { opacity: 1; pointer-events: auto; }

/* Sin video: el JS lo marca (ahorro de datos) y solo queda el póster. */
.video-marco--sin-video .video-pieza { display: none; }
.video-marco--sin-video .video-boton { display: none; }
.video-marco--sin-video .video-poster { display: block; }

/* ============================ 08. Experiencias de estilo (servicios) */

/* Tarjeta genérica (contenidos sueltos que no son servicios). */
.tarjeta {
  position: relative;
  background-color: var(--blanco);
  border: 1px solid var(--linea-tenue);
  box-shadow: var(--sombra-editorial);
}

/* Tarjeta sin sombra ni borde, para listas discretas. */
.tarjeta--plana { box-shadow: none; border-color: transparent; background-color: transparent; }

/* Imagen superior de la tarjeta genérica. */
.tarjeta__medio { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.tarjeta__medio img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--transicion-lenta); }
.tarjeta:hover .tarjeta__medio img { transform: scale(1.04); }

/* Cuerpo de la tarjeta genérica. */
.tarjeta__cuerpo { display: grid; gap: 0.75rem; padding: 2rem; }

/* Título de la tarjeta genérica. */
.tarjeta__titulo {
  font-family: var(--fuente-titular);
  font-size: var(--headline-sm);
  line-height: var(--interlineado-headline-sm);
}

/* Texto de la tarjeta genérica. */
.tarjeta__texto { font-size: var(--body-md); color: var(--texto-suave); }

/* Pie de la tarjeta genérica. */
.tarjeta__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 2rem 2rem;
}

/* Rejilla de las tres tarjetas con foto; lleva el contador 01, 02, 03. */
.rejilla-experiencias {
  display: grid;
  gap: 2rem;
  counter-reset: experiencia;
}

/* Tarjeta de servicio: foto a sangre, degradado oscuro y texto abajo. */
.tarjeta-servicio {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 31.25rem;          /* 500px, como en la referencia */
  overflow: hidden;
  border: 0;                         /* la foto va a sangre: sin filo de .tarjeta */
  background-color: var(--inverso);
  color: var(--sobre-negro);
  box-shadow: var(--sombra-editorial);
  counter-increment: experiencia;
}

/* Degradado que hace legible el texto sobre la foto. */
.tarjeta-servicio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.2) 45%,
    rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* Número 01 / 02 / 03 en la esquina, que sube unos píxeles al pasar. */
.tarjeta-servicio::after {
  content: counter(experiencia, decimal-leading-zero);
  position: absolute;
  inset-block-start: 2.5rem;
  inset-inline-start: 2.5rem;
  z-index: 2;
  font-family: var(--fuente-titular);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--durazno);
  transition: transform var(--transicion);
  pointer-events: none;
}
.tarjeta-servicio:hover::after,
.tarjeta-servicio:focus-within::after { transform: translateY(-6px); }

/* Si el HTML trae su propio número, el del contador se calla. */
.tarjeta-servicio:has(.tarjeta-servicio__numero)::after { content: none; }

/* Número escrito a mano en el HTML (mismo lugar y mismo trato). */
.tarjeta-servicio__numero {
  position: absolute;
  inset-block-start: 2.5rem;
  inset-inline-start: 2.5rem;
  z-index: 2;
  font-family: var(--fuente-titular);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--durazno);
  transition: transform var(--transicion);
}
.tarjeta-servicio:hover .tarjeta-servicio__numero { transform: translateY(-6px); }

/* Foto de fondo de la tarjeta. */
.tarjeta-servicio__figura {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--inverso);
}
.tarjeta-servicio__figura img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--transicion-lenta);
}
.tarjeta-servicio:hover .tarjeta-servicio__figura img,
.tarjeta-servicio:focus-within .tarjeta-servicio__figura img { transform: scale(1.08); }

/* Icono de la tarjeta (SVG o glifo), en durazno sobre la foto. */
.tarjeta-servicio__icono {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin-block-end: 1rem;
  color: var(--durazno);
}

/* Cuerpo de la tarjeta, sobre el degradado. */
.tarjeta-servicio__cuerpo {
  position: relative;
  z-index: 2;
  padding: 2.5rem 2.5rem 0;
}

/* Título de la tarjeta en Bodoni claro. */
.tarjeta-servicio__nombre {
  font-family: var(--fuente-titular);
  font-size: var(--headline-sm);
  line-height: var(--interlineado-headline-sm);
  font-weight: 400;
  color: var(--sobre-negro);
  margin-block-end: 1rem;
}

/* Resumen del servicio; en escritorio aparece al pasar el puntero. */
.tarjeta-servicio__resumen {
  font-size: var(--body-sm);
  line-height: var(--interlineado-body-sm);
  color: var(--gris-2);
  margin-block-end: 1.5rem;
  transition: opacity var(--transicion-media), transform var(--transicion-media);
}

/* Lista de "qué incluye". */
.tarjeta-servicio__lista {
  display: grid;
  gap: 0.5rem;
  margin-block-end: 1.5rem;
  font-size: var(--body-sm);
  color: var(--gris-2);
}
.tarjeta-servicio__lista li {
  position: relative;
  padding-inline-start: 1rem;
}
.tarjeta-servicio__lista li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.6em;
  inset-inline-start: 0;
  inline-size: 6px;
  block-size: 1px;
  background-color: var(--durazno);
}

/* Metadatos (duración, modalidad) en mayúsculas pequeñas.
   Sin separador dibujado: al envolverse dejaba un punto al principio de línea. */
.tarjeta-servicio__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: var(--label-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--durazno-claro);
}
.tarjeta-servicio__meta span { white-space: nowrap; }

/* Pie de la tarjeta: precio a la izquierda, acción a la derecha. */
.tarjeta-servicio__pie {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 2.5rem 2.5rem;
}

/* Precio del servicio. */
.tarjeta-servicio__precio {
  font-size: var(--label-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--sobre-negro);
}

/* El botón fantasma dentro de la tarjeta va en claro. */
.tarjeta-servicio .boton--fantasma {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--sobre-negro);
}
.tarjeta-servicio .boton--fantasma:hover {
  background-color: var(--sobre-negro);
  border-color: var(--sobre-negro);
  color: var(--tinta);
}

/* Servicio destacado: filo dorado por dentro. */
.tarjeta-servicio--destacada { outline: 1px solid var(--dorado); outline-offset: -1px; }

/* Variante de fichas claras para la página de servicios (sin foto a sangre). */
.rejilla-experiencias--fichas .tarjeta-servicio {
  min-block-size: 0;
  background-color: var(--blanco);
  color: var(--tinta);
  border: 1px solid var(--linea-tenue);
}
.rejilla-experiencias--fichas .tarjeta-servicio::before { content: none; }
.rejilla-experiencias--fichas .tarjeta-servicio::after,
.rejilla-experiencias--fichas .tarjeta-servicio__numero { color: var(--terracota); }
.rejilla-experiencias--fichas .tarjeta-servicio__figura {
  position: relative;
  aspect-ratio: 4 / 5;
}
.rejilla-experiencias--fichas .tarjeta-servicio__nombre { color: var(--tinta); }
.rejilla-experiencias--fichas .tarjeta-servicio__resumen,
.rejilla-experiencias--fichas .tarjeta-servicio__lista { color: var(--texto-suave); opacity: 1; transform: none; }
.rejilla-experiencias--fichas .tarjeta-servicio__meta { color: var(--contorno); }
.rejilla-experiencias--fichas .tarjeta-servicio__precio { color: var(--tinta); }
.rejilla-experiencias--fichas .tarjeta-servicio .boton--fantasma {
  border-color: var(--contorno);
  color: var(--tinta);
}
.rejilla-experiencias--fichas .tarjeta-servicio .boton--fantasma:hover {
  background-color: var(--gris-2);
  border-color: var(--negro);
}

/* ============================== 09. Banda "Sobre María Avellán" (dúo) */

/* Dúo: foto grande a un lado, texto al otro. */
.duo {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

/* Columna de la foto, con el bloque terracota desplazado por detrás. */
.duo__medio {
  position: relative;
  aspect-ratio: 3 / 4;
}
.duo__medio::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(1rem, 1rem);
  background-color: var(--terracota-humo);
  z-index: 0;
}
.duo__medio img,
.duo__medio video {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  box-shadow: var(--sombra-editorial);
}

/* Columna de texto del dúo. */
.duo__texto > * + * { margin-block-start: 1.5rem; }
.duo__texto .etiqueta + * { margin-block-start: 1rem; }
.duo__texto p { color: var(--texto-suave); }
.duo__texto p:first-of-type { font-size: var(--body-lg); line-height: var(--interlineado-body-lg); }

/* Firma escaneada al pie del texto. */
.duo__firma {
  block-size: 4rem;
  inline-size: auto;
  object-fit: contain;
  opacity: 0.9;
  margin-block-start: 2.5rem;
}

/* Dúo invertido: el texto queda a la izquierda. */
.duo--invertido .duo__medio { order: 2; }
.duo--invertido .duo__texto { order: 1; }

/* ========================== 10. Lookbook, galería y visor ampliado */

/* Rejilla asimétrica del lookbook: una pieza grande y dos apiladas. */
.lookbook {
  display: grid;
  gap: 1.5rem;
}

/* Pieza del lookbook: rectángulo limpio con zoom lento al pasar. */
.lookbook__pieza {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--gris-2);
  box-shadow: var(--sombra-editorial);
}
.lookbook__pieza > img,
.lookbook__pieza > video,
.lookbook__pieza > .video-marco {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* El zoom lento es para las fotos: un video en marcha no se escala. */
.lookbook__pieza > img { transition: transform var(--transicion-foto); }
.lookbook__pieza:hover > img:not(.video-poster) { transform: scale(1.05); }

/* Velo tenue que aparece al pasar el puntero. */
.lookbook__pieza::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--velo-foto);
  opacity: 0;
  transition: opacity var(--transicion-media);
  pointer-events: none;
}
.lookbook__pieza:hover::after { opacity: 1; }

/* Pieza destacada (la grande de la izquierda, con el video apaisado). */
.lookbook__pieza--grande { aspect-ratio: 16 / 10; }

/* Pieza chica de la columna derecha. */
.lookbook__pieza--chica { aspect-ratio: 4 / 5; }

/* Pieza ancha de una sola fila. */
.lookbook__pieza--ancha { aspect-ratio: 16 / 9; }

/* Rótulo opcional sobre la pieza. */
.lookbook__pie {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 3;
  padding: 1.5rem;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  color: var(--sobre-negro);
  font-size: var(--label-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Rejilla de la galería que pinta el JS (misma métrica que el lookbook). */
.galeria-masonry {
  display: grid;
  gap: 1.5rem;
}

/* Pieza de la galería: enlace que abre el visor. */
.galeria-item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--gris-2);
  box-shadow: var(--sombra-editorial);
}
.galeria-item img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--transicion-foto);
}
.galeria-item:hover img,
.galeria-item:focus-visible img { transform: scale(1.05); }

/* Pieza vertical de la galería. */
.galeria-item--alta { aspect-ratio: 4 / 5; }

/* Pieza apaisada de la galería. */
.galeria-item--ancha { aspect-ratio: 16 / 10; }

/* Título de la foto, sobre un degradado en el borde inferior. */
.galeria-item__pie {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 1.25rem;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  color: var(--sobre-negro);
  font-size: var(--label-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  transition: opacity var(--transicion-media), transform var(--transicion-media);
}

/* Barra de filtros de la galería. */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-end: 2.5rem;
}

/* Botón de filtro: rectángulo con borde fino. */
.filtro {
  min-block-size: 2.75rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--linea);
  background-color: transparent;
  color: var(--texto-suave);
  font-size: var(--label-caps);
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
.filtro:hover { border-color: var(--negro); color: var(--tinta); }

/* Filtro seleccionado. */
.filtro--activo {
  background-color: var(--negro);
  border-color: var(--negro);
  color: var(--sobre-negro);
}

/* Visor: la foto ampliada a pantalla completa. */
.visor {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: max(1.5rem, env(safe-area-inset-top)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  background-color: rgba(0, 0, 0, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicion-media), visibility var(--transicion-media);
}

/* Visor abierto. */
.visor--abierto { opacity: 1; visibility: visible; }

/* Foto dentro del visor. */
.visor__img {
  max-inline-size: 100%;
  max-block-size: 82vh;
  object-fit: contain;
  box-shadow: var(--sombra-pieza);
}

/* Título de la foto dentro del visor. */
.visor__pie {
  color: var(--gris-3);
  font-size: var(--label-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-align: center;
}

/* Aspa para cerrar el visor. */
.visor__cerrar {
  position: absolute;
  inset-block-start: max(1rem, env(safe-area-inset-top));
  inset-inline-end: 1rem;
  inline-size: var(--toque);
  block-size: var(--toque);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--sobre-negro);
  font-size: 1.25rem;
  transition: background-color var(--transicion);
}
.visor__cerrar::before { content: "\2715"; }
.visor__cerrar:hover { background-color: rgba(255, 255, 255, 0.12); }

/* ================================== 11. Testimonios (banda negra) */

/* Contenedor de testimonios: tira deslizable en móvil. */
.tira-testimonios {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: 0.5rem;
  scrollbar-width: thin;
}
.tira-testimonios > * { scroll-snap-align: start; }

/* Variante de cita única centrada: la banda negra de la portada. */
.tira-testimonios--cita {
  display: block;
  max-width: 56rem;
  margin-inline: auto;
  overflow: visible;
  text-align: center;
}

/* Comillas grandes en terracota que abren la cita. */
.comillas {
  display: block;
  font-family: var(--fuente-titular);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--terracota);
  opacity: 0.85;
  margin-block-end: 2rem;
}
/* Si el nodo va vacío, las comillas las dibuja el CSS; si trae un SVG, manda el SVG. */
.comillas:empty::before { content: "\201D"; }

/* Tarjeta de testimonio (listados y páginas interiores). */
.testimonio {
  display: grid;
  gap: 1.25rem;
  padding: 2.5rem;
  background-color: var(--casi-blanco);
  border: 1px solid var(--linea-tenue);
}

/* Estrellas de la valoración. */
.testimonio__estrellas {
  color: var(--dorado);
  font-size: var(--body-md);
  letter-spacing: 0.2em;
}

/* Texto del testimonio. */
.testimonio__texto {
  font-family: var(--fuente-titular);
  font-size: var(--headline-sm);
  line-height: var(--interlineado-headline-sm);
  font-style: italic;
}

/* Bloque de autoría (avatar + nombre + ciudad). */
.testimonio__autor {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

/* Foto de la persona que da el testimonio. */
.testimonio__avatar {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  object-fit: cover;
  flex: none;
}

/* Nombre de la persona. */
.testimonio__nombre {
  font-size: var(--label-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
}

/* Ciudad o cargo. */
.testimonio__ciudad {
  font-size: var(--label-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--contorno);
}

/* El testimonio dentro de la banda negra pierde la caja y se centra. */
.seccion--negra .testimonio,
.tira-testimonios--cita .testimonio {
  background-color: transparent;
  border: 0;
  padding: 0;
  justify-items: center;
  text-align: center;
  gap: 2rem;
}
.seccion--negra .testimonio__texto,
.tira-testimonios--cita .testimonio__texto {
  font-size: var(--headline-md);
  line-height: var(--interlineado-headline-md);
  color: var(--sobre-negro);
}
.seccion--negra .testimonio__autor,
.tira-testimonios--cita .testimonio__autor { justify-content: center; }
.seccion--negra .testimonio__nombre { color: var(--gris-medio); }
.seccion--negra .testimonio__ciudad { color: var(--contorno); }

/* Controles de la tira (flechas), solo si hay desbordamiento. */
.tira-controles {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-block-start: 1.5rem;
}
.tira-controles button {
  inline-size: var(--toque);
  block-size: var(--toque);
  border: 1px solid var(--linea);
  color: var(--tinta);
  transition: background-color var(--transicion), border-color var(--transicion);
}
.tira-controles button:hover:not([disabled]) { background-color: var(--gris-2); border-color: var(--negro); }
.tira-controles button[disabled] { opacity: 0.35; cursor: not-allowed; }

/* ================================ 12. Franjas de llamada a la acción */

/* Franja negra a todo el ancho con un cierre de sección. */
.franja-cta {
  background-color: var(--negro);
  color: var(--sobre-negro);
  padding-block: var(--aire-seccion-corto);
}

/* Franja en terracota. */
.franja-cta--terracota { background-color: var(--terracota); }

/* Interior de la franja: texto a la izquierda, acciones a la derecha. */
.franja-cta__interior {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}

/* Titular de la franja. */
.franja-cta__titulo {
  font-family: var(--fuente-titular);
  font-size: var(--headline-md);
  line-height: var(--interlineado-headline-md);
  font-style: italic;
}

/* Texto de apoyo de la franja. */
.franja-cta__texto {
  font-size: var(--body-md);
  color: var(--gris-3);
  max-width: 36rem;
}

/* Línea decorativa fina de la franja. */
.franja-cta__adorno {
  inline-size: 4rem;
  block-size: 1px;
  background-color: var(--durazno);
}

/* =========================== 13. Formularios, campos y avisos */

/* Caja blanca que envuelve un formulario. */
.caja-formulario {
  background-color: var(--blanco);
  border: 1px solid var(--linea-tenue);
  box-shadow: var(--sombra-editorial);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
}

/* Formulario: campos apilados. */
.formulario { display: grid; gap: 1.25rem; }

/* Un campo con su etiqueta, su control y su error. */
.campo { display: grid; gap: 0.5rem; }

/* Etiqueta del campo, en mayúsculas pequeñas. */
.campo__etiqueta {
  font-size: var(--label-caps);
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--contorno);
}

/* Asterisco de campo obligatorio. */
.campo__requerido { color: var(--terracota); }

/* Controles: rectángulos limpios de borde fino. */
.campo input,
.campo select,
.campo textarea,
.campo-casilla input[type="text"],
.boletin input {
  inline-size: 100%;
  min-block-size: var(--toque);
  padding: 0.875rem 1rem;
  border: 1px solid var(--linea);
  border-radius: 0;
  background-color: var(--blanco);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--body-md);
  line-height: var(--interlineado-body-md);
  transition: border-color var(--transicion), box-shadow var(--transicion);
  -webkit-appearance: none;
  appearance: none;
}
.campo textarea { min-block-size: 8rem; resize: vertical; }
.campo select {
  /* Flecha propia: la nativa rompe el aire del diseño. */
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%),
                    linear-gradient(135deg, var(--tinta) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) center, calc(100% - 0.8rem) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 2.5rem;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--tinta); }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--contorno); opacity: 1; }

/* Texto de ayuda bajo el campo. */
.campo__ayuda { font-size: var(--body-sm); color: var(--contorno); }

/* Mensaje de error del campo; se esconde mientras está vacío. */
.campo__error {
  font-size: var(--body-sm);
  color: var(--error);
  min-block-size: 0;
}
.campo__error:empty { display: none; }

/* Campo en error: borde y texto en rojo. */
.campo--error input,
.campo--error select,
.campo--error textarea { border-color: var(--error); }
.campo--error .campo__etiqueta { color: var(--error); }

/* Dos campos en una fila desde 30rem. */
.campo--doble { display: grid; gap: 1.25rem; }

/* Casilla de verificación con su texto al lado. */
.campo-casilla {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--body-sm);
  color: var(--texto-suave);
}
.campo-casilla input[type="checkbox"] {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 0.15rem;
  accent-color: var(--terracota);
  flex: none;
}
.campo-casilla.campo--error { color: var(--error); }

/* Grupo de opciones tipo tarjeta (modalidad, horario). */
.opciones { display: grid; gap: 0.75rem; }

/* Una opción: rectángulo con borde que se marca al elegirla. */
.opcion {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-block-size: var(--toque);
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--linea);
  background-color: var(--blanco);
  font-size: var(--body-sm);
  cursor: pointer;
  transition: border-color var(--transicion), background-color var(--transicion);
}
.opcion:hover { border-color: var(--contorno); }
.opcion input { accent-color: var(--terracota); }
.opcion:has(input:checked) {
  border-color: var(--negro);
  background-color: var(--gris-1);
}

/* Fila de acciones del formulario. */
.formulario__acciones {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-start: 0.5rem;
}

/* Nota legal o aclaración al pie del formulario. */
.formulario__nota { font-size: var(--body-sm); color: var(--contorno); }

/* Aviso del formulario (resultado del envío). */
.aviso {
  padding: 1rem 1.25rem;
  border-inline-start: 3px solid var(--contorno);
  background-color: var(--gris-1);
  font-size: var(--body-sm);
  line-height: var(--interlineado-body-sm);
  color: var(--tinta);
}

/* Aviso informativo. */
.aviso--info { border-inline-start-color: var(--contorno); background-color: var(--gris-1); }

/* Aviso de éxito. */
.aviso--exito { border-inline-start-color: var(--exito); background-color: var(--exito-fondo); color: var(--exito); }

/* Aviso de error. */
.aviso--error { border-inline-start-color: var(--error); background-color: var(--error-fondo); color: var(--error); }

/* Panel de éxito con el código de reserva. */
.codigo-reserva {
  display: inline-block;
  padding: 1rem 1.5rem;
  border: 1px dashed var(--linea);
  font-family: var(--fuente-titular);
  font-size: var(--headline-sm);
  letter-spacing: 0.12em;
  color: var(--terracota);
}

/* Boletín: fila de correo + botón sobre banda oscura. */
.boletin { display: grid; gap: 0.75rem; }

/* La fila del boletín. */
.boletin__fila {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.boletin input {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--sobre-negro);
}
.boletin input::placeholder { color: var(--gris-medio); }
.boletin input:focus { border-color: var(--sobre-negro); }

/* Nota bajo el boletín. */
.boletin__nota { font-size: var(--body-sm); color: var(--gris-medio); }

/* Bloque de datos de contacto (correo, teléfono, ciudad, horario). */
.datos-contacto { display: grid; gap: 1.5rem; }

/* Un dato con su etiqueta y su valor. */
.dato { display: grid; gap: 0.375rem; }

/* Etiqueta del dato. */
.dato__etiqueta {
  font-size: var(--label-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--contorno);
}

/* Valor del dato. */
.dato__valor { font-size: var(--body-md); color: var(--tinta); }

/* Marco del mapa incrustado. */
.mapa {
  border: 1px solid var(--linea-tenue);
  box-shadow: var(--sombra-editorial);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.mapa iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }

/* ===================================================== 14. Pie */

/* Pie de página en gris claro. */
.pie {
  background-color: var(--gris-3);
  padding-block: var(--aire-seccion-corto);
  padding-block-end: calc(var(--aire-seccion-corto) + env(safe-area-inset-bottom));
  font-size: var(--body-sm);
}

/* Rejilla del pie. */
.pie__rejilla {
  display: grid;
  gap: 2.5rem;
}

/* Columna de la marca dentro del pie. */
.pie__marca { display: grid; gap: 1.5rem; justify-items: start; }
.pie__marca .marca__logo { filter: grayscale(1); opacity: 0.85; }

/* Frase de la marca en el pie. */
.pie__claim { color: var(--texto-suave); max-width: 24rem; }

/* Título de columna del pie, en mayúsculas pequeñas. */
.pie__titulo {
  font-family: var(--fuente-texto);
  font-size: var(--label-caps);
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--contorno);
  margin-block-end: 1.25rem;
}

/* Lista de enlaces del pie. */
.pie__lista { display: grid; gap: 1rem; }

/* Enlace del pie. */
.pie__enlace {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.25rem;
  color: var(--tinta);
  transition: color var(--transicion);
}
.pie__enlace:hover { color: var(--terracota); }

/* Fila de redes sociales. */
.redes { display: flex; gap: 0.75rem; }

/* Icono de red social dentro de un cuadro de borde fino. */
.red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--toque);
  block-size: var(--toque);
  border: 1px solid var(--linea);
  color: var(--tinta);
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
.red svg { inline-size: 1.25rem; block-size: 1.25rem; }
.red:hover { background-color: var(--negro); border-color: var(--negro); color: var(--sobre-negro); }

/* Línea legal al final del pie. */
.pie__legal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block-start: 3rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--linea);
  font-size: 0.75rem;
  color: var(--contorno);
}

/* ============================================ 15. WhatsApp flotante */

/* Botón flotante de WhatsApp, sobre la esquina inferior derecha. */
.wa-flotante {
  position: fixed;
  z-index: 45;
  inset-block-end: calc(1.25rem + env(safe-area-inset-bottom));
  inset-inline-end: calc(1.25rem + env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-inline-size: var(--toque);
  min-block-size: var(--toque);
  padding: 0.875rem 1rem;
  background-color: var(--wa);
  color: var(--sobre-negro);
  box-shadow: var(--sombra-pieza);
  font-size: var(--label-caps);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  transition: transform var(--transicion), opacity var(--transicion), background-color var(--transicion);
}
.wa-flotante:hover { background-color: var(--negro); }

/* Icono del botón flotante. */
.wa-flotante__icono { inline-size: 1.5rem; block-size: 1.5rem; flex: none; }

/* Texto del botón flotante; en móvil solo se ve el icono. */
.wa-flotante__texto { display: none; }

/* El flotante se aparta mientras el pie está a la vista. */
.wa-flotante--oculto {
  opacity: 0;
  transform: translateY(150%);
  pointer-events: none;
}

/* ================ 16. Animaciones de entrada y esqueletos de carga */

/* Entrada al hacer scroll: desplazamiento corto y opacidad. */
.aparecer {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition: opacity var(--transicion-lenta), transform var(--transicion-lenta);
  will-change: opacity, transform;
}

/* Entrada desde la izquierda. */
.aparecer--izq { transform: translate3d(-1.5rem, 0, 0); }

/* Entrada desde la derecha. */
.aparecer--der { transform: translate3d(1.5rem, 0, 0); }

/* Estado final: el JS añade esta clase al entrar en pantalla. */
.aparecer--visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Retrasos escalonados para las piezas de una misma rejilla. */
.retraso-1 { transition-delay: 80ms; }
.retraso-2 { transition-delay: 160ms; }
.retraso-3 { transition-delay: 240ms; }
.retraso-4 { transition-delay: 320ms; }

/* Entrada escalonada del héroe: los bloques suben uno detrás de otro. */
@keyframes subir-entrada {
  from { opacity: 0; transform: translate3d(0, 1.75rem, 0); }
  to   { opacity: 1; transform: none; }
}
.entrada-escalonada > * {
  opacity: 0;
  animation: subir-entrada 800ms var(--curva) forwards;
}
.entrada-escalonada > *:nth-child(1) { animation-delay: 100ms; }
.entrada-escalonada > *:nth-child(2) { animation-delay: 240ms; }
.entrada-escalonada > *:nth-child(3) { animation-delay: 380ms; }
.entrada-escalonada > *:nth-child(4) { animation-delay: 520ms; }
.entrada-escalonada > *:nth-child(5) { animation-delay: 660ms; }

/* Esqueleto de carga: rectángulo gris con un brillo que recorre. */
@keyframes brillo-carga {
  from { background-position: -120% 0; }
  to   { background-position: 220% 0; }
}
.cargando {
  background-color: var(--gris-2);
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: brillo-carga 1400ms linear infinite;
}

/* Esqueleto del tamaño de una tarjeta de servicio. */
.cargando--tarjeta { block-size: 31.25rem; }

/* Esqueleto del tamaño de una foto de galería. */
.cargando--medio { aspect-ratio: 1 / 1; }

/* Esqueleto de una línea de texto. */
.cargando--texto { block-size: 1rem; }

/* Esqueleto de un titular. */
.cargando--titulo { block-size: 2rem; max-inline-size: 18rem; }

/* ============================================ Puntos de quiebre */

/* --- Desde 30rem (480px): filas de botones y campos dobles. --- */
@media (min-width: 30rem) {
  .heroe__acciones,
  .fila-acciones,
  .formulario__acciones,
  .boletin__fila { flex-direction: row; flex-wrap: wrap; align-items: center; }

  .campo--doble { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .galeria-masonry,
  .lookbook { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .wa-flotante__texto { display: inline; }
}

/* --- Desde 48rem (768px): tres columnas, collage completo, barra ancha. --- */
@media (min-width: 48rem) {
  :root {
    --margen: 2rem;
    --canal: 2rem;
    --tracking-display: -0.02em;
  }

  .encabezado-seccion {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .encabezado-seccion--centrado { flex-direction: column; justify-content: center; }

  .linea-fina { display: block; margin-block-end: 0.75rem; }

  .barra__cta { display: inline-flex; }

  .marca__logo { block-size: 3rem; }

  .rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla--auto { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

  .fila-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Tres tarjetas de experiencia; la del medio baja 48px, como en Stitch.
     Se baja con margen y no con transform: transform es de la animación
     de entrada (.aparecer) y las dos se pisarían. */
  .rejilla-experiencias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla-experiencias > * { align-self: start; }
  .rejilla-experiencias > :nth-child(2) { margin-block-start: 3rem; }
  .rejilla-experiencias--fichas > :nth-child(2) { margin-block-start: 0; }

  /* La pieza superpuesta del collage aparece a partir de aquí. */
  .collage .collage__secundaria { display: block; }

  /* Rejilla asimétrica del lookbook: 12 columnas y filas de 300px. */
  .lookbook {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 18.75rem;
    gap: 2rem;
  }
  .lookbook__pieza { aspect-ratio: auto; grid-column: span 4; }
  .lookbook__pieza--grande { grid-column: span 8; grid-row: span 2; }
  .lookbook__pieza--chica { grid-column: span 4; grid-row: span 1; }
  .lookbook__pieza--ancha { grid-column: span 8; grid-row: span 1; }

  /* La galería que pinta el JS sigue el mismo ritmo. */
  .galeria-masonry {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 18.75rem;
    gap: 2rem;
  }
  .galeria-item { aspect-ratio: auto; grid-column: span 4; }
  .galeria-item--alta { grid-row: span 2; }
  .galeria-item--ancha { grid-column: span 8; }

  /* Testimonios en tres columnas: ya no hace falta deslizar. */
  .tira-testimonios {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
  }
  .tira-testimonios--cita { display: block; }

  .franja-cta__interior {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /* Como en la referencia: la marca ocupa la izquierda y las dos columnas de
     enlaces se van pegadas al borde derecho, juntas (flex justify-end allá,
     una columna elástica y dos automáticas acá). */
  .pie__rejilla {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 3rem;
  }
  .pie__marca { grid-column: 1; }

  .pie__legal { flex-direction: row; justify-content: space-between; }

  .comillas { font-size: 4rem; }
}

/* --- Desde 64rem (1024px): héroe y "sobre mí" partidos en dos. --- */
@media (min-width: 64rem) {
  .heroe__rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .heroe__contenido { grid-column: span 7; padding-inline-end: 3rem; }
  .heroe__figura { grid-column: span 5; margin-block-start: 0; }

  .collage { block-size: 70vh; max-block-size: 44rem; }

  .duo { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--canal); }
  .duo__medio { grid-column: span 5; aspect-ratio: 3 / 4; max-block-size: 80vh; }
  .duo__texto { grid-column: span 7; padding-inline-start: 4rem; }
  .duo--invertido .duo__medio { order: 2; }
  .duo--invertido .duo__texto { order: 1; padding-inline: 0 4rem; }

  .marca__claim { display: block; }

  /* En escritorio el resumen del servicio se descubre al pasar el puntero. */
  .tarjeta-servicio__resumen { opacity: 0; transform: translateY(1rem); }
  .tarjeta-servicio:hover .tarjeta-servicio__resumen,
  .tarjeta-servicio:focus-within .tarjeta-servicio__resumen { opacity: 1; transform: none; }
  .rejilla-experiencias--fichas .tarjeta-servicio__resumen { opacity: 1; transform: none; }

  /* Los títulos de la galería aparecen al pasar por encima. */
  .galeria-item__pie { opacity: 0; transform: translateY(0.5rem); }
  .galeria-item:hover .galeria-item__pie,
  .galeria-item:focus-visible .galeria-item__pie { opacity: 1; transform: none; }
}

/* --- Desde 72rem (1152px): aparece la navegación de escritorio. --- */
/* El JS cierra el menú móvil justo en este ancho: no cambiar sin tocarlo. */
@media (min-width: 72rem) {
  .nav { display: flex; align-items: center; gap: 2.5rem; }
  .hamburguesa { display: none; }
  .menu-movil { display: none; }
}

/* --- Pantallas anchas: el contenido no se despega de los bordes. --- */
@media (min-width: 90rem) {
  .contenedor,
  .barra__interior { padding-inline: var(--margen); }
}

/* --- Apuntadores gruesos: nada depende solo del hover. --- */
@media (hover: none) {
  .tarjeta-servicio__resumen,
  .galeria-item__pie { opacity: 1; transform: none; }
  .video-marco--reproduciendo .video-boton { opacity: 1; pointer-events: auto; }
}

/* ================================= 17. Movimiento reducido e impresión */

/* Quien pide menos movimiento no ve ninguno: ni entradas, ni zoom, ni video. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .aparecer,
  .entrada-escalonada > * {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .medio:hover > img,
  .medio:hover > video,
  .lookbook__pieza:hover > img,
  .lookbook__pieza:hover > video,
  .galeria-item:hover img,
  .tarjeta-servicio:hover .tarjeta-servicio__figura img,
  .tarjeta:hover .tarjeta__medio img { transform: none; }

  .tarjeta-servicio:hover::after,
  .tarjeta-servicio:hover .tarjeta-servicio__numero { transform: none; }

  .tarjeta-servicio__resumen,
  .galeria-item__pie { opacity: 1; transform: none; }

  .cargando { animation: none; background-image: none; }

  /* Ningún video se reproduce: queda la imagen de respaldo. */
  .video-pieza { display: none; }
  .video-boton { display: none; }
  .video-poster { display: block; }
}

/* Impresión: sin fondos oscuros ni elementos flotantes. */
@media print {
  .barra,
  .menu-movil,
  .wa-flotante,
  .visor,
  .video-boton { display: none !important; }

  body { padding-block-start: 0; background: #fff; color: #000; }
  .seccion { padding-block: 1.5rem; }
  .aparecer { opacity: 1; transform: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}