/* ============================================================
   Oksiones — Wedding & Event Planners
   Elegante y minimalista · colores de marca: negro · blanco · petróleo #2C4652
   ============================================================ */

:root {
  /* Colores oficiales: negro · blanco · petróleo #2C4652 */
  --paper:      #FFFFFF;
  --paper-2:    #F3F5F6;
  --ink:        #1A1818;
  --ink-soft:   #5C6468;
  --sage:       #2C4652; /* acento petróleo */
  --sage-deep:  #21353F; /* petróleo oscuro */
  --brass:      #2C4652; /* acento (rules, marcas) */
  --accent-tint:#8FA9B4; /* petróleo claro para fondos oscuros */
  --line:       rgba(26, 24, 24, 0.16);
  --line-soft:  rgba(26, 24, 24, 0.08);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1200px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
  letter-spacing: 0.005em;
}

/* ---------- Shared utilities ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--sage-deep);
  margin: 0 0 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--brass);
}
.eyebrow--light {
  color: #FFFFFF;
  text-shadow: 0 1px 10px rgba(8, 12, 15, 0.55);
}
.eyebrow--light::before { background: rgba(255, 255, 255, 0.9); }

.section-title {
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.9rem);
  font-weight: 400;
  max-width: 16ch;
}

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-head--center .section-title { max-width: 18ch; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1rem 1.9rem;
  display: inline-block;
  border: 1px solid transparent;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease), transform 0.4s var(--ease);
  cursor: pointer;
}
.btn--solid {
  background: var(--ink);
  color: var(--paper);
}
.btn--solid:hover { background: var(--sage-deep); transform: translateY(-2px); }
.btn--ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--paper);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }
.btn--full { width: 100%; border: none; }
.btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--gutter);
  color: var(--paper);
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
              box-shadow 0.45s var(--ease), padding 0.45s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,14,18,0.6) 0%, rgba(10,14,18,0) 100%);
  opacity: 1;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.site-header.is-scrolled {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line-soft), 0 12px 30px -24px rgba(40,36,31,0.4);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.site-header.is-scrolled::before { opacity: 0; }

.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: inherit;
}
.brand__logo {
  height: 34px;
  width: auto;
  display: block;
  transition: opacity 0.45s var(--ease);
}
.brand__logo--dark {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  pointer-events: none;
}
.site-header.is-scrolled .brand__logo--light { opacity: 0; }
.site-header.is-scrolled .brand__logo--dark { opacity: 1; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 2.5vw, 2.6rem);
}
.nav a {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
  padding: 0.3rem 0;
  transition: opacity 0.3s var(--ease);
}
.nav a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav a:not(.nav__cta):hover::after { transform: scaleX(1); }
.nav a.nav__cta {
  border: 1px solid currentColor;
  padding: 0.55rem 1.9rem;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.nav a.nav__cta::after { display: none; }
.nav a.nav__cta:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
  transform: translateY(-2px);
}
/* Header con scroll: botón oscuro con texto blanco y hover azul petróleo */
.site-header.is-scrolled .nav a.nav__cta {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.site-header.is-scrolled .nav a.nav__cta:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--paper);
  transform: translateY(-2px);
}
.nav a:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }

/* Dropdown de Servicios */
.nav__group { position: relative; display: inline-flex; }
.nav__trigger {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.nav__chevron { transition: transform 0.35s var(--ease); }
.nav__group:hover .nav__chevron,
.nav__group.is-open .nav__chevron { transform: rotate(180deg); }
.nav__trigger:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }

