/* =================================================================
   BODA MIGUEL & FATNA · 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, títulos)
     4. Barra superior y menú
     5. Portada
     6. Invitación
     7. Cuenta atrás
     8. Itinerario
     9. Ubicación
    10. Actividades
    11. Confirmar asistencia
    12. Cierre y pie
    13. Barra inferior y mensajes
    14. Animaciones al hacer scroll
    15. Versión en árabe
   ================================================================= */


/* ============ 1. VARIABLES ============ */
:root{
  /* Paleta (la misma de la invitación en papel) */
  --marfil:#FAF7F2;
  --crema:#F1ECE4;
  --dorado:#A98C55;
  --dorado-suave:#C6B48A;
  --tinta:#5E574C;
  --texto-2:#6E6A62;
  --linea:rgba(169,140,85,.3);

  /* Tipografías */
  --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(198,180,138,.16), transparent 46%),
    radial-gradient(circle at 90% 96%, rgba(198,180,138,.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(169,140,85,.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 */
.saltar{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:200;
  background:var(--dorado);color:#fff;padding:12px 18px;
  font-size:13px;letter-spacing:.1em;text-decoration:none;
}
.saltar:focus{inset-inline-start:8px;top:8px}

/* 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-size:1.95rem;letter-spacing:.01em;color:var(--tinta);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 botánicas --- */
.ramita{width:92px;height:auto;color:var(--dorado-suave)}
.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)}

/* --- 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:#93783f;border-color:#93783f}
}

.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;gap:14px}
  .acciones-secundarias .boton{flex:0 1 auto}
}


/* ============ 4. BARRA SUPERIOR Y MENÚ ============ */
.barra{
  /* Por encima del menú: así la hamburguesa hace de X y el selector de
     idioma sigue a mano con el menú abierto */
  position:fixed;top:0;inset-inline: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,242,0);
  border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.barra.fija{
  background:rgba(250,247,242,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--linea);
  box-shadow:0 6px 20px -18px rgba(94,87,76,.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);
  /* Es un logotipo latino: debe leerse M&F también con la página en árabe */
  direction:ltr;
}
.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 */
.idioma{
  display:flex;flex:none;
  border:1px solid rgba(169,140,85,.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(169,140,85,.18);
}
.menu-nav a:last-child{border-bottom:0;color:var(--dorado)}
.menu-nav a:active{background:rgba(198,180,138,.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(198,180,138,.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;
}

.portada-marco{position:relative;width:100%;max-width:600px;padding:26px 14px 24px}
.portada-marco::before,.portada-marco::after{
  content:'';position:absolute;width:34px;height:34px;
  border:1px solid var(--dorado-suave);opacity:.75;pointer-events:none;
}
.portada-marco::before{top:0;left:0;border-right:0;border-bottom:0}
.portada-marco::after{bottom:0;right:0;border-left:0;border-top:0}

.corazon{display:block;width:min(190px,50vw);height:auto;margin:0 auto 22px}
.corazon .sin-foto-fondo{fill:#DCD7CE}
.corazon .sin-foto-texto{
  font-family:'Jost',sans-serif;font-size:8px;letter-spacing:.2em;
  fill:#8B8478;text-transform:uppercase;
}
.corazon .corazon-borde{fill:none;stroke:var(--dorado);stroke-width:1.6}

.portada-saludo{
  font-family:var(--script);font-size:2.3rem;color:var(--dorado);
  line-height:1.05;margin:0 0 4px;
}
.portada-sub{color:var(--texto-2);font-size:14px;letter-spacing:.03em;margin:0 0 16px}

.portada-nombres{
  font-family:var(--script);font-size:3.3rem;color:var(--tinta);
  line-height:1.04;margin:10px 0 4px;
}
.portada-nombres .amp{display:block;font-size:.44em;color:var(--dorado);margin:0}

.portada-fecha{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;
  font-family:var(--serif);font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta);margin:14px 0 0;padding:10px 0;
  border-top:1px solid var(--dorado-suave);border-bottom:1px solid var(--dorado-suave);
}
.portada-fecha i{width:4px;height:4px;background:var(--dorado);border-radius:50%;flex:none}
.portada-ciudad{
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--dorado);margin:14px 0 0;
}

.bajar{margin-top:30px;display:flex;justify-content:center}
.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;
}
@keyframes respirar{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

@media (min-width:600px){
  .portada-marco{padding:38px 26px 34px}
  .portada-marco::before,.portada-marco::after{width:46px;height:46px}
  .corazon{width:220px;margin-bottom:26px}
  .portada-saludo{font-size:3rem}
  .portada-sub{font-size:15px}
  .portada-nombres{font-size:4.6rem}
  .portada-fecha{font-size:1.3rem;gap:16px}
  .ramita{width:110px}
}
@media (min-width:900px){
  .portada-nombres{font-size:5.4rem}
}


/* ============ 6. INVITACIÓN ============ */
.datos{
  display:grid;gap:1px;margin-top:32px;
  background:var(--linea);border:1px solid var(--linea);
}
.datos li{background:var(--marfil);padding:22px 16px;text-align:center}
.crema .datos li{background:var(--crema)}
.datos-etq{
  display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--dorado);margin-bottom:7px;
}
.datos-val{display:block;font-family:var(--serif);font-size:1.28rem;color:var(--tinta);line-height:1.3}
.datos-pie{display:block;font-size:12.5px;color:var(--texto-2);margin-top:3px}

@media (min-width:640px){
  .datos{grid-template-columns:repeat(3,1fr)}
  .datos li{padding:26px 18px}
}


/* ============ 7. CUENTA ATRÁS ============ */
.reloj{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-top:28px;
}
.reloj-caja{
  padding:14px 4px 12px;
  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.1rem;line-height:1;color:var(--dorado);
  font-variant-numeric:tabular-nums;
}
.reloj-caja span{
  display:block;margin-top:7px;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2);
}
.reloj-aviso{margin-top:24px;font-family:var(--serif);font-size:1.3rem;color:var(--tinta)}

@media (min-width:520px){
  .reloj{gap:14px;max-width:560px;margin-inline:auto}
  .reloj-caja{padding:18px 8px 14px}
  .reloj-caja b{font-size:2.8rem}
  .reloj-caja span{font-size:10px;letter-spacing:.2em}
}
@media (min-width:900px){
  .reloj-caja b{font-size:3.1rem}
}


/* ============ 8. ITINERARIO ============ */
.linea-tiempo{
  position:relative;margin-top:36px;text-align:start;
  padding-inline-start:26px;
}
.linea-tiempo::before{
  content:'';position:absolute;inset-block: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)}

