/*
 * components.css
 * One-off component styles that don't belong as Tailwind utility classes —
 * anything that used to be a raw style="" attribute in index.html.
 */

/* Hero banner — Mezquita-Catedral skyline photo. `cover` so it always
   fills the section edge-to-edge with no letterbox bars; the section's
   height is capped to the viewport (index.html: lg:h-[92vh]) so the whole
   banner is visible without scrolling. The photo's own ratio (~1.78:1) is
   close to most screens', so in practice cover crops very little — and
   only off the top/bottom sky, never the monument. Mobile/tablet keeps
   `right center` so the monument stays in frame through the taller crop;
   desktop switches to `center` below, since the crop there is minimal. */
.hero-banner {
  background-image: url('../img/Banner_mezquita_cordoba.webp');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  .hero-banner {
    background-position: center;
  }
}

/* Scrim over the banner photo. On mobile/tablet the copy (globe, headline,
   buttons, review badge) stacks down the full width of the photo — the sky
   at the top is easy to read over, but the lower half sits over the
   Mezquita, the bridge and the river, where dark text loses contrast. So
   the wash stays light at the top and ramps up to a near-solid cream by
   the bottom. From the `lg` breakpoint up, where the copy is confined to
   the left 54% and the globe takes the right 46%, it opens into a
   left-to-right fade so the Mezquita shows through clearly, with a faint
   white glow behind the globe so its thin lines stay readable. */
.hero-scrim {
  background: linear-gradient(180deg,
    rgba(251, 246, 241, 0.28) 0%,
    rgba(251, 246, 241, 0.42) 34%,
    rgba(251, 246, 241, 0.72) 64%,
    rgba(251, 246, 241, 0.90) 100%);
}

@media (min-width: 1024px) {
  .hero-scrim {
    background:
      linear-gradient(100deg,
        rgba(251, 246, 241, 0.3) 0%,
        rgba(251, 246, 241, 0.15) 40%,
        rgba(251, 246, 241, 0.02) 64%,
        rgba(251, 246, 241, 0) 80%,
        rgba(251, 246, 241, 0.02) 100%),
      radial-gradient(circle at 80% 46%, rgba(255, 255, 255, 0.1) 0%, transparent 55%);
  }
}

/* Destination photography — a shared, slightly desaturated/warm grade so the
   gallery reads as one curated collection instead of six unrelated stock photos. */
.destino-photo {
  filter: saturate(0.92) sepia(0.06);
}

/* "Sobre Nosotros" team photo placeholder.
   Swap this block for a real <img> of the team/office as soon as one exists —
   see the note in index.html. */
.team-photo-placeholder {
  background: linear-gradient(155deg, var(--ot-surface-container-high) 0%, var(--ot-surface-container) 55%, var(--ot-secondary-container) 100%);
}

/* Testimonials aggregate rating badge (5-star row with a partial-fill overlay) */
.rating-badge {
  position: relative;
  display: inline-flex;
  width: 96px; /* 5 stars (16px) + 4 gaps (4px) */
}

.rating-badge__track {
  display: flex;
  gap: 4px;
  color: var(--ot-outline-variant);
}

.rating-badge__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: 86.4px; /* 4.5 / 5 stars */
  display: flex;
  gap: 4px;
  color: var(--ot-primary);
}

/* Final CTA background motif (route constellation on the dark section) */
.cta-orbit {
  opacity: 0.35;
}

/* Final CTA — inline short form on the dark section (adapted from the
   21st.dev "Call To Action with mail form" pattern, no React). */
#presupuesto .cta-form__in {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(251, 246, 241, 0.3);
  border-radius: 0;
  padding: 10px 0;
  color: var(--ot-background);
  font-size: 16px;
  box-shadow: none;
  transition: border-color 0.3s;
}
#presupuesto .cta-form__in::placeholder { color: rgba(251, 246, 241, 0.45); }
#presupuesto .cta-form__in:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: var(--ot-primary-container);
}
.cta-form__l {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 246, 241, 0.6);
  margin-bottom: 4px;
}