.nav__dropdown {
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, 8px);
  min-width: 210px;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  padding: 0.6rem;
  border: 1px solid var(--line-soft);
  box-shadow: 0 22px 46px -26px rgba(40, 36, 31, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  z-index: 60;
}
.nav__dropdown::before {
  content: "";
  position: absolute;
  top: -12px; left: 0; right: 0; height: 12px;
}
.nav__group:hover .nav__dropdown,
.nav__group:focus-within .nav__dropdown,
.nav__group.is-open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav__dropdown a {
  text-transform: none;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 0.6rem 0.85rem;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.nav__dropdown a::after { display: none; }
.nav__dropdown a:hover { background: var(--paper-2); color: var(--brass); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 9px;
  border-radius: 8px;
  transition: background 0.4s var(--ease);
}
/* Sobre el hero (header transparente): líneas blancas con fondo translúcido */
.site-header:not(.is-scrolled) .nav-toggle { background: rgba(10, 15, 19, 0.4); }
.nav-toggle span {
  width: 26px; height: 2px;
  background: #FFFFFF;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease), background 0.35s var(--ease);
}
/* Al hacer scroll (header blanco): líneas oscuras */
.site-header.is-scrolled .nav-toggle span { background: var(--ink); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem var(--gutter) 5rem;
  color: var(--paper);
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0;
  background: url("assets/hero.jpg") center/cover no-repeat;
  transform: scale(1.04);
  animation: heroZoom 18s ease-out forwards;
  overflow: hidden;
}
@keyframes heroZoom { to { transform: scale(1); } }
/* Video de fondo de YouTube: cubre el hero sin barras (relación 16:9) */
.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;          /* 16:9 según el ancho */
  min-width: 177.78vh;      /* 16:9 según el alto  */
  min-height: 100vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;     /* no interfiere con los botones */
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(12,18,22,0.60) 0%, rgba(12,18,22,0.30) 45%, rgba(12,18,22,0.10) 100%),
    linear-gradient(to top, rgba(12,18,22,0.65) 0%, rgba(14,22,26,0.20) 45%, rgba(18,20,22,0.30) 100%);
}
.hero__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}
.hero__title {
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.2rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  max-width: 28ch;
  margin-bottom: 1.8rem;
}
.hero__title-italic {
  font-style: italic;
  font-weight: 400;
  color: #DCE4E7;
}
.hero__lead {
  max-width: 40ch;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 2.6rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero__scroll {
  position: absolute;
  bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.hero__scroll-line {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), transparent);
  animation: scrollPulse 2.4s var(--ease) infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.35; transform: scaleY(0.7); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ============================================================
   METODOLOGÍA
   ============================================================ */
.method {
  background: var(--paper-2);
  padding: clamp(2.2rem, 4vw, 3.5rem) var(--gutter);
}
.method__inner { max-width: var(--maxw); margin: 0 auto; }
.method .section-head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.method .section-title { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem); }
.method__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.method__step {
  padding: 0 clamp(1rem, 2.5vw, 2.2rem);
  border-left: 1px solid var(--line-soft);
}
.method__step:first-child { border-left: none; padding-left: 0; }
.method__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--brass);
  display: block;
  margin-bottom: 1.1rem;
}
.method__step h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  margin-bottom: 0.7rem;
}
.method__step p {
  color: var(--ink-soft);
  margin: 0;
  max-width: 28ch;
}

/* ============================================================
   INTRO
   ============================================================ */
.intro {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.intro__lead {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.6rem);
  line-height: 1.32;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.intro__lead em { font-style: italic; color: var(--sage-deep); }
.intro__stats {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.intro__stats li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line-soft);
}
.intro__stats strong {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.5rem + 2vw, 3rem);
  font-weight: 400;
  color: var(--brass);
  min-width: 3.5ch;
}
.intro__stats span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}

/* ============================================================
   SERVICIOS
   ============================================================ */
.services {
  background: var(--paper-2);
  padding: clamp(2.2rem, 4.5vw, 4rem) var(--gutter);
}
.services .section-title {
  max-width: 34ch;
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.9rem);
}
.services .section-head,
.services__grid { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

/* Estructura igual a "Por qué elegirnos": encabezado arriba + foto | tarjetas */
.services__inner { max-width: var(--maxw); margin: 0 auto; }
.services__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.services__head-text { max-width: 780px; }
.services__head .section-title {
  font-size: clamp(1.7rem, 1.2rem + 1.3vw, 2.4rem);
  max-width: 36ch;
  margin-bottom: 1.2rem;
}
.services__head .services__intro {
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}
.services__layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}
.services__media {
  position: relative;
  background: url("assets/hero.jpg") 70% 32% / cover no-repeat;
  border: 1px solid var(--line-soft);
  min-height: 440px;
}
.services__media::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

/* Categoría de servicio (Bodas / Eventos sociales) */
.service-cat {
  max-width: var(--maxw);
  margin: 0 auto;
  scroll-margin-top: 90px;
}
.service-cat + .service-cat { margin-top: clamp(3rem, 7vw, 6rem); }
.service-cat__head { margin-bottom: clamp(1.8rem, 4vw, 3rem); max-width: 60ch; }
.service-cat__title {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  margin-bottom: 1rem;
}
.service-cat__lead { color: var(--ink-soft); margin: 0; max-width: 52ch; }

.services .section-head { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.services__intro {
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 1.2rem 0 0;
}
.services__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.services__grid--2 { grid-template-columns: repeat(2, 1fr); }
.service[id] { scroll-margin-top: 96px; }
.service {
  background: var(--paper-2);
  padding: clamp(1.8rem, 3.2vw, 2.8rem);
  transition: background 0.5s var(--ease);
}
.service:hover { background: var(--paper); }
.service__mark {
  width: 8px; height: 8px;
  display: block;
  margin-bottom: 1.5rem;
  background: var(--brass);
  transform: rotate(45deg);
}
.service h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.1;
  margin: 0 0 0.8rem;
}
.service p {
  color: var(--ink-soft);
  margin: 0;
  max-width: 42ch;
}

/* ============================================================
   POR QUÉ ELEGIRNOS
   ============================================================ */
