/* ============================================================
   BM Bodas Video — Web pública
   Sistema de diseño heredado del área de clientes (handoff)
   MOBILE-FIRST: base = móvil, media queries amplían a desktop
   ============================================================ */

/* Paleta EXACTA de gesbodas-v2 (área de clientes) — cremas intensas */
:root {
  --brand:    #7ba89a;   /* sage / verde eucalipto corporativo */
  --brand-2:  #5e8c7e;   /* sage oscuro — hovers */
  --accent:   #c87457;   /* terracota — acento cálido */
  --accent-2: #e4a07f;
  --ink:      #2b2421;
  --ink-2:    #5b5048;
  --ink-3:    #8c8278;
  --paper:    #f2e9d3;   /* fondo página */
  --paper-2:  #e7d8b8;   /* cards / hero */
  --paper-3:  #d4bf95;   /* tercer escalón */
  --line:     #2b242133;
  --line-2:   #2b24211a;
  --ok:       #2f7a1f;
  --warn:     #a87807;
  --danger:   #b03020;
  --shadow:   0 1px 0 #2b242115, 0 8px 24px -12px #2b242122;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Caparazón anti-scroll lateral (iOS): los decos sangran por los bordes */
  overflow-x: hidden; overflow-x: clip; width: 100%;
}
/* Fondo de página = MISMO que el login del área de clientes (paper-2 + glow sage) */
html, body { margin: 0; padding: 0; background: var(--paper-2); color: var(--ink); }
body {
  /* Papel de dibujo técnico: patrón de trazos blueprint repetido por TODA la página
     (cruces, cuadraditos, líneas de cota cortadas, arcos, círculos — como el logo) */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(123,168,154,0.10), transparent 55%),
    var(--paper-2);
  background-size: auto, auto;
  overflow-x: hidden; overflow-x: clip;
  width: 100%; position: relative; isolation: isolate;
}
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}
/* Capa de símbolos del papel técnico, movida fuera del background de body
   para poder animarla (flicker). Revertible: ver bloque ANIMACIÓN al final. */
body::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800' fill='none'%3E%3Cg stroke='%232b2421' fill='none'%3E%3Cg stroke-opacity='0.35'%3E%3Crect x='336' y='556' width='26' height='17' rx='2.5'/%3E%3Ccircle cx='349' cy='564.5' r='5.5'/%3E%3Cpath d='M342 556 L345 551.5 H353 L356 556'/%3E%3C/g%3E%3Cg stroke-opacity='0.262'%3E%3Crect x='150' y='352' width='16' height='12' rx='2'/%3E%3Crect x='636' y='74' width='13' height='13'/%3E%3Crect x='656' y='168' width='22' height='15' rx='2'/%3E%3Ccircle cx='667' cy='175.5' r='4.5'/%3E%3Cpath d='M661 168 L663.5 164 H670.5 L673 168'/%3E%3Crect x='560' y='176' width='16' height='12' rx='2'/%3E%3Cpath d='M576 180 L584 176.5 V188.5 L576 184'/%3E%3Cpath d='M166 356 L174 352.5 V364.5 L166 360'/%3E%3Cpath d='M470 660 H740 M470 653 V667 M740 653 V667'/%3E%3Cpath d='M728 656 L740 660 L728 664'/%3E%3Cpath d='M88 330 h13 v13 h-13 Z'/%3E%3C/g%3E%3Cg stroke-opacity='0.193'%3E%3Cpath d='M680 380 V480' stroke-dasharray='2 7'/%3E%3Cpath d='M726 46 V150' stroke-dasharray='2 7'/%3E%3Cpath d='M120 560 V740' stroke-dasharray='12 9'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%232b2421'%3E%3Ccircle cx='210' cy='118' r='4' fill-opacity='0.193'/%3E%3Ctext x='210' y='134' fill-opacity='0.193' text-anchor='middle' font-family='monospace' font-size='9' letter-spacing='2'%3EREC.%3C/text%3E%3C/g%3E%3Cg fill='%232b2421' font-family='Caveat, Bradley Hand, cursive' font-size='15'%3E%3Ctext x='540' y='128' fill-opacity='0.245' transform='rotate(-4 540 128)'%3EISO 500%3C/text%3E%3Ctext x='655' y='525' fill-opacity='0.245'%3EISO 100%3C/text%3E%3Ctext x='238' y='712' fill-opacity='0.35' transform='rotate(4 238 712)'%3E1/400%3C/text%3E%3Ctext x='60' y='450' fill-opacity='0.28' transform='rotate(-90 60 450)'%3E1/100%3C/text%3E%3Ctext x='772' y='130' fill-opacity='0.245' transform='rotate(-90 772 130)'%3E1/100%3C/text%3E%3C/g%3E%3C/svg%3E") repeat;
  background-size: 800px 800px;
}

