/* =============================================================
   AUTHENTIC — styles.css
   1 Tokens · 2 Reset · 3 Utilidades · 4 Tipografía · 5 Componentes
   6 Secciones · 7 Efectos · 8 Responsive · 9 Reduced motion
   ============================================================= */

/* Pinyon Script guardada en la propia web (assets/fonts), no depende de Google */
@font-face{
  font-family:"Pinyon Script"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/pinyon-script-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Pinyon Script"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/pinyon-script-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================
   1. TOKENS
   ============================================================= */
:root{
  --cream:      #F6F2EB;
  --paper:      #FBF8F3;
  --beige:      #EBE3D6;
  --sand:       #DCD1BF;
  --stone:      #C4B6A0;
  --taupe:      #8C7F6C;
  --muted:      #6E6455;
  --ink:        #1C1815;
  --ink-soft:   #3A342D;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
  --script:"Pinyon Script", "Cormorant Garamond", cursive;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 1360px;
  --sec-y: clamp(2.2rem, 4vh, 3.4rem);

  /* radios — la web es redonda */
  --r-xl: clamp(22px, 2.4vw, 34px);
  --r-lg: clamp(16px, 1.6vw, 24px);
  --r-md: 14px;
  --r-sm: 10px;
  --r-pill: 999px;
  --edge: clamp(8px, 1vw, 16px);

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --line: rgba(28,24,21,.14);
  --line-soft: rgba(28,24,21,.08);

  /* Cristal. Casi sin color propio: lo que se ve dentro es el fondo,
     desenfocado por el propio cristal. Lo que hace que se aprecie el
     recuadro es el borde luminoso y el brillo del canto, no el relleno. */
  --panel:       transparent;
  --panel-hover: rgba(255,255,255,.10);
  --panel-edge:  1px solid rgba(255,255,255,.7);
  --panel-blur:  blur(28px) saturate(1.2);
  /* brillo interior en el canto superior + sombra muy abierta = grosor de cristal */
  --panel-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 24px 60px -46px rgba(28,24,21,.5);
}

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5rem; }

body{
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  line-height:1.65;
  color:var(--ink-soft);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
p{ text-wrap:pretty; }

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

:focus-visible{ outline:1.5px solid var(--taupe); outline-offset:4px; border-radius:2px; }

/* Grano muy fino. Nada agresivo: si sube, la seda empieza a parecer papel.
   Por eso también se desvanece sobre el hero (ver .bg / .hero). */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9998;
  opacity:.16; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}

/* =============================================================
   3. UTILIDADES
   ============================================================= */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:920px; }
.section{ padding-block:var(--sec-y); position:relative; }

.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:9999;
  padding:.6rem 1rem; background:var(--ink); color:var(--cream);
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
}
.skip-link:focus{ top:1rem; }

.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

/* =============================================================
   4. TIPOGRAFÍA
   ============================================================= */
.sec-index{
  display:block;
  font-family:var(--sans);
  font-size:.66rem; font-weight:400;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--stone);
  margin-bottom:.9rem;
}

.sec-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.3rem, 2vw, 1.75rem);
  line-height:1.08;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
}
.sec-title-lg{ font-size:clamp(1.75rem, 3.2vw, 2.6rem); text-transform:none; letter-spacing:.005em; }

.sec-sub{
  margin-top:1rem;
  font-size:.94rem; color:var(--muted); max-width:46ch; line-height:1.7;
}
.sec-head{ margin-bottom:clamp(.9rem,1.6vw,1.3rem); }
.sec-head-center{ text-align:center; }
.sec-head-center .sec-sub{ margin-inline:auto; }
.sec-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }

.lead{
  font-family:var(--serif);
  font-size:clamp(1rem, 1.45vw, 1.2rem);
  line-height:1.35; color:var(--ink); font-weight:400;
}
.lead em{ font-style:italic; color:var(--taupe); }

.body{ font-size:clamp(.95rem,1.05vw,1.02rem); color:var(--muted); max-width:52ch; line-height:1.75; }
.body em{ font-family:var(--serif); font-style:italic; font-size:1.18em; color:var(--ink); }

.fine{ font-size:.78rem; color:var(--stone); letter-spacing:.02em; max-width:44ch; }

.sec-rule,.mini-rule{ display:block; height:1px; background:var(--line); transform-origin:left center; }
.sec-rule{ margin-top:.9rem; }
.mini-rule{ width:38px; margin-bottom:1rem; background:var(--stone); }

u.ul{
  text-decoration:none;
  background-image:linear-gradient(var(--stone),var(--stone));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 1px;
  padding-bottom:2px;
}

/* =============================================================
   5. COMPONENTES
   ============================================================= */

/* --- Botones --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--sans); font-size:.72rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  padding:.95rem 1.9rem;
  border-radius:var(--r-pill);
  transition:color .5s var(--ease-out), background-color .5s var(--ease-out), border-color .5s var(--ease-out);
  position:relative; overflow:hidden;
}
.btn-solid{ background:var(--ink); color:var(--cream); }
.btn-solid::before{
  content:""; position:absolute; inset:0; background:var(--taupe);
  transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--ease-out); z-index:0;
}
.btn-solid:hover::before{ transform:scaleY(1); }
.btn-solid > *{ position:relative; z-index:1; }

.btn-ghost{
  border:1px solid var(--line); color:var(--ink);
  padding:.6rem 1.1rem; font-size:.6rem; letter-spacing:.13em;
  white-space:nowrap;
}
.btn-ghost:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.btn-line{
  border:1px solid rgba(28,24,21,.28); color:var(--ink);
  background:rgba(251,248,243,.28); backdrop-filter:blur(3px);
}
.btn-line::after{
  content:""; position:absolute; inset:0; background:var(--ink);
  transform:translateY(101%); transition:transform .6s var(--ease-out); z-index:-1;
}
.btn-line:hover{ color:var(--cream); border-color:var(--ink); }
.btn-line:hover::after{ transform:translateY(0); }

/* --- Placeholders de foto --- */
.ph{
  position:relative; width:100%; overflow:hidden;
  border-radius:var(--r-lg);
  background:
    linear-gradient(135deg, rgba(220,209,191,.55), rgba(235,227,214,.9)),
    var(--beige);
  display:grid; place-items:center;
}
.ph::after{
  content:""; position:absolute; inset:10px; border-radius:calc(var(--r-lg) - 8px);
  border:1px solid rgba(255,255,255,.5); pointer-events:none;
}
.ph > span{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--taupe); opacity:.7;
}
.ph-tall{ aspect-ratio:3/4; }
.ph-wide{ aspect-ratio:4/3; }
.ph-pack{ aspect-ratio:4/5; }
.ph.has-img > span,.ph.has-img::after{ display:none; }
.ph img{ width:100%; height:100%; object-fit:cover; }

figure{ overflow:hidden; }
figure .ph img,.zoom img{ transition:transform 1.1s var(--ease-out); }
figure:hover .ph img{ transform:scale(1.035); }

/* =============================================================
   6. SECCIONES
   ============================================================= */