/* ============================================================
   Destinos — "expanding cards" (adapted from the 21st.dev
   Expanding Cards pattern, pure CSS, no JS).
   Móvil: tarjetas apiladas con el texto siempre visible.
   Tablet: cuadrícula de 2 columnas.
   Escritorio con ratón: una fila; la tarjeta bajo el cursor (o con
   foco de teclado) se ensancha y el resto se pliega mostrando el
   nombre en vertical. Sin hover/foco, la primera queda abierta.
   ============================================================ */
.dx {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dx__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  height: 340px;
  isolation: isolate;
}
.dx__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.dx__item:hover .dx__img { transform: scale(1.06); }
.dx__body {
  position: absolute;
  inset: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  color: #fff;
}

@media (min-width: 768px) {
  .dx { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .dx__item { height: 400px; }
  .dx > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .dx { display: flex; gap: 12px; height: 540px; }
  .dx > li { flex: 1 1 0; min-width: 0; transition: flex-grow 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
  .dx__item { height: 100%; }

  /* expanded state: hover / keyboard focus, or the first card by default */
  .dx > li:hover,
  .dx > li:focus-within,
  .dx:not(:hover):not(:focus-within) > li:first-child { flex-grow: 5; }

  .dx__body {
    min-width: 340px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s, transform 0.4s;
  }
  .dx > li:hover .dx__body,
  .dx > li:focus-within .dx__body,
  .dx:not(:hover):not(:focus-within) > li:first-child .dx__body {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s 0.25s, transform 0.6s 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* collapsed state: vertical destination name (decorative — the real h3 is in .dx__body) */
  .dx__item::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    bottom: 32px;
    writing-mode: vertical-rl;
    transform: translateX(-50%) rotate(180deg);
    color: #fff;
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 24px;
    line-height: 1;
    white-space: nowrap;
    transition: opacity 0.3s 0.2s;
  }
  .dx > li:hover .dx__item::after,
  .dx > li:focus-within .dx__item::after,
  .dx:not(:hover):not(:focus-within) > li:first-child .dx__item::after {
    opacity: 0;
    transition-delay: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dx > li,
  .dx__img,
  .dx__body,
  .dx__item::after { transition: none !important; }
  .dx__item:hover .dx__img { transform: none; }
}

/* ============================================================
   "Cómo diseñamos tu viaje paso a paso"
   Móvil / tablet: una columna con la línea a la izquierda.
   Escritorio: timeline central alternado — el texto va a un lado
   y el otro, el icono se sitúa sobre la línea central, y la línea
   se tinta de terracota a medida que haces scroll.
   Lógica en assets/js/proceso.js.
   ============================================================ */
#proceso {
  --pr-ground: var(--ot-background);
  --pr-ink: var(--ot-on-surface);
  --pr-muted: var(--ot-on-surface-variant);
  --pr-faint: var(--ot-outline);
  --pr-hair: var(--ot-outline-variant);
  --pr-terra: var(--ot-primary);
  --pr-mark: clamp(82px, 9vw, 104px);

  position: relative;
  width: 100%;
  background: var(--pr-ground);
  padding: clamp(44px, 6vh, 88px) 0 clamp(96px, 14vh, 176px);
}

.proceso__wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}

/* --- Header (centrado) --- */
.proceso__rail {
  max-width: 640px;
  margin: 0 auto clamp(42px, 6vw, 76px);
  text-align: center;
}
.proceso__eyebrow {
  font: 700 12px/1 "Archivo", sans-serif;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--pr-terra); margin: 0 0 20px;
}
.proceso__h2 {
  font: 400 clamp(33px, 5vw, 52px)/1.05 "Instrument Serif", Georgia, serif;
  letter-spacing: -.01em; color: var(--pr-ink); margin: 0 0 22px;
  text-wrap: balance;
}
.proceso__lead {
  font: 400 17px/1.62 "Archivo", sans-serif;
  color: var(--pr-muted); max-width: 46ch; margin: 0 auto 28px;
}
.proceso__idx { display: none; }
.proceso__cta {
  display: inline-block;
  font: 700 12px/1 "Archivo", sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pr-terra); text-decoration: none;
  border-bottom: 1px solid rgba(156, 74, 36, .4);
  padding-bottom: 4px; transition: border-color .2s ease;
}
.proceso__cta:hover { border-color: var(--pr-terra); }

