/* =========================================================
   PLANTILLA "JARDÍN DE BARRO" (slug terracota-jardin) — boda, floral premium.
   Hoja de estilo AUTOCONTENIDA (NO depende de base.css/temas.css).
   Comparte el contrato de datos del motor (motor.js): mismas clases/IDs/
   data-rol/data-modulo que el resto; cambia el copy y el envoltorio visual.

   Dirección estética: jardín de barro. Fondo crema cálido radial, tinta café
   oscuro, terracota como acento, oliva apagado y oro. Ramas florales line-art
   que se DIBUJAN solas (stroke-dashoffset) y flores que florecen; pétalos que
   caen sutiles en el hero. Nombres en serif ITÁLICA centrada.
   Mobile-first · accesible AA · sin dependencias · sin overflow-x.
   ========================================================= */

:root {
  /* Cremas cálidas (fondo radial del hero) */
  --crema:        #f6ecdb;
  --crema-2:      #efe0c9;
  --crema-card:   #fbf3e4;
  --crema-hondo:  #ecdcc0;
  /* Terracota (acento principal) */
  --terracota:    #bb5a34;
  --terracota-pr: #a94e2c;
  --terracota-hd: #8f3d1d;
  /* Oliva apagado */
  --oliva:        #7c7a4e;
  --oliva-pr:     #64632f;
  /* Oro cálido */
  --oro:          #c99a52;
  --oro-pr:       #b3843c;
  /* Rama / madera */
  --rama:         #8a6a3a;
  /* Tinta */
  --tinta:        #3a2c22;
  --tinta-suave:  #6b5236;

  --f-nombre: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --f-titulo: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --f-texto:  "Mulish", system-ui, -apple-system, sans-serif;

  --esp-1:4px; --esp-2:8px; --esp-3:16px; --esp-4:24px; --esp-5:40px; --esp-6:64px; --esp-7:96px;
  --filete:        rgba(138,106,58,.26);
  --filete-fuerte: rgba(138,106,58,.5);
  --radio: 14px;
  --ls: .28em;
  --transicion: .4s ease;

  /* Hoja de oliva line-art (motivo de esquina de tarjetas). */
  --hoja-esquina: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%237c7a4e' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M6 54 C18 44 30 30 34 12'/%3E%3Cpath d='M22 30 C14 26 8 18 7 8' fill='%237c7a4e' fill-opacity='.16'/%3E%3Cpath d='M26 22 C34 20 42 12 44 2' fill='%237c7a4e' fill-opacity='.16'/%3E%3Cpath d='M18 40 C10 38 4 30 3 20' fill='%237c7a4e' fill-opacity='.16'/%3E%3C/svg%3E");
  /* Rama floral horizontal (respaldo del divisor / colofón del pie). */
  --rama-flor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 56' fill='none' stroke='%238a6a3a' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M22 32 C64 28 92 28 120 28 C148 28 176 28 218 32'/%3E%3Cpath d='M90 28 C84 18 72 14 62 16 C72 20 82 24 90 28Z' stroke='%237c7a4e' fill='%237c7a4e' fill-opacity='.2'/%3E%3Cpath d='M90 28 C84 38 72 42 62 40 C72 36 82 32 90 28Z' stroke='%237c7a4e' fill='%237c7a4e' fill-opacity='.2'/%3E%3Cpath d='M150 28 C156 18 168 14 178 16 C168 20 158 24 150 28Z' stroke='%237c7a4e' fill='%237c7a4e' fill-opacity='.2'/%3E%3Cpath d='M150 28 C156 38 168 42 178 40 C168 36 158 32 150 28Z' stroke='%237c7a4e' fill='%237c7a4e' fill-opacity='.2'/%3E%3Ccircle cx='120' cy='28' r='8' fill='%23bb5a34' stroke='none'/%3E%3Ccircle cx='120' cy='28' r='3' fill='%23e8c48b' stroke='none'/%3E%3C/svg%3E");

  /* --sec-*: tokens de la capa compartida (fichas dinámicas + saludo fallback),
     SPEC 0006. ADITIVO: solo los consume secciones.css; no altera el look
     propio de esta plantilla. */
  --sec-bg:            var(--crema-card);
  --sec-borde:         var(--filete);
  --sec-radio:         var(--radio);
  --sec-titulo-font:   var(--f-titulo);
  --sec-titulo-color:  var(--terracota-hd);
  --sec-texto-color:   var(--tinta);
  --sec-acento:        var(--terracota);
  --sec-acento-bg:     var(--terracota);
  --sec-acento-tinta:  var(--crema-card);
  --sec-acento-boton-bg:    var(--crema-card);
  --sec-acento-boton-tinta: var(--terracota-hd);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--f-texto);
  font-size: 16px; line-height: 1.75;
  color: var(--tinta);
  background-color: var(--crema);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Fondo crema cálido radial (mismo espíritu del mockup .m2) + veladura oliva. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 6%, var(--crema) 0%, var(--crema-2) 68%, var(--crema-hondo) 100%),
    linear-gradient(180deg, transparent, rgba(124,122,78,.05));
  background-repeat: no-repeat;
}
/* Follaje floral tenue en esquinas (line-art decorativo). */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 210' fill='none' stroke='%237c7a4e' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M8 210 C28 158 40 108 38 56'/%3E%3Cpath d='M38 128 C20 118 8 104 6 84' fill='%237c7a4e' fill-opacity='.14'/%3E%3Cpath d='M39 96 C58 88 70 74 72 54' fill='%237c7a4e' fill-opacity='.14'/%3E%3Cpath d='M37 62 C21 54 11 42 10 24' fill='%237c7a4e' fill-opacity='.14'/%3E%3Ccircle cx='38' cy='46' r='6' fill='%23bb5a34' stroke='none'/%3E%3Ccircle cx='38' cy='46' r='2.2' fill='%23e8c48b' stroke='none'/%3E%3C/svg%3E") left top / 150px auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 210' fill='none' stroke='%237c7a4e' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M160 0 C138 52 126 108 130 162'/%3E%3Cpath d='M130 84 C148 94 160 108 162 128' fill='%237c7a4e' fill-opacity='.14'/%3E%3Cpath d='M131 118 C112 126 100 140 98 160' fill='%237c7a4e' fill-opacity='.14'/%3E%3Ccircle cx='130' cy='150' r='6' fill='%23bb5a34' stroke='none'/%3E%3Ccircle cx='130' cy='150' r='2.2' fill='%23e8c48b' stroke='none'/%3E%3C/svg%3E") right bottom / 150px auto no-repeat;
  opacity: .55;
}

