/* ==========================================================================
   SOLO AIR CANARIAS HOME
   Aguila IA Studio · agosto 2026

   PALETA. La versión anterior usaba negro + dorado latón + hueso crema.
   Esa combinación es la que usa TODA la competencia de fragancia premium,
   y es la que la skill de diseño prohíbe como recurso por defecto.
   Aquí el acento sale del propio producto: el turquesa del frasco.
   El dorado sigue existiendo, pero solo dentro de las fotografías.

   FORMA. Radio 0 en toda la página. El envase es de aristas vivas.
   ========================================================================== */

:root{
  --negro:      #0B0D0F;
  --negro-alto: #14181A;
  --linea:      #23292C;
  --blanco:     #E9EDEE;
  --apagado:    #9BA5A7;
  --agua:       #4FB5AD;
  --agua-baja:  #2E6B67;

  --texto:  'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:   'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --ancho: 1400px;
  --curva: cubic-bezier(.16,1,.3,1);
}

@font-face{ font-family:'Geist'; src:url('../fuentes/Geist-latin.woff2') format('woff2');
  font-weight:100 900; font-display:swap;
  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; }
@font-face{ font-family:'Geist'; src:url('../fuentes/Geist-latin-ext.woff2') format('woff2');
  font-weight:100 900; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Geist Mono'; src:url('../fuentes/GeistMono-latin.woff2') format('woff2');
  font-weight:100 900; font-display:swap;
  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; }
@font-face{ font-family:'Geist Mono'; src:url('../fuentes/GeistMono-latin-ext.woff2') format('woff2');
  font-weight:100 900; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--negro); color:var(--blanco);
  font-family:var(--texto); font-weight:300;
  font-size:clamp(1rem,.94rem + .3vw,1.125rem); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ font-weight:500; letter-spacing:-.025em; line-height:1.08; margin:0; }
p{ margin:0; }
a{ color:inherit; }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--agua); color:var(--negro); padding:.75rem 1.25rem; font-weight:500;
}
.saltar:focus{ left:0; }
:focus-visible{ outline:2px solid var(--agua); outline-offset:3px; }

/* --- cejilla: máximo 3 en toda la página ------------------------------- */
.cejilla{
  font-family:var(--dato); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--apagado); margin-bottom:1.5rem;
}

/* --- botones ----------------------------------------------------------- */
.btn,.btn-oscuro{
  display:inline-block; padding:.95rem 1.9rem; font-weight:500; font-size:.94rem;
  text-decoration:none; white-space:nowrap; transition:transform .2s var(--curva), background .2s;
}
.btn{ background:var(--agua); color:var(--negro); }
.btn:hover{ background:#63C7BF; }
.btn:active{ transform:translateY(1px); }
.btn-oscuro{ background:var(--negro); color:var(--blanco); }
.btn-oscuro:hover{ background:var(--negro-alto); }
.btn-oscuro:active{ transform:translateY(1px); }
.btn-plano{
  display:inline-block; padding:.95rem .4rem; font-size:.94rem; white-space:nowrap;
  color:var(--blanco); text-decoration:none;
  border-bottom:1px solid var(--linea); transition:border-color .25s;
}
.btn-plano:hover{ border-color:var(--agua); }

/* ==========================================================================
   BARRA · una sola línea, 68 px
   ========================================================================== */
.barra{
  position:sticky; top:0; z-index:40; height:68px;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:0 clamp(1rem,4vw,3rem);
  background:rgba(11,13,15,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.marca{ text-decoration:none; display:flex; align-items:baseline; gap:.6rem; min-width:0; }
.marca-n{ font-weight:500; letter-spacing:-.02em; white-space:nowrap; }
.marca-s{
  font-family:var(--dato); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--apagado); white-space:nowrap;
}
.menu{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.2rem); }
.menu a{ text-decoration:none; font-size:.92rem; color:var(--apagado); transition:color .2s; white-space:nowrap; }
.menu a:hover{ color:var(--blanco); }
.btn-mini{
  padding:.5rem 1.1rem; background:var(--agua); color:var(--negro)!important;
  font-weight:500;
}
.btn-mini:hover{ background:#63C7BF; }
@media (max-width:720px){
  .marca-s{ display:none; }
  .menu a:not(.btn-mini){ display:none; }
}

/* ==========================================================================
   1 · HERO · reparto asimétrico sobre humo
   ========================================================================== */
.hero{ position:relative; min-height:calc(100dvh - 68px); display:flex; align-items:center; overflow:hidden; }
.hero-humo{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero::after{  /* asienta el texto sobre el humo sin apagarlo */
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(11,13,15,.82) 0%, rgba(11,13,15,.34) 46%, rgba(11,13,15,0) 74%);
}
.hero-rejilla{
  position:relative; z-index:2; width:100%; max-width:var(--ancho); margin:0 auto;
  padding:2rem clamp(1rem,4vw,3rem) 3rem;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(2rem,5vw,5rem); align-items:center;
}
.hero-texto{ max-width:36rem; }
.hero h1{
  font-size:clamp(2.9rem,2rem + 4.6vw,5.6rem); font-weight:400;
  letter-spacing:-.04em; margin-bottom:1.6rem;
}
.hero-bajada{ font-size:clamp(1.05rem,1rem + .35vw,1.25rem); color:var(--apagado); max-width:30rem; }
.hero-botones{ display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem; margin-top:2.5rem; }
.hero-frasco{ margin:0; justify-self:center; }
.hero-frasco img{
  max-height:min(74vh,760px); width:auto;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.65));
}
@media (max-width:900px){
  .hero-rejilla{ grid-template-columns:1fr; padding-top:3rem; text-align:left; }
  .hero-frasco{ order:-1; }
  .hero-frasco img{ max-height:36vh; }
  .hero::after{ background:linear-gradient(180deg, rgba(11,13,15,.55) 0%, rgba(11,13,15,.88) 55%); }
}

