/* ============================================================================
   VALENTÍN AIR — HOJA DE ESTILO
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  --tinta:        #0A1826;
  --marino:       #123553;
  --marino-medio: #1B4A72;
  --marino-claro: #2E6795;
  --oro:          #B8863B;
  --oro-claro:    #DCB273;
  --crema:        #F7F2EA;
  --crema-hondo:  #EFE6D8;
  --papel:        #FFFFFF;
  --gris:         #61707E;
  --gris-claro:   #93A1AD;
  --linea:        rgba(10, 24, 38, .12);
  --linea-clara:  rgba(255, 255, 255, .18);

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --radio:    14px;
  --radio-sm: 9px;
  --sombra:      0 1px 2px rgba(10,24,38,.06), 0 8px 24px rgba(10,24,38,.07);
  --sombra-alta: 0 2px 6px rgba(10,24,38,.08), 0 24px 60px rgba(10,24,38,.16);
  --ancho: 1180px;
  --transicion: .22s cubic-bezier(.4, 0, .2, 1);
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}
img, svg{ max-width: 100%; display: block; }
h1, h2, h3, p, dl, dd, figure{ margin: 0; }
ul{ margin: 0; padding: 0; list-style: none; }
a{ color: inherit; text-decoration: none; }
button, input, textarea, select{ font: inherit; color: inherit; }
fieldset{ margin: 0; padding: 0; border: 0; min-width: 0; }
legend{ padding: 0; }

:focus-visible{
  outline: 2px solid var(--oro);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* --- 3. Utilidades ------------------------------------------------------- */
.contenedor{
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 20px;
}
.contenedor--estrecho{ max-width: 820px; }

.etiqueta{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 14px;
}
.etiqueta--clara{ color: var(--oro-claro); }

.titulo{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 1.35rem + 2.5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--tinta);
}
.titulo--claro{ color: var(--papel); }

.entradilla{
  margin-top: 18px;
  font-size: 1.06rem;
  color: var(--gris);
  max-width: 56ch;
}
.entradilla--clara{ color: rgba(255,255,255,.72); }

.seccion{ padding: clamp(64px, 9vw, 118px) 0; }
.seccion--crema{ background: var(--crema); }
.seccion--oscura{ background: var(--marino); color: var(--papel); }
.seccion--estrecha{ padding: clamp(56px, 7vw, 92px) 0; }
.seccion__cabeza{ margin-bottom: clamp(36px, 5vw, 60px); max-width: 44rem; }

/* Botones */
.boton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: var(--transicion);
  white-space: nowrap;
}
.boton--principal{
  background: var(--oro);
  border-color: var(--oro);
  color: #23180A;
}
.boton--principal:hover{ background: var(--oro-claro); border-color: var(--oro-claro); }
.boton--fantasma{
  background: transparent;
  border-color: rgba(255,255,255,.42);
  color: var(--papel);
}
.boton--fantasma:hover{ background: rgba(255,255,255,.1); border-color: var(--papel); }
.boton--grande{ padding: 15px 32px; font-size: 1rem; }
.boton--bloque{ width: 100%; }
.boton:disabled{ opacity: .55; cursor: not-allowed; }

/* --- 4. Barra superior --------------------------------------------------- */
.barra-superior{
  background: var(--tinta);
  color: rgba(255,255,255,.68);
  font-size: 12.5px;
}
.barra-superior__interior{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
}
.barra-superior__alianza{ letter-spacing: .04em; }
.barra-superior__derecha{ display: flex; align-items: center; gap: 14px; }
.barra-superior__derecha a:hover{ color: var(--papel); }
.barra-superior__sep{ width: 1px; height: 12px; background: rgba(255,255,255,.2); }
.barra-superior__idioma{ font-weight: 600; color: var(--papel); }
@media (max-width: 720px){
  .barra-superior__alianza{ display: none; }
  .barra-superior__interior{ justify-content: center; }
}

/* --- 5. Cabecera --------------------------------------------------------- */
.cabecera{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__interior{
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 86px;
}

.logo{ display: flex; align-items: center; gap: 11px; margin-right: auto; }
.logo__imagen{ height: 62px; width: auto; }
.logo__emblema{ height: 60px; width: auto; flex: none; }
@media (max-width: 900px){
  .logo__imagen{ height: 40px; }
}
.logo__marca{ width: 34px; height: 34px; flex: none; fill: var(--marino); }
.logo__texto{ display: flex; flex-direction: column; line-height: 1.1; }
.logo__nombre{
  font-family: var(--serif);
  font-size: 1.42rem;
  letter-spacing: -.01em;
}
.logo__lema{
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gris-claro);
  margin-top: 2px;
}

