/* BASE da igxv — o que a home a medida e a PELE (as páginas comuns da loja vestidas com a cara da plantilla) dividem
   (22/10, dono: «la parte de los paseos tiene que tener la misma estética que todo lo que trabajamos acá»).
   Aqui: as fontes hospedadas, TODOS os tokens --am-* e a escala --u, o pular-para-o-conteúdo, o foco, a NAV (pílula),
   os BOTÕES e o PÉ. A home soma home.css; as páginas comuns somam pele.css. Uma verdade só: mexer na nav ou no pé
   aqui muda os dois lados juntos.

   A ORDEM das regras é a do home.css original (de onde saíram): .am-nav-cta vem antes de .am-btn de propósito — com
   a mesma especificidade, o .am-btn ganha no tamanho do botão da nav, como sempre ganhou. Não reordenar.

   ESCALA: o Figma tem 1280 px de largura. Toda medida do desenho é escrita como N × --u, onde --u vale 1px em 1280,
   encolhe até .75 nas telas menores e cresce até 1.25 (≈1600 px). Nada de fora: nem CDN nem folha importada (CSP da loja). */
/* Títulos: Lilita One (OFL, a mesma letra do logo — conferido no editor do Figma: a prévia a mostrava em Arial porque não
   carregava a fonte). Corpo: Plus Jakarta Sans. As duas hospedadas aqui, sem CDN (CSP da loja). */