.why { padding: clamp(2.2rem, 4.5vw, 4rem) var(--gutter); }
.why__inner { max-width: var(--maxw); margin: 0 auto; }
.why__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.why__head-text { max-width: 780px; }
.why__head .section-title {
  font-size: clamp(1.7rem, 1.2rem + 1.3vw, 2.4rem);
  max-width: 36ch;
  margin-bottom: 1.2rem;
}
.why__head .why__lead {
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}
.why__layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}
.why__media {
  background: url("assets/why.jpg") center 30% / cover no-repeat;
  position: relative;
  min-height: 440px;
}
.why__media::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
.why__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.why-card {
  background: var(--paper);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  transition: background 0.5s var(--ease);
}
.why-card:hover { background: var(--paper-2); }
.why-card__mark {
  width: 8px; height: 8px;
  display: block;
  margin-bottom: 1.2rem;
  background: var(--brass);
  transform: rotate(45deg);
}
.why-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.65rem);
  line-height: 1.12;
  margin: 0 0 0.7rem;
}
.why-card p { color: var(--ink-soft); margin: 0; max-width: 46ch; }
.why__cta { flex-shrink: 0; white-space: nowrap; }

/* ============================================================
   QUÉ NOS HACE DIFERENTES
   ============================================================ */
.different {
  background: var(--sage);
  color: var(--paper);
  padding: clamp(2.2rem, 4.5vw, 4rem) var(--gutter);
}
.different__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
}
.different__content { order: 1; grid-column: 1; grid-row: 1; }
.different__media {
  order: 2;
  grid-column: 2;
  grid-row: 1 / span 2;
  background: url("assets/different.jpg") center / cover no-repeat;
  position: relative;
  min-height: 440px;
}
.different__media::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.different .eyebrow { color: var(--accent-tint); }
.different .eyebrow::before { background: var(--accent-tint); }
.different .section-title {
  color: var(--paper);
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem);
  max-width: 32ch;
}
.different .section-head { margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.different__body {
  max-width: 66ch;
  margin-top: 0;
}
.different__body p {
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 1.4rem;
}
.different__tools {
  list-style: none;
  margin: 0 0 2.2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.8rem;
}
.different__tools li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.9);
}
.different__tools li::before {
  content: "";
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--accent-tint);
  /* palomita dibujada con un check unicode centrado */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C4652' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 68%;
}
.different__closing {
  order: 3;
  grid-column: 1;
  grid-row: 2;
}
.different__close {
  max-width: 66ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.45;
  color: #FFFFFF;
  margin: 0;
}
.different__cta { margin-top: clamp(1.5rem, 3vw, 2.2rem); }

/* ============================================================
   NOSOTROS
   ============================================================ */
.about {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.5rem, 3.5vw, 3rem) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: stretch;
}
.about__media {
  background: url("assets/jonathan.jpg") center 35% / cover no-repeat;
  position: relative;
  min-height: 520px;
}
.about__media::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.about__body p {
  color: var(--ink-soft);
  margin: 0 0 1.3rem;
  max-width: 46ch;
}
.about__body .section-title {
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem);
  max-width: 20ch;
  margin-bottom: 1.8rem;
}
.about__body .about__close {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.45;
  color: var(--sage-deep);
  max-width: 46ch;
}
.about__sign {
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.about__sign-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--ink);
}
.about__sign-role {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sage-deep);
}
.about__cta { margin-top: 2rem; }

/* ============================================================
   CTA · NOS ENCARGAMOS DE TODO
   ============================================================ */