/* --- Splash --- */
.splash{
  position:fixed; inset:0; z-index:9997; background:var(--cream);
  display:grid; place-items:center;
  animation:splashOut .8s var(--ease-out) 1.05s forwards;
}
.splash-mark{
  font-family:var(--script); font-size:clamp(2.2rem,6vw,3.6rem); color:var(--ink);
  opacity:0; animation:splashIn 1s var(--ease-out) .05s forwards;
}
@keyframes splashIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes splashOut{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.splash.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }

/* --- Nav --- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  transition:background-color .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.nav-inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:1.05rem clamp(1.1rem,3vw,2.4rem);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  transition:padding .6s var(--ease-out), background-color .6s var(--ease-out),
             border-color .6s var(--ease-out), box-shadow .6s var(--ease-out),
             margin .6s var(--ease-out);
}
/* al hacer scroll el menú se convierte en una cápsula flotante */
.nav.is-stuck .nav-inner{
  padding-block:.7rem;
  margin-top:.55rem;
  margin-inline:auto;
  max-width:min(var(--maxw), calc(100vw - var(--edge) * 4));
  background:rgba(251,248,243,.82);
  backdrop-filter:blur(16px) saturate(1.15);
  border-color:rgba(28,24,21,.09);
  box-shadow:0 14px 34px -26px rgba(28,24,21,.5);
}

.nav-logo{ font-family:var(--script); font-size:2rem; line-height:1; color:var(--ink); padding-top:.12em; }

/* la marca del menu: el nombre y debajo lo que somos */
.nav-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; }
.nav-logo{ display:block; }
.nav-tag{
  font-size:.6rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  /* marron oscuro: a este tamano el taupe no daba contraste suficiente */
  color:var(--ink-soft); white-space:nowrap; padding-left:.2em;
}
.nav-links{ display:none; gap:2rem; }
.nav-links a{
  position:relative; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
  padding-block:.25rem;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease-out);
}
.nav-links a:hover::after,.nav-links a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav-links a.is-active{ color:var(--ink); }

.nav-cta{ display:none; }

.nav-burger{
  width:34px; height:34px; display:grid; align-content:center; gap:6px; justify-items:end;
}
.nav-burger span{ display:block; height:1px; width:22px; background:var(--ink); transition:transform .5s var(--ease-out), width .5s var(--ease-out), opacity .3s; }
.nav-burger span:last-child{ width:14px; }
body.menu-open .nav-burger span:first-child{ transform:translateY(3.5px) rotate(45deg); }
body.menu-open .nav-burger span:last-child{ width:22px; transform:translateY(-3.5px) rotate(-45deg); }

.nav-panel{
  position:fixed; inset:0; z-index:890;
  background:var(--cream);
  padding:6.5rem var(--gutter) 3rem;
  display:flex; flex-direction:column; justify-content:center; gap:2rem;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility .5s;
}
body.menu-open .nav-panel{ opacity:1; visibility:visible; transform:none; }
.nav-panel-links{ display:flex; flex-direction:column; gap:.2rem; }
.nav-panel-links a{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--serif); font-size:1.9rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink);
  padding:.5rem 1.1rem; border-radius:var(--r-pill);
  transition:background-color .4s var(--ease-out);
}
.nav-panel-links a:active{ background:var(--beige); }
.nav-panel-links i{ font-family:var(--sans); font-style:normal; font-size:.6rem; letter-spacing:.2em; color:var(--stone); }
.nav-panel-cta{ align-self:flex-start; }
.nav-panel-foot{ font-family:var(--serif); font-style:italic; color:var(--taupe); font-size:1rem; }

/* =============================================================
   FONDO FIJO — la tela
   --p  = progreso de scroll 0 → 1 (lo escribe main.js)
   Dos copias de la misma foto: una nítida y otra con blur estático.
   Solo animamos opacidad → el navegador rasteriza el blur una vez.
   ============================================================= */
.bg{
  position:fixed; inset:0; z-index:-3;
  overflow:hidden;
  background:var(--cream);
  pointer-events:none;
}
.bg-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
/* La foto ya es seda crema de verdad: apenas hace falta corregirla.
   Un toque mínimo de calidez y contraste, nada más. */
.bg-sharp{
  filter:sepia(.06) saturate(1.02) brightness(1.01) contrast(.98);
  transform:scale(calc(1.03 + var(--p, 0) * .06));
  will-change:transform;
}
.bg-blur{
  opacity:var(--p, 0);
  /* el scale evita que se vean los bordes transparentes del desenfoque */
  transform:scale(1.22);
  /* menos desenfoque: los pliegues siguen reconociéndose por detrás del
     cristal, que es lo que hace que los recuadros se lean como cristal */
  filter:sepia(.14) saturate(.98) brightness(1.01) contrast(1) blur(11px);
  will-change:opacity;
}
/* Segunda tela: la gasa blanca. Entra por fundido a medida que se baja,
   con el mismo --g que gobierna el color. Arriba seda crema, abajo gasa. */
.bg-two{
  opacity:var(--g, 0);
  transform:scale(1.18);
  filter:sepia(.04) saturate(.95) brightness(1.005) contrast(1.02) blur(13px);
  will-change:opacity;
}

/* Vira a gris perla a partir del ultimo pack y se queda asi hasta el final.
   --g lo escribe main.js segun donde acaba la seccion de packs. */
.bg-grey{
  position:absolute; inset:0;
  opacity:calc(var(--g, 0) * .42);
  background:linear-gradient(165deg,
    rgba(206,203,197,.6) 0%,
    rgba(184,181,175,.68) 55%,
    rgba(196,193,187,.62) 100%);
}

.bg-tint{
  position:absolute; inset:0;
  opacity:calc((.10 + var(--p, 0) * .20) * (1 - var(--g, 0) * .85));
  background:
    radial-gradient(70% 55% at 50% 38%, rgba(250,247,241,.55) 0%, rgba(250,247,241,0) 100%),
    linear-gradient(170deg, rgba(233,222,205,.55) 0%, rgba(214,197,175,.5) 45%, rgba(238,231,219,.6) 100%);
}

/* --- Hero --- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  padding:clamp(5rem,9vh,6.6rem) clamp(1.25rem,4vw,3.2rem) clamp(1.2rem,3vw,2.4rem);
}
.hero-layer{
  display:grid;
  grid-template-rows:1fr auto;
  /* se va con el scroll: sube y se desvanece */
  opacity:clamp(0, calc(1 - var(--hp, 0) * 1.15), 1);
  transform:translate3d(0, calc(var(--hp, 0) * -8vh), 0);
  will-change:opacity, transform;
}
/* halo suave detrás del nombre, para que se lea sin tapar la tela */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 32% at 50% 50%, rgba(250,246,240,.62) 0%, rgba(250,246,240,.22) 55%, rgba(250,246,240,0) 100%),
    linear-gradient(180deg, rgba(246,242,235,.5) 0%, rgba(246,242,235,0) 22%, rgba(246,242,235,0) 70%, rgba(246,242,235,.55) 100%);
  opacity:clamp(0, calc(1 - var(--hp, 0)), 1);
}