img, iframe { max-width: 100%; }

/* ── Tipografía ── */
h1, h2, h3, .display { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 12px; }
h1 { font-size: 30px; line-height: 1.15; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
.italic { font-style: italic; }
.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; display: block; margin-bottom: 10px;
}
/* Texto base unificado: Cormorant cursiva en toda la web (la tipo de la home).
   Las EXCEPCIONES llevan su propia fuente: menú/nav e inputs (Inter, vía body),
   botones (.btn, Inter), y etiquetas mono (.eyebrow, labels, .boda-venue, .soon). */
p {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500;
  font-size: 18px; line-height: 1.5; margin: 0 0 14px; color: var(--ink-2);
}
a { color: var(--brand-2); text-decoration: none; }
a:hover { color: var(--accent); }

/* ── Layout ── */
.wrap { padding: 0 18px; max-width: 1100px; margin: 0 auto; }
section { position: relative; }
/* FIX: .wrap pisaba el padding vertical de section (las secciones quedaban pegadas) */
section.wrap, section { padding-top: 48px; padding-bottom: 48px; }

/* ── Decoración blueprint (temática del logo: arcos, cotas, cruces) ── */
.deco {
  position: absolute; z-index: 0; pointer-events: none;
  color: var(--ink); opacity: 0.13; mix-blend-mode: multiply;
}
/* El contenido de cada sección por encima de los decos */
section > *:not(.deco), .hero > *:not(.deco) { position: relative; z-index: 1; }

/* Sección "limpia": fondo opaco que tapa el papel técnico, con fundido arriba y abajo */
section.clean {
  background:
    linear-gradient(180deg,
    rgba(231,216,184,0) 0%, var(--paper-2) 7%,
    var(--paper-2) 93%, rgba(231,216,184,0) 100%);

}
.deco svg { display: block; width: 100%; height: 100%; }
.deco-tr { top: -20px; right: -90px; width: 230px; height: 230px; }
.deco-bl { bottom: -30px; left: -90px; width: 260px; height: 260px; transform: rotate(180deg); }
.deco-hero-l { left: -110px; top: 30px; width: 300px; height: 300px; transform: rotate(225deg); opacity: 0.10; }
.deco-hero-r { right: -110px; top: 60px; width: 300px; height: 300px; transform: rotate(45deg); opacity: 0.10; }
/* Redondel blueprint detrás del titular del hero */
.deco-hero-circle {
  left: 50%; top: 56%; transform: translate(-50%, -50%);
  width: 780px; height: 780px; opacity: 0.18;
}
.deco-lens-l { left: -80px; bottom: 30px; width: 210px; height: 210px; opacity: 0.12; }
.deco-lens-r { right: -80px; top: 40px; width: 190px; height: 190px; opacity: 0.12; }
.deco-rule-r { right: 14px; top: 50%; transform: translateY(-50%); width: 44px; height: 300px; opacity: 0.22; }
.deco-rule-l { left: 14px; top: 50%; transform: translateY(-50%); width: 44px; height: 300px; opacity: 0.22; }

