/* =========================================================
   PLANTILLA "JARDÍN BOTÁNICO" — boda, jardín romántico de día.
   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.
   Verde salvia/eucalipto + crema + terracota suave · hojas line-art en SVG.
   Mobile-first · accesible · sin dependencias.
   ========================================================= */

:root {
  /* Verdes salvia / eucalipto */
  --salvia:       #7d9075;
  --salvia-prof:  #5e7257;
  --eucalipto:    #4a5d49;
  --hoja-tenue:   #aebfa3;
  /* Cremas y marfil */
  --crema:        #f6f1e7;
  --crema-2:      #efe7d6;
  --crema-card:   #fbf8f1;
  /* Terracota suave de acento */
  --terracota:    #c98a6e;
  --terracota-pr: #b5765b;
  /* Tinta */
  --tinta:        #3c4439;
  --tinta-suave:  #6a7264;

  --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(125,144,117,.28);
  --filete-fuerte: rgba(94,114,87,.5);
  --radio: 14px;
  --ls: .3em;
  --transicion: .4s ease;

  /* Firma botánica: ramita line-art (verde eucalipto) reutilizable */
  --ramita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' fill='none' stroke='%234a5d49' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M10 20 H110'/%3E%3Cpath d='M44 20 C40 12 32 9 26 11 C32 14 38 17 44 20Z' fill='%237d9075' fill-opacity='.25'/%3E%3Cpath d='M44 20 C40 28 32 31 26 29 C32 26 38 23 44 20Z' fill='%237d9075' fill-opacity='.25'/%3E%3Cpath d='M76 20 C80 12 88 9 94 11 C88 14 82 17 76 20Z' fill='%237d9075' fill-opacity='.25'/%3E%3Cpath d='M76 20 C80 28 88 31 94 29 C88 26 82 23 76 20Z' fill='%237d9075' fill-opacity='.25'/%3E%3Ccircle cx='60' cy='20' r='3' fill='%23c98a6e'/%3E%3C/svg%3E");
}

*, *::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 con follaje muy tenue (esquinas) — line-art de hojas */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -8%, var(--crema-2) 0%, var(--crema) 46%),
    linear-gradient(180deg, transparent, rgba(125,144,117,.04));
  background-repeat: no-repeat;
}
/* Acentos de follaje en esquinas (line-art, decorativos) */
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 160 200' fill='none' stroke='%237d9075' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M10 200 C30 150 40 100 38 50'/%3E%3Cpath d='M38 120 C20 110 8 96 6 78' /%3E%3Cpath d='M38 120 C18 122 8 116 2 102' fill='%23aebfa3' fill-opacity='.18'/%3E%3Cpath d='M37 88 C56 80 68 66 70 48'/%3E%3Cpath d='M37 88 C58 90 68 84 74 70' fill='%23aebfa3' fill-opacity='.18'/%3E%3Cpath d='M36 60 C20 52 10 40 9 24' /%3E%3Cpath d='M36 60 C16 62 8 56 3 42' fill='%23aebfa3' fill-opacity='.18'/%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 160 200' fill='none' stroke='%237d9075' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M150 0 C130 50 120 100 122 150'/%3E%3Cpath d='M122 80 C140 90 152 104 154 122' fill='%23aebfa3' fill-opacity='.18'/%3E%3Cpath d='M123 112 C104 120 92 134 90 152' fill='%23aebfa3' fill-opacity='.18'/%3E%3Cpath d='M124 140 C140 148 150 160 151 176' fill='%23aebfa3' fill-opacity='.18'/%3E%3C/svg%3E") right bottom / 150px auto no-repeat;
  opacity: .5;
}

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

.fade-up { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; }
.fade-up.is-visible { opacity: 1; transform: none; }

/* =========================================================
   FIRMA BOTÁNICA ANIMADA (ADITIVO)
   Las ramitas/hojas SVG se "dibujan solas" (stroke-dashoffset) al entrar
   la sección (engancha a .fade-up.is-visible) y al cargar el hero; el
   follaje mece levemente en bucle como brisa. prefers-reduced-motion lo
   apaga y deja todo dibujado/visible (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. */