/* píldoras superiores */
.hero-top{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  animation:softIn 1s var(--ease-out) 1.15s both;
}
.pill{
  display:inline-flex; align-items:center;
  border-radius:var(--r-pill);
  padding:.42rem 1rem;
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  background:rgba(251,248,243,.62); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.7);
  color:var(--ink-soft); white-space:nowrap;
}
.pill-ghost{ background:transparent; border-color:rgba(28,24,21,.16); color:var(--muted); }

/* franja inferior */
.hero-foot{
  display:flex; align-items:center; justify-content:center; gap:.35rem 1.6rem; flex-wrap:wrap;
  width:fit-content; max-width:min(100%, 46rem); margin-inline:auto;
  padding:.6rem 1.4rem;
  border-radius:var(--r-pill);
  background:rgba(251,248,243,.5); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.55);
  animation:softIn 1s var(--ease-out) 2.35s both;
}
.hero-foot li{
  position:relative;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
.hero-foot li + li::before{
  content:""; position:absolute; left:-.85rem; top:50%;
  width:3px; height:3px; border-radius:50%; background:var(--stone);
}

.hero-inner{ text-align:center; position:relative; display:grid; align-content:center; }
.hero-eyebrow{
  font-size:clamp(.68rem,.95vw,.82rem); font-weight:400;
  letter-spacing:.36em; text-transform:uppercase;
  color:var(--taupe);
  margin-bottom:clamp(.5rem,1.4vw,1rem);
  overflow:hidden;
}
.hero-eyebrow span{ display:inline-block; animation:heroMask 1s var(--ease-out) 1.15s both; }

.hero-sub{
  display:block;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(.72rem, 1.5vw, 1.05rem);
  letter-spacing:.62em; text-indent:.62em;
  text-transform:uppercase; color:var(--ink-soft);
  margin-top:clamp(.1rem,.8vw,.5rem);
  animation:heroUp 1.2s var(--ease-out) 1.6s both;
}

.hero-title{
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(4.2rem, 15.5vw, 12.5rem);
  line-height:.9;
  letter-spacing:0;
  color:var(--ink);
  padding-bottom:.09em;
}
.hero-word{ display:inline-block; animation:heroRise 1.5s var(--ease-out) 1.3s both; }

.hero-tagline{
  font-family:var(--serif);
  font-size:clamp(1rem,1.7vw,1.32rem);
  color:var(--ink-soft);
  margin-top:clamp(.4rem,1.5vw,1rem);
  letter-spacing:.01em;
  animation:heroUp 1.1s var(--ease-out) 1.75s both;
}
.hero-tagline em{ font-style:italic; color:var(--taupe); }
.hero-btn{ margin-top:clamp(1.6rem,3.2vw,2.3rem); justify-self:center; animation:heroUp 1s var(--ease-out) 1.95s both; }

@keyframes heroMask{ from{ transform:translateY(115%); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes heroRise{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
@keyframes heroUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes softIn{ from{ opacity:0; } to{ opacity:1; } }

.scroll-cue{
  position:absolute; right:clamp(1.1rem,3vw,2.6rem); bottom:clamp(1rem,2.4vw,1.9rem);
  animation:softIn 1s var(--ease-out) 2.2s both;
}
.scroll-cue-ring{
  display:grid; place-items:center;
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(28,24,21,.2);
  background:rgba(251,248,243,.5); backdrop-filter:blur(8px);
  transition:background-color .6s var(--ease-out), border-color .6s var(--ease-out);
  overflow:hidden;
}
.scroll-cue-arrow{
  display:block; width:7px; height:7px;
  border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
  transform:rotate(45deg) translate(-1px,-1px);
  animation:cueDrop 2.6s var(--ease-soft) infinite;
}
@keyframes cueDrop{
  0%{ transform:rotate(45deg) translate(-7px,-7px); opacity:0; }
  30%{ opacity:1; }
  70%{ opacity:1; }
  100%{ transform:rotate(45deg) translate(5px,5px); opacity:0; }
}
.scroll-cue:hover .scroll-cue-ring{ background:var(--ink); border-color:var(--ink); }
.scroll-cue:hover .scroll-cue-arrow{ border-color:var(--cream); }

/* --- About --- */

/* Columna de lectura: ancho cómodo + un velo degradado casi invisible
   que garantiza el contraste sobre el fondo desenfocado. */
/* Recuadro transparente: mismo color que el fondo, pero se distingue
   por el borde fino, el desenfoque de detrás y una sombra muy abierta. */
/* Sin recuadro y centrado: el texto va directo sobre la tela y las
   lineas usan todo el ancho, alineadas con las fotos del carrusel. */
.reader{ padding:0; text-align:center; }
/* la seccion respira menos por arriba y por abajo para que entre entera */
.about{ padding-block:clamp(1.2rem,2.2vh,1.9rem); }
.reader > *{ max-width:78ch; margin-inline:auto; }
.reader .sec-rule{ transform-origin:center; }
.reader .sec-head{ margin-bottom:clamp(1rem,1.8vw,1.5rem); }

.about-title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.5rem,2.9vw,2.35rem);
  line-height:1.24; letter-spacing:.005em;
  color:var(--ink);
  text-wrap:balance;
}
.about-title em{ font-style:italic; color:var(--taupe); }

.reader .lead{ margin-bottom:.7rem; }

.prose{
  font-size:clamp(1rem,1.15vw,1.12rem);
  font-weight:400;
  line-height:1.75; color:var(--ink-soft);
  max-width:78ch;
}
.prose + .prose{ margin-top:1.1rem; }

.about-manifesto{
  margin-top:clamp(1.2rem,2.2vw,1.7rem);
  font-family:var(--serif); font-weight:300;
  font-size:clamp(.95rem,1.4vw,1.14rem);
  line-height:1.4; color:var(--ink); text-align:center;
  max-width:30ch; margin-inline:auto;
}
.about-manifesto .mini-rule{ margin:0 auto .7rem; }
.about-manifesto em{
  display:block; margin-top:.6rem;
  font-style:italic; color:var(--taupe);
}

/* --- Carrusel editorial --- */
.gallery{ margin-block:clamp(1.5rem,2.6vw,2.2rem); max-width:740px; margin-inline:auto; }
.gallery-rail{
  --gal-gap:clamp(.6rem,1.3vw,1.1rem);
  display:flex; gap:var(--gal-gap);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-block:.3rem;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
}
.gallery-rail::-webkit-scrollbar{ display:none; }
.gallery-rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }

.shot{
  flex:0 0 calc((100% - var(--gal-gap)) / 2);
  scroll-snap-align:start;
  overflow:hidden;
}
.shot .ph{
  aspect-ratio:4/5;
  border-radius:3px;
  transition:transform 1.4s var(--ease-out);
}
.shot:hover .ph{ transform:scale(1.03); }
.shot .ph img{ transition:transform 1.6s var(--ease-out); }
.shot:hover .ph img{ transform:scale(1.06); }

/* Una flecha a cada extremo del carrusel, en beige translucido */
.gallery{ position:relative; }
.gallery .rail-nav{ display:contents; }   /* cada boton se coloca solo */
.gallery .rail-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3;
  width:48px; height:48px; border-radius:50%;
  background:rgba(243,237,227,.62);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.65);
  color:var(--ink); font-size:1rem;
  box-shadow:0 6px 20px -12px rgba(28,24,21,.6);
  transition:background-color .5s var(--ease-out), transform .5s var(--ease-out);
}
.gallery [data-rail-prev]{ left:clamp(.6rem,2vw,1.6rem); }
.gallery [data-rail-next]{ right:clamp(.6rem,2vw,1.6rem); }
.gallery .rail-arrow:hover{
  background:rgba(248,244,237,.85);
  transform:translateY(-50%) scale(1.09);
  color:var(--ink);
}

