/* Google Fonts: Cinzel · Great Vibes · Poltawski Nowy · Roboto */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Great+Vibes&family=Poltawski+Nowy:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Roboto:wght@300;400;500;600&display=swap');

/* Fuentes locales — Rusillaserif (para títulos hero) */
@font-face {
  font-family: 'Rusillaserif';
  src: url('../fonts/Rusillaserif-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rusillaserif';
  src: url('../fonts/Rusillaserif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* =====================
   CUSTOM PROPERTIES
   ===================== */
:root {
  --dark:        #0a0d18;
  --dark-2:      #0f1220;
  --dark-3:      #161928;
  --cream:       #f0ebe3;
  --cream-dim:   rgba(240, 235, 227, 0.72);
  --gold:        #c4a35a;
  --white:       #ffffff;
  --light:       #fafaf8;
  --light-2:     #f3f0ec;

  --ff-logo:    'Cinzel', serif;
  --ff-hero:    'Rusillaserif', serif;
  --ff-display: 'Poltawski Nowy', serif;
  --ff-script:  'Great Vibes', cursive;
  --ff-ui:      'Roboto', sans-serif;

  --nav-h: 150px;
  --ease:  cubic-bezier(.4,0,.2,1);
}

.extra{

  line-height: 18px!important;
}

/* =====================
   RESET & BASE
   ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-display);
  font-weight: 300;
  color: var(--cream);
  background: var(--dark);
  overflow-x: hidden;
  line-height: 1;
}

body.page-light {
  background: var(--light);
  color: var(--dark);
}

img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }
button, input, select, textarea { font-family: inherit; }

/* =====================
   HEADER / NAV
   ===================== */
.site-header {
  position: fixed;
  height: 180px;
  inset: 0 0 auto 0;
  z-index: 200;
  padding: 0px 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: background 0.4s var(--ease);
}

.site-header.hdr-dark {
  background: linear-gradient(180deg, rgba(10,13,24,0.92) 0%, rgba(10,13,24,0) 100%);
}

.site-header.hdr-light {
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

/* top row: language switch */
.hdr-top {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.lang-btn {
  font-family: var(--ff-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--cream);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hdr-light .lang-btn { color: var(--dark); }

/* logo SVG */
.logo {
  display: inline-block;
  text-decoration: none;
  line-height: 0;
}

.logo-img {
  width: 200px;
  height: auto;
  display: block;
  transition: filter 0.35s var(--ease);
}

/* header oscuro → sin filtro (el SVG ya tiene trazos blancos) */
.hdr-dark .logo-img {
  filter: none;
}

/* header claro → logo oscuro original */
.hdr-light .logo-img {
  filter: none;
}

/* nav links */
.site-nav {
  display: flex;
  gap: 44px;
  align-items: center;
  margin-top: 15px;
}

.site-nav a {
  font-family: var(--ff-display);
  --fs-md: clamp(1.33rem, 0.46vi + 1.21rem, 1.58rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}

.hdr-light .site-nav a { color: var(--dark); }

.site-nav a:hover,
.site-nav a.active { border-bottom-color: currentColor; }

/* =====================
   HAMBURGER BUTTON
   — Añadido 2026-05-18
   ===================== */
.hamburger {
  display: none;          /* Oculto en desktop; se activa con media query ≤900px */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 301;
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--cream);
  border-radius: 1px;
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease), width 0.25s var(--ease);
  transform-origin: center;
}

/* Animación hamburguesa → X al abrir */
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* =====================
   SCROLL-TO-TOP BUTTON
   ===================== */
.scroll-top {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 190;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, background .25s;
}

.scroll-top.visible { opacity: 1; pointer-events: auto; }
.scroll-top:hover   { background: rgba(255,255,255,.22); }

.scroll-top svg {
  width: 15px; height: 15px;
  stroke: var(--white);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =====================
   FOOTER
   ===================== */
/* ==================================================
   FOOTER BASE (Tema Oscuro por defecto)
   ================================================== */
.site-footer {
  padding: 50px 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;

}

.footer-links {

  display: flex;
  gap: 28px;
  list-style: none; /* Elimina los puntos del <ul> */
  padding: 0;
  margin: 0;

}

.footer-links a {
  font-family: var(--ff-ui);
  font-size: 20px;
  letter-spacing: 0.1em;
  color: var(--cream-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--cream);
}

.footer-social {
  display: flex;
  gap: 15px;
  height: 50px;
}

.footer-social a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white; /* El SVG heredará este color */
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.footer-social a:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.2);
}

.footer-social svg {
  width: 25px;
  height: 25px;
  fill: currentColor; /* Toma el color de su contenedor (<a>) */
}



/* =====================
   PAGE HERO (BODAS)
   ===================== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Placeholder gradient — replace with real image: background-image: url('../images/hero-bodas.jpg'); */
  background-image: linear-gradient(135deg, #1a1f3a 0%, #2d2040 40%, #0d1020 100%);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10,13,24,.55) 0%,
    rgba(10,13,24,.25) 45%,
    rgba(10,13,24,.65) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 40px;
}

.hero-title {
  font-family: var(--ff-hero);
  font-size: clamp(90px, 14vw, 240px);
  font-weight: 300;
  letter-spacing: .12em;
  color: var(--white);
  line-height: 1;
}

/* =====================
   SECTION WRAPPERS
   ===================== */
.section      { padding: 60px 40px; }
.section-sm   { padding: 48px 40px; }

.inner        { max-width: 1350px;  margin: 0 auto; }
.inner-wide   { max-width: 1440px; margin: 0 auto; }
.inner-mid    { max-width: 1050px;  margin: 0 auto; }

/* =====================
   BODAS — TEXT INTRO
   ===================== */
.intro-text {
  font-size: clamp(1.33rem, 0.46vi + 1.21rem, 1.58rem);
  line-height: 40px;
  letter-spacing: 1.5px;
  color: var(--cream-dim);
  font-weight: 300;
  text-align: center;
}

.intro-text + .intro-text { margin-top: 24px; }

/* =====================
   BODAS — QUOTE BAND
   ===================== */
.quote-band {
  padding: 60px 40px 80px;
  text-align: center;

}

.quote-main {
  font-family: var(--ff-display);
  font-size: clamp(32px, 5.5vw, 62px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: .04em;
  line-height: 1.15;
  color: var(--cream);
}

.quote-svg {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto 40px;
  filter: brightness(0.9);
}

.quote-sub {
  margin-top: 32px;
  font-family: var(--ff-ui);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--cream-dim);
  line-height: 2.2;
}

/* =====================
   BODAS — SERVICES GRID
   ===================== */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.svc-item {
  position: relative;
  aspect-ratio: 5/4;
  overflow: hidden;
}

.svc-bg {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform .7s var(--ease);
}

.svc-item:hover .svc-bg { transform: scale(1.06); }

.svc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,13,24,.82) 0%, rgba(10,13,24,.18) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
}

.svc-title {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 10px;
}

.svc-list li {
  font-family: var(--ff-ui);
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.7);
  line-height: 2;
}

/* =====================
   BODAS — BIG STATEMENT
   ===================== */
.statement {
  position: relative;
  padding: 100px 40px;
  text-align: center;
  overflow: hidden;
}

.statement-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  transform: scale(1.05);
}

