/* custom.css — capa de pulido visual (no es Tailwind compilado). Se carga DESPUÉS de main.css. */

/* 1) HOME: aire entre el hero y el primer bloque de texto */
body.home article section:nth-of-type(2){ padding-top: clamp(6rem, 11vw, 11rem); }

/* 2) TARJETAS SUAVES + CARGA SUAVE */
.fvm-wedding,
.gal-item{
  border-radius: 14px;
  box-shadow: 0 18px 45px -28px rgba(30,30,30,.5);
}
/* "Tres pilares": cada pilar como tarjeta suave */
.fvm-pillar-card{
  background: #faf6ef;
  border: 1px solid rgba(30,30,30,.06);
  border-radius: 18px;
  padding: 1.6rem 1.8rem;
  box-shadow: 0 20px 50px -30px rgba(30,30,30,.4);
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s cubic-bezier(.2,.7,.2,1);
}
.fvm-pillar-card:hover{ transform: translateY(-5px); box-shadow: 0 30px 60px -32px rgba(30,30,30,.45); }
/* carga (reveal) más suave */
.vm-reveal{ transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); }

/* 3) MURO de espacios (home): espaciado UNIFORME (gap = marco exterior), cabecera intacta */
body.home .vm-bodas-mosaic{ --fvm-wall-gap: clamp(0.5rem, 1.4vw, 1rem); }
/* gap idéntico en H y V + muro a sangre del CONTENEDOR (lados = gap) */
body.home .vm-bodas-mosaic .container > .grid:last-child{
  gap: var(--fvm-wall-gap);
  margin-left: calc(var(--fvm-wall-gap) - 1.25rem);
  margin-right: calc(var(--fvm-wall-gap) - 1.25rem);
}
/* marco ARRIBA (cabecera → muro) = gap */
body.home .vm-bodas-mosaic .container > .grid:first-child{ margin-bottom: var(--fvm-wall-gap); }
/* marco ABAJO = gap */
body.home .vm-bodas-mosaic{ padding-bottom: var(--fvm-wall-gap); }

/* 4) CTA "Ven a verla": foto de la finca en blanco y negro, de fondo suave */
.fvm-ctafull img{ filter: grayscale(100%) contrast(1.03) brightness(.96); }
.fvm-ctafull .fvm-ctafull-ov{ background: linear-gradient(180deg, rgba(30,30,30,.5), rgba(30,30,30,.72)); }

/* 5) HOME: fundir "Ven a verla" con el footer (sin franja crema) pero con AIRE entre los botones y el footer */
body.home footer{ margin-top: 0; }
body.home article section:last-of-type{ padding-bottom: clamp(3.5rem, 6vw, 6rem); }

/* =========================================================
   RESPONSIVE — ajustes por tamaño de pantalla
   (escritorio ≥1280 · portátil 1024–1279 · tablet 768–1023 · móvil ≤767)
   ========================================================= */

/* Galería: 2 col (móvil) · 3 (tablet/portátil) · 4 (pantallas grandes) */
@media (min-width: 1280px){
  #gal-grid .gal-item{ grid-column: span 3 / span 3; }
}

/* Tablet vertical: equipo y rejillas de 4 a 2 columnas para que respiren */
@media (min-width: 768px) and (max-width: 1023px){
  #gal-grid .gal-item{ grid-column: span 4 / span 4; }     /* 3 col en tablet */
}

/* Smartphones: ritmo vertical más compacto y aire de home razonable */
@media (max-width: 640px){
  section.py-24{ padding-top: 3.5rem; padding-bottom: 3.5rem; }
  section.py-20{ padding-top: 3rem;   padding-bottom: 3rem; }
  body.home article section:nth-of-type(2){ padding-top: 4rem; }
  .container{ padding-left: 1.1rem; padding-right: 1.1rem; }
  /* titulares enormes que no desborden en móviles estrechos */
  h1.font-display{ word-break: break-word; }
}

@media (prefers-reduced-motion: reduce){
  .fvm-pillar-card{ transition: none; }
  .vm-reveal{ transition: none; }
}

/* 6) LOGO: wordmark "Finca Villa Mercedes" en negro sobre transparente.
   En la cabecera oscura (hero de home y espacios) debe verse en blanco.
   Sobrescribe la regla compilada que lo dejaba en negro (invert + brightness:0). */
.fvm-header.is-dark .fvm-logo{ filter: invert(1); opacity: .95; }

/* 7) GALERÍA: filtros en una sola columna a la derecha con desplegables
   (ocupan mucho menos que las filas de chips). Rejilla a la izquierda. */
