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

:root {
  --black:#060606;
  --white:#f0ebe4;
  --red:#c0392b;
  --muted:rgba(240,235,228,.42);
  --muted2:rgba(240,235,228,.1);
  --gray:#0f0f0f;
  --gray2:#1a1a1a;
  }

html {
  scroll-behavior:smooth}

body {
  background:var(--black);
  color:var(--white);
  font-family:"Inter",sans-serif;
  font-weight:300;
  overflow-x:hidden}

body::after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:900;
  opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px}

.float-cta {
  position:fixed;
  bottom:2rem;
  right:2rem;
  z-index:400;
  background:var(--red);
  color:var(--white);
  padding:.85rem 1.6rem;
  font-family:"Bebas Neue",sans-serif;
  font-size:.95rem;
  letter-spacing:.22em;
  text-decoration:none;
  display:block;
  opacity:0;
  transform:translateY(12px);
  animation:floatIn .6s ease 3.6s forwards;
  transition:background .3s,transform .2s,opacity .45s ease,visibility 0s linear 0s}

.float-cta:hover {
  background:#a93226;
  transform:translateY(-2px) scale(1.02)}

.float-cta:active {
  transform:scale(.97)}

/* cerca del final del scroll el CTA es redundante: la seccion notify ya esta a la vista */
.float-cta.is-far-scrolled {
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:background .3s,transform .2s,opacity .35s ease,visibility 0s linear .35s;
  visibility:hidden}

@keyframes floatIn{to {
  opacity:1;
  transform:translateY(0)}}

.intro {
  position:fixed;
  inset:0;
  z-index:700;
  background:var(--black);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  cursor:pointer}

/* el intro se salta con click; una vez oculto no debe interceptar nada */
.intro.hide {
  animation:introOut .8s ease forwards;
  pointer-events:none}

@keyframes introOut{to {
  opacity:0;
  visibility:hidden}}

.intro-logo {
  width:clamp(160px,28vw,240px);
  height:auto;
  opacity:0;
  animation:scaleIn .9s ease .3s forwards}

@keyframes scaleIn{from {
  opacity:0;
  transform:scale(.92)}

to {
  opacity:1;
  transform:scale(1)}}

.intro-line {
  width:0;
  height:.5px;
  background:var(--red);
  animation:grow .7s ease 1.1s forwards}

@keyframes grow{to {
  width:88px}}

.intro-sub {
  font-family:"Playfair Display",serif;
  font-size:.82rem;
  font-style:italic;
  letter-spacing:.22em;
  color:var(--muted);
  opacity:0;
  animation:fadeIn .5s ease 1.8s forwards}

@keyframes fadeIn{to {
  opacity:1}}

nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:500;
  padding:1.2rem 3.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transform:translateY(-100%);
  transition:transform .4s ease,background .4s ease,border-color .4s;
  border-bottom:.5px solid transparent}

nav.visible {
  transform:translateY(0);
  background:rgba(6,6,6,.0);
  backdrop-filter:blur(0px)}

nav.scrolled {
  background:rgba(6,6,6,.88);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--muted2)}

.nav-logo img {
  width:clamp(90px,7vw,140px);
  height:auto;
  display:block;
  background:transparent}

.nav-links {
  display:flex;
  gap:2.5rem;
  list-style:none}

.nav-links a {
  color:var(--muted);
  text-decoration:none;
  font-size:.6rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  transition:color .3s;
  position:relative}

.nav-links a::after {
  content:"";
  position:absolute;
  bottom:-3px;
  left:0;
  width:0;
  height:.5px;
  background:var(--red);
  transition:width .3s}

.nav-links a:hover {
  color:var(--white)}

.nav-links a:hover::after {
  width:100%}

.nav-ig a {
  color:var(--muted);
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  transition:color .3s;
  font-variant-emoji:text}

.nav-ig a:hover {
  color:var(--white)}

.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:.5rem;
  position:relative;
  z-index:601}

.hamburger span {
  display:block;
  width:22px;
  height:.5px;
  background:var(--white);
  transition:all .35s cubic-bezier(.23,1,.32,1)}

.hamburger.open span:nth-child(1) {
  transform:translateY(5.5px) rotate(45deg)}

.hamburger.open span:nth-child(2) {
  opacity:0;
  transform:translateX(-8px)}

.hamburger.open span:nth-child(3) {
  transform:translateY(-5.5px) rotate(-45deg)}

.menu-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:598;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease}