img { max-width: 100%; display: block; }
iframe { border: 0; }

/* Reveal de secciones (lo dispara el motor con .is-visible). */
.fade-up { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; }
.fade-up.is-visible { opacity: 1; transform: none; }

/* =========================================================
   FIRMA FLORAL ANIMADA (ADITIVO)
   Las ramas/flores SVG se "dibujan solas" (stroke-dashoffset) al entrar la
   sección (engancha a .fade-up.is-visible) y al cargar el hero; las flores
   florecen (bloom) al final del trazo y el follaje mece como brisa.
   prefers-reduced-motion lo apaga y deja todo dibujado/abierto (más abajo).
   ========================================================= */

/* Cada trazo arranca "sin dibujar". Los paths llevan pathLength="1" (atributo
   SVG), así dasharray/offset de 1 cubren todo el trazo sin importar su largo. */
.flor-trazo { stroke-dasharray: 1; stroke-dashoffset: 1; }
/* Las flores (bloom) entran encogidas y florecen al final del trazo. */
.flor-bloom { opacity: 0; transform: scale(.2); transform-origin: center; transform-box: fill-box; }

.fade-up.is-visible .flor-trazo,
.hero .flor-trazo {
  animation: flor-dibujar 1.6s cubic-bezier(.5, 0, .2, 1) forwards;
}
.fade-up.is-visible .flor-bloom,
.hero .flor-bloom {
  animation: flor-florecer .6s cubic-bezier(.2, 1.3, .4, 1) forwards;
  animation-delay: 1.15s;
}
@keyframes flor-dibujar  { to { stroke-dashoffset: 0; } }
@keyframes flor-florecer { to { opacity: 1; transform: scale(1); } }

