/* ============================================================
   NOVO HAIR — FUEFULL.CSS
   Estilos específicos de la página Fue Full.
   ============================================================ */


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

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

.chile-hero__image {
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/fuefull/hero.jpg');
  background-size: cover;
  background-position: center;
}

.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;
}

.chile-hero__contenido .eyebrow {
  color: var(--color-gold-light);
}

.chile-hero__contenido .body-large {
  color: var(--color-off-white);
}


/* ============================================================
   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);
}

/* Refuerzo del color del título, por las dudas */
.recorrido__container .section-title {
  color: var(--color-brown);
}


/* ============================================================
   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__contenido .eyebrow {
  color: var(--color-gold-light);
}

.incluye__contenido .section-title {
  color: var(--color-off-white);
}

.incluye__contenido .body-large {
  color: var(--color-off-white);
}

.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);
}

.traslado__header .eyebrow {
  color: var(--color-gold-light);
}

/* Refuerzo del color del título, por las dudas */
.traslado__main .section-title {
  color: var(--color-brown);
}


/* ============================================================
   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);
}

.alojamiento__header .eyebrow {
  color: var(--color-gold-light);
}

/* Refuerzo del color del título, por las dudas */
.alojamiento__main .section-title {
  color: var(--color-brown);
}


/* ============================================================
   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);
}

.motivos__header .eyebrow {
  color: var(--color-gold-light);
}

/* Refuerzo del color del título, por las dudas */
.motivos__header .section-title {
  color: var(--color-brown);
}


/* ============================================================
   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);
}

.chile-cierre__container .eyebrow {
  color: var(--color-gold-light);
}

.chile-cierre__container .section-title {
  color: var(--color-off-white);
}

.chile-cierre__container .body-large {
  color: var(--color-off-white);
}


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

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

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

.recorrido__container p.eyebrow {
  color: var(--color-gold) !important;
}