.proceso__track { position: relative; isolation: isolate; }

/* ---------- Móvil / tablet (< 1024) : línea a la izquierda ---------- */
.proceso__step {
  position: relative;
  padding: 0 0 clamp(56px, 12vw, 92px) 30px;
  border-left: 1px solid var(--pr-hair);
}
.proceso__step:last-child { padding-bottom: 0; }
.proceso__step::before { /* tramo terracota de la línea, guiado por scroll */
  content: ""; position: absolute; left: -1.5px; top: 0; width: 3px; height: 100%;
  background: var(--pr-terra);
  transform: scaleY(var(--seg, 0)); transform-origin: top;
  z-index: -1;
}
.proceso__step::after { /* nodo */
  content: ""; position: absolute; left: -5.5px; top: 22px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--pr-ground); border: 1px solid var(--pr-hair);
  transition: background .5s ease, border-color .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.proceso__step.is-passed::after,
.proceso__step.is-active::after { background: var(--pr-terra); border-color: var(--pr-terra); }
.proceso__step.is-active::after { transform: scale(1.35); }

.proceso__num {
  display: block;
  font: 400 clamp(48px, 12vw, 62px)/1 "Instrument Serif", Georgia, serif;
  color: var(--pr-terra); opacity: .16; margin: 0 0 14px;
  transition: opacity .55s ease;
}
/* Número decorativo (marca de agua): se pinta desde CSS para que no cuente como texto de bajo contraste */
.proceso__num::before { content: attr(data-n); }
.proceso__step.is-passed .proceso__num { opacity: .5; }
.proceso__step.is-active .proceso__num { opacity: 1; }

.proceso__title {
  font: 400 clamp(22px, 5vw, 26px)/1.22 "Instrument Serif", Georgia, serif;
  color: var(--pr-ink); margin: 0 0 12px; text-wrap: balance;
}
.proceso__title span {
  background: linear-gradient(var(--pr-terra), var(--pr-terra)) 0 100% / 0% 1px no-repeat;
  transition: background-size .22s ease; padding-bottom: 2px;
}
.proceso__body {
  font: 400 15.5px/1.72 "Archivo", sans-serif;
  color: var(--pr-muted); max-width: 46ch; margin: 0 0 24px;
}

.proceso__aside { transform: translate3d(0, var(--par, 0px), 0); }
.proceso__mark {
  width: var(--pr-mark); height: var(--pr-mark);
  display: grid; place-items: center;
  color: var(--pr-muted);
  border: 1px solid var(--pr-hair); border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(30, 23, 18, .04), 0 14px 34px rgba(30, 23, 18, .06);
  opacity: 0; transform: translateY(24px) scale(.94);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1),
              border-color .5s ease, color .5s ease;
}
.proceso__mark svg { width: clamp(30px, 4vw, 40px); height: auto; display: block; }
.proceso__mark.in { opacity: 1; transform: none; }
.proceso__step.is-active .proceso__mark { border-color: var(--pr-terra); color: var(--pr-terra); }

.proceso__cap {
  display: block; margin-top: 14px;
  font: 500 11px/1.4 "Archivo", sans-serif;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ot-on-surface-variant); /* AA a 11 px */
}

