/* ==================================================
   VARIABLES
================================================== */

:root {

  --paper: #f7f7f5;
  --ink: #101010;

  --dark: #080909;
  --dark-soft: #101010;

  --white: #ffffff;

  --line-light: rgba(255, 255, 255, 0.38);
  --line-dark: rgba(16, 16, 16, 0.18);

  --focus: #9b865b;

  --space: clamp(24px, 4.7vw, 84px);

  /*
    Tipografía provisional.

    Cuando definamos la familia definitiva del sistema DB,
    podremos sustituir esta variable sin rehacer el sitio.
  */

  --font-sans:
    "Helvetica Neue",
    "Avenir Next",
    Avenir,
    Helvetica,
    Arial,
    sans-serif;

}



/* ==================================================
   RESET
================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {

  scroll-behavior: smooth;

  scroll-padding-top: 30px;

}


body {

  margin: 0;

  overflow-x: hidden;

  background: var(--paper);

  color: var(--ink);

  font-family: var(--font-sans);

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}


a {

  color: inherit;

  text-decoration: none;

}


button,
summary {

  cursor: pointer;

}


button {

  border: 0;

  font: inherit;

}


summary {

  user-select: none;

}


img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

}


a,
button,
summary {

  -webkit-tap-highlight-color: transparent;

}


a:focus-visible,
button:focus-visible,
summary:focus-visible {

  outline: 2px solid var(--focus);

  outline-offset: 6px;

}


h1,
h2,
h3,
p {

  margin-top: 0;

}



/* ==================================================
   ACCESIBILIDAD
================================================== */

.skip {

  position: fixed;

  top: -100px;
  left: 20px;

  z-index: 100;

  padding: 15px 18px;

  background: var(--white);

  color: var(--ink);

  font-size: 13px;

}


.skip:focus {

  top: 10px;

}



/* ==================================================
   HEADER
================================================== */

.header {

  position: absolute;

  z-index: 20;

  top: 0;
  left: 0;

  display: flex;

  width: 100%;

  align-items: center;

  justify-content: space-between;

  padding:

    22px
    var(--space);

  color: var(--white);

}



/* ==================================================
   MARCA
================================================== */

.brand {

  position: relative;

  z-index: 2;

  display: inline-flex;

  align-items: center;

}


.brand-mark {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 48px;

  color: currentColor;

  font-size: 48px;

  font-weight: 800;

  line-height: 0.8;

  letter-spacing: -7px;

}




 

  .brand-mark img {
    display: block;
    width: 48px;
    height: auto;
  }


.brand-logo {
  display: block;
  width: 52px;
  height: auto;
}

@media (max-width: 740px) {
  .brand-logo {
    width: 44px;
  }
}

.footer .brand-logo {
  width: 36px;
}

/* ==================================================
   NAVEGACIÓN PRINCIPAL
================================================== */

.navigation {

  display: flex;

  align-items: center;

  gap: 30px;

  font-size: 10px;

  letter-spacing: 0.2em;

}


.nav-group {

  position: relative;

}


.nav-group summary {

  position: relative;

  list-style: none;

  padding: 15px 0;

}


.nav-group summary::-webkit-details-marker {

  display: none;

}


.nav-group summary::after {

  content: "⌄";

  margin-left: 7px;

  font-size: 10px;

  opacity: 0.7;

}


.submenu {

  position: absolute;

  top: calc(100% - 2px);
  left: -18px;

  z-index: 30;

  min-width: 210px;

  padding: 12px 18px;

  border: 1px solid rgba(255, 255, 255, 0.22);

  background: rgba(12, 12, 12, 0.97);

  box-shadow:
    0 18px 35px
    rgba(0, 0, 0, 0.28);

  font-size: 12px;

  letter-spacing: 0.04em;

  backdrop-filter: blur(12px);

}


.submenu a {

  display: block;

  padding: 12px 0;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;

}


.submenu a:hover {

  opacity: 0.65;

  transform: translateX(3px);

}



/* ==================================================
   BOTONES
================================================== */

