/* ==========================================================================
   Franco Sovino — sitio
   --------------------------------------------------------------------------
   La PORTADA es una composicion fija medida sobre una referencia de 1353x1163
   y expresada en un unico pixel de diseno: --u. Toda longitud del hero es
   calc(N * var(--u)). No se mezclan rem/%/flex a ojo ahi.

   La GALERIA y el resto del documento, en cambio, son un documento fluido
   normal (clamp/vw). Es deliberado: el hero tiene que ser exacto, el cuerpo
   tiene que respirar con el contenido.
   ========================================================================== */

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

:root {
  --dw: 1353;
  --dh: 1163;
  --gutter: 25;
  --u: max(min(.72px, calc(100vh / 700)), min(calc(100vw / 1353), calc(100vh / 1163)));
  --dh-px: calc(1163 * var(--u));
  --vshift: calc(max(0px, (100vh - var(--dh-px))) * .42);

  --negro:   #0B0B0C;
  --negro-2: #121214;
  --ink:     #ffffff;
  --rojo:    #E0452F;
  --rojo-cl: #F0604A;
  --tenue:   rgba(255, 255, 255, .62);
  --rule:    rgba(255, 255, 255, .23);
  --hair:    rgba(255, 255, 255, .10);
  --btn-ink: #14100F;

  --font-serif: 'Prata', Georgia, 'Times New Roman', serif;
  --font-body:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --tscale equilibra opticamente nombres de largo muy distinto.
     --tem es el ancho medido del titulo mas largo de la seccion, en em de
     Prata (medido en el navegador, no estimado). Con eso el font-size puede
     llevar un tope que garantiza que ningun nombre desborde a ningun ancho:
     sin el, "MATRIMONIOS" se sale de un telefono de 390px. */
  --tscale: 1;
  --tem: 7.0;
}

@supports (height: 100dvh) {
  :root {
    --u: max(min(.72px, calc(100dvh / 700)), min(calc(100vw / 1353), calc(100dvh / 1163)));
    --vshift: calc(max(0px, (100dvh - var(--dh-px))) * .42);
  }
}

html { scroll-behavior: smooth; background: var(--negro) }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