/* Brisa: leve mecer del follaje en bucle, arranca tras dibujarse. */
.flor-follaje { transform-box: fill-box; transform-origin: 50% 60%; animation: flor-brisa 6.5s ease-in-out 1.7s infinite; }
@keyframes flor-brisa {
  0%, 100% { transform: rotate(-1.1deg) translateY(0); }
  50%      { transform: rotate(1.1deg) translateY(-1px); }
}

/* =========================================================
   HERO — jardín de barro, portada floral
   ========================================================= */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--esp-6) var(--esp-4);
  background-color: var(--crema);
  background-size: cover; background-position: center;
}
/* Velo crema cálido cuando hay foto de portada (el motor pone background-image). */
.hero__overlay {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(246,236,219,.72) 0%, rgba(239,224,201,.6) 60%, rgba(236,220,192,.82) 100%);
}
.hero__contenido {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
}

/* Pétalos que caen — pocos y sutiles, contenidos por overflow del hero. */
.hero__petalos { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.petalo {
  position: absolute; top: -8%; width: 11px; height: 15px;
  border-radius: 60% 60% 60% 0; opacity: 0;
  background: var(--terracota); will-change: transform, opacity;
  animation: petalo-caer 12s linear infinite;
}
.petalo:nth-child(1) { left: 8%;  background: var(--terracota); animation-duration: 13s; animation-delay: -1s; }
.petalo:nth-child(2) { left: 22%; background: var(--oro);       animation-duration: 16s; animation-delay: -6s; }
.petalo:nth-child(3) { left: 35%; background: var(--terracota-pr); animation-duration: 11s; animation-delay: -3s; }
.petalo:nth-child(4) { left: 48%; background: var(--oliva);     animation-duration: 17s; animation-delay: -9s; }
.petalo:nth-child(5) { left: 61%; background: var(--terracota); animation-duration: 14s; animation-delay: -4s; }
.petalo:nth-child(6) { left: 74%; background: var(--oro);       animation-duration: 15s; animation-delay: -11s; }
.petalo:nth-child(7) { left: 86%; background: var(--terracota-pr); animation-duration: 12s; animation-delay: -7s; }
.petalo:nth-child(8) { left: 93%; background: var(--oliva);     animation-duration: 18s; animation-delay: -2s; }
@keyframes petalo-caer {
  0%   { transform: translateY(0) rotate(0deg);     opacity: 0; }
  8%   { opacity: .75; }
  92%  { opacity: .7; }
  100% { transform: translateY(112svh) rotate(230deg); opacity: 0; }
}

/* Ramilletes florales que enmarcan el hero (arriba colgando, abajo hacia arriba). */
.hero__rama { display: block; width: clamp(150px, 44vw, 220px); height: auto; overflow: visible; }
.hero__rama-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero__rama--top { margin-bottom: var(--esp-3); }
.hero__rama--bot { margin-top: var(--esp-3); transform: rotate(180deg); }
.hero__rama--top { animation: hero-surge .9s ease both; }

/* Monograma de iniciales (motor.js → data-rol="hero-sello"). */
.hero__sello {
  width: 82px; height: 82px; margin-bottom: var(--esp-4);
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--f-titulo); font-weight: 600; font-size: 1.7rem; color: var(--terracota-hd);
  background: var(--crema-card);
  border: 1px solid var(--oro); box-shadow: 0 6px 22px rgba(143,61,29,.14);
}
.hero__sello:empty { display: none; }

