/* =================================================================
   BODA FATNA & MIGUEL · Hoja de estilos
   -----------------------------------------------------------------
   Escrita pensando primero en el móvil: lo que hay fuera de las
   @media es la versión de teléfono. Las @media (min-width: ...)
   solo añaden lo que hace falta en pantallas más grandes.

   Índice
     1. Variables
     2. Base y accesibilidad
     3. Piezas reutilizables (botones, filetes, ramitas, corona)
     4. Barra superior y menú
     5. Portada
     6. La celebración (datos + cuenta atrás)
     7. Itinerario
     8. Dónde será
     9. Sección parallax (foto con capa oscura)
    10. Actividades
    11. Mesa de regalos
    12. Confirmar asistencia
    13. Cierre, pie y banda verde
    14. Barra inferior, botón de música y mensajes
    15. Animaciones al hacer scroll
   ================================================================= */


/* ============ 1. VARIABLES ============ */
:root{
  /* Paleta tomada de la imagen de referencia de la novia:
     marfil de fondo, dorado suave y verde hoja apagado */
  --marfil:#FAF7F0;
  --crema:#F2EDE1;
  --dorado:#A8894B;
  --dorado-suave:#C9B98C;
  --verde:#77815F;          /* banda del pie y acentos */
  --verde-hoja:#6C7B52;     /* hojas de las coronas y ramitas */
  --verde-oscuro:#4C573D;
  --tinta:#57503F;
  --texto-2:#6E6A5E;
  --linea:rgba(168,137,75,.3);

  /* Capa oscura de las secciones con foto de fondo */
  --velo:rgba(20,22,16,.45);

  /* Tipografías (las ya elegidas: no cambiar) */
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --script:'Parisienne', 'Cormorant Garamond', cursive;
  --arabe:'Amiri', 'Geeza Pro', 'Traditional Arabic', serif;

  /* Medidas */
  --ancho:900px;
  --margen:20px;                /* margen lateral en móvil */
  --alto-barra:56px;
  --alto-barra-inferior:0px;    /* lo cambia el JS cuando la barra aparece */
  --seguro-abajo:env(safe-area-inset-bottom, 0px);

  /* Toque mínimo cómodo con el dedo */
  --toque:44px;
}


/* ============ 2. BASE Y ACCESIBILIDAD ============ */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Que los anclajes no queden tapados por la barra superior fija */
  scroll-padding-top:calc(var(--alto-barra) + 12px);
}

body{
  margin:0;
  background:var(--marfil);
  background-image:
    radial-gradient(circle at 10% 4%, rgba(201,185,140,.16), transparent 46%),
    radial-gradient(circle at 90% 96%, rgba(201,185,140,.14), transparent 48%);
  color:var(--tinta);
  font-family:var(--sans);
  font-weight:300;
  font-size:16.5px;
  line-height:1.72;
  overflow-x:hidden;
  overflow-wrap:break-word;
  /* Deja hueco para la barra de acciones inferior del móvil */
  padding-bottom:calc(var(--alto-barra-inferior) + var(--seguro-abajo));
  -webkit-tap-highlight-color:rgba(168,137,75,.14);
}

/* El fondo fijo se desactiva en móvil: en iOS provoca tirones al hacer scroll */
@media (min-width:900px) and (hover:hover){
  body{background-attachment:fixed}
}

img,svg,iframe{max-width:100%}
svg.defs{position:absolute;width:0;height:0}

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.22}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--dorado)}
b,strong{font-weight:500}
em{font-style:italic}

::selection{background:var(--dorado-suave);color:#fff}

:focus-visible{outline:2px solid var(--dorado);outline-offset:3px;border-radius:2px}

/* Enlace para saltar el menú con teclado.
   Se esconde recortándolo a 1px, NO sacándolo con un left negativo:
   con la página en árabe (de derecha a izquierda) ese lado es el
   contrario y el enlace generaba 9999px de scroll lateral vacío. */
.saltar{
  position:absolute;inset-inline-start:0;top:0;
  width:1px;height:1px;
  padding:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.saltar:focus{
  position:fixed;inset-inline-start:8px;top:8px;z-index:200;
  width:auto;height:auto;margin:0;padding:12px 18px;
  clip-path:none;overflow:visible;
  background:var(--dorado);color:#fff;
  font-size:13px;letter-spacing:.1em;text-decoration:none;
}

/* Estructura de secciones */
section{padding:64px var(--margen);position:relative}
.contenedor{max-width:var(--ancho);margin-inline:auto}
.estrecho{max-width:640px}
.centro{text-align:center}
.crema{background:var(--crema)}


/* ============ 3. PIEZAS REUTILIZABLES ============ */

/* --- Títulos --- */
.antetitulo{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--dorado);font-weight:500;margin:0 0 12px;
}
.titulo{
  font-family:var(--serif);
  font-size:1.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dorado);margin:0 0 10px;
  text-wrap:balance;
}
.entradilla{color:var(--texto-2);font-size:15px}
.texto{font-size:16.5px;color:var(--texto-2);line-height:1.85}
.texto strong{color:var(--tinta)}

