/* ============================================================================
   Landing "airplane hotel" (templates/plane-hotel.php).
   Se carga SOLO en esa página, encima de style.css.

   Todo cuelga de .pl, el <main> de la landing. Es obligatorio: la maqueta
   original traía reglas de elemento pelado (body, section, h1..h4, img,
   .container, .btn, .carousel) que, sin acotar, le pisarían el navbar y el pie
   del sitio — .btn y .container son de Bootstrap, y .carousel también.

   Los tamaños vienen de la maqueta en rem, pero aquí van en px: la raíz del
   sitio mide 18px, no 16px, así que un 0.72rem heredado saldría un 12,5% más
   grande de lo diseñado. La conversión es rem x 16.

   Los colores son los tokens del sitio (--dc-*): la paleta de la maqueta ya
   coincidía exactamente con la del hotel. Las fuentes también se cambian a las
   del sitio (Playfair Display / Open Sans) — el objetivo es que la landing se
   lea como una página más de costaverde.com, no como una pieza pegada.
   ========================================================================= */

.pl {
  --pl-gold-soft: rgba(201, 169, 110, 0.35);
  --pl-card-border: rgba(201, 169, 110, 0.28);
  --pl-hairline: rgba(201, 169, 110, 0.12);

  background: var(--dc-bg1);
  color: var(--dc-cream);
  display: block;
}

.pl * { box-sizing: border-box; }
.pl img { max-width: 100%; display: block; }
.pl a { color: inherit; }
.pl h1, .pl h2, .pl h3, .pl h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
}

.pl-container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

.pl-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 11.5px;
  color: var(--dc-gold);
  font-family: var(--font-sans);
}

.pl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 2px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all .25s ease;
  cursor: pointer;
  border: 1px solid var(--dc-gold);
}
.pl-btn-gold { background: var(--dc-gold); color: var(--dc-bg1); }
.pl-btn-gold:hover { background: #e0c28a; border-color: #e0c28a; color: var(--dc-bg1); }
.pl-btn-outline { background: transparent; color: var(--dc-cream); }
.pl-btn-outline:hover { background: var(--pl-gold-soft); color: var(--dc-cream); }

/* ---------- HERO ---------- */
.pl-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 96px 0;
}
.pl-hero-bg { position: absolute; inset: 0; z-index: 0; }
.pl-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Sin foto, la maqueta original se sostenía sola con este degradado. Va
   siempre: también es la capa que hace legible el texto sobre la foto. */
.pl-hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 75% 20%, rgba(201, 169, 110, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(13, 31, 13, .82) 0%, rgba(16, 32, 16, .93) 100%);
}
.pl-hero-trail {
  position: absolute; top: 22%; left: -10%; width: 120%; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--pl-gold-soft), transparent);
}
.pl-hero-content { position: relative; z-index: 3; max-width: 920px; }
.pl-hero h1 { font-size: clamp(38px, 6vw, 74px); line-height: 1.08; margin-top: 18px; }
.pl-hero h1 em { color: var(--dc-gold); font-style: normal; }
.pl-hero .pl-lead {
  margin-top: 22px; font-size: 19px; color: var(--dc-cream-muted); max-width: 760px;
}
.pl-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 36px; }