/* ---------- Escritorio (>= 1024) : timeline central alternado ---------- */
@media (min-width: 1024px) {
  .proceso__step {
    width: 50%;
    box-sizing: border-box;
    padding: 6px 0 clamp(80px, 12vw, 156px);
    border-left: none;
  }
  .proceso__step::before,
  .proceso__step::after { display: none; }

  .proceso__step:nth-child(odd) {
    margin-left: 0;
    padding-right: clamp(72px, 9vw, 118px);
    text-align: right;
  }
  .proceso__step:nth-child(even) {
    margin-left: 50%;
    padding-left: clamp(72px, 9vw, 118px);
    text-align: left;
  }

  .proceso__num { font-size: clamp(54px, 5vw, 76px); }
  .proceso__title { font-size: clamp(23px, 2.3vw, 29px); }
  .proceso__title, .proceso__body { max-width: 38ch; }
  .proceso__step:nth-child(odd) .proceso__title,
  .proceso__step:nth-child(odd) .proceso__body { margin-left: auto; }

  /* línea central — arranca bajo el primer icono, terracota plena, tras los iconos */
  .proceso__track { --line-top: calc(clamp(2px, 1vw, 14px) + var(--pr-mark) + 16px); }
  .proceso__track::before,
  .proceso__track::after {
    content: ""; position: absolute; left: 50%;
    top: var(--line-top); bottom: 0; width: 2px;
    transform: translateX(-1px); pointer-events: none;
    z-index: -1;
  }
  .proceso__track::before { background: rgba(156, 74, 36, .22); }
  .proceso__track::after {
    background: var(--pr-terra); transform-origin: top;
    transform: translateX(-1px) scaleY(var(--track-seg, 0));
  }

  /* icono sobre la línea central */
  .proceso__aside {
    position: absolute; top: clamp(2px, 1vw, 14px);
    width: 220px; text-align: center;
    transform: translate3d(0, var(--par, 0px), 0);
  }
  .proceso__step:nth-child(odd) .proceso__aside { right: 0; margin-right: -110px; }
  .proceso__step:nth-child(even) .proceso__aside { left: 0; margin-left: -110px; }
  .proceso__mark { margin: 0 auto; }
  .proceso__cap { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .proceso__step:hover .proceso__num { opacity: 1; }
  .proceso__step:hover .proceso__title span { background-size: 100% 1px; }
  .proceso__step:hover .proceso__mark { border-color: var(--pr-terra); color: var(--pr-terra); transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .proceso__step::before { transform: scaleY(1); }
  .proceso__track::after { transform: translateX(-1px) scaleY(1); }
  .proceso__num { opacity: .92; }
  .proceso__mark { opacity: 1; transform: none; }
  #proceso *,
  #proceso *::before,
  #proceso *::after { transition: none !important; }
}

/* ============================================================
   Servicios - tarjetas apiladas al hacer scroll
   (adapted from the 21st.dev "Scroll Cards" pattern, pure CSS:
   each <li> is position: sticky with a slightly larger top
   offset, so every card slides up and stacks over the previous
   one, leaving a thin strip of each visible).
   Movil: imagen arriba, texto debajo. Escritorio: texto | foto.
   On short viewports the stacking is disabled (normal list).
   ============================================================ */
.sc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.sc__item {
  position: sticky;
  top: calc(96px + var(--i, 0) * 14px);
}
.sc__card {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--ot-outline-variant);
  background: #FFFFFF;
  color: var(--ot-on-surface);
  box-shadow: 0 -10px 30px rgba(30, 23, 18, 0.06);
}
.sc__card:focus-visible { outline: 2px solid var(--ot-primary); outline-offset: 4px; }

.sc__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 28px 32px;
}
.sc__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.sc__ico { width: 34px; height: 34px; color: var(--ot-primary); }
.sc__num {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 18px;
  color: var(--ot-primary);
}
/* "/ 06": atenuado pero con contraste AA (4,5:1) en las tarjetas blanca y beis */
.sc__num i { font-style: normal; color: var(--ot-on-primary-container); opacity: 0.7; }
.sc__title {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
}
.sc__desc {
  margin: 14px 0 0;
  max-width: 30rem;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ot-on-surface-variant);
}
.sc__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ot-primary);
}
.sc__more span { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.sc__card:hover .sc__more span,
.sc__card:focus-visible .sc__more span { transform: translateX(6px); }

.sc__media {
  order: -1;
  position: relative;
  height: 190px;
  overflow: hidden;
}
.sc__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.sc__card:hover .sc__media img { transform: scale(1.04); }

/* variants */
.sc__card--warm { background: var(--ot-surface-container); border-color: var(--ot-surface-container-high); }
.sc__card--dark { background: var(--ot-secondary); border-color: var(--ot-secondary); color: var(--ot-background); }
.sc__card--dark .sc__ico,
.sc__card--dark .sc__num,
.sc__card--dark .sc__more { color: var(--ot-primary-container); }
.sc__card--dark .sc__num i { color: var(--ot-primary-container); opacity: 0.8; }
.sc__card--dark .sc__desc { color: rgba(251, 246, 241, 0.72); }

@media (min-width: 768px) {
  .sc__item { top: calc(104px + var(--i, 0) * 18px); }
  .sc__card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: 440px;
  }
  .sc__text { padding: 48px 52px; }
  .sc__media { order: 0; height: auto; }
  .sc__title { font-size: 40px; }
}