/* --- Filete separador --- */
.filete{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:24px auto;max-width:260px;color:var(--dorado-suave);
}
.filete span{flex:1;height:1px;background:linear-gradient(to right,transparent,var(--dorado-suave),transparent)}
.filete svg{width:12px;height:12px;flex:none;color:var(--dorado)}

/* --- Ramitas y flores --- */
.ramita{width:92px;height:auto;color:var(--verde-hoja)}
.ramita use{fill:none;stroke:currentColor;stroke-width:1.4;vector-effect:non-scaling-stroke}
.ramitas{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:6px}
.espejo{transform:scaleX(-1)}

.floral-hojas use{fill:var(--verde-hoja);opacity:.85}
.floral-puntos circle{fill:var(--dorado);opacity:.8}

/* --- Corona dorada (imagen de referencia) --- */
.corona-aro-1{stroke:var(--dorado);stroke-width:1.4;opacity:.85}
.corona-aro-2{stroke:var(--dorado-suave);stroke-width:.9;opacity:.8}
.corona-hojas use{fill:var(--verde-hoja)}
.corona-puntos circle{fill:var(--dorado)}

.corona-monograma{position:relative;width:150px;margin:0 auto 18px}
.corona-monograma svg{display:block;width:100%;height:auto}
.corona-letras{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--script);font-size:1.6rem;letter-spacing:0;
  color:var(--dorado);
}
.corona-letras i{font-style:normal;font-size:.6em;margin:0 1px;color:var(--dorado-suave)}

/* --- Etiqueta "Por confirmar" --- */
.etiqueta{
  display:inline-block;margin-inline-start:8px;vertical-align:middle;
  font-family:var(--sans);font-style:normal;font-size:9.5px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dorado);
  border:1px solid var(--dorado-suave);border-radius:999px;
  padding:3px 9px;line-height:1.5;white-space:nowrap;
}

