/* FOLGORE — Minimalismo monocromo
   Negro / blanco / grises, máxima sofisticación.
   Tipografía: Inter (display delgada para titulares cinematográficos), display alterna serif italiana (Cormorant) para acentos editoriales. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root{
  --ink:        #0A0A0A;
  --ink-2:      #141414;
  --ink-3:      #1C1C1C;
  --paper:      #FAFAFA;
  --bone:       #F2EFEA;        /* warm bone-white */
  --warm:       #E9E4DC;
  --grey-700:   #3A3A3A;
  --grey-500:   #6E6E6E;
  --grey-400:   #8A8A8A;
  --grey-300:   #BDBDBD;
  --grey-200:   #D9D9D9;
  --grey-100:   #ECECEC;
  --hairline:   rgba(255,255,255,0.12);
  --hairline-d: rgba(0,0,0,0.10);
  --gold:       #B89C33;
  --gold-soft:  rgba(184,156,51,0.5);

  --display: 'Inter', sans-serif;
  --serif:   'Cormorant Garamond', 'Times New Roman', serif;
  --mono:    ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;

  --speed: 1;     /* tweak — animation speed multiplier (0.5 fast, 2 slow). actual duration = base * speed */
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ background: var(--ink); color: var(--bone); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body{
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: 0.01em;
  background: var(--ink);
  color: var(--bone);
  cursor: none; /* hidden — replaced by custom cursor */
  overflow-x: hidden;
}

/* Hide native cursor on every interactive element too */
a, button, input, textarea, select, [role="button"]{ cursor: none; }

img, video, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; }

::selection{ background: var(--bone); color: var(--ink); }

/* Type primitives */
.eyebrow{
  font-family: var(--display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--grey-400);
}
.eyebrow .dot{ display:inline-block; width:6px; height:6px; background: var(--gold); margin-right: 12px; vertical-align: middle; transform: translateY(-1px); }

.h-display{
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(48px, 9vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.025em;
}
.h-1{
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.02em;
}
.h-2{
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.h-3{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.serif-italic{ font-family: var(--serif); font-style: italic; font-weight: 300; letter-spacing: 0; }
.body{
  font-family: var(--display);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--grey-300);
  max-width: 56ch;
  text-wrap: pretty;
}
.body-lg{ font-size: 19px; line-height: 1.55; color: var(--grey-200); max-width: 60ch; text-wrap: pretty; }
.mono{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--grey-400); text-transform: uppercase; }

/* Layout helpers */
.shell{ width: 100%; max-width: 1680px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 720px){ .shell{ padding: 0 24px; } }
.hairline{ height: 1px; width: 100%; background: var(--hairline); }
.hairline-dark{ height: 1px; width: 100%; background: var(--hairline-d); }

.section-tag{
  display: flex; gap: 16px; align-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--grey-400); text-transform: uppercase; letter-spacing: 0.18em;
}
.section-tag .num{ color: var(--gold); font-weight: 500; }
.section-tag .line{ flex: 1; height: 1px; background: var(--hairline); }

/* Buttons */
.btn{
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 28px;
  font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid var(--bone);
  color: var(--bone);
  background: transparent;
  overflow: hidden;
  transition: color .35s ease;
}
.btn .arrow{ transition: transform .45s cubic-bezier(.2,0,.2,1); }
.btn::before{
  content: ""; position: absolute; inset: 0;
  background: var(--bone);
  transform: translateY(101%);
  transition: transform .55s cubic-bezier(.2,0,.2,1);
  z-index: 0;
}
.btn > *{ position: relative; z-index: 1; }
.btn:hover{ color: var(--ink); }
.btn:hover::before{ transform: translateY(0); }
.btn:hover .arrow{ transform: translateX(6px); }

.btn-ghost{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bone);
}
.btn-ghost .underline{
  position: relative;
}
.btn-ghost .underline::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--bone);
  transform-origin: right; transform: scaleX(1); transition: transform .5s cubic-bezier(.2,0,.2,1);
}
.btn-ghost:hover .underline::after{ transform-origin: left; transform: scaleX(0); animation: underline-redraw .8s .3s cubic-bezier(.2,0,.2,1) forwards; }
@keyframes underline-redraw{ from{ transform-origin: left; transform: scaleX(0); } to{ transform-origin: left; transform: scaleX(1); } }