.hero__intro {
  font-family: var(--f-texto); text-transform: uppercase; letter-spacing: var(--ls);
  font-size: .76rem; font-weight: 600; color: var(--oliva-pr);
  margin-bottom: var(--esp-3);
  animation: hero-surge .9s ease .1s both;
}
.hero__nombres {
  font-family: var(--f-nombre); font-style: italic; font-weight: 500;
  font-size: clamp(3.2rem, 17vw, 6.4rem); line-height: 1;
  color: var(--terracota-hd); letter-spacing: .005em;
  /* Contorno legible sobre foto: SOLO text-shadow, nunca -webkit-text-stroke. */
  text-shadow: 0 1px 0 rgba(251,243,228,.9), 0 2px 14px rgba(143,61,29,.14);
  animation: hero-surge 1s ease .22s both;
}
.hero__amp {
  display: block; font-size: .4em; color: var(--oliva);
  font-style: italic; margin: .06em 0;
}
.hero__fecha {
  display: inline-flex; align-items: center; gap: var(--esp-3);
  margin-top: var(--esp-4);
  font-family: var(--f-texto); text-transform: uppercase; letter-spacing: var(--ls);
  font-size: clamp(.74rem, 3.2vw, .9rem); font-weight: 600; color: var(--oliva-pr);
  animation: hero-surge 1s ease .34s both;
}
.hero__fecha::before, .hero__fecha::after {
  content: ""; width: 32px; height: 1px; background: var(--oro-pr);
}
.hero__scroll {
  margin-top: var(--esp-5); color: var(--terracota); text-decoration: none;
  font-size: 1.5rem; animation: hero-surge 1s ease .5s both;
}
.hero__scroll:focus-visible { outline: 2px solid var(--oro-pr); outline-offset: 6px; border-radius: 4px; }
.hero__flecha { display: inline-block; animation: flotar 2s ease-in-out infinite; }

/* Animaciones de CARGA del hero (keyframes, NUNCA scroll-timeline sobre opacity). */
@keyframes hero-surge { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes flotar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* =========================================================
   ESTRUCTURA — secciones
   ========================================================= */
main { padding: var(--esp-6) var(--esp-4) var(--esp-7); }
.contador, .historia, .evento, .rsvp,
.mesa-regalos, .dress-code, .itinerario, .hospedaje, .bienvenida {
  max-width: 620px; margin: 0 auto var(--esp-7); text-align: center;
}

/* Divisor: rama floral line-art (marca de sección). El SVG inline se DIBUJA
   solo al revelarse; el background var(--rama-flor) queda de respaldo. */
.divisor {
  display: block; width: 180px; height: 44px;
  margin: 0 auto var(--esp-4); font-size: 0;
  background: var(--rama-flor) center / contain no-repeat;
}
.divisor:has(.divisor__svg) { background: none; }
.divisor__svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Títulos de sección */
.seccion__titulo, .bienvenida__titulo {
  font-family: var(--f-titulo); font-weight: 600;
  font-size: clamp(2rem, 7vw, 2.9rem); line-height: 1.1;
  color: var(--terracota-hd); letter-spacing: .005em;
  margin-bottom: var(--esp-4);
}
.bienvenida__titulo { font-style: italic; color: var(--terracota); }
.bienvenida__texto {
  max-width: 500px; margin: 0 auto; color: var(--tinta-suave);
  font-size: 1.28rem; font-style: italic; font-family: var(--f-titulo); line-height: 1.5;
}

/* =========================================================
   CUENTA REGRESIVA — móvil en rejilla 2×2, escritorio en 4
   ========================================================= */
.contador__lista {
  list-style: none; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-3); max-width: 340px; margin: 0 auto;
}
.contador__item {
  position: relative; padding: var(--esp-4) var(--esp-2);
  background: var(--crema-card); border: 1px solid var(--filete); border-radius: var(--radio);
  box-shadow: 0 4px 16px rgba(143,61,29,.08);
}
/* Motivo de hoja en la esquina de cada ficha. */
.contador__item::before {
  content: ""; position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  background: var(--hoja-esquina) center / contain no-repeat; opacity: .5;
}
.contador__num {
  display: block; font-family: var(--f-titulo); font-weight: 600;
  font-size: clamp(2.2rem, 9vw, 3rem); line-height: 1; color: var(--terracota-pr);
}
.contador__label {
  display: block; margin-top: var(--esp-2);
  font-size: .6rem; text-transform: uppercase; letter-spacing: .2em; color: var(--oliva-pr);
}

/* =========================================================
   HISTORIA / timeline (BODA)
   ========================================================= */
