/* Magoga · su caligrafía en el rombo, la tierra oscura y el óxido de sus fotos, el abrazo del mar y el campo */
@font-face{ font-family:"Spectral"; src:url("../fonts/spectral-300.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Spectral"; src:url("../fonts/spectral-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Karla"; src:url("../fonts/karla-400-600.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }

:root{
  --tierra:#221a15;
  --tierra-2:#2e241d;
  --arena:#efe6da;
  --arena-2:rgba(239,230,218,.68);
  --oxido:#9a4a28;
  --oxido-claro:#c97a52;
  --tinta:#2a211b;
  --tinta-2:#6d5f53;
  --linea:rgba(239,230,218,.16);
  --linea-clara:rgba(42,33,27,.16);
  --serif:"Spectral", Georgia, serif;
  --sans:"Karla", "Helvetica Neue", Arial, sans-serif;
  --gutter:clamp(20px, 4.5vw, 72px);
  --seccion:clamp(100px, 12vw, 190px);
  --nav-h:78px;
  --rombo:min(36vw, 50svh);
  --ease:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ overflow-x:clip; -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{ background:var(--tierra); color:var(--arena); font:400 1.08rem/1.65 var(--sans); overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:var(--oxido); color:var(--arena); }
img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:300; line-height:1.08; letter-spacing:-.01em; }
h2{ font-size:clamp(2.3rem, 4.4vw, 4.4rem); }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--oxido-claro); outline-offset:4px; }

.marco{ position:relative; overflow:hidden; background:var(--tierra-2); }
.marco img{ width:100%; height:100%; object-fit:cover; }
.js [data-parallax]{ height:114%; will-change:transform; }

.boton{ display:inline-flex; align-items:center; justify-content:center; padding:.95em 2.2em; background:var(--oxido); color:var(--arena); font-weight:600; letter-spacing:.04em; transition:background .4s ease, color .4s ease; }
.boton:hover{ background:var(--arena); color:var(--tierra); }
.enlace-linea{ border-bottom:1px solid currentColor; padding-bottom:2px; }

/* ---------- su logo: la caligrafía, «abraza» y «el equilibrio» en arena; el rombo, en línea fina */
.logo{ display:block; width:100%; height:auto; overflow:visible; fill:var(--arena); }
.logo__rombo{ fill:none; stroke:var(--arena); stroke-width:5; vector-effect:non-scaling-stroke; }
.pluma path{ stroke-dasharray:1 2; stroke-dashoffset:0; }
html.anima .pluma path{ stroke-dashoffset:1; visibility:hidden; }
html:not(.anima) .logo__magoga{ mask:none; }

/* ---------- nav: siempre a la vista, con Reservar */
.nav{ position:fixed; inset:0 0 auto; z-index:80; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 var(--gutter); font-size:.95rem; font-weight:500; transition:background .4s ease, opacity .8s ease; }
.nav.con-fondo{ background:var(--tierra); box-shadow:0 1px 0 var(--linea); }
.nav__logo{ display:block; width:58px; transition:opacity .4s ease; }
.nav__marca{ width:100%; }
.nav.sobre-portada .nav__logo{ opacity:0; pointer-events:none; }
.nav__enlaces{ display:flex; align-items:center; gap:clamp(16px, 2.2vw, 34px); }
.nav__enlaces a:not(.nav__reservar):hover{ color:var(--oxido-claro); }
.nav__reservar{ padding:.7em 1.5em; background:var(--oxido); color:var(--arena); font-weight:600; transition:background .4s ease, color .4s ease; }
.nav__reservar:hover{ background:var(--arena); color:var(--tierra); }
.nav__reservar--movil, .nav__abrir{ display:none; }
html.anima:not(.ya-visto) .nav:not(.lista){ opacity:0; }

/* ---------- portada: su vídeo a sangre y el logo en el rombo, en el centro (la precarga lo escribe ahí mismo) */
.portada{ position:relative; z-index:0; height:100svh; min-height:560px; overflow:hidden; background:var(--tierra); }
.portada__video{ position:absolute; inset:0; }
.portada__video video{ width:100%; height:100%; object-fit:cover; }
.portada__video::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(34,26,21,.5), rgba(34,26,21,.25) 60%, rgba(34,26,21,.6)); }
.portada__velo{ position:absolute; inset:0; z-index:2; background:var(--tierra); pointer-events:none; }
html:not(.anima) .portada__velo, html.ya-visto .portada__velo{ display:none; }
.portada__centro{ position:absolute; z-index:3; left:50%; top:50%; width:min(86svh, 92vw); transform:translate(-50%, -50%); }
.portada__pie{ position:absolute; z-index:3; left:var(--gutter); right:var(--gutter); bottom:clamp(22px, 4vh, 40px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; font-size:.95rem; color:var(--arena-2); }
.portada__pie p:last-child{ text-align:right; }
html.anima .portada__pie{ opacity:0; }

/* ---------- el abrazo: el mar y el campo se acercan, se abrazan y sale el plato */
.abrazo__fijo{ position:relative; height:100svh; overflow:hidden; display:grid; place-items:center; }
.abrazo h2{ position:absolute; z-index:4; top:calc(var(--nav-h) + 4vh); left:var(--gutter); right:var(--gutter); text-align:center; font-size:clamp(1.9rem, 3.4vw, 3.4rem); }
.rombo{ position:absolute; left:50%; top:54%; width:var(--rombo); aspect-ratio:1; margin:calc(var(--rombo) / -2) 0 0 calc(var(--rombo) / -2); }
.rombo img{ width:100%; height:100%; object-fit:cover; clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.rombo figcaption{ position:absolute; left:0; right:0; top:calc(100% + 18px); text-align:center; font-family:var(--serif); font-size:1.35rem; color:var(--arena-2); }
/* sin animación quedan separados; con GSAP, el desplazamiento lo pone main.js */
html:not(.anima) .rombo--mar{ transform:translateX(-62%); }
html:not(.anima) .rombo--campo{ transform:translateX(62%); }
.abrazo__plato{ position:absolute; inset:0; z-index:3; --r:0px; }
.abrazo__plato img{ width:100%; height:100%; object-fit:cover; clip-path:polygon(50% calc(54% - var(--r)), calc(50% + var(--r)) 54%, 50% calc(54% + var(--r)), calc(50% - var(--r)) 54%); }
.abrazo__plato figcaption{ position:absolute; left:var(--gutter); bottom:clamp(22px, 4vh, 40px); font-family:var(--serif); font-size:clamp(1.2rem, 1.8vw, 1.6rem); opacity:0; }
html:not(.anima) .abrazo__plato{ display:none; }

/* ---------- somos */
.somos{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(40px, 6vw, 100px); align-items:center; padding:var(--seccion) var(--gutter); background:var(--arena); color:var(--tinta); }
.somos__foto{ aspect-ratio:1600/1027; }
.somos__texto h2{ max-width:11ch; }
.somos__texto p{ max-width:30em; margin-top:clamp(24px, 3vw, 38px); font-size:1.15rem; color:var(--tinta-2); }

/* ---------- menús: Ánima o Hábitat, con sus pases */
.menus{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(40px, 6vw, 110px); padding:var(--seccion) var(--gutter); }
.menus__cabeza{ align-self:start; position:sticky; top:calc(var(--nav-h) + 30px); }
.menus__cabeza h2{ max-width:10ch; }
.menus__elegir{ display:flex; gap:10px; margin:clamp(28px, 3vw, 44px) 0 24px; }
.menus__elegir button{ padding:.55em 1.4em; border:1px solid var(--linea); font-family:var(--serif); font-size:1.5rem; color:var(--arena-2); transition:background .4s ease, color .4s ease, border-color .4s ease; }
.menus__elegir [aria-pressed="true"]{ background:var(--arena); border-color:var(--arena); color:var(--tierra); }
.menus__precio{ font-family:var(--serif); font-weight:300; font-size:clamp(3.6rem, 6vw, 5.6rem); line-height:1; }
.menus__datos{ margin-top:10px; color:var(--arena-2); }
.menus__fotos{ display:grid; margin-top:clamp(26px, 3vw, 40px); width:min(100%, 360px); aspect-ratio:4/5; }
.menus__foto{ grid-area:1 / 1; transition:opacity .8s ease; }
.menus[data-menu="anima"] .menus__foto--habitat, .menus[data-menu="habitat"] .menus__foto--anima{ opacity:0; }
.pases{ counter-reset:pase; border-top:1px solid var(--linea); }
.menus__lista{ min-width:0; }
.pase{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .7s var(--ease), opacity .5s ease, visibility 0s; }
.pase > div{ overflow:hidden; }
.pase h3{ padding-top:20px; font-size:clamp(1.3rem, 1.9vw, 1.7rem); }
.pase p{ margin-top:6px; font-size:.95rem; color:var(--arena-2); }
.pase > div::after{ content:""; display:block; margin-top:20px; border-bottom:1px solid var(--linea); }
.menus[data-menu="anima"] .pase:not([data-en~="anima"]), .menus[data-menu="habitat"] .pase:not([data-en~="habitat"]){ grid-template-rows:0fr; opacity:0; visibility:hidden; transition:grid-template-rows .7s var(--ease), opacity .5s ease, visibility 0s linear .7s; }
.menus[data-menu="anima"] .solo-h, .menus[data-menu="habitat"] .solo-a{ display:none; }
html:not(.js) .menus__elegir{ display:none; }
.menus__nota{ margin-top:30px; max-width:36em; font-size:.95rem; color:var(--arena-2); }

/* ---------- quesos y vinos */
.quesos{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:clamp(14px, 1.6vw, 24px); padding:var(--seccion) var(--gutter); background:var(--arena); color:var(--tinta); }
.quesos__carro{ grid-column:1 / 13; aspect-ratio:1600/700; }
.quesos__texto{ grid-column:1 / 8; padding-top:clamp(30px, 4vw, 60px); }
.quesos__texto h2{ max-width:14ch; }
.quesos__texto p{ max-width:32em; margin-top:24px; font-size:1.15rem; color:var(--tinta-2); }
.quesos__adrian{ grid-column:9 / 13; aspect-ratio:729/675; margin-top:calc(clamp(60px, 9vw, 140px) * -1); }

/* ---------- la sala */
.sala{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(14px, 1.6vw, 24px); align-items:end; padding:var(--seccion) var(--gutter) 0; }
.sala__mesa{ aspect-ratio:1200/1177; }
.sala__entrada{ aspect-ratio:3/2; }

/* ---------- visítanos */
.visitanos{ display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:clamp(40px, 6vw, 100px); padding:var(--seccion) var(--gutter); }
.visitanos h2{ font-size:clamp(2rem, 3.6vw, 3.4rem); }
.visitanos h2 span{ display:block; margin-top:14px; font-family:var(--sans); font-size:1.05rem; font-weight:500; color:var(--arena-2); }
.visitanos__datos{ min-width:0; }
.horario{ margin-bottom:clamp(28px, 3vw, 40px); }
.horario div{ display:flex; justify-content:space-between; gap:24px; padding:11px 0; border-bottom:1px solid var(--linea); }
.horario div:first-child{ border-top:1px solid var(--linea); }
.horario dt, .horario dd{ white-space:nowrap; }
.horario dd{ color:var(--arena-2); }
.visitanos__botones{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; margin-bottom:24px; }
.visitanos__tel{ font-size:1.15rem; font-weight:500; }
.visitanos__llegar{ max-width:30em; color:var(--arena-2); }
.visitanos__llegar a{ color:var(--arena); margin-left:6px; }

/* ---------- pie: su logo en el rombo */
.pie{ display:flex; flex-direction:column; align-items:center; gap:30px; padding:clamp(60px, 7vw, 100px) var(--gutter) 60px; border-top:1px solid var(--linea); }
.pie__logo{ width:min(260px, 60vw); }
.pie__redes{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 32px; font-size:.95rem; color:var(--arena-2); }
.pie__redes a:hover{ color:var(--oxido-claro); }

/* subir arriba (lo crea main.js) */
.to-top{ position:fixed; right:18px; bottom:18px; z-index:35; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--oxido); color:var(--arena); opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s, background .4s ease; }
.to-top:hover{ background:var(--arena); color:var(--tierra); }
.to-top.is-visible{ opacity:1; visibility:visible; transition:opacity .4s ease, visibility 0s, background .4s ease; }

/* ---------- tablet */
@media (max-width:1020px){
  :root{ --rombo:min(44vw, 40svh); }
  .somos, .menus, .visitanos{ grid-template-columns:1fr; }
  .menus__cabeza{ position:static; }
  .quesos__texto{ grid-column:1 / 13; }
  .quesos__adrian{ grid-column:6 / 13; margin-top:0; }
  .sala{ grid-template-columns:1fr; }
  .sala__mesa{ width:70%; }
}

/* ---------- móvil */
@media (max-width:760px){
  :root{ --nav-h:62px; --rombo:min(50vw, 30svh); }
  .nav__abrir{ display:grid; gap:8px; width:44px; height:44px; place-content:center; position:relative; z-index:2; }
  .nav__abrir span{ display:block; width:26px; height:1.5px; background:var(--arena); transition:transform .5s var(--ease); }
  .nav--abierta .nav__abrir span:first-child{ transform:translateY(4.75px) rotate(45deg); }
  .nav--abierta .nav__abrir span:last-child{ transform:translateY(-4.75px) rotate(-45deg); }
  .nav__enlaces{ position:fixed; inset:0; flex-direction:column; justify-content:center; gap:20px; background:var(--tierra); font-family:var(--serif); font-weight:300; font-size:2.2rem; opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s; }
  .nav--abierta .nav__enlaces{ opacity:1; visibility:visible; transition:opacity .4s ease, visibility 0s; }
  .nav.nav--abierta .nav__logo{ opacity:1; pointer-events:auto; position:relative; z-index:2; }
  .nav__enlaces .nav__reservar{ margin-top:14px; font-family:var(--sans); font-weight:600; font-size:1.05rem; padding:.85em 2.2em; }
  .nav__reservar--movil{ display:inline-flex; margin-left:auto; position:relative; z-index:2; padding:.55em 1.2em; }
  .nav__logo{ width:44px; }

  .portada__centro{ width:min(92vw, 420px); }
  .portada__pie{ grid-template-columns:1fr; text-align:center; gap:12px; font-size:.85rem; }
  .portada__pie p:last-child{ text-align:center; }
  .portada__pie .boton{ order:-1; }
  /* en móvil, el mar arriba y el campo abajo: se abrazan en vertical */
  .rombo{ top:62%; }
  html:not(.anima) .rombo--mar{ transform:translateY(-52%); }
  html:not(.anima) .rombo--campo{ transform:translateY(52%); }
  .rombo figcaption{ font-size:1.05rem; }
  .rombo--mar figcaption{ top:auto; bottom:calc(100% + 8px); }
  .quesos__adrian{ grid-column:4 / 13; }
  .sala__mesa{ width:84%; }
  .horario div{ font-size:.95rem; }
  .horario dt{ white-space:normal; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; }
}