@media (min-width: 1024px) {
  .sc__card { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); height: 460px; }
  .sc__text { padding: 56px 64px; }
  .sc__title { font-size: 48px; }
  .sc__desc { font-size: 16px; }
}

/* not enough room to stack: plain list */
@media (max-height: 680px) {
  .sc__item { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .sc__media img,
  .sc__more span { transition: none !important; }
  .sc__card:hover .sc__media img { transform: none; }
}

/* Floating WhatsApp button (injected by nav.js on every page). */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float:hover { transform: scale(1.06); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24); }
.wa-float:focus-visible { outline: 3px solid #128C7E; outline-offset: 3px; }

/* Pages with a fixed bottom bar below 1024px. Destinos, servicios and
   opiniones: their bar has no WhatsApp, so the button sits above it (it used
   to hide behind it). Contacto and ofertas: their bar already has WhatsApp,
   so the floating button would be a duplicate. */
@media (max-width: 1023px) {
  body:has(.pd-mobilebar, .ps-mobilebar, .op-mobilebar) .wa-float { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body:has(.ct-mobilebar, .of-mobilebar) .wa-float { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: none; }
}

/* ============================================================
   Page hero system (.ph-*) - shared by the interior pages so all
   heroes follow one layout: copy on the left, a visual on the
   right (photo card with floating glass chips, inspired by the
   21st.dev travel "Hero Section" pattern). Pages keep their own
   colour tokens; set --ph-accent on the section to tint chips.
   ============================================================ */
.ph-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.ph-copy { min-width: 0; }
.ph-grid .ph-copy h1 { font-size: clamp(42px, 5.4vw, 76px); }
.ph-copy h1 em { white-space: nowrap; }
.ph-h1-sub {
  display: block;
  margin-top: 0.4em;
  font-size: clamp(20px, 0.4em, 32px);
  line-height: 1.3;
  letter-spacing: 0;
  font-style: normal;
  color: var(--ph-muted, var(--ot-on-surface-variant));
}
.ph-h1-sub::first-letter { text-transform: uppercase; }

.ph-media { position: relative; }
.ph-photo {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  aspect-ratio: 4 / 3;
  background: var(--ot-surface-container-high);
  box-shadow: 0 40px 80px -36px rgba(30, 23, 18, 0.45);
}
.ph-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: ph-zoom 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ph-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 16, 12, 0.35), rgba(20, 16, 12, 0) 40%);
  pointer-events: none;
}
@keyframes ph-zoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

/* glass chips */
.ph-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 18px 40px -18px rgba(30, 23, 18, 0.35);
  color: var(--ot-on-surface);
  animation: ph-rise 0.9s 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ph-rise {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}