.historia__linea { list-style: none; max-width: 520px; margin: 0 auto; text-align: left; position: relative; }
.historia__linea::before {
  content: ""; position: absolute; top: 6px; bottom: 6px; left: 9px; width: 2px;
  background: linear-gradient(var(--oliva), var(--oro));
}
.historia__item { position: relative; padding: 0 0 var(--esp-5) var(--esp-5); }
.historia__item::before {
  content: ""; position: absolute; left: -1px; top: 3px; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f3d1d' stroke-width='.6'%3E%3Ccircle cx='12' cy='12' r='6' fill='%23bb5a34'/%3E%3Ccircle cx='12' cy='7.5' r='2' fill='%23c99a52'/%3E%3Ccircle cx='16' cy='13.5' r='2' fill='%23c99a52'/%3E%3Ccircle cx='8' cy='13.5' r='2' fill='%23c99a52'/%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%23e8c48b'/%3E%3C/svg%3E") center / contain no-repeat;
}
.historia__item:last-child { padding-bottom: 0; }
.historia__fecha {
  font-family: var(--f-texto); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .18em; color: var(--terracota-pr); margin-bottom: var(--esp-1);
}
.historia__titulo { font-family: var(--f-titulo); font-weight: 600; font-size: 1.5rem; color: var(--terracota-hd); line-height: 1.2; }
.historia__texto { color: var(--tinta-suave); margin-top: var(--esp-1); }
.historia__img {
  margin-top: var(--esp-3); width: 100%; border-radius: var(--radio);
  border: 1px solid var(--filete); object-fit: cover; aspect-ratio: 16/10;
}

/* =========================================================
   EVENTOS (ceremonia / recepción) + MAPA
   ========================================================= */
.evento__hora {
  display: inline-block; font-family: var(--f-texto); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; font-size: .82rem; color: var(--terracota-pr);
  margin-bottom: var(--esp-2);
}
.evento__lugar { font-family: var(--f-titulo); font-weight: 600; font-size: clamp(1.7rem,5.5vw,2.3rem); color: var(--terracota-hd); line-height: 1.1; }
.evento__direccion { color: var(--tinta-suave); margin: var(--esp-2) 0 var(--esp-4); }
.evento__mapa {
  position: relative; border: 1px solid var(--filete); border-radius: var(--radio);
  overflow: hidden; box-shadow: 0 6px 20px rgba(143,61,29,.1);
}
/* Mapa integrado a la paleta cálida (evita el multicolor que rompe el jardín). */
.evento__mapa iframe { width: 100%; height: 300px; display: block; filter: sepia(.18) saturate(.85) contrast(.95); }
/* Sin mapa (iframe sin src) → el contenedor colapsa, no deja caja vacía. */
.evento__mapa:not(:has(iframe[src])) { display: none; }
.evento__boton, .mesa-regalos__link, .hospedaje__link {
  display: inline-block; margin-top: var(--esp-4);
  padding: var(--esp-2) var(--esp-5); border: 1px solid var(--terracota); border-radius: 999px;
  color: var(--terracota-hd); text-decoration: none; background: transparent;
  font-family: var(--f-texto); font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .16em;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.evento__boton:hover, .mesa-regalos__link:hover, .hospedaje__link:hover {
  background: var(--terracota); color: var(--crema-card); border-color: var(--terracota);
}
.evento__boton:focus-visible, .mesa-regalos__link:focus-visible, .hospedaje__link:focus-visible,
.hospedaje__tel:focus-visible {
  outline: 2px solid var(--oro-pr); outline-offset: 3px;
}

/* =========================================================
   ITINERARIO — el programa del día
   ========================================================= */
.itinerario__lista { list-style: none; max-width: 460px; margin: 0 auto; text-align: left; }
.itinerario__item {
  display: grid; grid-template-columns: 96px 1fr; align-items: baseline; gap: var(--esp-3);
  padding: var(--esp-3) 0; border-bottom: 1px solid var(--filete);
}
.itinerario__item:last-child { border-bottom: none; }
.itinerario__hora { font-family: var(--f-titulo); font-weight: 600; font-size: 1.25rem; color: var(--terracota-pr); }
.itinerario__actividad { color: var(--tinta); }

/* =========================================================
   DRESS CODE
   ========================================================= */
.dress-code__descripcion { max-width: 480px; margin: 0 auto var(--esp-4); color: var(--tinta-suave); }
.dress-code__colores { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; }
.dress-code__color { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--crema-card); box-shadow: 0 0 0 1px var(--filete-fuerte), 0 4px 12px rgba(58,44,34,.16); }