.bot-trazo {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
/* El brote terracota y los rellenos de hoja entran al final del trazo. */
.bot-brote { opacity: 0; transform: scale(.2); transform-origin: center; transform-box: fill-box; }

/* Estado dibujado: lo activan .is-visible (secciones) o el hero al cargar. */
.fade-up.is-visible .bot-trazo,
.hero .bot-trazo {
  animation: bot-dibujar 1.5s cubic-bezier(.5, 0, .2, 1) forwards;
}
.fade-up.is-visible .bot-brote,
.hero .bot-brote {
  animation: bot-brotar .55s ease-out forwards;
  animation-delay: 1.1s;
}
@keyframes bot-dibujar { to { stroke-dashoffset: 0; } }
@keyframes bot-brotar { to { opacity: 1; transform: scale(1); } }

/* Brisa: leve mecer del follaje en bucle, desfasado por capa. */
.bot-follaje { transform-box: fill-box; transform-origin: 50% 60%; animation: bot-brisa 6s ease-in-out 1.6s infinite; }
.bot-mecer   { transform-box: fill-box; transform-origin: 50% 100%; animation: bot-brisa-suave 7s ease-in-out 1.6s infinite; }
@keyframes bot-brisa {
  0%, 100% { transform: rotate(-1.1deg) translateY(0); }
  50%      { transform: rotate(1.1deg) translateY(-1px); }
}
@keyframes bot-brisa-suave {
  0%, 100% { transform: rotate(-.7deg); }
  50%      { transform: rotate(.7deg); }
}

/* =========================================================
   HERO — portada de jardín
   ========================================================= */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--esp-7) var(--esp-4);
  background-color: var(--crema);
  background-size: cover; background-position: center;
}
/* Velo claro botánico cuando hay foto de portada (motor pone background-image) */
.hero__overlay {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(246,241,231,.62) 0%, rgba(246,241,231,.46) 45%, rgba(246,241,231,.74) 100%);
}
/* Follaje line-art enmarcando el nombre (firma del hero) */
.hero::before {
  content: ""; position: absolute; z-index: -1;
  top: 8%; left: 50%; transform: translateX(-50%);
  width: min(92%, 540px); height: 120px; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80' fill='none' stroke='%235e7257' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M150 70 C150 50 150 30 150 12'/%3E%3Cpath d='M150 30 C168 24 184 26 196 16 C182 16 166 18 150 30Z' fill='%237d9075' fill-opacity='.3'/%3E%3Cpath d='M150 30 C132 24 116 26 104 16 C118 16 134 18 150 30Z' fill='%237d9075' fill-opacity='.3'/%3E%3Cpath d='M150 46 C170 42 188 44 202 34 C186 34 168 36 150 46Z' fill='%237d9075' fill-opacity='.3'/%3E%3Cpath d='M150 46 C130 42 112 44 98 34 C114 34 132 36 150 46Z' fill='%237d9075' fill-opacity='.3'/%3E%3Ccircle cx='150' cy='10' r='3.4' fill='%23c98a6e'/%3E%3C/svg%3E") center top / 240px auto no-repeat;
  opacity: .9;
}
.hero__contenido { position: relative; display: flex; flex-direction: column; align-items: center; }

/* Ramita line-art del hero que se dibuja sola al cargar + mece con la brisa */
.hero__follaje {
  display: block; width: clamp(150px, 42vw, 220px); height: auto;
  margin-bottom: var(--esp-3); overflow: visible;
}

/* Monograma en corona de hojas (motor.js → data-rol="hero-sello") */
.hero__sello {
  width: 84px; height: 84px; 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(--eucalipto);
  background:
    var(--crema-card)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84' fill='none' stroke='%237d9075' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M42 6 C30 12 22 24 22 38'/%3E%3Cpath d='M42 6 C54 12 62 24 62 38'/%3E%3Cpath d='M30 16 C22 16 16 22 14 30' fill='%23aebfa3' fill-opacity='.25'/%3E%3Cpath d='M54 16 C62 16 68 22 70 30' fill='%23aebfa3' fill-opacity='.25'/%3E%3C/svg%3E") center / cover no-repeat;
  border: 1px solid var(--filete-fuerte);
  box-shadow: 0 6px 22px rgba(94,114,87,.16);
}
.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(--salvia-prof);
  margin-bottom: var(--esp-3);
}
.hero__nombres {
  font-family: var(--f-nombre); font-weight: 500;
  font-size: clamp(3.4rem, 19vw, 7rem); line-height: .96;
  color: var(--eucalipto); letter-spacing: .01em;
}
.hero__amp {
  display: block; font-size: .42em; color: var(--terracota);
  font-style: italic; margin: .04em 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(--salvia-prof);
}
.hero__fecha::before, .hero__fecha::after {
  content: ""; width: 34px; height: 1px; background: var(--filete-fuerte);
}
.hero__scroll {
  margin-top: var(--esp-6); color: var(--salvia-prof); text-decoration: none; opacity: .9;
  font-size: 1.5rem;
}
.hero__scroll:focus-visible { outline: 2px solid var(--terracota); outline-offset: 6px; border-radius: 4px; }
.hero__flecha { display: inline-block; animation: flotar 2s ease-in-out infinite; }
@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: ramita botánica line-art (la marca de sección).
   Lleva un SVG inline (.divisor__svg) que se DIBUJA SOLO al revelarse la
   sección; el background var(--ramita) queda como respaldo si no hay SVG. */
.divisor {
  display: block; width: 168px; height: 42px;
  margin: 0 auto var(--esp-4); font-size: 0;
  background: var(--ramita) 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(--eucalipto); letter-spacing: .005em;
  margin-bottom: var(--esp-4);
}
.bienvenida__titulo { color: var(--salvia-prof); }
.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
   ========================================================= */
.contador__lista { list-style: none; display: flex; gap: var(--esp-3); justify-content: center; flex-wrap: wrap; }
.contador__item {
  min-width: 78px; padding: var(--esp-3) var(--esp-2);
  background: var(--crema-card); border: 1px solid var(--filete); border-radius: var(--radio);
  box-shadow: 0 4px 16px rgba(94,114,87,.08);
}
.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(--salvia-prof);
}

