/* Ferrari Estate · portada «Rosso» v3, modo cine (26-10; la v2 está en rosso-v2.css y la v1 en rosso-v1.css)
   Italiano y moderno: blanco cálido, casi negro y su rojo (#DE2B23) como gran superficie: la cabecera (con su marca en
   blanco, sin la caja) y la valoración. La portada: sus casas en pantalla ancha de cine, con su luz difuminada alrededor.
   Titulares en Red Hat Display (sans geométrica con carácter), texto en Archivo (grotesca neutra). Ambas OFL, en local.
   Retícula firme, esquinas rectas, sin sombras ni degradados. Un solo momento firma: la V de su logo trazada en línea. */

@font-face {
  font-family: 'Red Hat Display';
  src: url('../fonts/red-hat-display-var.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --papel: #F6F3EE;
  --tinta: #171514;
  --tinta-2: #48433F;            /* metadatos: 9:1 sobre el papel */
  --linea: rgba(23, 21, 20, .16);
  --rojo: #DE2B23;               /* el de su web; blanco encima da 4,69:1 */
  --sobre-rojo: #FFFFFF;
  --f-titulo: 'Red Hat Display', 'Helvetica Neue', Arial, sans-serif;
  --f-texto: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --margen: clamp(16px, 4.4vw, 64px);
  --cab: 64px;
}
@media (max-width: 699px) {
  :root { --cab: 56px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 16px/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: 500; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.vender :focus-visible { outline-color: #fff; }
.pie :focus-visible { outline-color: var(--papel); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
main > section { scroll-margin-top: var(--cab); }

/* ---------- Botones: rectos. Al pasar, el rojo entra de izquierda a derecha (solo transform). ---------- */
.boton {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  font: 500 15px/1 var(--f-texto);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.boton::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rojo);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1s var(--ease);
}
.boton:hover::before { transform: scaleX(1); }
.boton--tinta { background: var(--tinta); color: var(--papel); }
.boton--blanco { background: #fff; color: var(--tinta); }
.boton--blanco::before { background: var(--tinta); }
/* El texto pasa a blanco con el fondo de tinta: color en 0,6 s, en un botón pequeño (no mueve nada) */
.boton--blanco { transition: color .6s var(--ease); }
.boton--blanco:hover { color: #fff; }

.enlace {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font: 500 15px/1 var(--f-texto);
  text-decoration: none;
  white-space: nowrap;
}
.enlace span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 4px; }
.enlace svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 1s var(--ease); }
.enlace:hover svg { transform: translateX(4px); }

/* Etiqueta de sección con su marca en V, en rojo */
.etq {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font: 500 13px/1.2 var(--f-texto);
  letter-spacing: .02em;
}
.marca { width: 15px; height: 12px; fill: var(--rojo); flex: none; }
.t2 {
  font: 500 clamp(32px, 3.5vw, 54px)/1.04 var(--f-titulo);
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* ---------- 1. Cabecera: barra de su rojo y, encima, su marca en blanco (sacada de su logo, sin la caja roja) ---------- */
.cab {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--cab);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--margen);
  background: var(--rojo);       /* el rojo de su web y de la V oscura de su logo: el blanco encima da 4,69:1 */
  color: #fff;
}
.cab :focus-visible { outline-color: #fff; }
.cab__logo { display: block; flex: none; }
.cab__logo img { height: 50px; width: auto; }   /* la marca sale de su PNG a 4×: nítida también en retina */
.cab__acciones { display: flex; align-items: center; gap: clamp(4px, 1.6vw, 26px); }
.cab__accion {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  font: 500 15px/1 var(--f-texto);
  text-decoration: none;
}
.cab__accion svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cab__accion .cab__txt { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 3px; transition: background-size .8s var(--ease); }
.cab__accion:hover .cab__txt { background-size: 100% 1px; }
.cab__valorar { height: 44px; padding: 0 20px; font-size: 14px; }
.idioma { display: flex; margin-left: 2px; }
.idioma button {
  min-width: 34px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: 500 13px/1 var(--f-texto);
  letter-spacing: .04em;
  color: #fff;
  cursor: pointer;
}
.idioma button[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }

/* ---------- 2. Portada en modo cine: sus casas en pantalla ancha (2,39:1, la del cine) y nítidas, en una sala a oscuras.
   Alrededor, la luz de la misma foto ya difuminada (viene hecha en una imagen de 480 px: nada de animar filter), con una
   deriva lentísima. Sobre la foto no va nada escrito: debajo, como los créditos, la casa que se ve; y en la franja de
   abajo, el titular y el buscador. ---------- */
.portada {
  --bajo: 262px;                 /* lo que va debajo de la pantalla: créditos, titular y buscador */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--cab));
  padding: clamp(18px, 3vh, 40px) 0 clamp(26px, 4.4vh, 56px);
  background: #0E0C0B;
  color: #fff;
}
.portada__fondo { position: absolute; inset: -7%; z-index: -3; }
.portada__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2.4s cubic-bezier(.37, 0, .63, 1); }
.portada__bg:first-child, .portada__bg.activa, .portada__bg.saliendo { opacity: 1; }
.portada__bg.activa { z-index: 2; }
.portada__bg.saliendo { z-index: 1; }
.pasando .portada__bg:first-child:not(.activa):not(.saliendo) { opacity: 0; }
.js .portada__fondo { animation: deriva 28s ease-in-out infinite alternate; }
@keyframes deriva {
  from { transform: translate3d(-2%, -1.2%, 0) scale(1.02); }
  to { transform: translate3d(2%, 1.2%, 0) scale(1.09); }
}
/* La sala a oscuras: la luz de la foto asoma alrededor de la pantalla y se apaga hacia los bordes; abajo, un poco de su rojo */
.portada::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58% 44% at 0 100%, rgba(222, 43, 35, .24), rgba(222, 43, 35, 0) 72%),
    radial-gradient(110% 80% at 50% 38%, rgba(14, 12, 11, .42), rgba(14, 12, 11, .9) 80%),
    linear-gradient(rgba(14, 12, 11, .3), rgba(14, 12, 11, .3));
}
/* Su V, en línea blanca muy suave, detrás de la pantalla: asoma por arriba y por abajo */
.portada__v {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 42%;
  width: min(124vh, 1240px);
  height: auto;
  transform: translate(-50%, -50%);
  overflow: visible;
  fill: none;
  stroke: #fff;
  opacity: .1;
  pointer-events: none;
}
.portada__v path { stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* La pantalla: tan ancha como deja la altura de la ventana, para que debajo quepan el titular y el buscador */
.cine {
  width: min(calc(100% - 2 * var(--margen)), max(720px, calc((100svh - var(--cab) - var(--bajo)) * 2.39)));
  min-width: 0;
  container-type: inline-size;   /* el titular se mide con la pantalla: así cabe al lado del buscador */
}
.cine__pantalla { position: relative; overflow: hidden; aspect-ratio: 2.39 / 1; background: #000; }
/* El pase: la casa nueva se funde despacio sobre la anterior (2,4 s, con entrada y salida suaves) y cada foto se acerca
   lentísimo y sin parar mientras se ve y mientras se va: nada se detiene ni salta. Solo opacity y transform. */
.portada__foto { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 2.4s cubic-bezier(.37, 0, .63, 1); }
.portada__foto:first-child, .portada__foto.activa, .portada__foto.saliendo { opacity: 1; }
.portada__foto.activa { z-index: 2; }
.portada__foto.saliendo { z-index: 1; }
.pasando .portada__foto:first-child:not(.activa):not(.saliendo) { opacity: 0; }
.portada__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada__borrosa { transform: scale(1.08); }   /* debajo de la nítida: solo se ve si la nítida aún no ha llegado */
/* el acercamiento empieza cuando ya se ha pintado la primera (clase «vivo», la pone rosso.js) */
.js .portada.vivo .portada__foto.activa .portada__nitida,
.js .portada.vivo .portada__foto.saliendo .portada__nitida { transform: scale(1.06); transition: transform 10s linear; }

/* Bajo la pantalla, la línea de lo que dura cada casa, en su rojo */
.cine__linea { position: relative; height: 2px; overflow: hidden; background: rgba(255, 255, 255, .16); }
.cine__linea i { position: absolute; inset: 0; background: var(--rojo); transform: scaleX(0); transform-origin: 0 50%; }

/* Los créditos: la casa que se ve, en una línea */
.cine__creditos { display: flex; align-items: center; gap: 16px; padding-top: 16px; }
.cine__creditos .marca { width: 17px; height: 14px; }
.portada__pies { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; }
.portada__pies li { grid-area: 1 / 1; display: flex; align-items: baseline; gap: 6px 18px; min-width: 0; opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .8s cubic-bezier(.37, 0, .63, 1), transform 1.4s var(--ease); }
.portada__pies li.activa { opacity: 1; transform: none; transition-delay: .7s; }
.portada__n { font: 500 13px/1 var(--f-texto); letter-spacing: .08em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .8); }
.portada__tipo, .portada__precio { font: 500 clamp(17px, 1.3vw, 21px)/1.2 var(--f-titulo); letter-spacing: -.01em; }
.portada__zona { font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .84); }
.portada__zona::before { content: ''; display: inline-block; width: 22px; height: 1px; margin-right: 14px; vertical-align: middle; background: rgba(255, 255, 255, .5); }
.portada__precio { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* La franja de abajo: el titular a la izquierda y el buscador a la derecha */
.cine__banda { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; padding-top: clamp(24px, 3.6vh, 40px); }
.portada__h {
  max-width: 8.2em;
  font: 500 clamp(36px, 3.6vw, 62px)/.98 var(--f-titulo);
  font-size: clamp(34px, 3.9cqi, 62px);
  letter-spacing: -.034em;
  text-wrap: balance;
}

/* ---------- 3. Buscador, dentro de la portada: barra blanca por segmentos ---------- */
.busca {
  display: flex;
  align-items: stretch;
  max-width: 100%;
  min-height: 72px;
  background: #fff;
  color: var(--tinta);
}
.busca__campo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-width: 196px;
  padding: 12px 22px;
  border-right: 1px solid var(--linea);
}
.busca__etq { font: 500 12.5px/1 var(--f-texto); letter-spacing: .02em; color: var(--tinta-2); }
.busca__campo select,
.val select {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23171514' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat 100% 55% / 11px 8px;
  cursor: pointer;
}
.busca__campo select { width: 100%; padding: 2px 26px 2px 0; font: 500 18px/1.3 var(--f-texto); }
.busca__ir { height: auto; min-height: 72px; min-width: 196px; padding: 0 28px; justify-content: space-between; gap: 24px; font-size: 16px; }
.boton--rojo { background: var(--rojo); color: #fff; }
.boton--rojo::before { background: var(--tinta); }

/* ---------- 4. Sus casas: la primera en grande (foto y datos al lado); las demás, de tres en tres, y una casilla
   para verlas todas. Al pasar el ratón: la foto se acerca despacio y una línea fina de su rojo se dibuja sobre el pie. ---------- */
.casas { padding: clamp(72px, 8.5vw, 132px) var(--margen) clamp(80px, 9vw, 144px); }
.sec__cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(32px, 3.6vw, 52px);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--tinta);
}
.rejilla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(44px, 4.6vw, 76px) clamp(16px, 2.2vw, 32px);
}
.casa__a { display: block; height: 100%; text-decoration: none; }
.casa__foto { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #E4DED5; }
.casa__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 2.8s var(--ease); }
.casa__a:hover .casa__foto img { transform: scale(1.045); }
.casa__pie {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 20px;
  padding-top: 18px;
}
.casa__pie::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--rojo);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease);
}
.casa__a:hover .casa__pie::before, .casa__a:focus-visible .casa__pie::before { transform: scaleX(1); }
.casa__tipo, .casa__precio { font: 500 clamp(19px, 1.55vw, 24px)/1.15 var(--f-titulo); letter-spacing: -.012em; }
.casa__precio { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.casa__zona { font-size: 15px; line-height: 1.4; }
.casa__ref { align-self: center; font-size: 11.5px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); text-align: right; }
.casa__datos {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
  font-size: 14.5px;
  line-height: 1.4;
}
.casa__datos > span + span::before { content: ''; display: inline-block; width: 1px; height: 12px; margin: 0 12px; background: var(--tinta); opacity: .35; vertical-align: -1px; }