/* --- Botones --- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--toque);
  font-family:var(--sans);font-weight:500;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  padding:14px 26px;
  color:var(--dorado);background:transparent;
  border:1px solid var(--dorado);border-radius:2px;
  cursor:pointer;user-select:none;
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .12s ease;
}
.boton svg{width:16px;height:16px;flex:none}
.boton.solido{background:var(--dorado);color:#fff}
.boton.fino{font-size:11px;padding:12px 18px;letter-spacing:.14em}
.boton.grande{padding:17px 34px;font-size:12.5px;width:100%}

/* En el móvil no hay :hover, así que la respuesta al toque es lo que importa */
.boton:active{transform:scale(.97)}
@media (hover:hover){
  .boton:hover{background:var(--dorado);color:#fff}
  .boton.solido:hover{background:#8f7239;border-color:#8f7239}
}

.acciones-secundarias{
  display:flex;flex-direction:column;gap:12px;align-items:stretch;margin-top:28px;
}
@media (min-width:520px){
  .acciones-secundarias{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:14px}
  .acciones-secundarias .boton{flex:0 1 auto}
}


/* ============ 4. BARRA SUPERIOR Y MENÚ ============ */
.barra{
  position:fixed;top:0;left:0;right:0;z-index:80;
  height:var(--alto-barra);
  display:flex;align-items:center;gap:10px;
  padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right));
  background:rgba(250,247,240,0);
  border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.barra.fija{
  background:rgba(250,247,240,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--linea);
  box-shadow:0 6px 20px -18px rgba(87,80,63,.6);
}

.monograma{
  font-family:var(--serif);font-size:20px;letter-spacing:.06em;
  color:var(--tinta);text-decoration:none;flex:none;
  display:flex;align-items:center;height:var(--toque);
}
.monograma span{color:var(--dorado);margin-inline:2px;font-size:.8em}

.barra-nav{display:none}          /* en móvil se usa el menú a pantalla completa */
.barra-acciones{margin-inline-start:auto;display:flex;align-items:center;gap:8px}

/* Selector de idioma ES / العربية */
.idioma{
  display:flex;flex:none;
  border:1px solid rgba(168,137,75,.45);border-radius:999px;
  background:rgba(255,255,255,.55);overflow:hidden;
}
.idioma button{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;
  min-height:36px;padding:0 12px;
  border:0;background:transparent;color:var(--texto-2);
  cursor:pointer;line-height:1;
  transition:background .3s ease,color .3s ease;
}
.idioma button[aria-pressed="true"]{background:var(--dorado);color:#fff}
.idioma button:last-child{font-family:var(--arabe);font-size:14px;letter-spacing:0}

/* Botón hamburguesa */
.hamburguesa{
  width:var(--toque);height:var(--toque);flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:0;background:transparent;cursor:pointer;padding:0;
}
.hamburguesa span{
  display:block;width:20px;height:1.5px;background:var(--tinta);border-radius:2px;
  transition:transform .3s ease,opacity .25s ease;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Menú a pantalla completa */
.menu{
  position:fixed;inset:0;z-index:70;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--marfil);
  padding:calc(var(--alto-barra) + 20px) var(--margen) 40px;
  opacity:0;transition:opacity .3s ease;
}
.menu.abierto{opacity:1}
.menu[hidden]{display:none}

.menu-nav{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;max-width:340px}
.menu-nav a{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:56px;
  font-family:var(--serif);font-size:1.5rem;color:var(--tinta);
  text-decoration:none;border-bottom:1px solid rgba(168,137,75,.18);
}
.menu-nav a:last-child{border-bottom:0;color:var(--dorado)}
.menu-nav a:active{background:rgba(201,185,140,.14)}
.menu-adorno{margin-top:28px;opacity:.8}

@media (min-width:900px){
  .hamburguesa,.menu{display:none}
  .barra-nav{
    display:flex;gap:2px;flex:1;justify-content:center;
    min-width:0;overflow:hidden;
  }
  .barra-nav a{
    font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
    color:var(--texto-2);text-decoration:none;
    padding:9px 11px;border-radius:999px;white-space:nowrap;
    transition:color .3s ease,background .3s ease;
  }
  .barra-nav a:hover{color:var(--dorado);background:rgba(201,185,140,.16)}
}


/* ============ 5. PORTADA ============ */
.portada{
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:calc(var(--alto-barra) + 24px) var(--margen) 40px;
  background-size:cover;background-position:center;
  overflow:hidden;
}

/* Cuando el JS confirma que la foto existe, la pone de fondo y la
   tarjeta marfil flota encima (así el texto se lee siempre bien) */
.portada.con-foto{
  background-image:var(--foto-portada);
  /* En pantallas anchas la foto desborda a lo alto: subimos el encuadre
     para que arriba se vean los novios y no la puerta */
  background-position:center 32%;
}

/* Velo oscuro: apenas nada donde se ve a los novios, algo más abajo,
   que es donde apoya la tarjeta y hace falta contraste */
.portada.con-foto::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(20,22,16,.10) 0%,
    rgba(20,22,16,.12) 45%,
    rgba(20,22,16,.30) 100%);
}
.portada.con-foto .floral{display:none}

.portada.con-foto .portada-marco{background:rgba(250,247,240,.9)}

/* ---- Portada con foto, SOLO en móvil -------------------------------
   En el teléfono la pantalla es alta y estrecha: si la tarjeta se queda
   centrada, cae justo encima de las caras. Aquí la bajamos, la
   apretamos y escondemos la flecha, para dejar arriba una ventana
   limpia a la foto. En ordenador no hace falta nada de esto: la
   maquetación centrada de siempre se queda como estaba. */
@media (max-width:899px){
  .portada.con-foto{justify-content:flex-end}
  .portada.con-foto .portada-marco{padding:24px 18px 22px}
  .portada.con-foto .corona-monograma{width:122px}
  .portada.con-foto .portada-nombres{margin:4px 0 8px}
  .portada.con-foto .portada-fecha{margin-bottom:16px}
  .portada.con-foto .portada-texto{font-size:14.8px;line-height:1.6;margin-bottom:18px}
  .portada.con-foto .corazoncito{margin-top:12px}
  .portada.con-foto .bajar{display:none}

  /* En móviles altos (casi todos los actuales) la tarjeta recupera el
     aire de siempre y, al crecer, sube: los nombres quedan más arriba y
     la foto se sigue viendo entera por encima. En pantallas cortas se
     queda compacta, que si no tapa a los novios. */
  @media (min-height:860px){
    /* Hueco extra abajo: como la tarjeta va anclada al pie, esto la
       sube entera y deja los nombres más arriba, sin comerse la foto */
    .portada.con-foto{padding-bottom:70px}
    .portada.con-foto .portada-marco{padding:34px 20px 30px}
    .portada.con-foto .corona-monograma{width:140px}
    .portada.con-foto .portada-nombres{margin:6px 0 10px}
    .portada.con-foto .portada-fecha{margin-bottom:20px}
    .portada.con-foto .portada-texto{font-size:15.2px;line-height:1.7;margin-bottom:24px}
    .portada.con-foto .corazoncito{margin-top:18px}
  }
}