.statement-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 13, 24, 0.78);
}

.statement-content {
  position: relative;
  z-index: 1;
}

.stmt-main {
  font-family: var(--ff-display);
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.25;
  color: var(--white);
  text-transform: uppercase;
  max-width: 750px;
  margin: 0 auto;
}

.stmt-note {
  margin-top: 20px;
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 300;
  font-style: italic;
  color: var(--cream-dim);
}

/* =====================
   BODAS — THE EXPERIENCE
   ===================== */
.experience {
  background: var(--cream);
  padding: 80px 40px;
}

.experience-title {
  font-family: var(--ff-logo);
  font-size: clamp(22px, 3.5vw, 38px);
  font-weight: 600;
  letter-spacing: .3em;
  text-align: center;
  color: var(--dark);
  margin-bottom: 56px;
  text-transform: uppercase;
}

.exp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.exp-item h3 {
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(10,13,24,.14);
  margin-bottom: 14px;
}

.exp-num {
  font-family: var(--ff-ui);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .1em;
  color: rgba(10,13,24,.45);
  vertical-align: middle;
  margin-right: 4px;
}

.exp-item p {
  font-family: var(--ff-ui);
  font-size: 11.5px;
  line-height: 1.75;
  color: rgba(10,13,24,.62);
  font-weight: 300;
}

