/* ==========================================================================
   Jitrom · Estilos base y componentes comunes
   Rediseño "Cinematográfico" · Fase 1
   Cargar SIEMPRE antes del CSS de cada página:
     <link rel="stylesheet" href="css/base.css">
     <link rel="stylesheet" href="css/<pagina>.css">
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Color */
  --dark:#12312C;
  --paper:#F5F3EE;
  --paper-2:#EDE9E0;
  --white:#fff;
  --ink:#1c211f;
  --ink-soft:#3c433f;
  --muted:#565b58;
  --turq:#0AABBF;
  --turq-deep:#0a8391;
  --green:#1A7A5E;
  --green-deep:#155f49;
  --clean:#C0552F;

  /* Texto claro sobre fondo oscuro */
  --on-dark:#cfe0db;
  --on-dark-2:#dcebe6;
  --on-dark-3:#e4f0ec;
  --on-dark-accent:#9fe3ea;

  /* Acentos */
  --star:#F5A623;
  --wapp:#25D366;

  /* Fondos suaves */
  --soft-warn:#fbf1ec;
  --soft-ok:#eef6f2;
  --soft-ok-2:#e7f4ee;
  --soft-info:#eef7f8;

  /* Líneas */
  --line:rgba(28,33,31,.14);
  --line-soft:rgba(28,33,31,.09);
  --line-dark:rgba(255,255,255,.12);

  /* Tipografía */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;

  /* Forma */
  --r-card:20px;
  --r-btn:12px;
  --r-pill:999px;
  --r-img:16px;
  --shadow-card:0 30px 60px -30px rgba(18,49,44,.55);
  --shadow-card-hover:0 26px 44px -24px rgba(18,49,44,.55);
  --veil:linear-gradient(180deg,rgba(18,49,44,.6),rgba(18,49,44,.15) 40%,rgba(18,49,44,.94));

  /* Medidas */
  --maxw:1200px;
  --gutter:clamp(18px,4vw,48px);
  --section-y:clamp(56px,8vw,110px);
}

/* --------------------------------------------------------------------------
   2. Reset mínimo
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img{max-width:100%}

:focus-visible{outline:3px solid var(--turq);outline-offset:2px}

/* --------------------------------------------------------------------------
   3. Tipografía y contenedores
   -------------------------------------------------------------------------- */
.j-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%}
.j-section{padding:var(--section-y) var(--gutter)}
.j-section > .j-wrap{padding:0}

.j-eyebrow{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--turq-deep);
}
.j-on-dark .j-eyebrow,.j-eyebrow--light{color:var(--turq)}