/* Pantalla más estrecha que la propia foto (todos los móviles en
   vertical): ahí la foto entra entera a lo alto y no hay nada que
   reencuadrar, así que la acercamos un poco y la anclamos abajo.
   Eso sube a los novios hasta la ventana que queda sobre la tarjeta.
   El límite 9/16 es justo la proporción de la foto, de modo que el
   ancho siempre sigue cubriendo y nunca aparecen franjas vacías. */
@media (max-aspect-ratio: 9/16){
  .portada.con-foto{
    background-size:auto 120%;
    background-position:center bottom;
  }
}

/* Flores de las esquinas (solo mientras no hay foto de fondo) */
.floral{position:absolute;width:150px;height:auto;color:var(--verde-hoja);pointer-events:none}
.esquina-a{top:calc(var(--alto-barra) + 4px);left:-22px}
.esquina-b{bottom:-6px;right:-22px;transform:rotate(180deg)}

.portada-marco{
  position:relative;width:100%;max-width:600px;padding:34px 18px 30px;
  background:rgba(250,247,240,.92);
  border:1px solid var(--linea);
}
.portada-marco::before{
  content:'';position:absolute;inset:7px;
  border:1px solid rgba(168,137,75,.35);pointer-events:none;
}

/* Los nombres van en la manuscrita, la misma del cierre y del pie.
   Ojo: con esta letra no se usan ni versalitas ni espaciado entre
   caracteres (rompen los enlaces entre trazos), y hay que subir el
   cuerpo porque una manuscrita "mide" menos que una romana. */
.portada-nombres{
  font-family:var(--script);font-weight:400;
  /* Cuerpo fluido: "Fatna & Miguel" tiene que caber siempre en una
     línea. Partido por la mitad una manuscrita queda fatal, y en
     móviles de 360-390px se partía. */
  font-size:clamp(2rem, 10vw, 3rem);
  letter-spacing:0;text-transform:none;
  color:var(--dorado);line-height:1.15;margin:10px 0 14px;
}
.portada-nombres .amp{color:var(--dorado-suave)}

.portada-fecha{
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--tinta);margin:0 0 22px;
}

.portada-texto{font-size:15.5px;margin-bottom:26px}
.portada-texto p{margin-bottom:.9em}

.corazoncito{
  display:block;width:15px;height:15px;margin:20px auto 0;
  color:var(--dorado);opacity:.85;
}

.bajar{margin-top:28px;display:flex;justify-content:center;position:relative;z-index:1}
.bajar span{
  display:block;width:1px;height:34px;
  background:linear-gradient(to bottom,var(--dorado-suave),transparent);
  animation:respirar 2.8s ease-in-out infinite;
}
.portada.con-foto .bajar span{
  background:linear-gradient(to bottom,rgba(255,255,255,.85),transparent);
}
@keyframes respirar{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

@media (min-width:600px){
  .portada-marco{padding:46px 40px 40px}
  .corona-monograma{width:168px}
  .corona-letras{font-size:1.9rem}
  .portada-nombres{font-size:4rem}
  .portada-fecha{font-size:13.5px}
  .portada-texto{font-size:16.5px}
  .floral{width:210px}
  .ramita{width:110px}
}
@media (min-width:900px){
  .portada-nombres{font-size:4.4rem}
  .floral{width:250px}
}


/* ============ 6. LA CELEBRACIÓN ============ */
.celebracion-grid{display:grid;gap:40px;margin-top:34px;align-items:center}

.celebracion-datos{display:flex;flex-direction:column;align-items:center;gap:4px}
.dato-linea{
  display:flex;align-items:center;gap:11px;margin:0 0 10px;
  font-family:var(--serif);font-size:1.3rem;color:var(--tinta);
}
.dato-linea svg{width:20px;height:20px;color:var(--dorado);flex:none}

.celebracion-reloj .antetitulo{margin-bottom:16px}

/* Cuenta atrás en rejilla 2×2 con el corazón en el centro (como en el
   diseño que validó la pareja) */
.reloj{
  position:relative;
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  max-width:420px;margin-inline:auto;
}
.reloj-caja{
  padding:16px 6px 13px;
  background:var(--marfil);border:1px solid var(--linea);
}
.crema .reloj-caja{background:rgba(255,255,255,.55)}
.reloj-caja b{
  display:block;font-family:var(--serif);font-weight:300;
  font-size:2.3rem;line-height:1;color:var(--dorado);
  /* Cormorant dibuja por defecto cifras antiguas: el 1 sale bajito y se
     confunde con una I (441 parecía "44I"). Pedimos cifras modernas. */
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:'lnum' 1,'tnum' 1;
}
.reloj-caja span{
  display:block;margin-top:7px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--texto-2);
}
.reloj-corazon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;color:var(--dorado);
  background:var(--crema);border-radius:50%;padding:5px;
}
.reloj-aviso{margin-top:24px;font-family:var(--serif);font-size:1.3rem;color:var(--tinta)}