.menu-overlay.open {
  opacity:1;
  visibility:visible}

.mobile-menu {
  position:fixed;
  top:0;
  right:0;
  width:min(320px,85vw);
  height:100vh;
  background:rgba(6,6,6,.98);
  backdrop-filter:blur(20px);
  z-index:600;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:3rem 2.5rem;
  gap:2rem;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .4s cubic-bezier(.23,1,.32,1),visibility 0s linear .4s;
  border-left:.5px solid var(--muted2)}

.mobile-menu.open {
  transform:translateX(0);
  visibility:visible;
  transition:transform .4s cubic-bezier(.23,1,.32,1),visibility 0s}

.menu-close {
  position:absolute;
  top:1.5rem;
  right:1.5rem;
  background:none;
  border:none;
  color:var(--muted);
  font-size:1.2rem;
  transition:all .3s;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:.5px solid var(--muted2)}

.menu-close:hover {
  color:var(--white);
  border-color:var(--red);
  transform:rotate(90deg)}

.mobile-menu a {
  font-family:"Bebas Neue",sans-serif;
  font-size:2.2rem;
  letter-spacing:.1em;
  color:var(--muted);
  text-decoration:none;
  transition:color .25s,transform .25s;
  display:block;
  transform:translateX(20px);
  opacity:0}

.mobile-menu.open a {
  opacity:1;
  transform:translateX(0)}

/* nth-of-type y no nth-child: entre los links hay divisores y el boton de cerrar */
.mobile-menu.open a:nth-of-type(2) {
  transition-delay:.05s}

.mobile-menu.open a:nth-of-type(3) {
  transition-delay:.1s}

.mobile-menu.open a:nth-of-type(4) {
  transition-delay:.15s}

.mobile-menu.open a:nth-of-type(5) {
  transition-delay:.2s}

.mobile-menu a:hover {
  color:var(--white)}

.mob-ig {
  font-size:1rem !important;
  color:var(--red) !important;
  margin-top:1rem;
  font-variant-emoji:text}

.menu-divider {
  width:40px;
  height:.5px;
  background:var(--muted2);
  margin:.5rem 0}

/* accesible para lectores de pantalla, invisible en pantalla */
.visually-hidden {
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0}

.hero {
  height:100vh;
  height:100svh;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 3.5rem;
  overflow:hidden}

.hero-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  transform-origin:center;
  animation:heroZoom 20s ease-in-out infinite alternate}

@keyframes heroZoom{from {
  transform:scale(1)}

to {
  transform:scale(1.06)}}

.hero-ov1 {
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(6,6,6,.97) 0%,rgba(6,6,6,.5) 40%,rgba(6,6,6,.65) 100%);
  z-index:1}

.hero-ov2 {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 60% 50% at 20% 60%,rgba(192,57,43,.08),transparent 60%);
  z-index:1}

.hero-text-bg {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:70%;
  background:linear-gradient(180deg,rgba(6,6,6,.4) 0%,transparent 100%);
  z-index:1;
  pointer-events:none}

.hero-content {
  position:relative;
  z-index:2;
  max-width:680px;
  padding-top:5vh}

.hero-eyebrow {
  font-size:.55rem;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:1.8rem;
  display:flex;
  align-items:center;
  gap:.8rem;
  opacity:0;
  animation:fadeUp .8s ease 3s forwards}

.hero-eyebrow::before {
  content:"";
  display:inline-block;
  width:18px;
  height:.5px;
  background:var(--red)}

@keyframes fadeUp{from {
  opacity:0;
  transform:translateY(20px)}

to {
  opacity:1;
  transform:translateY(0)}}

.hero-headline {
  font-family:"Playfair Display",serif;
  font-size:clamp(2.8rem,6.5vw,5.8rem);
  font-weight:400;
  line-height:1.04;
  margin-bottom:1.4rem;
  opacity:0;
  animation:fadeUp .9s ease 3.2s forwards}

.hero-headline em {
  font-style:italic;
  color:var(--muted)}

.hero-subline {
  font-size:clamp(.78rem,1.3vw,.95rem);
  color:var(--muted);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:2.8rem;
  font-weight:300;
  opacity:0;
  animation:fadeUp .8s ease 3.5s forwards}