/* ==========================================================================
   2 · LAS SIETE · carril horizontal
   Sin JS es un carrusel que se arrastra con el dedo. Con JS, GSAP lo
   convierte en barrido horizontal fijado. La estructura no depende del efecto.
   ========================================================================== */
.siete{ border-top:1px solid var(--linea); }
.siete-cab{
  max-width:var(--ancho); margin:0 auto;
  padding:clamp(4rem,9vw,7rem) clamp(1rem,4vw,3rem) clamp(2rem,4vw,3rem);
}
.siete-cab h2{ font-size:clamp(1.9rem,1.4rem + 2.2vw,3.4rem); max-width:22ch; }

.via{ overflow:hidden; }
.pista{
  display:flex; gap:0; list-style:none; margin:0;
  padding:0 0 2rem clamp(1rem,4vw,3rem);
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.lam{
  flex:0 0 min(84vw,420px); scroll-snap-align:start;
  padding:2.5rem 2.2rem 3rem; border-left:1px solid var(--linea);
  position:relative; background:linear-gradient(180deg, rgba(255,255,255,.018), transparent 60%);
}
.lam::before{
  content:''; position:absolute; left:-1px; top:0; width:2px; height:0;
  background:var(--tinte); transition:height .6s var(--curva);
}
.lam:hover::before,.lam:focus-within::before{ height:100%; }
.lam-num{
  font-family:var(--dato); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinte); margin-bottom:1.4rem;
}
.lam h3{ font-size:clamp(1.7rem,1.4rem + 1.2vw,2.4rem); margin-bottom:2rem; }

.piramide{ margin:0; display:grid; grid-template-columns:auto; gap:0; }
.piramide dt{
  font-family:var(--dato); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--apagado);
  padding-top:1.1rem; margin-top:1.1rem; border-top:1px solid var(--linea);
}
.piramide dt:first-of-type{ border-top:0; margin-top:0; padding-top:0; }
.piramide dd{ margin:.5rem 0 0; font-size:1.02rem; line-height:1.5; }

/* revelado por IntersectionObserver. Estado por defecto: VISIBLE.
   Si el JS no llega, el contenido se ve igual. */
.con-js .espera{ opacity:0; transform:translateY(18px); }
.con-js .espera.vista{ opacity:1; transform:none; transition:opacity .7s var(--curva), transform .7s var(--curva); }

/* ==========================================================================
   3 · MANIFIESTO · una sola idea a ancho completo
   ========================================================================== */
.manifiesto{
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
  padding:clamp(5rem,11vw,9rem) clamp(1rem,4vw,3rem);
}
.grande{
  max-width:26ch; margin:0 auto; text-align:center;
  font-size:clamp(1.9rem,1.2rem + 3.4vw,4rem); font-weight:400;
  letter-spacing:-.035em; line-height:1.1;
}
.grande span{ display:block; margin-top:1.4rem; font-size:.33em; letter-spacing:0; line-height:1.5; color:var(--apagado); max-width:44ch; margin-inline:auto; }