/* Reveal primitives — used by IntersectionObserver */
.reveal-line{ display:block; overflow: hidden; }
.reveal-line > span{
  display: inline-block;
  white-space: nowrap;
  transform: translateY(110%);
  transition: transform calc(0.9s * var(--speed)) cubic-bezier(.2,0,.2,1);
  transition-delay: var(--d, 0s);
}
.is-in .reveal-line > span{ transform: translateY(0); }

.reveal-fade{ opacity: 0; transform: translateY(24px); transition: opacity calc(0.9s * var(--speed)) cubic-bezier(.2,0,.2,1) var(--d, 0s), transform calc(0.9s * var(--speed)) cubic-bezier(.2,0,.2,1) var(--d, 0s); }
.is-in .reveal-fade{ opacity: 1; transform: translateY(0); }

.reveal-grow{ width: 0; transition: width calc(1.2s * var(--speed)) cubic-bezier(.2,0,.2,1) var(--d, 0s); }
.is-in .reveal-grow{ width: 100%; }

/* Italic serif emphasis tinted gold for editorial accents */
h1 em, h2 em, .lede em, .hero h1 em, .closer h2 em, .name em, .timeline .y em, .timeline .t em,
.numbers .cell .num em, .cities .head h2 em, .cities .city .country, .catalog .head h2 em,
.inn-hero h1 em, .materials .mat .name em, .rd-grid h2 em, .ct-hero h1 em,
.cat-hero h1 em, .historia-hero h1 em, .historia-hero .lede em, .closer h2 em,
.product .name em, .quote-strip blockquote em, .footer .cols .pitch em{
  color: var(--gold);
}
/* Pulse / live indicators in gold */
.nav .meta .pulse{ background: var(--gold); }
.hero h1 .word{ display: block; overflow: hidden; }
.hero h1 .word > span{
  display: inline-block;
  white-space: nowrap;
  transform: translateY(110%);
  opacity: 0;
  animation: hero-rise calc(1.1s * var(--speed)) cubic-bezier(.2,0,.2,1) forwards;
}
.hero h1 .word:nth-child(1) > span{ animation-delay: calc(0.05s * var(--speed)); }
.hero h1 .word:nth-child(2) > span{ animation-delay: calc(0.18s * var(--speed)); }
.hero h1 .word:nth-child(3) > span{ animation-delay: calc(0.32s * var(--speed)); }
.hero h1 .word:nth-child(4) > span{ animation-delay: calc(0.46s * var(--speed)); }
@keyframes hero-rise{ to{ transform: translateY(0); opacity: 1; } }

/* Marquee */
.marquee{
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 28px 0;
}
.marquee-track{
  display: flex; gap: 64px;
  animation: marquee 38s linear infinite;
  animation-duration: calc(38s * var(--speed));
  flex-shrink: 0;
  padding-right: 64px;
}
.marquee-item{
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(42px, 6vw, 92px);
  letter-spacing: -0.01em;
  color: var(--bone);
  display: inline-flex; align-items: center; gap: 64px;
  flex-shrink: 0;
}
.marquee-item .star{ width: 14px; height: 14px; background: var(--bone); transform: rotate(45deg); }
.marquee-item.outline{ color: transparent; -webkit-text-stroke: 1px var(--bone); }
@keyframes marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-100%); }
}