.button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 24px;

  padding: 15px 22px;

  border:
    1px solid
    currentColor;

  background: transparent;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.15em;

  transition:
    background 0.2s ease,
    color 0.2s ease;

}


.button:hover {

  background: var(--white);

  color: var(--ink);

}


.menu-toggle {

  display: none;

}



/* ==================================================
   HERO
================================================== */

.hero {

  position: relative;

  height: clamp(
    540px,
    43vw,
    780px
  );

  overflow: hidden;

  background: var(--dark);

  color: var(--white);

}


.hero-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


.hero-overlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.48) 25%,
      rgba(0, 0, 0, 0.12) 55%,
      rgba(0, 0, 0, 0.05) 100%
    );
}


.hero-copy {

  position: absolute;

  z-index: 2;

  left: var(--space);
  bottom: 11%;

}


.eyebrow {

  margin: 0 0 20px;

  font-size: 11px;

  line-height: 1.6;

  letter-spacing: 0.45em;

}


.hero .eyebrow {

  font-size: 14px;

  letter-spacing: 0.5em;

}


.hero h1 {

  margin-bottom: 40px;

  font-size: clamp(
    34px,
    3.7vw,
    67px
  );

  font-weight: 400;

  line-height: 1.13;

  letter-spacing: 0.12em;

}


.micro {

  font-size: 9px;

  line-height: 1.7;

  letter-spacing: 0.32em;

}


.micro span {

  padding: 0 18px;

}


.scroll {

  position: absolute;

  z-index: 2;

  right: var(--space);
  bottom: 30px;

  display: flex;

  align-items: center;

  gap: 15px;

  font-size: 9px;

  letter-spacing: 0.2em;

}


.scroll span {

  font-size: 27px;

  font-weight: 100;

}



/* ==================================================
   PORTALES
================================================== */

.portals {

  display: grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap: 1px;

  background: var(--white);

}


.portal {

  position: relative;

  height: clamp(
    290px,
    27.4vw,
    450px
  );

  overflow: hidden;

  color: var(--white);

}


.portal::after {

  position: absolute;

  inset: 0;

  z-index: 1;

  content: "";

  background:

    linear-gradient(
      180deg,
      transparent 30%,
      rgba(0, 0, 0, 0.74) 100%
    );

}


.portal img {

  filter:
    grayscale(1);

  transition:
    transform 0.65s ease,
    filter 0.65s ease;

}

.portal:hover img {

  transform:
    scale(1.035);

  filter:
    grayscale(0);

}


.portal:hover img {

  transform:
    scale(1.035);

}


.portal-content {

  position: absolute;

  z-index: 2;

  bottom: 25px;
  left: clamp(
    20px,
    4.7vw,
    60px
  );

}


.portal h2 {

  margin-bottom: 15px;

  font-size: clamp(
    18px,
    1.8vw,
    30px
  );

  font-weight: 400;

  line-height: 1.1;

  letter-spacing: 0.08em;

}


.portal p {

  margin: 0;

  font-size: 9px;

  letter-spacing: 0.2em;

}


.portal p span {

  padding-left: 8px;

  font-size: 19px;

}



/* ==================================================
   MIRADA / EDITORIAL
================================================== */

.editorial {

  display: grid;

  grid-template-columns:
    1fr
    1.1fr;

  gap: 5.6vw;

  align-items: center;

  padding:

    32px
    var(--space)
    40px;

}


.editorial-image {
  width: 100%;
  min-height: 215px;

  aspect-ratio: 2.2 / 1;

  overflow: hidden;
}

.editorial-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter: grayscale(1);
}


.editorial-copy {

  min-width: 0;

}


.editorial .eyebrow {

  margin-bottom: 12px;

  font-size: 9px;

}


.editorial h2,
.academy h2 {

  margin-bottom: 22px;

  font-size: clamp(
    26px,
    3vw,
    48px
  );

  font-weight: 400;

  line-height: 1.15;

  letter-spacing: 0.10em;

}


