/* ==========================================================================
   SAVOR & MINT — CASCO COMPARTIDO (shell)
   Todo lo que se repite en cada página del sitio: tokens, base, botones,
   header, switch de negativo, booking modal, footer y el fundido del cambio
   de modo. El markup de estas piezas vive en assets/site.js (<site-header>,
   <site-booking>, <site-footer>): los dos archivos van siempre juntos.

   ORDEN EN EL <head> — la página puede pisar lo que necesite:
     1. /assets/typography.css   (escala de headings + tiers de texto)
     2. /assets/site.css         (este archivo)
     3. <style> propio de la página
   ========================================================================== */

/* Los componentes no son cajas: display:contents deja que el <header>, el
   <footer> y el modal de adentro sean hijos directos del body a efectos de
   layout — el sticky del header y la columna flex de las páginas cortas
   funcionan como si el markup estuviera pegado a mano. */
site-header,site-footer,site-booking{display:contents;}

/* ============ DESIGN SYSTEM — ref: lemon.io ============
   Los tokens tipográficos (--display, --display-weight) salen de
   typography.css; acá va todo lo demás. */
:root{
  --ink:#060E15;
  --paper:#fff;
  --grey-1:#FAFAFA;
  --grey-2:#EBEBEB;
  --grey-3:#D6D6D6;
  --muted:rgba(6,14,21,.44);
  --hairline:rgba(6,14,21,.1);
  --fill:rgba(6,14,21,.05);
  --grad-start:#F8FF8C;
  --grad:linear-gradient(100deg,var(--grad-start),#FBFDBE 24%,#E2DEF9 65%,#DDD7FF);
  --ease:cubic-bezier(0.32,0.72,0,1);
  /* Absolutas: estas dos no se dan vuelta nunca. Son para lo que se apoya
     sobre un color de marca — ahí el texto tiene que seguir siendo tinta,
     esté el sitio en positivo o en negativo. */
  --ink-abs:#060E15;
  --paper-abs:#fff;
}

/* ============ NEGATIVO ============
   El switch del header da vuelta el sitio entero cambiando estos ocho
   valores y nada más: todo lo que se dibuja con tokens se invierte solo.
   Los grises no se invierten a ciegas: #FAFAFA daría #050505, más oscuro
   que el propio papel. Se levantan sobre la tinta la misma distancia que
   bajaban del blanco, así el orden de las capas se mantiene.
   Lo poco que no sale de un token está abajo, en "NEGATIVO — REMIENDOS". */
html[data-mode="neg"]{
  --ink:#fff;
  --paper:#060E15;
  --grey-1:#0B141B;
  --grey-2:#182129;
  --grey-3:#333D47;
  --muted:rgba(255,255,255,.5);
  --hairline:rgba(255,255,255,.14);
  --fill:rgba(255,255,255,.07);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* La letra del body la pone typography.css; acá solo el papel y la tinta. */
body{background:var(--paper);color:var(--ink);}
::selection{background:var(--grad-start);color:var(--ink-abs);}

.wrap{max-width:1280px;margin:0 auto;padding:0 48px;position:relative;width:100%;}

/* typography.css trae la estructura del eyebrow y deja el color a cargo de
   la página; en este sitio el color es siempre el mismo. */
.eyebrow{color:var(--muted);}

/* ============ BOTONES ============
   square, blocky buttons — lemon.io style */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--ink);color:var(--paper);
  border:none;border-radius:0;
  padding:18px 28px;
  font-family:inherit;
  font-size:15px;font-weight:500;letter-spacing:0;
  cursor:pointer;text-decoration:none;
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.btn:hover{background:#1b2530;}
.btn:active{transform:scale(.98);}
.btn .arr{display:inline-block;transition:transform .4s var(--ease);}
.btn:hover .arr{transform:translateX(4px);}
/* Relleno del color de fondo del momento, no transparente. Sobre las
   superficies del sitio da exactamente lo mismo — es el mismo color que
   tienen debajo —, pero cuando algo pasa por encima el botón mantiene su
   propia caja y el texto no queda flotando. */
.btn.ghost{
  background:var(--paper);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.btn.ghost:hover{background:var(--grey-1);}

/* ============ HEADER ============ */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.nav{
  display:flex;align-items:center;
  height:72px;
  max-width:1280px;margin:0 auto;padding-left:48px;
}
.logo{
  display:flex;align-items:center;
  text-decoration:none;color:var(--ink);
}
/* El wordmark es el SVG entero de assets/logos/. La altura manda y el ancho
   lo saca del viewBox, así nunca se deforma. */
.logo svg{display:block;height:19px;width:auto;}
.logo svg path{fill:currentColor;}
.nav ul{display:flex;gap:36px;list-style:none;margin-left:64px;}
.nav ul a{
  text-decoration:none;color:var(--muted);
  font-size:14px;font-weight:400;
  transition:color .3s var(--ease);
}
.nav ul a:hover{color:var(--ink);}
/* El empujón contra el borde derecho lo da el switch, que es el primero de
   los dos: si los dos llevaran margin-left:auto, flex les repartiría el aire
   sobrante por igual y quedarían separados en el medio. */
.nav .cta{
  display:flex;align-items:center;gap:14px;height:100%;
  background:var(--ink);color:var(--paper);
  padding:0 32px;
  font-size:14px;font-weight:500;text-decoration:none;
  transition:background .4s var(--ease);
}
.nav .cta:hover{background:#1b2530;}
.nav .cta .arr{transition:transform .4s var(--ease);}
.nav .cta:hover .arr{transform:translateX(4px);}

/* En desktop el contenedor del menú no existe a efectos de layout: los
   links, el switch y el CTA siguen siendo hijos flex del .nav. */
.nav .menu{display:contents;}
.burger{display:none;}

/* ============ MEGAMENÚ (Resources) ============
   El botón se viste igual que los links. La plancha es absolute contra el
   header (el li no es relative), así baja a todo el ancho de la barra.
   El estado vive en aria-expanded del botón; el JS está en site.js. */
.nav .mega-trigger{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:none;padding:0;cursor:pointer;
  font:inherit;font-size:14px;font-weight:400;color:var(--muted);
  transition:color .3s var(--ease);
}
.nav .mega-trigger:hover,
.nav .mega-trigger[aria-expanded="true"]{color:var(--ink);}
.nav .mega-trigger .chev{transition:transform .4s var(--ease);}
.nav .mega-trigger[aria-expanded="true"] .chev{transform:rotate(180deg);}
.nav .mega{
  position:absolute;top:100%;left:0;right:0;
  background:var(--paper);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s;
}
.nav .mega-trigger[aria-expanded="true"] + .mega{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.nav .mega-inner{
  display:flex;gap:96px;
  max-width:1280px;margin:0 auto;padding:40px 48px 48px;
}
.nav .mega-label{
  display:block;margin-bottom:18px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.nav .mega ul{display:flex;flex-direction:column;gap:10px;margin:0;}
.nav .mega ul a{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:var(--display-weight);
  font-size:28px;line-height:1.15;letter-spacing:-.02em;color:var(--ink);
}
.nav .mega ul a:hover{color:var(--muted);}
/* La misma flecha fina del hint del hero (↖), en la letra del body y en
   peso normal, espejada hacia la derecha: ↗. */
.nav .mega .ext{
  font-family:"Zalando Sans", system-ui, sans-serif;font-weight:400;
  font-size:20px;line-height:1;color:var(--muted);
  transition:transform .4s var(--ease);
}
.nav .mega ul a:hover .ext{transform:translate(2px,-2px);}
/* Íconos de app: el PNG ya trae su propio redondeo de squircle. */
.nav .mega .app-icon{
  display:block;flex:none;
  width:34px;height:34px;margin-right:5px;    margin-bottom: 6px;
}
/* Con la plancha abierta el resto del sitio se apaga bajo un velo de tinta
   al 80%. Queda debajo del header (z 50), así barra y plancha siguen arriba.
   Tinta absoluta: en negativo --ink es blanco y el velo tiene que ser oscuro
   igual. Solo en desktop: en mobile el panel de la hamburguesa ya tapa todo.
   Un click en el velo cae en el document y cierra el megamenú. */
@media (min-width:761px){
  body::after{
    content:"";position:fixed;inset:0;z-index:49;
    background:rgba(6,14,21,.8);
    opacity:0;visibility:hidden;
    transition:opacity .3s var(--ease),visibility 0s .3s;
  }
  html.mega-open body::after{
    opacity:1;visibility:visible;
    transition:opacity .3s var(--ease);
  }
  /* El header es traslúcido: con el velo abajo se agrisaría. Mientras la
     plancha está abierta, barra y plancha son un solo bloque de papel. */
  html.mega-open header{background:var(--paper);}
}
@media (prefers-reduced-motion: reduce){
  .nav .mega,.nav .mega-trigger .chev,body::after{transition:none;}
}

/* ============ SWITCH DE NEGATIVO ============
   Un cuadrado del mismo palo que el resto de los controles, con el círculo
   mitad y mitad de los ajustes de contraste. No tiene color propio: se
   dibuja con la tinta del momento, así que al invertir el sitio el ícono se
   invierte con él. La media vuelta es lo único que agrega el switch —
   confirma el gesto sin cambiar de forma. */
.invsw{
  margin-left:auto;margin-right:22px;
  width:38px;height:38px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:0;
  box-shadow:inset 0 0 0 1px var(--hairline);
  cursor:pointer;
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.invsw:hover{background:var(--fill);box-shadow:inset 0 0 0 1px var(--muted);}
.invsw:active{transform:scale(.94);}
.invsw .dial{
  width:17px;height:17px;border-radius:50%;
  /* Media luna: la mitad llena es tinta, la vacía deja ver el papel. El
     contorno cierra el círculo para que la mitad vacía se lea como parte
     del ícono y no como un semicírculo suelto. */
  background:linear-gradient(90deg,var(--ink) 0 50%,transparent 50%);
  box-shadow:inset 0 0 0 1.5px var(--ink);
  transition:transform .55s var(--ease);
}
[data-mode="neg"] .invsw .dial{transform:rotate(180deg);}
@media (prefers-reduced-motion: reduce){
  .invsw .dial{transition:none;}
}

/* ============ BOOKING MODAL ============
   Holds the Cal.com iframe. Hidden with [hidden] so a JS failure can never
   leave it stuck over the page; every trigger keeps a working href fallback. */
.modal[hidden]{display:none;}
.modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.modal .scrim{
  position:absolute;inset:0;z-index:0;background:rgba(6,14,21,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .25s var(--ease);
  border:none;cursor:pointer;
}
.modal.open .scrim{opacity:1;}
.modal .panel{
  position:relative;z-index:1;width:min(860px,100%);max-height:min(880px,92vh);
  background:var(--paper);display:flex;flex-direction:column;overflow:hidden;
  /* The panel wipes up out of its own mask; the CSS values are the no-GSAP
     fallback, GSAP takes over from here when it is available. */
  clip-path:inset(100% 0 0 0);transform:translateY(40px);
  transition:clip-path .45s var(--ease),transform .45s var(--ease);
}
.modal.open .panel{clip-path:inset(0 0 0 0);transform:none;}
.modal .panel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad);transform-origin:left;transform:scaleX(0);
  transition:transform .5s var(--ease) .08s;
}
.modal.open .panel::before{transform:scaleX(1);}
.modal .head{padding:40px 44px 28px;}
/* El .eyebrow global trae 28px abajo; acá el título va bien pegado. */
.modal .head .eyebrow{margin-bottom:10px;}
.modal .head h5{margin:0 0 8px;}
/* Una sola línea: el copy usa todo el ancho del panel, sin tope en ch. */
.modal .head p{color:var(--muted);font-size:15px;max-width:none;margin:0;}
.modal .x{
  position:absolute;top:22px;right:22px;z-index:2;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;box-shadow:inset 0 0 0 1px var(--hairline);
  font-size:20px;line-height:1;color:var(--ink);cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.modal .x:hover{background:var(--fill);transform:rotate(90deg);}
/* Cal.com centra su booker en el alto del iframe: todo píxel de más se reparte
   como aire arriba y abajo del calendario. A 860px de ancho el booker mide
   ~458px y su pie ~80px, así que 540px lo deja pegado al borde superior, sin
   ese margen gris. La caja scrollea si el panel queda más bajo que eso. */
.modal .cal{flex:0 1 auto;min-height:0;overflow:auto;border-top:1px solid var(--hairline);}
.modal .cal iframe{display:block;width:100%;height:540px;border:0;}
.modal .cal-fallback{
  min-height:520px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;
  padding:48px;background:var(--grey-1);color:var(--muted);font-size:15px;
}
.modal .cal-fallback b{color:var(--ink);font-size:16px;font-weight:500;}
.modal .cal-fallback a{color:var(--ink);}
body.modal-open{overflow:hidden;}
@media (prefers-reduced-motion: reduce){
  .modal .scrim,.modal .panel,.modal .panel::before{transition:none;}
}

/* ============ FOOTER ============ */
footer{padding:48px 0;border-top:1px solid var(--hairline);}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;}
/* El mismo SVG que el header, un punto más chico: el cierre y la apertura
   del sitio son la misma marca. Todo lo demás lo pone la regla .logo. */
.foot .logo svg{height:17px;}
.foot ul{display:flex;gap:28px;list-style:none;}
.foot a{color:var(--muted);font-size:13px;text-decoration:none;transition:color .3s var(--ease);}
.foot a:hover{color:var(--ink);}
.foot .fine{font-size:13px;color:var(--muted);}

/* ============ NEGATIVO — REMIENDOS DEL CASCO ============
   Lo que no sale de un token y por lo tanto no se da vuelta solo. Los
   remiendos de las secciones de cada página van en el <style> de la página. */

/* El header es traslúcido: el valor está escrito a mano porque --paper
   no tiene versión con alpha. */
[data-mode="neg"] header{background:rgba(6,14,21,.92);}
/* Los botones llenos ahora son blancos: el hover tiene que oscurecer un
   poco el blanco, no volverse tinta. */
[data-mode="neg"] .btn:hover,
[data-mode="neg"] .nav .cta:hover{background:#E4E8EB;}
/* El scrim sobre fondo oscuro necesita más peso para separarse del papel. */
[data-mode="neg"] .modal .scrim{background:rgba(0,0,0,.62);}

/* ============ EL CAMBIO ============
   Un fundido y nada más: donde hay View Transitions el navegador ya hace
   exactamente eso con la raíz, así que acá solo se le fija la duración y la
   curva del sitio. Sin mix-blend-mode: las dos capas se cruzan por opacidad
   y el cambio se lee como un revelado, no como un barrido.
   Donde no hay View Transitions, el respaldo es la transición de color de
   abajo, que se prende solo el rato que dura el cambio: dejarla puesta le
   metería inercia a cada hover del sitio. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.5s;
  animation-timing-function:var(--ease);
  mix-blend-mode:normal;
}
::view-transition-old(root){z-index:0;}
::view-transition-new(root){z-index:1;}
html.cambiando *,
html.cambiando *::before,
html.cambiando *::after{
  transition:background-color .5s var(--ease),color .5s var(--ease),
             border-color .5s var(--ease),box-shadow .5s var(--ease),
             fill .5s var(--ease) !important;
}

/* ============ RESPONSIVE DEL CASCO ============ */
@media(max-width:900px){
  .wrap{padding:0 20px;}
  .nav{padding-left:20px;}
  /* En tablet el menú entra apretando los aires; recién desaparece en el
     corte de abajo, donde de verdad no hay lugar. */
  .nav ul{gap:22px;margin-left:36px;}
  .nav .cta{padding:0 22px;}
  .modal{padding:0;}
  .modal .panel{width:100%;height:100%;max-height:100%;}
  .modal .head{padding:32px 20px 22px;}
  .modal .x{top:16px;right:16px;}
  /* En mobile el booker de Cal ya desborda el iframe: no hay aire que recortar,
     así que la caja se estira a lo que quede libre del panel. */
  .modal .cal{flex:1 1 auto;}
  .modal .cal iframe{height:100%;min-height:540px;}
  /* Apilado a una columna, el footer centrado se lee como un cierre. */
  .foot{justify-content:center;text-align:center;}
}
/* ============ MENÚ HAMBURGUESA ============
   Acá el menú ya no entra ni apretado: en la barra quedan logo y
   hamburguesa, y links, switch y CTA pasan a un panel que baja del header.
   El panel es absolute y no fixed: el backdrop-filter del header lo
   convertiría en la caja de referencia de un fixed igual. */
@media(max-width:760px){
  .nav{padding-right:20px;}
  .burger{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
    margin-left:auto;width:38px;height:38px;flex:none;
    background:transparent;border:none;border-radius:0;
    box-shadow:inset 0 0 0 1px var(--hairline);
    cursor:pointer;
  }
  .burger span{
    display:block;width:16px;height:1.5px;background:var(--ink);
    transition:transform .4s var(--ease);
  }
  /* Las dos líneas se cruzan en una X. */
  .nav.open .burger span:first-child{transform:translateY(3.75px) rotate(45deg);}
  .nav.open .burger span:last-child{transform:translateY(-3.75px) rotate(-45deg);}

  /* Grilla: links arriba a todo el ancho, aire en el medio y abajo switch
     y CTA en una fila, con el CTA llevándose el ancho. */
  .nav .menu{
    display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto 1fr 56px;
    column-gap:12px;
    position:absolute;top:100%;left:0;right:0;
    height:calc(100dvh - 72px);
    padding:32px 20px 28px;
    background:var(--paper);
    border-top:1px solid var(--hairline);
    overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s;
  }
  .nav.open .menu{
    opacity:1;visibility:visible;transform:none;
    transition:opacity .35s var(--ease),transform .35s var(--ease);
  }
  .nav .menu ul{grid-column:1/-1;display:flex;flex-direction:column;gap:0;margin:0;}
  .nav .menu ul a{
    display:block;padding:18px 0;
    border-bottom:1px solid var(--hairline);
    font-family:var(--display);font-weight:var(--display-weight);
    font-size:32px;line-height:1.1;letter-spacing:-.02em;color:var(--ink);
  }
  /* Resources en mobile: el botón se viste como los links grandes y la
     plancha se abre en el lugar, como acordeón (0fr → 1fr). */
  .nav .menu .mega-trigger{
    display:flex;justify-content:space-between;align-items:center;width:100%;
    padding:18px 0;border-bottom:1px solid var(--hairline);
    font-family:var(--display);font-weight:var(--display-weight);
    font-size:32px;line-height:1.1;letter-spacing:-.02em;color:var(--ink);
  }
  .nav .menu .mega-trigger .chev{width:14px;height:9px;}
  .nav .menu .mega{
    position:static;display:grid;grid-template-rows:0fr;
    border:none;background:none;transform:none;
    transition:grid-template-rows .4s var(--ease),opacity .3s var(--ease),visibility 0s .4s;
  }
  .nav .menu .mega-trigger[aria-expanded="true"] + .mega{
    grid-template-rows:1fr;
    transition:grid-template-rows .4s var(--ease),opacity .3s var(--ease);
  }
  .nav .menu .mega-inner{
    min-height:0;overflow:hidden;
    flex-direction:column;gap:24px;padding:0;margin:0;width:100%;
  }
  .nav .menu .mega-col:first-child{padding-top:22px;}
  .nav .menu .mega-col:last-child{padding-bottom:24px;border-bottom:1px solid var(--hairline);}
  .nav .menu .mega-label{margin-bottom:10px;}
  .nav .menu .mega ul{gap:8px;}
  /* display otra vez: el display:block de los links grandes de arriba le
     gana al inline-flex del desktop y apila el ícono sobre el nombre. */
  .nav .menu .mega ul a{
    display:inline-flex;align-items:center;
    padding:0;border:none;
    font-size:22px;
  }
  .nav .menu .mega .app-icon{width:27px;height:27px;}
  .nav .menu .invsw{grid-row:3;margin:0;width:56px;height:56px;}
  .nav .menu .cta{grid-row:3;height:56px;justify-content:center;font-size:15px;}
  body.menu-open{overflow:hidden;}
}
@media (max-width:760px) and (prefers-reduced-motion: reduce){
  .nav .menu,.nav.open .menu,.burger span,.nav .menu .mega{transition:none;}
}
/* Angosto de verdad (SE, plegables): el logo un punto más chico. */
@media(max-width:380px){
  .logo svg{height:16px;}
}
