/* ===========================================================================
   Eventos NearMe — hoja de estilos de la web pública.
   ---------------------------------------------------------------------------
   La idea del diseño sale del logotipo: negro y oro. Sobre eso, tres decisiones
   que sostienen todo lo demás:

   1. RITMO CLARO / OSCURO. Una web entera en negro se vuelve monótona y las
      fotos se apagan. Aquí las secciones alternan fondo oscuro y fondo marfil,
      como un reportaje de revista. El oro cambia de tono en cada una: sobre
      negro va claro y brillante; sobre marfil, más oscuro, o no se leería.

   2. LA TIPOGRAFÍA HACE EL TRABAJO. Cormorant (serif de mucho contraste) en
      tamaños grandes y peso fino para los titulares; Jost para todo lo demás.
      Casi no hay adornos: el lujo lo dan el espacio en blanco y el tipo grande.

   3. LAS ANIMACIONES SON DE APOYO, NO EL ESPECTÁCULO. Todo lo que se mueve
      entra una vez, al aparecer, y se queda quieto. Y todo se apaga por
      completo con `prefers-reduced-motion`: hay gente a la que el movimiento le
      produce mareo, y una web de bodas la va a mirar mucha gente distinta.
   =========================================================================== */

/* ------------------------------------------------------------------ fichas ---- */

:root {
  /* Negros. Tres, no uno: el fondo, las superficies elevadas y los bordes. */
  --tinta:        #0B0B0D;
  --tinta-2:      #101013;
  --tinta-3:      #17171B;
  --tinta-borde:  rgba(244, 240, 232, .12);

  /* Marfil, para el texto sobre oscuro y para los fondos claros. */
  --marfil:       #F4F0E8;
  --marfil-2:     #EBE5D9;
  --marfil-tenue: rgba(244, 240, 232, .62);
  --marfil-suave: rgba(244, 240, 232, .38);

  /* Oro. El degradado es el del logotipo, para que la web y la marca hablen
     el mismo idioma. */
  --oro:          #C9A45C;
  --oro-claro:    #EBD9A8;
  --oro-oscuro:   #8A6A2E;
  --oro-profundo: #6F5222;
  --oro-degradado: linear-gradient(112deg, #8A6A2E 0%, #EBD9A8 24%, #C9A45C 48%, #F5E9C8 72%, #96712F 100%);

  /* Verde apagado de jardín: aparece en detalles, tomado de las fotos. */
  --verde:        #4A5443;

  /* Variables de sección: las reescriben .seccion--clara y .seccion--oscura,
     y así el mismo componente sirve sobre negro y sobre marfil sin duplicarlo. */
  --fondo:        var(--tinta);
  --texto:        var(--marfil);
  --texto-tenue:  var(--marfil-tenue);
  --texto-suave:  var(--marfil-suave);
  --acento:       var(--oro);
  --borde:        var(--tinta-borde);

  --serif: 'Cormorant', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Anchos. El de texto es estrecho a propósito: una línea de más de 70
     caracteres se lee peor, y aquí hay párrafos que la gente va a leer de
     verdad. */
  --ancho:       1280px;
  --ancho-texto: 68ch;

  --curva:       cubic-bezier(.22, .61, .36, 1);
  --curva-suave: cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------------- base ---- */

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

html {
  scroll-behavior: smooth;
  /* El menú es fijo: sin esto, al pinchar un enlace de anclaje el titular se
     queda escondido detrás de la barra. */
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--tinta);
  color: var(--marfil);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, .55vw + .88rem, 1.1rem);
  line-height: 1.75;
  letter-spacing: .012em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

::selection { background: var(--oro); color: var(--tinta); }

/* El foco se ve SIEMPRE y en oro. Quitar el foco visible por estética es
   dejar la web inservible para quien navega con el teclado. */
:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Barra de desplazamiento a tono, para que no rompa el conjunto en Windows. */
* { scrollbar-color: var(--oro-oscuro) var(--tinta-2); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tinta-2); }
::-webkit-scrollbar-thumb { background: var(--oro-oscuro); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--oro); }

/* Para lectores de pantalla: visible para ellos, invisible en pantalla. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Salto al contenido: lo primero que encuentra quien navega con teclado. */
.salto {
  position: absolute; top: -100px; left: 20px; z-index: 200;
  padding: 12px 20px; background: var(--oro); color: var(--tinta);
  text-decoration: none; font-size: .82rem; letter-spacing: .12em;
  text-transform: uppercase; transition: top .2s var(--curva);
}
.salto:focus { top: 20px; }

/* --------------------------------------------------------------- secciones ---- */