/* =========================================================
   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(--salvia), var(--hoja-tenue));
}
.historia__item { position: relative; padding: 0 0 var(--esp-5) var(--esp-5); }
.historia__item::before {
  content: ""; position: absolute; left: 1px; top: 4px;
  width: 18px; height: 18px;
  background: var(--ramita-hoja, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237d9075' stroke='%235e7257' stroke-width='1'%3E%3Cpath d='M12 2 C5 6 4 14 6 22 C14 20 20 14 22 6 C18 7 13 9 9 14 C11 9 12 5 12 2Z'/%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(--eucalipto); 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(--eucalipto); line-height: 1.1; }
.evento__direccion { color: var(--tinta-suave); margin: var(--esp-2) 0 var(--esp-4); }
.evento__mapa { border: 1px solid var(--filete); border-radius: var(--radio); overflow: hidden; box-shadow: 0 6px 20px rgba(94,114,87,.1); }
.evento__mapa iframe { width: 100%; height: 300px; display: block; filter: saturate(.85); }
.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(--salvia-prof);
  border-radius: 999px; color: var(--salvia-prof); 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(--salvia-prof); color: var(--crema); border-color: var(--salvia-prof);
}
.evento__boton:focus-visible, .mesa-regalos__link:focus-visible, .hospedaje__link:focus-visible,
.hospedaje__tel:focus-visible {
  outline: 2px solid var(--terracota); 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(60,68,57,.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 {
  background: var(--crema-card); border: 1px solid var(--filete); border-radius: var(--radio);
  padding: var(--esp-4); box-shadow: 0 4px 16px rgba(94,114,87,.08);
}
.hospedaje__nombre { font-family: var(--f-titulo); font-weight: 600; font-size: 1.4rem; color: var(--eucalipto); margin-bottom: var(--esp-1); }
.hospedaje__direccion { color: var(--tinta-suave); margin-bottom: var(--esp-2); }
.hospedaje__tel { display: inline-block; color: var(--salvia-prof); 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(94,114,87,.12); }
.carrusel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--filete-fuerte);
  background: rgba(251,248,241,.88); color: var(--salvia-prof); 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(94,114,87,.16);
}
.carrusel__nav:focus-visible { outline: 2px solid var(--terracota); 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(--salvia-prof); background: transparent; padding: 0; cursor: pointer; }
.carrusel__dot.is-active { background: var(--salvia-prof); }
.carrusel__dot:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(60,68,57,.92); 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); border-radius: var(--radio); }
.lightbox__cerrar { position: absolute; top: var(--esp-3); right: var(--esp-3); background: none; border: none; color: var(--crema); 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); 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(--terracota); 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(--salvia-prof); 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(--salvia-prof); box-shadow: 0 0 0 3px rgba(125,144,117,.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(--salvia-prof); }
.rsvp__radio input:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }
.boton {
  display: block; width: 100%; margin-top: var(--esp-3);
  padding: var(--esp-3); border: 1px solid var(--terracota-pr); 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(181,118,91,.3); }
.boton:focus-visible { outline: 2px solid var(--eucalipto); 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(--salvia-prof); }
.rsvp__estado--error { color: #b5544a; }

/* =========================================================
   MÚSICA
   ========================================================= */
.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(--salvia-prof); background: var(--crema-card); color: var(--salvia-prof); cursor: pointer; display: grid; place-items: center; font-size: 1.3rem; box-shadow: 0 6px 18px rgba(94,114,87,.22); }
.musica:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }
.musica[aria-pressed="true"] .musica__icono { animation: girar 4s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* =========================================================
   PIE — colofón con ramita
   ========================================================= */
.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: 130px; height: 34px; background: var(--ramita) center / contain no-repeat;
}
/* La ramita inline animada reemplaza al sprite de fondo del pie */
.pie:has(.pie__ramita)::before { display: none; }
.pie__ramita { display: block; width: 168px; height: 42px; margin: 0 auto var(--esp-4); }
.pie__ramita .divisor__svg { width: 100%; height: 100%; overflow: visible; }
.pie__nombres { font-family: var(--f-nombre); font-weight: 500; font-size: 3.2rem; color: var(--eucalipto); 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(--salvia-prof); font-weight: 600; }
.pie__credito { font-size: .64rem; text-transform: uppercase; letter-spacing: .22em; color: var(--tinta-suave); opacity: .8; }

/* Saludo personalizado por invitado (inyectado por motor.js) */
.saludo { text-align: center; padding: var(--esp-5) var(--esp-3); background: var(--salvia); color: var(--crema-card); }
.saludo__hola { font-family: var(--f-titulo); 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(60,68,57,.96); color: var(--crema); 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); 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: 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
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fade-up { opacity: 1; transform: none; }
  /* Firma botánica: sin animación, pero dibujada y visible (no en blanco). */
  .bot-trazo { stroke-dashoffset: 0; }
  .bot-brote { opacity: 1; transform: none; }
  .bot-follaje, .bot-mecer { transform: none; }
}