.hero-cta {
  background:transparent;
  border:.5px solid rgba(240,235,228,.35);
  color:var(--white);
  padding:.9rem 2.2rem;
  font-family:"Bebas Neue",sans-serif;
  font-size:.95rem;
  letter-spacing:.25em;
  text-decoration:none;
  display:inline-block;
  transition:all .3s;
  opacity:0;
  animation:fadeUp .7s ease 3.8s forwards}

.hero-cta:hover {
  background:var(--red);
  border-color:var(--red);
  transform:scale(1.03)}

.hero-cta:active {
  transform:scale(.97)}

.hero-meta {
  position:absolute;
  bottom:3rem;
  left:3.5rem;
  font-size:.54rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:2.3;
  z-index:2;
  opacity:0;
  animation:fadeIn .8s ease 4s forwards}

.hero-scroll {
  position:absolute;
  bottom:3rem;
  right:3.5rem;
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.52rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  z-index:2;
  opacity:0;
  animation:fadeIn .8s ease 4.2s forwards}

.scroll-ln {
  width:0;
  height:.5px;
  background:var(--muted);
  animation:expand 1s ease 4.5s forwards}

@keyframes expand{to {
  width:32px}}

.info-bar {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  background:var(--gray);
  border-top:.5px solid var(--muted2);
  border-bottom:.5px solid var(--muted2)}

.info-col {
  padding:2rem 3.5rem;
  position:relative}

.info-col:not(:last-child)::after {
  content:"";
  position:absolute;
  right:0;
  top:22%;
  bottom:22%;
  width:.5px;
  background:var(--muted2)}

.info-lbl {
  font-size:.48rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:.5rem}

.info-title {
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(.9rem,1.6vw,1.2rem);
  letter-spacing:.07em;
  line-height:1.2}

.info-sub {
  font-size:.66rem;
  color:var(--muted);
  font-family:"Playfair Display",serif;
  font-style:italic;
  margin-top:.3rem}

.mq {
  overflow:hidden;
  border-bottom:.5px solid var(--muted2);
  padding:.7rem 0;
  background:var(--black)}

.mq-track {
  display:flex;
  width:max-content;
  animation:mq 32s linear infinite}

.mq-item {
  font-family:"Bebas Neue",sans-serif;
  font-size:.78rem;
  letter-spacing:.18em;
  color:var(--muted);
  padding:0 2.5rem;
  white-space:nowrap}

.mq-dot {
  color:var(--red)}

@keyframes mq{from {
  transform:translateX(0)}

to {
  transform:translateX(-50%)}}

.reveal {
  opacity:0;
  transform:translateY(32px);
  transition:opacity .8s ease,transform .8s ease}

.reveal.visible {
  opacity:1;
  transform:translateY(0)}

.reveal-delay-1 {
  transition-delay:.15s}

.reveal-delay-2 {
  transition-delay:.3s}

.reveal-delay-3 {
  transition-delay:.45s}

.identity {
  padding:8rem 3.5rem;
  background:var(--black);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6rem;
  align-items:center}

.slbl {
  font-size:.52rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:1.5rem;
  display:flex;
  align-items:center;
  gap:.8rem}

.slbl::after {
  content:"";
  height:.5px;
  background:rgba(192,57,43,.22);
  width:36px}

.id-title {
  font-family:"Playfair Display",serif;
  font-size:clamp(2rem,4vw,3.3rem);
  font-weight:400;
  line-height:1.08;
  margin-bottom:2rem}

.id-title em {
  font-style:italic;
  color:var(--muted)}

.id-text {
  font-size:.81rem;
  line-height:2.1;
  color:var(--muted);
  margin-bottom:1.2rem}

.id-pills {
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:2rem}

.pill {
  border:.5px solid var(--muted2);
  padding:.28rem .78rem;
  font-size:.52rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  transition:all .3s}

.pill:hover {
  border-color:var(--red);
  color:var(--white)}

.id-visual {
  position:relative}

.id-img-main {
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block}

.id-star-spin {
  position:absolute;
  top:-14px;
  right:-14px;
  width:46px;
  height:46px;
  object-fit:contain;
  opacity:.9;
  animation:spin 20s linear infinite}

@keyframes spin{from {
  transform:rotate(0)}

to {
  transform:rotate(360deg)}}

.scroll-story {
  background:var(--black)}

.story-item {
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  overflow:hidden}

.story-item:nth-child(even) .story-img {
  order:2}

.story-item:nth-child(even) .story-content {
  order:1}

.story-img {
  position:relative;
  overflow:hidden;
  min-height:100vh}

.story-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .9s ease}