.seccion {
  position: relative;
  padding: clamp(72px, 11vh, 150px) 0;
  background: var(--fondo);
  color: var(--texto);
}

.seccion--oscura {
  --fondo: var(--tinta);
  --texto: var(--marfil);
  --texto-tenue: var(--marfil-tenue);
  --texto-suave: var(--marfil-suave);
  --acento: var(--oro);
  --borde: var(--tinta-borde);
}
.seccion--oscura-2 { --fondo: var(--tinta-2); }

/* Sobre marfil el oro tiene que oscurecerse: el #C9A45C sobre #F4F0E8 no llega
   al contraste mínimo y se lee mal, sobre todo en móvil al sol. */
.seccion--clara {
  --fondo: var(--marfil);
  --texto: #1A1A1C;
  --texto-tenue: rgba(26, 26, 28, .70);
  --texto-suave: rgba(26, 26, 28, .48);
  --acento: var(--oro-oscuro);
  --borde: rgba(26, 26, 28, .14);
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}
.contenedor--estrecho { max-width: 880px; }

/* --------------------------------------------------------------- titulares ---- */

/* La línea pequeña en mayúsculas espaciadas que abre cada sección, con una
   rayita de oro delante. Es el recurso que le da unidad a toda la página. */
.antetitulo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--acento);
}
.antetitulo::before {
  content: '';
  width: 42px; height: 1px;
  background: var(--acento);
  flex: none;
  /* Se dibuja al entrar la sección (ver .revelar). */
  transform-origin: left;
}
.antetitulo--centrado { justify-content: center; }
.antetitulo--centrado::after {
  content: ''; width: 42px; height: 1px; background: var(--acento); flex: none;
}

h1, h2, h3, .titular {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
  color: var(--texto);
  /* Los titulares llevan saltos de línea escritos a mano desde el panel. */
  white-space: pre-line;
  text-wrap: balance;
}

.titular-seccion { font-size: clamp(2.1rem, 4.3vw, 3.8rem); margin-bottom: .6em; }
.titular-menor   { font-size: clamp(1.4rem, 2.1vw, 1.95rem); }

/* La cursiva de Cormorant es preciosa: se usa para destacar una palabra dentro
   de un titular. Se marca con <em> desde el contenido. */
h1 em, h2 em, .titular em { font-style: italic; color: var(--acento); }

.entradilla {
  max-width: var(--ancho-texto);
  color: var(--texto-tenue);
  font-size: clamp(1.02rem, .6vw + .9rem, 1.2rem);
  line-height: 1.8;
}
.entradilla p { margin: 0 0 1.1em; }
.entradilla p:last-child { margin-bottom: 0; }
.entradilla--centrada { margin-left: auto; margin-right: auto; text-align: center; }

/* Filete de oro: separador fino que se dibuja solo al aparecer. */
.filete {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acento) 18%, var(--acento) 82%, transparent);
  border: 0; margin: 0;
  opacity: .5;
}

/* Texto con el degradado de oro dentro de las letras. */
.oro-degradado {
  background: var(--oro-degradado);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Reserva: si el navegador no sabe recortar el fondo al texto, se ve oro
     plano en vez de texto invisible. */
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .oro-degradado { color: var(--oro); -webkit-text-fill-color: var(--oro); background: none; }
}

/* ---------------------------------------------------------------- botones ---- */

.boton {
  --boton-fondo: var(--oro);
  --boton-texto: var(--tinta);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 38px;
  border: 1px solid var(--boton-fondo);
  background: var(--boton-fondo);
  color: var(--boton-texto);
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .19em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: color .45s var(--curva), border-color .45s var(--curva),
              background-color .45s var(--curva);
}
/* El relleno entra desde abajo al pasar por encima. Un color plano que cambia
   de golpe se ve barato; esto cuesta lo mismo y se ve caro. */
.boton::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--marfil);
  transform: translateY(101%);
  transition: transform .45s var(--curva);
  z-index: 0;
}
.boton > * { position: relative; z-index: 1; }
.boton:hover::after, .boton:focus-visible::after { transform: translateY(0); }
.boton:hover, .boton:focus-visible { color: var(--tinta); border-color: var(--marfil); }

/* Botón de contorno, para la acción secundaria. */
.boton--contorno {
  --boton-fondo: transparent;
  --boton-texto: var(--texto);
  border-color: var(--acento);
}
.boton--contorno::after { background: var(--acento); }
.boton--contorno:hover, .boton--contorno:focus-visible {
  color: var(--tinta); border-color: var(--acento);
}

.boton--pequeno { padding: 13px 26px; font-size: .72rem; }
.boton[disabled] { opacity: .45; cursor: not-allowed; }
.boton[disabled]::after { display: none; }