/* Marca de pie: cámara — REC — videocámara */
.film-mark {
  width: 230px; margin: 0 auto 14px;
  color: var(--ink); opacity: 0.45; mix-blend-mode: multiply;
}
.film-mark svg { display: block; width: 100%; height: auto; }

/* Separador de secciones — línea de cota a todo el ancho con cruz de objetivo */
.sep {
  display: flex; align-items: center;
  max-width: 1100px; margin: 0 auto; padding: 0 26px;
  color: var(--ink); opacity: 0.5; mix-blend-mode: multiply;
}
.sep-line { flex: 1; height: 1px; background: currentColor; position: relative; }
.sep-line::after {
  content: ""; position: absolute; left: 50%; top: -6px;
  width: 1px; height: 13px; background: currentColor;
}
.sep-core { width: 56px; height: 56px; flex: none; margin: 0 18px; }
.sep-end { width: 12px; height: 12px; flex: none; }

@media (max-width: 767px) {
  .deco-tr { width: 150px; height: 150px; right: -60px; }
  .deco-bl { width: 170px; height: 170px; left: -60px; }
  .deco-hero-l, .deco-hero-r { width: 190px; height: 190px; }
  .deco-hero-circle { width: 440px; height: 440px; }
  .deco-lens-l, .deco-lens-r { width: 130px; height: 130px; }
  .deco-rule-l, .deco-rule-r { display: none; }
  .sep-core { width: 44px; height: 44px; margin: 0 12px; }
  .film-mark { width: 190px; }
}

/* ── Header / nav ── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper-2) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-2);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; max-width: 1100px; margin: 0 auto;
}
.nav-logo img {
  height: 52px; width: 52px; object-fit: cover; display: block;
  border-radius: 50%;
}
.nav-toggle {
  background: none; border: none; cursor: pointer; padding: 8px;
  display: flex; flex-direction: column; gap: 5px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); display: block; transition: 0.2s; }
.nav-links {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper-2); border-bottom: 1px solid var(--line);
  flex-direction: column; padding: 8px 0;
}
.nav-links.open { display: flex; }
.nav-links a {
  padding: 13px 22px; color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 22px;
  letter-spacing: 0.01em;
  border-top: 1px solid var(--paper-3);
}
.nav-links a.cta { color: var(--accent); font-style: italic; }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: 99px; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 500;
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
  transition: 0.15s;
}
.btn:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn.accent { background: var(--accent); border-color: var(--accent); }

/* ── Hero (estilo login área cliente: logo fusionado sobre el fondo de página) ──
   Fondo propio opaco: tapa el papel técnico en esta zona (solo logo + texto, limpio)
   con fundido suave al papel al final */
.hero { padding: 28px 18px 40px; text-align: center; position: relative; }
/* Panel limpio CENTRAL (como las secciones): el papel técnico queda visible en los laterales */
.hero::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: min(1100px, 100%); z-index: 0;
  background:
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper-2) 82%, rgba(231,216,184,0) 100%);
  background-size: auto;
}
/* El blend va en el CONTENEDOR: al tener z-index propio, el img solo aislado no fundía */
.hero-logo { /* logo en PNG transparente: ya no necesita mix-blend-mode */ }
.hero-logo img {
  width: 415px; max-width: 84vw; height: auto;
}
.hero h1 { font-size: 30px; margin-top: -4px; }
.hero .sub { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 19px; font-style: italic; color: var(--ink-2); max-width: 640px; margin: 0 auto 22px; }

/* ── Cards genéricas (crema claro sobre fondo arena, como la card del login) ── */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px; box-shadow: var(--shadow);
}

/* ── Vídeos ── */
.video-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
.video-card .frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; background: var(--paper);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Fachada limpia: miniatura propia + play; el iframe entra al hacer clic */
.video-lite { cursor: pointer; }
.video-lite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
.video-lite:hover img { transform: scale(1.03); }
.play-btn {
  position: absolute; left: 14px; bottom: 14px;
  width: 48px; height: 48px; transition: transform 0.15s;
}
.video-lite:hover .play-btn { transform: scale(1.1); }
.play-btn svg { display: block; width: 100%; height: 100%; }
.video-lite.playing { cursor: default; }
.video-card h3 { margin: 10px 0 2px; font-style: italic; font-size: 21px; }
.video-card .venue { font-size: 13px; color: var(--ink-3); }