.rule {

  display: block;

  width: 44px;
  height: 1px;

  margin:
    0
    0
    18px;

  background:
    currentColor;

}


.editorial-bottom {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 25px;

}


.editorial-bottom p {

  max-width: 365px;

  margin-bottom: 0;

  font-size: 13px;

  line-height: 1.55;

  letter-spacing: 0.02em;

}


.text-link {

  flex-shrink: 0;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.15em;

  white-space: nowrap;

}


.text-link span {

  padding-left: 10px;

  font-size: 21px;

}



/* ==================================================
   ACADEMY
================================================== */

.academy {

  position: relative;

  min-height: 380px;

  overflow: hidden;

  padding:

    44px
    var(--space);

  background: #080808;

  color: var(--white);

}


.academy-image {

  position: absolute;

  top: 0;
  right: 0;

  width: 53%;
  height: 100%;

  object-position: center;

}


.academy-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,
      #080808 33%,
      rgba(8, 8, 8, 0.13) 66%
    );

}


.academy-copy {

  position: relative;

  z-index: 2;

  max-width: 44%;

}


.academy .eyebrow {

  font-size: 10px;

}


.academy h2 {

  margin-bottom: 12px;

}


.academy .micro {

  margin-bottom: 18px;

}


.academy-description {

  max-width: 365px;

  margin-bottom: 0;

  font-size: 13px;

  line-height: 1.55;

  letter-spacing: 0.02em;

}


.academy .button {

  margin-top: 20px;

}


.academy-note {

  position: absolute;

  z-index: 2;

  right: var(--space);
  bottom: 24px;

  margin: 0;

  font-size: 9px;

  letter-spacing: 0.30em;

}



/* ==================================================
   SELECCIÓN FOTOGRÁFICA
================================================== */

.selection {

  display: grid;

  grid-template-columns:

    1.2fr
    0.95fr
    0.8fr
    1.1fr
    1.1fr;

  gap: 2px;

  padding-top: 2px;

  background: var(--white);

}


.selection button {

  height: clamp(
    160px,
    19vw,
    310px
  );

  overflow: hidden;

  padding: 0;

  background: #111111;

}


.selection img {

  transition:
    transform 0.55s ease;

}


.selection button:hover img {

  transform:
    scale(1.04);

}



/* ==================================================
   FOOTER
================================================== */

.footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  padding:

    32px
    var(--space);

}


.footer-brand {

  display: flex;

  align-items: center;

  gap: 14px;

}


.footer .brand-mark {

  min-width: auto;

  font-size: 35px;

  letter-spacing: -5px;

}


.footer-brand > span:last-child {

  font-size: 9px;

  letter-spacing: 0.2em;

  white-space: nowrap;

}


.footer-nav {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

  font-size: 8px;

  letter-spacing: 0.14em;

}


.footer-nav a {

  transition:
    opacity 0.2s ease;

}


.footer-nav a:hover {

  opacity: 0.5;

}


.footer-signature {

  margin: 0;

  padding-left: 28px;

  border-left:
    1px solid
    var(--ink);

  font-size: 8px;

  letter-spacing: 0.20em;

  white-space: nowrap;

}



/* ==================================================
   DIALOG / PANEL
================================================== */

dialog {

  width:
    min(
      850px,
      92vw
    );

  max-height: 90dvh;

  overflow: auto;

  padding:

    55px
    35px
    35px;

  border: 0;

  background:
    var(--paper);

  color:
    var(--ink);

}


dialog::backdrop {

  background:
    rgba(0, 0, 0, 0.82);

}


dialog h2 {

  font-size: 36px;

  font-weight: 400;

  letter-spacing: 0.06em;

}


dialog p {

  max-width: 650px;

  line-height: 1.65;

}


dialog .close {

  position: absolute;

  top: 15px;
  right: 18px;

  padding: 8px;

  background: transparent;

  color: inherit;

  font-size: 10px;

  letter-spacing: 0.2em;

}


.dialog-gallery {

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 12px;

  height: 330px;

  margin: 25px 0;

}