.story-item:hover .story-img img {
  transform:scale(1.04)}

.story-ov {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(6,6,6,.45),transparent);
  pointer-events:none}

.story-item:nth-child(even) .story-ov {
  background:linear-gradient(270deg,rgba(6,6,6,.45),transparent)}

.story-content {
  padding:5rem 4rem;
  display:flex;
  flex-direction:column;
  justify-content:center}

.story-num {
  font-family:"Bebas Neue",sans-serif;
  font-size:5rem;
  color:rgba(192,57,43,.1);
  line-height:1;
  margin-bottom:-.5rem}

.story-title {
  font-family:"Playfair Display",serif;
  font-size:clamp(1.7rem,3vw,2.7rem);
  font-weight:400;
  line-height:1.1;
  margin-bottom:1.4rem}

.story-title em {
  font-style:italic;
  color:var(--muted)}

.story-text {
  font-size:.8rem;
  line-height:2.1;
  color:var(--muted);
  margin-bottom:1.4rem}

.story-tag {
  font-family:"Bebas Neue",sans-serif;
  font-size:.7rem;
  letter-spacing:.28em;
  color:var(--red);
  display:flex;
  align-items:center;
  gap:.5rem}

.story-tag::before {
  content:"";
  width:12px;
  height:.5px;
  background:var(--red)}

.gallery {
  padding:6rem 3.5rem;
  background:var(--gray)}

.gallery-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:2.5rem}

.gallery-title {
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(2.2rem,4.5vw,4rem);
  letter-spacing:.04em;
  line-height:1}

.gallery-title span {
  font-size:.48rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  display:block;
  color:var(--red);
  margin-bottom:.5rem;
  font-family:"Inter",sans-serif;
  font-weight:300}

.gallery-sub {
  font-size:.54rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:right;
  line-height:2}

.gallery-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:5px}

.gi {
  overflow:hidden;
  position:relative;
  background:var(--gray2)}

.gi img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s ease,filter .4s ease}

.gi:hover img {
  transform:scale(1.07);
  filter:brightness(1.08)}

.gi::after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(6,6,6,0);
  transition:.4s}

.gi:hover::after {
  background:rgba(6,6,6,.25)}

.gi-tag {
  position:absolute;
  bottom:.7rem;
  left:.7rem;
  font-size:.46rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(240,235,228,.55);
  z-index:1;
  background:rgba(6,6,6,.65);
  padding:.24rem .5rem;
  transition:opacity .3s}

.gi:hover .gi-tag {
  opacity:0}

.g1 {
  grid-column:1/5;
  grid-row:1;
  min-height:320px}

.g2 {
  grid-column:5/9;
  grid-row:1;
  min-height:320px}

.g3 {
  grid-column:9/13;
  grid-row:1;
  min-height:320px}

.g4 {
  grid-column:1/4;
  grid-row:2;
  min-height:260px}

.g5 {
  grid-column:4/7;
  grid-row:2;
  min-height:260px}

.g6 {
  grid-column:7/10;
  grid-row:2;
  min-height:260px}

.g7 {
  grid-column:10/13;
  grid-row:2;
  min-height:260px}

.g8 {
  grid-column:1/7;
  grid-row:3;
  min-height:300px}

.g9 {
  grid-column:7/13;
  grid-row:3;
  min-height:300px}

.alto {
  padding:8rem 3.5rem;
  background:var(--black);
  text-align:center;
  position:relative;
  overflow:hidden}

.alto::before {
  content:"";
  position:absolute;
  top:-100px;
  left:50%;
  transform:translateX(-50%);
  width:650px;
  height:650px;
  background:radial-gradient(circle,rgba(192,57,43,.06),transparent 70%);
  pointer-events:none}

.alto-eye {
  font-size:.52rem;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:1.5rem}

.alto-title {
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(3rem,9vw,8rem);
  letter-spacing:.02em;
  line-height:.88;
  margin-bottom:2rem}

.alto-title em {
  font-family:"Playfair Display",serif;
  font-style:italic;
  font-weight:400;
  color:var(--muted);
  letter-spacing:0;
  font-size:.8em}

.alto-sub {
  font-size:.8rem;
  color:var(--muted);
  max-width:420px;
  margin:0 auto 3rem;
  line-height:2.1}

.alto-row {
  display:flex;
  justify-content:center;
  gap:4rem;
  flex-wrap:wrap}

.alto-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem}