/* =========================================================
   MESA DE REGALOS
   ========================================================= */
.mesa-regalos__mensaje { max-width: 480px; margin: 0 auto var(--esp-4); color: var(--tinta-suave); }
.mesa-regalos__lista { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; }
.mesa-regalos__link { margin-top: 0; }

/* =========================================================
   HOSPEDAJE
   ========================================================= */
.hospedaje__lista { list-style: none; display: grid; gap: var(--esp-3); grid-template-columns: 1fr; text-align: left; }
.hospedaje__item {
  position: relative; background: var(--crema-card); border: 1px solid var(--filete);
  border-radius: var(--radio); padding: var(--esp-4); box-shadow: 0 4px 16px rgba(143,61,29,.08);
  overflow: hidden;
}
.hospedaje__item::before {
  content: ""; position: absolute; top: -6px; right: -6px; width: 40px; height: 40px;
  background: var(--hoja-esquina) center / contain no-repeat; opacity: .45; transform: scaleX(-1);
}
.hospedaje__nombre { font-family: var(--f-titulo); font-weight: 600; font-size: 1.4rem; color: var(--terracota-hd); margin-bottom: var(--esp-1); }
.hospedaje__direccion { color: var(--tinta-suave); margin-bottom: var(--esp-2); }
.hospedaje__tel { display: inline-block; color: var(--terracota); text-decoration: none; letter-spacing: .03em; font-weight: 600; }
.hospedaje__tel:hover { text-decoration: underline; }
.hospedaje__link { margin-top: var(--esp-3); padding: var(--esp-1) var(--esp-4); font-size: .68rem; }

/* =========================================================
   GALERÍA — carrusel a sangre
   ========================================================= */
.galeria { padding: var(--esp-5) 0 var(--esp-7); max-width: none; margin: 0 0 var(--esp-7); }
.carrusel { position: relative; max-width: 920px; margin: 0 auto; }
.carrusel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.carrusel__track::-webkit-scrollbar { display: none; }
.carrusel__slide { flex: 0 0 84%; scroll-snap-align: center; padding: 0 var(--esp-2); }
.carrusel__slide img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border: 1px solid var(--filete); border-radius: var(--radio); box-shadow: 0 8px 24px rgba(143,61,29,.12); }
.carrusel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--oro);
  background: rgba(251,243,228,.9); color: var(--terracota-hd); font-size: 1.4rem; cursor: pointer;
  display: grid; place-items: center; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 4px 14px rgba(143,61,29,.16);
}
.carrusel__nav:focus-visible { outline: 2px solid var(--oro-pr); outline-offset: 2px; }
.carrusel__nav--prev { left: 10px; } .carrusel__nav--next { right: 10px; }
.carrusel__dots { display: flex; justify-content: center; gap: 10px; margin-top: var(--esp-4); }
.carrusel__dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--terracota); background: transparent; padding: 0; cursor: pointer; }
.carrusel__dot.is-active { background: var(--terracota); }
.carrusel__dot:focus-visible { outline: 2px solid var(--oro-pr); outline-offset: 2px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(58,44,34,.93); padding: var(--esp-3); opacity: 0; visibility: hidden; transition: opacity var(--transicion); }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: 100%; max-height: 85vh; border: 3px solid var(--crema-card); border-radius: var(--radio); }
.lightbox__cerrar { position: absolute; top: var(--esp-3); right: var(--esp-3); background: none; border: none; color: var(--crema-card); font-size: 2.4rem; cursor: pointer; line-height: 1; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--crema-card); font-size: 2.6rem; cursor: pointer; padding: var(--esp-2); }
.lightbox__nav--prev { left: var(--esp-1); } .lightbox__nav--next { right: var(--esp-1); }
.lightbox__cerrar:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid var(--oro-pr); outline-offset: 2px; border-radius: 4px; }

/* =========================================================
   RSVP
   ========================================================= */