.navegacion{ display: flex; gap: 30px; font-size: .94rem; font-weight: 500; }
.navegacion a{ position: relative; padding: 6px 0; color: var(--tinta); }
.navegacion a::after{
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}
.navegacion a:hover::after{ transform: scaleX(1); }

.menu-boton{
  display: none;
  width: 42px; height: 42px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--linea);
  border-radius: 10px;
  cursor: pointer;
}
.menu-boton span{
  width: 17px; height: 1.6px;
  background: var(--tinta);
  border-radius: 2px;
  transition: var(--transicion);
}
.menu-boton[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menu-boton[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.6px) rotate(-45deg); }

/* OJO: el atributo [hidden] vale display:none, pero cualquier display que
   pongamos aquí lo pisa. Por eso el menú solo se muestra cuando NO está
   oculto, y nunca en escritorio. */
.menu-movil{
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 20px 22px;
  border-top: 1px solid var(--linea);
  background: var(--papel);
}
.menu-movil:not([hidden]){ display: flex; }
@media (min-width: 901px){
  .menu-movil, .menu-movil:not([hidden]){ display: none; }
}
.menu-movil a{ padding: 12px 2px; font-weight: 500; border-bottom: 1px solid var(--linea); }
.menu-movil .boton{ margin-top: 14px; border-bottom: 0; justify-content: center; }

@media (max-width: 900px){
  .navegacion, .cabecera__cta{ display: none; }
  .menu-boton{ display: flex; }
  .cabecera__interior{ min-height: 64px; }
}

/* --- 6. Portada (la cara de aerolínea) ----------------------------------- */
.portada{
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(460px, 46vw, 580px);
  background: var(--tinta);
  color: var(--papel);
  overflow: hidden;
}
.portada__fondo{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--tinta);
  background-image:
    linear-gradient(96deg,
      rgba(10,24,38,.94) 0%,
      rgba(10,24,38,.84) 28%,
      rgba(10,24,38,.52) 58%,
      rgba(10,24,38,.44) 100%),
    linear-gradient(180deg,
      rgba(10,24,38,.34) 0%,
      rgba(10,24,38,.06) 30%,
      rgba(10,24,38,.60) 100%),
    url('../img/hero.jpg');
  background-size: cover;
  background-position: center 40%;
}
.portada__interior{
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: clamp(60px, 8vw, 110px);
  padding-bottom: clamp(34px, 4vw, 52px);
}
.portada__titular{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.5rem + 3vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  max-width: 17ch;
  text-wrap: balance;
}
.portada__subtitulo{
  margin-top: 20px;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  color: rgba(255,255,255,.78);
  max-width: 48ch;
}

/* Buscador horizontal, como el de cualquier aerolínea */
.buscador-rapido{
  display: flex;
  align-items: center;
  max-width: 1000px;
  margin-top: clamp(30px, 4vw, 46px);
  padding: 9px 9px 9px 10px;
  background: var(--papel);
  color: var(--tinta);
  border-radius: 999px;
  box-shadow: var(--sombra-alta);
}
.buscador-rapido__campo{
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 20px;
  border-right: 1px solid var(--linea);
}
.buscador-rapido__campo:last-of-type{ border-right: 0; }
.buscador-rapido__etiqueta{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-claro);
}
.buscador-rapido__valor{
  font-size: .98rem;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
select.buscador-rapido__valor{
  appearance: none;
  width: 100%;
  padding: 0 18px 0 0;
  border: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361707E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 13px;
  cursor: pointer;
}
.buscador-rapido__boton{ flex: none; margin-left: 16px; padding: 15px 30px; }

@media (max-width: 900px){
  .buscador-rapido{
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radio);
    padding: 6px;
  }
  .buscador-rapido__campo{
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--linea);
  }
  .buscador-rapido__campo:last-of-type{ border-bottom: 0; }
  .buscador-rapido__boton{ width: 100%; margin: 8px 0 3px; }
}

