/* ==========================================================================
   Rental Rosarito 2026 — Secciones
   ========================================================================== */

/* ---------------------------------------------------------------- reserva rápida (sobre el borde del hero) */
.reserva-rapida { position: relative; z-index: 5; margin-top: -3.2rem; margin-bottom: 0; background: linear-gradient(to bottom, transparent 50%, var(--oro-boton) 50%); }
.reserva-rapida__form {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr .7fr auto; align-items: end; gap: .9rem;
  padding: 1rem 1rem 1rem 1.4rem;
  background: var(--hueso); color: var(--tinta);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.55);
}
.rr-campo { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.rr-campo label { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-c2); }
.rr-campo label svg { width: 15px; height: 15px; color: var(--oro-hondo); }
.rr-campo select, .rr-campo input {
  width: 100%; min-height: 50px; padding: .6rem .8rem;
  background: var(--arena); border: 1.5px solid transparent; border-radius: var(--r-md); color: var(--tinta);
}
.rr-campo select:focus, .rr-campo input:focus { outline: none; border-color: var(--oro-hondo); background: #fff; }
.reserva-rapida .btn { min-height: 56px; }
@media (max-width: 1100px) {
  .reserva-rapida__form { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.2rem; }
  .rr-campo--ancho, .rr-campo--corto, .reserva-rapida .btn { grid-column: 1 / -1; }
}
@media (max-width: 380px) { .reserva-rapida__form { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- dividido y collage */
.dividido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1.5rem + 4vw, 6rem); align-items: center; }
.dividido__texto > p { color: var(--texto-c2); font-size: 1.05rem; }
.tono-oscuro .dividido__texto > p, .tono-grafito .dividido__texto > p { color: var(--texto-o2); }
@media (max-width: 960px) { .dividido { grid-template-columns: minmax(0, 1fr); } }

.collage { position: relative; min-height: clamp(26rem, 44vw, 38rem); }
.collage__foto { position: absolute; overflow: hidden; box-shadow: var(--sombra); }
.collage__foto img { width: 100%; height: 100%; max-width: none; object-fit: cover; transform: translateY(var(--parallax, 0px)) scale(1.1); }
.collage__foto--a { left: 0; top: 0; width: 72%; height: 78%; border-radius: var(--arco); }
.collage__foto--b { right: 0; bottom: 0; width: 48%; height: 52%; border-radius: var(--r-xl); border: 8px solid var(--arena); }
.collage--vertical .collage__foto--b { border-color: var(--hueso); }
.sello-giratorio {
  position: absolute; left: 58%; top: 6%; width: clamp(110px, 11vw, 150px); aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--oro-claro); color: var(--carbon); border-radius: 50%;
  box-shadow: var(--sombra-oro);
}
.sello-giratorio > svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: gira 22s linear infinite; }
.sello-giratorio text { font-family: var(--f-ui); font-size: 14px; font-weight: 700; letter-spacing: .14em; fill: currentColor; }
.sello-giratorio span svg { width: 42px; height: 42px; stroke-width: 2; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sello-giratorio > svg { animation: none; } }