.alto-item img {
  width:18px;
  height:18px;
  opacity:.5}

.alto-item span {
  font-size:.48rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted)}

.notify {
  padding:9rem 3.5rem;
  background:var(--gray);
  text-align:center;
  position:relative;
  overflow:hidden}

.notify::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(192,57,43,.06),transparent 70%);
  pointer-events:none}

.n-star {
  width:38px;
  height:38px;
  margin:0 auto 2.5rem;
  display:block;
  opacity:.8;
  animation:float 5s ease-in-out infinite}

@keyframes float{0%,100% {
  transform:translateY(0)}

50% {
  transform:translateY(-9px)}}

.n-eye {
  font-size:.5rem;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:1rem}

.n-title {
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(2.5rem,6vw,5.5rem);
  letter-spacing:.03em;
  line-height:.92;
  margin-bottom:.8rem}

.n-title em {
  font-family:"Playfair Display",serif;
  font-style:italic;
  font-weight:400;
  color:var(--muted);
  font-size:.8em;
  letter-spacing:0}

.n-sub {
  font-size:.78rem;
  color:var(--muted);
  max-width:360px;
  margin:0 auto 3rem;
  line-height:2.1}

.n-form {
  display:flex;
  max-width:395px;
  margin:0 auto;
  border:.5px solid var(--muted2)}

.n-input {
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  padding:1rem 1.2rem;
  color:var(--white);
  font-family:"Inter",sans-serif;
  font-size:.76rem;
  font-weight:300}

.n-input::placeholder {
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.66rem}

.n-btn {
  background:var(--red);
  border:none;
  padding:1rem 1.5rem;
  color:var(--white);
  font-family:"Bebas Neue",sans-serif;
  font-size:.9rem;
  letter-spacing:.2em;
  transition:background .3s,transform .15s;
  white-space:nowrap}

.n-btn:hover {
  background:#a93226;
  transform:scale(1.02)}

.n-btn:active {
  transform:scale(.97)}

.n-note {
  font-size:.54rem;
  color:var(--muted);
  margin-top:1rem;
  letter-spacing:.1em}

.n-ok {
  display:none;
  font-family:"Playfair Display",serif;
  font-size:1.1rem;
  font-style:italic;
  color:var(--white);
  margin-top:1.5rem}

.n-err {
  display:none;
  font-size:.7rem;
  color:#e74c3c;
  margin-top:1rem}

.n-loading {
  display:none;
  font-size:.58rem;
  color:var(--muted);
  margin-top:1rem;
  letter-spacing:.12em}

footer {
  padding:2.5rem 3.5rem;
  border-top:.5px solid var(--muted2);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  background:var(--black)}

.ft-logo img {
  width:clamp(80px,7vw,120px);
  height:auto;
  display:block}

.ft-text {
  font-size:.5rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted)}

.ft-soc {
  display:flex;
  gap:1.5rem}

.ft-soc a {
  font-size:.54rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  transition:color .3s}

.ft-soc a:hover {
  color:var(--white)}

/* credito discreto: fila propia de ancho completo para no competir
   con logo/texto/redes, mas apagado que el resto del footer */
.ft-credit {
  flex-basis:100%;
  text-align:center;
  font-size:.46rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(240,235,228,.28)}

.ft-credit a {
  color:inherit;
  text-decoration:none;
  border-bottom:.5px solid transparent;
  transition:color .3s,border-color .3s}

.ft-credit a:hover {
  color:var(--muted);
  border-color:var(--muted2)}

