/* ============================================================
   NOVO HAIR — TRATAMIENTO-ESTADIA.CSS
   Estilos específicos de la página Tratamiento + Estadía.
   ============================================================ */


/* ============================================================
   HERO
   ============================================================ */

.chile-hero {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.chile-hero__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* LQIP: mientras carga hero.webp se ve una versión mini (base64)
   desenfocada. Cuando la imagen real termina de cargar, el script
   inline del hero agrega .is-loaded y la capa nítida (::after)
   aparece con un fade-in. La descarga arranca desde el preload
   del <head>, no espera a ningún evento. */
.chile-hero__image::before,
.chile-hero__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: inherit;
  background-position: inherit;
}

.chile-hero__image::before {
  background-image: url('data:image/webp;base64,UklGRs4DAABXRUJQVlA4IMIDAAAwFQCdASpQAFAAPpE6l0klozchLhRsAuASCWIAnTNjxhfS+c1Zu+UCNS0r20lWKT0MHNkKtXtEj/9oCUfYEhp4Xa8q86S3ZbSmExKUMJo/h3NTHeFoerpy/BxepxctfP/M9H8d0VeCfOkCf9F4HRPJcltNdYNGaCUbtnKKacbs+8sVzcvLQiXcA4un22A02VhbQRAXjJST788CNeG5R6o3goNuqZE4v4QrirYgEISZIa+AAPqkl8kVNHKI7F/89M9AthtIX/0Yf+NI/hh+u7ONxhNrPVtidDsGRYdmPHQumHRWWNQfdh467+4H17R7+SbjDhqx29wzj1FeqoZK5CQlBWedxJ2B5LEOvzjxhRs75IP5GVypvha32C03nRQsvYjCwDUSCMNcZ5oC+a9YWJW6Tik0FyCQz73ACsKZtQ8g3XMkDCWn2Pvo+NujRsJ/PRtwkvpm1tMqJY8ht+5tL7zB9hfcbJuM0nkhsGEKfdiFHA1jWLi3W5BthAahNXZ07KbXocJt7HZtwRQnro4lHfeKn8CykRau60HuXWASlSXRDPTA1Lz3RYzVeflfAcJ4A/vtzxi2SMOoEUjhUbnQ9ghOPe9ci7s8CpCHLHU5Ryxq+NsWTRD0AiWe2eywBj1YI5RXMzwxlPxSwtjDnjuvDdmQfkgn1CftBa9ot7nJfUWEvXLqStbwBwcsfsR18OgijQf1yZ27Wpmc39v6of3OH3dh5HEswQp30SIYLP8UBw0T4oPRWPJoRYmekvkodQ3qM+N7lfHMMD7gKlnmDLeiH3KnmPY/v58O/AtBXcJ1dKxnxIzeOMSmpWyap1TuI1Knoy8xjxLjS+5zwOmpv0kV9oJ20iY5BpAbL8K31QGFSSjbim1AmtXYtBcsvH1ETRdGzs2CZid2K3PDMjx7Js/NIdZsBvJB+O7ryQUrlsdwZ485raXc9Xx4BREqshehj6oA9cyoDxungzV6G5GMjIJXNaIjsDplxVRcEegUcr/afucJZ4s1Dyr+yUSmHBPRBHLRueC6vzd6tq1RNm+kz5AV+o9ziyIP8zjD1/s9FnnR4Wjl0asoboabS75SfG3STDuQ0qSLp1OZMVLGCviugRKM7thJopIkeyD+88bkJGvPco7QzjB8Mrvus4mHVJKmzZ+CTE1RwQk5tLn+C0eInfWIWRU5Bk/QwW0ymJTr9KwzOOQUsxoIDHEUPFQwpNaEBlQKItN5+PTYo/mboafXW+PR0TzdMR2fSXHHAPAG3aQauNwbPrQxsI+LiTc1LuZQ7Y3xIAAAAA==');
  filter: blur(20px);
  transform: scale(1.1); /* evita el borde claro que deja el blur */
}

.chile-hero__image::after {
  background-image: url('/assets/img/fuefull/hero.webp');
  opacity: 0;
  transition: opacity 0.6s ease;
}