/* Enlace de texto con subrayado que se dibuja al pasar por encima. */
.enlace {
  color: var(--acento);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}
.enlace::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--curva);
}
.enlace:hover::after, .enlace:focus-visible::after { transform: scaleX(1); }

/* ==================================================================== menú ==== */

.cabecera {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px clamp(20px, 5vw, 56px);
  transition: padding .5s var(--curva), background-color .5s var(--curva),
              box-shadow .5s var(--curva), backdrop-filter .5s var(--curva);
}
/* Al bajar, la barra se encoge y se pone un fondo translúcido: así el menú se
   lee sobre las fotos de la galería sin taparlas del todo. */
.cabecera.encogida {
  padding: 12px clamp(20px, 5vw, 56px);
  background: rgba(11, 11, 13, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--tinta-borde);
}

.cabecera__logo { display: block; flex: none; }
.cabecera__logo img {
  height: 62px; width: auto;
  transition: height .5s var(--curva);
}
.cabecera.encogida .cabecera__logo img { height: 44px; }

.menu { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.menu a {
  color: var(--marfil);
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  transition: color .3s var(--curva);
}
.menu a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .4s var(--curva);
}
.menu a:hover, .menu a:focus-visible, .menu a.activo { color: var(--oro-claro); }
.menu a:hover::after, .menu a:focus-visible::after, .menu a.activo::after { transform: scaleX(1); }

.cabecera__acciones { display: flex; align-items: center; gap: 16px; }

/* Selector de idioma. Es importante que se vea: media clientela de Eventos
   NearMe son parejas extranjeras, y lo primero que buscan es el "EN". */
.idiomas {
  display: flex;
  align-items: center;
  border: 1px solid var(--tinta-borde);
  border-radius: 2px;
  overflow: hidden;
}
.idiomas button {
  padding: 7px 12px;
  border: 0; background: transparent;
  color: var(--marfil-tenue);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s var(--curva), color .3s var(--curva);
}
.idiomas button:hover { color: var(--marfil); }
.idiomas button[aria-pressed='true'] { background: var(--oro); color: var(--tinta); }

/* Botón de menú para móvil: tres rayas que se convierten en cruz. */
.hamburguesa {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--tinta-borde);
  background: transparent;
  cursor: pointer;
  position: relative;
  border-radius: 2px;
}
.hamburguesa span {
  position: absolute; left: 12px; right: 12px; height: 1px;
  background: var(--marfil);
  transition: transform .4s var(--curva), opacity .3s var(--curva);
}
.hamburguesa span:nth-child(1) { top: 16px; }
.hamburguesa span:nth-child(2) { top: 21.5px; }
.hamburguesa span:nth-child(3) { top: 27px; }
.hamburguesa[aria-expanded='true'] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburguesa[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =================================================================== portada ==== */

.portada {
  position: relative;
  min-height: 100svh;          /* svh: cuenta bien con la barra del navegador móvil */
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--tinta);
}

/* Las fotos del fondo, una encima de otra, cruzándose despacio. */
.portada__fondo { position: absolute; inset: 0; z-index: 0; }

/* Capa base, siempre presente y por debajo de las fotos. Es un jardín al
   anochecer dibujado por nosotros (public/img/fondo-portada.svg). Está por dos
   razones: la portada se ve acabada aunque no haya ninguna foto marcada, y no
   hay un instante en negro mientras carga la primera. */
.portada__base {
  position: absolute; inset: 0;
  background: #0B0B0D url('/img/fondo-portada.svg') center / cover no-repeat;
}
.portada__foto {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 2.4s var(--curva-suave);
}
.portada__foto.visible { opacity: 1; }
.portada__foto img, .portada__foto video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Acercamiento lentísimo mientras está visible: da vida sin marear. */
  transform: scale(1.06);
  transition: transform 9s linear;
}
.portada__foto.visible img, .portada__foto.visible video { transform: scale(1.14); }

/* Dos velos: uno vertical para que el texto se lea, y uno lateral para que el
   texto de la izquierda tenga fondo sin oscurecer la foto entera. */
.portada__velo {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(11,11,13,.92) 0%, rgba(11,11,13,.72) 42%, rgba(11,11,13,.38) 72%, rgba(11,11,13,.55) 100%),
    linear-gradient(to bottom, rgba(11,11,13,.75) 0%, transparent 28%, transparent 62%, rgba(11,11,13,.9) 100%);
}
/* Grano finísimo: le quita a los degradados el aspecto de plástico. */
.portada__grano {
  position: absolute; inset: 0; z-index: 2;
  opacity: .045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
}