/* La destacada: foto grande a la izquierda y sus datos a la derecha, con un filete rojo encima */
.casa--destacada { grid-column: 1 / -1; }
.casa--destacada .casa__a { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(32px, 4.4vw, 72px); align-items: end; }
.casa--destacada .casa__foto { aspect-ratio: 16 / 10; }
.casa--destacada .casa__pie { grid-template-columns: minmax(0, 1fr); align-content: end; gap: 0; padding: 0 0 4px; }
.casa--destacada .casa__pie::before { position: static; width: 56px; height: 2px; margin-bottom: 26px; transform: none; }
.casa--destacada .casa__tipo { order: 1; font-size: clamp(30px, 2.9vw, 46px); line-height: 1.04; letter-spacing: -.026em; }
.casa--destacada .casa__zona { order: 2; margin-top: 10px; font-size: 17px; }
.casa--destacada .casa__precio { order: 3; margin-top: 26px; text-align: left; font-size: clamp(28px, 2.5vw, 40px); }
.casa--destacada .casa__datos { order: 4; margin-top: 18px; font-size: 15px; }
.casa--destacada .casa__ref { order: 5; margin-top: 14px; text-align: left; }
.casa__ver { order: 6; display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin-top: 26px; font: 500 15px/1 var(--f-texto); }
.casa__ver span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 5px; }
.casa__ver svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 1s var(--ease); }
.casa__a:hover .casa__ver svg { transform: translateX(5px); }