body {
  background: var(--negro);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

img { max-width: 100% }
[hidden] { display: none !important }

.skip {
  position: absolute; left: calc(25 * var(--u)); top: calc(-80 * var(--u)); z-index: 100;
  padding: calc(10 * var(--u)) calc(18 * var(--u)); border-radius: calc(6 * var(--u));
  background: #fff; color: var(--btn-ink); font-weight: 600; text-decoration: none;
  font-size: calc(15 * var(--u));
}
.skip:focus { top: calc(12 * var(--u)) }

/* ==========================================================================
   1. ENTRADA — corre una sola vez y despues se borra sola
   ========================================================================== */

@keyframes ent-reveal { from { transform: translateY(115%) } to { transform: translateY(0) } }
@keyframes ent-rise   { from { opacity: 0; transform: translateY(var(--rise, 10px)) } to { opacity: 1; transform: none } }
@keyframes ent-settle { from { opacity: 0; transform: translateY(var(--rise, 8px)) scale(.965) } to { opacity: 1; transform: none } }
@keyframes ent-draw   { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes ent-fade   { from { opacity: 0 } to { opacity: 1 } }

.anim {
  --e-expo:  cubic-bezier(.16, 1, .3, 1);
  --e-quint: cubic-bezier(.22, 1, .36, 1);
  --e-slow:  cubic-bezier(.4, 0, .2, 1);
}
.ent-mask, .ent-line { display: block }
.anim .ent-mask { overflow: hidden; padding-top: .18em; margin-top: -.18em }
.anim .ent-line { transform: translateY(115%); will-change: transform }

.anim .navbar::after,
.anim .links a[aria-current="page"]::after,
.anim .rule span { transform: scaleX(0) }

.anim .logo, .anim .links a, .anim .burger, .anim p.lede, .anim .label,
.anim .cta a, .anim .scroll, .anim .sky, .anim .peek { opacity: 0 }
.anim .sky { will-change: opacity }

.anim.play .sky                            { animation: ent-fade 1.6s var(--e-slow) .25s both }
.anim.play .navbar::after                  { animation: ent-draw .9s var(--e-expo) .12s both }
.anim.play .logo                           { --rise: calc(8 * var(--u)); animation: ent-rise .6s var(--e-quint) .20s both }
.anim.play .links a                        { --rise: calc(8 * var(--u)); animation: ent-rise .55s var(--e-quint) both }
.anim.play .links a:nth-child(1)           { animation-delay: .26s }
.anim.play .links a:nth-child(2)           { animation-delay: .31s }
.anim.play .links a:nth-child(3)           { animation-delay: .36s }
.anim.play .links a:nth-child(4)           { animation-delay: .41s }
.anim.play .links a:nth-child(5)           { animation-delay: .44s }
.anim.play .links a.enroll,
.anim.play .burger                         { --rise: calc(8 * var(--u)); animation: ent-settle .6s var(--e-quint) .46s both }
.anim.play .links a[aria-current="page"]::after { animation: ent-draw .55s var(--e-expo) .60s both }
.anim.play .eyebrow .ent-line              { animation: ent-reveal .75s var(--e-expo) .30s both }
.anim.play .title .ent-line                { animation: ent-reveal .95s var(--e-expo) .44s both }
.anim.play .rule span                      { animation: ent-draw .65s var(--e-expo) .78s both }
.anim.play p.lede                          { --rise: calc(12 * var(--u)); animation: ent-rise .7s var(--e-quint) .86s both }
.anim.play .peek-prev                      { --rise: calc(10 * var(--u)); animation: ent-rise .7s var(--e-quint) .96s both }
.anim.play .peek-next                      { --rise: calc(10 * var(--u)); animation: ent-rise .7s var(--e-quint) 1.02s both }
.anim.play .label.label-l                  { --rise: calc(8 * var(--u)); animation: ent-rise .6s var(--e-quint) 1.04s both }
.anim.play .label.label-r                  { --rise: calc(8 * var(--u)); animation: ent-rise .6s var(--e-quint) 1.10s both }
.anim.play .cta a                          { --rise: calc(8 * var(--u)); animation: ent-settle .7s var(--e-quint) 1.14s both }
.anim.play .scroll                         { animation: ent-settle .6s var(--e-quint) 1.42s both }

/* ==========================================================================
   2. NAVBAR — fija, transparente sobre la portada y solida al scrollear
   ========================================================================== */

.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: calc(88 * var(--u));
  transition: background-color .3s ease, backdrop-filter .3s ease;
}
.navbar::after {
  content: ""; position: absolute; left: calc(25 * var(--u)); right: calc(25 * var(--u));
  top: calc(86 * var(--u)); height: calc(2 * var(--u)); background: var(--rule);
  transition: opacity .3s ease;
}
.navbar.is-stuck {
  background: rgba(11, 11, 12, .96);
  -webkit-backdrop-filter: blur(calc(14 * var(--u)));
  backdrop-filter: blur(calc(14 * var(--u)));
}
.navbar.is-stuck::after { opacity: .55 }

.navrow {
  position: absolute; left: calc(25 * var(--u)); right: calc(25 * var(--u)); top: 0;
  height: calc(86 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
}

.logo {
  display: inline-flex; align-items: center; gap: calc(7 * var(--u));
  font-family: var(--font-body); font-weight: 700; font-size: calc(18.4 * var(--u));
  letter-spacing: calc(-.15 * var(--u)); line-height: 1; color: #fff;
  text-decoration: none; white-space: nowrap; text-transform: uppercase;
  position: relative; top: calc(-1 * var(--u));
}
.logo-mark {
  width: calc(9 * var(--u)); height: calc(15 * var(--u));
  background: var(--rojo); border-radius: calc(1 * var(--u)); flex: none;
}

.burger {
  display: none; position: relative;
  width: calc(46 * var(--u)); height: calc(46 * var(--u));
  padding: 0; border: 0; background: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center;
  gap: calc(6 * var(--u)); flex: none;
}
.burger span {
  display: block; width: calc(24 * var(--u)); height: calc(2 * var(--u));
  border-radius: calc(2 * var(--u)); background: #fff;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .18s linear;
}
.navrow[data-open="true"] .burger span:nth-child(1) { transform: translateY(calc(8 * var(--u))) rotate(45deg) }
.navrow[data-open="true"] .burger span:nth-child(2) { opacity: 0 }
.navrow[data-open="true"] .burger span:nth-child(3) { transform: translateY(calc(-8 * var(--u))) rotate(-45deg) }

.links { display: flex; align-items: center }
.links a {
  position: relative; display: flex; align-items: center; height: calc(86 * var(--u));
  font-size: calc(16.5 * var(--u)); font-weight: 400; line-height: 1; color: #fff;
  text-decoration: none; padding: 0 calc(14 * var(--u));
  letter-spacing: calc(-.2 * var(--u)); white-space: nowrap;
  transition: color .2s ease;
}
.links a:hover { color: var(--rojo-cl) }
.links a[aria-current="page"]::after {
  content: ""; position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u));
  top: calc(83.5 * var(--u)); height: calc(4 * var(--u));
  background: var(--rojo); border-radius: calc(1 * var(--u));
}
.links a.enroll {
  margin-left: calc(18 * var(--u)); width: calc(107 * var(--u)); height: calc(38 * var(--u));
  border-radius: calc(19 * var(--u)); display: flex; align-items: center; justify-content: center;
  font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: calc(-.4 * var(--u));
  line-height: 1; color: var(--btn-ink); text-decoration: none;
  padding-top: calc(2 * var(--u));
  background: linear-gradient(180deg, #ffffff 0%, #f2e5e2 9%, #f6ebe9 72%, #ffffff 100%);
  box-shadow: 0 calc(3 * var(--u)) calc(14 * var(--u)) rgba(255, 255, 255, .18),
              inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, .92);
  flex: none;
}
.links a.enroll:hover { color: var(--btn-ink) }
.links a.enroll::after { content: none }

