/* Estepona Port · ronda 3 (25-10): tres portadas para elegir. Va después de marina.css; el resto de la página no cambia.
   Regla de nitidez: ninguna foto se pinta a más de la mitad de sus píxeles en CSS (una de 1200 px, a 600 px como mucho),
   salvo la del puerto de la A, que mide 2560 px. */

/* ===================== A · «Puerto en alta» ===================== */
.op-a .portada__foto img { object-position: 50% 42%; transform-origin: 50% 50%; }
/* Deriva muy lenta: un leve barrido de lado a lado, 40 s cada sentido, sin saltos (alternate) y sin pasar de 1,05 */
@media (prefers-reduced-motion: no-preference) {
  .op-a .portada__foto img { animation: deriva-a 40s ease-in-out 1.7s infinite alternate both; }
  .sin-sol .op-a .portada__foto img { animation-delay: 0s; }
}
@keyframes deriva-a { from { transform: scale(1.05) translateX(-1.6%); } to { transform: scale(1.05) translateX(1.6%); } }
.portada__credito { position: absolute; z-index: 2; right: var(--g); bottom: 12px; margin: 0; font: 500 .66rem/1.3 var(--sans); letter-spacing: .03em; color: rgba(255, 255, 255, .86); }
.portada__credito a { border-bottom: 1px solid rgba(255, 255, 255, .4); }
@media (min-width: 760px) { .portada__credito { bottom: 16px; } }

