/* ============================================================
   Fix-U · components.css
   Piezas reutilizables: botones, badges, tarjetas de servicio,
   grid de listados, búsqueda, sección anfitrión, formularios,
   modal de publicación y botón flotante de WhatsApp.
   ============================================================ */

/* =========================================================
   BOTONES
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

/* Primario: azul plano, sin sombra ni glow */
.btn--primary {
  background: var(--gradient-brand);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--gradient-brand-hover);
}

/* Secundario: contorno claro (sobre fondos oscuros / hero) */
.btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Contorno sobre fondo claro */
.btn--outline {
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
}

.btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* WhatsApp */
.btn--whatsapp {
  background: #25d366;
  color: var(--color-white);
}

.btn--whatsapp:hover {
  background: #1ebe5b;
  transform: translateY(-2px);
}

.btn img {
  width: 18px;
  height: 18px;
}

/* =========================================================
   BADGE (etiqueta pequeña tipo "pill")
   ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* =========================================================
   BÚSQUEDA RÁPIDA (estilo app de tours)
   ========================================================= */
.search-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-md);
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
}

.search-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}

.search-field label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
  font-weight: 600;
}

.search-field input,
.search-field select {
  border: none;
  outline: none;
  background: none;
  font-size: 0.95rem;
  color: var(--color-ink);
}

.search-card .btn {
  width: 100%;
}

/* =========================================================
   GRID DE SERVICIOS / LISTADOS
   ========================================================= */
.cards-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

/* Tarjeta con imagen de fondo y overlay (servicios destacados) */
.service-card {
  position: relative;
  min-height: 300px;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--space-md);
  color: var(--color-white);
  isolation: isolate;
}

.service-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--t-base);
}

.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay);
  z-index: -1;
}

.service-card:hover img {
  transform: scale(1.06);
}

.service-card h3 {
  font-size: 1.35rem;
}

.service-card p {
  font-size: 0.9rem;
  opacity: 0.85;
  margin-top: 4px;
}

.service-card .tag {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: var(--gradient-brand);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Tarjeta de listado (propiedad / yate / restaurante con precio) */
.listing-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base);
  display: flex;
  flex-direction: column;
}

.listing-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.listing-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
}

.listing-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-card__type {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-ink);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
}

.listing-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.listing-card__loc {
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}

.listing-card__price {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-weight: 700;
  color: var(--color-primary);
}

.listing-card__price span {
  font-weight: 400;
  color: var(--color-ink-soft);
  font-size: var(--fs-small);
}

/* =========================================================
   EXPANDER · acordeón de imágenes que se expanden
   Desktop: los paneles ocupan el 100% del ancho; al hacer
   hover, el panel activo crece (flex), la imagen hace zoom y
   aparece la descripción + botón "Ver más".
   Móvil: se apila en vertical y se expande con clic (.is-active),
   ya que no existe hover en pantallas táctiles.
   ========================================================= */
.expander {
  display: flex;
  gap: var(--space-xs);
  width: 100%;
  height: 460px;
}

.expander__panel {
  position: relative;
  flex: 1;
  min-width: 0;                /* permite encoger sin desbordar */
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  color: var(--color-white);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  transition: flex var(--t-base);
}

.expander__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--t-base);
}

.expander__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-card);
  z-index: -1;
}

.expander__tag {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  background: var(--gradient-brand);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.expander__content {
  padding: var(--space-md);
  width: 100%;
}

.expander__title {
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
}

/* Descripción y botón: ocultos hasta que el panel se expande */
.expander__desc,
.expander__btn {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-base), max-height var(--t-base), transform var(--t-base),
    margin var(--t-base);
}

.expander__btn {
  display: inline-flex;
  margin-top: 0;
}

/* ---- Desktop: expansión por HOVER ---- */
@media (min-width: 720px) {
  .expander__panel:hover {
    flex: 4;                   /* el panel activo ocupa más ancho */
  }
  .expander__panel:hover .expander__img {
    transform: scale(1.08);    /* zoom de la imagen */
  }
  .expander__panel:hover .expander__desc {
    opacity: 1;
    max-height: 120px;
    transform: none;
    margin-top: var(--space-xs);
  }
  .expander__panel:hover .expander__btn {
    opacity: 1;
    max-height: 60px;
    transform: none;
    margin-top: var(--space-sm);
  }
}