/* =====================
   BODAS — CTA FINAL
   ===================== */
.cta-section {
  background: var(--cream);
  padding: 60px 40px 80px;
  text-align: center;
  border-top: 1px solid rgba(10,13,24,.08);
}

.cta-section p {
  font-family: var(--ff-display);
  font-size: 16px;
  line-height: 1.9;
  color: rgba(10,13,24,.65);
  max-width: 680px;
  margin: 0 auto 32px;
}

.btn-dark {
  display: inline-block;
  font-family: var(--ff-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--dark);
  padding: 14px 44px;
  border: none;
  cursor: pointer;
  transition: background .25s;
}

.btn-dark:hover { background: var(--dark-3); }

/* =====================
   GALERÍA — PAGE HEADER
   ===================== */
.gal-header {
  padding: calc(var(--nav-h) + 36px) 40px 36px;
  text-align: center;
}

.gal-page-title {
  font-family: var(--ff-hero);
  font-size: clamp(64px, 12vw, 148px);
  font-weight: 300;
  color: var(--white);
  line-height: .95;
  letter-spacing: -.01em;
}

/* =====================
   GALERÍA — LOCATION GRID
   ===================== */
.loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 85%;
  margin: auto;

}

.loc-card {
  position: relative;
  aspect-ratio: 9/10;
  overflow: hidden;
  cursor: pointer;
  display: block;
  text-decoration: none;
}

.loc-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform .7s var(--ease);
}

.loc-card:hover .loc-bg { transform: scale(1.05); }

.loc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,13,24,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s;
}

.loc-card:hover .loc-overlay { background: rgba(10,13,24,.36); }

.loc-name {
  font-family: var(--ff-display);
  font-size: clamp(2.08rem, 1.34vi + 1.74rem, 2.81rem);
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--white);
  text-transform: uppercase;
  /*Sombra de texto */
  text-shadow: 0px 10px 12px rgba(0, 0, 0, 1);
  /*Transición sincronizada con el fondo (puedes ajustar el tiempo si quieres) */
  transition: transform 0.7s var(--ease);
}

/* 3. Al hacer hover en la tarjeta, el fondo se reduce a 0.96 */
.loc-card:hover .loc-bg {
  transform: scale(0.98);
}

/* 4. Al hacer hover en la tarjeta, el texto también se reduce a 0.96 */
.loc-card:hover .loc-name {
  transform: scale(0.98);
}

/* 5. El overlay oscuro se mantiene igual (ya lo tenías) */
.loc-card:hover .loc-overlay {
  background: rgba(10, 13, 24, 0.36);
}



/* =====================
   GALERÍA — CAROUSEL VIEW
   ===================== */
.carousel-view {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--nav-h) + 20px) 0 80px;
  min-height: 100vh;
}

.carousel-view.active { display: flex; }

/* Divisor  ───── ALICANTE ─────  como en la referencia */
.carousel-loc-label {
  font-family: var(--ff-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cream-dim);
  padding-right: .3em;
  width: 90%;
  max-width: 500px;
  text-align: center;
  /* margin-bottom: 36px; */
  /* 👇 NUEVO: Centrado horizontal y margen ajustado */
  margin: 0 auto 36px auto;
  display: flex;
  align-items: center;
  gap: 16px;

}

.carousel-loc-label::before,
.carousel-loc-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.18);
}

.carousel-wrap {
  position: relative;
  width: 100%;
  max-width: 600px;

  /* 👇 NUEVO: Para que la foto se mantenga al centro de la pantalla */
  margin: 0 auto;
}

.carousel-img-box {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--dark-3);
}

.carousel-img-box img,
.carousel-img-box .c-img {
  width: 100%; height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

.c-img {
  /* CSS-only placeholder while real images are added */
  display: block;
  background-size: cover;
}

.car-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--cream);
  font-family: var(--ff-display);
  font-size: 32px;
  font-weight: 300;
  cursor: pointer;
  padding: 8px;
  transition: color .2s;
  z-index: 2;
  line-height: 1;
  user-select: none;
}