/* --- 6. Hero ------------------------------------------------------------- */
.hero{
  position: relative;
  background: var(--tinta);
  color: var(--papel);
  overflow: hidden;
}
/* El fondo cubre TODA la sección. Si cuelga solo de la banda del titular,
   se ve un escalón de color en los márgenes donde esa banda termina. */
.hero > *:not(.hero__fondo){ position: relative; z-index: 1; }
.hero__banda{
  display: flex;
  align-items: flex-end;
}
.hero__fondo{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--tinta);
  background-image:
    radial-gradient(130% 100% at 82% -10%, rgba(46,103,149,.85) 0%, rgba(18,53,83,0) 58%),
    radial-gradient(90% 80% at 8% 110%, rgba(184,134,59,.20) 0%, rgba(10,24,38,0) 60%);
}
.hero__fondo::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 3px 3px;
}
.hero__texto{
  max-width: 640px;
  padding-top: clamp(52px, 6vw, 84px);
  padding-bottom: clamp(4px, 1vw, 12px);
}
@media (max-width: 900px){
  .hero__texto{ max-width: none; }
}
.hero__titular{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.hero__subtitulo{
  margin-top: 22px;
  font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem);
  color: rgba(255,255,255,.78);
  max-width: 52ch;
}

/* --- 7. Destinos --------------------------------------------------------- */
.rejilla-destinos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 26px;
}
@media (max-width: 760px){
  .rejilla-destinos{ grid-template-columns: 1fr; }
}

.destino{
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--marino);
  color: var(--papel);
  box-shadow: var(--sombra);
  transition: var(--transicion);
}
.destino:hover{ transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.destino__imagen{
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}
/* Velo suave arriba y fuerte solo abajo: las caras se ven y el precio, que
   va encima, sigue legible. */
.destino__imagen::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10,24,38,.34) 0%,
    rgba(10,24,38,.06) 34%,
    rgba(10,24,38,.30) 68%,
    rgba(10,24,38,.82) 100%);
}
.destino__codigo{
  position: absolute;
  top: 18px; left: 18px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10,24,38,.55);
  backdrop-filter: blur(6px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
}
.destino__cuerpo{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 26px 28px;
  background: var(--papel);
  color: var(--tinta);
}
.destino__pais{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
}
.destino__titulo{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.62rem;
  line-height: 1.16;
  margin-top: 8px;
}
.destino__texto{ margin-top: 12px; color: var(--gris); font-size: .97rem; }
.destino__puntos{ margin-top: 20px; display: grid; gap: 9px; }
.destino__puntos li{
  position: relative;
  padding-left: 22px;
  font-size: .93rem;
  color: var(--tinta);
}
.destino__puntos li::before{
  content: '';
  position: absolute;
  left: 3px; top: .58em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--oro);
}
.destino__pie{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
  font-size: 12.5px;
  color: var(--gris);
}
.destino__pie span{ display: flex; align-items: center; gap: 6px; }
.destino__enlace{
  margin-top: 20px;
  align-self: flex-start;
  font-weight: 600;
  font-size: .94rem;
  color: var(--marino-medio);
  border-bottom: 1.5px solid var(--oro);
  padding-bottom: 2px;
}
.destino__enlace:hover{ color: var(--oro); }

/* --- 8. Comandante ------------------------------------------------------- */
.comandante{
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 76px);
  align-items: center;
}
@media (max-width: 880px){
  .comandante{ grid-template-columns: 1fr; }
  .comandante__foto{ max-width: 330px; }
}

.ficha{
  background: var(--papel);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
  color: var(--tinta);
  transform: rotate(-1.6deg);
}
.ficha__cabecera{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  background: var(--marino);
  color: var(--papel);
}
.ficha__marca{ font-family: var(--serif); font-size: 1.1rem; }
.ficha__tipo{
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro-claro);
}
.ficha__retrato{
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--crema-hondo);
}
.ficha__retrato img{ width: 100%; height: 100%; object-fit: cover; }
.ficha__vacia{
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--crema) 0%, var(--crema-hondo) 100%);
}
.ficha__vacia svg{ width: 96px; height: 96px; fill: rgba(18,53,83,.16); }
.ficha__retrato.sin-foto img{ display: none; }
.ficha__retrato.sin-foto .ficha__vacia{ display: flex; }
.ficha__pie{ padding: 18px; border-top: 3px solid var(--oro); }
.ficha__nombre{ font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; }
.ficha__rango{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
  margin-top: 3px;
}
.ficha__licencia{
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--gris-claro);
  margin-top: 10px;
}