.chile-hero__image.is-loaded::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .chile-hero__image::after {
    transition: none;
  }
}

.chile-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 24, 20, 0.6);
}

.chile-hero__container {
  position: relative;
  z-index: 1;
  padding-block: var(--space-2xl) var(--space-lg);
}

.chile-hero__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

.chile-hero__titulo {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  color: var(--color-off-white);
}

.chile-hero__descripcion {
  max-width: 500px;
}


/* ============================================================
   HERO — DESKTOP
   ============================================================ */

@media (min-width: 1024px) {
  .chile-hero {
    min-height: 720px;
  }

  .chile-hero__contenido {
    max-width: 680px;
    margin-inline: auto;
  }
}


/* ============================================================
   RESUMEN
   ============================================================ */

.resumen {
  background-color: var(--color-off-white);
  padding-block: var(--space-lg);
}

.resumen__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  text-align: center;
}

.resumen__dato {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 26px;
  color: var(--color-brown);
}

.resumen__dato--numero {
  font-size: 32px;
}

.resumen__label {
  font-family: var(--font-body);
  font-size: var(--text-body-large-size);
  color: var(--color-brown);
}


/* ============================================================
   RESUMEN — DESKTOP
   ============================================================ */

@media (min-width: 1024px) {
  .resumen__container {
    flex-direction: row;
    justify-content: center;
  }

  .resumen__item {
    flex: 1;
  }
}


/* ============================================================
   RECORRIDO
   El eyebrow "TU EXPERIENCIA, PASO A PASO" queda en gold normal
   (color por defecto de .eyebrow, no hace falta ninguna regla
   extra). El título "Nos ocupamos de cada etapa" es marrón por
   defecto vía .section-title.
   ============================================================ */

.recorrido {
  padding-block: var(--space-xl);
}

.recorrido__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.recorrido__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.recorrido__columna {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.recorrido__step {
  background-color: #f5f5f5;
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Números 01-06: mismo estilo original (Cormorant itálica,
   marrón), apenas más grande que el tamaño inicial (28px) */
.recorrido__numero {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  color: var(--color-brown);
}

.recorrido__step-titulo {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-gray);
}

.recorrido__step-texto {
  font-family: var(--font-body);
  font-size: var(--text-body-large-size);
  color: var(--color-black);
}

.recorrido__imagen img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}


/* ============================================================
   RECORRIDO — DESKTOP
   ============================================================ */

@media (min-width: 1024px) {
  .recorrido {
    padding-block: var(--space-2xl);
  }

  .recorrido__grid {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .recorrido__columna {
    flex: 1;
    justify-content: center;
  }

  .recorrido__step {
    flex: 1;
  }

  .recorrido__imagen {
    flex-shrink: 0;
    width: 380px;
  }

  .recorrido__imagen img {
    height: 100%;
  }

  .recorrido__numero {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: 36px;
    color: var(--color-brown);
  }
}


/* ============================================================
   INCLUYE (fondo marrón)
   ============================================================ */

.incluye {
  background-color: var(--color-brown);
  padding-block: var(--space-xl);
}

.incluye__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.incluye__imagen img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: var(--radius-md);
  object-position: left center;
}

.incluye__contenido {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.incluye__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.incluye__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-gold-light);
}

.incluye__item--sin-borde {
  border-bottom: none;
  padding-bottom: 0;
}

.incluye__item-titulo {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-body-large-size);
}

.incluye__item-texto {
  font-family: var(--font-body);
  font-size: var(--text-body-large-size);
}

.incluye__item-titulo,
.incluye__item-texto {
  color: var(--color-off-white);
}

.incluye__contenido .btn-primary {
  border: 1px solid transparent;
}

.incluye__contenido .btn-primary:hover {
  border-color: var(--color-gold-light);
}


/* ============================================================
   INCLUYE — DESKTOP
   La imagen queda como primer elemento del flex row (pegada
   al borde izquierdo del contenedor) y se estira a todo el
   alto disponible (sin align-items: center en el padre).
   ============================================================ */