/* --- Paneles redondeados de sección --- */
/* Los paneles flotan sobre la tela: translúcidos, nunca beige sólido */
.contact{ background:transparent; padding-block:clamp(6rem,13vh,9rem) clamp(3.5rem,7vh,5rem); }
/* Destinations va sin recuadro: solo la foto y el texto */
.destinations{ background:transparent; }
/* Packs: sin panel. Cada bloque flota suelto sobre la tela. */
.packages{ background:transparent; }

/* --- Packs: bloques grandes alternados --- */
/* Sin recuadro, como el primer apartado: el bloque va centrado
   y el texto queda directo sobre la tela. */
.packrows{
  display:grid; gap:clamp(1.4rem,2.6vw,2.4rem);
  margin-block:clamp(1rem,2vw,1.6rem);
  max-width:880px; margin-inline:auto;
  perspective:1100px;
}

.glass{
  background:var(--panel);
  backdrop-filter:var(--panel-blur);
  border:var(--panel-edge);
  box-shadow:var(--panel-shadow);
}

.packrow{
  position:relative;
  display:grid; gap:clamp(1rem,2vw,1.6rem);
  align-items:center;
  padding:0;
  cursor:pointer;
  transform-style:preserve-3d;
  /* la vuelta a su sitio es lenta; el seguimiento del cursor es inmediato */
  transition:transform 1.1s var(--ease-out), box-shadow .8s var(--ease-out),
             background-color .8s var(--ease-out);
  will-change:transform;
}
.packrow.is-tilting{
  transition:transform .18s var(--ease-soft);
}

.packrow-media{ overflow:hidden; border-radius:var(--r-lg); position:relative; }
/* nombre del pack encima de la foto */
.pack-over{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; white-space:nowrap;
  font-family:var(--script); font-size:clamp(2rem,2.6vw,2.4rem); line-height:1; color:var(--paper);
  text-shadow:0 2px 14px rgba(0,0,0,.4);
  background:linear-gradient(to top, rgba(28,24,21,.3), rgba(28,24,21,.05));
}
.packrow-media .ph{
  transition:transform 1.1s var(--ease-out);
  will-change:transform;
}
.packrow.is-tilting .packrow-media .ph{ transition:transform .18s var(--ease-soft); }

.packrow-body{ padding-block:clamp(.2rem,1vw,.6rem); }

/* La tarjeta entera lleva al formulario */
.pack-link{ position:absolute; inset:0; z-index:2; }
.pack-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:clamp(.7rem,1.4vw,1rem);
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--taupe);
  transition:color .5s var(--ease-out), gap .5s var(--ease-out);
}
.pack-cta::after{
  content:"\2192"; font-size:.85rem; letter-spacing:0;
  transition:transform .5s var(--ease-out);
}
.packrow:hover .pack-cta{ color:var(--ink); gap:.8rem; }
.packrow:hover .pack-cta::after{ transform:translateX(3px); }
.pack-num{
  font-size:.6rem; letter-spacing:.3em; color:var(--taupe); display:block; margin-bottom:.35rem;
}
.pack-name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.25rem,1.7vw,1.55rem); line-height:1.1; color:var(--ink);
  text-transform:uppercase; letter-spacing:.02em;
}
.pack-hours{
  font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--muted);
  margin-top:.15rem; padding-bottom:.45rem; border-bottom:1px solid var(--line-soft);
}
.pack-list{ margin-top:.6rem; display:grid; gap:.26rem; }
.pack-list li{
  position:relative; padding-left:1rem;
  font-size:1rem; line-height:1.5; color:var(--ink-soft);
}
.pack-list li::before{
  content:""; position:absolute; left:0; top:.7em; width:6px; height:1px; background:var(--taupe);
}

.rail-progress{ height:2px; border-radius:2px; background:var(--line-soft); position:relative; margin-top:.4rem; }
.rail-progress span{
  position:absolute; inset:0 auto 0 0; background:var(--ink); width:30%; border-radius:2px;
  transition:width .3s var(--ease-out), transform .3s var(--ease-out);
}
.rail-nav{ display:none; gap:.5rem; }
.rail-arrow{
  width:42px; height:42px; border:1px solid var(--line); color:var(--ink);
  border-radius:50%;
  display:grid; place-items:center; font-size:.85rem;
  transition:background-color .45s var(--ease-out), color .45s var(--ease-out), border-color .45s var(--ease-out);
}
.rail-arrow:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.rail-arrow[disabled]{ opacity:.28; pointer-events:none; }

.packages-note{
  margin-top:clamp(1.8rem,3.5vw,2.8rem);
  font-size:.78rem; color:var(--muted); letter-spacing:.03em; text-align:center;
}
.packages-note a{ position:relative; color:var(--ink); }
.packages-note a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease-out);
}
.packages-note a:hover::after{ transform:scaleX(1); transform-origin:left; }
.packages-note em{ font-family:var(--serif); font-style:italic; font-size:1.15em; color:var(--ink); }

/* --- Extras --- */
/* --- Servicios extra: lista con lineas ---
   Al pasar el raton se abre solo; al pulsar se queda fijo. */
.extras-list{ border-top:1px solid var(--line-soft); }
.xrow{ border-bottom:1px solid var(--line-soft); position:relative; }

.xrow-head{
  position:relative;
  display:grid; align-items:center;
  grid-template-columns:auto 1fr auto;
  gap:1rem;
  width:100%; text-align:left;
  padding:clamp(.9rem,1.6vw,1.2rem) 0;
  cursor:pointer;
  transition:padding-left .55s var(--ease-out);
}
.xrow-head::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--ink);
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease-out);
}
.xrow:hover .xrow-head::after,.xrow.is-open .xrow-head::after{ transform:scaleX(1); }
.xrow:hover .xrow-head{ padding-left:.7rem; }

.x-num{
  font-size:.58rem; letter-spacing:.28em; color:var(--stone);
  transition:color .5s var(--ease-out);
}
.xrow:hover .x-num,.xrow.is-open .x-num{ color:var(--taupe); }

.x-name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink); line-height:1.15;
}

.x-mark{ position:relative; width:11px; height:11px; }
.x-mark::before,.x-mark::after{
  content:""; position:absolute; background:var(--taupe); transition:transform .5s var(--ease-out);
}
.x-mark::before{ left:0; top:5px; width:11px; height:1px; }
.x-mark::after{ left:5px; top:0; width:1px; height:11px; }
.xrow.is-open .x-mark::after{ transform:scaleY(0); }