.cta {
  position: relative;
  background:
    linear-gradient(rgba(12, 18, 22, 0.74), rgba(12, 18, 22, 0.82)),
    url("assets/boda-10.jpg") center/cover no-repeat;
  padding: clamp(3.2rem, 6vw, 5.5rem) var(--gutter);
  text-align: center;
  color: var(--paper);
}
.cta__inner {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta .eyebrow {
  color: #FFFFFF;
  text-shadow: 0 1px 10px rgba(8, 12, 15, 0.55);
}
.cta .eyebrow::before { background: rgba(255, 255, 255, 0.9); }
.cta .section-title {
  color: var(--paper);
  font-size: clamp(1.7rem, 1.2rem + 1.3vw, 2.4rem);
  max-width: none;
  white-space: nowrap;
  margin: 0 0 1rem;
}
.cta__lead {
  color: rgba(255, 255, 255, 0.88);
  max-width: 78ch;
  margin: 0 0 1.8rem;
}

/* ============================================================
   PORTAFOLIO
   ============================================================ */
.portfolio {
  background: var(--sage);
  color: var(--paper);
  padding: clamp(1.4rem, 3vw, 2.4rem) var(--gutter) clamp(3rem, 5.5vw, 5rem);
}
/* Línea divisoria entre "Qué nos hace diferentes" y "Portafolio" */
.different + .portfolio {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: clamp(2.4rem, 4.5vw, 4rem);
}
.portfolio .section-head,
.gallery { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.portfolio .section-head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.portfolio .eyebrow { color: var(--accent-tint); }
.portfolio .eyebrow::before { background: var(--accent-tint); }
.portfolio .section-title {
  color: var(--paper);
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem);
  max-width: none;
  white-space: nowrap;
}
/* Pestañas de categoría (Bodas / Eventos sociales) */
.portfolio__tabs {
  max-width: var(--maxw);
  margin: 0 auto clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  gap: 0.5rem 2rem;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.portfolio__tab {
  background: none;
  border: none;
  padding: 0 0 0.9rem;
  margin-bottom: -1px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.portfolio__tab:hover { color: #FFFFFF; }
.portfolio__tab.is-active {
  color: #FFFFFF;
  border-bottom-color: var(--accent-tint);
}
.portfolio__tab:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.portfolio__panel[hidden] { display: none; }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  grid-auto-flow: dense;
  gap: 1rem;
}
.gallery__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  grid-row: span 1;
}
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--feature { grid-column: span 2; grid-row: span 2; }
.gallery__item--full { grid-column: 1 / -1; grid-row: span 2; }
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
  filter: saturate(0.92);
}
.gallery__item:hover img { transform: scale(1.06); filter: saturate(1.05); }
.gallery__item figcaption {
  position: absolute;
  left: 1.1rem; bottom: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
.gallery__item:hover figcaption { opacity: 1; transform: translateY(0); }

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.testimonials {
  position: relative;
  background:
    linear-gradient(rgba(12, 18, 22, 0.80), rgba(12, 18, 22, 0.84)),
    url("assets/boda-9.jpg") center / cover no-repeat;
  background-attachment: fixed;
  color: var(--paper);
  padding: clamp(3rem, 5.5vw, 5rem) var(--gutter);
}
.testimonials__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
}
.testimonials .section-head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.testimonials .eyebrow { color: #FFFFFF; text-shadow: 0 1px 10px rgba(8, 12, 15, 0.5); }
.testimonials .eyebrow::before { background: var(--accent-tint); }
.testimonials .section-title {
  color: var(--paper);
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem);
  max-width: none;
  white-space: nowrap;
}
.testimonials .carousel::before { color: var(--accent-tint); }
.testimonials .slide p { color: var(--paper); }
.testimonials .slide__name { color: rgba(255, 255, 255, 0.78); }
.testimonials .slide__handle { color: var(--accent-tint); }
.testimonials .carousel__btn { color: var(--paper); border-color: rgba(255, 255, 255, 0.45); }
.testimonials .carousel__btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.testimonials .carousel__dot { background: rgba(255, 255, 255, 0.4); }
.testimonials .carousel__dot.is-active { background: var(--paper); }
/* Carrusel */
.carousel { max-width: 860px; margin: 0 auto; }
.carousel::before {
  content: "“";
  display: block;
  text-align: center;
  font-family: var(--serif);
  font-size: 4rem;
  line-height: 0.4;
  color: var(--brass);
  margin-bottom: 1.6rem;
}
.carousel__viewport { overflow: hidden; }
.carousel__track {
  display: flex;
  transition: transform 0.6s var(--ease);
}
.slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  padding: 0 clamp(0.5rem, 3vw, 2rem);
  text-align: center;
}
.slide p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.95rem);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 1.8rem;
}
.slide footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.slide__name {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sage-deep);
}
.slide__handle {
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: var(--brass);
  transition: opacity 0.3s var(--ease);
}
.slide__handle:hover { text-decoration: underline; }

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 1.8rem);
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}
.carousel__btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.carousel__btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.carousel__btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.carousel__dots { display: flex; gap: 0.6rem; }
.carousel__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.carousel__dot.is-active { background: var(--brass); transform: scale(1.35); }
.carousel__dot:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.testimonials__cta {
  text-align: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ============================================================
   CONTACTO
   ============================================================ */
.contact {
  background: var(--paper);
  padding: clamp(2.2rem, 4.5vw, 4rem) var(--gutter);
  text-align: center;
}
.contact__intro {
  max-width: 760px;
  margin: 0 auto;
}
.contact__intro .section-title {
  font-size: clamp(1.7rem, 1.2rem + 1.3vw, 2.4rem);
  margin: 0 auto 1.2rem;
}
.contact__intro p {
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto 2.4rem;
}
.contact__details {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: start;
}
.contact__details li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.contact__endorse {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.contact__endorse span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--sage-deep);
}
.contact__endorse-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 3vw, 2.4rem);
}
.contact__endorse img {
  height: 84px;
  width: auto;
}
.contact__details span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sage-deep);
}
.contact__details a,
.contact__details li { color: var(--ink); }
.contact__details a:hover { color: var(--brass); }

.contact__form { display: flex; flex-direction: column; gap: 1.5rem; }
.field { display: flex; flex-direction: column; gap: 0.55rem; }
.field--row {
  display: flex;
  flex-direction: row;
  gap: 1.2rem;
}
.field--row > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.contact__form label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sage-deep);
}
.contact__form input,
.contact__form select,
.contact__form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0.85rem 1rem;
  border-radius: 0;
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.contact__form input::placeholder,
.contact__form textarea::placeholder { color: #9aa2a6; }
.contact__form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C6468' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
  cursor: pointer;
}
.contact__form textarea { resize: vertical; min-height: 140px; }
.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(44, 70, 82, 0.14);
}
.contact__form .btn--full { margin-top: 0.4rem; }
.form-status {
  font-size: 0.85rem;
  color: var(--sage-deep);
  margin: 0.2rem 0 0;
  min-height: 1.2em;
}
.form-status:empty { display: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.85);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) 2rem;
}
.site-footer__top,
.site-footer__bottom { max-width: var(--maxw); margin: 0 auto; }
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.brand--footer .brand__logo { height: 30px; }
.footer-nav, .footer-social {
  display: flex;
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
}
.footer-nav a, .footer-social a {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.3s var(--ease);
}
.footer-nav a:hover, .footer-social a:hover { color: var(--accent-tint); }
.footer-social a { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-social svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 1.8rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}
.site-footer__bottom p { margin: 0; }
.footer-credit {
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.3s var(--ease);
}
.footer-credit:hover { color: var(--accent-tint); }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.footer-legal a {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.3s var(--ease);
}
.footer-legal a:hover { color: var(--accent-tint); }