/* ── Tarjetas de bodas reales (→ landings) ── */
.boda-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.boda-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; box-shadow: var(--shadow); display: block; color: inherit;
  transition: 0.15s;
}
a.boda-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.boda-thumb { aspect-ratio: 16 / 9; background: var(--paper-3); position: relative; overflow: hidden; }
.boda-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.boda-thumb-pendiente {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(123,168,154,0.12), transparent 65%),
    var(--paper-2);
}
.boda-thumb-pendiente span {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 26px;
  color: var(--ink-3);
}
.boda-body { padding: 16px 18px 18px; }
.boda-venue {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--brand-2); display: block; margin-bottom: 6px;
}
.boda-body h3 { font-style: italic; font-size: 30px; font-weight: 700; -webkit-text-stroke: 0.4px currentColor; margin: 0 0 8px; }
.boda-body p { font-size: 18px; font-weight: 500; margin: 0 0 10px; }
.boda-body .soon, .soon {
  display: inline-block; font-size: 11px; color: var(--ink-3);
  font-family: "JetBrains Mono", monospace; letter-spacing: 1px; text-transform: uppercase;
}

/* ── CTA band ── */
.cta-band {
  background: var(--brand); color: #fff; border-radius: 14px;
  padding: 34px 22px; text-align: center;
}
.cta-band h2 { color: #fff; font-style: italic; }
.cta-band p { color: #ffffffd9; }
.cta-band .btn { background: #fff; color: var(--brand-2); border-color: #fff; }
.cta-band .btn:hover { background: var(--paper); }

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--line); background: var(--paper-3);
  padding: 30px 0 80px; margin-top: 30px;
  text-align: center; font-size: 14px; color: var(--ink-3);
}
.site-footer .social { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 18px 0 22px; }
.site-footer .social a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 99px;
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
  font-family: "Inter", system-ui, sans-serif; font-size: 15px; font-weight: 500; font-style: normal;
  transition: 0.15s; box-shadow: var(--shadow);
}
.site-footer .social a:hover {
  background: var(--brand-2); border-color: var(--brand-2); color: #fff; transform: translateY(-2px);
}
.site-footer .social svg { width: 19px; height: 19px; display: block; flex: none; }

/* ============================================================
   DESKTOP ≥ 768px
   ============================================================ */
@media (min-width: 768px) {
  body { font-size: 16px; }
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  .wrap { padding-left: 40px; padding-right: 40px; }
  section.wrap, section { padding-top: 76px; padding-bottom: 76px; }

  .nav { padding: 12px 40px; }
  .nav-toggle { display: none; }
  .nav-links {
    display: flex !important; position: static; flex-direction: row;
    background: none; border: 0; padding: 0; gap: 6px; align-items: center;
  }
  .nav-links a { padding: 8px 14px; border: 0; font-size: 20px; border-radius: 8px; }
  .nav-links a:hover { background: var(--paper); }

  .hero { padding: 40px 40px 64px; }
  .hero-logo img { width: 560px; }
  .hero h1 { font-size: 46px; }
  .hero .sub { font-size: 22px; }

  .video-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .boda-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .boda-body { padding: 14px 16px 16px; }
  .boda-body h3 { font-size: 23px; margin-bottom: 6px; }
  .boda-body p { font-size: 16px; }
  .boda-venue { font-size: 10px; }
  .boda-body .soon { font-size: 10px; }
  .cta-band { padding: 56px 40px; }
  .site-footer { padding: 40px 0; }
}

/* ============================================================
   PÁGINAS NOSOTROS (about) + CONTACTO — heredan el sistema base
   ============================================================ */

/* Helpers de centrado para titulares de sección */
.center { text-align: center; }
.eyebrow.center { display: block; }
h2.center, h1.center { text-align: center; }