/* Top nav */
.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 48px;
  color: #fff;
  font-family: var(--display); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  background: rgba(10, 10, 10, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.nav .brand{ display: flex; align-items: center; gap: 10px; }
.nav .brand .mark{
  width: 22px; height: 22px; position: relative;
}
.nav .brand .mark::before, .nav .brand .mark::after{
  content: ""; position: absolute; background: #fff;
}
.nav .brand .mark::before{ left: 0; top: 0; width: 14px; height: 14px; }
.nav .brand .mark::after{ right: 0; bottom: 0; width: 14px; height: 14px; mix-blend-mode: difference; }
.nav .links{ display: flex; gap: 32px; justify-self: center; }
.nav .links a{ position: relative; }
.nav .links a::after{
  content:""; position: absolute; left:0; right:0; bottom:-6px; height:1px; background:#fff;
  transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.2,0,.2,1);
}
.nav .links a:hover::after, .nav .links a.active::after{ transform: scaleX(1); transform-origin: left; }
.nav .meta{ justify-self: end; display: flex; gap: 24px; align-items: center; }
.nav .meta .pulse{
  width: 6px; height: 6px; background: #fff; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
  animation: pulse-dot 2.4s infinite;
}
@keyframes pulse-dot{
  0%{ box-shadow: 0 0 0 0 rgba(184,156,51,0.7);}
  70%{ box-shadow: 0 0 0 10px rgba(184,156,51,0);}
  100%{ box-shadow: 0 0 0 0 rgba(184,156,51,0);}
}
@media (max-width: 860px){
  .nav{ padding: 16px 24px; }
  .nav .links{ display: none; }
}

/* ============================================================
   MOBILE NAV — burger + slide-down menu
============================================================ */
.nav-burger{
  display: none;
  align-items: center; gap: 12px;
  justify-self: end;
  cursor: pointer;
  background: transparent; border: 0;
  color: #fff;
  font-family: var(--display); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500;
  padding: 8px 4px;
  z-index: 110;
  position: relative;
}
.nav-burger-label{ display: inline-block; min-width: 56px; text-align: right; transition: opacity .25s ease; }
.nav-burger-icon{
  position: relative;
  width: 28px; height: 14px;
  display: inline-block;
}
.nav-burger-icon span{
  position: absolute; left: 0; right: 0; height: 1.5px; background: #fff;
  transition: transform .35s cubic-bezier(.2,0,.2,1), top .35s cubic-bezier(.2,0,.2,1), opacity .25s ease;
}
.nav-burger-icon span:nth-child(1){ top: 3px; }
.nav-burger-icon span:nth-child(2){ top: 11px; }
.nav-burger.is-open .nav-burger-icon span:nth-child(1){ top: 7px; transform: rotate(45deg); }
.nav-burger.is-open .nav-burger-icon span:nth-child(2){ top: 7px; transform: rotate(-45deg); }

.mobile-menu{
  position: fixed; inset: 0;
  z-index: 100;
  background: rgba(8, 8, 8, 0.96);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  opacity: 0; pointer-events: none;
  transition: opacity .45s cubic-bezier(.2,0,.2,1);
  display: flex; flex-direction: column;
}
.mobile-menu.is-open{ opacity: 1; pointer-events: auto; }
.mobile-menu-inner{
  flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 110px 28px 36px;
  max-width: 600px; width: 100%; margin: 0 auto;
}
.mobile-menu-list{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.mobile-menu-list li{
  border-top: 1px solid rgba(255,255,255,0.08);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s cubic-bezier(.2,0,.2,1), transform .5s cubic-bezier(.2,0,.2,1);
  transition-delay: calc(0.06s * var(--i, 0) + 0.1s);
}
.mobile-menu-list li:last-child{ border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-menu.is-open .mobile-menu-list li{ opacity: 1; transform: translateY(0); }
.mobile-menu-list a{
  display: grid; grid-template-columns: 38px 1fr auto;
  align-items: center; gap: 14px;
  padding: 22px 4px;
  color: #fff;
  font-family: var(--display); font-weight: 200;
  font-size: 32px; letter-spacing: -0.01em; line-height: 1;
  text-decoration: none;
  transition: opacity .25s ease;
}
.mobile-menu-list a:hover, .mobile-menu-list a:focus-visible{ opacity: 0.7; }
.mobile-menu-list .mm-num{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--gold); padding-top: 6px; align-self: start;
}
.mobile-menu-list a.active .mm-label{ font-style: italic; font-family: var(--serif); font-weight: 300; color: var(--gold); }
.mobile-menu-list .mm-arrow{
  font-size: 18px; color: var(--grey-400); font-weight: 300;
}
.mobile-menu-foot{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  font-family: var(--display); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--grey-400);
}
.mobile-menu-foot .pulse{
  display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  margin-right: 8px; vertical-align: middle; transform: translateY(-1px);
  animation: pulse-dot 2.4s infinite;
}