/* ==========================================================================
   3. PORTADA
   ========================================================================== */

.hero {
  position: relative; width: 100%; height: 100vh; overflow: hidden;
  isolation: isolate; background: var(--negro);
}
@supports (height: 100dvh) { .hero { height: 100dvh } }

.sky { position: absolute; inset: 0; z-index: 0 }
.sky img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  display: block; opacity: 0;
  /* Un 4% de escala: la mayoria del material es de 1024px de ancho y a sangre
     completa conviene que el borde no coincida exacto con el del viewport. */
  transform: scale(1.04);
  transition: opacity .22s linear;
}
.sky img.is-active { opacity: 1 }

/* Encuadre de cada portada. Va aca y no en un style= del HTML porque en
   vertical hace falta reencuadrar algunas (ver el bloque de telefono). */
.sky img[data-section="lo-que-me-gusta"] { object-position: 50% 0% }   /* arriba, se corta abajo */
.sky img[data-section="matrimonios"]     { object-position: 50% 100% } /* deja el piso y los novios completos */
.sky img[data-section="retratos"]        { object-position: 50% 15% }
.sky img[data-section="producto"]        { object-position: 50% 45% }
.sky img[data-section="eventos"]         { object-position: 50% 32% }

/* Dos capas. La lineal asienta la nav arriba y el pie de la portada abajo; la
   radial oscurece solo la elipse donde vive el texto. Sin la radial el copy se
   pierde apenas la portada tiene una zona clara al medio (una lata roja, una
   pared iluminada) y no hay forma de controlar eso desde el CSS. */
.scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(86% 62% at 50% 40%,
              rgba(0, 0, 0, .60) 0%,
              rgba(0, 0, 0, .40) 45%,
              rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg,
              rgba(0, 0, 0, .62) 0%,
              rgba(0, 0, 0, .20) 34%,
              rgba(0, 0, 0, .40) 64%,
              rgba(0, 0, 0, .84) 100%);
}

.ui { position: absolute; inset: 0; z-index: 3 }

.copy {
  position: absolute; inset: 0;
  transform: translateY(var(--vshift));
  pointer-events: none;
}
.copy a { pointer-events: auto }

.col {
  position: absolute; left: 0; right: calc(var(--gutter) * var(--u));
  text-align: center;
}

.eyebrow {
  top: calc(188.8 * var(--u));
  font-size: calc(26 * var(--u)); font-weight: 500; line-height: 1;
  letter-spacing: calc(4 * var(--u)); text-indent: calc(4 * var(--u));
  text-transform: uppercase; color: #fff;
}

h1.title {
  top: calc(268 * var(--u));
  font-family: var(--font-serif); font-weight: 400;
  font-size: min(calc(112.4 * var(--tscale) * var(--u)),
                 calc((100vw - 56px) / var(--tem)));
  line-height: 1; letter-spacing: calc(2 * var(--u)); text-indent: calc(2 * var(--u));
  text-transform: uppercase; color: #fff;
  text-shadow: 0 calc(2 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .35);
}
/* --tem de "lo que me gusta" cambia segun el tier: en escritorio va en una
   linea (10.6em) y en telefono se parte en dos por el <br class="brk">, con lo
   que la linea mas larga pasa a ser "ME GUSTA" (5.9em). */