/* ---------- SECCIONES ---------- */
.pl section { padding: 96px 0; }
.pl-section-head { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.pl-section-head h2 { font-size: clamp(30px, 3.6vw, 43px); margin-top: 14px; }
.pl-section-head p { color: var(--dc-cream-muted); margin-top: 16px; font-size: 16px; }
.pl-divider { width: 48px; height: 1px; background: var(--dc-gold); margin: 14px auto 0; }

/* El rótulo de la flota es una sección entera sin nada debajo, así que el
   margen que separa el encabezado de su contenido aquí sólo abre un hueco. */
.pl-fleet { padding-bottom: 0 !important; }
.pl-fleet .pl-section-head { margin-bottom: 0; }

/* ---------- INTRO ---------- */
.pl-intro {
  background: var(--dc-bg2);
  border-top: 1px solid var(--pl-hairline);
  border-bottom: 1px solid var(--pl-hairline);
}
.pl-intro .pl-container { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 860px) {
  .pl-intro .pl-container { grid-template-columns: 1.1fr 1fr; align-items: center; }
}
.pl-intro h2 { font-size: clamp(29px, 3.4vw, 40px); }
.pl-intro p { color: var(--dc-cream-muted); margin-top: 18px; }
.pl-intro-list {
  list-style: none; margin: 26px 0 0; padding: 0;
  font-family: var(--font-sans); font-size: 14.5px;
}
.pl-intro-list li {
  display: flex; gap: 12px; padding: 10px 0;
  border-top: 1px solid rgba(201, 169, 110, 0.14); color: var(--dc-cream-muted);
}
.pl-intro-list li:first-child { border-top: none; }
.pl-intro-list b { color: var(--dc-gold); font-weight: 400; min-width: 118px; }
.pl-intro-media { aspect-ratio: 4/5; }

/* ---------- BLOQUES DE AERONAVE ---------- */
.pl-aircraft { border-top: 1px solid var(--pl-hairline); }
.pl-aircraft:nth-of-type(even) { background: var(--dc-bg2); }
.pl-aircraft-wrap { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
@media (min-width: 860px) {
  .pl-aircraft-wrap { grid-template-columns: 1.05fr 1fr; }
  .pl-reverse .pl-aircraft-wrap { grid-template-columns: 1fr 1.05fr; }
  .pl-reverse .pl-aircraft-media { order: 2; }
  .pl-reverse .pl-aircraft-copy { order: 1; }
}
.pl-aircraft-media { aspect-ratio: 16/11; }
.pl-aircraft-copy h2 { font-size: clamp(30px, 3.4vw, 42px); margin-top: 12px; }
.pl-subhead {
  font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dc-gold); margin-top: 8px;
}
.pl-aircraft-copy .pl-desc { color: var(--dc-cream-muted); margin-top: 16px; font-size: 16px; }
.pl-facts {
  display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px;
  font-family: var(--font-sans); font-size: 12.5px; color: var(--dc-cream-dim);
}
.pl-room-footer { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 28px; }

.pl-video { margin-top: 52px; padding-top: 44px; border-top: 1px solid rgba(201, 169, 110, 0.16); }
.pl-video .pl-eyebrow { margin-bottom: 14px; display: block; }
.pl-video h3 { font-size: 21px; margin-bottom: 20px; }
.pl-frame {
  position: relative; width: 100%; padding-bottom: 56.25%; height: 0;
  border: 1px solid var(--pl-card-border); border-radius: 3px; overflow: hidden; background: #000;
}
.pl-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- CARRUSEL ----------
   Propio, no el de Bootstrap: las diapositivas van una al lado de otra en una
   pista que se desplaza, así el gesto táctil puede seguir el dedo. Las clases
   llevan prefijo para no chocar con .carousel de Bootstrap, que sí está
   cargado en la página. */
.pl-carousel {
  position: relative; overflow: hidden;
  border: 1px solid var(--pl-card-border); border-radius: 3px;
  background: linear-gradient(135deg, #16301a, #0a1c10);
}
.pl-track { display: flex; width: 100%; height: 100%; transition: transform .45s ease; }
.pl-slide { min-width: 100%; height: 100%; position: relative; }
.pl-slide img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.pl-carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(13, 31, 13, 0.72); border: 1px solid var(--dc-gold); color: var(--dc-cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 17.5px; line-height: 1;
  cursor: pointer; opacity: .85; transition: opacity .2s ease; padding: 0;
}
.pl-carousel-btn:hover { opacity: 1; background: rgba(13, 31, 13, 0.9); }
.pl-prev { left: 12px; }
.pl-next { right: 12px; }
@media (max-width: 640px) { .pl-carousel-btn { width: 44px; height: 44px; font-size: 20px; } }
.pl-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 78%;
}
.pl-dot {
  width: 6px; height: 6px; border-radius: 3px;
  background: rgba(245, 240, 232, 0.45); cursor: pointer;
  transition: all .2s ease; border: none; padding: 0;
}
.pl-dot.is-active { background: var(--dc-gold); width: 18px; }

.pl-tag {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  background: rgba(13, 31, 13, 0.82); border: 1px solid var(--dc-gold); color: var(--dc-gold);
  font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 6px 12px; border-radius: 20px;
}

/* Contador de la foto visible. Está para elegir: dice en voz alta "vas por la
   4 de 9", que es como se pide quitar una. El nombre del archivo va en el
   title de la <img>, a un pase de ratón. */
.pl-counter {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  background: rgba(13, 31, 13, 0.82); border: 1px solid rgba(201, 169, 110, 0.45);
  color: var(--dc-cream-dim);
  font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 0.08em;
  padding: 5px 10px; border-radius: 20px;
}

/* ---------- RESTAURANTE ---------- */
.pl-restaurant { background: var(--dc-bg2); border-top: 1px solid var(--pl-hairline); }
.pl-restaurant-wrap { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
@media (min-width: 860px) { .pl-restaurant-wrap { grid-template-columns: 1fr 1.05fr; } }
.pl-restaurant-media { aspect-ratio: 5/4; }
.pl-restaurant-copy .pl-eyebrow { margin-bottom: 14px; display: block; }
.pl-restaurant-copy h2 { font-size: clamp(30px, 3.4vw, 40px); }
.pl-restaurant-copy p { color: var(--dc-cream-muted); margin-top: 16px; }
.pl-dishes {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px;
  font-family: var(--font-sans); font-size: 13.5px; color: var(--dc-cream-muted);
}
.pl-dishes li { padding-left: 16px; position: relative; }
.pl-dishes li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 1px; background: var(--dc-gold);
}

/* ---------- BANDA "HAY MÁS HOTEL" ---------- */
.pl-more {
  padding: 56px 0; text-align: center; background: var(--dc-bg2);
  border-top: 1px solid rgba(201, 169, 110, 0.14);
  border-bottom: 1px solid rgba(201, 169, 110, 0.14);
}
.pl-more h3 { font-size: 24px; max-width: 640px; margin: 14px auto 0; }
.pl-more p { color: var(--dc-cream-muted); max-width: 560px; margin: 14px auto 0; font-size: 16px; }
.pl-more .pl-btn { margin-top: 26px; }

/* ---------- TOURS ---------- */
.pl-tours { text-align: center; }
.pl-tours .pl-section-head { margin-bottom: 40px; }
.pl-tours-tags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  max-width: 760px; margin: 0 auto 40px;
  font-family: var(--font-sans); font-size: 13px; color: var(--dc-cream-muted);
}
.pl-tours-tags span { border: 1px solid var(--pl-card-border); border-radius: 20px; padding: 8px 18px; }
.pl-tours .pl-ctas { justify-content: center; }