.panel-links {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

  margin-top: 25px;

}


.panel-links a {

  text-decoration: underline;

  text-underline-offset: 5px;

}



/* ==================================================
   LIGHTBOX
================================================== */

#lightbox {

  width: auto;

  max-width: 92vw;

  padding:

    50px
    20px
    20px;

  background: #101010;

  color: var(--white);

}


#lightbox img {

  width: auto;
  height: auto;

  max-width: 82vw;
  max-height: 73dvh;

  object-fit: contain;

}


body.modal-open {

  overflow: hidden;

}



/* ==================================================
   PANTALLAS GRANDES
================================================== */

@media (min-width: 1600px) {

  .editorial {

    padding-top: 45px;

    padding-bottom: 45px;

  }


  .academy {

    min-height: 460px;

  }

}



/* ==================================================
   TABLET / LAPTOP PEQUEÑA
================================================== */

@media (max-width: 1050px) {

  .navigation {

    gap: 15px;

    font-size: 9px;

    letter-spacing: 0.10em;

  }


  .editorial-bottom {

    display: block;

  }


  .text-link {

    display: inline-block;

    margin-top: 15px;

  }


  .footer {

    flex-wrap: wrap;

  }


  .footer-signature {

    border: 0;

    padding-left: 0;

  }


  .portal-content {

    left: 22px;

  }

}



/* ==================================================
   MÓVIL
================================================== */

@media (max-width: 740px) {


  /* HEADER */

  .header {

    padding-top: 18px;

  }


  .brand-mark {

    min-width: 42px;

    font-size: 42px;

  }


  .menu-toggle {

    display: flex;

    align-items: center;

    gap: 14px;

    padding:

      10px
      14px;

    border:

      1px solid
      rgba(255, 255, 255, 0.45);

    background: transparent;

    color: var(--white);

    font-size: 10px;

    letter-spacing: 0.2em;

  }


  .menu-icon {

    font-size: 18px;

  }


  .navigation {

    position: absolute;

    top: 77px;
    left: 0;

    display: none;

    width: 100%;

    max-height:
      calc(
        100dvh - 77px
      );

    overflow: auto;

    padding:

      15px
      25px
      30px;

    background:
      #101010;

    font-size: 12px;

  }


  .navigation.open {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

  }


  .nav-group summary {

    padding: 17px 0;

    border-bottom:

      1px solid
      #333333;

  }


  .submenu {

    position: static;

    min-width: 0;

    padding:

      0
      18px
      10px;

    border: 0;

    background: transparent;

    box-shadow: none;

    backdrop-filter: none;

  }


  .contact-nav {

    align-self: flex-start;

    margin-top: 20px;

  }



  /* HERO */

  .hero {

    height: 88svh;

    min-height: 560px;

    max-height: 850px;

  }


  .hero-image {

    width: 100%;

    object-position:
      52%
      center;

  }


  .hero-overlay {

    background:

      linear-gradient(
        0deg,
        rgba(8, 9, 9, 0.91) 0%,
        rgba(8, 9, 9, 0.08) 70%,
        rgba(8, 9, 9, 0.53) 100%
      );

  }


  .hero-copy {

    right: 20px;

    bottom: 13%;

  }


  .hero h1 {

    font-size:
      clamp(
        28px,
        7vw,
        45px
      );

    letter-spacing: 0.09em;

  }


  .hero .eyebrow {

    font-size: 11px;

    letter-spacing: 0.40em;

  }


  .micro {

    font-size: 8px;

    letter-spacing: 0.20em;

  }


  .micro span {

    padding: 0 9px;

  }



  /* PORTALES */

  .portals {

    grid-template-columns:
      1fr
      1fr;

  }


  .portal {

    height: 320px;

  }


  .portal h2 {

    font-size: 20px;

  }



  /* EDITORIAL */

  .editorial {

    grid-template-columns:
      1fr;

    gap: 28px;

    padding:

      30px
      24px
      38px;

  }


  .editorial-image {

    min-height: 0;

    aspect-ratio: 1.8 / 1;

  }


  .editorial h2,
  .academy h2 {

    font-size: 29px;

    letter-spacing: 0.10em;

  }


  .editorial-bottom p {

    max-width: 100%;

  }



  /* ACADEMY */

  .academy {

    padding:

      285px
      24px
      36px;

  }


  .academy-image {

    width: 100%;
    height: 320px;

    object-position: center;

  }


  .academy-overlay {

    background:

      linear-gradient(
        0deg,
        #080808 39%,
        transparent 80%
      );

  }


  .academy-copy {

    max-width: 100%;

  }


  .academy-note {

    display: none;

  }



  /* SELECCIÓN */

  .selection {

    display: flex;

    overflow-x: auto;

    scroll-snap-type:
      x mandatory;

    scrollbar-width: none;

  }


  .selection::-webkit-scrollbar {

    display: none;

  }


  .selection button {

    flex:
      0
      0
      65%;

    height: 270px;

    scroll-snap-align: start;

  }



  /* FOOTER */

  .footer {

    gap: 25px;

    padding:

      30px
      24px;

  }


  .footer-nav {

    gap: 17px;

    line-height: 2;

  }


  .footer-signature {

    width: 100%;

  }



  /* DIALOG */

  dialog {

    padding:

      55px
      22px
      25px;

  }


  dialog h2 {

    font-size: 28px;

  }


  .dialog-gallery {

    height: 230px;

  }

}



