/* ==========================================================================
   KM0 Canary Experience — páginas editoriales
   Sistema autocontenido para la arquitectura multipágina.
   ========================================================================== */

:root{
  --subpage-ink:#101614;
  --subpage-pine:#0D403C;
  --subpage-ocean:#087C72;
  --subpage-canvas:#F4F6F5;
  --subpage-card:#FFFFFF;
  --subpage-sun:#F3C347;
  --subpage-muted:#5F6B67;
  --subpage-line:#DDE3E0;
  --subpage-display:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --subpage-body:'Figtree','Segoe UI',system-ui,sans-serif;
  --subpage-shell:76rem;
  --subpage-radius:1rem;
  --subpage-radius-small:.625rem;
  --subpage-shadow:0 1.4rem 4rem rgba(13,64,60,.1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  color:var(--subpage-ink);
  background:var(--subpage-canvas);
  font-family:var(--subpage-body);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
a{color:inherit}
h1,h2,h3,p,figure{margin-top:0}
h1,h2,h3{
  margin-bottom:.7em;
  font-family:var(--subpage-display);
  font-weight:650;
  line-height:1.1;
  letter-spacing:-.04em;
  text-wrap:balance;
}
em{font-style:normal}
p{text-wrap:pretty}
::selection{background:var(--subpage-sun);color:var(--subpage-ink)}
:focus-visible{outline:3px solid var(--subpage-sun);outline-offset:4px}

.subpage-shell{
  width:min(calc(100% - 2rem),var(--subpage-shell));
  margin-inline:auto;
}
.subpage-sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.subpage-skip{
  position:fixed;
  z-index:200;
  top:.75rem;
  left:.75rem;
  padding:.75rem 1rem;
  border-radius:.5rem;
  background:#fff;
  color:var(--subpage-pine);
  font-weight:600;
  text-decoration:none;
  transform:translateY(-170%);
  transition:transform .2s ease;
}
.subpage-skip:focus{transform:none}
.subpage-section{padding-block:clamp(4.75rem,9vw,8rem)}
.subpage-section--compact{padding-block:clamp(3.25rem,6vw,5rem)}
.subpage-section--white{background:var(--subpage-card)}
.subpage-section--pine{background:var(--subpage-pine);color:#fff}
.subpage-kicker{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:.85rem;
  color:var(--subpage-ocean);
  font-size:.73rem;
  font-weight:600;
  letter-spacing:.16em;
  line-height:1.3;
  text-transform:uppercase;
}
.subpage-kicker::before{
  content:"";
  width:1.7rem;
  height:1px;
  background:currentColor;
}
.subpage-section--pine .subpage-kicker{color:var(--subpage-sun)}
.subpage-lead{
  max-width:42rem;
  color:var(--subpage-muted);
  font-size:clamp(1.05rem,2vw,1.28rem);
  font-weight:400;
}
.subpage-section--pine .subpage-lead{color:rgba(255,255,255,.74)}

/* Header ----------------------------------------------------------------- */
.subpage-header{
  position:sticky;
  z-index:100;
  top:0;
  border-bottom:1px solid var(--subpage-line);
  background:rgba(244,246,245,.94);
  backdrop-filter:blur(18px);
}
.subpage-header__inner{
  min-height:5.2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.subpage-brand{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:.68rem;
  text-decoration:none;
}
.subpage-brand img{
  width:2.75rem;
  height:2.75rem;
  border-radius:50%;
}
.subpage-brand__name{display:flex;flex-direction:column;line-height:1}
.subpage-brand__name strong{font-size:1rem;font-weight:600;letter-spacing:.2em}
.subpage-brand__name span{
  margin-top:.26rem;
  font-size:.53rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.subpage-nav{display:flex;align-items:center;gap:clamp(1rem,2.6vw,2rem)}
.subpage-nav ul{display:flex;align-items:center;gap:clamp(.85rem,2.3vw,1.7rem);margin:0;padding:0;list-style:none}
.subpage-nav a{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.08em;
  text-decoration:none;
  text-transform:uppercase;
}
.subpage-nav ul a{padding-block:.7rem}
.subpage-nav ul a:hover,.subpage-nav ul a[aria-current="page"]{color:var(--subpage-ocean)}
.subpage-button{
  display:inline-flex;
  min-height:3.15rem;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  padding:.85rem 1.3rem;
  border:1px solid transparent;
  border-radius:.5rem;
  background:var(--subpage-pine);
  color:#fff;
  font-family:var(--subpage-body);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.25;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.subpage-button::after{content:"→";font-size:1.05rem;line-height:1}
.subpage-button:hover{transform:translateY(-2px);background:var(--subpage-ocean);box-shadow:0 .75rem 1.7rem rgba(18,58,55,.14)}
.subpage-button--light{background:#fff;color:var(--subpage-pine)}
.subpage-button--light:hover{background:var(--subpage-sun);color:var(--subpage-ink)}
.subpage-button--clay{background:var(--subpage-sun);color:var(--subpage-ink)}
.subpage-button--clay:hover{background:var(--subpage-sun);color:var(--subpage-ink);box-shadow:0 .75rem 1.7rem rgba(243,195,71,.22)}
.subpage-button--plain::after{content:none}

/* Hero ------------------------------------------------------------------- */
.subpage-breadcrumb{
  margin:0 0 .9rem;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  color:var(--subpage-muted);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.06em;
  list-style:none;
  text-transform:uppercase;
}
.subpage-breadcrumb li+li::before{content:"/";margin-right:.45rem;color:rgba(16,22,20,.38)}
.subpage-breadcrumb a{text-decoration:none}
.subpage-breadcrumb a:hover{color:var(--subpage-ocean)}
.subpage-hero{padding-block:clamp(1.1rem,2vw,1.9rem) clamp(2.5rem,5vw,4.25rem)}
.subpage-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(20rem,1.08fr);
  /* «start» y no «center»: centrado respecto a una imagen alta, el texto y el CTA
     bajaban tanto que había que hacer scroll para ver el botón */
  align-items:start;
  gap:clamp(2.5rem,7vw,6.5rem);
}
.subpage-hero__copy{padding-block:0;min-width:0}
.subpage-hero h1{
  max-width:10ch;
  margin-bottom:1rem;
  font-size:clamp(2.9rem,5.4vw,5rem);
  font-weight:700;
  /* «anywhere» y no «break-word»: solo el primero reduce el min-content, que es
     lo que usa el grid para calcular su ancho mínimo. Con break-word, un título
     con una palabra de trece letras («Fuerteventura») estiraba la columna y
     provocaba scroll horizontal en móvil. */
  overflow-wrap:anywhere;
}
/* Y en móviles estrechos el mínimo del clamp (3.6rem) era demasiado grande para
   esa misma palabra: se reduce el titular para que quepa sin partirse. */
@media (max-width:34rem){
  .subpage-hero h1{font-size:clamp(2.2rem,9.5vw,3.6rem)}
}
.subpage-hero h1 em{color:var(--subpage-ocean);font-weight:700}
.subpage-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;margin-top:1.4rem}
.subpage-text-link{
  display:inline-flex;
  gap:.4rem;
  align-items:center;
  padding:.6rem .2rem;
  border-bottom:1px solid currentColor;
  color:var(--subpage-pine);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.1em;
  line-height:1.2;
  text-decoration:none;
  text-transform:uppercase;
}
.subpage-text-link::after{content:"↗"}
.subpage-hero__media{
  position:relative;
  min-height:clamp(22rem,42vw,32rem);
  overflow:hidden;
  border-radius:1rem;
  background:var(--subpage-line);
  box-shadow:var(--subpage-shadow);
}
.subpage-hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 48%,rgba(8,31,29,.28));
  pointer-events:none;
}
.subpage-hero__media>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.subpage-hero__seal{
  position:absolute;
  z-index:2;
  right:1.3rem;
  bottom:1.3rem;
  width:5.2rem;
  height:5.2rem;
  padding:.45rem;
  border:1px solid rgba(255,255,255,.58);
  border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 .7rem 2rem rgba(0,0,0,.15);
  backdrop-filter:blur(8px);
}
.subpage-hero__seal img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.subpage-hero__note{
  position:absolute;
  z-index:2;
  left:1.3rem;
  bottom:1.3rem;
  max-width:15rem;
  margin:0;
  color:#fff;
  font-family:var(--subpage-display);
  font-size:1.15rem;
  line-height:1.05;
}

/* Layout y tarjetas ------------------------------------------------------ */
.subpage-heading{
  max-width:46rem;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.subpage-heading h2{font-size:clamp(2.7rem,5vw,5rem)}
.subpage-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.7vw,2rem)}
.subpage-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.7vw,2rem)}
.subpage-card{
  overflow:hidden;
  border:1px solid var(--subpage-line);
  border-radius:var(--subpage-radius);
  background:var(--subpage-card);
  box-shadow:0 .5rem 2rem rgba(13,64,60,.05);
}
.subpage-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--subpage-line)}
.subpage-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.subpage-card:hover .subpage-card__media img{transform:scale(1.025)}
.subpage-card__body{padding:clamp(1.3rem,3vw,2rem)}
.subpage-card__body h2,.subpage-card__body h3{margin-bottom:.55rem;font-size:clamp(2rem,3vw,2.7rem)}
.subpage-card__body p{color:var(--subpage-muted)}
.subpage-card__tag{
  display:inline-flex;
  margin-bottom:1rem;
  padding:.42rem .7rem;
  border-radius:.625rem;
  border:1px solid var(--subpage-line);
  background:var(--subpage-canvas);
  color:var(--subpage-ocean);
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.subpage-card__link{display:inline-flex;margin-top:.4rem;color:var(--subpage-pine);font-weight:600;text-decoration:none}
.subpage-card__link::after{content:"→";margin-left:.5rem}
.subpage-feature{
  padding:clamp(1.6rem,3.5vw,2.5rem);
  border:1px solid var(--subpage-line);
  border-radius:var(--subpage-radius);
  background:var(--subpage-card);
}
.subpage-feature__number{
  display:grid;
  width:2.55rem;
  height:2.55rem;
  margin-bottom:2.5rem;
  place-items:center;
  border:1px solid currentColor;
  border-radius:50%;
  color:var(--subpage-ocean);
  font-size:.72rem;
  font-weight:600;
}
.subpage-feature h3{font-size:clamp(1.8rem,3vw,2.5rem)}
.subpage-feature p{margin-bottom:0;color:var(--subpage-muted)}
.subpage-story{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(20rem,.95fr);
  align-items:center;
  gap:clamp(2.5rem,7vw,7rem);
}
.subpage-story__media{
  position:relative;
  min-height:clamp(30rem,54vw,43rem);
  overflow:hidden;
  border-radius:1rem;
}
.subpage-story__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.subpage-story__copy h2{font-size:clamp(3rem,5.5vw,5.4rem)}
.subpage-story__copy p{color:var(--subpage-muted)}
.subpage-section--pine .subpage-story__copy p{color:rgba(255,255,255,.74)}
.subpage-list{
  margin:1.7rem 0 0;
  padding:0;
  display:grid;
  gap:.75rem;
  list-style:none;
}
.subpage-list li{
  position:relative;
  padding-left:1.7rem;
  color:var(--subpage-muted);
}
.subpage-list li::before{
  content:"";
  position:absolute;
  top:.65em;
  left:0;
  width:.55rem;
  height:.55rem;
  border-radius:50%;
  background:var(--subpage-sun);
}
.subpage-callout{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) auto;
  align-items:center;
  gap:2rem;
  padding:clamp(2rem,5vw,4.5rem);
  border-radius:1rem;
  background:var(--subpage-pine);
  color:#fff;
  overflow:hidden;
  position:relative;
}
.subpage-callout::before{
  content:"";
  position:absolute;
  width:18rem;
  height:18rem;
  right:-7rem;
  top:-9rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
}
.subpage-callout h2{max-width:13ch;margin-bottom:.35rem;font-size:clamp(2.8rem,5vw,5rem)}
.subpage-callout p{max-width:43rem;margin-bottom:0;color:rgba(255,255,255,.72)}

