/* Reynas XPR — hoja de estilo compartida (tokens + componentes base)
   Ver Identidad Marca/REYNAS-XPR-design-system.md para las reglas completas.
   Usada hoy por la home (/). Las páginas de viaje la irán adoptando cuando se
   rediseñen — de momento conservan su propia hoja para no tocar un flujo de
   pago ya probado. */

:root{
  --xpr-ink:#160710;
  --xpr-plum:#2C0F1E;
  --xpr-plum-light:#4C1C34;
  --xpr-champagne:#D8C2A5;
  --xpr-champagne-light:#EFE0C4;

  --trm-fuchsia:#BC1B6C;
  --trm-rose:#DE3772;
  --trm-red:#E12C35;
  --trm-vermilion:#ED3404;
  --trm-orange:#EE6821;

  --paper:#FFFFFF;
  --paper-2:#F6F4F3;
  --line:#E3DAD8;
  --line-2:#EEE6E4;
  --text:#1B0A13;
  --text-soft:#6E5A61;
  --on-dark:#EFE6E8;
  --on-dark-soft:#A98F99;

  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:32px;
  --s-6:48px; --s-7:64px; --s-8:96px; --s-9:144px;

  --gutter:clamp(20px,5.2vw,80px);
  --maxw:1520px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important;animation:none !important}
  html{scroll-behavior:auto}
}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'opsz' 14,'wdth' 100,'wght' 400;
  font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
:focus-visible{outline:2px solid var(--trm-fuchsia);outline-offset:3px}

/* ---------- tipografía ---------- */
.display,h1.display,h2.display{
  font-variation-settings:'opsz' 96,'wdth' 75,'wght' 800;
  text-transform:uppercase;letter-spacing:-.004em;line-height:.855;margin:0;
}
h1.display{font-size:clamp(2.35rem,8.4vw,8.2rem)}
h2.display{font-size:clamp(2.1rem,5vw,4.4rem)}
h3{
  font-size:clamp(1.2rem,2.05vw,1.85rem);
  font-variation-settings:'opsz' 48,'wdth' 76,'wght' 800;
  text-transform:uppercase;line-height:.92;margin:0 0 var(--s-3);
}
p.lede{font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);line-height:1.55;max-width:52ch;color:var(--text-soft);margin:0}
p{max-width:44ch;margin:0}
.label{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.17em;
  font-variation-settings:'opsz' 12,'wdth' 100,'wght' 500;
  color:var(--text-soft);margin:0;
}
.figure{font-size:clamp(1.8rem,2.7vw,2.5rem);font-variation-settings:'opsz' 60,'wdth' 78,'wght' 800;line-height:.9}
.figure small{font-size:.42em;font-variation-settings:'wght' 500;font-variation-settings:'opsz' 14,'wdth' 100,'wght' 500;color:var(--text-soft);text-transform:none;margin-left:.2em}

/* ---------- estructura ---------- */
section{padding-block:clamp(72px,9vw,150px)}
.dark{background:var(--xpr-ink);color:var(--on-dark);position:relative;overflow:hidden}
.dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 80% at 84% 6%,rgba(76,28,52,.75),transparent 62%);
}
.dark h1,.dark h2,.dark h3{color:var(--on-dark)}
.dark p{color:var(--on-dark-soft)}
.dark .label{color:var(--on-dark-soft)}