@media (min-width:760px){
  .celebracion-grid{grid-template-columns:1fr 1fr;gap:30px}
  .celebracion-datos{align-items:flex-start;text-align:start}
  .celebracion-datos .acciones-secundarias{justify-content:flex-start}
  .reloj-caja b{font-size:2.8rem}
}


/* ============ 7. ITINERARIO ============ */
.linea-tiempo{
  position:relative;margin-top:36px;text-align:start;
  padding-inline-start:26px;
}
/* inset-inline-start, no left: con la página en árabe la línea y los
   puntos tienen que saltar al otro lado */
.linea-tiempo::before{
  content:'';position:absolute;top:8px;bottom:8px;inset-inline-start:5px;width:1px;
  background:linear-gradient(to bottom,transparent,var(--dorado-suave) 7%,var(--dorado-suave) 93%,transparent);
}
.linea-tiempo li{position:relative;padding-bottom:30px}
.linea-tiempo li:last-child{padding-bottom:0}
.linea-tiempo li::before{
  content:'';position:absolute;inset-inline-start:-25.5px;top:7px;
  width:9px;height:9px;border-radius:50%;
  background:var(--marfil);border:1.5px solid var(--dorado);
}
.crema .linea-tiempo li::before{background:var(--crema)}

/* La hora, cuando la hay. Solo la llevan los momentos ya cerrados;
   los demás empiezan directamente por el título y la línea dorada se
   encarga de mantener el orden. */
.lt-hora{
  font-family:var(--sans);font-size:11.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--dorado);margin:0 0 5px;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:'lnum' 1,'tnum' 1;
}
.lt-cuerpo h3{font-size:1.22rem;color:var(--tinta);margin:0 0 3px}
.lt-cuerpo p{color:var(--texto-2);font-size:14.5px;margin:0}

/* El programa va en una sola columna, con la hora encima del título
   del momento que la tenga */
@media (min-width:760px){
  .linea-tiempo{max-width:600px;margin-inline:auto}
  .linea-tiempo li{padding-bottom:36px}
  .lt-hora{font-size:12px}
  .lt-cuerpo h3{font-size:1.32rem}
  .lt-cuerpo p{font-size:15px}
}

/* El aviso de "programa provisional" es una nota al pie del
   itinerario, así que va más estrecho que el de actividades */
#itinerario .aviso{max-width:520px;margin-inline:auto}


/* ============ 8. DÓNDE SERÁ ============ */
.lugar{margin-top:20px}
.lugar-nombre{font-family:var(--serif);font-size:1.5rem;color:var(--tinta);margin:0 0 4px}
.lugar-club{color:var(--dorado);font-size:13px;letter-spacing:.08em;margin:0 0 10px}

/* Aviso de "sigue hacia dentro": el mapa solo enseña el club hípico */
.lugar-aviso{
  max-width:520px;margin:22px auto 0;padding:16px 18px;
  border:1px dashed var(--dorado-suave);background:rgba(198,180,138,.1);
  color:var(--texto-2);font-size:14px;line-height:1.65;
}
.lugar-aviso strong{color:var(--dorado)}
/* El paréntesis del club, en la ficha de "La celebración" */
.dato-linea small{display:block;font-size:12.5px;color:var(--texto-2);margin-top:2px}
.lugar-dir{color:var(--texto-2);font-size:14.5px;margin:0 0 12px}
.lugar-desc{color:var(--texto-2);font-size:15px;margin:0}

.mapa{
  position:relative;margin-top:26px;
  padding:6px;background:var(--marfil);border:1px solid var(--linea);
}
.crema .mapa{background:rgba(255,255,255,.6)}
.mapa iframe{
  display:block;width:100%;border:0;
  aspect-ratio:1/1;                    /* en móvil, cuadrado: se ve más calle */
  filter:grayscale(.25) contrast(.97);
  background:var(--crema);
}
.mapa-cargando{
  position:absolute;inset:6px;margin:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--crema);color:var(--texto-2);
  font-size:13px;letter-spacing:.1em;
  transition:opacity .4s ease;
}
.mapa.cargado .mapa-cargando{opacity:0;pointer-events:none}

@media (min-width:600px){
  .lugar-nombre{font-size:1.8rem}
  .mapa iframe{aspect-ratio:16/9}
}