/* ===================== B · «Portada de revista» ===================== */
.revista { background: var(--blanco); color: var(--marino); padding: calc(var(--barra) + 28px) var(--g) 44px; }
.revista__marco { max-width: var(--max); margin: 0 auto; display: grid; gap: 34px; }
.revista__texto .etiqueta { margin-bottom: 20px; }
.revista__titulo { font: 400 clamp(1.75rem, 1.05rem + 3vw, 3.5rem)/1.12 var(--display); letter-spacing: .06em; text-transform: uppercase; text-wrap: balance; }
html[lang="es"] .revista__titulo { font-size: clamp(1.45rem, .9rem + 2.4vw, 2.75rem); }
.revista__sol { width: 150px; height: 54px; margin: 22px 0 18px; color: var(--marino); overflow: visible; }
.revista__dek { max-width: 24em; font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }
.revista__enlace { margin-top: 18px; }
.revista__enlace svg { transform: rotate(90deg); }
.revista__enlace:hover svg { transform: rotate(90deg) translateX(4px); }
.revista__fotos { position: relative; }
.revista__f { margin: 0; }
.revista__f img { width: 100%; height: 100%; object-fit: cover; background: var(--niebla); }
.revista__f--1 img { aspect-ratio: 4 / 3; }
.revista__f--2 img, .revista__f--3 img { aspect-ratio: 3 / 2; }
/* el marco blanco de la foto que monta encima de otra: un borde de papel, no una sombra */
.revista__f--2 img { outline: 8px solid var(--blanco); }
.revista__f figcaption { margin-top: 10px; font: 600 .66rem/1.35 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.revista__f figcaption span { display: block; }
.revista__precio { margin-top: 3px; font: 400 1rem/1.2 var(--sans); letter-spacing: .01em; text-transform: none; font-variant-numeric: lining-nums tabular-nums; }
.revista__f--1 figcaption { text-align: right; }
.revista__f--2 { position: relative; width: 52%; margin: -56px auto 0 0; }
.revista__f--3 { display: none; }
@media (min-width: 1000px) {
  .revista { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-bottom: 48px; }
  .revista__marco { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; width: 100%; }
  .revista__sol { width: 190px; height: 68px; margin: 30px 0 24px; }
  /* posiciones fijas: la 1 arriba a la derecha, la 2 monta sobre su esquina de abajo, la 3 debajo de su pie de foto */
  .revista__fotos { height: 640px; }
  .revista__f { position: absolute; }
  .revista__f--1 { top: 0; right: 0; width: min(520px, 74%); }
  .revista__f--2 { left: 0; top: 330px; width: min(330px, 46%); margin: 0; }
  .revista__f--3 { display: block; right: 3%; top: 462px; width: min(200px, 27%); }
}

/* ===================== C · «Horizonte» ===================== */
.horizonte { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: var(--marino); color: #fff; --linea-y: 50%; }
.horizonte__cielo { position: absolute; left: 0; right: 0; top: 0; height: var(--linea-y); overflow: hidden; }
.horizonte__titulo { position: absolute; left: var(--g); right: var(--g); top: calc(var(--barra) + 52px); max-width: 12em; font: 400 clamp(1.65rem, 1rem + 2.9vw, 3.4rem)/1.15 var(--display); letter-spacing: .08em; text-transform: uppercase; text-wrap: balance; }
html[lang="es"] .horizonte__titulo { font-size: clamp(1.4rem, .85rem + 2.4vw, 2.75rem); letter-spacing: .06em; }
.horizonte__sol { position: absolute; bottom: 0; left: 50%; width: 290px; margin-left: -145px; aspect-ratio: 52 / 24; color: var(--sol); }
.horizonte__sol svg { width: 100%; height: 100%; overflow: visible; }
/* Momento firma: el sol de su logo sube muy despacio sobre el horizonte (18 s, una vez) */
@media (prefers-reduced-motion: no-preference) {
  /* aquí una curva pareja (no la canónica, que hace casi toda la subida en 3 s): el sol sube despacio y se nota */
  .horizonte__sol { animation: sol-c 14s cubic-bezier(.45, .05, .25, 1) .3s both; }
}
@keyframes sol-c { from { transform: translateY(105%); } to { transform: translateY(0); } }
.horizonte__linea { position: absolute; left: 0; right: 0; top: var(--linea-y); height: 1px; background: rgba(255, 255, 255, .6); }
.cinta { position: absolute; left: 0; right: 0; top: calc(var(--linea-y) + 32px); overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.cinta:active { cursor: grabbing; }
.cinta__pista { display: flex; gap: 18px; width: max-content; padding: 0 var(--g); }
.cinta__casa { display: block; flex: none; width: 220px; color: #fff; }
.cinta__casa img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: rgba(255, 255, 255, .08); pointer-events: none; -webkit-user-drag: none; }
.cinta__precio { margin-top: 10px; font: 400 1.1rem/1.2 var(--sans); font-stretch: 92%; font-variant-numeric: lining-nums tabular-nums; }
.cinta__tipo { margin-top: 4px; font: 600 .64rem/1.35 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.horizonte .portada__bajar { border-color: rgba(255, 255, 255, .7); }
@media (min-width: 760px) {
  .horizonte { --linea-y: 52%; }
  .horizonte__titulo { top: auto; bottom: 48px; }
  .horizonte__sol { left: auto; right: calc(var(--g) + 5%); width: 440px; margin-left: 0; }
  .cinta__pista { gap: 24px; }
  .cinta__casa { width: 270px; }
}

/* ===================== Ronda 4: buscador dentro de la portada (A2 y D) ===================== */
/* Una barra blanca limpia abajo del todo de la foto (no cristal): «Property search» · zona · precio · «See 52 homes» */
.portada__busca { position: absolute; z-index: 3; left: var(--g); right: var(--g); bottom: calc(18px + env(safe-area-inset-bottom)); }
.buscador--portada { background: var(--blanco); color: var(--marino); border: 0; }
.buscador--portada .buscador__campo { min-height: 60px; }
.buscador--portada .buscador__ir { min-height: 52px; }
.buscador__titulo { display: none; }
.portada--busca .portada__texto { bottom: calc(18px + env(safe-area-inset-bottom) + 112px + 26px); }
.portada--busca .portada__credito { bottom: calc(3px + env(safe-area-inset-bottom)); font-size: .6rem; }
@media (min-width: 760px) {
  .portada__busca { bottom: 44px; }
  .buscador--portada { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; }
  .buscador__titulo { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0 26px; border-right: 1px solid var(--linea); font: 600 .7rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
  .buscador__titulo .motivo { width: 34px; height: 12px; }
  .buscador--portada .buscador__campo { min-height: 76px; }
  .buscador--portada .buscador__ir { min-height: 76px; }
  .portada--busca .portada__texto { bottom: calc(44px + 76px + 34px); right: var(--g); }
  .portada--busca .portada__credito { bottom: 14px; font-size: .64rem; }
}
@media (min-width: 760px) and (max-width: 999px) { .buscador__titulo { display: none; } .buscador--portada { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } }

/* ===================== D · «Estepona»: pase lento de fotos que se funden ===================== */
.pase__foto { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 2.2s ease-in-out; }
.pase__foto.activa { opacity: 1; }
.pase__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06) translateX(-1.3%); }
/* deriva muy lenta mientras se ve (6,5 s) y se funde (2,2 s): solo transform */
@media (prefers-reduced-motion: no-preference) {
  .pase__foto.deriva img { animation: deriva-d 9s linear both; }
}
@media (prefers-reduced-motion: reduce) { .pase__foto img { transform: none; } }
@keyframes deriva-d { from { transform: scale(1.06) translateX(-1.3%); } to { transform: scale(1.06) translateX(1.3%); } }
.pase .pase__foto--1 img { object-position: 50% 55%; }