@media (min-width: 1024px) {
  .incluye {
    padding-block: var(--space-2xl);
  }

  .incluye__container {
    flex-direction: row;
    gap: var(--space-xl);
  }

  .incluye__imagen {
    flex-shrink: 0;
    width: 520px;
    align-self: stretch;
  }

  .incluye__imagen img {
    height: 100%;
  }
}


/* ============================================================
   TRASLADO
   ============================================================ */

.traslado {
  background-color: var(--color-off-white);
  padding-block: var(--space-xl);
}

.traslado__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.traslado__header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.traslado__icono {
  flex-shrink: 0;
  object-fit: contain;
}

.traslado__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* EXCEPCIÓN a la regla de color (pendiente de decidir si se
   unifica): fondo claro, pero el eyebrow va en gold-light (no
   gold). Se conserva el color que tenía antes de centralizar
   el design system. */
.traslado__header .eyebrow {
  color: var(--color-gold-light);
}


/* ============================================================
   TRASLADO — DESKTOP
   ============================================================ */

@media (min-width: 1024px) {
  .traslado {
    padding-block: var(--space-2xl);
  }

  .traslado__main {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-xl);
  }

  .traslado__titulo {
    max-width: 380px;
    flex-shrink: 0;
  }
}


/* ============================================================
   ALOJAMIENTO
   ============================================================ */

.alojamiento {
  padding-block: var(--space-xl);
}

.alojamiento__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.alojamiento__header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.alojamiento__icono {
  flex-shrink: 0;
  object-fit: contain;
}

.alojamiento__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.alojamiento__carousel {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-lg);
}

.alojamiento__carousel::-webkit-scrollbar {
  display: none;
}

.alojamiento__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.alojamiento__slide img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.alojamiento__aclaracion {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-body-large-size);
  color: var(--color-gray);
}

.alojamiento__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
}

/* EXCEPCIÓN a la regla de color (pendiente de decidir si se
   unifica): fondo claro, eyebrow en gold-light (no gold). */
.alojamiento__header .eyebrow {
  color: var(--color-gold-light);
}


/* ============================================================
   ALOJAMIENTO — DESKTOP
   Sin justify-content: flex-end — el ícono y el texto quedan
   a la izquierda (igual que en Traslados).
   ============================================================ */

@media (min-width: 1024px) {
  .alojamiento {
    padding-block: var(--space-2xl);
  }

  .alojamiento__main {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-xl);
  }

  .alojamiento__titulo {
    max-width: 380px;
    flex-shrink: 0;
  }

  .alojamiento__slide img {
    height: 452px;
  }
}


/* ============================================================
   MOTIVOS
   ============================================================ */

.motivos {
  background-color: var(--color-off-white);
  padding-block: var(--space-xl);
}

.motivos__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.motivos__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.motivos__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.motivos__card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.motivos__card-titulo {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-gold);
}

.motivos__card-texto {
  font-family: var(--font-body);
  font-size: var(--text-body-large-size);
  color: var(--color-black);
}

/* EXCEPCIÓN a la regla de color (pendiente de decidir si se
   unifica): fondo claro, eyebrow en gold-light (no gold). */
.motivos__header .eyebrow {
  color: var(--color-gold-light);
}


/* ============================================================
   MOTIVOS — DESKTOP
   ============================================================ */

@media (min-width: 1024px) {
  .motivos {
    padding-block: var(--space-2xl);
  }

  .motivos__cards {
    flex-direction: row;
  }

  .motivos__card {
    flex: 1;
    padding: var(--space-lg) var(--space-md);
  }

  .motivos__card-titulo {
    font-size: 24px;
  }
}


/* ============================================================
   CIERRE
   ============================================================ */

.chile-cierre {
  background-color: var(--color-brown);
  padding-block: var(--space-xl);
}

.chile-cierre__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.chile-cierre__container .btn-primary {
  border: 1px solid transparent;
}

.chile-cierre__container .btn-primary:hover {
  border-color: var(--color-gold-light);
}


/* ============================================================
   CIERRE — DESKTOP
   ============================================================ */

@media (min-width: 1024px) {
  .chile-cierre {
    padding-block: var(--space-2xl);
  }

  .chile-cierre__container {
    max-width: 650px;
    margin-inline: auto;
  }
}