/* ---------- PRENSA ---------- */
.pl-press { text-align: center; }
.pl .pl-press { padding: 56px 0; }
.pl-press .pl-eyebrow { display: block; margin-bottom: 24px; }
.pl-press > .pl-container > p { color: var(--dc-cream-muted); max-width: 560px; margin: 0 auto 24px; font-size: 16px; }
.pl-press-logos {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 48px;
  font-family: var(--font-sans); color: var(--dc-cream-dim); font-size: 14.5px; letter-spacing: 0.06em;
}
.pl-press-logos a { color: inherit; text-decoration: none; transition: color .2s ease; }
.pl-press-logos a:hover { color: var(--dc-gold); }

/* ---------- FAQ ---------- */
.pl-faq { background: var(--dc-bg2); border-top: 1px solid var(--pl-hairline); }
.pl-faq-list { max-width: 800px; margin: 0 auto; }
.pl-faq-item { border-bottom: 1px solid rgba(201, 169, 110, 0.16); padding: 22px 0; }
.pl-faq-item:first-child { border-top: 1px solid rgba(201, 169, 110, 0.16); }
.pl-faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: 17.5px; color: var(--dc-cream); -webkit-tap-highlight-color: transparent;
}
.pl-faq-item summary::-webkit-details-marker { display: none; }
.pl-faq-item summary::after {
  content: "+"; flex-shrink: 0; color: var(--dc-gold); font-size: 22px;
  font-family: var(--font-sans); transition: transform .25s ease;
}
.pl-faq-item[open] summary::after { transform: rotate(45deg); }
.pl-faq-item p { color: var(--dc-cream-muted); margin-top: 14px; font-size: 16px; max-width: 680px; }

/* ---------- CTA FINAL ---------- */
.pl-final {
  background: linear-gradient(180deg, var(--dc-bg2), var(--dc-bg1));
  text-align: center; border-top: 1px solid rgba(201, 169, 110, 0.18);
}
.pl-final h2 { font-size: clamp(32px, 4vw, 48px); max-width: 720px; margin: 14px auto 0; }
.pl-final p { color: var(--dc-cream-muted); max-width: 560px; margin: 18px auto 0; }
.pl-final .pl-ctas { justify-content: center; margin-top: 34px; }

/* ---------- MAPA ---------- */
.pl-location { background: var(--dc-bg2); border-top: 1px solid var(--pl-hairline); }
.pl-location .pl-section-head { margin-bottom: 40px; }
.pl-map {
  width: 100%; height: 450px;
  border: 1px solid var(--pl-card-border); border-radius: 3px; overflow: hidden;
}
.pl-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) { .pl-map { height: 320px; } }

/* Los bloques de 96px se aprietan en móvil, donde no hay ancho que los
   justifique; la maqueta original no llegaba a plantearlo. */
@media (max-width: 640px) {
  .pl section { padding: 64px 0; }
  .pl-hero { padding: 64px 0; min-height: 70vh; }
  .pl-dishes { grid-template-columns: 1fr; }
}