/* ── Prosa (Nosotros) — centrada, Cormorant cursiva con punch ── */
.about-intro, .about-en { text-align: center; }
.about-intro h1 { font-size: 36px; margin-bottom: 6px; }
.about-intro .lead, .about-en .lead {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600;
  font-size: 23px; color: var(--ink); margin: 0 0 18px;
}
.prose { max-width: none; margin: 0 auto; }
.prose p {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500;
  font-size: 22px; line-height: 1.55; color: var(--ink); margin: 0 0 16px;
}
.prose-en p { color: var(--ink-2); }
.about-cta { margin-top: 64px; }
/* Secciones de la home cuyo botón debe quedar pegado al separador, no al texto */
#estilo, #bodas, #servicios-teaser { padding-bottom: 20px; }

/* Foto Sandra y Miguel — banner a ancho completo, arriba del todo (responsive) */
.about-hero { margin: 0; width: 100vw; margin-left: calc(50% - 50vw); position: relative; }
.about-hero img {
  width: 100%; height: auto; display: block;   /* foto entera, sin recortar cabezas; responsive */
}
.about-hero figcaption {
  text-align: center; font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 18px; color: var(--ink-3); padding: 12px 18px 0;
}

/* ── Tira de venues full-bleed (sangra a todo el ancho del viewport) ── */
.venue-strip-section { padding-top: 24px; padding-bottom: 0; }
.venue-strip-section.top { padding-top: 0; }
.venue-strip-section .eyebrow { margin-top: 6px; }
.venue-strip {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  width: 100vw; margin-left: calc(50% - 50vw); margin-top: 20px;
}
.venue-strip-section.top .venue-strip { margin-top: 0; }
.venue-strip .cell {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--paper-3);
}
.venue-strip .cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.venue-strip .cell.video-lite { cursor: pointer; }
.venue-strip .cell.video-lite:hover img { transform: scale(1.05); }
.venue-strip .cell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.venue-strip .cell .play-btn { width: 44px; height: 44px; }

/* Título con separadores tipo "/" en color corporativo — pequeño, va sobre el slider */
.slash-title { font-size: clamp(17px, 3vw, 22px); line-height: 1.3; margin-bottom: 4px; }
.slash-title span { color: var(--brand); font-style: normal; font-weight: 400; padding: 0 5px; }