/* Footer */
.footer{
  background: var(--ink);
  color: var(--bone);
  padding: 120px 0 40px;
  border-top: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
}
.footer .giant{
  font-family: var(--display);
  font-weight: 100;
  font-size: clamp(80px, 18vw, 320px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--grey-700);
  margin: 0;
  white-space: nowrap;
}
.footer .cols{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding: 80px 0 60px; border-top: 1px solid var(--hairline); }
.footer .cols h4{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-400); font-weight: 500; margin: 0 0 20px; }
.footer .cols ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer .cols ul a{ color: var(--bone); font-size: 14px; font-weight: 300; opacity: .85; transition: opacity .3s; }
.footer .cols ul a:hover{ opacity: 1; }
.footer .cols .pitch{ font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 22px; line-height: 1.4; color: var(--grey-200); max-width: 36ch; }
.footer .legal{ display: flex; justify-content: space-between; padding-top: 28px; border-top: 1px solid var(--hairline); font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-500); }
@media (max-width: 860px){ .footer .cols{ grid-template-columns: 1fr 1fr; gap: 32px; } }

/* Page transition cover */
.page-cover{
  position: fixed; inset: 0; background: var(--ink); z-index: 200;
  transform: translateY(100%);
  pointer-events: none;
}
.page-cover.in{ animation: cover-in .55s cubic-bezier(.6,0,.2,1) forwards; }
.page-cover.out{ animation: cover-out .55s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes cover-in{ from{ transform: translateY(100%);} to{ transform: translateY(0);} }
@keyframes cover-out{ from{ transform: translateY(0);} to{ transform: translateY(-100%);} }

/* Utility */
.flex{ display:flex; }
.between{ justify-content: space-between; }
.center{ align-items: center; }
.gap-l{ gap: 32px; }
.gap-m{ gap: 16px; }
.col{ display: flex; flex-direction: column; }

/* Disable cursor styles on touch */
@media (hover: none){
  body, a, button, input, textarea, select, [role="button"]{ cursor: auto; }
  .cursor-root{ display: none !important; }
}

/* ============================================================
   RESPONSIVE — tablet & mobile refinements
============================================================ */
@media (max-width: 1024px){
  .shell{ padding: 0 32px; }
  .nav{ padding: 10px 32px; }
  .nav .links{ gap: 22px; }
  .nav .meta{ gap: 16px; font-size: 11px; }
}

@media (max-width: 860px){
  .shell{ padding: 0 24px; }
  .nav{ padding: 8px 20px; grid-template-columns: 1fr auto; }
  .nav .meta{ display: none; }
  .nav .links{ display: none; }
  .nav-burger{ display: inline-flex !important; }

  .footer{ padding: 80px 0 32px; }
  .footer .cols{ padding: 56px 0 40px; gap: 40px; }
  .footer .legal{ flex-direction: column; gap: 12px; align-items: flex-start; font-size: 10px; }

  .marquee{ padding: 18px 0; }
  .marquee-item{ font-size: 42px !important; gap: 32px; }
  .marquee-item .star{ width: 10px; height: 10px; }
}

@media (max-width: 720px){
  .shell{ padding: 0 18px; }
  .nav{ padding: 6px 16px; }
  /* Hero */
  .hero{ height: auto; min-height: 100vh; min-height: 100svh; }
  .hero-content{ padding: 0 18px 80px !important; }
  .hero-tagline{ grid-template-columns: 1fr !important; gap: 32px !important; align-items: start !important; }
  .hero-meta{ text-align: left !important; flex-direction: row !important; flex-wrap: wrap; gap: 12px 20px !important; font-size: 9px !important; letter-spacing: 0.2em !important; }
  .hero-top-strip{ left: 18px !important; right: 18px !important; top: 64px !important; font-size: 9px !important; letter-spacing: 0.2em !important; }
  .scroll-cue{ right: 18px !important; bottom: 24px !important; font-size: 8px !important; }
  .scroll-cue .bar{ height: 36px !important; }

  /* Section padding */
  .manifesto{ padding: 100px 0 110px !important; }
  .manifesto .top{ grid-template-columns: 1fr !important; gap: 40px !important; padding-bottom: 40px !important; }
  .numbers{ padding: 80px 0 !important; }
  .numbers .grid{ grid-template-columns: 1fr !important; }
  .numbers .cell{ padding: 36px 20px !important; border-right: 0 !important; }
  .cities{ padding: 80px 0 !important; }
  .cities .head{ flex-direction: column; align-items: flex-start !important; gap: 24px; margin-bottom: 48px !important; }
  .cities .row{ grid-template-columns: 1fr !important; }
  .city{ border-right: 0 !important; border-bottom: 1px solid var(--hairline); padding: 40px 20px 28px !important; }
  .city:last-child{ border-bottom: 0; }
  .city .name{ margin-top: 56px !important; }

  .catalog{ padding: 80px 0 !important; }
  .catalog .head{ flex-direction: column; align-items: flex-start; gap: 20px; }
  .closer{ padding: 110px 0 !important; }
  .closer .sub br{ display: none; }
  .closer .cta{ margin-top: 40px !important; }

  /* Inner pages */
  .historia-hero{ padding: 130px 0 60px !important; }
  .timeline{ padding: 60px 0 !important; }
  .timeline .row{ padding: 36px 0 !important; gap: 12px !important; }
  .quote-strip{ padding: 100px 0 !important; }

  .cat-hero{ padding: 130px 0 50px !important; }
  .cat-hero .row{ flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 40px !important; }
  .cat-filter{ gap: 18px !important; padding: 24px 0 !important; font-size: 11px !important; }
  .cat-filter .count{ width: 100%; margin-left: 0 !important; }
  .cat-grid{ padding: 50px 0 100px !important; gap: 16px !important; }

  .inn-hero{ padding: 130px 0 60px !important; }
  .inn-process{ padding: 90px 0 !important; }
  .inn-process .col{ min-height: auto !important; padding: 40px 20px !important; border-right: 0 !important; }
  .materials{ padding: 90px 0 !important; }
  .materials .head{ grid-template-columns: 1fr !important; gap: 24px !important; }
  .materials .matgrid{ margin-top: 48px !important; }
  .materials .mat{ padding: 36px 20px !important; border-right: 0 !important; }
  .rd{ padding: 100px 0 !important; }
  .rd-grid{ gap: 48px !important; }
  .rd-list .item{ grid-template-columns: 40px 1fr !important; gap: 16px !important; padding: 24px 0 !important; }
  .rd-list .item .y{ grid-column: 2; font-size: 10px !important; }

  .ct-hero{ padding: 130px 0 50px !important; }
  .ct-hero .row{ grid-template-columns: 1fr !important; gap: 28px !important; align-items: flex-start !important; }
  .ct-body{ padding: 70px 0 100px !important; }
  .ct-body .grid{ grid-template-columns: 1fr !important; gap: 56px !important; }
  .field input, .field textarea{ font-size: 18px !important; }
  .ct-submit{ flex-direction: column; align-items: flex-start; gap: 20px; }
  .info-block .addr{ font-size: 18px !important; }
  .ct-map{ aspect-ratio: 4/3 !important; }

  /* Buttons & micro */
  .btn{ padding: 14px 22px; font-size: 11px; letter-spacing: 0.2em; }
  .btn-ghost{ font-size: 11px; letter-spacing: 0.2em; }
  .section-tag{ font-size: 10px; letter-spacing: 0.16em; }
  .section-tag .line{ display: none; }
}

@media (max-width: 480px){
  .shell{ padding: 0 16px; }
  .nav img{ height: 30px !important; }
  .marquee-item{ font-size: 34px !important; gap: 24px; }
  .footer .cols{ grid-template-columns: 1fr !important; }
}

/* Re-enable native cursor on touch devices for inputs */
@media (hover: none){
  body{ cursor: auto; }
}