/* ============================================================
   BOTÓN FLOTANTE WHATSAPP
   ============================================================ */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 45;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 10px 26px -6px rgba(0, 0, 0, 0.45),
              0 0 0 0 rgba(37, 211, 102, 0.55);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  animation: waGlow 2.4s var(--ease) infinite, waFloat 3.2s ease-in-out infinite;
}
/* Anillo de pulso */
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  z-index: -1;
  animation: waPulse 2.4s var(--ease) infinite;
}
.wa-float:hover {
  animation-play-state: paused;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 16px 34px -6px rgba(0, 0, 0, 0.5),
              0 0 22px 4px rgba(37, 211, 102, 0.7);
}
.wa-float:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.wa-float svg { width: 32px; height: 32px; fill: currentColor; }

@keyframes waPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes waGlow {
  0%, 100% { box-shadow: 0 10px 26px -6px rgba(0, 0, 0, 0.45),
                         0 0 0 0 rgba(37, 211, 102, 0.0); }
  50%      { box-shadow: 0 10px 26px -6px rgba(0, 0, 0, 0.45),
                         0 0 20px 3px rgba(37, 211, 102, 0.65); }
}
@keyframes waFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (max-width: 640px) {
  .wa-float { width: 52px; height: 52px; }
  .wa-float svg { width: 29px; height: 29px; }
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   MOBILE MENU PANEL
   ============================================================ */
@media (max-width: 860px) {
  .nav-toggle { display: flex; z-index: 60; }
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    background: var(--paper);
    color: var(--ink);
    transform: translateY(-100%);
    transition: transform 0.5s var(--ease);
    z-index: 55;
  }
  .nav.is-open { transform: translateY(0); }
  .site-header:not(.is-scrolled) .nav-toggle.is-open { background: transparent; }
  .nav-toggle.is-open span { background: var(--ink); }
  .nav a { font-size: 1.05rem; letter-spacing: 0.2em; color: var(--ink); }
  .nav__cta { border-color: var(--ink); }

  .nav__group { width: 100%; flex-direction: column; align-items: center; }
  .nav__trigger { font-size: 1.05rem; letter-spacing: 0.2em; color: var(--ink); justify-content: center; }
  .nav__dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    width: 100%;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
    align-items: center;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease), margin-top 0.4s var(--ease);
  }
  .nav__group.is-open .nav__dropdown { transform: none; max-height: 200px; margin-top: 1rem; }
  .nav__dropdown a { font-size: 0.95rem; color: var(--ink-soft); text-align: center; }
  .nav__dropdown a:hover { background: transparent; }
}

/* ============================================================
   PÁGINA · SOBRE NOSOTROS
   ============================================================ */
/* Enlace activo en el nav */
.nav a[aria-current="page"] { opacity: 0.65; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* --- Page hero (encabezado de página interior) --- */
.page-hero {
  position: relative;
  min-height: clamp(58vh, 62vh, 640px);
  display: flex;
  align-items: flex-end;
  padding: 9rem var(--gutter) clamp(3rem, 6vw, 5rem);
  color: var(--paper);
  overflow: hidden;
}
.page-hero__media {
  position: absolute; inset: 0;
  background: url("assets/different.jpg") center 40% / cover no-repeat;
  transform: scale(1.04);
  animation: heroZoom 18s ease-out forwards;
  overflow: hidden;
}
/* Video de fondo de YouTube en el hero de páginas internas */
.page-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.page-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(18,28,33,0.86) 0%, rgba(20,30,35,0.34) 55%, rgba(26,24,24,0.55) 100%);
}
.page-hero__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 1.6rem;
}
.crumbs a { transition: opacity 0.3s var(--ease); }
.crumbs a:hover { opacity: 0.7; }
.crumbs span[aria-hidden] { color: rgba(255, 255, 255, 0.45); }
.page-hero__title {
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  max-width: 24ch;
  margin-bottom: 1.4rem;
}
.page-hero__title-italic {
  font-style: italic;
  font-weight: 400;
  color: #DCE4E7;
}
.page-hero__lead {
  max-width: 52ch;
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.22rem);
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* Imagen específica de la historia en Nosotros */
.about__media--nosotros { background-image: url("assets/jonathan.jpg"); }
#historia {
  background: var(--paper-2);
  box-shadow: 0 0 0 100vmax var(--paper-2);
  clip-path: inset(0 -100vmax);
}