.rsvp__nota { color: var(--tinta-suave); margin-bottom: var(--esp-4); font-style: italic; font-family: var(--f-titulo); font-size: 1.15rem; }
.rsvp__form { max-width: 440px; margin: 0 auto; text-align: left; }
.rsvp__auto { margin: calc(-1 * var(--esp-2)) 0 var(--esp-3); font-size: .8rem; font-style: italic; color: var(--terracota-pr); }
.campo { margin-bottom: var(--esp-4); border: none; }
.campo__label { display: block; margin-bottom: var(--esp-2); font-size: .68rem; font-weight: 700; color: var(--oliva-pr); text-transform: uppercase; letter-spacing: .16em; }
.campo__input {
  width: 100%; padding: var(--esp-2) var(--esp-3); font-family: var(--f-texto); font-size: 1.02rem; color: var(--tinta);
  background: var(--crema-card); border: 1px solid var(--filete-fuerte); border-radius: 10px;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
textarea.campo__input { resize: vertical; }
.campo__input::placeholder { color: var(--tinta-suave); opacity: .6; }
.campo__input:focus-visible { outline: none; border-color: var(--terracota); box-shadow: 0 0 0 3px rgba(187,90,52,.22); }
.rsvp__opciones { display: flex; flex-direction: column; gap: var(--esp-2); }
.rsvp__radio { display: flex; align-items: center; gap: var(--esp-2); cursor: pointer; color: var(--tinta); }
.rsvp__radio input { accent-color: var(--terracota); }
.rsvp__radio input:focus-visible { outline: 2px solid var(--oro-pr); outline-offset: 2px; }
.boton {
  display: block; width: 100%; margin-top: var(--esp-3);
  padding: var(--esp-3); border: 1px solid var(--terracota-hd); border-radius: 999px;
  background: var(--terracota); color: var(--crema-card);
  font-family: var(--f-texto); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em; cursor: pointer;
  transition: background var(--transicion), box-shadow var(--transicion), transform .1s ease;
}
.boton:hover { background: var(--terracota-pr); box-shadow: 0 8px 22px rgba(169,78,44,.3); }
.boton:focus-visible { outline: 2px solid var(--oro-pr); outline-offset: 3px; }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: .55; cursor: default; }
.rsvp__estado { margin-top: var(--esp-3); text-align: center; font-weight: 700; min-height: 1.4em; }
.rsvp__estado--ok { color: var(--oliva-pr); }
.rsvp__estado--error { color: #b5544a; }

/* =========================================================
   MÚSICA (botón flotante). NO se redefine .musica--invita (vive en secciones.css).
   ========================================================= */
.musica { position: fixed; bottom: var(--esp-3); right: var(--esp-3); z-index: 40; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--terracota); background: var(--crema-card); color: var(--terracota-hd); cursor: pointer; display: grid; place-items: center; font-size: 1.3rem; box-shadow: 0 6px 18px rgba(143,61,29,.22); }
.musica:focus-visible { outline: 2px solid var(--oro-pr); outline-offset: 3px; }
.musica[aria-pressed="true"] .musica__icono { animation: girar 4s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* =========================================================
   PIE — colofón con rama floral
   ========================================================= */
.pie { position: relative; text-align: center; padding: var(--esp-7) var(--esp-4) calc(var(--esp-7) + 60px); }
.pie::before {
  content: ""; position: absolute; top: var(--esp-5); left: 50%; transform: translateX(-50%);
  width: 140px; height: 34px; background: var(--rama-flor) center / contain no-repeat;
}
/* La rama inline animada reemplaza al sprite de fondo del pie. */
.pie:has(.pie__rama)::before { display: none; }
.pie__rama { display: block; width: 180px; height: 44px; margin: 0 auto var(--esp-4); }
.pie__rama .divisor__svg { width: 100%; height: 100%; overflow: visible; }
.pie__nombres { font-family: var(--f-nombre); font-style: italic; font-weight: 500; font-size: 3.2rem; color: var(--terracota-hd); line-height: 1; }
.pie__fecha { text-transform: uppercase; letter-spacing: var(--ls); font-size: .74rem; margin: var(--esp-2) 0 var(--esp-3); color: var(--oliva-pr); font-weight: 600; }
.pie__credito { font-size: .64rem; text-transform: uppercase; letter-spacing: .22em; color: var(--tinta-suave); opacity: .8; }

/* =========================================================
   SALUDO personalizado por invitado (NATIVO; inyectado por motor.js).
   Se define aquí para no heredar el fallback de secciones.css.
   ========================================================= */
.saludo { text-align: center; padding: var(--esp-5) var(--esp-3); background: var(--terracota); color: var(--crema-card); }
.saludo__hola { font-family: var(--f-titulo); font-style: italic; font-weight: 600; font-size: clamp(1.8rem,6vw,2.6rem); line-height: 1.1; }
.saludo__pases { margin-top: 6px; letter-spacing: .04em; opacity: .95; }

/* =========================================================
   BARRA DE PREVIEW (dev)
   ========================================================= */
.preview { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(58,44,34,.96); color: var(--crema-card); padding: var(--esp-2) var(--esp-3); display: flex; gap: var(--esp-4); flex-wrap: wrap; justify-content: center; font-family: system-ui, sans-serif; }
.preview__chip { background: rgba(255,255,255,.14); color: var(--crema-card); border: 1px solid transparent; padding: 4px 10px; border-radius: 999px; font-size: .8rem; cursor: pointer; }
.preview__chip.is-active { background: var(--terracota); color: var(--crema-card); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width: 600px) {
  .contador__lista { grid-template-columns: repeat(4, 1fr); max-width: none; }
}
@media (min-width: 768px) {
  .carrusel__slide { flex: 0 0 56%; }
  .carrusel__slide img { aspect-ratio: 16/10; }
  .hospedaje__lista { grid-template-columns: 1fr 1fr; }
  .evento__mapa iframe { height: 380px; }
}

/* =========================================================
   ACCESIBILIDAD — reduced-motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fade-up { opacity: 1; transform: none; }
  /* Firma floral: sin animación pero dibujada y florecida (no en blanco). */
  .flor-trazo { stroke-dashoffset: 0; }
  .flor-bloom { opacity: 1; transform: none; }
  .flor-follaje { transform: none; }
  /* Pétalos apagados (no caen). */
  .petalo { display: none; }
  /* Ramilletes del hero visibles en su estado final. */
  .hero__rama--bot { transform: rotate(180deg); }
}