/* ============ 9. SECCIÓN PARALLAX (foto + capa oscura) ============ */
/* El texto va ANCLADO ABAJO, no centrado. Es la única forma fiable de
   que no caiga sobre las caras: en una foto de dos personas de pie, la
   parte de abajo son siempre las piernas, pase lo que pase con el
   recorte. Centrado, la frase y las caras coinciden siempre. */
.parallax{
  padding:96px var(--margen) 44px;
  min-height:72svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  background-color:var(--crema);           /* mientras no hay foto */
  background-size:cover;background-position:center;
}
.parallax-velo{display:none}
.parallax-contenido{position:relative;z-index:1}

.parallax-frase{
  font-family:var(--script);font-size:2rem;color:var(--dorado);
  line-height:1.4;margin:18px 0 10px;
}
.parallax-firma{
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--texto-2);margin:0;
}
/* Las ramitas cierran el bloque por abajo, no lo abren por arriba, y
   bien separadas: pegadas al texto le caían en la cara a Fatna */
.parallax-contenido .ramitas{margin:64px 0 0}

/* Con la foto cargada: capa oscura encima y texto en blanco.
   El encuadre sube: centrado, la frase caía justo sobre sus caras.
   Provisional hasta que Miguel pase la foto nueva. */
.parallax.con-foto{
  background-image:var(--foto-parallax);
  /* Deja a la pareja en la mitad de arriba, por encima del texto */
  background-position:center 30%;
}
@media (min-width:760px){
  /* En pantalla ancha la foto vertical se amplía muchísimo, así que
     hay que bajar más el encuadre para que las caras sigan arriba */
  .parallax.con-foto{background-position:center 42%}
}
.parallax.con-foto .parallax-velo{
  display:block;position:absolute;inset:0;background:var(--velo);
}
.parallax.con-foto .parallax-frase{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.parallax.con-foto .parallax-firma{color:rgba(255,255,255,.85)}
.parallax.con-foto .ramita{color:rgba(255,255,255,.8)}

/* El efecto de fondo fijo solo en pantallas grandes con ratón (en móvil
   iOS va a tirones) y nunca para quien pide menos movimiento */
@media (min-width:900px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .parallax.con-foto{background-attachment:fixed}
}

@media (min-width:600px){
  /* Cuanto más alta es la banda, menos hay que ampliar la foto vertical
     y más sitio queda entre las caras y el texto */
  .parallax{padding:130px var(--margen) 56px;min-height:88vh}
  .parallax-frase{font-size:2.7rem}
}


/* ============ 9 bis. BANDA DE FOTO ============
   Un respiro entre la mesa de regalos y la confirmación: solo la foto,
   sin texto encima, con dos filetes dorados que la enmarcan. Nace
   oculta (atributo hidden) y el JS la muestra si el archivo existe. */
.banda-foto{
  padding:0;
  height:52svh;
  min-height:260px;max-height:520px;
  background-image:var(--foto-banda);
  background-size:cover;
  /* La pareja queda en la mitad de abajo del encuadre */
  background-position:center 58%;
  border-block:1px solid var(--linea);
}
.banda-foto[hidden]{display:none}
/* Mismo velo oscuro que la sección del parallax, para que las dos
   fotos a sangre tengan el mismo tono aunque esta no lleve texto */
.banda-foto::before{
  content:'';position:absolute;inset:0;background:var(--velo);
}

@media (min-width:700px){
  .banda-foto{height:58vh;max-height:620px}
}
/* En ordenador con ratón, el mismo efecto de fondo fijo que el parallax */
@media (min-width:900px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .banda-foto{background-attachment:fixed}
}


/* ============ 10. ACTIVIDADES ============ */
.tarjetas{display:grid;gap:14px;margin-top:32px}
.tarjeta{
  background:var(--marfil);border:1px solid var(--linea);
  padding:26px 20px;text-align:center;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.crema .tarjeta{background:rgba(255,255,255,.58)}
.tarjeta-icono{display:flex;justify-content:center;color:var(--dorado);margin-bottom:12px}
.tarjeta-icono svg{width:30px;height:30px}
.tarjeta h3{font-size:1.22rem;color:var(--tinta);margin:0 0 6px}
.tarjeta p{color:var(--texto-2);font-size:14.5px;margin:0}

@media (hover:hover){
  .tarjeta:hover{
    transform:translateY(-4px);border-color:var(--dorado-suave);
    box-shadow:0 18px 34px -28px rgba(87,80,63,.7);
  }
}
/* Dos tarjetas: dos columnas y el bloque acotado y centrado, para que
   no queden pegadas a un lado con un hueco vacío al otro */
@media (min-width:700px){
  .tarjetas{
    grid-template-columns:repeat(2,1fr);gap:20px;
    max-width:680px;margin-inline:auto;
  }
}
@media (min-width:900px){
  .tarjeta{padding:32px 24px}
}

.aviso{
  margin-top:26px;padding:20px 18px;text-align:center;
  border:1px dashed var(--dorado-suave);background:rgba(201,185,140,.1);
  color:var(--texto-2);font-size:14.5px;
}
.aviso strong{color:var(--dorado)}
.aviso .etiqueta{margin:0 0 8px}


/* ============ 11. MESA DE REGALOS ============ */
.regalos-icono svg{width:38px;height:38px}
.regalos-gracias{
  font-family:var(--script);font-size:1.5rem;color:var(--dorado);
  margin-top:14px;
}


/* ============ 12. CONFIRMAR ASISTENCIA ============ */
.rsvp{
  background:var(--marfil);border:1px solid var(--linea);
  padding:32px 20px;text-align:center;
}
.crema .rsvp{background:rgba(255,255,255,.62)}
.rsvp .ramitas{margin-bottom:14px}
.rsvp .ramita{width:76px}
.rsvp-fecha{margin:10px 0 8px}
.rsvp-fecha .etiqueta{margin:0;font-size:10.5px;padding:5px 13px}
.rsvp-lista{
  margin:22px auto 26px;max-width:400px;text-align:start;
  color:var(--texto-2);font-size:15px;
}
.rsvp-lista li{position:relative;padding-inline-start:22px;margin-bottom:9px}
.rsvp-lista li::before{
  content:'';position:absolute;inset-inline-start:0;top:.6em;
  width:6px;height:6px;border:1px solid var(--dorado);transform:rotate(45deg);
}
.rsvp-nota{margin-top:18px;font-size:13px;color:var(--texto-2)}

/* Mientras no haya enlace de formulario, el botón se ve claramente inactivo */
.boton.sin-enlace{opacity:.55;cursor:default}
.boton.sin-enlace:active{transform:none}

@media (min-width:600px){
  .rsvp{padding:50px 40px}
  .rsvp .ramita{width:88px}
  .boton.grande{width:auto;min-width:280px}
}


/* ============ 13. CIERRE, PIE Y BANDA VERDE ============ */
.cierre{padding-block:72px}

/* Foto del ramo dentro de la corona dorada */
.corona-foto{position:relative;width:210px;margin:0 auto}
.corona-foto svg{display:block;width:100%;height:auto}
.corona-foto img{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:71%;height:71%;object-fit:cover;border-radius:50%;
}
.corona-foto img[hidden]{display:none}

.cierre-frase{
  font-family:var(--script);font-size:1.85rem;color:var(--dorado);
  line-height:1.35;margin:24px auto 0;max-width:600px;
}

footer{padding:0;text-align:center}

.pie-enlaces{
  display:flex;justify-content:center;flex-wrap:wrap;gap:6px;
  padding:26px var(--margen);
}
.pie-enlaces a,.pie-musica{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:86px;padding:10px 8px;
  font-family:var(--sans);font-size:10px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--texto-2);text-decoration:none;
  background:transparent;border:0;cursor:pointer;
  transition:color .3s ease;
}
.pie-enlaces svg{width:20px;height:20px;color:var(--dorado)}
.pie-enlaces a:hover,.pie-musica:hover{color:var(--dorado)}

.pie-banda{
  background:var(--verde);color:#fff;
  padding:26px var(--margen) calc(30px + var(--seguro-abajo));
}
.pie-nombres{
  font-family:var(--script);font-size:1.9rem;color:#fff;
  letter-spacing:0;margin:0 0 4px;
}
.pie-nombres span{color:rgba(255,255,255,.75)}
.pie-fecha{
  margin:0;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
}

@media (min-width:600px){
  .cierre{padding-block:96px}
  .cierre-frase{font-size:2.4rem}
  .corona-foto{width:250px}
}


/* ============ 14. BARRA INFERIOR, MÚSICA Y MENSAJES ============ */
.barra-inferior{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:flex;gap:10px;
  padding:10px max(12px,env(safe-area-inset-left))
          calc(10px + var(--seguro-abajo)) max(12px,env(safe-area-inset-right));
  background:rgba(250,247,240,.95);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--linea);
  transform:translateY(110%);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.barra-inferior.visible{transform:none}
.barra-inferior[hidden]{display:none}
.barra-inferior .boton{flex:1;padding-inline:10px;font-size:11px;letter-spacing:.12em}

/* En escritorio no hace falta: los botones ya se ven dentro de las secciones */
@media (min-width:900px){
  .barra-inferior{display:none}
}

/* Botón flotante de la música (discreto, en la esquina) */
.boton-musica{
  position:fixed;z-index:60;
  right:max(14px,env(safe-area-inset-right));
  bottom:calc(var(--alto-barra-inferior) + var(--seguro-abajo) + 14px);
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(250,247,240,.92);color:var(--dorado);
  border:1px solid var(--dorado-suave);
  box-shadow:0 10px 24px -14px rgba(87,80,63,.55);
  cursor:pointer;
  transition:bottom .35s cubic-bezier(.22,.61,.36,1),background .3s ease,color .3s ease,transform .12s ease;
}
.boton-musica[hidden]{display:none}
.boton-musica svg{width:20px;height:20px}
.boton-musica:active{transform:scale(.94)}
.boton-musica[aria-pressed="true"]{background:var(--dorado);color:#fff;border-color:var(--dorado)}
.boton-musica[aria-pressed="true"] svg{animation:vaiven 2.2s ease-in-out infinite}
@keyframes vaiven{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}

/* Mensajes breves */
.mensaje{
  position:fixed;z-index:90;
  bottom:calc(var(--alto-barra-inferior) + var(--seguro-abajo) + 16px);
  left:16px;right:16px;margin:0;
  background:var(--tinta);color:var(--marfil);
  padding:13px 18px;border-radius:3px;text-align:center;
  font-size:13.5px;letter-spacing:.04em;
  box-shadow:0 12px 30px -18px rgba(0,0,0,.6);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.mensaje.visible{opacity:1;transform:none}
@media (min-width:600px){
  .mensaje{left:50%;right:auto;transform:translate(-50%,12px);min-width:280px}
  .mensaje.visible{transform:translate(-50%,0)}
}


/* ============ 15. ANIMACIONES AL HACER SCROLL ============ */
.animar{
  opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);
}
.animar.visible{opacity:1;transform:none}
.retraso-1{transition-delay:.1s}
.retraso-2{transition-delay:.2s}

/* Quien pide menos movimiento, no ve ninguno (y el parallax pasa a
   ser un fondo normal, ver la sección 9) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .animar{opacity:1 !important;transform:none !important;transition:none !important}
  .bajar span{animation:none}
  .boton-musica[aria-pressed="true"] svg{animation:none}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}


/* ============ 16. VERSIÓN EN ÁRABE ============ */
/* Se activa con el botón ES / العربية. El JS pone dir="rtl" en la
   página y la clase "arabe" en el body; aquí solo cambiamos tipografía
   y espaciados. La maquetación se voltea sola porque todo está hecho
   con propiedades lógicas (inset-inline, padding-inline...). */
body.arabe{font-family:var(--arabe);font-weight:400;line-height:1.95}

body.arabe h1,body.arabe h2,body.arabe h3,
body.arabe .portada-nombres,body.arabe .portada-fecha,
body.arabe .cierre-frase,body.arabe .parallax-frase,body.arabe .parallax-firma,
body.arabe .pie-nombres,body.arabe .lt-hora,body.arabe .reloj-caja b,
body.arabe .rsvp-fecha,body.arabe .lugar-nombre,body.arabe .menu-nav a,
body.arabe .titulo,body.arabe .dato-linea span{font-family:var(--arabe)}

/* El árabe no admite espaciado entre letras ni versalitas */
body.arabe .antetitulo,body.arabe .reloj-caja span,body.arabe .portada-fecha,
body.arabe .portada-nombres,body.arabe .etiqueta,body.arabe .boton,
body.arabe .barra-nav a,body.arabe .pie-enlaces span,body.arabe .pie-fecha,
body.arabe .pie-musica span,body.arabe footer,body.arabe .lugar-dir{
  letter-spacing:0;text-transform:none;
}

body.arabe .antetitulo,body.arabe .reloj-caja span{font-size:13px}
body.arabe .boton{font-size:14px;font-weight:400}
body.arabe .etiqueta{font-size:11px}
body.arabe .barra-nav a{font-size:13.5px}
body.arabe .menu-nav a{font-size:1.35rem}
body.arabe .portada-nombres{font-size:1.9rem;line-height:1.45}
body.arabe .portada-fecha{font-size:14px}
body.arabe .portada-texto{font-size:14.5px;line-height:1.85}
body.arabe .cierre-frase,body.arabe .parallax-frase{font-size:1.35rem;line-height:1.8}
body.arabe .pie-nombres{font-size:1.5rem}

/* El monograma es un logotipo latino: debe leerse F&M también en árabe */
body.arabe .monograma,body.arabe .corona-letras{direction:ltr}

@media (min-width:600px){
  body.arabe .portada-nombres{font-size:2.6rem}
  body.arabe .cierre-frase,body.arabe .parallax-frase{font-size:1.8rem}
}