/* ---- Móvil: vertical y expansión por CLIC (.is-active) ---- */
@media (max-width: 719px) {
  .expander {
    flex-direction: column;
    height: auto;
  }
  .expander__panel {
    flex: none;
    height: 96px;              /* colapsado: solo el título */
    align-items: center;       /* colapsado: título centrado en altura */
    transition: height var(--t-base);
  }
  .expander__panel.is-active {
    height: 340px;             /* expandido al tocar */
    align-items: flex-end;     /* expandido: contenido abajo */
  }
  .expander__panel.is-active .expander__img {
    transform: scale(1.06);
  }
  .expander__panel.is-active .expander__desc {
    opacity: 1;
    max-height: 120px;
    transform: none;
    margin-top: var(--space-xs);
  }
  .expander__panel.is-active .expander__btn {
    opacity: 1;
    max-height: 60px;
    transform: none;
    margin-top: var(--space-sm);
  }

  /* Colapsado: título a la izquierda + botón (chevron) a la derecha */
  .expander__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
  }
  .expander__title::after {
    content: '';
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
      center / 14px no-repeat;
    transition: transform var(--t-base);
  }
  .expander__panel.is-active .expander__title::after {
    transform: rotate(180deg);
  }

  /* La etiqueta "Estrella" solo se ve cuando el panel está abierto */
  .expander__tag {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base), visibility var(--t-base);
  }
  .expander__panel.is-active .expander__tag {
    opacity: 1;
    visibility: visible;
  }
}

/* =========================================================
   PLACE-CARD · tarjeta estilo app (imagen + overlay + chips)
   Inspirada en las referencias: imagen redondeada, botón
   guardar, pin de ubicación, "Desde" + chip de precio.
   ========================================================= */
.place-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
  isolation: isolate;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.place-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.place-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--t-base);
}

.place-card:hover .place-card__img {
  transform: scale(1.06);
}

.place-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-card);
  z-index: -1;
}

/* Botón guardar (bookmark) arriba a la derecha */
.place-card__save {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  color: var(--color-white);
  font-size: 1.1rem;
  transition: background var(--t-fast);
}

.place-card__save:hover {
  background: var(--color-primary);
}

/* Etiqueta de tipo arriba a la izquierda */
.place-card__type {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: var(--gradient-brand);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.place-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.place-card__title {
  font-size: 1.3rem;
  font-weight: var(--fw-bold);
}

/* Pin de ubicación tipo "pill" translúcido */
.place-card__loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.place-card__loc svg {
  width: 14px;
  height: 14px;
}

/* Fila inferior: "Desde" + chip de precio */
.place-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-xs);
}

.place-card__from {
  font-size: var(--fs-small);
  opacity: 0.9;
}

.place-card__price {
  background: var(--color-white);
  color: var(--color-ink);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
}

/* =========================================================
   SLIDER · carrusel horizontal con scroll-snap
   Estructura:
     .slider                (contenedor + flechas)
       .slider__track       (pista deslizable)
         > .place-card      (cada slide)
       .slider__btn (prev/next)
     .slider__dots          (paginación)
   Mobile: swipe nativo + asoma la siguiente tarjeta (peek).
   Desktop: flechas visibles.
   ========================================================= */
.slider {
  position: relative;
}

.slider__track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* El padding lateral deja respirar y permite el "peek" */
  padding: var(--space-xs) var(--space-xs) var(--space-md);
  scroll-padding-inline: var(--space-xs);
  /* Oculta la barra de scroll manteniendo el swipe */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

/* Cada slide: ancho fijo + alineación de snap */
.slider__track > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
  /* Móvil: 82% para que asome la siguiente tarjeta */
  width: 82%;
}

/* Flechas de navegación (ocultas en móvil) */
.slider__btn {
  display: none;
  position: absolute;
  top: 38%;
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  color: var(--color-ink);
  font-size: 1.3rem;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.slider__btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.slider__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.slider__btn:disabled:hover {
  background: var(--color-white);
  color: var(--color-ink);
}

.slider__btn--prev { left: -22px; }
.slider__btn--next { right: -22px; }

/* Puntos de paginación */
.slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-sm);
}

.slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-line);
  transition: width var(--t-base), background var(--t-base);
}

.slider__dot.is-active {
  width: 26px;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
}

/* Encabezado de slider: título a la izq + "Ver todo" a la der */
.slider-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.slider-head h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
}

.slider-head .badge {
  margin-bottom: var(--space-xs);
}

.slider-head__see {
  flex: none;
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
}

/* =========================================================
   TABS / FILTROS (Yates · Propiedades · Restaurantes)
   ========================================================= */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.tab {
  padding: 0.6rem 1.3rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  transition: var(--t-fast);
}