.datos-comandante{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px 32px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--linea-clara);
}
.datos-comandante dt{
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.datos-comandante dd{
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.25;
  margin-top: 6px;
  color: var(--papel);
}

/* --- 9. A bordo ---------------------------------------------------------- */
.rejilla-abordo{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.abordo{ background: var(--papel); padding: 32px 28px; }
.abordo__numero{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--oro);
  letter-spacing: .1em;
}
.abordo__titulo{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  margin-top: 14px;
}
.abordo__texto{ margin-top: 10px; font-size: .94rem; color: var(--gris); }

/* --- 10. Formulario de reserva ------------------------------------------- */
/* Nada de margen negativo: desde que la foto se mudó a la portada aquí no hay
   nada sobre lo que montarse, y se comía el titular de la sección. */
.hero__reserva{
  position: relative;
  z-index: 2;
  margin-top: clamp(26px, 3vw, 38px);
  margin-bottom: clamp(52px, 6vw, 76px);
  scroll-margin-top: 92px;
}

.buscador{
  background: var(--papel);
  color: var(--tinta);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}
.buscador__cabecera{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  padding: 18px clamp(20px, 3vw, 34px);
  background: var(--marino);
  color: var(--papel);
}
.buscador__titulo{ font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.buscador__nota{ font-size: .86rem; color: rgba(255,255,255,.72); }

.buscador__pie{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(20px, 3vw, 26px) clamp(20px, 3vw, 34px);
  background: var(--crema);
}
@media (max-width: 620px){
  .buscador__pie{ flex-direction: column; align-items: stretch; }
  .buscador__pie .boton{ width: 100%; }
}

.campo{
  padding: 0 clamp(20px, 3vw, 34px) clamp(26px, 3vw, 34px);
  border-bottom: 1px solid var(--linea);
}
.campo--ultimo{ border-bottom: 0; }
/* OJO: el navegador coloca el <legend> en el borde del fieldset, por encima
   de su relleno. Si el aire de arriba se lo pones al fieldset, el título se
   queda pegado al borde y el hueco aparece debajo. Va aquí. */
.campo__titulo{
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--serif);
  font-size: 1.4rem;
  padding-top: clamp(26px, 3vw, 34px);
  margin-bottom: 20px;
}
.campo__paso{
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--marino);
  color: var(--papel);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
}
.campo__error{
  margin-top: 14px;
  font-size: .88rem;
  font-weight: 500;
  color: #B3423C;
}

.opciones{ display: grid; gap: 14px; }
.opciones--destino{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.opciones--fecha{ grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

.opcion{ position: relative; display: block; cursor: pointer; }
.opcion input{
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.opcion__caja{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-sm);
  background: var(--papel);
  transition: var(--transicion);
}
.opcion:hover .opcion__caja{ border-color: var(--marino-claro); }
/* Hermano general (~) y no adyacente (+): entre el input y la caja está
   la bolita de selección, así que + no llegaría nunca. */
.opcion input:checked ~ .opcion__caja{
  border-color: var(--marino);
  background: #F4F8FC;
  box-shadow: inset 0 0 0 1px var(--marino);
}
.opcion input:focus-visible ~ .opcion__caja{ outline: 2px solid var(--oro); outline-offset: 2px; }

.opcion__marca{
  position: absolute;
  top: 16px; right: 16px;
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 1.5px solid var(--linea);
  background: var(--papel);
  transition: var(--transicion);
}
.opcion__marca::after{
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--marino);
  transform: scale(0);
  transition: var(--transicion);
}
.opcion input:checked ~ .opcion__marca{ border-color: var(--marino); }
.opcion input:checked ~ .opcion__marca::after{ transform: scale(1); }

.opcion__ruta{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--marino);
}
.opcion__ruta svg{ width: 16px; height: 16px; fill: var(--oro); flex: none; }
.opcion__nombre{
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.15;
  margin-top: 10px;
  padding-right: 26px;
}
.opcion__gancho{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oro);
}
.opcion__fechas{
  font-family: var(--mono);
  font-size: .92rem;
  color: var(--gris);
  margin-top: 8px;
}
.opcion__duracion{
  font-size: 12px;
  color: var(--gris-claro);
  margin-top: 3px;
}
/* Recortada a tres líneas para que las cuatro fechas queden a la misma altura */
.opcion__nota{
  margin-top: 10px;
  font-size: .87rem;
  color: var(--gris);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insignia{
  display: inline-block;
  margin-top: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--crema-hondo);
  color: #6E5426;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Entradas de texto */
.rejilla-campos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.entrada{ display: flex; flex-direction: column; }
.entrada--ancha{ margin-top: 20px; }
.entrada__etiqueta{ font-size: .88rem; font-weight: 600; margin-bottom: 7px; }
.entrada__etiqueta em{ font-style: normal; font-weight: 400; color: var(--gris-claro); }
.entrada input, .entrada textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-sm);
  background: var(--papel);
  transition: var(--transicion);
  font-size: 16px; /* evita el zoom en iOS */
}
.entrada textarea{ resize: vertical; min-height: 88px; }
.entrada input:hover, .entrada textarea:hover{ border-color: var(--gris-claro); }
.entrada input:focus, .entrada textarea:focus{
  outline: none;
  border-color: var(--marino);
  box-shadow: 0 0 0 3px rgba(18,53,83,.1);
}
.entrada input.error, .entrada textarea.error{ border-color: #B3423C; }
.entrada--bloqueada{ background: var(--crema) !important; color: var(--gris); cursor: default; }
.entrada__pista{ margin-top: 6px; font-size: 12px; color: var(--gris-claro); }

.casilla{
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 24px;
  font-size: .92rem;
  color: var(--gris);
  cursor: pointer;
}
.casilla input{
  width: 19px; height: 19px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--marino);
}