.portada__contenido {
  position: relative; z-index: 3;
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(104px, 13vh, 130px) clamp(20px, 5vw, 56px) clamp(96px, 13vh, 120px);
}
.portada__caja { max-width: 780px; }

.portada__marca {
  width: clamp(54px, 5vw, 70px); height: auto;
  margin-bottom: clamp(18px, 2.4vh, 28px);
  /* La pluma baja flotando al cargar. */
  animation: pluma-entra 1.5s var(--curva) both;
}
@keyframes pluma-entra {
  from { opacity: 0; transform: translateY(-26px) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}

.portada__antetitulo {
  margin: 0 0 26px;
  font-size: clamp(.68rem, .3vw + .6rem, .8rem);
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--oro-claro);
}

.portada__titulo {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 6.4vw, 5.6rem);
  line-height: 1.0;
  letter-spacing: -.012em;
  margin: 0 0 32px;
  color: var(--marfil);
  white-space: pre-line;
  text-wrap: balance;
}
/* El titular entra palabra por palabra. Es el único efecto llamativo de la
   página y está justo donde tiene que estar: en lo primero que se ve. */
.portada__titulo .palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.portada__titulo .palabra > span {
  display: inline-block;
  transform: translateY(105%);
  animation: palabra-sube .95s var(--curva) both;
  animation-delay: var(--retardo, 0s);
}
@keyframes palabra-sube { to { transform: none; } }

.portada__texto {
  max-width: 60ch;
  margin: 0 0 40px;
  color: rgba(244, 240, 232, .82);
  font-size: clamp(1.02rem, .6vw + .9rem, 1.22rem);
  line-height: 1.8;
  animation: aparece 1.1s var(--curva) 1.05s both;
}
.portada__botones {
  display: flex; flex-wrap: wrap; gap: 16px;
  animation: aparece 1.1s var(--curva) 1.25s both;
}
@keyframes aparece { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* La banda de credibilidad del pie de la portada: valoración y zonas. */
.portada__pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px clamp(20px, 5vw, 56px) 26px;
  border-top: 1px solid var(--tinta-borde);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marfil-tenue);
  animation: aparece 1.1s var(--curva) 1.5s both;
}
.portada__pie strong { color: var(--oro-claro); font-weight: 400; }

/* Aviso de bajar. La rayita recorre el carril de arriba abajo, sin parar. */
.bajar { display: flex; align-items: center; gap: 12px; }
.bajar__carril {
  position: relative;
  width: 1px; height: 46px;
  background: var(--tinta-borde);
  overflow: hidden;
}
.bajar__carril::after {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 1px; height: 50%;
  background: var(--oro);
  animation: bajar 2.4s var(--curva-suave) infinite;
}
@keyframes bajar {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}

/* ============================================================== revelados ==== */

/*
 * El patrón de aparición de toda la página: el elemento empieza desplazado y
 * transparente, y JavaScript le pone la clase `visto` cuando entra en pantalla.
 *
 * Va con `opacity` y `transform` a propósito, que son las dos propiedades que
 * el navegador sabe animar sin repintar. Con `top` o `height` esto daría
 * tirones en un móvil.
 */
.revelar {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .95s var(--curva), transform .95s var(--curva);
  transition-delay: var(--retardo, 0s);
}
.revelar.visto { opacity: 1; transform: none; }

/* Variantes, para que no aparezca todo igual. */
.revelar--izq  { transform: translateX(-34px); }
.revelar--der  { transform: translateX(34px); }
.revelar--zoom { transform: scale(.94); }
.revelar--izq.visto, .revelar--der.visto, .revelar--zoom.visto { transform: none; }

/* La rayita del antetítulo se dibuja de izquierda a derecha. */
.revelar .antetitulo::before,
.antetitulo.revelar::before { transform: scaleX(0); transition: transform .8s var(--curva) .2s; }
.revelar.visto .antetitulo::before,
.antetitulo.revelar.visto::before { transform: scaleX(1); }

/* ============================================================= manifiesto ==== */

.manifiesto { position: relative; overflow: hidden; }
.manifiesto__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.manifiesto__firma {
  position: relative;
  margin: 36px 0 0;
  padding: 0 0 0 30px;
  border-left: 1px solid var(--acento);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.5vw, 1.6rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--texto);
  white-space: pre-line;
}
.manifiesto__autor {
  display: block;
  margin-top: 16px;
  font-family: var(--sans);
  font-style: normal;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acento);
}