.gal-aside{ margin-bottom: 2rem; }
.fvm-select{
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%;
  background-color: #fff;
  color: #1e1e1e;
  border: 1px solid rgba(30,30,30,.18);
  border-radius: 9px;
  padding: .55rem 2.2rem .55rem .8rem;
  font-size: .9rem;
  line-height: 1.2;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e1e1e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.fvm-select:hover{ border-color: rgba(30,30,30,.35); }
.fvm-select:focus{ outline: none; border-color: #4F6B2E; box-shadow: 0 0 0 3px rgba(79,107,46,.15); }
/* Escritorio: rejilla flexible a la izquierda + columna de filtros fija y sticky a la derecha */
@media (min-width: 1024px){
  .gal-layout{ display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 2.5rem; align-items: start; }
  .gal-main{ order: 1; min-width: 0; }
  .gal-aside{ order: 2; position: sticky; top: 7rem; margin-bottom: 0; }
}

/* 8) BLOQUE MAPA / CÓMO LLEGAR (página de contacto) */
.fvm-map-grid{ display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 768px){ .fvm-map-grid{ grid-template-columns: 5fr 7fr; gap: 3rem; } }
.fvm-map-address{ font-style: normal; }
.fvm-map-dirs{ list-style: none; margin: 0 0 2rem; padding: 0; }
.fvm-map-dirs li{ position: relative; padding-left: 1.4rem; margin-bottom: .7rem; color: rgba(30,30,30,.75); line-height: 1.6; }
.fvm-map-dirs li::before{ content: ""; position: absolute; left: 0; top: .65rem; width: .42rem; height: .42rem; border-radius: 50%; background: #4F6B2E; }
.fvm-map-frame{ position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 14px; box-shadow: 0 26px 60px -34px rgba(30,30,30,.5); }
.fvm-map-frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fvm-map-placeholder{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(30,30,30,.05); border: 1px dashed rgba(30,30,30,.2); color: rgba(30,30,30,.45); font-size: .9rem; text-align: center; padding: 1rem; }

/* 9) LIGHTBOX de la galería de cada boda real (ficha) con anterior/siguiente */
.vmb-gitem, .gal-item{ cursor: zoom-in; padding: 0; border: 0; background: none; font: inherit; color: inherit; }
.vmb-lb{ position: fixed; inset: 0; z-index: 90; background: rgba(30,30,30,.96); display: none; align-items: center; justify-content: center; padding: 1.5rem; }
.vmb-lb.is-open{ display: flex; }
.vmb-lb-img{ max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 30px 80px -30px rgba(0,0,0,.85); }
.vmb-lb button{ position: absolute; background: transparent; border: 0; color: #f7f2e8; cursor: pointer; padding: .5rem; line-height: 0; opacity: .82; transition: opacity .2s; }
.vmb-lb button:hover, .vmb-lb button:focus-visible{ opacity: 1; outline: none; }
.vmb-lb-close{ top: 1.25rem; right: 1.25rem; }
.vmb-lb-prev{ left: 1.25rem; top: 50%; transform: translateY(-50%); }
.vmb-lb-next{ right: 1.25rem; top: 50%; transform: translateY(-50%); }
.vmb-lb-counter{ position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); color: #f7f2e8; opacity: .7; font-size: .8rem; letter-spacing: .12em; }
@media (max-width: 640px){
  .vmb-lb-prev{ left: .35rem; } .vmb-lb-next{ right: .35rem; }
  .vmb-lb-img{ max-width: 96vw; max-height: 78vh; }
}

/* 10) CONTACTO DIRECTO: teléfono/WhatsApp/email como tarjetas clicables */
.fvm-contact-methods{ display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 42rem; }
@media (min-width: 640px){ .fvm-contact-methods{ grid-template-columns: 1fr 1fr; } }
.fvm-contact-card{ border: 1px solid rgba(30,30,30,.14); border-radius: 14px; padding: 1.1rem 1.3rem; background: #faf6ef; }
.fvm-contact-label{ font-size: .7rem; text-transform: uppercase; letter-spacing: .22em; color: rgba(30,30,30,.5); margin-bottom: .35rem; }
.fvm-contact-value{ font-size: 1.3rem; line-height: 1.2; }
.fvm-contact-value a{ color: #1e1e1e; text-decoration: none; transition: color .2s; }
.fvm-contact-value a:hover, .fvm-contact-value a:focus-visible{ color: #4F6B2E; }
.fvm-contact-wa{ display: inline-block; margin-top: .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: #4F6B2E; transition: color .2s; }
.fvm-contact-wa:hover, .fvm-contact-wa:focus-visible{ color: #3a5022; }

/* 11) Bodas reales (archivo): scrim legible bajo el texto superpuesto de las tarjetas.
   Mismo enfoque que el hero (degradado de brand-carbon), afinado para texto pequeño. */
.fvm-rb-scrim{
  background: linear-gradient(to top,
    rgba(30,30,30,.92) 0%,
    rgba(30,30,30,.75) 20%,
    rgba(30,30,30,.32) 45%,
    rgba(30,30,30,0)   72%);
}
/* Sombra sutil de refuerzo sobre cualquier foto (se hereda a nombre y a la línea de fecha) */
.fvm-rb-overlay{ text-shadow: 0 1px 3px rgba(30,30,30,.6), 0 2px 16px rgba(30,30,30,.4); }

/* 12) Info en las fotos: chip de categoría (rejilla, al pasar el ratón) + barra en el lightbox */
.gal-chip{
  position: absolute; left: .55rem; bottom: .55rem; z-index: 2;
  font-size: .6rem; text-transform: uppercase; letter-spacing: .16em;
  color: #f7f2e8; background: rgba(30,30,30,.62);
  padding: .28rem .55rem; border-radius: 999px;
  opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; pointer-events: none;
}
.gal-item:hover .gal-chip, .gal-item:focus-visible .gal-chip{ opacity: 1; transform: none; }
/* Barra de info al pie del lightbox (categoría/contexto + descripción del alt) */
.vmb-lb-caption{
  position: absolute; left: 50%; bottom: 2.9rem; transform: translateX(-50%);
  max-width: min(90vw, 640px); text-align: center; color: #f7f2e8; pointer-events: none;
}
.vmb-lb-caption .vmb-lb-tag{ display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .2em; color: #b98b3a; margin-bottom: .25rem; }
.vmb-lb-caption .vmb-lb-desc{ display: block; font-size: .92rem; line-height: 1.45; opacity: .9; }
/* Oscurecido sutil al pie del lightbox (detrás del texto) para que se lea sobre cualquier foto */
.vmb-lb-scrim{ position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0)); pointer-events: none; }