.car-btn:hover { color: var(--white); }
.car-btn.prev { left: -52px; }
.car-btn.next { right: -52px; }

.car-counter {
  margin-top: 20px;
  font-family: var(--ff-ui);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--cream-dim);
}

.grid-view  { display: block; }
.grid-view.hidden { display: none; }



.carousel-view .gal-header {
  display: none;
}
/* =====================
   QUIÉNES SOMOS
   ===================== */
.about-head {
  padding: calc(var(--nav-h) + 24px) 40px 48px;
  text-align: center;

}

.script-title {
  font-family: var(--ff-hero);
  font-size: clamp(64px, 11vw, 130px);
  color: var(--white);
  line-height: 1;
  font-weight: 400;
}

.about-founder-wrap {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 40px 64px;

}

.about-photo {
  width: 100%;
  aspect-ratio: 4/3;
  background-size: 90%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../images/team/grupo.jpg');
  filter: grayscale(100%);
}

.founder-caption {
  margin-top: 16px;
  text-align: center;
}

.founder-caption strong {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(0.85rem, 0.07vi + 0.83rem, 0.89rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream);
}

.founder-caption span {
  font-family: var(--ff-ui);
 font-size: clamp(0.85rem, 0.07vi + 0.83rem, 0.89rem);
  letter-spacing: .1em;
  color: var(--cream-dim);
}

.about-bio {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 40px 72px;
}

.about-bio p {
  font-size: clamp(1.33rem, 0.46vi + 1.21rem, 1.58rem);
  line-height: 1.9;
  color: var(--cream-dim);
  font-weight: 300;
  text-align: center;
  margin-bottom: 50px;
}

.about-bio p + p { margin-top: 20px; }

/* Team */
.team-section {
  padding: 72px 40px;
  text-align: center;
  background: var(--dark-2);
}

/* Encabezados de sección en script (Quiénes Somos) */
.section-heading {
  font-family: var(--ff-hero);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 400;
  color: var(--white);
  margin-bottom: 56px;
  line-height: 1;
  border-bottom: solid 1px var(--cream);
  max-width: 700px;
  margin: auto;

}

.team-row {
  display: flex;
  justify-content: center;
  gap: 120px;
  flex-wrap: wrap;
  max-width: 880px;
  margin: 0 auto;

}

.team-card {
  width: 200px;
  text-align: center;
}

.team-avatar {
  width: 200px; height: 200px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background-size: cover;
  background-position: top center;
  overflow: hidden;
  filter: grayscale(1);
}

/* Individual team photo placeholders */
.team-avatar.av-ana      { background-image: url('../images/team/Ana.jpg'); }
.team-avatar.av-maria    { background-image: url('../images/team/Maria.jpg'); }
.team-avatar.av-virginia { background-image: url('../images/team/Concha.png'); }
.team-avatar.av-paula    { background-image: url('../images/team/Paula copia.jpg'); }
.team-avatar.av-isabel   { background-image: url('../images/team/MARIA 2.jpg'); }

.team-name {
  font-family: var(--ff-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 5px;
}

.team-role {
  font-family: var(--ff-ui);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--cream-dim);
}

/* Esencia */
.esencia-section {
  padding: 80px 40px;
  text-align: center;
}