.ph-chip--route {
  top: 18px;
  left: 18px;
  padding: 9px 16px;
  border-radius: 9999px;
  font: 700 10.5px/1 "Archivo", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation-delay: 0.2s;
}
.ph-chip--route svg { width: 14px; height: 14px; color: var(--ph-accent, var(--ot-primary)); }
a.ph-chip { text-decoration: none; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s; }
a.ph-chip:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -18px rgba(30, 23, 18, 0.45); }
.ph-chip__v { color: var(--ph-accent, var(--ot-primary)); letter-spacing: 0.06em; }
.ph-chip--spec {
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 14px 16px;
  border-radius: 20px;
}
.ph-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--ph-accent, var(--ot-primary));
  color: #fff;
  font: italic 400 18px/1 "Instrument Serif", Georgia, serif;
}
.ph-chip__k {
  display: block;
  font: 700 9.5px/1 "Archivo", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ph-accent, var(--ot-primary));
  margin-bottom: 5px;
}
.ph-chip__v {
  display: block;
  font: 400 19px/1.15 "Instrument Serif", Georgia, serif;
}
.ph-chip__d {
  display: block;
  margin-top: 2px;
  font: 400 12px/1.4 "Archivo", sans-serif;
  color: var(--ot-on-surface-variant);
}

@media (min-width: 640px) {
  .ph-chip--spec { right: auto; max-width: 340px; }
}

@media (min-width: 1024px) {
  .ph-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 72px;
  }
  .ph-photo { aspect-ratio: 4 / 5; max-height: 600px; }
  .ph-chip--spec { left: -36px; bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-photo img,
  .ph-chip { animation: none !important; }
}

@keyframes ph-card-in {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
/* Hero visual: fanned stack of 3 destination photos (destinos.html) */
.ph-stack {
  position: relative;
  height: 380px;
}
.ph-stack__card {
  position: absolute;
  top: 0;
  width: 58%;
  height: 88%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ot-surface-container-high);
  border: 4px solid #FFFFFF;
  box-shadow: 0 30px 60px -28px rgba(30, 23, 18, 0.5);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  animation: ph-card-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ph-stack__card img { width: 100%; height: 100%; object-fit: cover; }
.ph-stack__card--1 { left: 0; top: 7%; transform: rotate(-8deg); animation-delay: 0.1s; }
.ph-stack__card--2 { right: 0; top: 5%; transform: rotate(7deg); animation-delay: 0.2s; }
.ph-stack__card--3 { left: 21%; z-index: 2; animation-delay: 0.3s; }
.ph-stack__card--1:hover { transform: rotate(-10deg) translateY(-8px); }
.ph-stack__card--2:hover { transform: rotate(9deg) translateY(-8px); }
.ph-stack__card--3:hover { transform: translateY(-8px); }
.ph-stack__label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font: 400 16px/1 "Instrument Serif", Georgia, serif;
  color: var(--ot-on-surface);
}
.ph-stack__card--1 .ph-stack__label,
.ph-stack__card--2 .ph-stack__label { top: 12px; bottom: auto; }
.ph-stack + .ph-chip--route {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .ph-stack { height: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-stack__card { animation: none !important; transition: none !important; }
}

/* Aviso de cookies (assets/js/cookies.js; solo aparece si sitio.json tiene "ga4") */
.ot-cookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 22px;
  background: var(--ot-surface);
  color: var(--ot-on-surface);
  border: 1px solid var(--ot-outline-variant);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  font-size: 14px;
  line-height: 1.55;
}
.ot-cookies__txt { margin: 0 0 14px; }
.ot-cookies__txt a { color: var(--ot-primary); text-decoration: underline; }
.ot-cookies__btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.ot-cookies__btn {
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--ot-outline-variant);
  background: transparent;
  color: var(--ot-on-surface);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.ot-cookies__btn--si { background: var(--ot-primary); border-color: var(--ot-primary); color: var(--ot-on-primary); }
.ot-cookies__btn:focus-visible { outline: 2px solid var(--ot-primary); outline-offset: 2px; }