.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; padding-block: 1.5rem; border-block: 1px solid var(--linea-c); }
.cifra__num { display: block; font-family: var(--f-display); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.3rem); line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cifra__txt { display: block; margin-top: .4rem; font-size: .88rem; color: var(--texto-c2); line-height: 1.4; }
@media (max-width: 520px) { .cifras { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- filtros y tarjetas de unidad */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtros-solos { display: flex; justify-content: center; margin-bottom: 2.5rem; }
.filtro {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 46px; padding: .55rem 1.1rem;
  font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600;
  color: var(--tinta); background: transparent;
  border: 1.5px solid var(--linea-c); border-radius: var(--r-full);
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.filtro svg { width: 18px; height: 18px; }
.filtro b { display: grid; place-items: center; min-width: 1.6em; height: 1.6em; border-radius: var(--r-full); background: var(--arena); font-size: .75rem; }
.filtro:hover { border-color: var(--tinta); }
.filtro[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.filtro[aria-pressed="true"] b { background: var(--oro-claro); color: var(--carbon); }

.unidades { align-items: stretch; }
.unidad {
  display: flex; flex-direction: column;
  background: var(--blanco);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 1px 0 var(--linea-c), 0 18px 40px -30px rgba(26,22,17,.35);
  transition: transform .5s var(--curva), box-shadow .5s var(--curva), opacity .4s;
}
.unidad:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(26,22,17,.45); }
.unidad.esta-oculta { display: none; }
.unidad__foto { position: relative; aspect-ratio: 16 / 11; overflow: hidden; margin: .6rem .6rem 0; border-radius: calc(var(--r-xl) - .4rem) calc(var(--r-xl) - .4rem) var(--r-md) var(--r-md); }
.unidad__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.unidad:hover .unidad__foto img { transform: scale(1.07); }
.unidad__complejo {
  position: absolute; left: .8rem; top: .8rem;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35em .8em; border-radius: var(--r-full);
  background: rgba(251,248,242,.94); color: var(--tinta);
  font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700;
}
.unidad__complejo svg { width: 15px; height: 15px; color: var(--oro-hondo); }
.unidad__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.5rem 1.5rem; }
.unidad__tipo { font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-hondo); }
.unidad h3 { font-size: clamp(1.45rem, 1.25rem + .6vw, 1.85rem); margin: .3rem 0 .8rem; }
.unidad__specs { list-style: none; margin: 0 0 1rem; padding: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .45rem 1rem; border-bottom: 1px dashed var(--linea-c); font-size: .86rem; color: var(--texto-c2); }
.unidad__specs li { display: inline-flex; align-items: center; gap: .35rem; }
.unidad__specs svg { width: 18px; height: 18px; color: var(--tinta); }
.unidad p { color: var(--texto-c2); font-size: .96rem; }
.unidad__acciones { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding-top: .5rem; }
.unidad__acciones .btn--oro { min-height: 46px; }

/* tarjeta que lleva entera al anuncio de Airbnb */
.unidad--enlazada { position: relative; }
.unidad__cubierta { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.unidad--enlazada .unidad__cuerpo a,
.unidad--enlazada .unidad__complejo { position: relative; z-index: 2; }
.unidad__nombre { color: inherit; text-decoration: none; background-image: linear-gradient(var(--oro), var(--oro)); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .45s var(--curva), color .3s; }
.unidad:hover .unidad__nombre, .unidad__nombre:focus-visible { color: var(--oro-hondo); background-size: 100% 1px; }
.unidad__cubierta:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }

.unidades-detalle { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.unidad--detallada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; scroll-margin-top: calc(var(--cabecera-alto) + 1rem); }
.unidad--detallada .unidad__foto { aspect-ratio: auto; min-height: 22rem; margin: .7rem 0 .7rem .7rem; border-radius: var(--r-lg); }
.unidad--detallada:nth-child(even) { direction: rtl; }
.unidad--detallada:nth-child(even) > * { direction: ltr; }
.unidad--detallada:nth-child(even) .unidad__foto { margin: .7rem .7rem .7rem 0; }
.unidad--detallada .unidad__cuerpo { padding: clamp(1.5rem, 1rem + 2vw, 2.6rem); }
.unidad--detallada:target { box-shadow: 0 0 0 3px var(--oro), 0 30px 60px -30px rgba(26,22,17,.45); }
@media (max-width: 900px) {
  .unidad--detallada, .unidad--detallada:nth-child(even) { grid-template-columns: minmax(0, 1fr); direction: ltr; }
  .unidad--detallada .unidad__foto, .unidad--detallada:nth-child(even) .unidad__foto { min-height: 0; aspect-ratio: 16 / 11; margin: .6rem .6rem 0; }
}

/* ---------------------------------------------------------------- amenidades (bento) */
.amenidades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.amenidad {
  position: relative; margin: 0;
  padding: 1.6rem;
  background: var(--piedra);
  border: 1px solid var(--linea-o);
  border-radius: var(--r-lg);
  transition: background-color .4s, transform .5s var(--curva), border-color .4s;
}
.amenidad:hover { background: var(--piedra-2); transform: translateY(-4px); border-color: rgba(210,168,101,.4); }
.amenidad__icono { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.1rem; border-radius: 50%; background: var(--oro-claro); color: var(--carbon); transition: transform .5s var(--curva-resorte); }
.amenidad:hover .amenidad__icono { transform: rotate(-10deg) scale(1.08); }
.amenidad__icono svg { width: 26px; height: 26px; }
.amenidad h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.amenidad p { color: var(--texto-o2); font-size: .94rem; margin: 0; }
/* 9 amenidades + la foto a 3 filas = 12 celdas: tres filas completas, sin hueco */
.amenidad--foto { grid-row: span 3; padding: 0; overflow: hidden; min-height: 18rem; }
.amenidad--foto img { width: 100%; height: 100%; object-fit: cover; }
.amenidad--foto figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: .3em .8em; border-radius: var(--r-full); background: rgba(26,22,17,.78); color: #fff; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 600; }
@media (max-width: 1100px) { .amenidades { grid-template-columns: repeat(2, minmax(0, 1fr)); } .amenidad--foto { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; } }
@media (max-width: 560px) { .amenidades { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- complejos */
.complejos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.complejo { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--blanco); border-radius: var(--r-xl); overflow: hidden; transition: transform .5s var(--curva), box-shadow .5s var(--curva); }
.complejo:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.complejo__foto { aspect-ratio: 16 / 10; overflow: hidden; margin: .7rem .7rem 0; border-radius: var(--arco); }
.complejo__foto img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--parallax, 0px)) scale(1.1); transition: scale 1.2s var(--curva); }
.complejo:hover .complejo__foto img { scale: 1.05; }
.complejo__cuerpo { padding: 1.6rem 2rem 2rem; }
.complejo__gorro { font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-hondo); }
.complejo h3 { font-size: var(--t-xl); margin: .4rem 0 .8rem; }
.complejo p { color: var(--texto-c2); }
.complejo ul { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .45rem; }
.complejo li { display: flex; align-items: center; gap: .55rem; font-size: .95rem; }
.complejo li svg { width: 18px; height: 18px; color: var(--oro-hondo); }
@media (max-width: 860px) { .complejos { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- lugares */
.lugar { display: flex; flex-direction: column; background: var(--blanco); border-radius: var(--r-lg); overflow: hidden; scroll-margin-top: calc(var(--cabecera-alto) + 1rem); }
.tono-arena .lugar { background: var(--hueso); }
.lugar__foto { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; }
.lugar__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.lugar:hover .lugar__foto img { transform: scale(1.07); }
.lugar__min {
  position: absolute; right: .8rem; bottom: .8rem;
  display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%;
  background: var(--oro-claro); color: var(--carbon);
  font-family: var(--f-ui); font-size: .72rem; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .06em;
  text-align: center; align-content: center;
}
.lugar__min b { display: block; font-family: var(--f-display); font-size: 1.9rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.lugar__min--texto { font-size: .68rem; padding: .6rem; }
.lugar__cuerpo { padding: 1.3rem 1.4rem 1.5rem; }
.lugar__tipo { font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--oro-hondo); }
.lugar h3 { font-size: 1.45rem; margin: .3rem 0 .5rem; }
.lugar p { font-size: .93rem; color: var(--texto-c2); margin: 0; }
.distancias { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.distancias li { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; background: var(--blanco); border-radius: var(--r-lg); scroll-margin-top: calc(var(--cabecera-alto) + 1rem); }
.distancias strong { display: block; font-family: var(--f-display); font-size: 1.2rem; font-weight: 500; }
.distancias span { font-size: .9rem; color: var(--texto-c2); }
.distancia__icono { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--oro-suave); color: var(--oro-hondo); }
.distancia__icono svg { width: 22px; height: 22px; }
.distancia__min { margin-left: auto; font-family: var(--f-display); font-weight: 500; font-size: 1.3rem; white-space: nowrap; }
@media (max-width: 760px) { .distancias { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- testimonios */
.testimonios { padding-bottom: calc(var(--seccion) * .9); }
.carrusel-resenas { overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.carrusel-resenas__pista { display: flex; width: max-content; gap: 1.25rem; animation: resenas 60s linear infinite; padding-block: .5rem; }
.carrusel-resenas__copia { display: contents; }
.carrusel-resenas:hover .carrusel-resenas__pista, .carrusel-resenas:focus-within .carrusel-resenas__pista { animation-play-state: paused; }
@keyframes resenas { to { transform: translateX(calc(-50% - .625rem)); } }
.resena {
  display: flex; flex-direction: column; width: min(82vw, 25rem); margin: 0;
  padding: 1.8rem; background: var(--piedra); border: 1px solid var(--linea-o); border-radius: var(--r-xl);
}
.resena__cita { color: var(--oro-claro); margin-bottom: .8rem; }
.resena__cita svg { width: 38px; height: 38px; stroke-width: 1.4; }
.resena blockquote { margin: 0 0 1.4rem; }
.resena blockquote p { font-family: var(--f-display); font-size: 1.2rem; line-height: 1.45; margin: 0; }
.resena figcaption { margin-top: auto; display: flex; align-items: center; gap: .8rem; font-size: .88rem; color: var(--texto-o2); }
.resena figcaption strong { display: block; color: #fff; font-family: var(--f-ui); }
/* Fotos reales de los huéspedes, tomadas de las reseñas del sitio anterior */
.resena__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--piedra-2); box-shadow: 0 0 0 2px var(--oro-claro); }
@media (prefers-reduced-motion: reduce) {
  .carrusel-resenas { overflow-x: auto; }
  .carrusel-resenas__pista { animation: none; }
  .carrusel-resenas__copia { display: none; }
}

/* ---------------------------------------------------------------- próximamente */
.proximamente { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.proximamente__texto p { color: var(--texto-c2); }
.proximamente .nota { font-size: var(--t-sm); font-style: italic; }
.redes-fila { margin-top: 1.5rem; color: var(--tinta); }
.proximamente__cartas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.prox:nth-child(2) { margin-top: 3rem; }
.prox__foto { position: relative; aspect-ratio: 3 / 3.6; overflow: hidden; border-radius: var(--arco); }
.prox__foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.prox__chip { position: absolute; left: 50%; bottom: 1rem; translate: -50% 0; padding: .4em 1em; border-radius: var(--r-full); background: var(--hueso); color: var(--tinta); font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.prox__cuerpo { padding: 1.1rem .4rem 0; }
.prox h3 { font-size: 1.5rem; margin-bottom: .3rem; }
.prox p { font-size: .94rem; color: var(--texto-c2); margin: 0; }
@media (max-width: 960px) { .proximamente { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .proximamente__cartas { grid-template-columns: minmax(0, 1fr); } .prox:nth-child(2) { margin-top: 0; } }

/* ---------------------------------------------------------------- atención al cliente («Contactar agente») */
.atencion { overflow: clip; isolation: isolate; }
.atencion__fondo { position: absolute; inset: -10% 0; z-index: -1; opacity: .22; }
.atencion__fondo img { width: 100%; height: 100%; max-width: none; object-fit: cover; transform: translateY(var(--parallax, 0px)); }
.atencion::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--carbon) 30%, rgba(26,22,17,.75)); }
.atencion__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.atencion h2, .atencion h1 { font-size: var(--t-2xl); }
.atencion__entrada { color: var(--texto-o2); font-size: var(--t-md); max-width: 36rem; }
.atencion__datos { display: grid; gap: .75rem; margin: 2rem 0; }
.dato { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border: 1px solid var(--linea-o); border-radius: var(--r-lg); background: rgba(255,255,255,.03); text-decoration: none; color: #fff; transition: background-color .3s, border-color .3s, transform .4s var(--curva); }
.dato:hover { background: rgba(255,255,255,.07); border-color: rgba(210,168,101,.5); transform: translateX(6px); }
.dato small { display: block; color: var(--texto-o2); font-size: var(--t-xs); font-family: var(--f-ui); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.dato strong { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; word-break: break-word; }
.dato__icono { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--oro-claro); color: var(--carbon); }
.dato__icono--wa { background: #1A7F45; color: #fff; }
.dato__icono svg { width: 23px; height: 23px; }
.atencion .redes { color: #fff; }
@media (max-width: 960px) { .atencion__rejilla { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- blog */
.tarjeta-blog { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--blanco); border-radius: var(--r-xl); overflow: hidden; transition: transform .5s var(--curva), box-shadow .5s var(--curva); }
.tono-claro .tarjeta-blog { background: var(--arena); }
.tarjeta-blog:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.tarjeta-blog__foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tarjeta-blog__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.tarjeta-blog:hover .tarjeta-blog__foto img { transform: scale(1.06); }
.chip--foto { position: absolute; left: .9rem; top: .9rem; background: rgba(251,248,242,.95); color: var(--tinta); }
.tarjeta-blog__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.6rem 1.7rem; }
.tarjeta-blog__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: var(--t-xs); color: var(--texto-c2); font-family: var(--f-ui); font-weight: 600; margin-bottom: .6rem; }
.tarjeta-blog h3 { font-size: 1.45rem; margin-bottom: .6rem; }
.tarjeta-blog p { color: var(--texto-c2); font-size: .95rem; }
.tarjeta-blog .enlace-flecha { margin-top: auto; }
.blog-destacado { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); margin-bottom: 1.75rem; text-decoration: none; color: inherit; background: var(--grafito); color: #fff; border-radius: var(--r-xl); overflow: hidden; }
.blog-destacado__foto { min-height: 22rem; overflow: hidden; }
.blog-destacado__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.blog-destacado:hover .blog-destacado__foto img { transform: scale(1.05); }
.blog-destacado__cuerpo { padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-self: center; }
.blog-destacado .tarjeta-blog__meta { color: var(--texto-o2); }
.blog-destacado .chip { background: var(--oro-claro); color: var(--carbon); }
.blog-destacado h2 { font-size: var(--t-xl); }
.blog-destacado p { color: var(--texto-o2); }
.blog-destacado .enlace-flecha { color: var(--oro-luz); }
@media (max-width: 860px) { .blog-destacado { grid-template-columns: minmax(0, 1fr); } .blog-destacado__foto { min-height: 0; aspect-ratio: 16 / 9; } }

/* ---------------------------------------------------------------- llamada final */
.llamada { position: relative; padding-block: clamp(6rem, 4rem + 8vw, 11rem); overflow: clip; isolation: isolate; text-align: center; }
.llamada__fondo { position: absolute; inset: -12% 0; z-index: -2; }
.llamada__fondo img { width: 100%; height: 100%; max-width: none; object-fit: cover; transform: translateY(var(--parallax, 0px)); }
.llamada::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 60%, rgba(26,22,17,.55), rgba(26,22,17,.9) 70%); }
.llamada__olas { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; height: clamp(90px, 14vw, 180px); pointer-events: none; }
.llamada__olas path { stroke: rgba(210,168,101,.5); }
.llamada__olas path + path { stroke: rgba(255,255,255,.18); }
.llamada__olas path + path + path { stroke: rgba(255,255,255,.1); }
.llamada__cuerpo { max-width: 52rem; margin-inline: auto; }
.llamada .gorro { justify-content: center; }
.llamada h2 { font-size: var(--t-3xl); }
.llamada__entrada { color: #E6DDD3; font-size: var(--t-md); margin: 0 auto 2.2rem; max-width: 38rem; }

/* ---------------------------------------------------------------- tabla comparativa */
.tabla-envoltorio { overflow-x: auto; border-radius: var(--r-xl); background: var(--hueso); box-shadow: 0 20px 50px -34px rgba(26,22,17,.35); }
.tabla { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; }
.tabla th, .tabla td { padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--linea-c); vertical-align: top; font-size: .95rem; }
.tabla thead th { font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-c2); background: var(--arena-2); }
.tabla tbody th a { font-family: var(--f-display); font-size: 1.25rem; font-weight: 500; color: var(--tinta); text-decoration: none; }
.tabla tbody th a:hover { color: var(--oro-hondo); }
.tabla tbody th small { display: block; color: var(--texto-c2); font-size: var(--t-xs); }
.tabla tbody tr:last-child > * { border-bottom: 0; }

/* ---------------------------------------------------------------- detalle de tipo y lateral */
.detalle { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.detalle__texto > p { color: var(--texto-c2); font-size: 1.07rem; }
.lateral { display: grid; gap: 1rem; position: sticky; top: calc(var(--cabecera-alto) + 1rem); }
.lateral__caja { padding: 1.75rem; background: var(--grafito); color: #fff; border-radius: var(--r-xl); }
.lateral__caja h2 { font-size: 1.6rem; margin-bottom: .5rem; }
.lateral__caja p { color: var(--texto-o2); font-size: .95rem; }
.lateral__caja .btn { width: 100%; }
.lateral__caja--oro { background: var(--oro-claro); color: var(--carbon); }
.lateral__caja--oro p { color: #2A1D0C; }
.lateral__caja--oro .btn--blanco:hover { color: #fff; }
.lateral__tel { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem; font-family: var(--f-ui); font-weight: 700; color: inherit; text-decoration: none; }
.lateral__tel svg { width: 20px; height: 20px; }
.lateral__ideal { padding: 1.75rem; background: var(--arena); border-radius: var(--r-xl); }
.tono-arena .lateral__ideal { background: var(--hueso); }
.lateral__ideal h3 { font-size: 1.3rem; }
@media (max-width: 960px) { .detalle { grid-template-columns: minmax(0, 1fr); } .lateral { position: static; } }

/* ---------------------------------------------------------------- galería con visor */
.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.galeria__item { margin: 0; position: relative; }
.galeria__item a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); cursor: zoom-in; }
.galeria__item:nth-child(3n+1) a { border-radius: var(--arco); }
.galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--curva); }
.galeria__item a:hover img { transform: scale(1.06); }
.galeria__item figcaption { margin-top: .5rem; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 600; color: var(--texto-c2); }
@media (max-width: 760px) { .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.visor { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 4rem 1rem; background: rgba(26,22,17,.94); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.visor.esta-abierto { opacity: 1; visibility: visible; transition-delay: 0s; }
.visor img { max-height: 80vh; width: auto; border-radius: var(--r-lg); box-shadow: var(--sombra); transform: scale(.96); transition: transform .45s var(--curva); }
.visor.esta-abierto img { transform: none; }
.visor p { margin: 1rem 0 0; color: #fff; text-align: center; font-family: var(--f-ui); font-weight: 600; }
.visor button { position: absolute; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font-size: 1.5rem; }
.visor button:hover { background: var(--oro-claro); color: var(--carbon); border-color: var(--oro-claro); }
.visor [data-visor="cerrar"] { top: 1rem; right: 1rem; }
.visor [data-visor="anterior"] { left: 1rem; top: 50%; translate: 0 -50%; }
.visor [data-visor="siguiente"] { right: 1rem; top: 50%; translate: 0 -50%; }
.visor button svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- otros tipos */
.otros-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.otro-tipo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); text-decoration: none; color: inherit; background: var(--hueso); border-radius: var(--r-xl); overflow: hidden; transition: transform .5s var(--curva), box-shadow .5s var(--curva); }
.otro-tipo:hover { transform: translateY(-5px); box-shadow: var(--sombra); }
.otro-tipo__foto { overflow: hidden; min-height: 14rem; }
.otro-tipo__foto img { width: 100%; height: 100%; object-fit: cover; }
.otro-tipo__cuerpo { padding: 1.5rem; }
.otro-tipo__cuerpo > span:first-child { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oro-hondo); }
.otro-tipo__cuerpo > span:first-child svg { width: 16px; height: 16px; }
.otro-tipo h3 { font-size: 1.5rem; margin: .3rem 0 .5rem; }
.otro-tipo p { font-size: .92rem; color: var(--texto-c2); }
@media (max-width: 960px) { .otros-tipos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .otro-tipo { grid-template-columns: minmax(0, 1fr); } .otro-tipo__foto { min-height: 0; aspect-ratio: 16 / 9; } }

/* ---------------------------------------------------------------- misión palabra a palabra */
.mision-seccion { text-align: left; }
.mision-seccion > .contenedor > .gorro { margin-bottom: 3.2rem; }   /* la comilla gigante sube .5em: sin este aire tapaba el gorro */
.mision { position: relative; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.7rem, 1.1rem + 2.3vw, 3.2rem); line-height: 1.22; letter-spacing: -.015em; max-width: 64rem; margin: 0 0 3rem; }
.mision__comilla { position: absolute; left: -.05em; top: -.5em; font-size: 3.5em; line-height: 1; color: var(--oro); opacity: .35; font-style: italic; }
.palabra-scroll { color: rgba(33,30,28,.2); transition: color .35s; }
.palabra-scroll.encendida { color: var(--tinta); }
.tono-oscuro .palabra-scroll, .tono-grafito .palabra-scroll { color: rgba(255,255,255,.2); }
.tono-oscuro .palabra-scroll.encendida, .tono-grafito .palabra-scroll.encendida { color: #fff; }
.vision { max-width: 46rem; margin-left: auto; padding: 1.8rem 2rem; border-left: 3px solid var(--oro); background: rgba(255,255,255,.5); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.tono-oscuro .vision { background: rgba(255,255,255,.04); }
.vision p { margin: 0; color: var(--texto-c2); font-size: 1.05rem; }
.tono-oscuro .vision p { color: var(--texto-o2); }

/* ---------------------------------------------------------------- pilares del descanso */
.pilares { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; counter-reset: pilar; }
.pilar { position: relative; padding: 2rem 1.6rem 1.8rem; background: var(--blanco); border-radius: var(--arco); text-align: center; border: 1px solid var(--linea-c); transition: transform .5s var(--curva), box-shadow .5s var(--curva); }
.pilar:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.pilar__num { display: block; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; color: var(--oro-hondo); margin: 1.2rem 0 1rem; }
.pilar__icono { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 1.1rem; border-radius: 50%; background: var(--oro-suave); color: var(--oro-hondo); }
.pilar__icono svg { width: 32px; height: 32px; }
.pilar h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.pilar p { font-size: .94rem; color: var(--texto-c2); margin: 0; }
@media (max-width: 1000px) { .pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pilares { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- foto enmarcada */
.foto-envoltorio { position: relative; }
.foto-marco { position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; border-radius: var(--arco); box-shadow: var(--sombra); }
.foto-marco img { width: 100%; height: 100%; max-width: none; object-fit: cover; transform: translateY(var(--parallax, 0px)) scale(1.1); }
.foto-marco__pie { position: absolute; left: 50%; bottom: 1rem; translate: -50% 0; padding: .3em .9em; border-radius: var(--r-full); background: rgba(26,22,17,.75); color: #fff; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------- itinerario (pasos) */
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; position: relative; }
.pasos::before { content: ''; position: absolute; left: 2rem; right: 2rem; top: 34px; height: 2px; background: linear-gradient(90deg, var(--oro-claro) calc(var(--avance-pasos, 0) * 100%), rgba(255,255,255,.14) 0); }
.paso { position: relative; }
.paso__icono { position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 1.2rem; border-radius: 50%; background: var(--piedra); color: var(--oro-luz); border: 1px solid var(--linea-o); transition: background-color .5s, color .5s; }
.paso.esta-encendido .paso__icono { background: var(--oro-claro); color: var(--carbon); }
.paso__icono svg { width: 30px; height: 30px; }
.paso h3 { font-size: 1.5rem; margin-bottom: .4rem; }
.paso p { color: var(--texto-o2); font-size: .95rem; margin: 0; }
@media (max-width: 960px) {
  .pasos { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .pasos::before { left: 33px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--oro-claro) calc(var(--avance-pasos, 0) * 100%), rgba(255,255,255,.14) 0); }
  .paso { padding-left: 90px; min-height: 68px; }
  .paso__icono { position: absolute; left: 0; top: 0; }
}

/* ---------------------------------------------------------------- guías */
.guias { display: grid; gap: .8rem; }
.guia { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem 1rem; padding: 1.3rem 1.5rem; background: var(--hueso); border-radius: var(--r-lg); text-decoration: none; color: inherit; transition: background-color .3s, transform .4s var(--curva); }
.guia:hover { background: #fff; transform: translateX(6px); }
.guia__cat { grid-column: 1; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oro-hondo); }
.guia strong { grid-column: 1; font-family: var(--f-display); font-size: 1.3rem; font-weight: 500; line-height: 1.25; }
.guia svg { grid-column: 2; grid-row: 1 / span 2; width: 24px; height: 24px; color: var(--oro-hondo); }

/* ---------------------------------------------------------------- red de aliados */
.aliados { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.aliados p { color: var(--texto-c2); }
.aliados__caja { padding: 2rem; background: var(--arena); border-radius: var(--r-xl); }
.aliados__caja .chips { margin-bottom: 1.4rem; }
.aliados__caja p { font-weight: 600; color: var(--tinta); }
@media (max-width: 900px) { .aliados { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- reservar */
.reservar { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: start; }
.reservar__lado { display: grid; gap: 1rem; }
.como-funciona { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.como-funciona li { display: flex; gap: .9rem; }
.como-funciona li > span { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--oro-claro); color: var(--carbon); }
.como-funciona svg { width: 20px; height: 20px; }
.como-funciona strong { font-family: var(--f-ui); display: block; }
.como-funciona p { margin: 0; font-size: .9rem; }
@media (max-width: 1000px) { .reservar { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- ubicación y mapa ilustrado */
.ubicacion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.ubicacion p { color: var(--texto-c2); }
.mapa-ilustrado { padding: 1.5rem; background: var(--hueso); border-radius: var(--r-xl); }
.mapa-ilustrado svg { width: 100%; height: auto; }
.mapa__mar { fill: #DCE5E4; }
.mapa__costa { fill: none; stroke: #9DB2B0; stroke-width: 2; }
.mapa__carretera { fill: none; stroke: var(--texto-c2); stroke-width: 2.5; stroke-dasharray: 8 7; }
.mapa__ruta-valle { fill: none; stroke: var(--oro-hondo); stroke-width: 2.5; stroke-dasharray: 4 6; }
.mapa__punto circle { fill: var(--tinta); }
.mapa__punto text { font-family: var(--f-ui); font-size: 15px; font-weight: 600; fill: var(--tinta); }
.mapa__punto--casa circle { fill: var(--oro); }
.mapa__punto--casa .mapa__halo { fill: rgba(158,114,54,.25); transform-origin: 198px 300px; animation: halo 2.4s ease-out infinite; }
.mapa__punto--casa text { font-size: 18px; font-weight: 700; }
.mapa__sub { font-size: 13px !important; font-weight: 500 !important; fill: var(--texto-c2) !important; }
.mapa__oceano { font-family: var(--f-display); font-style: italic; font-size: 22px; fill: #6F8886; }
@keyframes halo { 0% { scale: .6; opacity: 1; } 100% { scale: 1.6; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mapa__punto--casa .mapa__halo { animation: none; } }
@media (max-width: 900px) { .ubicacion { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- gracias */
.gracias__icono { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 1.5rem; border-radius: 50%; background: var(--oro-claro); color: var(--carbon); animation: gracias-entra .8s var(--curva-resorte) both; }
.gracias__icono svg { width: 42px; height: 42px; stroke-width: 2.4; }
@keyframes gracias-entra { from { scale: .4; opacity: 0; } }

/* ---------------------------------------------------------------- artículo */
.articulo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (max-width: 1000px) { .articulo { grid-template-columns: minmax(0, 1fr); } }
.prosa { font-size: 1.1rem; line-height: 1.78; max-width: 46rem; }
.prosa h2 { font-size: var(--t-xl); margin: 2.6rem 0 1rem; scroll-margin-top: calc(var(--cabecera-alto) + 1rem); }
.prosa h3 { font-size: var(--t-lg); margin: 2rem 0 .8rem; }
.prosa p, .prosa ul, .prosa ol { margin: 0 0 1.25rem; }
.prosa ul, .prosa ol { padding-left: 1.3rem; }
.prosa li { margin-bottom: .45rem; }
.prosa li::marker { color: var(--oro-hondo); }
.prosa a { color: var(--oro-hondo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prosa a:hover { color: var(--tinta); }
.prosa strong { color: var(--tinta); }
.prosa blockquote { margin: 2rem 0; padding: 1.5rem 1.8rem; background: var(--arena); border-left: 4px solid var(--oro); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.prosa blockquote p { font-family: var(--f-display); font-size: 1.35rem; line-height: 1.4; margin: 0; }
.prosa > p:first-child { font-size: 1.22rem; }
.legal h2 { font-size: var(--t-lg); }
.autor { display: flex; align-items: center; gap: 1.1rem; margin-top: 3rem; padding: 1.5rem; background: var(--arena); border-radius: var(--r-xl); max-width: 46rem; }
.autor img { width: 64px; height: auto; flex: none; }
.autor p { margin: 0; font-size: .92rem; color: var(--texto-c2); }
.autor strong { display: block; font-family: var(--f-ui); color: var(--tinta); }
.indice { padding: 1.5rem; background: var(--arena); border-radius: var(--r-xl); }
.indice h2 { font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .8rem; }
.indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.indice a { display: block; padding: .35rem .6rem; border-left: 2px solid var(--linea-c); font-size: .88rem; line-height: 1.35; color: var(--texto-c2); text-decoration: none; transition: color .2s, border-color .2s; }
.indice a:hover, .indice a.esta-activo { color: var(--tinta); border-color: var(--oro); }

/* ---------------------------------------------------------------- Airbnb como opción por defecto */
.reserva-rapida__alt { grid-column: 1 / -1; margin: -.2rem 0 0; font-size: .86rem; color: var(--texto-c2); text-align: right; }
.reserva-rapida__alt a, .llamada__alt a, .lateral__correo, .form-rr + .form__o a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.reserva-rapida__alt a { color: var(--oro-hondo); }
@media (max-width: 1100px) { .reserva-rapida__alt { text-align: center; } }
.llamada__alt { margin: 1.4rem 0 0; font-size: .95rem; color: var(--texto-o2); }
.llamada__alt a { color: var(--oro-luz); }
.lateral__airbnb { display: grid; gap: .5rem; margin-top: .4rem; }
.lateral__airbnb .btn { justify-content: space-between; }
.lateral__correo { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; font-family: var(--f-ui); font-size: .88rem; color: var(--texto-o2); text-decoration: none; }
.lateral__correo:hover { color: #fff; }
.lateral__correo svg { width: 16px; height: 16px; }
.form-rr > .form__o { grid-column: 1 / -1; display: flex; align-items: center; gap: .8rem; margin: -.2rem 0; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-c2); }
.form-rr > .form__o::before, .form-rr > .form__o::after { content: ''; flex: 1; height: 1px; background: var(--linea-c); }
.caja-form .caja-form__entrada { margin-bottom: .6rem; }
.caja-form .btn--fantasma { --btn-texto: var(--tinta); --btn-borde: var(--linea-c); }

.airbnb-grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.airbnb-grupo h3 { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: 1.35rem; margin-bottom: .9rem; }
.airbnb-grupo h3 svg { width: 24px; height: 24px; color: var(--oro-hondo); }
.airbnb-grupo h3 small { width: 100%; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--oro-hondo); }
.airbnb-grupo__lista { display: grid; gap: .6rem; }
.airbnb-unidad { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .55rem .8rem .55rem .55rem; background: var(--blanco); border: 1px solid var(--linea-c); border-radius: var(--r-lg); text-decoration: none; color: var(--tinta); transition: border-color .3s, box-shadow .3s, transform .4s var(--curva); }
.airbnb-unidad:hover { border-color: var(--oro); box-shadow: 0 16px 36px -24px rgba(26,22,17,.45); transform: translateY(-2px); }
.airbnb-unidad__foto { width: 64px; height: 64px; overflow: hidden; border-radius: var(--r-md); }
.airbnb-unidad__foto img { width: 100%; height: 100%; object-fit: cover; }
.airbnb-unidad__txt strong { display: block; font-family: var(--f-display); font-size: 1.1rem; font-weight: 500; line-height: 1.2; }
.airbnb-unidad__txt small { display: block; font-size: .8rem; color: var(--texto-c2); }
.airbnb-unidad__ir { display: inline-flex; align-items: center; gap: .35rem; padding: .45em .85em; border-radius: var(--r-full); background: var(--oro-boton); color: #fff; font-family: var(--f-ui); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.airbnb-unidad__ir svg { width: 14px; height: 14px; }
@media (max-width: 1000px) { .airbnb-grupos { grid-template-columns: minmax(0, 1fr); max-width: 36rem; margin-inline: auto; } }