.hero[data-section="lo-que-me-gusta"] { --tscale: .82; --tem: 11.4 }
.hero[data-section="matrimonios"]     { --tscale: .92; --tem: 9.1 }
.hero[data-section="retratos"]        { --tem: 6.5 }
.hero[data-section="producto"]        { --tem: 7.0 }
.hero[data-section="eventos"]         { --tem: 5.9 }

.title .brk { display: none }

.rule {
  top: calc(405.5 * var(--u)); height: calc(5 * var(--u));
  font-size: 0; line-height: 0; padding-right: calc(2 * var(--u));
}
.rule span {
  display: inline-block; vertical-align: top;
  width: calc(100 * var(--u)); height: 100%;
  border-radius: calc(2.5 * var(--u)); background: var(--rojo);
}

p.lede {
  top: calc(433.2 * var(--u));
  font-size: calc(18.36 * var(--u)); font-weight: 400;
  line-height: calc(30 * var(--u)); color: rgba(255, 255, 255, .95);
  max-width: calc(660 * var(--u)); margin-left: auto; margin-right: auto;
  text-wrap: pretty;
  text-shadow: 0 calc(1 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .5);
}

/* --- fila de accion: recorte + boton + recorte ---------------------------- */

.cta { top: calc(597 * var(--u)); height: calc(66 * var(--u)); isolation: isolate }
.cta a {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(216 * var(--u)); height: calc(66 * var(--u));
  border-radius: calc(33 * var(--u));
  font-size: calc(16 * var(--u)); font-weight: 700; letter-spacing: calc(1 * var(--u));
  text-indent: 0; line-height: 1; color: var(--btn-ink); text-decoration: none;
  padding-top: calc(2 * var(--u));
  background: linear-gradient(180deg, #ffffff 0%, #f1e3e0 4%, #f7ecea 72%, #ffffff 100%);
  box-shadow: 0 calc(10 * var(--u)) calc(18 * var(--u)) calc(-8 * var(--u)) rgba(255, 255, 255, .45),
              0 0 calc(26 * var(--u)) rgba(0, 0, 0, .28),
              inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, .9);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.cta a:hover { transform: translateY(calc(-2 * var(--u))) }

.peek {
  position: absolute; z-index: -1; padding: 0; border: 0; background: none;
  -webkit-appearance: none; appearance: none; line-height: 0; cursor: pointer;
  pointer-events: auto;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.peek img {
  display: none; width: 100%; height: auto; border-radius: 50%;
  box-shadow: 0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .55),
              inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, .18);
}
.peek img.is-shown { display: block }
.peek:hover { transform: scale(1.045) }
.peek:active { transform: scale(.99) }

/* 200u de diametro con 86u fuera de cuadro: quedan 114u a la vista de cada
   lado. La referencia usaba 143u porque sus planetas eran esferas reconocibles
   a cualquier tamano; un recorte fotografico necesita mas superficie para
   leerse. El top centra el circulo sobre la fila de 66u: (66 - 200) / 2. */
.peek-prev { width: calc(200 * var(--u)); left:  calc(-86 * var(--u)); top: calc(-67 * var(--u)) }
.peek-next { width: calc(200 * var(--u)); right: calc(-86 * var(--u)); top: calc(-67 * var(--u)) }

/* El chevron va sobre foto, no sobre un fondo controlado: sin el disco se
   pierde apenas cae sobre una zona clara (una camisa blanca, un cielo). */
.chev {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: calc(36 * var(--u)); height: calc(36 * var(--u));
  padding: calc(7 * var(--u)); border-radius: 50%;
  background: rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(calc(3 * var(--u)));
  backdrop-filter: blur(calc(3 * var(--u)));
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .22);
  opacity: .82; transition: opacity .25s ease, background-color .25s ease;
}
.peek-prev .chev { right: calc(39 * var(--u)) }
.peek-next .chev { left:  calc(39 * var(--u)) }
.peek:hover .chev { background: rgba(0, 0, 0, .6) }
.peek:hover .chev, .peek:focus-visible .chev { opacity: 1 }
@media (hover: none) { .chev { opacity: .95 } }