@media(max-width:900px){nav {
  padding:1.1rem 1.5rem}

.nav-links,.nav-ig {
  display:none}

.hamburger {
  display:flex}

.hero {
  padding:0 1.5rem;
  padding-top:0;
  justify-content:flex-start;
  padding-top:18vh}

.hero-img {
  object-position:top center}

.hero-content {
  padding-top:0;
  max-width:100%}

.hero-headline {
  font-size:clamp(2.2rem,8vw,3.2rem)}

.hero-meta {
  left:1.5rem;
  bottom:2rem}

.hero-scroll {
  right:1.5rem;
  bottom:2rem}

.info-bar {
  grid-template-columns:1fr}

.info-col:not(:last-child)::after {
  display:none}

.info-col {
  padding:1.5rem 1.5rem;
  border-bottom:.5px solid var(--muted2)}

.identity {
  grid-template-columns:1fr;
  gap:3rem;
  padding:5rem 1.5rem}


.scroll-story .story-item {
  grid-template-columns:1fr;
  min-height:auto}

.story-img {
  min-height:55vw}.story-item:nth-child(even) .story-img,.story-item:nth-child(even) .story-content{order:unset}

.story-content {
  padding:3rem 1.5rem}

.gallery {
  padding:4rem 1.5rem}

.gallery-header {
  flex-direction:column;
  align-items:flex-start;
  gap:1rem}

.gallery-grid {
  grid-template-columns:1fr 1fr;
  gap:4px}

.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9 {
  grid-column:auto;
  grid-row:auto;
  min-height:180px}

/* g9 queda sola en la ultima fila del grid de 2 columnas movil,
   dejando un hueco vacio grande; se oculta solo en este breakpoint */
.g9 {
  display:none}

.alto,.notify {
  padding:5rem 1.5rem}

/* a menos de 16px, Safari en iOS hace zoom automatico al enfocar el input:
   en desktop .76rem (~12px) se ve bien, pero en movil hay que subirlo */
.n-input {
  font-size:1rem}

.alto-row {
  gap:2rem}

footer {
  padding:2rem 1.5rem;
  flex-direction:column;
  text-align:center}

.float-cta {
  bottom:1.2rem;
  right:1.2rem;
  padding:.75rem 1.3rem;
  font-size:.85rem}

.mq {
  display:none}

.reveal {
  opacity:0;
  transform:translateY(20px)}}

/* ===== FOCO DE TECLADO ===== */
:focus-visible {
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:1px}
.hero-cta:focus-visible,.float-cta:focus-visible,.n-btn:focus-visible{outline-offset:4px}

.n-input:focus-visible {
  outline:2px solid var(--red);
  outline-offset:2px}

.skip-link {
  position:absolute;
  left:-9999px;
  top:0;
  z-index:1000;
  background:var(--red);
  color:var(--white);
  padding:.8rem 1.4rem;
  font-family:"Bebas Neue",sans-serif;
  letter-spacing:.2em;
  text-decoration:none}

.skip-link:focus {
  left:1rem;
  top:1rem}

/* ===== MOVIMIENTO REDUCIDO =====
   Ojo: muchos elementos arrancan en opacity:0 y solo aparecen via animacion,
   asi que no alcanza con apagar animaciones: hay que forzarlos visibles. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.01ms !important;
  scroll-behavior:auto !important}
  .float-cta:not(.is-far-scrolled),.intro-logo,.intro-sub,.hero-eyebrow,.hero-headline,.hero-subline,
  .hero-cta,.hero-meta,.hero-scroll,.reveal,.mobile-menu a{opacity:1 !important;
  transform:none !important}

  /* el ocultamiento a 75% de scroll debe seguir funcionando aunque el usuario prefiera menos movimiento */
  .float-cta.is-far-scrolled{opacity:0 !important}

.intro-line {
  width:88px !important}

.scroll-ln {
  width:32px !important}

.hero-img {
  animation:none !important;
  transform:none !important}

.mq-track {
  animation:none !important}
  /* estos SI deben seguir ocultos hasta interaccion */
  .menu-overlay:not(.open){opacity:0 !important}

.hamburger.open span:nth-child(2) {
  opacity:0 !important}
}

/* ===== VISITA REPETIDA O INTRO SALTADO =====
   Los delays del hero (3s a 4.5s) estaban calibrados a la duracion del intro.
   Si el intro no corre (.no-intro) o el usuario lo salta (.intro-skipped),
   hay que recalibrarlos o el hero queda vacio hasta 3s. */
body.no-intro .intro{display:none}

body.no-intro .hero-eyebrow,body.intro-skipped .hero-eyebrow {
  animation-delay:.1s}

body.no-intro .hero-headline,body.intro-skipped .hero-headline {
  animation-delay:.2s}

body.no-intro .hero-subline,body.intro-skipped .hero-subline {
  animation-delay:.35s}

body.no-intro .hero-cta,body.intro-skipped .hero-cta {
  animation-delay:.5s}

body.no-intro .float-cta,body.intro-skipped .float-cta {
  animation-delay:.6s}

body.no-intro .hero-meta,body.intro-skipped .hero-meta {
  animation-delay:.65s}

body.no-intro .hero-scroll,body.intro-skipped .hero-scroll {
  animation-delay:.8s}

body.no-intro .scroll-ln,body.intro-skipped .scroll-ln {
  animation-delay:1s}