/* Estepona Port Property Sales · portada «Marina» (25-10, ronda 2).
   Lujo de club náutico: blanco limpio y azul marino de base; su amarillo de sol (#FACA0B, de su logo) como la única
   gran superficie (la valoración). Titulares en mayúsculas romanas grabadas (Marcellus, OFL) que recuerdan las letras
   de su logo; texto en Instrument Sans (OFL). Líneas finas, esquinas rectas.
   Ronda 2 («más épica»): su puerto a pantalla completa con un zoom lento de cine (28 s, solo transform), su frase y una
   flecha para bajar encima; el cargador del sol se abre por el horizonte sobre la foto (momento firma). Lo demás, quieto. */

@font-face { font-family: 'Marcellus'; src: url('../fonts/marcellus-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans.woff2') format('woff2'); font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap; }

:root {
  --blanco: #FFFFFF;
  --marino: #0C2340;
  --marino-hover: #1A3B66;
  --sol: #FACA0B;
  --tinta: #0C2340;
  --linea: rgba(12, 35, 64, .14);
  --linea-media: rgba(12, 35, 64, .34);
  --linea-clara: rgba(255, 255, 255, .24);
  --niebla: #EDF1F5;
  --display: 'Marcellus', 'Optima', 'Candara', Georgia, serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --g: clamp(16px, 4.4vw, 64px);
  --max: 1312px;
  --barra: 64px;
  --escalon: 0px;
  --abajo: calc(32px + env(safe-area-inset-bottom));
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@media (min-width: 760px) { :root { --barra: 84px; --escalon: clamp(96px, 11vw, 168px); --abajo: clamp(40px, 7vh, 72px); } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--barra); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--blanco); color: var(--tinta); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--marino); outline-offset: 3px; }
.agencia :focus-visible, .pie :focus-visible { outline-color: var(--sol); }
.portada :focus-visible, .barra:not(.solida) :focus-visible { outline-color: #fff; }
.saltar { position: absolute; left: 12px; top: -80px; z-index: 200; padding: 14px 18px; background: var(--marino); color: #fff; font-weight: 600; }
.saltar:focus { top: 12px; }

/* ---------- Piezas comunes ---------- */
.titulo { font: 400 clamp(1.5rem, 1.05rem + 1.45vw, 2.3rem)/1.22 var(--display); letter-spacing: .1em; text-transform: uppercase; text-wrap: balance; }
.etiqueta { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font: 600 .72rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.motivo { width: 45px; height: 16px; flex: none; overflow: visible; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 0; font: 600 .76rem/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; white-space: nowrap;
  /* hover y cambio de cabecera: solo color de fondo y de borde, sin mover nada (excepción a «solo transform y opacity») */
  transition: background-color .6s var(--ease), border-color .45s var(--ease); }
.boton svg { width: 18px; height: 18px; flex: none; }
.boton--marino { background: var(--marino); color: #fff; }
.boton--marino:hover { background: var(--marino-hover); }
.enlace { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 .76rem/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.enlace span { padding-bottom: 5px; border-bottom: 1px solid var(--marino); }
.enlace svg { width: 18px; height: 18px; transition: transform .9s var(--ease); }
.enlace:hover svg { transform: translateX(4px); }

/* ---------- Cabecera: transparente sobre la foto, blanca al bajar (marina.js pone .solida) ---------- */
.barra { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--barra); padding: 0 var(--g); color: #fff;
  /* color del texto: de blanco (sobre la foto) a marino (sobre blanco); solo color, sin layout */
  transition: color .45s var(--ease); }
html:not(.js) .barra { position: absolute; }
.barra::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--blanco); border-bottom: 1px solid var(--linea); opacity: 0; transition: opacity .45s var(--ease); }
.barra.solida { color: var(--marino); }
.barra.solida::before { opacity: 1; }
.barra__logo { position: relative; display: block; flex: none; }
.barra__logo img { width: auto; height: 40px; transition: opacity .45s var(--ease); }
.barra__logo .logo-o { position: absolute; left: 0; top: 0; opacity: 0; }
.barra.solida .logo-o { opacity: 1; }
.barra.solida .logo-c { opacity: 0; }
.barra__der { display: flex; align-items: center; gap: clamp(12px, 2vw, 30px); }
.barra__tel, .barra__wa { display: none; align-items: center; gap: 10px; min-height: 44px; font: 500 .92rem/1 var(--sans); letter-spacing: .02em; }
.barra__tel svg, .barra__wa svg { width: 19px; height: 19px; flex: none; }
.barra__tel span, .barra__wa span { padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color .6s var(--ease); }
.barra__tel:hover span, .barra__wa:hover span { border-bottom-color: currentColor; }
.barra__valorar { display: none; }
.barra:not(.solida) .barra__valorar { background: transparent; border-color: rgba(255, 255, 255, .8); }
.barra:not(.solida) .barra__valorar:hover { background: rgba(255, 255, 255, .14); }
.idioma { display: flex; border: 1px solid rgba(255, 255, 255, .6); }
.idioma button { min-width: 44px; min-height: 44px; font: 600 .72rem/1 var(--sans); letter-spacing: .14em; }
.idioma button[aria-pressed="true"] { background: #fff; color: var(--marino); }
.barra.solida .idioma { border-color: var(--linea-media); }
.barra.solida .idioma button[aria-pressed="true"] { background: var(--marino); color: #fff; }
@media (min-width: 760px) {
  .barra__logo img { height: 48px; }
  .barra__tel, .barra__wa { display: inline-flex; }
  .barra__valorar { display: inline-flex; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .barra__tel span, .barra__wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .barra__tel, .barra__wa { min-width: 44px; justify-content: center; }
}

/* ---------- Portada: su puerto a pantalla completa ---------- */
.portada { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; isolation: isolate; background: var(--marino); color: #fff; }
/* La foto mide 1 px menos que la pantalla: Chrome no cuenta para el LCP una imagen que la tapa entera (la toma por fondo),
   y la foto tiene que ser el LCP. El recorte va aquí (y no en la sección) para que el zoom tampoco la haga taparla entera.
   Ese píxel queda bajo el degradado oscuro y no se ve. */
.portada__foto { position: absolute; left: 0; right: 0; top: 0; height: calc(100% - 1px); overflow: hidden; }
.portada__foto img, .portada__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.portada__foto img { transform-origin: 50% 40%; }
.portada__video { opacity: 0; transition: opacity 1.6s var(--ease); }
.portada__video.lista { opacity: 1; }
/* degradados suaves: arriba para leer la cabecera, abajo para leer la frase */
.portada::before, .portada::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.portada::before { top: 0; height: 200px; background: linear-gradient(rgba(12, 35, 64, .5), rgba(12, 35, 64, 0)); }
.portada::after { bottom: 0; height: 62%; background: linear-gradient(to top, rgba(12, 35, 64, .82) 0%, rgba(12, 35, 64, .5) 34%, rgba(12, 35, 64, 0) 100%); }
.portada__texto { position: absolute; z-index: 2; left: var(--g); right: var(--g); bottom: calc(var(--abajo) + 68px); }
.portada__titulo { max-width: 16em; font: 400 clamp(1.45rem, .95rem + 2.4vw, 2.8rem)/1.2 var(--display); letter-spacing: .07em; text-transform: uppercase; text-wrap: balance; }
.portada__bajar { position: absolute; z-index: 2; left: var(--g); bottom: var(--abajo); display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; color: #fff;
  /* hover: solo el fondo */
  transition: background-color .6s var(--ease); }
.portada__bajar:hover { background-color: rgba(255, 255, 255, .14); }
.portada__bajar svg { width: 20px; height: 20px; }
@media (min-width: 760px) {
  .portada__texto { right: calc(var(--g) + 96px); bottom: var(--abajo); }
  .portada__titulo { letter-spacing: .1em; }
  .portada__bajar { left: auto; right: var(--g); width: 56px; height: 56px; }
}
/* El cine: la foto se asienta despacio de 1,1 a 1 en 28 s, a la vez que se abre el horizonte del cargador */
@media (prefers-reduced-motion: no-preference) {
  .portada__foto img { animation: deriva 28s var(--ease) 1.7s both; }
  .sin-sol .portada__foto img, html:not(.js) .portada__foto img { animation-delay: 0s; }
}
@keyframes deriva { from { transform: scale(1.1); } to { transform: scale(1); } }

/* ---------- Buscador corto, justo debajo de la foto ---------- */
.buscar { border-bottom: 1px solid var(--linea); }
.buscar__marco { max-width: calc(var(--max) + 2 * var(--g)); margin: 0 auto; padding: 28px var(--g) 32px; display: grid; gap: 16px; }
.buscar__titulo { margin: 0; }
.buscador { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linea-media); }
.buscador__campo { position: relative; display: grid; align-content: center; gap: 6px; min-width: 0; min-height: 66px; padding: 10px 34px 10px 16px; cursor: pointer; }
.buscador__campo + .buscador__campo { border-left: 1px solid var(--linea); }
.buscador__campo::after { content: ''; position: absolute; right: 17px; top: 50%; width: 7px; height: 7px; margin-top: 2px; border-right: 1.5px solid var(--marino); border-bottom: 1.5px solid var(--marino); transform: translateY(-50%) rotate(45deg); pointer-events: none; }
.buscador__etq { font: 600 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.buscador select { width: 100%; min-width: 0; margin: 0; padding: 2px 0; border: 0; border-radius: 0; background: transparent; font: 500 1rem/1.3 var(--sans); text-overflow: ellipsis; -webkit-appearance: none; appearance: none; cursor: pointer; }
.buscador select:focus-visible { outline-offset: 6px; }
.buscador__ir { grid-column: 1 / -1; min-height: 56px; }
@media (min-width: 760px) {
  .buscador { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .buscador__campo { min-height: 76px; padding-left: 22px; }
  .buscador__ir { grid-column: auto; min-height: 76px; padding: 0 28px; }
}
@media (min-width: 1000px) {
  .buscar__marco { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: center; gap: 48px; padding-block: 40px; }
}

/* ---------- Sus casas: dos columnas escalonadas, fotos grandes y limpias ---------- */
.casas { max-width: calc(var(--max) + 2 * var(--g)); margin: 0 auto; padding: 72px var(--g) 88px; }
.casas__cab { display: grid; gap: 14px; margin-bottom: 40px; }
.casas__cab .etiqueta { margin-bottom: 4px; }
.casas__lead { max-width: 30em; font-size: 1.0625rem; text-wrap: pretty; }
.casas__todas { justify-self: start; }
.casas__lista { display: grid; gap: 56px; }
.casa { scroll-margin-top: calc(var(--barra) + 24px); }
.casa__foto { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--niebla); }
.casa__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 2.8s var(--ease); }
@media (hover: hover) { .casa__foto:hover img { transform: scale(1.035); } }
.casa__datos { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea-media); }
.casa__titulo { font: 600 .74rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.casa__ref { font: 500 .74rem/1.4 var(--sans); letter-spacing: .06em; white-space: nowrap; }
.casa__precio { grid-column: 1 / -1; font: 400 clamp(1.6rem, 1.25rem + 1vw, 2.1rem)/1.15 var(--sans); font-stretch: 92%; letter-spacing: .01em; font-variant-numeric: lining-nums tabular-nums; }
.casa__specs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; font-size: .97rem; }
.casa__specs li + li::before { content: ''; display: inline-block; width: 1px; height: .85em; margin: 0 14px; background: var(--linea-media); vertical-align: -1px; }
@media (min-width: 760px) {
  .casas__lista { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 6.5vw, 104px); row-gap: 88px; padding-bottom: var(--escalon); }
  /* columna derecha escalonada: baja y devuelve su margen, así las filas siguen alineadas */
  .casa:nth-child(even) { margin-top: var(--escalon); margin-bottom: calc(-1 * var(--escalon)); }
}
@media (min-width: 1000px) {
  .casas { padding-top: 128px; padding-bottom: 136px; }
  .casas__cab { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: end; margin-bottom: 80px; }
  .casas__cab .etiqueta, .casas__cab .titulo { grid-column: 1; }
  .casas__lead { grid-column: 2; grid-row: 2; }
  .casas__todas { grid-column: 2; grid-row: 3; }
}

/* ---------- ¿Vendes tu casa? La única gran superficie: su amarillo de sol ---------- */
.vender { position: relative; overflow: hidden; background: var(--sol); color: var(--marino); padding: 72px var(--g) 168px; }
.vender::after { content: ''; position: absolute; left: 0; right: 0; bottom: 48px; height: 1px; background: var(--marino); }
.vender__sol { position: absolute; right: calc(var(--g) + 4%); bottom: 48px; width: 150px; height: auto; aspect-ratio: 52 / 24; overflow: visible; color: var(--marino); pointer-events: none; }
.vender__marco { max-width: var(--max); margin: 0 auto; display: grid; gap: 40px; }
.vender__lead { max-width: 32em; margin-top: 20px; font-size: 1.0625rem; text-wrap: pretty; }
.vender__pasos { margin-top: 32px; border-top: 1px solid rgba(12, 35, 64, .4); }
.vender__pasos li { display: flex; align-items: baseline; gap: 18px; padding: 13px 0; border-bottom: 1px solid rgba(12, 35, 64, .4); font-weight: 500; }
.vender__n { font: 600 .78rem/1 var(--sans); letter-spacing: .14em; font-variant-numeric: lining-nums tabular-nums; }
.vform { border: 1px solid var(--marino); padding: 28px 20px 26px; }
@media (min-width: 1000px) {
  .vender { padding-block: 128px 256px; }
  .vender::after { bottom: 72px; }
  .vender__marco { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; align-items: center; }
  .vender__sol { right: calc(var(--g) + 14%); bottom: 72px; width: 300px; }
  .vform { padding: 48px 48px 44px; }
}

/* Formulario de valoración (valoracion-ui.js) */
.val { display: grid; gap: 22px; }
.val__progreso { font: 600 .7rem/1.2 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.val__paso { min-width: 0; margin: 0; padding: 0; border: 0; }
.val__frase { font: 400 clamp(1.3rem, 1rem + 1.1vw, 1.95rem)/1.6 var(--sans); overflow-wrap: anywhere; }
.campo { position: relative; display: inline-block; max-width: 100%; }
.campo__medida { position: absolute; left: 0; top: 0; visibility: hidden; white-space: pre; font: 600 1em/1.2 var(--sans); }
.val__frase select, .val__frase input { max-width: 100%; margin: 0; padding: 0 1em 3px 0; border: 0; border-bottom: 1.5px solid var(--marino); border-radius: 0; color: inherit; font: 600 1em/1.2 var(--sans); -webkit-appearance: none; appearance: none; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230C2340' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right .1em center / .42em auto; }
.val__frase input { width: 3.6em; padding-right: 0; background: none; cursor: text; }
.val__frase input::placeholder { color: rgba(12, 35, 64, .55); }
.val__frase option { color: var(--marino); background: #fff; font: 400 1rem var(--sans); }
/* foco de los huecos de la frase: fondo claro y raya gruesa, sin caja que pise el texto de al lado */
.val__frase select:focus-visible, .val__frase input:focus-visible { outline: none; background-color: rgba(255, 255, 255, .55); border-bottom-width: 3px; }
.val__resumen { font: 400 1.2rem/1.5 var(--sans); }
.val__datos { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
.val__campo { display: grid; gap: 8px; font: 600 .68rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.val__campo input { min-height: 50px; padding: 0 2px; border: 0; border-bottom: 1.5px solid var(--marino); border-radius: 0; background: transparent; font: 400 1.1rem var(--sans); letter-spacing: 0; text-transform: none; }
.val__aviso { margin-top: 14px; font-size: .86rem; line-height: 1.5; }
.val__error { font-weight: 600; }
.val__error:empty { display: none; }
.val__acciones { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.val__ir { flex: 1 1 200px; min-height: 58px; }
.val__atras { min-height: 44px; padding: 10px 0 6px; border-bottom: 1px solid currentColor; font: 600 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.val__resultado { display: grid; gap: 14px; }
.val__resultado:empty { display: none; }
.val__resultado:focus { outline: none; }
.val__etiqueta { font: 600 .7rem/1.2 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.val__rango { font: 400 clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem)/1.12 var(--sans); font-stretch: 92%; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }
.val__rango--texto { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); }
.val__agente { font: 500 1.15rem/1.45 var(--sans); }
.val__nota { font-size: .88rem; }
.val__resultado .val__acciones { margin-top: 10px; }
.val__resultado .pill { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 54px; padding: 0 24px; background: var(--marino); color: #fff; font: 600 .76rem/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; transition: background-color .6s var(--ease); }
.val__resultado .pill:hover { background: var(--marino-hover); }
.pill__arrow { width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
@media (min-width: 600px) { .val__datos { grid-template-columns: 1fr 1fr; } }

/* ---------- La agencia: azul marino y su texto ---------- */
.agencia { background: var(--marino); color: #fff; padding: 80px 0 24px; }
.agencia__marco { max-width: calc(var(--max) + 2 * var(--g)); margin: 0 auto; padding: 0 var(--g); display: grid; gap: 28px; }
.agencia .etiqueta .motivo { color: var(--sol); }
.agencia__texto p { max-width: 38em; font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty; }
.agencia__texto p + p { margin-top: 1.1em; }
.agencia__datos { display: grid; margin-top: 20px; border-top: 1px solid var(--linea-clara); }
.agencia__datos > div { padding: 22px 0; border-bottom: 1px solid var(--linea-clara); }
.agencia__datos dt { margin-bottom: 10px; font: 600 .68rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.agencia__datos dd { font-size: 1rem; line-height: 1.55; }
.enlace-claro { display: inline-block; padding: 8px 0 3px; border-bottom: 1px solid rgba(255, 255, 255, .6); }
.enlace-claro:hover { border-bottom-color: var(--sol); }
@media (min-width: 760px) {
  .agencia__datos { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--linea-clara); }
  .agencia__datos > div { padding: 26px 32px 28px 0; border-bottom: 0; }
  .agencia__datos > div + div { padding-left: 32px; border-left: 1px solid var(--linea-clara); }
}
@media (min-width: 1000px) {
  .agencia { padding-top: 128px; padding-bottom: 32px; }
  .agencia__marco { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 96px; row-gap: 72px; }
  .agencia__datos { grid-column: 1 / -1; margin-top: 0; }
}

/* ---------- Pie ---------- */
.pie { background: var(--marino); color: #fff; padding: 72px var(--g) 32px; }
.pie > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.pie__marca { display: grid; justify-items: start; padding-bottom: 48px; border-bottom: 1px solid var(--linea-clara); }
.pie__motivo { width: 112px; height: 40px; margin-bottom: 18px; color: var(--sol); }
.pie__nombre { font: 400 clamp(2.3rem, .9rem + 6.6vw, 6.6rem)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.pie__sub { margin-top: 14px; font: 600 clamp(.7rem, .6rem + .4vw, .95rem)/1 var(--sans); letter-spacing: .52em; text-transform: uppercase; }
.pie__fila { display: grid; gap: 28px; padding: 40px 0; }
.pie__fila p { line-height: 1.75; }
.pie__fila a { display: inline-block; min-height: 32px; padding: 3px 0; border-bottom: 1px solid transparent; }
.pie__fila a:hover { border-bottom-color: var(--sol); }
.pie__fila .pie__etq { margin-bottom: 8px; font: 600 .68rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.pie__abajo { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-top: 28px; border-top: 1px solid var(--linea-clara); font-size: .84rem; }
.pie__logo { width: auto; height: 36px; margin-right: auto; }
.pie__legal { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.pie__legal a { display: inline-block; min-height: 44px; padding: 13px 0; }
@media (min-width: 760px) {
  .pie { padding-top: 104px; }
  .pie__fila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 48px 0; }
}

/* ---------- Barra fija del móvil: Llamar · WhatsApp · Valorar mi casa (sale al dejar atrás la foto) ---------- */
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr 1.35fr; background: var(--blanco); border-top: 1px solid var(--linea-media); padding-bottom: env(safe-area-inset-bottom); transform: translateY(110%); transition: transform .7s var(--ease); }
.barra-movil.visible, .barra-movil:focus-within, html:not(.js) .barra-movil { transform: none; }
.barra-movil a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 8px; font: 600 .7rem/1.1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.barra-movil a + a { border-left: 1px solid var(--linea); }
.barra-movil svg { width: 18px; height: 18px; flex: none; }
.barra-movil__valorar { background: var(--marino); color: #fff; }
@media (max-width: 759px) { body { padding-bottom: calc(57px + env(safe-area-inset-bottom)); } }
@media (min-width: 760px) { .barra-movil { display: none; } }

/* ---------- Momento firma: se dibuja el horizonte, sube el sol de su logo y el horizonte se abre sobre la foto ----------
   2,8 s, una vez por sesión. Dos mitades blancas que se separan por la línea del horizonte (solo transform). */
.sol { display: none; }
.js .sol { position: fixed; inset: 0; z-index: 100; display: block;
  /* visibility solo al final, para que el velo deje de existir; no se anima */
  animation: sol-fin 0s linear 2.8s both; }
.js.sin-sol .sol { display: none; }
.sol__mitad { position: absolute; left: 0; right: 0; height: 50%; background: var(--blanco); }
.sol__mitad--arriba { top: 0; display: flex; align-items: flex-end; justify-content: center; animation: sol-abre-arriba 1.1s var(--ease) 1.7s both; }
.sol__mitad--abajo { bottom: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 30px; animation: sol-abre-abajo 1.1s var(--ease) 1.7s both; }
.sol__escena { position: relative; width: 176px; height: 88px; }
.sol__cielo { position: absolute; inset: 0; overflow: hidden; }
.sol__disco { position: absolute; left: 50%; bottom: -36px; width: 72px; height: 72px; margin-left: -36px; border-radius: 50%; background: var(--sol); animation: sol-sube 1.7s var(--ease) .2s both; }
.sol__rayos { position: absolute; left: 0; bottom: -88px; width: 176px; height: 176px; color: var(--sol); animation: sol-rayos 1.1s var(--ease) .8s both; }
.sol__horizonte { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--marino); animation: sol-linea 1.2s var(--ease) .05s both; }
.sol__logo { width: 220px; height: auto; animation: sol-logo 1s var(--ease) .7s both; }
@keyframes sol-sube { from { transform: translateY(72px); } to { transform: translateY(0); } }
@keyframes sol-rayos { from { opacity: 0; transform: rotate(-14deg) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes sol-linea { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sol-logo { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sol-abre-arriba { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes sol-abre-abajo { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes sol-fin { to { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .js .sol { display: none; }
  .casa__foto img, .enlace svg, .barra-movil { transition: none; }
}