.label {
  position: absolute; top: calc(33 * var(--u));
  font-family: var(--font-serif); font-weight: 400;
  font-size: calc(15.5 * var(--u)); letter-spacing: calc(3.4 * var(--u));
  line-height: 1; color: #fff; white-space: nowrap; text-transform: uppercase;
  text-shadow: 0 calc(1 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .7);
}
.label.label-l { left: calc(132 * var(--u)) }
.label.label-r { right: calc(126 * var(--u)) }

.scroll {
  position: absolute; z-index: 4; left: 50%;
  margin-left: calc((-48 - (var(--gutter) / 2)) * var(--u));
  bottom: calc(48 * var(--u));
  width: calc(96 * var(--u)); height: calc(96 * var(--u)); border-radius: 50%;
  background: rgba(24, 24, 26, .70);
  -webkit-backdrop-filter: blur(calc(6 * var(--u)));
  backdrop-filter: blur(calc(6 * var(--u)));
  border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.scroll svg { width: calc(20 * var(--u)); height: calc(25 * var(--u)); display: block }

/* ==========================================================================
   4. GALERIA — de aca para abajo el documento es fluido, no medido en --u
   ========================================================================== */

/* La nav es fija: sin esto los destinos de scroll quedan debajo de la barra. */
.work, .about, .contact { scroll-margin-top: calc(88 * var(--u)) }

.work {
  background: var(--negro);
  padding: clamp(44px, 5.5vw, 92px) clamp(16px, 3vw, 40px) clamp(40px, 5vw, 80px);
  max-width: 1900px; margin: 0 auto;
}
.work-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: clamp(18px, 2vw, 30px);
  margin-bottom: clamp(18px, 2vw, 30px);
  border-bottom: 1px solid var(--hair);
}
.work-title {
  font-family: var(--font-serif); font-weight: 400; text-transform: uppercase;
  font-size: clamp(22px, 3.4vw, 40px); letter-spacing: .02em; line-height: 1.05;
}
.work-count { color: var(--tenue); font-size: clamp(13px, 1.3vw, 15px); letter-spacing: .06em; text-transform: uppercase }

/* A 3 columnas en un monitor ancho cada foto pasa de 600px y se ve una por
   pantalla; con 44 fotos de producto eso es un scroll interminable. */
.grid { columns: 3; column-gap: clamp(10px, 1.1vw, 16px) }
@media (min-width: 1500px) { .grid { columns: 4 } }
@media (max-width: 1030px) { .grid { columns: 2 } }
@media (max-width: 579px)  { .grid { columns: 1 } }

@keyframes grid-in { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.grid { animation: grid-in .38s cubic-bezier(.22, 1, .36, 1) both }

.shot {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  margin: 0 0 clamp(10px, 1.1vw, 16px); line-height: 0; cursor: zoom-in;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  position: relative; overflow: hidden; border-radius: 2px;
}
.shot img {
  width: 100%; height: auto; display: block;
  background: var(--negro-2);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.shot:hover img { transform: scale(1.035) }
.shot::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(224, 69, 47, 0); transition: background .3s ease;
}
.shot:hover::after { background: rgba(224, 69, 47, .10) }

.nojs { color: var(--tenue); padding: 40px 0 }
.nojs a { color: var(--rojo-cl) }

/* ==========================================================================
   5. SOBRE / CONTACTO / PIE
   ========================================================================== */

.about {
  background: var(--negro-2);
  padding: clamp(64px, 8vw, 130px) clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--hair);
}
.about-in { max-width: 720px; margin: 0 auto; text-align: center }
.about-kicker {
  font-family: var(--font-serif); color: var(--rojo);
  font-size: clamp(18px, 2vw, 24px); margin-bottom: clamp(14px, 1.6vw, 22px);
}
.about-lead {
  font-family: var(--font-serif); font-size: clamp(26px, 4.2vw, 46px);
  line-height: 1.18; margin-bottom: clamp(22px, 2.6vw, 34px); text-wrap: balance;
}
.about p + p { margin-top: 1em }
.about-in > p:not(.about-kicker):not(.about-lead) {
  color: rgba(255, 255, 255, .78); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.65;
}