/* la descripcion: cerrada de partida, se abre al pasar o al pulsar */
.x-desc{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .6s var(--ease-out), opacity .45s var(--ease-out);
  opacity:0;
}
.x-desc > p{
  overflow:hidden;
  font-size:.9rem; line-height:1.65; color:var(--muted); max-width:70ch;
}
.xrow:hover .x-desc,.xrow.is-open .x-desc{ grid-template-rows:1fr; opacity:1; }
.xrow:hover .x-desc > p,.xrow.is-open .x-desc > p{ padding-bottom:1.1rem; }
.xrow:hover .x-desc{ padding-left:.7rem; }

/* --- Destinations --- */
.dest-grid{ display:grid; gap:clamp(1.8rem,3.5vw,3.2rem); align-items:center; justify-items:center; }
.ph-dest{ aspect-ratio:4/5; }
.dest-fig{ max-width:clamp(240px, 30vw, 380px); }

.dest-title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.4rem,5vw,4rem);
  line-height:1; letter-spacing:.01em; color:var(--ink);
}
.dest-sub{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.05rem,1.7vw,1.4rem);
  color:var(--taupe); margin-top:.4rem;
}
.dest-text{
  margin-top:clamp(1.2rem,2.4vw,1.8rem);
  font-size:clamp(1rem,1.15vw,1.12rem); line-height:1.7;
  color:var(--ink-soft); max-width:34ch;
}
.dest-note{
  margin-top:1.1rem; padding-top:1.1rem;
  border-top:1px solid var(--line-soft);
  font-size:.87rem; line-height:1.6; color:var(--muted); max-width:40ch;
}

/* --- Timeline --- */
.timeline{ position:relative; display:grid; gap:0; }
.tl-track{
  position:absolute; left:5px; top:8px; bottom:8px; width:1px; background:var(--line);
}
.tl-fill{
  position:absolute; inset:0; background:var(--ink);
  transform:scaleY(0); transform-origin:top; transition:transform .1s linear;
}
.tl-step{
  position:relative; padding:0 0 2.2rem 2.4rem;
}
.tl-step:last-child{ padding-bottom:0; }
.tl-dot{
  position:absolute; left:0; top:6px; width:11px; height:11px; border-radius:50%;
  background:var(--cream); border:1px solid var(--stone);
  transition:background-color .6s var(--ease-out), border-color .6s var(--ease-out), transform .6s var(--ease-out);
}
.tl-step.is-on .tl-dot{ background:var(--ink); border-color:var(--ink); transform:scale(1.1); }
.tl-num{ font-size:.62rem; letter-spacing:.3em; color:var(--stone); display:block; margin-bottom:.35rem; }
.tl-step h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.25rem,2vw,1.6rem);
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink); line-height:1.1; margin-bottom:.4rem;
}
.tl-step p{ font-size:.87rem; color:var(--muted); max-width:32ch; line-height:1.6; }

/* --- FAQ --- */
.faq-list{ display:grid; gap:.5rem; }
.qa{
  border:var(--panel-edge); border-radius:var(--r-lg);
  background:var(--panel); backdrop-filter:var(--panel-blur);
  padding-inline:clamp(1rem,2vw,1.5rem);
  transition:background .5s var(--ease-out), border-color .5s var(--ease-out);
}
.qa:hover,.qa[open]{ background:var(--panel-hover); border-color:var(--line); }
.qa summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding-block:1.15rem;
  font-family:var(--serif); font-size:clamp(1.02rem,1.6vw,1.24rem);
  text-transform:uppercase; letter-spacing:.035em; line-height:1.3; color:var(--ink);
  transition:color .4s var(--ease-out);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--taupe); }
.qa summary i{
  position:relative; flex:0 0 12px; width:12px; height:12px; margin-top:.45em;
}
.qa summary i::before,.qa summary i::after{
  content:""; position:absolute; background:var(--ink); transition:transform .5s var(--ease-out);
}
.qa summary i::before{ left:0; top:5.5px; width:12px; height:1px; }
.qa summary i::after{ left:5.5px; top:0; width:1px; height:12px; }
.qa[open] summary i::after{ transform:scaleY(0); }
.qa[open] summary{ color:var(--taupe); }

.qa-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease-out); }
.qa[open] .qa-body{ grid-template-rows:1fr; }
.qa-body p{
  overflow:hidden;
  font-size:.9rem; color:var(--muted); line-height:1.7; max-width:62ch;
}
.qa[open] .qa-body p{ padding-bottom:1.3rem; }

/* --- Contact --- */
.form{
  margin-top:clamp(1rem,2vw,1.6rem);
  display:grid; gap:1rem 1.4rem;
  max-width:660px; margin-inline:auto;
}
.field{ position:relative; display:flex; flex-direction:column; gap:.25rem; }
.field-full{ grid-column:1/-1; }