/* ==========================================================================
   4 · CÓMO FUNCIONA · bento de 5 celdas para 5 contenidos
   ========================================================================== */
.como{ max-width:var(--ancho); margin:0 auto; padding:clamp(4rem,9vw,7rem) clamp(1rem,4vw,3rem); }
.como-titulo{ font-size:clamp(1.9rem,1.4rem + 2.2vw,3.4rem); max-width:18ch; margin-bottom:clamp(2rem,4vw,3.5rem); }
.bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); }
.celda{ background:var(--negro); padding:2.2rem; display:flex; flex-direction:column; justify-content:flex-end; gap:.9rem; }
.celda h3{ font-size:1.35rem; }
.celda p{ color:var(--apagado); font-size:.98rem; }
/* Rejilla explicita: 5 contenidos, 5 celdas, cero huecos.
   foto ocupa 1-2 en dos filas; a su derecha dos textos y el dato; abajo el acento. */
.celda-foto{ grid-column:1/3; grid-row:1/3; padding:0; }
.celda-foto img{ width:100%; height:100%; object-fit:cover; }
.celda-texto{ grid-column:3/4; grid-row:1/2; }
.celda-dato{ grid-column:4/5; grid-row:1/2; background:var(--negro-alto); justify-content:center; gap:.4rem; }
.celda-texto + .celda-acento{ grid-column:1/5; grid-row:3/4; }
.bento > .celda-texto:nth-of-type(4){ grid-column:3/5; grid-row:2/3; }
/* la especificidad importa: .celda p (0,0,1,1) le gana a .dato-cifra (0,0,1,0) */
.celda-dato .dato-cifra{ font-family:var(--dato); font-weight:400;
  font-size:clamp(3.4rem,2.6rem + 3.4vw,5.4rem); line-height:.95; letter-spacing:-.04em;
  color:var(--agua); }
.celda-dato .dato-pie{ font-size:.92rem; max-width:20ch; }
.celda-acento{ grid-column:1/5; background:var(--agua); color:var(--negro); justify-content:center; }
.celda-acento p{ color:rgba(11,13,15,.78); }
.celda-acento .btn-oscuro{ align-self:flex-start; margin-top:.8rem; }
@media (max-width:1000px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .celda-foto{ grid-column:1/3; grid-row:auto; aspect-ratio:16/10; }
  .celda-texto,.bento > .celda-texto:nth-of-type(4){ grid-column:auto; grid-row:auto; }
  .celda-dato{ grid-column:auto; grid-row:auto; }
  .celda-acento,.celda-texto + .celda-acento{ grid-column:1/3; grid-row:auto; }
}
@media (max-width:560px){
  .bento{ grid-template-columns:1fr; }
  .celda-foto,.celda-texto,.celda-dato,.celda-acento,
  .bento > .celda-texto:nth-of-type(4),.celda-texto + .celda-acento{ grid-column:1/2; grid-row:auto; }
}

/* ==========================================================================
   5 · FORMATOS · asimétrico 1 grande + 2 pequeños, nunca tres iguales
   ========================================================================== */
.formatos{ border-top:1px solid var(--linea); max-width:var(--ancho); margin:0 auto; padding:clamp(4rem,9vw,7rem) clamp(1rem,4vw,3rem); }
.formatos-cab h2{ font-size:clamp(1.9rem,1.4rem + 2.2vw,3.4rem); max-width:16ch; }
.formatos-rejilla{ margin-top:clamp(2.5rem,5vw,4rem); display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(1.5rem,3vw,2.5rem); }
.form-mayor{
  grid-row:span 2; display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(170deg,var(--negro-alto),var(--negro) 70%);
  border:1px solid var(--linea); padding:2.5rem; min-height:520px; max-height:760px;
}
.form-mayor img{ max-height:min(44vh,430px); width:auto; margin:0 auto 2.5rem; filter:drop-shadow(0 26px 44px rgba(0,0,0,.6)); }
.form-menor{ display:flex; align-items:center; gap:1.8rem; border:1px solid var(--linea); padding:1.8rem 2rem; }
.form-menor img{ max-height:min(20vh,180px); width:auto; flex:0 0 auto; filter:drop-shadow(0 16px 28px rgba(0,0,0,.55)); }
.form-txt h3{ font-size:1.5rem; }
.form-linea{ font-family:var(--dato); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--agua); margin:.5rem 0 .9rem; }
.form-txt p:last-child{ color:var(--apagado); font-size:.96rem; }
.formatos-nota{ margin-top:2.5rem; color:var(--apagado); font-size:.96rem; max-width:52ch; }
@media (max-width:900px){
  .formatos-rejilla{ grid-template-columns:1fr; }
  .form-mayor{ grid-row:auto; min-height:0; }
  .form-mayor img{ max-height:min(38vh,340px); }
}
@media (max-width:480px){
  .form-menor{ flex-direction:column; align-items:flex-start; }
  .form-menor img{ max-height:150px; }
}