.contact {
  background: var(--negro);
  padding: clamp(64px, 8vw, 130px) clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--hair);
}
.contact-in { max-width: 900px; margin: 0 auto }
.contact-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(34px, 6vw, 72px); line-height: 1.05;
}
.contact-title .acc { color: var(--rojo) }
.contact-lead {
  color: var(--tenue); margin-top: clamp(12px, 1.4vw, 18px);
  font-size: clamp(15px, 1.5vw, 18px); max-width: 46ch;
}
.contact-list {
  list-style: none; margin-top: clamp(30px, 4vw, 56px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
@media (max-width: 579px) { .contact-list { grid-template-columns: 1fr } }
.contact-list li { border-top: 1px solid var(--hair); padding-top: clamp(12px, 1.4vw, 18px) }
.ct-label {
  display: block; color: var(--tenue);
  font-size: clamp(11px, 1.1vw, 13px); letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: clamp(6px, .7vw, 10px);
}
.contact-list a {
  color: #fff; text-decoration: none; font-size: clamp(17px, 2vw, 24px);
  border-bottom: 1px solid transparent; transition: border-color .25s ease, color .25s ease;
}
.contact-list a:hover { color: var(--rojo-cl); border-bottom-color: var(--rojo) }

.foot {
  background: var(--negro); border-top: 1px solid var(--hair);
  padding: clamp(30px, 4vw, 52px) clamp(20px, 3vw, 40px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.foot-logo {
  width: clamp(140px, 16vw, 210px); height: auto; display: block;
  /* El logo original es negro sobre blanco: se invierte el negro a blanco y se
     deja el rojo casi intacto. */
  filter: invert(1) hue-rotate(180deg) saturate(1.25);
}
.foot p { color: var(--tenue); font-size: clamp(12px, 1.2vw, 14px) }

/* ==========================================================================
   6. LIGHTBOX
   ========================================================================== */

.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(6, 6, 7, .95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(48px, 6vw, 80px) clamp(56px, 8vw, 110px);
  animation: ent-fade .2s linear both;
}
.lb-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100% }
.lb-img {
  max-width: 100%; max-height: calc(100vh - 190px);
  width: auto; height: auto; display: block; object-fit: contain;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
}
@supports (height: 100dvh) { .lb-img { max-height: calc(100dvh - 190px) } }
.lb-count { color: var(--tenue); font-size: 13px; letter-spacing: .14em; text-transform: uppercase }

.lb-btn {
  position: absolute; z-index: 2; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .07);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; transition: background .2s ease;
}
.lb-btn:hover { background: rgba(255, 255, 255, .18) }
.lb-btn svg { width: 16px; height: 22px }
.lb-close { top: 20px; right: 20px }
.lb-close svg { width: 20px; height: 20px }
.lb-prev { left: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%) }
.lb-next { right: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%) }
body.lb-open { overflow: hidden }

/* ==========================================================================
   7. FOCO
   ========================================================================== */

.scroll:focus-visible, .links a:focus-visible, .enroll:focus-visible,
.cta a:focus-visible, .logo:focus-visible, .shot:focus-visible,
.lb-btn:focus-visible, .contact-list a:focus-visible, .skip:focus-visible {
  outline: calc(2 * var(--u)) solid var(--rojo); outline-offset: calc(3 * var(--u));
}
.peek:focus-visible { outline: calc(2 * var(--u)) solid var(--rojo); outline-offset: calc(6 * var(--u)); border-radius: 50% }
.shot:focus-visible, .lb-btn:focus-visible, .contact-list a:focus-visible { outline-width: 2px; outline-offset: 3px }

/* ==========================================================================
   8. RESPONSIVE — seis tiers, en este orden exacto de declaracion
   ========================================================================== */