/* ── Slide de vídeos (pequeño, con reproductor, deslizable) — Nosotros + Contacto ── */
.slider-section {
  padding-top: 26px;
  /* franja limpia: tapa el patrón blueprint del fondo detrás del título y el slider */
  background: linear-gradient(180deg, rgba(231,216,184,0) 0,
              var(--paper-2) 24px, var(--paper-2) calc(100% - 24px), rgba(231,216,184,0) 100%);
}
.slider-section.top { padding-top: 0; }      /* contacto: el slide va arriba, pegado al header */
.video-slider {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 16px 18px 18px; margin: 12px auto 0; max-width: 1180px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--brand) transparent;
}
.slider-section.top .video-slider { margin-top: 0; padding-top: 18px; }
.video-slider::-webkit-scrollbar { height: 8px; }
.video-slider::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 8px; }
.video-slider .cell {
  flex: 0 0 80%; max-width: 320px; aspect-ratio: 16 / 9; scroll-snap-align: center;
  position: relative; overflow: hidden; border-radius: 10px;
  box-shadow: var(--shadow); background: var(--paper-3); cursor: pointer;
}
.video-slider .cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s; }
.video-slider .cell:hover img { transform: scale(1.05); }
.video-slider .cell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-slider .play-btn {
  position: absolute; left: 50%; top: 50%; bottom: auto;
  transform: translate(-50%, -50%); width: 46px; height: 46px;
}
.video-slider .cell:hover .play-btn { transform: translate(-50%, -50%) scale(1.08); }
.video-slider .cell.playing .play-btn, .video-slider .cell.playing .cell-cap { display: none; }
.video-slider .cell-cap {
  position: absolute; left: 10px; bottom: 8px; z-index: 2;
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

/* ── Formulario de contacto ── */
.contact-lead {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600;
  font-size: 22px; max-width: 620px; margin: 0 auto 28px; color: var(--ink-2);
}
.contact-form { max-width: 760px; margin: 0 auto; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.field label {
  display: block; font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.field input, .field textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: 16px; transition: 0.15s;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(123,168,154,0.18);
}
.field textarea { min-height: 130px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { margin-top: 22px; text-align: center; }
.form-note { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; }
.form-ok, .form-err { padding: 16px 18px; border-radius: 12px; margin: 0 auto 22px; max-width: 760px; }
.form-ok { background: rgba(47,122,31,0.10); border: 1px solid rgba(47,122,31,0.40); color: var(--ok); }
.form-err { background: rgba(176,48,32,0.08); border: 1px solid rgba(176,48,32,0.40); color: var(--danger); }

@media (min-width: 768px) {
  p { font-size: 19px; }
  .about-intro h1 { font-size: 50px; }
  .about-intro .lead, .about-en .lead { font-size: 26px; }
  .prose p { font-size: 21px; }
  .venue-strip { grid-template-columns: repeat(4, 1fr); }
  .venue-strip .cell { aspect-ratio: 4 / 5; }
  .video-slider .cell { flex-basis: 300px; max-width: 300px; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .form-grid .full { grid-column: 1 / -1; }
}

/* ============================================================
   TARJETAS DE BODA CLICABLES (home) + LANDINGS DE BODA
   ============================================================ */
a.boda-card { transition: transform .18s, box-shadow .18s, border-color .18s; }
a.boda-card:hover {
  border-color: var(--brand); transform: translateY(-4px);
  box-shadow: 0 16px 34px -16px rgba(43,36,33,0.45);
}
.boda-thumb img { transition: transform .45s ease; }
a.boda-card:hover .boda-thumb img { transform: scale(1.06); }
.ver-mas {
  display: inline-block; margin-top: 2px;
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--brand-2); transition: color .15s;
}
a.boda-card:hover .play-btn { transform: scale(1.08); }

/* Landing de boda: vídeo grande arriba + texto SEO limpio (deco solo a los lados) */
.boda-hero-wrap { padding-top: 22px; padding-bottom: 0; text-align: center; }
.boda-hero { max-width: 1040px; margin: 12px auto 0; padding: 0 18px; }
.boda-hero .frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px;
  overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); background: var(--paper-3);
}
.boda-hero .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.boda-hero .video-lite { cursor: pointer; }
.boda-hero .video-lite:hover img { transform: scale(1.03); }
.boda-hero iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.boda-hero .play-btn { left: 50%; top: 50%; bottom: auto; transform: translate(-50%,-50%); width: 60px; height: 60px; }
.boda-hero .video-lite:hover .play-btn { transform: translate(-50%,-50%) scale(1.08); }
.boda-hero .trailer-soon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--ink-2); font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
}
.boda-hero .trailer-soon .dot { color: var(--danger); }

.boda-landing { text-align: center; }
.boda-landing h1 { font-size: 29px; margin-bottom: 14px; }
.boda-prose { max-width: 760px; margin: 0 auto; }
.boda-prose .lead-p { font-weight: 600; color: var(--ink); }
.about-cta.center { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (min-width: 768px) {
  .boda-landing h1 { font-size: 40px; }
}

/* ── FAQ (home / AEO) ─────────────────────────────────────── */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(250, 246, 239, 0.45);
  padding: 2px 18px;
}
.faq-item summary {
  cursor: pointer; list-style: none; padding: 14px 28px 14px 0; position: relative;
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  font-weight: 600; font-size: 1.25rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-family: "JetBrains Mono", monospace; font-size: 1.2rem; color: var(--brand-2);
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p {
  margin: 0 0 16px; color: var(--ink-2); line-height: 1.6;
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.08rem;
}
.bodas-index-head { padding-top: 8px; }

/* ── Servicios ───────────────────────────────────────────── */
.serv-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.serv-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 26px 24px; box-shadow: var(--shadow);
}
.serv-ico { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; color: var(--brand-2); margin-bottom: 12px; }
.serv-ico svg { width: 30px; height: 30px; }
.serv-card h3 { margin: 0 0 8px; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.4rem; color: var(--ink); }
.serv-card p { margin: 0; color: var(--ink-2); line-height: 1.55; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.08rem; }
@media (min-width: 760px) { .serv-grid { grid-template-columns: repeat(2, 1fr); } }