.tab.is-active {
  background: var(--gradient-brand);
  color: var(--color-white);
  border-color: transparent;
}

/* Oculta listados que no coinciden con el filtro activo (JS) */
.listing-card.is-hidden {
  display: none;
}

/* =========================================================
   SECCIÓN "CONVIÉRTETE EN ANFITRIÓN"
   ========================================================= */
.host {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  grid-template-columns: 1fr;
}

/* Imagen de anfitrión: llena el espacio, con blob decorativo detrás */
.host__media {
  position: relative;
}

.host__media::before {
  content: '';
  position: absolute;
  inset: -8% -8% 12% 12%;
  border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%;
  background: rgba(var(--color-primary-rgb), 0.1);
  z-index: 0;
}

.host__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.host__steps {
  display: grid;
  gap: var(--space-md);
  margin-block: var(--space-md);
}

.host__step {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.host__step .num {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: var(--color-white);
  font-weight: 700;
}

.host__step h4 {
  font-size: 1.05rem;
  margin-bottom: 2px;
}

.host__step p {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

/* Distintivo de verificación */
.verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: #1a9e54;
}

.verified::before {
  content: '✓';
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1a9e54;
  color: #fff;
  font-size: 11px;
}

/* =========================================================
   FEATURES (lo que nos distingue)
   ========================================================= */
.features {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

.feature {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.feature img {
  width: 44px;
  height: 44px;
  flex: none;
}

.feature h4 {
  margin-bottom: 2px;
}

.feature p {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

/* =========================================================
   FORMULARIO DE CONTACTO
   ========================================================= */
.form {
  display: grid;
  gap: var(--space-md);
}

.form__row {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: var(--fs-small);
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

/* =========================================================
   MODAL "Publica tu propiedad"
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(20, 16, 14, 0.6);
  backdrop-filter: blur(4px);
}

.modal.is-open {
  display: flex;
}

.modal__dialog {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-lg);
  position: relative;
}

.modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-ink-soft);
}

.modal__head {
  margin-bottom: var(--space-md);
}

.modal__head p {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  margin-top: 4px;
}

/* =========================================================
   BOTÓN FLOTANTE WHATSAPP
   ========================================================= */
.whatsapp-fab {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--t-fast);
}

.whatsapp-fab:hover {
  transform: scale(1.08);
}

.whatsapp-fab img {
  width: 28px;
  height: 28px;
}

/* =========================================================
   BREAKPOINTS de componentes
   ========================================================= */

/* Tablet */
@media (min-width: 720px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .features {
    grid-template-columns: repeat(3, 1fr);
  }
  .form__row {
    grid-template-columns: 1fr 1fr;
  }
  .search-card {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Slider: 2 tarjetas y media visibles */
  .slider__track > * {
    width: 42%;
  }
}

/* Desktop */
@media (min-width: 960px) {
  .cards-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .cards-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .host {
    grid-template-columns: 1fr 1fr;
  }
  /* Búsqueda: 4 campos + botón en una fila */
  .search-card {
    grid-template-columns: repeat(4, 1fr) auto;
    align-items: end;
  }
  .search-card .btn {
    width: auto;
    height: 100%;
  }
  /* Slider: 4 tarjetas visibles + flechas */
  .slider__track > * {
    width: calc((100% - 3 * var(--space-md)) / 4);
  }
  .slider__btn {
    display: flex;
  }
}

/* =========================================================
   BOTÓN OSCURO (estilo "Learn More" de las referencias)
   Pastilla oscura con flecha; se aclara un poco al hover.
   ========================================================= */
.btn--dark {
  background: var(--color-ink-dark);
  color: var(--color-white);
  padding: 0.9rem 1.6rem;
}

.btn--dark:hover {
  background: #000;
}

.btn--dark svg {
  width: 18px;
  height: 18px;
  transition: transform var(--t-fast);
}

.btn--dark:hover svg {
  transform: translateX(4px);
}

/* Placeholder gris reemplazable (cuando no hay foto definitiva).
   Se usa con <div class="img-placeholder">…</div> o sobre una
   imagen que no cargue. NUNCA muestra imagen rota. */
.img-placeholder {
  background: #e9e6e3;
  color: #b3aaa3;
  display: grid;
  place-items: center;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}

/* =========================================================
   SECCIÓN · PLANEA TU VIAJE  (imágenes en arco + features)
   ========================================================= */
.plan {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  grid-template-columns: 1fr;
}

/* --- Clúster de imágenes en formas orgánicas (arcos) --- */
.plan__media {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: var(--space-md);
  aspect-ratio: 1 / 1;
}

.plan__img {
  position: relative;
  overflow: hidden;
  background: #e9e6e3;        /* color base = placeholder gris si no carga */
}

.plan__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Imagen alta a la izquierda (arco tipo domo, ocupa 2 filas) */
.plan__img--tall {
  grid-row: 1 / 3;
  border-radius: 180px 180px var(--radius-lg) var(--radius-lg);
}

/* Arco superior derecho */
.plan__img--a {
  border-radius: var(--radius-lg) var(--radius-lg) 180px 180px;
}

/* Forma redondeada inferior derecha */
.plan__img--b {
  border-radius: 180px var(--radius-lg) 180px var(--radius-lg);
}

/* --- Texto de la derecha --- */
.script-eyebrow {
  font-family: 'Dancing Script', cursive;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.plan__text h2 {
  margin: var(--space-xs) 0 var(--space-sm);
}

.plan__text > p {
  color: var(--color-ink-soft);
  margin-bottom: var(--space-lg);
}

.plan__feature {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.plan__feature-icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: grid;
  place-items: center;
}

.plan__feature-icon svg {
  width: 24px;
  height: 24px;
}

.plan__feature h4 {
  font-size: 1.15rem;
  margin-bottom: 2px;
}

.plan__feature p {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

/* =========================================================
   SECCIÓN · DESTINOS POPULARES  (carrusel tipo coverflow)
   La tarjeta más centrada recibe .is-center (vía main.js):
   se agranda y los lados se reducen y atenúan.
   ========================================================= */
.coverflow {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Padding lateral grande para poder centrar la 1ª y última */
  padding: var(--space-xl) 50%;
  scrollbar-width: none;
}

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

.dest-card {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: 300px;
  aspect-ratio: 3 / 4;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--color-white);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  /* Estado base = lateral (reducido y atenuado) */
  transform: scale(0.82);
  opacity: 0.55;
  transition: transform var(--t-base), opacity var(--t-base), box-shadow var(--t-base);
  background: #e9e6e3;
}

.dest-card.is-center {
  transform: scale(1);
  opacity: 1;
  box-shadow: var(--shadow-lg);
}

.dest-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.dest-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-card);
  z-index: -1;
}

.dest-card__body {
  padding: var(--space-md);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
}

.dest-card__name {
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
}

.dest-card__count {
  font-size: var(--fs-small);
  opacity: 0.85;
}

/* Botón "Ver todo" dentro de la tarjeta (pastilla translúcida) */
.dest-card__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  transition: background var(--t-fast);
}

.dest-card__btn:hover {
  background: var(--color-primary);
  border-color: transparent;
}

/* --- Responsive de las nuevas secciones --- */
@media (min-width: 960px) {
  .plan {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   SECCIÓN · GALERÍA RECIENTE  (mosaico tipo masonry)
   Usa columnas CSS para un acomodo escalonado y orgánico.
   Las alturas varían con modificadores --tall / --short.
   ========================================================= */
.gallery {
  columns: 2;                  /* móvil: 2 columnas */
  column-gap: var(--space-md);
}

.gallery__item {
  break-inside: avoid;         /* evita cortar una imagen entre columnas */
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #e9e6e3;         /* placeholder gris si la imagen no carga */
}

.gallery__item img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  transition: transform var(--t-base);
}

.gallery__item--tall img { aspect-ratio: 3 / 5; }
.gallery__item--short img { aspect-ratio: 1 / 1; }

.gallery__item:hover img {
  transform: scale(1.05);
}

@media (min-width: 720px) {
  .gallery { columns: 3; }
}

@media (min-width: 960px) {
  .gallery { columns: 4; }
}

/* =========================================================
   SECCIÓN · RESEÑAS / TESTIMONIOS  (coverflow con dots)
   Reutiliza la lógica coverflow: la tarjeta central se eleva
   y aclara; las laterales quedan en azul muy claro y bajan.
   ========================================================= */
.review-card {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: min(420px, 80vw);
  background: rgba(var(--color-primary-rgb), 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  /* Estado base = lateral (más bajo y atenuado) */
  transform: scale(0.92) translateY(12px);
  opacity: 0.7;
  transition: transform var(--t-base), opacity var(--t-base), box-shadow var(--t-base),
    background var(--t-base);
}

.review-card.is-center {
  background: var(--color-white);
  transform: scale(1) translateY(0);
  opacity: 1;
  box-shadow: var(--shadow-md);
}

.review-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.review-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: #e9e6e3;
}

.review-card__name {
  font-weight: var(--fw-bold);
  font-size: 1.05rem;
}

.review-card__role {
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}

.review-card__stars {
  margin-left: auto;
  color: #f5a623;            /* dorado para las estrellas */
  letter-spacing: 2px;
  font-size: 0.95rem;
}

.review-card__text {
  color: var(--color-ink-soft);
  font-size: 0.98rem;
}

/* Comilla decorativa */
.review-card__quote {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-sm);
  font-family: Georgia, serif;
  font-size: 3.5rem;
  line-height: 1;
  color: rgba(var(--color-primary-rgb), 0.18);
}

/* =========================================================
   FOOTER · newsletter, redes sociales e Instagram
   ========================================================= */

/* Banda de newsletter (arriba del footer) */
.newsletter {
  display: grid;
  gap: var(--space-md);
  align-items: center;
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-line);
  grid-template-columns: 1fr;
}

.newsletter__title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.newsletter__form {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.newsletter__form input {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1.3rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.newsletter__form input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

.newsletter__form .btn {
  flex: none;
}

.newsletter__form svg {
  width: 18px;
  height: 18px;
}

/* Iconos de redes sociales (círculos claros) */
.footer__social {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.footer__social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  transition: background var(--t-fast), color var(--t-fast);
}

.footer__social a:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.footer__social img {
  width: 18px;
  height: 18px;
}

/* Grid de Instagram (6 miniaturas) */
.footer__insta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.footer__insta a {
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1;
  background: #e9e6e3;        /* placeholder gris */
}

.footer__insta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-fast);
}

.footer__insta a:hover img {
  transform: scale(1.1);
}

/* Newsletter en 2 columnas y footer en 4 desde tablet/desktop */
@media (min-width: 720px) {
  .newsletter {
    grid-template-columns: 1.2fr 1fr;
  }
}

@media (min-width: 960px) {
  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr;
  }
}

/* =========================================================
   COVERFLOW · contenedor con flechas (Destinos y Reseñas)
   El wrapper es relativo para posicionar las flechas que crea
   main.js. Las flechas reutilizan el estilo .slider__btn.
   ========================================================= */
.coverflow-wrap {
  position: relative;
}

/* Durante el salto invisible del loop, desactivamos transiciones para
   que el estado "centrado" (escala) se transfiera al instante, sin pop. */
.coverflow.no-anim .dest-card,
.coverflow.no-anim .review-card {
  transition: none !important;
}

.coverflow__btn {
  display: flex;              /* visibles también en móvil para este carrusel */
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
}

.coverflow__btn.slider__btn--prev { left: 8px; }
.coverflow__btn.slider__btn--next { right: 8px; }

@media (min-width: 720px) {
  .coverflow__btn.slider__btn--prev { left: 24px; }
  .coverflow__btn.slider__btn--next { right: 24px; }
}

/* Móvil: menos aire vertical en el coverflow (mantiene el 50%
   horizontal para seguir centrando la tarjeta) */
@media (max-width: 719px) {
  .coverflow {
    padding-block: var(--space-md);   /* 1.5rem en vez de 4rem */
  }
}

/* =========================================================
   MODO PLACEHOLDER (gris)  ⟵ BORRAR ESTE BLOQUE PARA USAR FOTOS
   Convierte TODAS las fotos en cuadros grises reemplazables
   (excepto el banner del hero, que es background, y el logo).
   Oculta el <img> y deja ver el fondo gris del contenedor.
   Cuando tengas las fotos definitivas, elimina este bloque.
   ========================================================= */
:root {
  --ph-light: #e4e0dc;   /* gris claro (formas sin texto) */
  --ph-dark: #aab0b6;    /* gris medio (tarjetas con texto blanco) */
}

/* Oculta las fotos (no los iconos ni el logo) */
.expander__img,
.place-card__img,
.plan__img > img,
.dest-card > img,
.host__media > img,
.footer__insta img {
  visibility: hidden;
}

/* Tarjetas con texto blanco encima → gris medio (legible con overlay) */
.expander__panel,
.place-card,
.dest-card {
  background: var(--ph-dark);
}

/* Formas/bloques sin texto encima → gris claro */
.plan__img,
.footer__insta a {
  background: var(--ph-light);
}

/* Anfitrión: el gris va en el contenedor (con su proporción),
   porque su <img> no es absoluto y al ocultarlo colapsaría. */
.host__media {
  background: var(--ph-light);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
}