/* Imágenes de la página Bodas */
.page-hero__media--bodas {
  background-image: url("assets/different.jpg");
  background-position: center 40%;
}
.about__media--bodas {
  background-image: url("assets/different.jpg");
  background-position: center;
}

/* Imágenes de la página Eventos sociales */
.page-hero__media--sociales {
  background-image: url("assets/hero.jpg");
  background-position: center 45%;
}
.about__media--sociales {
  background-image: url("assets/milan-intro.jpg");
  background-position: center;
}
/* Eyebrow "Eventos sociales y corporativos" en una sola línea */
#intro-sociales .eyebrow { white-space: nowrap; }
#intro-sociales .eyebrow::before { flex-shrink: 0; }
@media (max-width: 640px) {
  #intro-sociales .eyebrow { white-space: normal; }
}

/* --- Fundador (perfil oscuro) --- */
.founder {
  background: #0C1418;
  color: var(--paper);
  padding: clamp(2.2rem, 4.5vw, 4rem) var(--gutter);
}
.founder__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.founder__media {
  margin: 0;
  position: relative;
}
.founder__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.founder__media::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  pointer-events: none;
}
.founder__body .section-title {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem);
  margin: 0 0 1.8rem;
}
.founder__body p {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 1.3rem;
  max-width: 52ch;
}
.founder__body p:last-child { margin-bottom: 0; }

/* --- Cifras --- */
.stats-band {
  background: var(--sage-deep);
  color: var(--paper);
  padding: clamp(2.4rem, 5vw, 3.6rem) var(--gutter);
}
.stats-band__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.stat {
  text-align: center;
  padding: 0 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.stat:first-child { border-left: none; }
.stat__num {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem);
  line-height: 1;
  margin-bottom: 0.6rem;
}
.stat__label {
  display: block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Misión · Visión · Propósito --- */
.pillars { background: var(--paper-2); padding: clamp(2.2rem, 4.5vw, 4rem) var(--gutter); }
.pillars__inner { max-width: var(--maxw); margin: 0 auto; }
.pillars .section-title {
  font-size: clamp(1.7rem, 1.2rem + 1.3vw, 2.4rem);
  max-width: none;
  white-space: nowrap;
}
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.pillar {
  background: var(--paper-2);
  padding: clamp(2rem, 3.5vw, 3rem);
  transition: background 0.5s var(--ease);
}
.pillar:hover { background: var(--paper); }
.pillar__mark {
  width: 8px; height: 8px;
  display: block;
  margin-bottom: 1.4rem;
  background: var(--brass);
  transform: rotate(45deg);
}
.pillar h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  margin-bottom: 0.9rem;
}
.pillar p { color: var(--ink-soft); margin: 0; }
.pillars__cta { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* --- Valores --- */
.values {
  background: var(--sage-deep);
  color: var(--paper);
  padding: clamp(2.2rem, 4.5vw, 4rem) var(--gutter);
}
.values .eyebrow { color: var(--accent-tint); }
.values .eyebrow::before { background: var(--accent-tint); }
.values .value__num { color: var(--accent-tint); }
.values .value p { color: rgba(255, 255, 255, 0.78); }
.values__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: stretch;
}
.values__content { order: 1; }
.values__media { order: 2; }
.values__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.values__head .section-title {
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem);
  max-width: none;
  margin-top: 0;
}
.values__media {
  position: relative;
  min-height: 460px;
  background: url("assets/valores.jpg") center 20% / cover no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.values__media::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.values__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 3.5vw, 2.8rem);
}
.value__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--brass);
  display: block;
  margin-bottom: 0.9rem;
}
.value h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  margin-bottom: 0.6rem;
}
.value p { color: var(--ink-soft); margin: 0; max-width: 42ch; }

/* --- Aval --- */
.endorse-band {
  padding: clamp(2.4rem, 5vw, 3.6rem) var(--gutter);
  border-top: 1px solid var(--line-soft);
}
.endorse-band__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}
.endorse-band__inner span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--sage-deep);
}
.endorse-band__inner img { height: 68px; width: auto; opacity: 0.9; }

/* ============================================================
   PÁGINA · CONTACTO
   ============================================================ */
.page-hero__media--contacto {
  background-image: url("assets/port-1.jpg");
  background-position: center 40%;
}

.contact-page {
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter);
}
.contact-page__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

/* Columna de información */
.contact-info { align-self: start; }
.contact-info .eyebrow { margin-bottom: 1rem; }
.contact-info .section-title {
  font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.2rem);
  max-width: none;
  white-space: nowrap;
  margin: 0 0 1rem;
}
@media (max-width: 420px) {
  .contact-info .section-title { white-space: normal; }
}
.contact-info__lead {
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0 0 2rem;
}
.contact-info__list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 1.8rem 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  gap: 1.4rem;
}
.contact-info__list li {
  display: grid;
  grid-template-columns: 9rem 1fr;
  align-items: baseline;
  gap: 0.6rem 1rem;
}
.contact-info__list span:first-child {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sage-deep);
  padding-top: 0.15rem;
}
.contact-info__list a,
.contact-info__plain {
  font-size: 1.02rem;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}