/* --- A) NAV COLAPSADA ------------------------- (mismo markup, otra forma) - */
@media (max-width: 1030px), (max-height: 620px) {
  .burger { display: flex }
  .links {
    position: absolute; top: calc(96 * var(--u)); right: 0; z-index: 5;
    width: min(calc(324 * var(--u)), calc(100vw - 50 * var(--u)));
    flex-direction: column; align-items: stretch; padding: calc(12 * var(--u));
    border-radius: calc(20 * var(--u));
    background: rgba(12, 12, 14, .92);
    -webkit-backdrop-filter: blur(calc(18 * var(--u)));
    backdrop-filter: blur(calc(18 * var(--u)));
    border: calc(1 * var(--u)) solid rgba(255, 255, 255, .14);
    box-shadow: 0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(0, 0, 0, .6);
    opacity: 0; visibility: hidden; transform: translateY(calc(-10 * var(--u)));
    transition: opacity .24s ease, transform .28s cubic-bezier(.4, 0, .2, 1), visibility .28s;
  }
  .navrow[data-open="true"] .links { opacity: 1; visibility: visible; transform: none }
  .links a:nth-child(n) {
    margin-left: 0; height: auto; justify-content: flex-start;
    padding: calc(14 * var(--u)) calc(16 * var(--u)); font-size: calc(19 * var(--u));
    letter-spacing: calc(-.3 * var(--u));
  }
  .links a + a { border-top: calc(1 * var(--u)) solid rgba(255, 255, 255, .08) }
  .links a[aria-current="page"]::after {
    top: auto; bottom: calc(9 * var(--u)); left: calc(16 * var(--u)); right: auto;
    width: calc(26 * var(--u)); height: calc(3 * var(--u));
  }
  .links a.enroll {
    margin: calc(14 * var(--u)) 0 calc(2 * var(--u)); width: 100%;
    height: calc(46 * var(--u)); border-radius: calc(23 * var(--u)); justify-content: center;
    padding-top: calc(2 * var(--u)); font-size: calc(18 * var(--u));
    letter-spacing: calc(-.2 * var(--u)); border-top: 0;
  }
  .links a.enroll::after { content: none }
}

/* --- B) TABLET ------------ (se reproporciona, NO se apila: la fila         */
/*                             recorte / boton / recorte es la firma)         */
@media (min-width: 580px) and (max-width: 1030px) and (min-height: 621px) {
  :root {
    --gutter: 0;
    --u: min(max(min(.85px, calc(100vh / 780)), min(calc(100vw / 900), calc(100vh / 1163))), 1.15px);
    --dh-px: calc(1120 * var(--u));
    --vshift: calc(max(0px, (100vh - var(--dh-px))) * .38);
  }
  @supports (height: 100dvh) {
    :root {
      --u: min(max(min(.85px, calc(100dvh / 780)), min(calc(100vw / 900), calc(100dvh / 1163))), 1.15px);
      --vshift: calc(max(0px, (100dvh - var(--dh-px))) * .38);
    }
  }
  p.lede { max-width: calc(620 * var(--u)) }
  .label.label-r { right: calc(140 * var(--u)) }
}

/* --- C) TELEFONO ------- (bajo la nav la interfaz FLUYE en columna, asi se  */
/*                          adapta a cuantas lineas ocupe cada texto)         */
@media (max-width: 579px), (max-height: 620px) {
  :root {
    --gutter: 0;
    --u: max(min(.92px, calc(100vh / 620)), min(calc(100vw / 430), calc(100vh / 880)));
    --dh-px: calc(880 * var(--u));
    --vshift: calc(max(0px, (100vh - var(--dh-px))) * .34);
  }
  @supports (height: 100dvh) {
    :root {
      --u: max(min(.92px, calc(100dvh / 620)), min(calc(100vw / 430), calc(100dvh / 880)));
      --vshift: calc(max(0px, (100dvh - var(--dh-px))) * .34);
    }
  }
  /* En vertical el recorte es horizontal y muy agresivo: la portada de
     matrimonios tiene a los novios en los dos extremos, asi que centrada
     dejaria solo el muro vacio y el poste. Se corre hacia la novia. */
  .sky img[data-section="matrimonios"] { object-position: 80% 100% }

  .navbar { height: calc(76 * var(--u)) }
  .navbar::after { left: calc(24 * var(--u)); right: calc(24 * var(--u)); top: calc(74 * var(--u)) }
  .navrow { left: calc(24 * var(--u)); right: calc(24 * var(--u)); height: calc(74 * var(--u)) }
  .links { top: calc(84 * var(--u)) }

  .copy {
    top: calc(76 * var(--u)); display: flex; flex-direction: column; align-items: center;
    padding: calc(52 * var(--u)) calc(26 * var(--u)) 0;
  }
  .col { position: static; width: 100%; right: auto }

  .eyebrow { font-size: calc(18 * var(--u)); letter-spacing: calc(4.5 * var(--u)); text-indent: calc(4.5 * var(--u)) }
  h1.title {
    font-size: min(calc(80 * var(--tscale) * var(--u)),
                   calc((100vw - 52px) / var(--tem)));
    margin-top: calc(15 * var(--u));
  }
  .title .brk { display: block }
  .hero[data-section="lo-que-me-gusta"] { --tem: 6.5 }
  .rule { margin-top: calc(20 * var(--u)); height: calc(5 * var(--u)); padding-right: 0 }
  .rule span { width: calc(84 * var(--u)) }
  p.lede {
    margin-top: calc(19 * var(--u)); font-size: calc(15.5 * var(--u));
    line-height: calc(26 * var(--u)); max-width: calc(400 * var(--u)); text-wrap: balance;
  }

  .cta { top: auto; margin-top: calc(30 * var(--u)); height: calc(60 * var(--u)); position: relative }
  .cta a { width: calc(190 * var(--u)); height: calc(60 * var(--u)); border-radius: calc(30 * var(--u)) }
  .label { top: 50%; transform: translateY(-50%); font-size: calc(14 * var(--u)); letter-spacing: calc(3 * var(--u)) }
  .label.label-l { left: calc(76 * var(--u)) }
  .label.label-r { right: calc(76 * var(--u)) }
  /* (60 - 118) / 2 = -29 para centrar sobre la fila de 60u del telefono */
  .peek-prev { width: calc(118 * var(--u)); left:  calc(-52 * var(--u)); top: calc(-29 * var(--u)) }
  .peek-next { width: calc(118 * var(--u)); right: calc(-52 * var(--u)); top: calc(-29 * var(--u)) }
  .chev { width: calc(30 * var(--u)); height: calc(30 * var(--u)); padding: calc(6 * var(--u)) }
  .peek-prev .chev { right: calc(18 * var(--u)) }
  .peek-next .chev { left:  calc(18 * var(--u)) }

  .scroll {
    width: calc(74 * var(--u)); height: calc(74 * var(--u));
    margin-left: calc(-37 * var(--u)); bottom: calc(34 * var(--u));
  }
  .scroll svg { width: calc(15.5 * var(--u)); height: calc(19.5 * var(--u)) }
}