/* La foto (o el marcador) del retrato, con marco de oro desplazado. */
.retrato { position: relative; }
.retrato__marco {
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 1px solid var(--acento);
  opacity: .5;
  pointer-events: none;
}
.retrato img, .retrato__hueco {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--tinta-3);
}
/* Cuando aún no hay foto del equipo: un hueco con la pluma, no un cuadro roto. */
.retrato__hueco {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--borde);
  background:
    radial-gradient(circle at 50% 38%, rgba(201, 164, 92, .13), transparent 62%),
    var(--tinta-3);
}
.retrato__hueco img {
  width: 96px; height: auto;
  aspect-ratio: auto;
  opacity: .9;
  background: none;
}
/* Se dice para qué es el hueco: así no parece una imagen que no ha cargado. */
.retrato__hueco::after {
  content: attr(data-nota);
  position: absolute;
  left: 0; right: 0; bottom: 26px;
  text-align: center;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ================================================================ cifras ==== */

.cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
}
.cifra {
  padding: clamp(26px, 3.4vw, 44px) 22px;
  background: var(--fondo);
  text-align: center;
}
.cifra__valor {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.cifra__nombre {
  display: block;
  margin-top: 12px;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ============================================================== servicios ==== */

.servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1px;
  margin-top: 60px;
  background: var(--borde);
  border: 1px solid var(--borde);
}
.servicio {
  position: relative;
  padding: clamp(30px, 3.2vw, 46px);
  background: var(--fondo);
  transition: background-color .5s var(--curva);
  overflow: hidden;
}
/* Un velo de oro muy tenue al pasar por encima; el icono se levanta un poco. */
.servicio::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(201, 164, 92, .10), transparent 62%);
  opacity: 0;
  transition: opacity .5s var(--curva);
}
.servicio:hover::before { opacity: 1; }
.servicio > * { position: relative; }

.servicio__icono {
  width: 46px; height: 46px;
  margin-bottom: 24px;
  color: var(--acento);
  transition: transform .55s var(--curva);
}
.servicio:hover .servicio__icono { transform: translateY(-5px); }
.servicio__icono svg { width: 100%; height: 100%; }

.servicio__nombre {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.6vw, 1.6rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--texto);
  white-space: normal;
}
.servicio__texto { margin: 0; color: var(--texto-tenue); font-size: .98rem; line-height: 1.72; }
.servicio__desde {
  display: inline-block;
  margin-top: 20px;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acento);
}
/* Marca discreta en los servicios principales. */
.servicio__destacado {
  position: absolute;
  top: 0; right: 0;
  padding: 7px 14px;
  background: var(--acento);
  color: var(--fondo);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ================================================================ proceso ==== */

.proceso { position: relative; }
.proceso__lista {
  position: relative;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
}
/* El carril vertical y, encima, la línea de oro que se RELLENA al bajar.
   Es el efecto que más gusta de la página y cuesta cuatro líneas de CSS más
   una de JavaScript (ver public/js/inicio.js). */
.proceso__lista::before {
  content: '';
  position: absolute;
  left: 23px; top: 10px; bottom: 10px;
  width: 1px;
  background: var(--borde);
}
.proceso__lista::after {
  content: '';
  position: absolute;
  left: 23px; top: 10px;
  width: 1px;
  height: calc(var(--avance, 0) * 100%);
  max-height: calc(100% - 20px);
  background: linear-gradient(to bottom, var(--acento), var(--oro-claro));
  transition: height .25s linear;
}

.paso {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: clamp(20px, 3vw, 44px);
  padding-bottom: clamp(38px, 5vh, 62px);
}
.paso:last-child { padding-bottom: 0; }

.paso__numero {
  position: relative;
  z-index: 1;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--acento);
  border-radius: 50%;
  background: var(--fondo);
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--acento);
  transition: background-color .5s var(--curva), color .5s var(--curva);
}
.paso.visto .paso__numero { background: var(--acento); color: var(--fondo); }

.paso__titulo {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 400;
  margin: 6px 0 12px;
  color: var(--texto);
  white-space: normal;
}
.paso__texto { margin: 0; max-width: var(--ancho-texto); color: var(--texto-tenue); }

/* ================================================================ galería ==== */

.galeria {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 12vw;
  gap: clamp(8px, 1vw, 16px);
  margin-top: 56px;
  /* `dense` rellena los huecos que deja mezclar fotos de dos, cuatro y seis
     columnas. Sin esto el mosaico queda con calvas: la rejilla no retrocede a
     tapar un hueco que ya ha pasado, salvo que se le pida. */
  grid-auto-flow: row dense;
}
/* Los tres formatos ocupan huecos distintos del mosaico. Que las fotos no sean
   todas del mismo tamaño es lo que hace que un mosaico se vea bien. */
.foto--alto     { grid-column: span 2; grid-row: span 3; }
.foto--ancho    { grid-column: span 4; grid-row: span 2; }
.foto--cuadrado { grid-column: span 2; grid-row: span 2; }