.contact-info__list a:hover { color: var(--brass); }
.contact-info__social {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  align-items: baseline;
  margin-bottom: 2rem;
}
.contact-info__social span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sage-deep);
}
.contact-info__social a {
  transition: color 0.3s var(--ease);
}
.contact-info__social a:hover { color: var(--brass); }
.contact-info__endorse {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.contact-info__endorse span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sage-deep);
  max-width: 7rem;
  line-height: 1.4;
}
.contact-info__endorse img { height: 64px; width: auto; }

/* ============================================================
   PÁGINAS LEGALES (Términos, Privacidad, Cookies)
   ============================================================ */
.page-hero--legal {
  min-height: 0;
  background: var(--sage-deep);
  padding-top: clamp(7rem, 12vw, 9rem);
  padding-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
.legal-page {
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
}
.legal-content {
  max-width: 780px;
  margin-inline: auto;
}
.legal-content h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: clamp(2.2rem, 4vw, 3rem) 0 0.9rem;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
  font-weight: 600;
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0.7rem;
}
.legal-content p,
.legal-content li {
  color: var(--ink-soft, var(--ink));
  line-height: 1.75;
  margin-bottom: 0.9rem;
}
.legal-content ul {
  list-style: none;
  padding-left: 0;
  border-left: 2px solid var(--line-soft);
  padding-left: 1.4rem;
}
.legal-content li { margin-bottom: 0.45rem; }
.legal-content a {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s var(--ease);
}
.legal-content a:hover { color: var(--sage-deep); }

/* ============================================================
   AVISO DE COOKIES
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vw, 1.6rem);
  transform: translateX(-50%);
  z-index: 90;
  width: min(92vw, 680px);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.4rem;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 32px rgba(26, 24, 24, 0.28);
  animation: cookieIn 0.5s var(--ease) both;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
@keyframes cookieIn {
  from { opacity: 0; transform: translateX(-50%) translateY(1rem); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.cookie-banner.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(1rem);
  pointer-events: none;
}
.cookie-banner p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
}
.cookie-banner a {
  color: var(--accent-tint);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-banner__actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}
.cookie-banner__btn {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: opacity 0.3s var(--ease);
}
.cookie-banner__btn:hover { opacity: 0.8; }
.cookie-banner__btn--accept {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
}
.cookie-banner__btn--reject {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
@media (max-width: 560px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cookie-banner__btn { flex: 1; }
}

/* Franja "Avalados por" antes del footer */
.endorse-strip {
  padding: 0 clamp(1.4rem, 5vw, 4rem) clamp(2.4rem, 5vw, 3.6rem);
}
.endorse-strip .contact__endorse {
  max-width: 720px;
  margin-inline: auto;
}

/* Panel del formulario */
.contact-form-panel {
  background: var(--paper-2);
  padding: clamp(1.8rem, 3.5vw, 3rem);
  border: 1px solid var(--line-soft);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .intro { grid-template-columns: 1fr; }
  .intro__stats { flex-direction: row; flex-wrap: wrap; gap: 1.5rem 3rem; }
  .intro__stats li { flex-direction: column; gap: 0.4rem; border-bottom: none; }
  .about { grid-template-columns: 1fr; padding-top: clamp(3rem, 9vw, 5rem); padding-bottom: clamp(3rem, 9vw, 5rem); }
  #historia .about__body { order: 1; }
  #historia .about__media { order: 2; }
  .about__media { width: 100%; max-width: 460px; margin: 0 auto; min-height: 0; aspect-ratio: 4 / 5; align-self: start; }
  .services { padding-bottom: clamp(3rem, 9vw, 5rem); }
  .services__layout { grid-template-columns: 1fr; gap: clamp(1.8rem, 5vw, 2.8rem); }
  /* align-self:start evita que el stretch del grid anule el aspect-ratio en iOS/WebKit.
     min-height debe ser 0: en iOS/WebKit un min-height junto con aspect-ratio se
     transfiere al ancho mínimo (240px × 16/10 = 384px) y la foto desborda su columna,
     mostrando una franja de la imagen sobre el margen derecho en móviles. */
  .services__media { min-height: 0; width: 100%; max-width: 100%; aspect-ratio: 16 / 10; align-self: start; }
  /* Respaldo solo para navegadores sin soporte de aspect-ratio */
  @supports not (aspect-ratio: 16 / 10) {
    .services__media { min-height: 240px; }
  }
  /* iOS no soporta background-attachment: fixed (la imagen se ve con zoom gigante) */
  .testimonials { background-attachment: scroll; }
  .founder__inner { grid-template-columns: 1fr; }
  .founder__body { order: 1; }
  .founder__media { order: 2; max-width: 440px; }
  .contact-page__grid { grid-template-columns: 1fr; }
  .pillars__grid { grid-template-columns: 1fr; }
  .values__inner { grid-template-columns: 1fr; }
  .values__head { position: static; }
  .values__media { order: -1; }
  .stats-band__inner { grid-template-columns: 1fr 1fr; gap: 2.4rem 1.5rem; }
  .stat:nth-child(odd) { border-left: none; }
  .why { padding-bottom: clamp(3rem, 9vw, 5rem); }
  .why__head { flex-direction: column; align-items: flex-start; }
  .why__layout { grid-template-columns: 1fr; }
  .why__media { min-height: 340px; }
  .different__inner { grid-template-columns: 1fr; gap: clamp(1.8rem, 5vw, 2.8rem); }
  .different__content { grid-column: auto; grid-row: auto; }
  .different__content .different__tools { margin-bottom: 0; }
  .different__media { grid-column: auto; grid-row: auto; min-height: 320px; }
  .different__closing { grid-column: auto; grid-row: auto; }
  .method__steps { grid-template-columns: 1fr 1fr; gap: 2.4rem 0; }
  .method__step:nth-child(odd) { border-left: none; padding-left: 0; }
  .contact { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; gap: 0; }
  .quote { padding-bottom: 2rem; }
}