.esencia-list {
  max-width: 380px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.esencia-list li {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  color: var(--cream);
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.esencia-list li:first-child { border-top: 1px solid rgba(255,255,255,.1); }

.esencia-cta {
  padding: 0 40px 80px;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.esencia-cta p {
  font-family: var(--ff-display);
  font-size: 17px;
  line-height: 1.85;
  color: var(--cream-dim);
  font-weight: 300;
}

/* =====================
   UTILIDAD ACCESIBILIDAD
   ===================== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =====================
   CONTACTO PAGE
   ===================== */
.contact-layout {
  display: grid;
  grid-template-columns: 44fr 56fr;   /* 44 / 56 como en la referencia */
  min-height: calc(100vh - var(--nav-h));
  padding-top: var(--nav-h);
  background: var(--light);
}

.contact-photo {
  /* La foto es sticky: siempre visible mientras se desplaza el formulario */
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  background-size: cover;
  background-position: center;
  /* Reemplaza con: background-image: url('images/contact-photo.jpg'); */
}

.contact-form-col {
  padding: 44px 52px 44px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--light);
}

/* Grupos de campo — espaciado ajustado al diseño */
.form-group {
  margin-bottom: 0;
  position: relative;
}

.form-group + .form-group {
  margin-top: 14px;
}

/* Los inputs/textarea usan solo borde inferior; el placeholder ES la etiqueta */
.form-group input,
.form-group textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(10,13,24,.2);
  padding: 6px 0 6px 0;
  font-family: var(--ff-display);
  font-size: 13.5px;
  font-weight: 300;
  color: var(--dark);
  background: transparent;
  outline: none;
  transition: border-color .25s;
  border-radius: 0;
}

/* Placeholder = etiqueta visual del campo */
.form-group input::placeholder,
.form-group textarea::placeholder {
  font-family: var(--ff-display);
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(10,13,24,.52);
  letter-spacing: .01em;
}

.form-group input:focus,
.form-group textarea:focus {
  border-bottom-color: var(--dark);
}

/* Textarea: pequeña, con resize natural */
.form-group textarea {
  resize: vertical;
  min-height: 58px;
  line-height: 1.5;
  display: block;
}

/* Campos numéricos (invitados, presupuesto): mantener spinners nativos */
.form-group input.input-spinner {
  -webkit-appearance: auto;
  appearance: auto;
  -moz-appearance: number-input;
}

/* Forzar que los spinners sean siempre visibles */
.form-group input.input-spinner::-webkit-outer-spin-button,
.form-group input.input-spinner::-webkit-inner-spin-button {
  -webkit-appearance: auto;
  opacity: 1;
  cursor: pointer;
}

.field-note {
  margin-top: 4px;
  font-family: var(--ff-ui);
  font-size: 9px;
  color: rgba(10,13,24,.38);
  letter-spacing: .03em;
  font-style: italic;
}

/* Botón enviar — alineado a la derecha */
.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.btn-submit {
  font-family: var(--ff-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--dark);
  border: none;
  padding: 11px 36px;
  cursor: pointer;
  transition: background .25s;
}

.btn-submit:hover { background: var(--dark-3); }

.form-privacy {
  margin-top: 12px;
  font-family: var(--ff-ui);
  font-size: 9px;
  line-height: 1.65;
  color: rgba(10,13,24,.38);
  max-width: 380px;
}

/* Bloque de dirección con borde izquierdo */
.contact-address {
  margin-top: 36px;
  padding-left: 16px;
  border-left: 3px solid var(--dark);
}

.contact-address .co-name {
  font-family: var(--ff-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 8px;
}

.contact-address p {
  font-family: var(--ff-ui);
  font-size: 11px;
  line-height: 1.9;
  color: rgba(10,13,24,.55);
}


/* ====================================================
   RESPONSIVE COMPLETO — 2026-05-18
   Breakpoints: 1024px · 900px · 768px · 480px
   ==================================================== */

/* ---- 1024px: ajustes de cuadrícula ---- */
@media (max-width: 1024px) {
  .exp-grid { grid-template-columns: 1fr 1fr; }
  /* .grid-servicios responsive → al final del archivo, después del CSS base */
}

/* ---- 900px: activar menú hamburguesa ---- */
@media (max-width: 900px) {
  :root { --nav-h: 70px; }

  /* Header pasa a barra horizontal compacta */
  .site-header {
    height: var(--nav-h);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    gap: 0;
  }

  /* hdr-top → lado derecho de la barra */
  .hdr-top {
    display: flex;
    align-items: center;
    width: auto;
    order: 2;
    justify-content: flex-end;
  }

  .lang-btn  { display: none; }   /* Ocultar idioma en móvil */
  .logo      { order: 1; }
  .logo-img  { width: 130px; }
  .hamburger { display: flex; }   /* Mostrar hamburgesa en móvil */

  /* Nav se convierte en overlay pantalla completa */
  .main-nav {
    position: fixed;
    inset: 0;
    background: rgba(10, 13, 24, 0.97);
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 299;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.4s var(--ease), transform 0.35s var(--ease);
  }

  .main-nav.nav-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Links del nav: verticales, grandes, táctiles */
  .site-nav {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-top: 0;
  }

  .site-nav a {
    font-size: clamp(1.4rem, 5vw, 2.2rem);
    letter-spacing: .25em;
    padding-bottom: 4px;
  }
}

/* ---- 768px: layout de tablet y móvil ---- */
@media (max-width: 768px) {
  /* Grids de galería y servicios → columna única */
  .services-grid,
  .loc-grid { grid-template-columns: 1fr; }

  .loc-grid { width: 95%; }

  /* Contacto → columna única */
  .contact-layout { grid-template-columns: 1fr; }
  .contact-photo {
    position: relative;
    top: auto;
    height: 260px;
  }
  .contact-form-col { padding: 36px 24px; }

  /* The Experience → columna única */
  .exp-grid { grid-template-columns: 1fr; gap: 28px; }

  /* Carrusel: botones más cercanos */
  .car-btn.prev { left: -36px; }
  .car-btn.next { right: -36px; }

  /* ── Equipo ── */
  .team-row    { gap: 36px; }
  .team-avatar { width: 150px; height: 150px; }
  .team-card   { width: 150px; }

  /* ── Sobre nosotras ── */
  .about-bio { padding: 0 20px 48px; }

  /* ── Footer ── */
  .footer-links   { gap: 16px; }
  .footer-links a { font-size: 15px; }

  /* ── Quote band ── */
  .quote-band { padding: 40px 20px 60px; }

  /* ── Intro text: altura de línea fluida ── */
  .intro-text { line-height: 1.8; }

  /* ── Padding horizontal en secciones ── */
  .section, .section-sm { padding-left: 20px; padding-right: 20px; }
}

/* ---- 480px: móvil pequeño ---- */
@media (max-width: 480px) {
  .section, .section-sm { padding-left: 16px; padding-right: 16px; }

  /* Carrusel: botones dentro del viewport */
  .car-btn.prev { left: 4px; }
  .car-btn.next { right: 4px; }
  .carousel-wrap { max-width: calc(100vw - 88px); }

  /* Títulos script más compactos */
  .script-title   { font-size: clamp(36px, 10vw, 64px); }
  .section-heading { font-size: clamp(30px, 8vw, 54px); }

  /* Equipo: 2 por fila máximo */
  .team-row {
    gap: 20px;
    max-width: 100%;
  }
  .team-card   { width: 120px; }
  .team-avatar { width: 120px; height: 120px; }

  /* bodas.php: .textos-inferiores, .manifiesto, etc. → responsive al final del archivo */

  /* Footer apilado verticalmente */
  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* Headers de páginas interiores */
  .gal-header  { padding: calc(var(--nav-h) + 20px) 16px 20px; }
  .about-head  { padding: calc(var(--nav-h) + 14px) 16px 28px; }

  /* Hero y quote */
  .hero-content { padding: 0 16px; }
  .quote-svg    { max-width: 100%; }
  .quote-band   { padding: 32px 16px 48px; }
}

/*----------------------------------------------------------------------------------------------------------*/

/* --- EL CONTENEDOR MAESTRO --- */
.contenedor-boda {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 columnas de igual ancho */
    /* ¡AQUÍ DEFINIMOS TU REGLA DE ALTURAS! */
    grid-template-rows: 70vh 30vh; /* Fila de fotos: 80% de la pantalla. Fila de texto: 20% */
    gap: 10px; /* Separación entre los elementos */
    margin: auto;
    width: 95%;

}

/* --- COMPORTAMIENTO DE LAS FOTOS --- */
.grid-item {
    width: 100%;
    height: 100%;
    overflow: hidden; /* ¡CRUCIAL! Esto hace que la foto se recorte al crecer y no se salga del cuadro */
    background-color: #000; /* Fondo negro de respaldo por si la foto tiene transparencias */

    /* Efecto elegante inicial: una sombra muy sutil */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.5s ease;

}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita que las imágenes se deformen al cambiar de tamaño */
    display: block;

    /* Control de opacidad inicial para el efecto elegante */
    opacity: 0.85;

    /* Transición suave para todos los cambios (escala, opacidad, filtros) */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

/* ─── LOS EFECTOS AL PASAR EL MOUSE (HOVER) ─── */

/* Cuando el usuario pasa el mouse por encima del contenedor... */
.grid-item:hover img {
    /* Tu escala de 1.06 aplicada elegantemente */
    transform: scale(1.06);

    /* La foto cobra vida y se ilumina al 100% */
    opacity: 1;
}

.grid-item:hover {
    /* La sombra se intensifica sutilmente para dar efecto de flotado */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}



/* --- COORDENADAS CON LAS LÍNEAS DEL GRID --- */

.foto-1 {
    grid-column: 1;
    grid-row: 1; /* Se queda en el 80% superior */
}

.foto-2 {
    grid-column: 2;
    grid-row: 1; /* Se queda en el 80% superior */
}

.foto-3 {
    grid-column: 3;
    grid-row: 1 / 3; /* Va desde la línea 1 hasta la 3 (Ocupa el 100% de la altura) */
}

/* EL TEXTO DEBAJO DE LA FOTO 1 Y 2 */
.texto-bloque {

margin: auto;
width: 100%;
grid-column: 1 / 3;
}


.texto-bloque h2 {

    text-align: center;
    color: #ffffff;
    font-family: var(--ff-hero);
    font-weight: 300;
    font-size: 5rem;
    letter-spacing: .5px;
    line-height: .8;
}

.contenedor-boda-inferior {
    display: grid;

    /* ¡Aquí aplicamos tus porcentajes exactos de ancho! */
    grid-template-columns: 28% 28% 43%;

    /* Le damos una altura fija a esta fila para que las 3 midan lo mismo */
    grid-template-rows: 80vh;

    /* Mantenemos el mismo espacio y ancho que el bloque de arriba para que encajen */
    gap: 10px;

    width: 95%;
    margin: 10px auto 0 auto; /* Un pequeño margen de 10px arriba para separarlo del primer bloque */
}

/* Reutilizamos el estilo de las imágenes para que se adapten solas */
.contenedor-boda-inferior .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* --- 2. CUADRÍCULA DE SERVICIOS (GRID DE 5 COLUMNAS) --- */
.grid-servicios {
    margin: auto;
    width: 95%;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columnas exactamente iguales */
    border-top: 1px solid rgba(255, 255, 255, 0.4);    /* Línea horizontal superior */
    border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* Línea horizontal inferior */
    padding: 20px 0;
    margin-bottom: 60px;

}

.columna-servicio {
    padding: 0 25px;
}

/* Líneas verticales separadoras (Evita la última columna) */
.columna-servicio:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.columna-servicio h3 {
  color: #ffffff;
  font-size: clamp(1.33rem, 0.46vi + 1.21rem, 1.58rem);
  letter-spacing: 1.5px;
  font-weight: 300;

    line-height: 1.5;
    font-weight: 300;
}

.columna-servicio p {
  color: #cbd5e1; /* Gris claro de la captura */
  font-size: clamp(1.33rem, 0.46vi + 1.21rem, 1.58rem);
  letter-spacing: 1.5px;
  color: var(--cream-dim);
  font-weight: 300;

    line-height: 1.5;
    font-weight: 300;
}

/* --- 3. TEXTOS INFERIORES CENTRADOS --- */
.textos-inferiores {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 30px; /* Separación uniforme entre los 3 párrafos */
    max-width: 1600px;
    margin: 0 auto;
    font-family: var(--ff-display);
}

.textos-inferiores p{

    font-family: var(--ff-display);
}

.manifiesto {
    color: #cbd5e1; /* Gris claro de la captura */
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.33rem, 0.46vi + 1.21rem, 1.58rem);
    letter-spacing: 3px;
    font-weight: 400;
}

.descripcion {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.33rem, 0.46vi + 1.21rem, 1.58rem);
    line-height: 1.9;
    color: #cbd5e1; /* Gris claro de la captura */
}