.foto {
  position: relative;
  overflow: hidden;
  background: var(--tinta-3);
  border: 0; padding: 0;
  cursor: zoom-in;
  display: block;
  width: 100%;
}
.foto img, .foto video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--curva), filter .6s var(--curva);
}
.foto:hover img, .foto:hover video,
.foto:focus-visible img, .foto:focus-visible video { transform: scale(1.07); }

/* El pie sube desde abajo al pasar por encima. */
.foto__pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 20px 18px;
  background: linear-gradient(to top, rgba(11,11,13,.92), transparent);
  color: var(--marfil);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  transform: translateY(101%);
  transition: transform .55s var(--curva);
}
.foto:hover .foto__pie, .foto:focus-visible .foto__pie { transform: none; }
/* En pantallas sin ratón el pie se queda puesto: si no, nadie lo vería nunca. */
@media (hover: none) {
  .foto__pie { transform: none; padding-top: 30px; }
}

/* Marca de "esto es un vídeo". */
.foto__video {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid rgba(244,240,232,.55);
  border-radius: 50%;
  background: rgba(11,11,13,.45);
  backdrop-filter: blur(4px);
}
.foto__video svg { width: 13px; height: 13px; fill: var(--marfil); }

.galeria__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}
.filtro {
  padding: 10px 20px;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--texto-tenue);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .4s var(--curva);
}
.filtro:hover { color: var(--texto); border-color: var(--acento); }
.filtro[aria-pressed='true'] { background: var(--acento); border-color: var(--acento); color: var(--fondo); }

/* --- visor de fotos a pantalla completa --- */

.visor {
  position: fixed; inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(7, 7, 8, .96);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--curva);
}
.visor.abierto { opacity: 1; pointer-events: auto; }
.visor img, .visor video {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  object-fit: contain;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
}
.visor__pie {
  margin-top: 22px;
  text-align: center;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--marfil-tenue);
}
.visor__cerrar, .visor__flecha {
  position: absolute;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--tinta-borde);
  background: rgba(11, 11, 13, .6);
  color: var(--marfil);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: all .35s var(--curva);
}
.visor__cerrar { top: clamp(14px, 3vw, 32px); right: clamp(14px, 3vw, 32px); }
.visor__flecha--izq { left: clamp(10px, 2.4vw, 30px); top: 50%; transform: translateY(-50%); }
.visor__flecha--der { right: clamp(10px, 2.4vw, 30px); top: 50%; transform: translateY(-50%); }
.visor__cerrar:hover, .visor__flecha:hover { background: var(--oro); color: var(--tinta); border-color: var(--oro); }

/* ============================================================== opiniones ==== */

.nota-media {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 26px;
  border: 1px solid var(--borde);
  margin-bottom: 40px;
}
.nota-media__numero {
  font-family: var(--serif);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--acento);
}
.nota-media__texto {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  line-height: 1.5;
}
.estrellas { display: inline-flex; gap: 3px; color: var(--acento); }
.estrellas svg { width: 15px; height: 15px; fill: currentColor; }

/* Las opiniones van en un carril con desplazamiento por tarjetas: en móvil se
   pasan con el dedo y en escritorio con las flechas. Una rejilla de seis citas
   largas no la lee nadie; de una en una, sí. */
.carril {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  margin-top: 20px;
  padding: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carril::-webkit-scrollbar { display: none; }

.opinion {
  flex: 0 0 min(520px, 84vw);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--borde);
  background: var(--fondo);
}
.opinion__comillas {
  font-family: var(--serif);
  font-size: 4rem;
  line-height: .7;
  color: var(--acento);
  opacity: .45;
  margin-bottom: 10px;
}
.opinion__texto {
  flex: 1;
  margin: 0 0 26px;
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.15vw, 1.32rem);
  line-height: 1.62;
  color: var(--texto);
}
.opinion__pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.opinion__autor {
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acento);
}
.opinion__evento {
  display: block;
  margin-top: 6px;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--texto-suave);
}

.carril__mandos { display: flex; gap: 10px; margin-top: 26px; }
.carril__boton {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--texto);
  cursor: pointer;
  border-radius: 50%;
  transition: all .35s var(--curva);
}
.carril__boton:hover { background: var(--acento); color: var(--fondo); border-color: var(--acento); }
.carril__boton svg { width: 16px; height: 16px; }

/* ==================================================================== faq ==== */