/* ==================================================
   MÓVIL PEQUEÑO
================================================== */

@media (max-width: 480px) {

  .portals {

    grid-template-columns:
      1fr;

  }


  .portal {

    height: min(
      105vw,
      420px
    );

  }


  .hero h1 {

    margin-bottom: 28px;

  }


  .scroll {

    right: 24px;

  }


  .selection button {

    flex-basis: 82%;

  }

}



/* ==================================================
   REDUCIR MOVIMIENTO
================================================== */

@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }


  *,
  *::before,
  *::after {

    transition: none !important;

  }

}


/* ==================================================
   WEDDINGS
================================================== */


/* --------------------------------------------------
   HERO
-------------------------------------------------- */

.weddings-hero {
  position: relative;

  width: 100%;
  height: 100svh;
  min-height: 650px;

  overflow: hidden;

  background: #080808;
  color: #fff;
}


.weddings-hero-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


.weddings-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.18) 48%,
      rgba(0, 0, 0, 0.12) 100%
    );
}


.weddings-hero-copy {
  position: absolute;
  z-index: 2;

  left: var(--space);
  bottom: 12%;
}


.weddings-hero h1 {
  margin: 0 0 28px;

  font-size: clamp(
    48px,
    7vw,
    120px
  );

  font-weight: 400;
  line-height: 0.9;

  letter-spacing: 0.12em;
}


/* --------------------------------------------------
   INTRO
-------------------------------------------------- */

.weddings-intro {
  display: grid;

  grid-template-columns:
    minmax(180px, 0.55fr)
    minmax(380px, 1.3fr)
    minmax(260px, 0.8fr);

  gap: clamp(
    30px,
    5vw,
    90px
  );

  align-items: end;

  padding:
    clamp(90px, 10vw, 170px)
    var(--space);
}


.weddings-intro .eyebrow {
  align-self: start;
}


.weddings-intro h2 {
  margin: 0;

  font-size: clamp(
    38px,
    5vw,
    82px
  );

  font-weight: 400;
  line-height: 0.96;

  letter-spacing: 0.06em;
}


.weddings-intro > p:last-child {
  max-width: 420px;

  margin: 0;

  font-size: 14px;
  line-height: 1.8;

  letter-spacing: 0.02em;
}


/* --------------------------------------------------
   GALERÍA CURADA · MASONRY EDITORIAL
-------------------------------------------------- */

.weddings-gallery {
  column-count: 3;
  column-fill: balance;

  column-gap: clamp(
    10px,
    1.2vw,
    20px
  );

  padding:
    0
    var(--space)
    clamp(100px, 12vw, 190px);
}