.field label{
  font-size:.6rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea,.field select{
  width:100%; font-family:var(--sans); font-size:.92rem; font-weight:400; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:.5rem 0; border-radius:0;
  transition:border-color .45s var(--ease-out);
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:60px; line-height:1.6; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-bottom-color:var(--ink);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--sand); }
.field.has-error input,.field.has-error textarea{ border-bottom-color:#B5765C; }

.select-wrap{ position:relative; }
.select-wrap::after{
  content:""; position:absolute; right:2px; top:50%; width:6px; height:6px;
  border-right:1px solid var(--taupe); border-bottom:1px solid var(--taupe);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.select-wrap select{ cursor:pointer; padding-right:1.6rem; }

.err{ font-size:.68rem; color:#A5563F; min-height:1em; letter-spacing:.02em; }

.check{ display:flex; align-items:center; gap:.6rem; cursor:pointer; margin-top:.75rem; font-size:.8rem; color:var(--muted); }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check-box{
  flex:0 0 16px; width:16px; height:16px; border:1px solid var(--line); border-radius:50%; position:relative;
  transition:background-color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.check-box::after{
  content:""; position:absolute; left:5px; top:1.5px; width:4px; height:8px;
  border-right:1.5px solid var(--cream); border-bottom:1.5px solid var(--cream);
  transform:rotate(45deg) scale(0); transition:transform .35s var(--ease-out);
}
.check input:checked + .check-box{ background:var(--ink); border-color:var(--ink); }
.check input:checked + .check-box::after{ transform:rotate(45deg) scale(1); }
.check input:focus-visible + .check-box{ outline:1.5px solid var(--taupe); outline-offset:3px; }

/* Calendario */
.field-date input[readonly]{ cursor:pointer; }
.field-date.is-disabled{ opacity:.42; }
.cal{
  position:absolute; z-index:60; top:calc(100% - 1.6rem); left:0;
  width:min(300px,88vw); background:#fff;
  border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:1rem;
  box-shadow:0 24px 52px -26px rgba(28,24,21,.45);
  animation:calIn .35s var(--ease-out);
}
@keyframes calIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.cal-title{ font-family:var(--serif); font-size:1rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); }
.cal-nav{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--taupe); font-size:.8rem; transition:color .3s, background-color .3s; }
.cal-nav:hover{ color:var(--ink); background:var(--beige); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-wd{ font-size:.55rem; letter-spacing:.14em; color:var(--stone); text-align:center; padding-bottom:.4rem; text-transform:uppercase; }
.cal-day{
  aspect-ratio:1; display:grid; place-items:center; font-size:.8rem; color:var(--ink-soft);
  border-radius:50%;
  transition:background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.cal-day:hover:not(:disabled){ background:var(--beige); }
.cal-day[disabled]{ color:var(--sand); cursor:default; }
.cal-day.is-sel{ background:var(--ink); color:var(--cream); }
.cal-empty{ aspect-ratio:1; }

.form-foot{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:.6rem; }
.form-note{ font-size:.72rem; color:var(--stone); letter-spacing:.02em; }
.form-status{ font-size:.8rem; color:var(--taupe); min-height:1.2em; }
.form-status.is-bad{ color:#A5563F; }
.btn.is-busy{ opacity:.55; pointer-events:none; }

.thanks{ text-align:center; max-width:520px; margin:clamp(2rem,5vw,4rem) auto 0; }
.thanks-rule{ display:block; width:40px; height:1px; background:var(--stone); margin:0 auto 1.6rem; }
.thanks h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.2; color:var(--ink); margin-bottom:.9rem;
}
.thanks h3 em{ font-style:italic; color:var(--taupe); display:block; }
.thanks p{ font-size:.92rem; color:var(--muted); }

/* --- Behind --- */
.behind-grid{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center; }
.behind-copy .body{ margin-bottom:.85rem; }
.behind-copy .sec-title{ margin-bottom:1.2rem; }
.behind-sign{
  display:block; margin-top:1.4rem;
  font-family:var(--script); font-size:2.1rem; color:var(--taupe); line-height:1;
}

/* --- Footer --- */
.footer{ padding-top:clamp(3rem,6vw,4.5rem); padding-bottom:1.6rem; border-top:1px solid var(--line-soft); }
.footer-grid{ display:grid; gap:2rem; align-items:start; }
.footer-logo{ display:block; font-family:var(--script); font-size:2.4rem; color:var(--ink); line-height:1; }
.footer-role{ display:block; margin-top:.5rem; font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--taupe); }
.footer-links{ display:flex; flex-direction:column; gap:.55rem; }
.footer-links a{ position:relative; font-size:.78rem; letter-spacing:.05em; color:var(--muted); width:fit-content; }
.footer-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease-out);
}
.footer-links a:hover{ color:var(--ink); }
.footer-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.footer-claim{ font-family:var(--serif); font-size:1.05rem; color:var(--taupe); line-height:1.4; }
.footer-claim em{ font-style:italic; color:var(--ink); }
.footer-legal{
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.2rem; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone);
}

/* =============================================================
   7. EFECTOS
   ============================================================= */
/* Cursor: una bolita blanca translúcida que sigue a la flecha con retardo.
   La flecha del sistema se mantiene. */
.dot{
  position:fixed; top:0; left:0; z-index:9997;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%;
  background:rgba(255,255,255,.34);
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(4px);
  pointer-events:none;
  opacity:0;
  transition:opacity .5s var(--ease-out), width .5s var(--ease-out),
             height .5s var(--ease-out), margin .5s var(--ease-out),
             background-color .5s var(--ease-out);
  will-change:transform;
}
.dot.is-on{ opacity:1; }
/* al pasar por algo pulsable, crece un poco */
.dot.is-over{
  width:44px; height:44px; margin:-22px 0 0 -22px;
  background:rgba(255,255,255,.18);
}

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
.no-js .reveal{ opacity:1; transform:none; }

[data-rule]{ transform:scaleX(0); transition:transform 1.1s var(--ease-out); }
[data-rule].is-in{ transform:scaleX(1); }

/* =============================================================
   8. RESPONSIVE
   ============================================================= */
/* Móvil: aligeramos los desenfoques para que vaya fluido.
   El fondo mantiene el efecto; los paneles usan color translúcido sin blur. */
@media (max-width:719px){
  .bg-blur{ filter:sepia(.34) saturate(.8) brightness(1.05) contrast(.9) blur(16px); }
  .destinations,.contact,.qa,.reader,.hero-foot,.pill,.glass{ backdrop-filter:none; }
  /* sin blur en movil: el color hace todo el trabajo, un pelin mas suave
     para que la tela se siga apreciando por detras */
  /* en movil no hay backdrop-filter: el recuadro queda definido solo por
     el borde y la sombra, sin ningun relleno de color */
  .glass,.reader,.destinations,.contact,.qa{ background:transparent; }
  .hero-foot{ background:rgba(251,248,243,.7); }
  .pill{ background:rgba(251,248,243,.74); }
}

/* portada en móvil: píldoras centradas y franja apilada */
@media (max-width:539px){
  .hero-top{ justify-content:center; }
  .pill-ghost{ display:none; }
  .hero-foot{ flex-direction:column; gap:.3rem; border-radius:var(--r-lg); padding:.85rem 1.2rem; }
  .hero-foot li + li::before{ display:none; }
  .scroll-cue{ left:50%; right:auto; transform:translateX(-50%); bottom:8.5rem; }
}

/* deja hueco al círculo de scroll a la derecha */
@media (min-width:540px){
  .hero-foot{ max-width:calc(100% - 11rem); padding-inline:1.8rem; }
}

@media (min-width:540px){
  .form{ grid-template-columns:1fr 1fr; }
}

@media (min-width:720px){
  .shot{ flex:0 0 calc((100% - 2 * var(--gal-gap)) / 3); }
  .about-grid{ grid-template-columns:1.15fr .85fr; align-items:center; }
  .about-close{ grid-template-columns:1fr 1fr; gap:3rem; }
  .dest-grid{ grid-template-columns:1fr 1fr; }
  .behind-grid{ grid-template-columns:.8fr 1.2fr; }
  .footer-grid{ grid-template-columns:1.2fr .8fr 1fr; }

  /* Ritmo alternado: 01 texto-foto · 02 foto-texto · 03 texto-foto · 04 foto-texto */
  .packrow{ grid-template-columns:1fr 1.02fr; }
  /* altura controlada: dos packs completos por pantalla.
     La foto se estira hasta igualar el alto del texto. */
  .packrow-media{ max-width:clamp(240px, 24vw, 320px); }
  .packrow-media .ph{ aspect-ratio:1/1; height:auto; }
  /* cada foto pegada al borde exterior de su lado */
  .packrow:nth-child(odd)  .packrow-media{ margin-left:auto; }
  .packrow:nth-child(even) .packrow-media{ margin-right:auto; }
  .packrow:nth-child(odd)  .packrow-media{ order:2; }
  .packrow:nth-child(odd)  .packrow-body { order:1; }
  .packrow:nth-child(even) .packrow-media{ order:1; }
  .packrow:nth-child(even) .packrow-body { order:2; }
}

@media (min-width:960px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .nav-burger{ display:none; }
  .nav-panel{ display:none; }
  .rail-nav{ display:flex; }

  /* Timeline horizontal */
  .timeline{ grid-template-columns:repeat(4,1fr); gap:2rem; padding-top:2.4rem; }
  .tl-track{ left:0; right:0; top:5px; bottom:auto; width:auto; height:1px; }
  .tl-fill{ transform:scaleX(0); transform-origin:left; }
  .tl-step{ padding:0; }
  .tl-dot{ top:-2.4rem; left:0; }
  .tl-step p{ max-width:26ch; }

  .about-manifesto{ font-size:clamp(1.3rem,1.9vw,1.7rem); max-width:44ch; }
}