.faq { margin-top: 50px; border-top: 1px solid var(--borde); }
.faq__item { border-bottom: 1px solid var(--borde); }
.faq__boton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  border: 0; background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.4vw, 1.42rem);
  font-weight: 400;
  color: var(--texto);
  transition: color .3s var(--curva);
}
.faq__boton:hover { color: var(--acento); }
/* El más que se convierte en menos: dos rayas y un giro. */
.faq__mas {
  position: relative;
  flex: none;
  width: 20px; height: 20px;
}
.faq__mas::before, .faq__mas::after {
  content: '';
  position: absolute; top: 50%; left: 0;
  width: 20px; height: 1px;
  background: var(--acento);
  transition: transform .45s var(--curva);
}
.faq__mas::after { transform: rotate(90deg); }
.faq__boton[aria-expanded='true'] .faq__mas::after { transform: rotate(0); }

/* Se anima `grid-template-rows` de 0fr a 1fr: es la única forma de animar
   "hasta la altura que haga falta" sin medirla con JavaScript. */
.faq__respuesta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--curva);
}
.faq__item.abierto .faq__respuesta { grid-template-rows: 1fr; }
.faq__respuesta > div { overflow: hidden; }
.faq__respuesta p {
  max-width: var(--ancho-texto);
  margin: 0 0 26px;
  color: var(--texto-tenue);
}

/* ==================================================================== cta ==== */

.cta { position: relative; overflow: hidden; text-align: center; }
/* Halo de oro detrás del texto, muy difuso. */
.cta::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: min(900px, 120vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201,164,92,.14), transparent 62%);
  pointer-events: none;
}
.cta__contenido { position: relative; }
.cta .titular-seccion { font-size: clamp(2.3rem, 5.4vw, 4.6rem); }
.cta__botones { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 40px; }

/* ================================================================== pie ==== */

.pie {
  padding: clamp(56px, 7vh, 90px) 0 34px;
  background: var(--tinta-2);
  border-top: 1px solid var(--tinta-borde);
  color: var(--marfil-tenue);
  font-size: .92rem;
}
.pie__rejilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: 44px;
}
.pie h3 {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 20px;
  white-space: normal;
}
.pie__logo { width: 190px; height: auto; margin-bottom: 22px; }
.pie__lema { max-width: 42ch; margin: 0; line-height: 1.8; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 12px; }
.pie a { color: var(--marfil-tenue); text-decoration: none; transition: color .3s var(--curva); }
.pie a:hover, .pie a:focus-visible { color: var(--oro-claro); }
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 26px;
  border-top: 1px solid var(--tinta-borde);
  font-size: .78rem;
  color: var(--marfil-suave);
}
.pie__legal nav { display: flex; flex-wrap: wrap; gap: 22px; }

/* Botón flotante de WhatsApp: es por donde escribe la mitad de la gente. */
.whatsapp {
  position: fixed;
  right: clamp(16px, 2.5vw, 30px);
  bottom: clamp(16px, 2.5vw, 30px);
  z-index: 90;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--oro);
  color: var(--tinta);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  transition: transform .4s var(--curva), background-color .4s var(--curva);
}
.whatsapp:hover { transform: translateY(-4px) scale(1.05); background: var(--oro-claro); }
.whatsapp svg { width: 27px; height: 27px; fill: currentColor; }

/* ============================================================== respuestas ==== */

@media (max-width: 1080px) {
  .manifiesto__rejilla { grid-template-columns: 1fr; gap: 44px; }
  .retrato { max-width: 460px; }
  .retrato__marco { inset: 16px -16px -16px 16px; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .galeria { grid-auto-rows: 17vw; }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 74px; }

  /* El menú pasa a ser un panel que baja desde arriba. */
  .hamburguesa { display: block; }
  .menu {
    position: fixed;
    top: 0; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 90px 24px 34px;
    background: rgba(11, 11, 13, .97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--tinta-borde);
    transform: translateY(-101%);
    transition: transform .5s var(--curva);
    max-height: 100svh;
    overflow-y: auto;
  }
  .menu.abierto { transform: none; }
  .menu a {
    padding: 17px 0;
    border-bottom: 1px solid var(--tinta-borde);
    font-size: .95rem;
    letter-spacing: .12em;
  }
  .menu a::after { display: none; }

  .cabecera__acciones { gap: 10px; }
  .cabecera__logo img { height: 48px; }
  .cabecera.encogida .cabecera__logo img { height: 40px; }

  /* El mosaico se convierte en dos columnas: seis columnas en un móvil dejarían
     fotos de estampilla. */
  .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 40vw; }
  .foto--alto     { grid-column: span 1; grid-row: span 2; }
  .foto--ancho    { grid-column: span 2; grid-row: span 1; }
  .foto--cuadrado { grid-column: span 1; grid-row: span 1; }

  .cifras { grid-template-columns: repeat(2, 1fr); }
  .portada__pie { flex-direction: column; align-items: flex-start; gap: 12px; font-size: .68rem; }
  .bajar { display: none; }
  .pie__rejilla { grid-template-columns: 1fr; gap: 36px; }
  .paso { grid-template-columns: 40px 1fr; }
  .paso__numero { width: 40px; height: 40px; font-size: 1rem; }
  .proceso__lista::before, .proceso__lista::after { left: 19px; }
}