/* --- D) sin espacio para la flecha ---------------------------------------- */
@media (max-height: 660px) { .scroll { display: none } }

/* --- E) VIEWPORT BAJO ----------------------------------------------------- */
@media (max-height: 620px) {
  :root {
    --u: max(min(.85px, calc(100vh / 470)), min(calc(100vw / 640), calc(100vh / 560)));
    --dh-px: calc(560 * var(--u));
    --vshift: 0px;
  }
  .copy { padding-top: calc(24 * var(--u)) }
  h1.title {
    font-size: min(calc(62 * var(--tscale) * var(--u)),
                   calc((100vw - 52px) / var(--tem)));
    margin-top: calc(8 * var(--u));
  }
  .title .brk { display: none }
  .hero[data-section="lo-que-me-gusta"] { --tem: 11.4 }
  .rule { margin-top: calc(12 * var(--u)) }
  p.lede { margin-top: calc(12 * var(--u)) }
  .cta { margin-top: calc(20 * var(--u)) }
  .label { top: 50%; transform: translateY(-50%); font-size: calc(13.5 * var(--u)) }
  .label.label-l { left: calc(76 * var(--u)) }
  .label.label-r { right: calc(76 * var(--u)) }
}
@media (min-width: 821px) and (max-height: 660px) { .copy { transform: none } }

/* --- F) TELEFONO ANGOSTO ------ (declarado ULTIMO para ganarle al tier E:   */
/*        bajo ~560px la etiqueta ya no cabe entre el recorte y el boton, asi */
/*        que las dos bajan a su propia banda, ancladas a los bordes)         */
@media (max-width: 560px) {
  .label { top: calc(100% + 30 * var(--u)); transform: none; font-size: calc(13 * var(--u)) }
  .label.label-l { left: calc(4 * var(--u)) }
  .label.label-r { right: calc(4 * var(--u)) }
  .title .brk { display: block }
  .hero[data-section="lo-que-me-gusta"] { --tem: 6.5 }
}

/* Bajo 400px el peor par posible ("PRODUCTO" + "LO QUE ME GUSTA") ya no entra
   en una linea ni pegado a los bordes: se achica el cuerpo y el tracking. */
@media (max-width: 400px) {
  .label { font-size: calc(11 * var(--u)); letter-spacing: calc(1.6 * var(--u)) }
  .label.label-l { left: 0 }
  .label.label-r { right: 0 }
}

/* ==========================================================================
   9. MOVIMIENTO REDUCIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sky img { transition: none }
  .peek { transition: none }
  .peek:hover, .peek:active { transform: none }
  .shot:hover img { transform: none }
  .cta a:hover { transform: none }
  .links, .burger span { transition: none }
  .grid { animation: none }
  .lightbox { animation: none }
}