/* =========================================================
   AJUSTES QA v0.22.1 — áreas táctiles ≥44px y hospedaje aireado.
   Reglas ADITIVAS (mismo look; solo ergonomía y separación).
   ========================================================= */
.hospedaje__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-3); }
.hospedaje__tel {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0;
}
.hospedaje__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; margin: 0;
}
@media (max-width: 560px) {
  .hospedaje__tel, .hospedaje__link { width: 100%; }
  .hospedaje__tel { justify-content: flex-start; }
}
.evento__boton, .mesa-regalos__link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
}
.hero__scroll {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
}

/* =========================================================
   PORTADA DE APERTURA (SPEC 0008) — variante JARDÍN DE BARRO
   Rama floral como emblema + título serif itálico + CTA terracota.
   ========================================================= */
:root {
  --portada-bg:          var(--crema-card);
  --portada-tinta:       var(--terracota-hd);
  --portada-acento:      var(--oro);
  --portada-titulo-font: var(--f-titulo);
  --portada-radio:       var(--radio);
  --portada-cta-bg:      var(--terracota);
  --portada-cta-tinta:   var(--crema-card);
}
.ti-portada { background: radial-gradient(120% 90% at 50% 8%, var(--crema) 0%, var(--crema-2) 70%); }
.ti-portada__emblema {
  display: block; width: 120px; height: 36px; margin: 0 auto var(--esp-2);
  background: var(--rama-flor) center / contain no-repeat;
}
.ti-portada__titulo {
  font-family: var(--f-titulo); font-style: italic; font-weight: 600;
  font-size: clamp(2rem, 8vw, 3rem); color: var(--terracota-hd);
}
.ti-portada__invitado { display: none; }
.ti-portada__cta {
  text-transform: uppercase; letter-spacing: .14em; font-size: .95rem; font-weight: 600;
  padding: 14px 30px;
}