@font-face{font-family:"Lilita One";src:url("/assets/fonts/lilita-one-latin-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("/assets/fonts/plus-jakarta-sans-latin-var.woff2") format("woff2");font-weight:200 800;font-display:swap}
:root{
  --am-tinta:#0d3a4e; --am-turq:#1497b8; --am-amarelo:#fcc451; --am-amarelo-forte:#f7b733;
  --am-creme:#f9e8cb; --am-verde:#e0eedb; --am-ceu:#dcf3f8; --am-azul:#6fcbe9; --am-azul-forte:#119fc6; --am-sello:#7fd0ec;
  --am-corpo:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --am-titulo:"Lilita One","Arial Rounded MT Bold",Arial,sans-serif;
  --u:clamp(.75px,.078125vw,1.25px);
  --am-fs:clamp(14px,calc(15 * var(--u)),17px);       /* texto corrido */
  --am-fs-lead:clamp(14.5px,calc(16 * var(--u)),18px); /* linhas de abertura das seções */
  --am-fs-h2:clamp(28px,calc(40 * var(--u)),50px);
  --am-raio:calc(20 * var(--u));
  --am-sombra:0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(13,58,78,.12);
  --am-mola:cubic-bezier(.22,.8,.24,1);
  --am-max:1180px;                                         /* a largura do contêiner único */
  --am-gut:max(24px,calc((100% - var(--am-max)) / 2));     /* a margem lateral que sobra: usada como padding-inline */
  --am-sec-y:clamp(56px,6vw,96px);                         /* o respiro vertical de toda seção */
  --am-sec-y-curto:calc(var(--am-sec-y) * .6);             /* ao lado de montanha/onda, que já respiram sozinhas */
  --am-tit-gap:clamp(28px,3.2vw,48px);                     /* do cabeçalho da seção (título/lead/botão) ao conteúdo */
  --am-borda-h:max(46px,calc(100 * var(--u)));             /* altura da montanha entre seções */
  interpolate-size:allow-keywords; /* deixa o <details> do FAQ abrir com altura animada (onde o navegador sabe) */
}
html{scroll-behavior:smooth;scroll-padding-top:calc(110 * var(--u))}
body{margin:0;background:#fff;color:var(--am-tinta);font-family:var(--am-corpo);font-size:var(--am-fs);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
.am img,.am-pe img,.am-nav img{display:block;max-width:100%}
.am-pular{position:absolute;left:8px;top:8px;z-index:60;width:auto;background:#fff;padding:8px 14px;border-radius:8px;transform:translateY(-300%)}
.am-pular:focus{transform:none}
.am-pe{padding-inline:var(--am-gut);box-sizing:border-box} /* o contêiner único (ver home.css) */
.am a:focus-visible,.am-nav a:focus-visible,.am-pe a:focus-visible,.am button:focus-visible,.am summary:focus-visible,.am [tabindex]:focus-visible{outline:3px solid var(--am-turq);outline-offset:3px;border-radius:10px}

/* ── Navegação: a pílula branca, presa no alto; ao rolar, encolhe um pouco e ganha sombra ── */
.am-nav{position:fixed;left:50%;top:calc(18 * var(--u));z-index:40;display:flex;align-items:center;gap:calc(18 * var(--u));
  /* 23/10: 820 (era 760) e piso de 640 px — a pílula ganhou o seletor de idioma (PT · ES) e, no tablet, o piso evita
     que os links pisem no botão (o 760 × .75 dava 570 px, menos do que a fila pede). */
  width:min(max(calc(820 * var(--u)),640px),calc(100% - 32px));min-height:max(58px,calc(68 * var(--u)));padding:0 calc(10 * var(--u)) 0 calc(14 * var(--u));box-sizing:border-box;
  /* 22/10 (dono): branca sólida — o resto da página não tem vidro, e a pílula translúcida destoava. O movimento ao rolar fica. */
  background:#fff;border-radius:999px;box-shadow:0 8px 28px rgba(13,58,78,.14);
  transform:translateX(-50%);transition:transform .45s var(--am-mola),box-shadow .45s,width .45s var(--am-mola)}
.am-nav.is-rolou{transform:translateX(-50%) translateY(calc(-6 * var(--u)));width:min(max(calc(770 * var(--u)),640px),calc(100% - 32px));min-height:max(54px,calc(58 * var(--u)));box-shadow:0 14px 40px rgba(13,58,78,.22)}
.am-nav > nav{display:flex;gap:calc(4 * var(--u));margin:0 auto}
.am-nav > nav a{position:relative;padding:8px calc(14 * var(--u));border-radius:999px;color:var(--am-tinta);font-weight:600;font-size:clamp(13px,calc(15 * var(--u)),17px);text-decoration:none;white-space:nowrap;transition:background .25s,color .25s}
.am-nav > nav a:hover{background:rgba(20,151,184,.1);color:var(--am-turq)}
.am-nav > nav a.is-ativo{background:var(--am-turq);color:#fff}
.am-nav-cta{min-height:max(38px,calc(40 * var(--u)));padding:0 calc(20 * var(--u));font-size:clamp(13px,calc(14 * var(--u)),15px);flex:none}
.am-logo{display:flex;align-items:center;gap:calc(8 * var(--u));flex:none;text-decoration:none;color:var(--am-tinta)}
.am-logo img{width:max(36px,calc(44 * var(--u)));height:auto} /* 23/10: o barquinho do logo oficial, fundo transparente */
.am-logo-txt{display:flex;flex-direction:column;font-family:var(--am-titulo);font-size:clamp(11px,calc(13 * var(--u)),14px);line-height:1;letter-spacing:.02em;text-transform:uppercase}
.am-logo-txt span:last-child{color:var(--am-turq)}
.am-burger{display:none;width:44px;height:44px;margin-left:auto;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.am-burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--am-tinta);transition:transform .3s var(--am-mola),opacity .2s}
.am-nav.is-aberto .am-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.am-nav.is-aberto .am-burger span:nth-child(2){opacity:0}
.am-nav.is-aberto .am-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Botões ── */
.am-btn{display:inline-flex;align-items:center;justify-content:center;min-height:max(40px,calc(40 * var(--u)));padding:0 calc(30 * var(--u));box-sizing:border-box;border-radius:999px;background:var(--am-amarelo);color:var(--am-tinta);
  font-weight:700;font-size:clamp(14px,calc(15.5 * var(--u)),17px);text-decoration:none;letter-spacing:.01em;
  box-shadow:0 2px 0 rgba(13,58,78,.08);transition:transform .3s var(--am-mola),box-shadow .3s,background .2s}
.am-btn:hover{background:var(--am-amarelo-forte);transform:translateY(-2px);box-shadow:0 10px 22px rgba(247,183,51,.38)}
.am-btn:active{transform:translateY(0);box-shadow:0 2px 0 rgba(13,58,78,.08)}
.am-btn.escuro{background:var(--am-tinta);color:#fff}
.am-btn.escuro:hover{background:#0a2c3b;box-shadow:0 10px 22px rgba(13,58,78,.3)}

/* ── Rodapé ── */
.am-pe{padding-block:var(--am-sec-y-curto);background:#fff;color:var(--am-tinta);border-top:1px solid rgba(13,58,78,.08)} /* 24/10 (dono): o pé branco em toda a loja */
.am-pe-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;width:100%;margin:0}
.am-pe-marca img{width:calc(120 * var(--u));min-width:96px;height:auto} /* 23/10: logo oficial redondo (era horizontal) */
.am-pe-marca p{margin:calc(10 * var(--u)) 0 calc(20 * var(--u));font-size:clamp(13px,calc(14 * var(--u)),15.5px)}
.am-pe-redes{display:flex;gap:14px}
.am-pe-redes a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:var(--am-tinta);transition:background .25s,transform .3s var(--am-mola)}
.am-pe-redes a:hover{background:rgba(13,58,78,.08);transform:translateY(-2px)}
.am-pe-cols{display:flex;gap:calc(70 * var(--u));padding-top:calc(14 * var(--u))}
.am-pe-cols div{display:flex;flex-direction:column;gap:10px;font-size:clamp(13.5px,calc(14.5 * var(--u)),16px)}
.am-pe-cols strong{font-size:clamp(15px,calc(17 * var(--u)),19px);margin-bottom:6px}
.am-pe a{color:inherit;text-decoration:none}
.am-pe-cols a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── Celular: o contêiner é 100% − 32px ── */
@media (max-width:760px){
  :root{--am-gut:16px}
  html{scroll-padding-top:84px}
  .am-nav{top:10px;min-height:56px;padding:0 8px 0 10px;gap:8px;flex-wrap:wrap}
  /* no celular a pílula segue com as larguras de antes: o seletor mora na gaveta, a fila fechada não mudou */
  .am-nav{width:min(calc(760 * var(--u)),calc(100% - 32px))}
  .am-nav.is-rolou{width:min(calc(680 * var(--u)),calc(100% - 32px))}
  .am-nav.is-rolou{transform:translateX(-50%) translateY(-4px);min-height:52px}
  .am-logo img{width:36px}
  .am-logo-txt{font-size:11px}
  .am-nav-cta{min-height:36px;padding:0 14px;font-size:13px;margin-left:auto}
  html.am-js .am-burger{display:flex;margin-left:0;order:3}
  html.am-js .am-nav > nav{display:none;order:4;flex-basis:100%;flex-direction:column;gap:2px;padding:6px 4px 10px}
  html.am-js .am-nav.is-aberto{border-radius:28px}
  html.am-js .am-nav.is-aberto > nav{display:flex}
  .am-nav > nav a{padding:10px 14px;font-size:15px}
  html:not(.am-js) .am-nav > nav{order:4;flex-basis:100%;justify-content:center;gap:2px;padding-bottom:8px}
  /* 23/10: a home bilíngue também leva o seletor de idioma — no celular ele desce para a gaveta, embaixo dos links
     (na pílula fechada não cabe ao lado do «Ver paseos»). */
  html.am-js .am-nav .am-nav-lang{display:none;order:5;flex-basis:100%;justify-content:center;padding:0 0 12px}
  html.am-js .am-nav.is-aberto .am-nav-lang{display:flex}
  html:not(.am-js) .am-nav .am-nav-lang{order:5;flex-basis:100%;display:flex;justify-content:center;padding-bottom:8px}
  .am-pe-in{grid-template-columns:1fr;gap:30px}
  .am-pe-cols{flex-wrap:wrap;gap:24px 40px;padding-top:0}
}
@media (max-width:380px){
  .am-nav{width:calc(100% - 20px);padding:0 6px 0 8px}
  .am-logo img{width:32px}
  .am-nav-cta{padding:0 12px;font-size:12.5px}
  .am-btn{padding:0 18px;font-size:13.5px}
}

/* ── Sem movimento ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;transition-delay:0s !important}
}

/* ── Nav em modo INTERNO (páginas comuns com a pele: _nav.php com $amInterna) ──
   Quatro links (Paseos · Nosotros · Contacto · Mi reserva), o idioma e «Escribinos» não cabem na pílula de 760 da
   home: a interna é mais larga e, abaixo de 1000 px (onde ainda não cabe), já vira a gaveta do hambúrguer. */
.am-nav.is-interna{width:min(max(calc(900 * var(--u)),880px),calc(100% - 32px))}
/* 23/10: rolada encolhe menos (era 850) — em pt («Minha reserva», «Fale conosco») a fila pede ~865 px a 1280. */
.am-nav.is-interna.is-rolou{width:min(max(calc(890 * var(--u)),880px),calc(100% - 32px))}
.am-nav-lang{flex:none}
.am-nav-lang .lj-lang,.am-pe-legal .lj-lang{display:flex;gap:2px;margin:0;padding:0;border:0;background:none}
.am-nav-lang .lj-lang a,.am-pe-legal .lj-lang a{display:inline-grid;place-items:center;min-width:34px;min-height:30px;padding:0 8px;box-sizing:border-box;border-radius:999px;background:transparent;color:var(--am-tinta);font-size:12px;font-weight:700;letter-spacing:.04em;text-decoration:none;transition:background .2s,color .2s}
.am-nav-lang .lj-lang a:hover,.am-pe-legal .lj-lang a:hover{background:rgba(20,151,184,.1);color:var(--am-turq);text-decoration:none}
.am-nav-lang .lj-lang a.on,.am-pe-legal .lj-lang a.on{background:var(--am-turq);color:#fff}
.am-nav-lang a:focus-visible{outline:3px solid var(--am-turq);outline-offset:2px}
.am-pular:focus,#am-conteudo:focus{outline:none}
@media (max-width:1000px){
  .am-nav.is-interna,.am-nav.is-interna.is-rolou{width:min(640px,calc(100% - 32px));flex-wrap:wrap}
  .am-nav.is-interna .am-nav-cta{margin-left:auto}
  html.am-js .am-nav.is-interna .am-burger{display:flex;margin-left:0;order:3}
  html.am-js .am-nav.is-interna > nav{display:none;order:4;flex-basis:100%;flex-direction:column;gap:2px;padding:6px 4px 6px}
  html.am-js .am-nav.is-interna .am-nav-lang{display:none;order:5;flex-basis:100%;justify-content:center;padding:0 0 12px}
  html.am-js .am-nav.is-interna.is-aberto{border-radius:28px}
  html.am-js .am-nav.is-interna.is-aberto > nav,html.am-js .am-nav.is-interna.is-aberto .am-nav-lang{display:flex}
  .am-nav.is-interna > nav a{padding:10px 14px;font-size:15px}
  html:not(.am-js) .am-nav.is-interna > nav{order:4;flex-basis:100%;justify-content:center;flex-wrap:wrap;gap:2px;padding-bottom:4px}
  html:not(.am-js) .am-nav.is-interna .am-nav-lang{order:5;flex-basis:100%;display:flex;justify-content:center;padding-bottom:8px}
}

/* ── Faixa legal do pé (22/10): a identidade da agência que o pé comum da loja mostra (P0-E) — © ano, Términos,
   Privacidad, razão social, CNPJ, CADASTUR, endereço —, o idioma e «Tecnología Borazul». Letra pequena, tinta a 70 %,
   uma fila que quebra no celular. ── */
.am-pe-legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:calc(28 * var(--u));padding-top:18px;border-top:1px solid rgba(13,58,78,.14);font-size:12.5px;line-height:1.4;color:rgba(13,58,78,.78)}
.am-pe-legal a{min-height:24px;display:inline-flex;align-items:center}
.am-pe-legal a:not(.lj-lang a):hover{text-decoration:underline;text-underline-offset:3px}
.am-pe-legal .lj-lang a{color:inherit}
.am-pe-bz{margin-left:auto;letter-spacing:.04em}
.am-pe-bz strong{font-weight:800}
@media (max-width:760px){
  .am-pe-legal{gap:6px 14px;font-size:12px}
  .am-pe-bz{margin-left:0;flex-basis:100%}
}
/* 24/10 (dono): ao abrir o hambúrguer a fila de cima encolhia ao alto do botão (44 px) e logo e botão subiam 6 px.
   A margem do botão devolve à fila o alto da pílula fechada: 56 px (ou 52 px já rolada). */
@media (max-width:760px){
  html.am-js .am-nav.is-aberto .am-burger{margin-block:6px}
  html.am-js .am-nav.is-rolou.is-aberto .am-burger{margin-block:4px}
}
@media (min-width:761px) and (max-width:1000px){
  html.am-js .am-nav.is-interna.is-aberto .am-burger{margin-block:7px}
  html.am-js .am-nav.is-interna.is-rolou.is-aberto .am-burger{margin-block:5px}
}