.reserva__pie{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(22px, 3vw, 30px) clamp(26px, 4vw, 40px);
  background: var(--crema);
}
.reserva__resumen{ font-size: .95rem; }
.reserva__resumen-vacio{ color: var(--gris-claro); }
.reserva__resumen strong{ font-weight: 600; }
.reserva__resumen span{ color: var(--gris); }
@media (max-width: 620px){
  .reserva__pie{ flex-direction: column; align-items: stretch; }
  .reserva__pie .boton{ width: 100%; }
}

/* --- 11. Opiniones ------------------------------------------------------- */
.rejilla-opiniones{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
}
.opinion{
  padding: 28px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
}
.opinion__estrellas{ display: flex; gap: 3px; margin-bottom: 16px; }
.opinion__estrellas svg{ width: 15px; height: 15px; fill: var(--oro); }
.opinion__texto{ font-size: 1rem; line-height: 1.62; }
.opinion__autor{ margin-top: 18px; font-size: .87rem; font-weight: 600; }
.opinion__origen{ font-size: .84rem; color: var(--gris-claro); }

/* --- 12. FAQ ------------------------------------------------------------- */
.faq{
  border-top: 1px solid var(--linea);
  background: var(--papel);
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--linea);
}
.faq details{ border-bottom: 1px solid var(--linea); }
.faq details:last-child{ border-bottom: 0; }
.faq summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  font-weight: 600;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
  transition: var(--transicion);
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary:hover{ background: var(--crema); }
.faq summary::after{
  content: '';
  width: 11px; height: 11px;
  flex: none;
  border-right: 1.8px solid var(--oro);
  border-bottom: 1.8px solid var(--oro);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transicion);
}
.faq details[open] summary::after{ transform: rotate(-135deg) translate(-2px, -2px); }
.faq__respuesta{ padding: 0 26px 24px; color: var(--gris); max-width: 62ch; }

/* --- 13. Pie ------------------------------------------------------------- */
.pie{ background: var(--tinta); color: rgba(255,255,255,.62); padding: 64px 0 34px; font-size: .92rem; }
.pie__superior{
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  justify-content: space-between;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--linea-clara);
}
.logo--pie .logo__marca{ fill: var(--oro-claro); }
.logo--pie .logo__nombre{ color: var(--papel); }
.logo--pie .logo__lema{ color: rgba(255,255,255,.45); }
.pie__enlaces{ display: flex; flex-wrap: wrap; gap: 40px 64px; }
.pie__enlaces div{ display: flex; flex-direction: column; gap: 10px; }
.pie__enlaces h3{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--papel);
  margin-bottom: 4px;
}
.pie__enlaces a:hover{ color: var(--oro-claro); }
.pie__inferior{ padding-top: 26px; display: grid; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,.4); }