.j-h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(40px,6vw,68px);
  line-height:1;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:pretty;
}
.j-h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(32px,4.4vw,52px);
  line-height:1.05;
  letter-spacing:-.012em;
  margin:0;
  text-wrap:pretty;
}
.j-h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(22px,2.4vw,28px);
  line-height:1.15;
  margin:0;
}
.j-lead{font-size:18px;line-height:1.55;color:var(--muted);margin:0}
.j-on-dark .j-lead{color:var(--on-dark-2)}

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */
.j-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:13px 24px;
  border:1px solid transparent;
  border-radius:var(--r-btn);
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .15s;
}
.j-btn--primary{background:var(--turq);color:#fff}
.j-btn--primary:hover{background:var(--turq-deep)}
.j-btn--green{background:var(--green);color:#fff}
.j-btn--green:hover{background:var(--green-deep)}
.j-btn--line{background:transparent;color:var(--dark);border-color:rgba(18,49,44,.25)}
.j-btn--line:hover{border-color:var(--dark)}
.j-on-dark .j-btn--line{color:#fff;border-color:rgba(255,255,255,.4)}
.j-on-dark .j-btn--line:hover{border-color:#fff}
.j-btn--pill{border-radius:var(--r-pill)}

/* Pulso del CTA principal */
@keyframes j-pulse{
  0%{box-shadow:0 0 0 0 rgba(10,171,191,.5)}
  70%{box-shadow:0 0 0 16px rgba(10,171,191,0)}
  100%{box-shadow:0 0 0 0 rgba(10,171,191,0)}
}
.j-btn--pulse{animation:j-pulse 2.2s infinite}

@media (prefers-reduced-motion:reduce){
  .j-btn--pulse{animation:none}
  *{scroll-behavior:auto}
}

/* --------------------------------------------------------------------------
   5. Cabecera común (Nav)
   Variantes: .jn--dark  transparente sobre la foto del hero (logo blanco)
              .jn--light barra sólida sobre fondo claro (logo a color)
              .jn--line  añade una línea inferior al tono claro
   -------------------------------------------------------------------------- */
.jn{position:relative;z-index:30}
.jn-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px var(--gutter);
}
.jn-brand{display:flex;align-items:center}
.jn-logo{display:block;height:clamp(30px,4vw,40px);width:auto}

.jn-links{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:600}
.jn-links > a{
  padding:4px 0;
  border-bottom:2px solid transparent;
  opacity:.92;
  transition:opacity .2s,border-color .2s,background .2s;
}
.jn-links > a:hover{opacity:1}
.jn-links > a[aria-current="page"]{border-bottom-color:var(--turq);opacity:1}

.jn-mireserva{border:1px solid;padding:10px 16px;border-radius:var(--r-pill);font-weight:700}
.jn-cta{background:var(--turq);color:#fff;border:0;padding:11px 20px;border-radius:var(--r-pill);font-weight:700}
.jn-cta:hover{background:var(--turq-deep);color:#fff}
.jn-tel{display:none}

.jn-tools{display:flex;align-items:center;gap:12px}

.jn-burger{
  display:none;
  width:46px;
  height:46px;
  align-items:center;
  justify-content:center;
  border:1px solid;
  border-radius:12px;
  background:transparent;
  font-family:inherit;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

/* Tono oscuro: transparente, para cabeceras y heros oscuros */
.jn--dark{color:#fff}
.jn--dark .jn-links > a{color:#fff}
.jn--dark .jn-mireserva{border-color:rgba(255,255,255,.4)}
.jn--dark .jn-burger{color:#fff;border-color:rgba(255,255,255,.4)}

/* Tono claro */
.jn--light{background:var(--paper);color:var(--dark)}
.jn--light .jn-links > a{color:var(--dark)}
.jn--light .jn-mireserva{border-color:rgba(18,49,44,.25)}
.jn--light .jn-burger{color:var(--dark);border-color:rgba(18,49,44,.25)}
.jn--line{border-bottom:1px solid var(--line)}

/* Superpuesta a la foto del hero (Inicio) */
.jn--over{position:absolute;top:0;left:0;right:0}

/* Menú hamburguesa por debajo de 860px */
@media (max-width:860px){
  .jn-burger{display:flex}
  .jn-links{
    display:none;
    position:absolute;
    top:84px;
    left:12px;
    right:12px;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:18px;
    background:var(--dark);
    border-radius:18px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  }
  .jn.is-open .jn-links{display:flex}

  .jn--dark .jn-links > a,
  .jn--light .jn-links > a{
    color:#fff;
    font-size:19px;
    font-weight:600;
    padding:14px 10px;
    border-bottom:1px solid rgba(255,255,255,.12);
    opacity:1;
  }
  .jn--dark .jn-links > a[aria-current="page"],
  .jn--light .jn-links > a[aria-current="page"]{
    color:var(--on-dark-accent);
    border-bottom-color:rgba(255,255,255,.12);
  }

  .jn-cta{order:1;margin-top:10px;padding:16px;border-radius:var(--r-btn);text-align:center;border-bottom:0}
  .jn--dark .jn-cta,.jn--light .jn-cta{color:#fff;border-bottom:0}

  .jn-mireserva{order:2;padding:14px;border-radius:var(--r-btn);text-align:center}
  .jn--dark .jn-mireserva,.jn--light .jn-mireserva{color:#fff;border:1px solid rgba(255,255,255,.3)}

  .jn-tel{order:3;display:block;padding:10px;text-align:center;font-size:16px;font-weight:600}
  .jn--dark .jn-tel,.jn--light .jn-tel{color:var(--on-dark);border-bottom:0}
}

/* --------------------------------------------------------------------------
   6. Pie común
   -------------------------------------------------------------------------- */
.jfoot{
  background:var(--dark);
  color:var(--on-dark);
  padding:clamp(48px,6vw,72px) var(--gutter) 28px;
}
.jfoot-in{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:36px;
}
.jfoot-col{display:flex;flex-direction:column;gap:10px;font-size:15px}
.jfoot-col a{color:var(--on-dark)}
.jfoot-col a:hover{color:#fff}
.jfoot-brand{gap:14px}
.jfoot-logo{height:38px;width:auto;align-self:flex-start}
.jfoot-brand p{margin:0;font-size:15px;line-height:1.55}
.jfoot-h{
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.jfoot-tel{color:#fff;font-weight:700}

.jfoot-bot{
  max-width:var(--maxw);
  margin:40px auto 0;
  padding-top:20px;
  border-top:1px solid var(--line-dark);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
  color:#a9c4bd;
}
.jfoot-legal{display:flex;flex-wrap:wrap;gap:18px}
.jfoot-legal a{color:#a9c4bd}
.jfoot-legal a:hover{color:#fff}

/* --------------------------------------------------------------------------
   7. Botón flotante de WhatsApp
   -------------------------------------------------------------------------- */
.jwa{
  position:fixed;
  right:20px;
  bottom:20px;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--wapp);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px -6px rgba(0,0,0,.4);
  z-index:60;
  transition:transform .2s;
}
.jwa:hover{transform:scale(1.08)}