.wedding-photo {
  display: inline-block;

  width: 100%;

  margin:
    0
    0
    clamp(
      10px,
      1.2vw,
      20px
    );

  overflow: hidden;

  break-inside: avoid;

  background: #111;
}


.wedding-photo img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;

  transition:
    transform 0.7s ease;
}


.wedding-photo:hover img {
  transform: scale(1.015);
}


/* DESTACADAS */

.wedding-photo.featured-wide {
  column-span: all;

  margin-top: 0;

  margin-bottom:
    clamp(
      20px,
      2vw,
      40px
    );
}


.wedding-photo.featured-wide img {
  width: 100%;

  max-height: 78vh;

  object-fit: cover;

  object-position: center;
}


.wedding-photo.featured-tall {
  width: 100%;
}


.wedding-photo.featured-tall img {
  max-height: 900px;

  object-fit: cover;
}

/* --------------------------------------------------
   ENFOQUE
-------------------------------------------------- */

.weddings-approach {
  position: relative;
  isolation: isolate;

  min-height: clamp(
    620px,
    70vw,
    920px
  );

  overflow: hidden;

  display: flex;
  align-items: center;

  padding:
    clamp(100px, 12vw, 180px)
    var(--space);

  background: #080808;
  color: #fff;
}


.weddings-approach-image {
  position: absolute;
  z-index: -2;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter: grayscale(1);
}


.weddings-approach-overlay {
  position: absolute;
  z-index: -1;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.72) 38%,
      rgba(0, 0, 0, 0.48) 68%,
      rgba(0, 0, 0, 0.32) 100%
    );
}


.weddings-approach-content {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(320px, 0.9fr);

  column-gap: clamp(
    70px,
    10vw,
    180px
  );

  align-items: end;

  width: 100%;
}


.weddings-approach-content > .eyebrow {
  grid-column: 1;
  grid-row: 1;

  align-self: end;
}


.weddings-approach h2 {
  grid-column: 1;
  grid-row: 2;

  max-width: 800px;

  margin: 0;

  font-size: clamp(
    38px,
    4.5vw,
    72px
  );

  font-weight: 400;
  line-height: 1.02;

  letter-spacing: 0.055em;
}


.weddings-approach-copy {
  grid-column: 2;
  grid-row: 1 / 3;

  align-self: end;

  max-width: 520px;
}


.weddings-approach-copy p {
  margin:
    0
    0
    28px;

  font-size: 14px;
  line-height: 1.85;

  letter-spacing: 0.02em;
}


.weddings-approach-copy p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------
   CONTACTO BODAS
-------------------------------------------------- */

.weddings-contact {
  display: grid;

  grid-template-columns:
    minmax(300px, 0.8fr)
    minmax(500px, 1.2fr);

  gap: clamp(
    70px,
    10vw,
    170px
  );

  align-items: start;

  padding:
    clamp(110px, 13vw, 200px)
    var(--space);

  text-align: left;
}


.weddings-contact-heading {
  position: sticky;
  top: 80px;
}


.weddings-contact-heading h2 {
  margin:
    0
    0
    35px;

  font-size: clamp(
    42px,
    5vw,
    78px
  );

  font-weight: 400;
  line-height: 0.98;

  letter-spacing: 0.055em;
}


.weddings-contact-heading > p:last-child {
  max-width: 420px;

  margin: 0;

  font-size: 14px;
  line-height: 1.8;
}


/* FORMULARIO */

.weddings-contact-form {
  width: 100%;
}


.weddings-form-row {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: clamp(
    25px,
    3vw,
    50px
  );
}


.weddings-field {
  margin-bottom: 42px;
}


.weddings-field label {
  display: block;

  margin-bottom: 12px;

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.18em;
}


.weddings-field input,
.weddings-field textarea {
  display: block;

  width: 100%;

  border: 0;
  border-bottom: 1px solid #aaa;

  border-radius: 0;

  padding:
    10px
    0
    14px;

  background: transparent;

  color: var(--ink);

  font: inherit;
  font-size: 15px;

  outline: none;
}