/* ---------- header / nav ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(250,247,246,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.navbar{display:flex;align-items:center;gap:var(--s-5);height:80px}
.brand{
  display:flex;align-items:flex-start;gap:.36rem;
  font-variation-settings:'opsz' 40,'wdth' 100,'wght' 700;
  letter-spacing:-.018em;line-height:1;font-size:1.7rem;text-decoration:none;color:var(--text);
}
.brand sup{
  font-size:.44em;position:relative;top:.14em;text-transform:uppercase;
  letter-spacing:.05em;font-variation-settings:'opsz' 12,'wdth' 100,'wght' 700;
}
.navlinks{display:flex;gap:var(--s-5);margin-left:auto;font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.15em}
.navlinks a{color:var(--text-soft)}
.navlinks a:hover{color:var(--trm-fuchsia)}
.langsw{display:flex;border:1px solid var(--line);overflow:hidden;font-size:.66rem;font-weight:700;letter-spacing:.1em}
.langsw button{border:0;background:none;padding:.5rem .8rem;cursor:pointer;font:inherit;color:var(--text-soft)}
.langsw button[aria-pressed="true"]{background:var(--xpr-ink);color:var(--paper)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1rem 1.9rem;min-height:52px;border:1px solid transparent;
  font-family:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800;
  font-variation-settings:'opsz' 14,'wdth' 82,'wght' 800;
  transition:background .2s,color .2s,border-color .2s;cursor:pointer;
}
.btn-solid{background:var(--xpr-ink);color:var(--paper)}
.btn-solid:hover{background:var(--trm-fuchsia)}
.btn-line{border-width:2px;border-color:var(--text);color:var(--text);background:none}
.btn-line:hover{background:var(--text);color:var(--paper)}
.btn-gold{background:var(--xpr-champagne);color:var(--xpr-ink)}
.btn-gold:hover{background:var(--xpr-champagne-light)}
.btn-white{background:var(--paper);color:var(--xpr-plum-light)}
.btn-white:hover{background:var(--xpr-champagne-light)}
.btn-grad{background:var(--trm-rose);color:#fff}
.btn-grad:hover{filter:brightness(1.08)}
.btn-sm{padding:.74rem 1.3rem;font-size:.76rem;min-height:44px}

/* ---------- campos de formulario ---------- */
.field label{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-soft);margin-bottom:.55rem}
.field input{
  width:100%;padding:.55rem 0;border:0;border-bottom:1px solid var(--line);
  background:transparent;border-radius:0;font:inherit;font-size:1rem;
}
.field input:focus{outline:none;border-bottom-color:var(--trm-fuchsia)}
.field.err input{border-bottom-color:var(--trm-vermilion)}
.field .msg{font-size:.75rem;color:var(--trm-vermilion);margin-top:.4rem}
.dark .field input{border-bottom-color:rgba(239,230,232,.3);color:var(--on-dark)}
.dark .field input:focus{border-bottom-color:var(--xpr-champagne)}
.dark .field label{color:var(--on-dark-soft)}

/* ---------- tarjeta de viaje ---------- */
.trip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.trip-card{border:1px solid var(--line);display:flex;flex-direction:column}
.trip-card .ph{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--paper-2)}
.trip-card .ph img{width:100%;height:100%;object-fit:cover}
.trip-card .status{
  position:absolute;top:var(--s-3);left:var(--s-3);background:var(--paper);
  padding:.4rem .8rem;font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;
}
.trip-card .status.open{color:var(--trm-fuchsia)}
.trip-card .status.soon{color:var(--text-soft)}
.trip-card .body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);flex:1}
.trip-card .meta{font-size:.78rem;color:var(--text-soft);text-transform:uppercase;letter-spacing:.08em}
.trip-card .from{margin-top:auto;padding-top:var(--s-3);border-top:1px solid var(--line-2);display:flex;align-items:baseline;justify-content:space-between}

/* ---------- footer ---------- */
footer.site{padding-block:var(--s-7) var(--s-6);border-top:1px solid var(--line);font-size:.85rem;color:var(--text-soft)}
.fgrid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-6)}
.fgrid nav{display:grid;gap:var(--s-2)}
.fgrid a{color:var(--text-soft)}
.fgrid a:hover{color:var(--trm-fuchsia)}
.fbot{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line-2);display:flex;justify-content:space-between;gap:var(--s-4);font-size:.75rem;flex-wrap:wrap}

/* ---------- bilingüe ---------- */
html:not([lang="en"]) [data-en]{display:none}
html[lang="en"] [data-es]{display:none}
html[lang="en"] [data-en]{display:inline}
html[lang="en"] p[data-en],html[lang="en"] h1[data-en],html[lang="en"] h2[data-en],
html[lang="en"] h3[data-en],html[lang="en"] li[data-en],html[lang="en"] div[data-en]{display:block}
html[lang="en"] li[data-en]{display:flex}

@media(max-width:980px){
  .trip-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .navlinks{display:none}
  .trip-grid{grid-template-columns:1fr}
  section{padding-block:64px}
}
/* Logo (rótulo Reynas XPR): no se deforma ni empuja el selector de idioma */
.langsw{flex:none}
@media(max-width:760px){img[src*="logo-reynas-wordmark"]{height:30px!important}.navbar{gap:20px}}
@media(max-width:360px){.navbar{gap:10px}.navbar .btn-sm{padding-inline:.65rem}img[src*="logo-reynas-wordmark"]{height:26px!important}}