/* ==========================================================================
   6 · PREGUNTAS · acordeón nativo, sin JS
   ========================================================================== */
.preguntas{ border-top:1px solid var(--linea); max-width:var(--ancho); margin:0 auto; padding:clamp(4rem,9vw,7rem) clamp(1rem,4vw,3rem); }
.preguntas h2{ font-size:clamp(1.9rem,1.4rem + 2.2vw,3.4rem); margin-bottom:clamp(2rem,4vw,3rem); max-width:18ch; }
.preguntas details{ border-top:1px solid var(--linea); }
.preguntas details:last-of-type{ border-bottom:1px solid var(--linea); }
.preguntas summary{
  cursor:pointer; list-style:none; padding:1.6rem 3rem 1.6rem 0; position:relative;
  font-size:clamp(1.05rem,1rem + .4vw,1.25rem); font-weight:400; transition:color .2s;
}
.preguntas summary::-webkit-details-marker{ display:none; }
.preguntas summary:hover{ color:var(--agua); }
.preguntas summary::after{
  content:''; position:absolute; right:.4rem; top:50%; width:13px; height:1px;
  background:var(--apagado); box-shadow:0 0 0 0 transparent;
}
.preguntas summary::before{
  content:''; position:absolute; right:.4rem; top:50%; width:13px; height:1px;
  background:var(--apagado); transform:rotate(90deg); transition:transform .3s var(--curva);
}
.preguntas details[open] summary::before{ transform:rotate(0deg); }
.preguntas details p{ color:var(--apagado); max-width:62ch; padding-bottom:1.8rem; }

/* ==========================================================================
   7 · CONTACTO
   ========================================================================== */
.contacto{
  border-top:1px solid var(--linea); max-width:var(--ancho); margin:0 auto;
  padding:clamp(4rem,9vw,7rem) clamp(1rem,4vw,3rem);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start;
}
.contacto h2{ font-size:clamp(1.9rem,1.4rem + 2.2vw,3.4rem); margin-bottom:1.2rem; }
.contacto-txt p{ color:var(--apagado); max-width:34ch; }
.contacto-vias{ list-style:none; margin:0; padding:0; }
.contacto-vias li{ border-top:1px solid var(--linea); padding:1.4rem 0; }
.contacto-vias li:last-child{ border-bottom:1px solid var(--linea); }
.via-et{ display:block; font-family:var(--dato); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--apagado); margin-bottom:.5rem; }
.contacto-vias a{ text-decoration:none; font-size:clamp(1.1rem,1rem + .6vw,1.45rem); transition:color .2s; }
.contacto-vias a:hover{ color:var(--agua); }
@media (max-width:820px){ .contacto{ grid-template-columns:1fr; } }

/* ==========================================================================
   PIE
   ========================================================================== */
.pie{
  border-top:1px solid var(--linea); max-width:var(--ancho); margin:0 auto;
  padding:clamp(3rem,6vw,4.5rem) clamp(1rem,4vw,3rem);
  display:grid; grid-template-columns:1.6fr 1fr; gap:2.5rem; align-items:start;
}
.pie-legal{ margin-top:1rem; color:var(--apagado); font-size:.84rem; max-width:60ch; line-height:1.6; }
.pie-enlaces{ display:flex; flex-direction:column; gap:.7rem; }
.pie-enlaces a{ text-decoration:none; color:var(--apagado); font-size:.9rem; transition:color .2s; }
.pie-enlaces a:hover{ color:var(--blanco); }
.pie-fecha{ grid-column:1/-1; color:var(--apagado); font-family:var(--dato); font-size:.72rem; letter-spacing:.06em; padding-top:1.5rem; border-top:1px solid var(--linea); }
@media (max-width:720px){ .pie{ grid-template-columns:1fr; } }

/* ==========================================================================
   MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .con-js .espera{ opacity:1!important; transform:none!important; }
  .hero-humo{ display:none; }
}