/* La casilla del final: «Ver las 18 casas», en tinta; al pasar, su rojo entra de izquierda a derecha */
.todas {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 3 / 2;
  padding: clamp(22px, 2.2vw, 32px);
  background: var(--tinta);
  color: var(--papel);
  text-decoration: none;
}
.todas::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--rojo); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease); }
.todas:hover::before, .todas:focus-visible::before { transform: scaleX(1); }
.todas__v { width: 30px; height: 24px; fill: var(--rojo); transition: fill .6s var(--ease); }
.todas:hover .todas__v, .todas:focus-visible .todas__v { fill: #fff; }
.todas__t { font: 500 clamp(24px, 2.1vw, 32px)/1.1 var(--f-titulo); letter-spacing: -.02em; max-width: 9em; }
.todas__f { position: absolute; right: clamp(22px, 2.2vw, 32px); bottom: clamp(22px, 2.2vw, 32px); width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform 1s var(--ease); }
.todas:hover .todas__f { transform: translateX(6px); }

/* ---------- 5. ¿Vendes tu casa? Su rojo como la gran superficie de la página ---------- */
.vender {
  background: var(--rojo);
  color: var(--sobre-rojo);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px clamp(32px, 6vw, 112px);
  align-items: center;
  padding: clamp(80px, 9vw, 144px) var(--margen);
}
.vender__arte { display: flex; justify-content: center; }
.firma { width: min(100%, 440px); height: auto; overflow: visible; }
.firma path {
  fill: none;
  stroke: #fff;
  stroke-width: .15;
  stroke-linejoin: miter;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
/* Momento firma, el único: la V de su logo se dibuja despacio al llegar a la valoración.
   Anima stroke-dashoffset (no es transform ni opacity): es un SVG de dos trazos, se repinta una zona pequeña y no
   mueve la maqueta. Curva más pareja que la canónica para que la línea avance a ritmo constante, sin arrancar de golpe. */
.firma.dibuja path { stroke-dashoffset: 0; transition: stroke-dashoffset 3.8s cubic-bezier(.45, .05, .25, 1); }
.firma.dibuja path + path { transition-delay: 1.4s; }
.firma.hecha path, html:not(.js) .firma path { stroke-dashoffset: 0; }

.etq--claro { color: #fff; }
.vender__h { font-size: clamp(40px, 4.6vw, 70px); }
.vender__entrada { margin-top: 18px; max-width: 34ch; font: 400 clamp(17px, 1.4vw, 20px)/1.5 var(--f-texto); }
.valoracion__slot { margin-top: clamp(32px, 3.4vw, 48px); padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .55); }
.val__progreso { font: 500 13px/1 var(--f-texto); letter-spacing: .02em; margin-bottom: 18px; }
.val__paso { border: 0; margin: 0; padding: 0; min-width: 0; }
.val__frase { font: 500 clamp(22px, 2vw, 30px)/1.75 var(--f-titulo); letter-spacing: -.01em; }
.campo { position: relative; display: inline-block; }
.campo__medida { position: absolute; visibility: hidden; white-space: nowrap; font: inherit; }
.val select,
.val input {
  max-width: 100%;
  border: 0;
  border-bottom: 1px solid #fff;
  border-radius: 0;
  background-color: transparent;
  color: #fff;
  font: inherit;
  padding: 0 2px 2px;
}
.val select {
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.4'/%3E%3C/svg%3E");
  background-position: 100% 58%;
}
.val option, .val optgroup { color: var(--tinta); background: #fff; }
.campo--m2 input { width: 3.4em; text-align: center; }
.val input::placeholder { color: #fff; opacity: .8; }
.val__resumen { font: 500 clamp(18px, 1.5vw, 22px)/1.45 var(--f-titulo); margin-bottom: 22px; max-width: 40ch; }
.val__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.val__campo { display: flex; flex-direction: column; gap: 8px; font: 500 13px/1 var(--f-texto); letter-spacing: .02em; }
.val__campo input { font: 400 18px/1.3 var(--f-texto); padding: 6px 2px; }
.val__aviso { margin-top: 18px; font-size: 14px; line-height: 1.5; max-width: 52ch; }
.val__error { min-height: 1.5em; margin-top: 14px; font: 600 15px/1.5 var(--f-texto); }
.val__error:empty { min-height: 0; margin-top: 0; }
.val__acciones { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; }
.val__ir { margin-left: auto; }
.val__atras {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 15px/1 var(--f-texto);
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  cursor: pointer;
}
.val__resultado:focus { outline: none; }
.val__etiqueta { font: 500 13px/1 var(--f-texto); letter-spacing: .02em; }
.val__rango { margin-top: 12px; font: 500 clamp(32px, 3.4vw, 50px)/1.1 var(--f-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.val__rango--texto { font-size: clamp(26px, 2.4vw, 34px); }
.val__agente { margin-top: 14px; font: 500 18px/1.45 var(--f-texto); }
.val__nota { margin-top: 6px; font-size: 14px; line-height: 1.5; max-width: 52ch; }
.val__resultado .pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 22px;
  background: #fff;
  color: var(--tinta);
  font: 500 15px/1 var(--f-texto);
  text-decoration: none;
}
.pill__arrow { width: 16px; height: 1px; background: currentColor; position: relative; }
.pill__arrow::after { content: ''; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.vender__pasos {
  list-style: none;
  margin: clamp(36px, 3.6vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  font-size: 15px;
  line-height: 1.4;
}
.vender__pasos li { display: flex; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .55); }
.vender__n { font: 500 15px/1.4 var(--f-titulo); }
.vender__pasos li span + span { text-wrap: balance; }

/* ---------- 6. La agencia: su texto de «Empresa» ---------- */
.agencia {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px clamp(32px, 6vw, 112px);
  padding: clamp(80px, 9.5vw, 152px) var(--margen) clamp(88px, 10vw, 160px);
}
.agencia__h { font-size: clamp(30px, 3vw, 46px); line-height: 1.08; max-width: 17ch; }
.agencia__texto { padding-top: 34px; }
.agencia__texto p { max-width: 58ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; }
.agencia__texto p + p { margin-top: 1em; }

/* ---------- Pie: contacto ---------- */
.pie { background: var(--tinta); color: var(--papel); padding: clamp(56px, 6vw, 88px) var(--margen) 28px; }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pie__arriba {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 40px clamp(40px, 7vw, 120px);
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(246, 243, 238, .2);
}
.pie__logo { height: 56px; width: auto; }
.pie__fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.pie__fila p { font-size: 15px; line-height: 1.6; }
.pie__fila a { display: inline-block; padding: 3px 0; }
.pie__fila .pie__etq { margin-bottom: 10px; font: 500 12.5px/1 var(--f-texto); letter-spacing: .02em; color: #B9B3AC; }
.pie__abajo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; font-size: 13px; color: #B9B3AC; }
.pie__legal { display: flex; gap: 20px; }
.pie__legal a { display: inline-flex; align-items: center; min-height: 32px; }

/* ---------- Apariciones: lentas, solo opacity y transform ---------- */
.js [data-entra] { transition: opacity 2s var(--ease), transform 2.2s var(--ease); }
.js [data-entra]:not(.ok) { opacity: 0; transform: translateY(26px); }
.rejilla .casa:nth-child(3n) { transition-delay: .14s; }
.rejilla .casa:nth-child(3n+1):not(:first-child) { transition-delay: .28s; }

/* ---------- Tableta ---------- */
@media (max-width: 1180px) {
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla .casa:nth-child(n) { transition-delay: 0s; }
  .pie__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Móvil: la foto nítida arriba sobre la difuminada; debajo, el titular, su pie y el buscador ---------- */
@media (max-width: 699px) {
  .cab__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cab__logo img { height: 40px; }
  .cab__acciones { gap: 2px; }
  .cab__accion { min-width: 40px; }
  .cab__valorar { height: 40px; padding: 0 13px; font-size: 13.5px; margin-left: 4px; }
  .idioma button { min-width: 28px; font-size: 12.5px; }
  .portada { display: block; min-height: 0; padding: 20px 0 32px; }
  .portada::before {
    background:
      radial-gradient(90% 34% at 0 100%, rgba(222, 43, 35, .28), rgba(222, 43, 35, 0) 72%),
      linear-gradient(180deg, rgba(14, 12, 11, .5), rgba(14, 12, 11, .8) 40%, rgba(14, 12, 11, .9));
  }
  .portada__v { top: 18%; width: 150vw; opacity: .1; }
  /* en el móvil la pantalla va de borde a borde, en 16:9 */
  .cine { width: 100%; }
  .cine__pantalla { aspect-ratio: 16 / 9; }
  .cine__creditos { align-items: flex-start; padding: 14px 16px 0; }
  .cine__creditos .marca { margin-top: 3px; }
  .portada__pies li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px 12px; }
  .portada__n { grid-row: 1; align-self: center; }
  .portada__tipo { grid-column: 2; grid-row: 1; }
  .portada__precio { grid-column: 3; grid-row: 1; margin: 0; }
  .portada__zona { grid-column: 2 / 4; grid-row: 2; font-size: 14.5px; }
  .portada__zona::before { display: none; }
  .portada__tipo, .portada__precio { font-size: 17.5px; }
  .cine__banda { gap: 22px; padding: 26px 16px 0; }
  .portada__h { max-width: none; font-size: clamp(36px, 10.6vw, 44px); line-height: 1; }
  .busca { flex-wrap: wrap; width: 100%; }
  .busca__campo { flex: 1 1 50%; min-width: 0; padding: 12px 14px; }
  .busca__campo + .busca__campo { border-right: 0; }
  .busca__campo select { font-size: 16.5px; }
  .busca__ir { flex: 1 1 100%; min-height: 56px; }
  .sec__cab { flex-direction: column; align-items: flex-start; }
  .rejilla { grid-template-columns: 1fr; gap: 52px; }
  .casa--destacada .casa__a { grid-template-columns: 1fr; gap: 0; }
  .casa--destacada .casa__foto { aspect-ratio: 3 / 2; margin-bottom: 22px; }
  .casa--destacada .casa__pie::before { margin-bottom: 20px; }
  .todas { aspect-ratio: auto; min-height: 168px; }
  .casa__datos > span + span::before { margin: 0 10px; }
  .vender { grid-template-columns: 1fr; gap: 36px; padding-top: 72px; padding-bottom: 80px; }
  .vender__arte { justify-content: flex-start; }
  .firma { width: 168px; }
  .firma path { stroke-width: .3; }
  .val__datos { grid-template-columns: 1fr; }
  .vender__pasos { grid-template-columns: 1fr; gap: 0; }
  .vender__pasos li { padding: 12px 0; }
  .agencia { grid-template-columns: 1fr; gap: 8px; }
  .agencia__texto { padding-top: 16px; }
  .pie__arriba { grid-template-columns: 1fr; gap: 36px; }
  .pie__fila { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 374px) {
  .cab__accion--correo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .portada__fondo { animation: none; }
  .portada__pies li, .casa__pie::before, .todas::before, .todas__f, .casa__ver svg { transition: none; }
  .js [data-entra]:not(.ok) { opacity: 1; transform: none; }
  .js [data-entra], .casa__foto img, .boton::before, .enlace svg { transition: none; }
  .firma path { stroke-dashoffset: 0; transition: none; }
}