@media (min-width:1280px){
  .packrow{ gap:clamp(1.6rem,2.6vw,2.6rem); }
  .packrow-body{ padding-inline:clamp(.4rem,1vw,1rem); }
}

/* =============================================================
   9. REDUCED MOTION — solo efectos intrusivos
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  .scroll-cue-arrow{ animation:none; opacity:.85; }
  html{ scroll-behavior:auto; }
  /* la intro sigue existiendo pero sin desplazamiento */
  .hero-word,.hero-sub,.hero-tagline,.hero-btn{ animation-name:softIn; }
  .hero-layer{ transform:none; }
  .bg-sharp{ transform:scale(1.02); }
}

/* =============================================================
   10. PÁGINAS INTERIORES
   ============================================================= */

/* --- "Conocednos más a fondo": desplegable bajo el primer apartado --- */
.deeper{ padding-block:clamp(1rem,2vh,1.8rem); }
.deep{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.deep summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding-block:1.1rem;
  transition:color .4s var(--ease-out);
}
.deep summary::-webkit-details-marker{ display:none; }
.deep-label{
  font-family:var(--serif); font-size:clamp(1rem,1.5vw,1.25rem);
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink);
}
.deep summary i{ position:relative; width:12px; height:12px; flex:0 0 12px; }
.deep summary i::before,.deep summary i::after{
  content:""; position:absolute; background:var(--taupe); transition:transform .5s var(--ease-out);
}
.deep summary i::before{ left:0; top:5.5px; width:12px; height:1px; }
.deep summary i::after{ left:5.5px; top:0; width:1px; height:12px; }
.deep[open] summary i::after{ transform:scaleY(0); }
.deep summary:hover .deep-label{ color:var(--taupe); }

.deep-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease-out); }
.deep[open] .deep-body{ grid-template-rows:1fr; }
.deep-grid{ overflow:hidden; display:grid; gap:clamp(1.2rem,2.5vw,2.4rem); align-items:center; }
.deep[open] .deep-grid{ padding-block:1.6rem 2rem; }
.deep-fig{ max-width:clamp(160px,19vw,220px); }
.deep-copy .lead{ margin-bottom:.8rem; }
.deep-cta{ margin-top:1.2rem; }

/* --- Títulos de página --- */
.page-title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,4vw,3.2rem); line-height:1.05; color:var(--ink);
}
.section.pronto{ padding-block:clamp(4rem,10vh,7rem); }

/* --- "Muy pronto" --- */
.pronto-box{
  max-width:560px; margin:clamp(1.5rem,3vw,2.5rem) auto 0;
  text-align:center;
}
.pronto-kicker{
  display:block; font-size:.62rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--taupe); margin-bottom:1rem;
}
.pronto-lead{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.4rem,2.6vw,2rem); color:var(--ink); margin-bottom:.8rem;
}
.pronto-text{
  font-size:clamp(.95rem,1.1vw,1.08rem); line-height:1.7; color:var(--ink-soft);
  max-width:44ch; margin-inline:auto;
}
.pronto-box .mini-rule{ margin:1.6rem auto; }

/* --- Julia --- */
.julia-page{ padding-block:clamp(6.5rem,14vh,9rem) clamp(3.5rem,8vh,5.5rem); }
.julia-layout{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
.julia-intro{ padding-bottom:clamp(.5rem,1.5vw,1.2rem); }
.julia-intro .sec-index{ margin-bottom:.35rem; }

/* Foto cuadrada con los bordes difuminados: se funde con la tela,
   sin recorte duro ni marco. */
/* Foto cuadrada, con el borde limpio de siempre */
.ph-cuadrada{ aspect-ratio:1/1; }
.julia-name{
  font-family:var(--script); font-weight:400;
  font-size:clamp(2.6rem,6vw,4.6rem);
  /* Pinyon Script tiene trazos muy largos: necesita su propio espacio.
     Sin margenes negativos, que hacian que la J pisara los textos vecinos. */
  line-height:1.34;
  color:var(--ink);
  padding-left:.34em;      /* hueco para el trazo largo de la J */
  padding-right:.08em;
}
.julia-role{
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--taupe); margin-top:.15rem;
}
.julia-claim{
  font-family:var(--serif); font-size:clamp(1rem,1.6vw,1.28rem);
  color:var(--ink-soft); margin-top:1.1rem; max-width:26ch;
}
.julia-claim em{ font-style:italic; color:var(--taupe); }
/* El retrato, justo debajo del bloque del nombre */
.julia-fig{ width:clamp(140px,15vw,195px); margin-top:clamp(1.2rem,2.5vw,1.8rem); }

.julia-col-story .jblock:first-child{ border-top:0; padding-top:0; }
.jblock{ padding-block:clamp(1.4rem,2.6vw,2.2rem); border-top:1px solid var(--line-soft); }
.jnum{
  display:block; font-size:.6rem; letter-spacing:.3em; color:var(--stone); margin-bottom:.5rem;
}
.jtitle{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.2rem,1.9vw,1.6rem); text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink); margin-bottom:.8rem;
}
.jblock .prose{ max-width:64ch; }
.jblock .prose + .prose{ margin-top:.9rem; }
.julia-sign{
  font-family:var(--script); font-size:clamp(2.4rem,5vw,3.4rem);
  color:var(--taupe); line-height:1.3; margin-top:2rem;
  padding-left:.34em;
}
.julia-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }

/* --- Equipo --- */
.team-grid{
  display:grid; gap:clamp(.8rem,1.6vw,1.4rem);
  grid-template-columns:repeat(2,1fr);
  margin-top:clamp(1.5rem,3vw,2.5rem);
}
.team-card .ph{ margin-bottom:.7rem; }
.team-name{
  font-family:var(--serif); font-weight:400; font-size:.95rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--taupe); text-align:center;
}

/* --- Contacto: tres recuadros transparentes --- */
.contacto-datos{ padding-block:clamp(1rem,2vh,2rem) clamp(3.5rem,7vh,5rem); }
.ccards{
  display:grid; gap:clamp(.6rem,1.2vw,1rem);
  max-width:900px; margin-inline:auto;
}
.ccard{
  display:grid; justify-items:center; gap:.35rem;
  padding:clamp(1.1rem,2vw,1.5rem) 1rem;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 18px 44px -40px rgba(28,24,21,.45);
  text-align:center;
  transition:background-color .55s var(--ease-out), transform .55s var(--ease-out);
}
.ccard:hover{ background:rgba(255,255,255,.3); transform:translateY(-3px); }
.ccard-label{
  font-size:.56rem; letter-spacing:.3em; text-transform:uppercase; color:var(--taupe);
}
.ccard-valor{
  position:relative; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.2; color:var(--ink);
}
.ccard-mail{ font-size:clamp(.85rem,1.05vw,1rem); word-break:break-all; }
.ccard-valor::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease-out);
}
.ccard:hover .ccard-valor::after{ transform:scaleX(1); transform-origin:left; }
.ccard-nota{ font-size:.7rem; color:var(--muted); letter-spacing:.02em; }