.lt-hora{
  font-family:var(--serif);font-size:1.35rem;color:var(--dorado);
  line-height:1.1;margin:0 0 3px;font-variant-numeric:tabular-nums;letter-spacing:.03em;
}
.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}

@media (min-width:760px){
  .linea-tiempo{padding-inline-start:0;max-width:740px;margin-inline:auto}
  .linea-tiempo::before{inset-inline-start:126px}
  .linea-tiempo li{
    display:grid;grid-template-columns:126px 1fr;column-gap:42px;padding-bottom:38px;
  }
  .linea-tiempo li::before{inset-inline-start:121.5px;top:10px}
  .lt-hora{text-align:end;font-size:1.5rem;margin:0}
  .lt-cuerpo h3{font-size:1.32rem}
  .lt-cuerpo p{font-size:15px}
}


/* ============ 9. UBICACIÓN ============ */
.lugar{margin-top:20px}
.lugar-nombre{font-family:var(--serif);font-size:1.4rem;color:var(--tinta);margin:0 0 6px}
.lugar-dir{color:var(--texto-2);font-size:14.5px;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.7rem}
  .mapa iframe{aspect-ratio:16/9}
}


/* ============ 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(94,87,76,.7);
  }
}
@media (min-width:700px){
  .tarjetas{grid-template-columns:repeat(3,1fr);gap:20px}
  .tarjeta{padding:32px 24px}
}

.aviso{
  margin-top:26px;padding:20px 18px;text-align:center;
  border:1px dashed var(--dorado-suave);background:rgba(198,180,138,.1);
  color:var(--texto-2);font-size:14.5px;
}
.aviso strong{color:var(--dorado)}


/* ============ 11. 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{
  font-family:var(--serif);font-size:1.55rem;color:var(--dorado);
  margin:8px 0 6px;letter-spacing:.03em;
}
.rsvp-lista{
  margin:22px auto 26px;max-width:360px;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}
  .rsvp-fecha{font-size:2rem}
  .boton.grande{width:auto;min-width:280px}
}


/* ============ 12. CIERRE Y PIE ============ */
.cierre{padding-block:72px}
.cierre-frase{
  font-family:var(--script);font-size:1.85rem;color:var(--dorado);
  line-height:1.35;margin:20px auto 0;max-width:600px;
}
footer{
  padding:32px var(--margen) 40px;text-align:center;
  border-top:1px solid rgba(169,140,85,.25);
  color:var(--texto-2);font-size:11.5px;letter-spacing:.14em;
}
.pie-nombres{
  font-family:var(--script);font-size:1.7rem;color:var(--dorado);
  letter-spacing:0;margin:0 0 4px;
}
@media (min-width:600px){
  .cierre{padding-block:96px}
  .cierre-frase{font-size:2.5rem}
}