/* Intros de sección de la HOME al tamaño/contraste de lectura de Nosotros (.prose) */
#estilo > p, #bodas > p, #servicios-teaser > p {
  font-size: 22px; line-height: 1.55; color: var(--ink);
}

/* ===================================================================
   ANIMACIÓN DECOS — PRUEBA REVERSIBLE (v2)
   Revertir: borrar este bloque + la regla body::before, y devolver el
   patrón al background de body. Backup: outputs/bm.css.bak_20jun_preanim
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Flicker de film en los SÍMBOLOS del fondo (ISO, 1/100, cámaras, REC, cuadritos) */
  /* Pico de opacidad bajado a .5 (símbolos más transparentes), MISMA frecuencia y fuerza de flicker */
  @keyframes bm-flicker {
    0%   { opacity: .5; }
    8%   { opacity: .06; }  12%  { opacity: .5; }
    19%  { opacity: .3; }   23%  { opacity: .5; }
    47%  { opacity: .5; }   51%  { opacity: .03; }  55% { opacity: .5; }
    67%  { opacity: .22; }  71%  { opacity: .5; }
    87%  { opacity: .1; }   91%  { opacity: .5; }
    100% { opacity: .5; }
  }
  body::before { animation: bm-flicker .5s steps(1, end) infinite; }

  /* Trazos de los decos reconstruyéndose */
  @keyframes bm-draw { to { stroke-dashoffset: -120; } }
  .deco svg path { stroke-dasharray: 5 7; animation: bm-draw 5s linear infinite; }

  /* Círculos de los decos dando vueltecitas (dash giratorio) */
  @keyframes bm-spin { to { transform: rotate(360deg); } }
  .deco svg circle {
    stroke-dasharray: 4 6; transform-box: fill-box; transform-origin: center;
    animation: bm-spin 9s linear infinite;
  }

  /* Separadores: líneas estirándose/encogiéndose (MÁS agresivo) + cruz central girando */
  @keyframes bm-stretch { 0%,100% { transform: scaleX(.4); } 50% { transform: scaleX(1); } }
  .sep-line { transform-origin: center; animation: bm-stretch 2.4s ease-in-out infinite; }
  .sep-core { transform-box: fill-box; transform-origin: center; animation: bm-spin 16s linear infinite; }

  /* Logo de la home: ráfaga de flicker (~1s) y pausa (~2s), en bucle */
  @keyframes bm-logo-flicker {
    0%   { opacity: 1; }
    2.5% { opacity: .12; }  4.5% { opacity: 1; }
    7%   { opacity: .55; }  9%   { opacity: 1; }
    12%  { opacity: .08; }  14%  { opacity: 1; }
    16%  { opacity: .5; }   19%  { opacity: 1; }
    20%, 100% { opacity: 1; }
  }
  .hero-logo img { animation: bm-logo-flicker 5s steps(1, end) infinite; }
}

/* Testimonio nativo en landing (reseña real, sin enlace de salida) */
.boda-testi{max-width:680px;margin:26px auto 0;padding:18px 26px;border-left:3px solid #7ba89a;background:rgba(123,168,154,.07);text-align:left;border-radius:6px}
.boda-testi p{font-style:italic;font-size:19px;line-height:1.55;margin:0 0 10px}
.boda-testi cite{font-style:normal;font-weight:600;font-size:13px;letter-spacing:.03em;color:#8a8a8a;text-transform:uppercase}