@media (max-width: 640px) {
  .page-hero {
    min-height: auto;
    padding-top: 6rem;
    padding-bottom: 2.5rem;
  }
  .page-hero__veil {
    background: linear-gradient(
      to top,
      rgba(12, 18, 22, 0.9) 0%,
      rgba(14, 22, 26, 0.62) 55%,
      rgba(16, 22, 24, 0.72) 100%
    );
  }
  .hero {
    min-height: 90svh;
    padding-top: 5rem;
    /* Reserva espacio para el indicador "Descubre" (posición absoluta al fondo) */
    padding-bottom: 8.5rem;
  }
  .hero__scroll { bottom: 1.6rem; }
  .hero__media { background-position: 64% center; }
  .hero__veil {
    background: linear-gradient(
      to top,
      rgba(12, 18, 22, 0.92) 0%,
      rgba(14, 22, 26, 0.62) 50%,
      rgba(16, 22, 24, 0.7) 100%
    );
  }
  .services__grid { grid-template-columns: 1fr; }
  .cta .section-title { white-space: normal; }
  .testimonials .section-title { white-space: normal; }
  .pillars .section-title { white-space: normal; }
  .contact__details { grid-template-columns: 1fr 1fr; }
  .why__cards { grid-template-columns: 1fr; }
  .method { padding-top: clamp(3rem, 9vw, 5rem); padding-bottom: clamp(3rem, 9vw, 5rem); }
  .method__steps { grid-template-columns: 1fr 1fr; gap: 2.2rem 0; }
  .method__step { border-left: none; padding-left: 0; padding-right: 0; }
  .method__step:nth-child(odd) { padding-right: 1.3rem; }
  .method__step:nth-child(even) { border-left: 1px solid var(--line-soft); padding-left: 1.3rem; }
  .gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 0.9rem;
  }
  .gallery__item,
  .gallery__item--feature,
  .gallery__item--wide,
  .gallery__item--tall,
  .gallery__item--full {
    grid-column: auto;
    grid-row: auto;
  }
  .gallery__item img { height: auto; }
  .gallery__item figcaption { opacity: 1; transform: none; }
  .field--row { flex-direction: column; }
  .values__grid { grid-template-columns: 1fr; }
  .stats-band__inner { grid-template-columns: 1fr; gap: 2rem; }
  .stat, .stat:nth-child(odd) { border-left: none; }
  .cta .section-title { white-space: normal; }

  /* Footer en móvil: apilado y centrado */
  .site-footer { padding-top: clamp(2.5rem, 8vw, 3.5rem); text-align: center; }
  .site-footer__top {
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
  }
  .footer-nav {
    display: block;
    width: 100%;
    line-height: 2.4;
  }
  .footer-nav a { display: inline-block; margin: 0 0.7rem; }
  .footer-social { justify-content: center; }
  .site-footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    text-align: center;
  }
  .footer-legal {
    display: block;
    width: 100%;
    line-height: 2.2;
  }
  .footer-legal a { display: inline-block; margin: 0 0.6rem; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   LIGHTBOX / VISOR DE IMÁGENES
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 14, 18, 0.92);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox__figure {
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.lightbox__img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox__caption {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox__close {
  top: clamp(0.8rem, 2.5vw, 1.6rem);
  right: clamp(0.8rem, 2.5vw, 1.6rem);
  width: 46px; height: 46px;
  border-radius: 50%;
  font-size: 1.8rem;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  font-size: 2rem;
}
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.6rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.6rem); }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
@media (max-width: 640px) {
  .lightbox__nav { width: 42px; height: 42px; font-size: 1.6rem; }
}

/* ============================================================
   SECCIÓN DE VIDEO
   ============================================================ */
.video-section {
  background: var(--paper);
  padding: clamp(2.6rem, 5vw, 4.5rem) var(--gutter);
}
.video-section__inner { max-width: 960px; margin: 0 auto; }
.video-section .section-head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.video-section .section-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.video-section__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(26, 24, 24, 0.12);
}
.video-section__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}