.weddings-field textarea {
  min-height: 120px;

  resize: vertical;
}


.weddings-field input:focus,
.weddings-field textarea:focus {
  border-bottom-color: var(--ink);
}


.weddings-form-footer {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 30px;

  margin-top: 15px;
}


.weddings-form-footer p {
  max-width: 300px;

  margin: 0;

  font-size: 10px;
  line-height: 1.6;
}


.weddings-form-footer p a {
  text-decoration: underline;
  text-underline-offset: 3px;
}


.weddings-submit {
  flex-shrink: 0;

  background: transparent;

  color: var(--ink);
}


/* HONEYPOT */

.website-field {
  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;

  clip: rect(0 0 0 0);

  white-space: nowrap;
}

/* ==================================================
   WEDDINGS · RESPONSIVE
================================================== */


/* --------------------------------------------------
   TABLET
-------------------------------------------------- */

@media (max-width: 900px) {

  /* INTRO */

  .weddings-intro {
    grid-template-columns:
      1fr
      1fr;
  }

  .weddings-intro .eyebrow {
    grid-column:
      1 / -1;
  }


  /* GALERÍA */

  .weddings-gallery {
    column-count: 2;
  }


  /* ENFOQUE */

  .weddings-approach-content {
    display: block;
  }

  .weddings-approach-content > .eyebrow {
    margin-bottom: 20px;
  }

  .weddings-approach h2 {
    max-width: 680px;

    margin-bottom: 50px;
  }

  .weddings-approach-copy {
    max-width: 580px;
  }
	
.weddings-contact {
  grid-template-columns: 1fr;

  gap: 70px;
}

.weddings-contact-heading {
  position: static;
}	

}




/* --------------------------------------------------
   MÓVIL
-------------------------------------------------- */

@media (max-width: 600px) {

  /* HERO */

  .weddings-hero {
    min-height: 580px;
  }

  .weddings-hero-overlay {
    background:
      linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.08) 70%
      );
  }

  .weddings-hero-copy {
    right: 24px;
    bottom: 12%;
  }

  .weddings-hero h1 {
    font-size:
      clamp(
        46px,
        16vw,
        74px
      );

    letter-spacing: 0.08em;
  }


  /* INTRO */

  .weddings-intro {
    display: block;

    padding:
      80px
      24px;
  }

  .weddings-intro h2 {
    margin-bottom: 35px;

    font-size:
      clamp(
        38px,
        12vw,
        56px
      );  
	
  }


  /* GALERÍA MASONRY */

  .weddings-gallery {
    column-count: 1;

    padding:
      0
      12px
      90px;
  }

  .wedding-photo,
  .wedding-photo.featured-wide,
  .wedding-photo.featured-tall {
    width: 100%;

    margin:
      0
      0
      12px;
  }

  .wedding-photo.featured-wide {
    column-span: none;
  }

  .wedding-photo img,
  .wedding-photo.featured-wide img,
  .wedding-photo.featured-tall img {
    width: 100%;
    height: auto;

    max-height: none;

    object-fit: contain;
  }


  /* ENFOQUE */

  .weddings-approach {
    min-height: 720px;

    padding:
      90px
      24px;
  }

  .weddings-approach-image {
    object-position:
      58%
      center;
  }

  .weddings-approach-overlay {
    background:
      linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.76) 48%,
        rgba(0, 0, 0, 0.28) 100%
      );
  }

  .weddings-approach h2 {
    margin-bottom: 35px;

    font-size:
      clamp(
        36px,
        11vw,
        54px
      );
  }


  /* CONTACTO */

  .weddings-contact {
  padding:
    90px
    24px;
}

.weddings-form-row {
  grid-template-columns: 1fr;

  gap: 0;
}

.weddings-form-footer {
  align-items: flex-start;
  flex-direction: column;
}

.weddings-submit {
  width: 100%;

  justify-content: space-between;
}

}