/* --- El formulario, dentro de su propio recuadro --- */
.form{
  padding:clamp(1.4rem,2.6vw,2.2rem) clamp(1.2rem,2.4vw,2rem);
  border-radius:var(--r-xl);
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(20px) saturate(1.15);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 22px 56px -48px rgba(28,24,21,.5);
}

@media (min-width:960px){
  /* la columna de la izquierda, ajustada a su contenido:
     asi el texto no se va tan a la derecha */
  .julia-layout{
    grid-template-columns:minmax(200px, 290px) 1fr;
    gap:clamp(2.5rem,4vw,4rem);
    align-items:start;
  }
  .julia-col-intro{ position:sticky; top:7.5rem; }
}

@media (min-width:720px){
  .deep-grid{ grid-template-columns:auto 1fr; }

  .team-grid{ grid-template-columns:repeat(4,1fr); }
  .ccards{ grid-template-columns:repeat(3,1fr); }
}

/* En pantallas anchas la tela entra casi entera y su centro es liso.
   Ampliándola se recuperan los pliegues que sí se ven en tablet. */
@media (min-width:960px){
  .bg-sharp{ transform:scale(calc(1.38 + var(--p, 0) * .08)); }
  .bg-blur{ transform:scale(1.55); }
  .bg-two{ transform:scale(1.5); }
  .bg-img{ object-position:50% 42%; }
}
@media (min-width:1500px){
  .bg-sharp{ transform:scale(calc(1.6 + var(--p, 0) * .08)); }
  .bg-blur{ transform:scale(1.8); }
  .bg-two{ transform:scale(1.7); }
}

/* --- Galería: los dos apartados a la espera de material --- */
.gal-secciones{
  display:grid; gap:clamp(.8rem,1.6vw,1.4rem);
  max-width:820px; margin:clamp(2.5rem,5vw,4rem) auto 0;
}
.gal-bloque{
  padding:clamp(1.2rem,2.4vw,1.8rem) 0;
  border-top:1px solid var(--line-soft);
  text-align:center;
}
.gal-num{ display:block; font-size:.58rem; letter-spacing:.3em; color:var(--stone); margin-bottom:.5rem; }
.gal-titulo{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.2rem,2vw,1.6rem); text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink); margin-bottom:.4rem;
}
.gal-nota{ font-size:.85rem; color:var(--muted); }
@media (min-width:720px){ .gal-secciones{ grid-template-columns:repeat(2,1fr); } }

/* --- Formulario: marcas de obligatorio y textos de ayuda --- */
.req{ color:var(--taupe); font-weight:400; }
.ayuda{
  font-size:.7rem; line-height:1.45; color:var(--muted);
  letter-spacing:.01em; margin-top:.15rem;
}

/* La caligrafía necesita que las letras se toquen: sin separación. */
.hero-word,.nav-logo,.splash-mark,.footer-logo,.julia-name,.julia-sign,.behind-sign{
  letter-spacing:0;
  font-kerning:normal;
}

/* --- Servicios extra dentro del formulario --- */
.extras-check{ display:grid; gap:.15rem; margin-top:.3rem; }
.extras-check .check{ margin-top:0; }
@media (min-width:540px){ .extras-check{ grid-template-columns:repeat(2,1fr); } }

/* =============================================================
   11. GALERÍA
   ============================================================= */
.galeria{ padding-block:clamp(6.5rem,14vh,9rem) clamp(4rem,9vh,6rem); }

.gal-h{
  display:flex; align-items:baseline; gap:.9rem;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.15rem,1.8vw,1.5rem);
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink);
  margin:clamp(1.8rem,3.5vw,2.8rem) 0 clamp(.8rem,1.6vw,1.2rem);
}
.gal-h span{
  font-family:var(--sans); font-size:.58rem; letter-spacing:.28em; color:var(--stone);
}

.gal-zona{ position:relative; }
.gal-rail{
  --gap:clamp(.6rem,1.2vw,1rem);
  display:flex; gap:var(--gap);
  overflow-x:auto; scroll-snap-type:x proximity;
  padding-block:.3rem;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
}
.gal-rail::-webkit-scrollbar{ display:none; }
.gal-rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }

/* --- Vídeos --- */
.clip{
  position:relative; flex:0 0 calc((100% - var(--gap)) / 2);
  aspect-ratio:9/16; overflow:hidden; border-radius:var(--r-lg);
  background:var(--beige); scroll-snap-align:start;
}
.clip-video{ width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; }
.clip-play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(28,24,21,.05), rgba(28,24,21,.22));
  transition:opacity .5s var(--ease-out);
}
.clip-play::before{
  content:""; position:absolute; width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.42); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.7);
  transition:transform .5s var(--ease-out), background-color .5s var(--ease-out);
}
.clip-tri{
  position:relative; z-index:1;
  width:0; height:0; margin-left:4px;
  border-left:14px solid var(--ink);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.clip:hover .clip-play::before{ transform:scale(1.08); background:rgba(255,255,255,.62); }
.clip.is-playing .clip-play{ opacity:0; pointer-events:none; }

/* --- Fotos --- */
.gal-foto{
  flex:0 0 calc((100% - var(--gap)) / 2);
  aspect-ratio:3/4; overflow:hidden; border-radius:var(--r-lg);
  background:var(--beige); scroll-snap-align:start;
}
.gal-foto img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-out); }
.gal-foto:hover img{ transform:scale(1.05); }

/* --- Flechas --- */
.gal-zona .rail-nav{ display:contents; }
.gal-zona .rail-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%;
  background:rgba(243,237,227,.72); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.7);
  color:var(--ink); font-size:1rem;
  box-shadow:0 6px 20px -12px rgba(28,24,21,.6);
  transition:background-color .5s var(--ease-out), transform .5s var(--ease-out);
}
.gal-zona [data-rail-prev]{ left:clamp(.4rem,1.4vw,1rem); }
.gal-zona [data-rail-next]{ right:clamp(.4rem,1.4vw,1rem); }
.gal-zona .rail-arrow:hover{ background:rgba(250,246,240,.9); transform:translateY(-50%) scale(1.08); }

.gal-pie{ margin-top:clamp(2.2rem,4vw,3.2rem); text-align:center; }

@media (min-width:720px){
  .clip{ flex:0 0 calc((100% - 2 * var(--gap)) / 3); }
  .gal-foto{ flex:0 0 calc((100% - 2 * var(--gap)) / 3); }
}
@media (min-width:1100px){
  .clip{ flex:0 0 calc((100% - 3 * var(--gap)) / 4); }
  .gal-foto{ flex:0 0 calc((100% - 3 * var(--gap)) / 4); }
}
/* si el navegador obliga a empezar en silencio, se avisa */
.clip.is-muted.is-playing::after{
  content:"Sin sonido"; position:absolute; right:.6rem; bottom:.6rem;
  font-size:.55rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream); background:rgba(28,24,21,.45);
  padding:.3rem .6rem; border-radius:var(--r-pill); backdrop-filter:blur(6px);
}