/* --- 14. Modal ----------------------------------------------------------- */
.modal{
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  overflow: visible;
}
.modal::backdrop{ background: rgba(6, 16, 26, .74); backdrop-filter: blur(4px); }
.modal[open]{ animation: modal-entra .3s cubic-bezier(.2, .8, .3, 1); }
@keyframes modal-entra{
  from{ opacity: 0; transform: translateY(14px) scale(.985); }
  to  { opacity: 1; transform: none; }
}

.modal__caja{
  position: relative;
  padding: clamp(30px, 5vw, 44px);
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  text-align: center;
}
.modal__titulo{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.14;
}
.modal__paso{
  margin-top: 12px;
  min-height: 3em;
  color: var(--gris);
  font-size: .96rem;
}
.modal__nota{ margin-top: 12px; font-size: 12.5px; color: var(--gris-claro); }
.modal__lista{
  display: grid;
  gap: 7px;
  margin-top: 22px;
  text-align: left;
  font-size: .86rem;
  color: var(--gris-claro);
}
.modal__lista li{
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: .38;
  transition: opacity var(--transicion), color var(--transicion);
}
.modal__lista li.hecho{ opacity: 1; color: var(--gris); }
.modal__lista li::before{
  content: '';
  width: 15px; height: 15px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: var(--transicion);
}
.modal__lista li.hecho::before{
  border-color: var(--oro);
  background: var(--oro)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 9px no-repeat;
}
.modal__cerrar{
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: var(--transicion);
}
.modal__cerrar:hover{ background: var(--crema); }
.modal__cerrar svg{ width: 17px; height: 17px; stroke: var(--gris); stroke-width: 2; fill: none; stroke-linecap: round; }
.modal__cerrar-texto{
  margin-top: 16px;
  background: none;
  border: 0;
  font-size: .88rem;
  color: var(--gris-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.modal__cerrar-texto:hover{ color: var(--tinta); }

/* Cargador */
.cargador{
  position: relative;
  height: 76px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.cargador__avion{
  width: 46px; height: 46px;
  fill: var(--marino);
  animation: vuela 2.4s ease-in-out infinite;
}
@keyframes vuela{
  0%, 100%{ transform: translate(-3px, 2px) rotate(-3deg); }
  50%     { transform: translate(3px, -3px) rotate(3deg); }
}
.cargador__estela{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-108px, -2px);
  display: flex;
  gap: 7px;
}
.cargador__estela i{
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--oro);
  opacity: .3;
  animation: estela 1.4s ease-in-out infinite;
}
.cargador__estela i:nth-child(2){ animation-delay: .16s; width: 15px; }
.cargador__estela i:nth-child(3){ animation-delay: .32s; width: 9px; }
@keyframes estela{
  0%, 100%{ opacity: .16; transform: translateX(0); }
  50%     { opacity: .85; transform: translateX(7px); }
}

.barra-progreso{
  height: 4px;
  margin-top: 24px;
  border-radius: 999px;
  background: var(--crema-hondo);
  overflow: hidden;
}
.barra-progreso__relleno{
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--marino) 0%, var(--oro) 100%);
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

/* Confirmación */
.sello{
  width: 62px; height: 62px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #DCEEE1;
  animation: sello-entra .45s cubic-bezier(.2, 1.2, .3, 1) both;
}
.sello svg{ width: 28px; height: 28px; stroke: #24693A; stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@keyframes sello-entra{
  from{ transform: scale(.5); opacity: 0; }
  to  { transform: scale(1);  opacity: 1; }
}

.localizador{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 10px 18px;
  border: 1.5px dashed var(--linea);
  border-radius: var(--radio-sm);
  background: var(--crema);
}
.localizador__etiqueta{
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gris);
}
.localizador__codigo{
  font-family: var(--mono);
  font-size: 1.15rem;
  letter-spacing: .16em;
  color: var(--tinta);
}

.resumen-final{
  display: grid;
  gap: 1px;
  margin: 24px 0 26px;
  text-align: left;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  overflow: hidden;
}
.resumen-final__fila{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--papel);
  font-size: .92rem;
}
.resumen-final__fila dt{ color: var(--gris); }
.resumen-final__fila dd{ font-weight: 600; text-align: right; }