.descripcion strong {
    color: #ffffff;
    font-weight: 600;
}

.restriccion {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.33rem, 0.46vi + 1.21rem, 1.58rem);
    letter-spacing: 1.5px;
    line-height: 1.8;
    color: #cbd5e1; /* Gris claro de la captura */
}

.restriccion span {
    display: block;
    margin-top: 10px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: #64748b; /* El texto del final va un tono más apagado */
}

.margen_custom h2{
    margin: 50px auto 40px auto;
    font-size: 7rem;

}

/* ====================================================
   RESPONSIVE — BODAS.PHP — 2026-05-18
   Estas reglas van DESPUÉS del CSS base para que
   los media queries puedan sobrescribir correctamente.
   Grid de imágenes · Sección Experience · Manifesto
   ==================================================== */

/* ---- 1024px: reducir alturas vh en tablet ---- */
@media (max-width: 1024px) {
  .contenedor-boda          { grid-template-rows: 55vh 22vh; }
  .contenedor-boda-inferior { grid-template-rows: 55vh; }
  .grid-servicios           { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 768px: layouts de una columna ---- */
@media (max-width: 768px) {

  /* ── Grid superior → columna única ── */
  .contenedor-boda {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    width: 100%;
    gap: 6px;
  }

  .foto-1, .foto-2 {
    grid-column: 1;
    grid-row: auto;
    height: 72vw;
  }

  .foto-3 {
    grid-column: 1;
    grid-row: auto;
    height: 72vw;
  }

  .texto-bloque {
    grid-column: 1;
    grid-row: auto;
    padding: 28px 20px;
  }

  .texto-bloque h2 {
    font-size: clamp(1.7rem, 7.5vw, 3.2rem);
    line-height: 1.2;
  }

  /* ── Grid inferior → columna única ── */
  .contenedor-boda-inferior {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 72vw);
    width: 100%;
    gap: 6px;
    margin-top: 6px;
  }

  /* ── Título "The ExPerieNce" ── */
  .margen_custom h2 {
    font-size: clamp(2.2rem, 9vw, 4.5rem);
    margin: 32px auto 24px;
  }

  /* ── Grid servicios → 2 columnas ── */
  .grid-servicios {
    grid-template-columns: 1fr 1fr;
    width: 95%;
    padding: 16px 0;
    margin-bottom: 36px;
  }

  /* Reset bordes verticales del desktop, los reponemos selectivamente */
  .columna-servicio:not(:last-child) { border-right: none; }

  /* Separador vertical solo entre las columnas de cada fila (1,3 = izq) */
  .columna-servicio:nth-child(odd):not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }

  /* Separador horizontal entre filas: todos excepto el último */
  .columna-servicio {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .columna-servicio:last-child { border-bottom: none; }

  /* ── Textos manifesto ── */
  .textos-inferiores {
    padding: 0 20px 48px;
    gap: 24px;
  }

  /* Ocultar <br> duros dentro de los párrafos en móvil */
  .textos-inferiores br,
  .descripcion br,
  .restriccion br { display: none; }

  /* Añadir respiro inferior a la sección */
  .seccion-experiencia { padding-bottom: 20px; }
}

/* ---- 480px: móvil pequeño ---- */
@media (max-width: 480px) {

  /* Grid servicios → columna única */
  .grid-servicios {
    grid-template-columns: 1fr;
    padding: 12px 0;
  }

  /* Reset regla de 2 col: quitar borde derecho en items impares */
  .columna-servicio:nth-child(odd):not(:last-child) { border-right: none; }
  .columna-servicio { padding: 14px 16px; }

  /* Título Experience más compacto */
  .margen_custom h2 {
    font-size: clamp(1.8rem, 9vw, 3rem);
    margin: 24px auto 20px;
  }

  /* Textos manifesto: tamaño fluido */
  .textos-inferiores { padding: 0 16px 36px; }
  .manifiesto  { font-size: clamp(0.85rem, 3.5vw, 1.05rem); letter-spacing: 1.5px; }
  .descripcion { font-size: clamp(0.85rem, 3.5vw, 1.05rem); }
  .restriccion { font-size: clamp(0.85rem, 3.5vw, 1.05rem); letter-spacing: 1px; }
}

.quienes{

margin-right: 340px;
}

.somos{

margin-left: 340px;
margin-top: -70px;
}

@media (max-width: 1200px){

.quienes{

margin-right: 29vw;
}

.somos{

margin-left:  29vw;
margin-top: -6vw;
}
}