@media (max-width: 480px) {
  .boton { width: 100%; padding: 16px 24px; }
  .portada__botones { flex-direction: column; }
  .cifras { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: 1fr; grid-auto-rows: 68vw; }
  .foto--alto, .foto--ancho, .foto--cuadrado { grid-column: span 1; grid-row: span 1; }
}

/* ------------------------------------------------------- menos movimiento ---- */

/*
 * Hay gente a la que el movimiento en pantalla le produce mareo de verdad. Con
 * esta preferencia puesta en el sistema, la web se queda quieta: todo aparece
 * ya en su sitio, sin animación ninguna. No se pierde nada del contenido.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .revelar { opacity: 1; transform: none; }
  .portada__foto.visible img, .portada__foto.visible video { transform: scale(1.06); }
  .portada__titulo .palabra > span { transform: none; }
  .foto__pie { transform: none; }
  .proceso__lista::after { height: calc(100% - 20px); }
}

/* -------------------------------------------------------------- impresión ---- */

@media print {
  .cabecera, .whatsapp, .visor, .portada__pie, .galeria__filtros, .carril__mandos { display: none; }
  body { background: #fff; color: #000; }
  .seccion, .portada { background: #fff; color: #000; padding: 20px 0; min-height: 0; }
  .portada__velo, .portada__grano, .portada__fondo { display: none; }
  .revelar { opacity: 1; transform: none; }
}

/* ===========================================================================
   Piezas de las páginas sueltas (formulario, gracias, legales, 404) y remates
   que faltaban de la cabecera.
   =========================================================================== */

/* El enlace de «Presupuesto» del menú va marcado: es la acción que queremos
   que la gente haga, y en un menú de siete enlaces iguales se pierde. */
.menu__destacado {
  padding: 9px 20px !important;
  border: 1px solid var(--oro);
  color: var(--oro-claro) !important;
}
.menu__destacado::after { display: none; }
.menu__destacado:hover, .menu__destacado:focus-visible {
  background: var(--oro);
  color: var(--tinta) !important;
}

/* El selector de idioma son dos ENLACES, no dos botones: así cada idioma tiene
   su dirección, se puede compartir y el buscador la entiende. */
.idiomas a {
  padding: 7px 12px;
  color: var(--marfil-tenue);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s var(--curva), color .3s var(--curva);
}
.idiomas a:hover { color: var(--marfil); }
.idiomas a.activo { background: var(--oro); color: var(--tinta); }

/* --- páginas cortas (gracias, legales, 404) --- */

/* Llevan la cabecera fija encima y no tienen portada que la tape: hace falta
   dejarle hueco a mano. */
.cuerpo-formulario { padding-top: 104px; }
.pagina-corta { padding-top: clamp(40px, 6vh, 80px); min-height: 62vh; }

/* El sello de «recibido»: un círculo de oro con la marca de comprobado. */
.sello {
  width: 84px; height: 84px;
  margin: 0 auto 32px;
  display: grid; place-items: center;
  border: 1px solid var(--oro);
  border-radius: 50%;
  color: var(--oro);
  animation: sello-entra .9s var(--curva) both;
}
.sello svg { width: 34px; height: 34px; }
@keyframes sello-entra {
  0%   { opacity: 0; transform: scale(.6); }
  60%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* La opinión que se enseña en la página de gracias: mientras esperan
   respuesta, la última cosa que leen es alguien contento. */
.gracias-opinion {
  max-width: 60ch;
  margin: clamp(48px, 7vh, 84px) auto 0;
  padding-top: 36px;
  border-top: 1px solid var(--borde);
  color: var(--texto-tenue);
}
.gracias-opinion blockquote {
  margin: 18px 0 14px;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.3vw, 1.4rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--texto);
}
.gracias-opinion cite {
  font-style: normal;
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acento);
}

/* --- textos legales --- */

.texto-legal { max-width: 72ch; }
.texto-legal h2 { margin-top: 2.4em; }
.texto-legal p { color: var(--texto-tenue); margin: 0 0 1.2em; }
/* Los huecos por rellenar se ven a la primera, para que no se publique un
   aviso legal a medias. */
.texto-legal em {
  font-style: normal;
  padding: 1px 8px;
  border: 1px dashed var(--acento);
  color: var(--acento);
  font-size: .88em;
}