/* ============ 13. BARRA INFERIOR Y MENSAJES ============ */
.barra-inferior{
  position:fixed;inset-inline: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,242,.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}
}

/* Mensajes breves */
.mensaje{
  position:fixed;z-index:90;
  bottom:calc(var(--alto-barra-inferior) + var(--seguro-abajo) + 16px);
  inset-inline: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{inset-inline:auto;left:50%;transform:translate(-50%,12px);min-width:280px}
  .mensaje.visible{transform:translate(-50%,0)}
}


/* ============ 14. 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 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .animar{opacity:1 !important;transform:none !important;transition:none !important}
  .bajar span{animation:none}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}


/* ============ 15. VERSIÓN EN ÁRABE ============ */
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-saludo,body.arabe .portada-nombres,
body.arabe .portada-fecha,body.arabe .cierre-frase,body.arabe .pie-nombres,
body.arabe .lt-hora,body.arabe .reloj-caja b,body.arabe .rsvp-fecha,
body.arabe .datos-val,body.arabe .menu-nav a,body.arabe .monograma{
  font-family:var(--arabe);
}

/* El árabe necesita más interlineado y no admite espaciado entre letras */
body.arabe .antetitulo,body.arabe .reloj-caja span,body.arabe .datos-etq,
body.arabe .portada-ciudad,body.arabe .etiqueta,body.arabe .boton,
body.arabe .barra-nav a,body.arabe footer{letter-spacing:0;text-transform:none}

body.arabe .antetitulo,body.arabe .reloj-caja span,
body.arabe .datos-etq,body.arabe .portada-ciudad{font-size:12.5px}
body.arabe .boton{font-size:14px;font-weight:400}
body.arabe .etiqueta{font-size:11px}
body.arabe .portada-saludo{font-size:1.9rem}
body.arabe .portada-nombres{font-size:2.5rem;line-height:1.35}
body.arabe .portada-fecha{font-size:1rem;letter-spacing:.04em}
body.arabe .cierre-frase{font-size:1.4rem;line-height:1.8}
body.arabe .pie-nombres{font-size:1.4rem}
body.arabe .barra-nav a{font-size:13.5px}

@media (min-width:600px){
  body.arabe .portada-nombres{font-size:3.6rem}
  body.arabe .portada-saludo{font-size:2.4rem}
  body.arabe .cierre-frase{font-size:1.9rem}
}