/* FAQ -------------------------------------------------------------------- */
.subpage-faq{display:grid;grid-template-columns:minmax(15rem,.7fr) minmax(0,1.3fr);gap:clamp(2rem,7vw,6rem)}
.subpage-faq__intro h2{font-size:clamp(2.7rem,5vw,4.5rem)}
.subpage-faq__list details{border-top:1px solid var(--subpage-line)}
.subpage-faq__list details:last-child{border-bottom:1px solid var(--subpage-line)}
.subpage-faq__list summary{
  position:relative;
  padding:1.45rem 2.8rem 1.45rem 0;
  font-family:var(--subpage-display);
  font-size:clamp(1.35rem,2.3vw,1.8rem);
  font-weight:600;
  line-height:1.08;
  list-style:none;
  cursor:pointer;
}
.subpage-faq__list summary::-webkit-details-marker{display:none}
.subpage-faq__list summary::after{content:"+";position:absolute;right:.4rem;top:1.35rem;color:var(--subpage-ocean);font-family:var(--subpage-body)}
.subpage-faq__list details[open] summary::after{content:"−"}
.subpage-faq__list details p{max-width:46rem;padding:0 2rem 1.5rem 0;color:var(--subpage-muted)}

/* Formularios ------------------------------------------------------------ */
.subpage-form-wrap{
  display:grid;
  grid-template-columns:minmax(16rem,.72fr) minmax(0,1.28fr);
  gap:clamp(2rem,7vw,6rem);
  align-items:start;
}
.subpage-form-intro h1,.subpage-form-intro h2{font-size:clamp(3rem,5.5vw,5.5rem)}
.subpage-form-intro p{color:var(--subpage-muted)}
.subpage-direct{
  display:grid;
  min-width:0;
  gap:.7rem;
  margin-top:2rem;
}
.subpage-direct a{
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:1rem 1.2rem;
  border:1px solid var(--subpage-line);
  border-radius:var(--subpage-radius-small);
  background:var(--subpage-card);
  overflow-wrap:anywhere;
  text-decoration:none;
}
.subpage-direct a span{color:var(--subpage-muted);font-size:.67rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.subpage-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  padding:clamp(1.35rem,4vw,2.8rem);
  border:1px solid var(--subpage-line);
  border-radius:var(--subpage-radius);
  background:var(--subpage-card);
  box-shadow:var(--subpage-shadow);
}
.subpage-field{display:grid;gap:.45rem}
.subpage-field--full{grid-column:1/-1}
.subpage-field label,.subpage-field legend{
  color:var(--subpage-pine);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.subpage-field fieldset{margin:0;padding:0;border:0}
.subpage-field input,.subpage-field select,.subpage-field textarea{
  width:100%;
  min-height:3.4rem;
  padding:.82rem 1rem;
  border:1px solid var(--subpage-line);
  border-radius:.5rem;
  background:var(--subpage-canvas);
  color:var(--subpage-ink);
}
.subpage-field textarea{min-height:8.5rem;resize:vertical}
.subpage-field input:focus,.subpage-field select:focus,.subpage-field textarea:focus{
  border-color:var(--subpage-ocean);
  outline:2px solid rgba(8,124,114,.16);
}
.subpage-field small{color:var(--subpage-muted);font-size:.75rem}
.subpage-choices{display:flex;flex-wrap:wrap;gap:.55rem}
.subpage-choice{
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.7rem .9rem;
  border:1px solid var(--subpage-line);
  border-radius:.625rem;
  background:var(--subpage-canvas);
  font-size:.82rem;
}
.subpage-choice input{width:auto;min-height:auto;padding:0}
.subpage-check{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  color:var(--subpage-muted);
  font-size:.78rem;
}
.subpage-check input{width:auto;min-height:auto;margin-top:.25rem}
.subpage-check a{color:var(--subpage-pine)}
/* Información básica de protección de datos junto al formulario (RGPD art. 13),
   igual que en los formularios de la portada. */
.subpage-privacy{
  grid-column:1/-1;
  margin:.2rem 0 0;
  padding:.85rem 1rem;
  border-radius:.6rem;
  background:rgba(13,64,60,.05);
  color:var(--subpage-muted);
  font-size:.72rem;
  line-height:1.6;
  text-wrap:pretty;
}
.subpage-privacy strong{display:block;margin-bottom:.2rem;color:var(--subpage-pine)}
.subpage-form__action{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
  margin-top:.4rem;
}
.subpage-form button:disabled{cursor:wait;opacity:.68;transform:none}
.subpage-status{margin:0;color:var(--subpage-muted);font-size:.83rem}
.subpage-status.is-error{color:#a33b29}
.subpage-status.is-success{color:var(--subpage-ocean)}
.subpage-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Footer y WhatsApp ------------------------------------------------------ */
.subpage-footer{padding-block:4.5rem 1.6rem;background:var(--subpage-pine);color:#fff}
.subpage-footer__top{
  display:grid;
  grid-template-columns:1.1fr 1.9fr;
  gap:clamp(2rem,7vw,7rem);
  padding-bottom:3rem;
}
.subpage-footer__brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.subpage-footer__brand img{width:3.4rem;height:3.4rem;border-radius:50%}
.subpage-footer__brand strong{font-family:var(--subpage-display);font-size:2rem;font-weight:700;letter-spacing:-.035em}
.subpage-footer__intro{max-width:23rem;margin-top:1.4rem;color:rgba(255,255,255,.65)}
.subpage-footer__nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.subpage-footer__nav>*{min-width:0}
.subpage-footer h2{
  margin-bottom:1rem;
  color:var(--subpage-sun);
  font-family:var(--subpage-body);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.subpage-footer ul{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.subpage-footer a{text-decoration:none}
.subpage-footer nav a,.subpage-footer address{color:rgba(255,255,255,.7);font-size:.87rem}
.subpage-footer nav a:hover{color:#fff}
.subpage-footer address{font-style:normal}
.subpage-footer address a{overflow-wrap:anywhere}
.subpage-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.7rem;
  padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.5);
  font-size:.73rem;
}
/* Mención registral obligatoria: letra pequeña, al nivel de los datos fiscales. */
.subpage-footer__registro{
  max-width:62rem;
  margin:1rem 0 0;
  color:rgba(255,255,255,.44);
  font-size:.66rem;
  line-height:1.65;
  text-wrap:pretty;
}
.subpage-whatsapp{
  position:fixed;
  z-index:90;
  right:1rem;
  bottom:1rem;
  display:flex;
  min-height:3.1rem;
  align-items:center;
  gap:.55rem;
  padding:.68rem .95rem;
  border-radius:999px;
  background:#fff;
  color:var(--subpage-pine);
  box-shadow:0 .9rem 2.5rem rgba(9,43,39,.22);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.08em;
  text-decoration:none;
  text-transform:uppercase;
}
.subpage-whatsapp svg{width:1.35rem;height:1.35rem;fill:var(--subpage-ocean)}

@media (max-width:980px){
  .subpage-nav .subpage-button{display:none}
  .subpage-hero__grid,.subpage-story{grid-template-columns:1fr}
  .subpage-hero__copy{max-width:45rem}
  .subpage-hero__media{min-height:min(38rem,80vw)}
  .subpage-story__copy{max-width:47rem}
  .subpage-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:820px){
  .subpage-header__inner{min-height:4.6rem;display:grid;grid-template-columns:auto 1fr;padding-block:.65rem}
  .subpage-brand__name{display:none}
  .subpage-nav{min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .subpage-nav::-webkit-scrollbar{display:none}
  .subpage-nav ul{width:max-content;margin-left:auto}
  /* sin nowrap, «Reservar tu viaje a medida» se partía en tres líneas y estiraba
     la cabecera de 74 a 100 px; el nav ya tiene scroll horizontal para esto */
  .subpage-nav a{font-size:.67rem;white-space:nowrap}
  .subpage-hero h1{font-size:clamp(3.45rem,16vw,5.8rem)}
  .subpage-hero__grid{gap:2rem}
  .subpage-hero__media{min-height:125vw;max-height:38rem}
  .subpage-grid-2,.subpage-grid-3{grid-template-columns:1fr}
  .subpage-callout{grid-template-columns:1fr}
  .subpage-callout .subpage-button{justify-self:start}
  .subpage-faq,.subpage-form-wrap{grid-template-columns:1fr}
  .subpage-footer__top{grid-template-columns:1fr}
  .subpage-footer__nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:540px){
  .subpage-shell{width:min(calc(100% - 1.25rem),var(--subpage-shell))}
  .subpage-nav ul{gap:.78rem}
  .subpage-hero__actions{align-items:stretch;flex-direction:column}
  .subpage-hero__actions .subpage-button{width:100%}
  .subpage-hero__note{max-width:10rem}
  .subpage-form{grid-template-columns:1fr}
  .subpage-field--full{grid-column:auto}
  .subpage-form__action{grid-column:auto;align-items:stretch;flex-direction:column}
  .subpage-footer__nav{grid-template-columns:1fr}
  .subpage-whatsapp span{display:none}
  .subpage-whatsapp{width:3.25rem;height:3.25rem;justify-content:center;padding:0}
}

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

/* ---------- fichas de viaje (generadas por tools/build-viajes.py) ---------- */
.subpage-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0 0}
.subpage-chips span{
  padding:.42rem .95rem;border-radius:.6rem;font-size:.82rem;font-weight:600;
  background:rgba(13,64,60,.08);color:#0D403C;border:1px solid rgba(13,64,60,.16);
}
.subpage-petbox{
  display:flex;gap:1.1rem;align-items:flex-start;
  background:#0D403C;color:#F4F7F6;border-radius:1rem;padding:1.4rem 1.6rem;
}
.subpage-petbox>span{font-size:1.7rem;line-height:1}
.subpage-petbox h2{margin:0 0 .35rem;font-size:1.25rem;color:#fff}
.subpage-petbox p{margin:0;color:rgba(244,247,246,.85)}
.subpage-penalty{
  margin:.4rem 0 0;padding:.85rem 1rem;border-left:3px solid #E9B44C;
  background:rgba(233,180,76,.12);font-size:.85rem;color:#4A5568;border-radius:0 .5rem .5rem 0;
}
.subpage-penalty a{color:#0D403C}
.subpage-conditions{border:1px solid rgba(13,64,60,.15);border-radius:.8rem;padding:1rem 1.2rem;margin-top:1.2rem;background:#fff}
.subpage-conditions summary{cursor:pointer;font-weight:700;color:#0D403C}
.subpage-conditions p{margin:.8rem 0 0;font-size:.92rem;color:#4A5568}
.subpage-card__link{display:block;color:inherit;text-decoration:none;height:100%}
.subpage-card__link:hover h3{text-decoration:underline}
.subpage-card__cta{display:inline-block;margin-top:.6rem;font-style:normal;font-weight:700;color:#0D403C;font-size:.9rem}
.subpage-grid-3--viajes .subpage-card__media img{transition:transform .7s ease}
.subpage-grid-3--viajes .subpage-card__link:hover .subpage-card__media img{transform:scale(1.04)}
.subpage-petbox__aviso{margin-top:.8rem;border-top:1px solid rgba(244,247,246,.25);padding-top:.7rem}
.subpage-petbox__aviso summary{cursor:pointer;font-weight:700;color:#E9B44C;font-size:.92rem}
.subpage-petbox__aviso p{margin:.6rem 0 0;font-size:.88rem}

/* Galería de la experiencia ------------------------------------------------
   En móvil se recorre de lado con encaje (una foto y media a la vista, para
   que se entienda que hay más); desde 48rem es una parrilla. Las fotos vienen
   del campo «galeria» de data/viajes.json. */
.subpage-gal{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:78%;
  gap:.9rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  padding-bottom:.6rem;
}
.subpage-gal::-webkit-scrollbar{display:none}
.subpage-gal__pieza{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--subpage-radius);
  background:var(--subpage-line);
  box-shadow:var(--subpage-shadow);
  scroll-snap-align:start;
}
.subpage-gal__pieza img{
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .7s ease;
}
.subpage-gal__pieza:hover img{transform:scale(1.03)}
.subpage-gal__pieza figcaption{
  position:absolute;
  inset:auto 0 0;
  padding:1.6rem .9rem .8rem;
  background:linear-gradient(to top,rgba(9,30,28,.72),transparent);
  color:#fff;
  font-size:.78rem;
  line-height:1.35;
}
.subpage-gal__nota{
  margin:1rem 0 0;
  color:var(--subpage-muted);
  font-size:.78rem;
}
@media (min-width:48rem){
  .subpage-gal{
    grid-auto-flow:row;
    grid-auto-columns:auto;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.1rem;
    overflow:visible;
  }
  /* la primera foto manda: ocupa dos huecos */
  .subpage-gal__pieza:first-child{grid-column:span 2;grid-row:span 2}
  .subpage-gal__pieza:first-child img{aspect-ratio:auto;min-height:100%}
}
@media (min-width:160rem){
  .subpage-gal{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Objetivos táctiles en móvil (WCAG 2.5.8) --------------------------------
   Auditado con 20 páginas × 9 anchos: en móvil varios controles quedaban por
   debajo de la zona pulsable mínima (el peor caso, las casillas de los
   formularios, medía 21 px). Solo se amplía la zona activa: el texto y el
   diseño no se mueven. En escritorio no aplica, el puntero es preciso. */
@media (max-width:820px){
  .subpage-check{padding-block:.7rem}
  .subpage-check input{min-width:1.15rem;min-height:1.15rem}
  .subpage-card__link,.subpage-card__cta{min-height:2.75rem;display:inline-flex;align-items:center}
  .subpage-text-link{min-height:2.75rem;padding-block:.85rem}
  .subpage-choice{min-height:2.75rem;display:flex;align-items:center}
  .subpage-petbox__aviso summary{min-height:2.75rem;display:flex;align-items:center}
  .subpage-form button[type=submit]{min-height:3rem}
}

/* Pantallas grandes -------------------------------------------------------
   Mismo criterio que en styles.css: las subpáginas se quedaban en 1216 px y
   en una ultrawide dejaban 2224 px vacíos. Además, con tanto ancho las
   parrillas de tres columnas pasan a cuatro. */
@media (min-width:100rem){            /* 1600 px */
  :root{font-size:17px}
}
@media (min-width:120rem){            /* 1920 px */
  :root{font-size:18px;--subpage-shell:86rem}
}
@media (min-width:160rem){            /* 2560 px */
  :root{font-size:19px;--subpage-shell:106rem}
  .subpage-grid-3{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:200rem){            /* 3200 px — ultrawide */
  :root{font-size:20px;--subpage-shell:118rem}
}
@media (min-width:240rem){            /* 3840 px — 4K */
  :root{font-size:22px;--subpage-shell:128rem}
}

/* Mismo caso que en styles.css: titulares cuyos descendentes se cortaban dentro
   de tarjetas y recuadros con overflow:hidden. */
.subpage-card__body h2,.subpage-card__body h3,
.subpage-callout h2,.subpage-heading h2{padding-bottom:.06em}