/* Tokens del rediseño.
   Fondo crema y tinta casi negra, con el verde musgo y el barro del propio
   logotipo como acentos: la paleta sale de la marca en vez de importarse.
   La display es serif porque el rediseño va de titulares grandes y ligeros;
   Georgia está en todos los sistemas y ya es la tipografía del parte de visita,
   así que no hay que cargar ni licenciar nada. Si algún día se quiere una
   display de verdad, se sustituye aquí y sólo aquí. */
:root {
  --ink: #171c24;
  --ink-soft: #5b6270;
  --accent: #2f4a3c;
  --accent-dark: #22382d;
  --accent-tint: #e7ede9;
  --clay: #b5502f;
  --clay-tint: #f6e7e1;
  --paper: #faf6f0;
  --line: #e6ded2;
  --gradient: linear-gradient(135deg, #2f4a3c, #22382d);
  --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-title: 'Inter', var(--font-body);
  --radius: 14px;
  /* El margen lateral de lo que va a sangre: la barra de navegación y la
     portadilla. Se declara una vez porque su único cometido es que las dos
     empiecen en la misma vertical — la marca y el titular, alineados. Si se
     escribe dos veces, tarde o temprano se cambia una y no la otra. */
  --gutter: clamp(24px, 4.6vw, 120px);
}

/* Inter, sólo para el titular de portadilla. Va servida desde el propio
   dominio y no desde Google Fonts porque la CSP de _headers es
   default-src 'self': un enlace de fuera se bloquearía sin avisar.
   Es la variable, así que un único fichero cubre todos los pesos, y con
   font-display: swap el titular se lee en Georgia mientras llega. */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

/* Sin rebote en los extremos. Al llegar arriba del todo y seguir tirando, el
   sistema despegaba la página y dejaba ver la banda del navegador por encima
   de la portada; con overscroll-behavior la página se planta en su borde.
   Va en html y en body porque, según el navegador, el que manda sobre el
   desplazamiento de la ventana es uno u otro. */
html {
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}
body { overscroll-behavior-y: none; }

/* ---------- Transición entre páginas ----------
   Al pasar de una página a otra, la que se va se desvanece, asoma un instante
   el barro de la marca y la nueva sube a su sitio. Es el mismo gesto que hace
   el titular de portada, pero de página entera.

   Lo hace el navegador con view-transition: no hay que interceptar los clics
   ni cargar ninguna librería. Importa, y no poco: la alternativa habitual es
   un script que se traga la navegación y tapa la pantalla con un panel
   mientras carga la siguiente. Si ese script falla a medias, el visitante se
   queda mirando el panel sin salida. Aquí, si el navegador no sabe de esto
   —hoy Firefox— sencillamente navega como siempre, sin animación y sin daño.

   El color se ve porque ::view-transition es el lienzo que queda detrás de las
   dos instantáneas: la vieja se va antes de que entre la nueva, y en ese hueco
   se asoma el fondo. */
@view-transition { navigation: auto; }

/* La barra se transiciona aparte del contenido. Sin esto entra en la misma
   instantánea que la página: se funde y se mueve con ella, y como está fija
   arriba, al cambiar de página parecía despegarse un instante. Con nombre
   propio se queda quieta en su sitio mientras por debajo cambia el contenido,
   que es lo que el ojo espera de una barra fija. */
.nav { view-transition-name: barra; }

/* Un fundido y nada más. Antes el color de marca asomaba entre una página y
   otra —la saliente se iba antes de que entrara la nueva y por el hueco se
   veía el barro—, y ese destello naranja en mitad del cambio era justo lo que
   resultaba raro. Ahora las dos se solapan: no hay hueco, no hay destello. */
::view-transition-old(root) {
  animation: pagina-sale 0.22s ease both;
}
::view-transition-new(root) {
  animation: pagina-entra 0.3s ease both;
}
@keyframes pagina-sale { to { opacity: 0; } }
/* Sólo se funde. Antes la página entrante subía catorce píxeles hasta su
   sitio y parecía que el navegador daba un tirón hacia arriba al cambiar de
   página; el desplazamiento se ha quitado y queda el fundido con el color de
   marca asomando entre una y otra. */
@keyframes pagina-entra { from { opacity: 0; } }

/* El cuerpo de texto también crece con la ventana. De aquí hereda casi todo
   el contenido —párrafos, listas, celdas—, así que subir esta línea sube la
   lectura de todas las páginas de una vez, sin ir componente por componente. */
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(17px, 1.08vw, 21px);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Titulares grandes, ligeros y en pocas palabras por línea: el peso lo lleva
   el tamaño, no la negrita. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 0.5em;
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.015em;
}
h3, h4 { line-height: 1.25; }

p { margin: 0 0 1em; color: var(--ink-soft); }

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.section__inner, .nav__inner, .footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Nav
   Tres zonas y no una fila repartida: marca a la izquierda, enlaces centrados
   y acciones a la derecha. Con las columnas laterales a 1fr, el bloque de
   enlaces queda centrado respecto a la página y no respecto al hueco que le
   dejan los vecinos — si mañana la marca crece o se añade un botón, los
   enlaces siguen en el eje. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250,246,240,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .28s ease;
}
/* Al bajar, la barra se retira hacia arriba; al subir, vuelve. Se va con el
   desplazamiento y no con una altura concreta, así que en cualquier página
   deja la lectura limpia en cuanto el visitante avanza.
   pointer-events: none es necesario, no cosmético: sin él, los enlaces
   invisibles siguen ahí arriba y se pulsan sin querer. */
.nav--oculta {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
/* La barra es lo único que se sale de los 1120 px del resto de la página: va
   de borde a borde, con márgenes proporcionales al ancho de la ventana. Así
   la marca se apoya en el filo izquierdo y las acciones en el derecho, y los
   enlaces del centro quedan sueltos en medio, con aire a los dos lados. Ceñida
   al ancho del contenido, los tres grupos se apelotonaban en el medio y el
   hueco quedaba fuera, que es justo al revés de lo que se busca. */
.nav__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  max-width: none;
  /* Más aire por arriba que por abajo: la barra flota sobre la fotografía y,
     pegada al filo, parecía que se le había olvidado el margen. Desigual a
     propósito — óptimamente centrada, no matemáticamente. */
  padding-top: clamp(20px, 1.75vw, 40px);
  padding-bottom: clamp(14px, 1.15vw, 26px);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.nav__links { justify-self: center; }

/* Los enlaces, centrados respecto a la página y no respecto al hueco que le
   dejan sus vecinos. Con la rejilla sola no salía: una columna 1fr no encoge
   por debajo de su contenido, y el grupo de acciones —dos botones y el
   idioma— es bastante más ancho que la marca, así que se llevaba el reparto
   por delante y empujaba el centro casi 150 px a la izquierda.

   Sacándolos del flujo se anclan al centro real. El precio es que ya no
   apartan a nadie, así que hay que asegurarse de que quepan: el grupo ancho
   mide unos 362 px y tiene que caber entre el margen y el borde de los
   enlaces, que empieza en el centro menos 225 px. Eso pide unos 1350 px de
   ventana. Por debajo se deja la rejilla: los enlaces quedan algo escorados,
   pero nada se monta encima de nada. */
@media (min-width: 1360px) {
  .nav__links {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }
}
.nav__actions {
  /* La columna se dice a mano. Cuando los enlaces se centran en absoluto
     dejan su casilla vacía, y el reparto automático metía las acciones en el
     medio —justo debajo de los enlaces— en vez de mandarlas al final. */
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Los dos botones son un par, así que se dibujan como un par: mismo ancho,
   mismo alto y el contenido centrado dentro. Sin el ancho mínimo cada uno
   mediría lo que midiera su texto y quedarían desparejos por unos pocos
   píxeles, que es peor que si fueran claramente distintos. */
/* Los dos botones siguen midiendo lo mismo entre sí, pero ceñidos: el ancho
   mínimo baja y el relleno lateral con él, así que dejan de parecer dos
   pastillas infladas y liberan sitio a la derecha. */
.nav__actions .btn {
  /* El ancho mínimo tiene que quedar por encima del natural del botón más
     ancho; si no, deja de mandar y los dos vuelven a medir lo que mida su
     texto, desparejos por tres píxeles. Estrechar más ya no depende del
     relleno —está en su tope— sino de quitar el icono o acortar la palabra. */
  min-width: clamp(112px, 8.72vw, 172px);
  justify-content: center;
  font-size: clamp(16px, 1.02vw, 26px);
  padding: clamp(10px, 0.66vw, 16px) clamp(11px, 0.75vw, 19px);
  gap: clamp(7px, 0.48vw, 11px);
}
.nav__actions .btn svg {
  width: clamp(15px, 0.98vw, 26px);
  height: clamp(15px, 0.98vw, 26px);
}

/* ---------- La barra sobre la fotografía ----------
   En las páginas con portada fotográfica la imagen sube hasta el borde
   superior y la barra flota encima. Va fija y no pegajosa porque tiene que
   salir del flujo para que la foto ocupe también su franja; el hueco lo
   devuelve el relleno de arriba de .cover--photo.

   No cambia nunca: ni al bajar ni al volver a subir. Antes se volvía crema en
   cuanto la portada dejaba de verse, y eso se ha quitado a propósito. A
   cambio, más abajo los enlaces blancos quedan sobre fondo claro, y lo único
   que los sostiene es el velo oscuro de aquí abajo. Por eso el velo no es un
   adorno y no debe quitarse mientras la barra sea transparente. */
/* Cristal esmerilado. El desenfoque por sí solo no resuelve nada: emborrona
   lo que pasa por debajo, pero no lo oscurece, y el texto blanco sobre crema
   seguiría sin leerse. Quien da el contraste es el tinte, y hace falta subido
   El cristal no es parejo: arriba tiene cuerpo y hacia abajo se disuelve, de
   modo que la barra no termina en un canto sino que se deshace sobre la
   fotografía. El degradado no es libre, lo manda el contraste: la franja donde
   caen los enlaces —del 25 % al 60 % de la altura— se mantiene por encima de
   0,78 de tinte, y sólo por debajo del texto se abre hasta desaparecer. Bajar
   el tinte en la zona del texto para que se transparente más se ve bonito en
   una captura y deja los enlaces ilegibles en cuanto pasa por detrás una
   sección clara.

   El desenfoque se va con el tinte gracias a la máscara. Sin ella, la barra se
   destiñe pero el desenfoque sigue hasta el último píxel y aparece un escalón
   nítido justo donde acaba: se ve el corte aunque no se vea el color. */
.nav--over {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
}
/* El cristal se prolonga por debajo de la barra. Encerrado en su altura, el
   desenfoque tenía unos cuarenta píxeles para pasar de todo a nada, y ese
   descenso tan corto se ve como un canto: no un color que termina, sino un
   trozo de foto borroso pegado a otro nítido. Sobre mar y cielo no se nota
   —no hay detalle que delate el corte— pero sobre el arbolado de la portada
   de Agencia salta a la vista. La regla es la misma en todas las páginas; lo
   que cambia es lo que hay detrás.
   Con 64 px de más, la caída tiene el doble de recorrido y se deshace antes
   de llegar a ningún borde. La franja del texto sigue protegida: cae en el
   19-39 % de esta caja más alta, donde el tinte no baja de 0,82. */
.nav--over::before {
  content: '';
  position: absolute;
  inset: 0 0 -64px 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(23, 28, 36, 0.94) 0%,
    rgba(23, 28, 36, 0.88) 30%,
    rgba(23, 28, 36, 0.80) 42%,
    rgba(23, 28, 36, 0.42) 62%,
    rgba(23, 28, 36, 0.16) 80%,
    rgba(23, 28, 36, 0) 100%
  );
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0,0,0,0.62) 65%, rgba(0,0,0,0.28) 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, rgba(0,0,0,0.62) 65%, rgba(0,0,0,0.28) 82%, transparent 100%);
}
.nav--over .brand,
.nav--over .nav__links a,
.nav--over .lang__btn { color: #fff; }
/* La página actual se marca sólo con el peso y el blanco entero, sin ninguna
   raya. El subrayado que había aquí se dibujaba con box-shadow y, según el
   navegador, no siempre salía como una raya limpia debajo: en algunos
   aparecía además el canto izquierdo de la caja, y quedaba una escuadra
   colgando delante de la palabra. Un indicador que se dibuja distinto en cada
   navegador no compensa: el contraste de peso ya se ve. */
.nav--over .nav__links a { opacity: 0.78; }
.nav--over .nav__links a:hover { color: #fff; opacity: 1; }
.nav--over .nav__links a[aria-current='page'] {
  color: #fff;
  opacity: 1;
  font-weight: 650;
}
.nav--over .btn--outline {
  color: #fff;
  border-color: rgba(255,255,255,0.45);
}
.nav--over .btn--outline:hover {
  background: rgba(255,255,255,0.14);
  border-color: #fff;
}
/* Ya no hace falta prolongar nada por debajo: el propio cristal se disuelve
   dentro de su altura, así que no hay canto que disimular. */

/* ---------- Selector de idioma ----------
   Es un <details>: se abre con Enter, se cierra con Escape y no necesita
   guion. El triángulo que Safari y Chrome dibujan por su cuenta sobra. */
.lang { position: relative; }
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  font-size: clamp(16px, 1.02vw, 26px);
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.lang__btn::-webkit-details-marker { display: none; }
.lang__btn svg { transition: transform .18s ease; }
.lang[open] .lang__btn svg { transform: rotate(180deg); }
.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(23,28,36,0.14);
  z-index: 2;
}
/* El idioma activo es un <button> y no un <span>: se alcanza con el tabulador,
   se pulsa con Enter y cierra el menú. Hay que quitarle el aspecto de botón
   del sistema, pero eso es más barato que renunciar al teclado. */
.lang__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  color: var(--ink);
  background: none;
}
/* En la barra sólo va el código de dos letras, que ocupa un tercio de
   "Español". El nombre completo se queda dentro del menú, donde sí hay sitio
   y donde hace falta para saber qué se elige. El código va en versalitas de
   ancho fijo para que ES y EN ocupen lo mismo y la lista no baile. */
.lang__code {
  display: inline-block;
  min-width: 2.1em;
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.lang__opt { justify-content: flex-start; }
.lang__opt--soon em { margin-left: auto; }
.lang__opt--on { font-weight: 600; background: var(--accent-tint); cursor: pointer; }
.lang__opt--on .lang__code { color: var(--accent); }
.lang__opt--on:hover { background: #dbe5df; }
/* Mientras no existan las páginas en inglés, la opción se ve pero no se pulsa:
   un enlace a una ruta que no existe es peor que un aviso. */
.lang__opt--soon { color: var(--ink-soft); cursor: default; }
.lang__opt--soon em {
  font-style: normal;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clay);
  background: var(--clay-tint);
  padding: 2px 6px;
  border-radius: 999px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
}
/* El logotipo es la palabra: "Rpr" en la display y los dos edificios haciendo
   de "o". Por eso el dibujo va redondo y a la altura de la equis, no en un
   cuadrado al lado — un símbolo junto a un nombre son dos cosas; esto es una.
   El texto sigue siendo texto: se selecciona, se lee y se traduce. */
/* En versales el ajuste cambia: el apretado que le iba a "Rpr" junta las
   mayúsculas hasta tocarse, así que se afloja. Y el disco deja de hacer de
   "o" de caja baja para hacer de "O", que es más alta: crece hasta la altura
   de mayúscula y casi no necesita el empujón hacia la línea base. */
.brand {
  font-family: var(--font-display);
  font-size: clamp(27px, 1.85vw, 48px);
  font-weight: 400;
  letter-spacing: 0.005em;
  gap: 1px;
  line-height: 1;
}
.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.74em;
  height: 0.74em;
  border-radius: 50%;
  background: var(--accent-tint);
  flex-shrink: 0;
  /* Se apoya en la línea base: una "O" tampoco flota. */
  transform: translateY(0.015em);
  overflow: hidden;
}
/* svg por el dibujo antiguo en línea, img por el compartido: la marca dejó
   de estar pegada en cada página y ahora entra como fichero. */
.brand__mark svg,
.brand__mark img { width: 116%; height: 116%; }
/* En el pie, sobre fondo oscuro, el disco se aclara para que las ventanas
   sigan leyéndose. */
.footer .brand__mark { background: #f7f5f1; }
/* La tipografía de la barra crece con la ventana en vez de quedarse clavada.
   En un monitor ancho, 16 px fijos se veían diminutos contra una fotografía a
   pantalla completa; en un portátil, el tamaño grande no cabría. Con vw, cada
   pantalla recibe el cuerpo que le corresponde. Los topes de la horquilla no
   son decorativos: el de abajo mantiene legible el móvil y el de arriba evita
   que en un televisor la barra se coma la portada. */
/* El cursor de texto no pinta nada en una barra de navegación: en los huecos
   entre enlaces aparecía la barra vertical del cursor y parecía un separador
   dibujado a propósito. */
.nav__inner { cursor: default; }
.nav__links {
  display: flex;
  gap: clamp(22px, 1.25vw, 34px);
  font-size: clamp(18.5px, 1.2vw, 30px);
  font-weight: 500;
}
.nav__links a { color: var(--ink-soft); transition: color .15s; }
.nav__links a:hover { color: var(--accent); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover { opacity: 0.92; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { background: #fff; border-color: var(--ink); opacity: 1; }
/* El barro de la marca para la acción destacada de la barra. Es el único botón
   naranja de la página: si hubiera dos, ninguno destacaría. */
.btn--clay { background: var(--clay); color: #fff; }
.btn--clay:hover { background: #9d4428; opacity: 1; }
.btn--small { padding: 9px 16px; font-size: 13px; }
.hero__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Tarjeta flotante que monta sobre el borde inferior del hero. */
.hero__case {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: -64px auto 0;
  padding: 0 24px;
}

/* Sections */
.section { padding: 72px 0; }
/* Al saltar a un ancla, el navegador deja el destino pegado al borde de
   arriba — justo debajo de la barra fija, que se lo come. Este margen es
   sólo para el desplazamiento: no ocupa sitio ni mueve nada en la página. */
[id] { scroll-margin-top: 112px; }
.section--tint { background: #fff; }
.section h2 {
  font-size: clamp(30px, 5vw, 48px);
  max-width: 16ch;
}
.section__subtitle {
  color: var(--ink-soft);
  font-size: clamp(18px, 1.28vw, 25px);
  max-width: 56ch;
  margin: 0 0 48px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 4px 14px rgba(17,23,44,0.04);
}
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { font-size: 14.5px; margin-bottom: 16px; }

/* El disco de fondo. La marca va en ::after y no en un degradado dentro de
   este: dos degradados cruzados dibujan un aspa, no un visto. */
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-tint);
}
/* El visto: un rectángulo sin dos de sus lados, girado 45°. */
.check-list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 4px;
  height: 8px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}/* Experiencia */
/* La trayectoria vive dentro de "Nuestro Enfoque": es la prueba de lo que ese
   bloque promete, y como sección aparte obligaba a leer dos veces lo mismo. Va
   separada por una línea para que se vea que es otra cosa. */
.experiencia {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 56px;
  align-items: center;
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

/* Footer */
.footer { background: var(--ink); color: #c7cbdb; padding: 56px 0 0; }
/* El pie usa todo el ancho, con los mismos márgenes que la barra de arriba:
   las dos son de borde a borde y arrancan en la misma vertical.

   Tres columnas de enlaces y, tras una línea vertical, una barra con lo que
   no es navegación —avisos legales e idioma—. La línea no es adorno: separa
   "sitios a los que ir" de "cosas que saber", y sin ella la cuarta columna se
   leería como una más de la lista. */
.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr 0.8fr auto;
  gap: clamp(24px, 2.8vw, 60px);
  max-width: none;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-bottom: 48px;
}

.footer__rail {
  display: grid;
  gap: 34px;
  align-content: start;
  padding-left: clamp(28px, 3.4vw, 72px);
  border-left: 1px solid rgba(199,203,219,0.22);
  min-width: 210px;
}
.footer__idioma { margin: 0; color: #c7cbdb; font-size: 14px; }
.footer__idioma span { color: #79809b; }
.brand--footer { color: #fff; margin-bottom: 10px; }
.footer__brand p { color: #9199b3; font-size: 13.5px; margin-top: 10px; }
.footer__col h4 {
  color: #fff;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  margin-bottom: 18px;
}
/* Los dos enlaces de la columna de marca se apilan igual que los de las
   demás. Sin esto quedaban en línea, uno detrás de otro, y se leían como una
   sola frase: «Nosotros Contacto». */
.footer__col a, .footer__contact, .footer__brand > a:not(.brand--footer) {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #9199b3;
  margin-bottom: 10px;
}
.footer__col a:hover { color: #fff; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 18px 24px;
  text-align: center;
  font-size: 12.5px;
  color: #6b7280;
}

/* Cabecera de página interior
   ---------------------------------------------------------------------------
   No es el hero de la home: aquí el visitante ya ha decidido a qué viene. */
.page-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 48px;
}

/* El enlace de la sección en la que ya estás no debería parecer un sitio al que
   ir. */
.nav__links a[aria-current='page'] { color: var(--accent); font-weight: 600; }

/* Inmuebles
   ---------------------------------------------------------------------------
   La foto manda: es lo que decide si alguien sigue leyendo. Por eso ocupa la
   mitad de la tarjeta, va en 4:3 fijo — el alto no puede depender de cómo
   fotografiara cada piso el agente, o la rejilla queda como una sierra — y el
   precio es lo primero que se lee debajo. */
.props {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.prop {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(17,23,44,0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.prop:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(17,23,44,0.10); }
.prop[hidden] { display: none; }

.prop__media { position: relative; background: var(--paper); }
/* El 4:3 va en la imagen y no en el contenedor: con `height: 100%` dentro de
   una caja de alto automático gana la proporción propia del fichero, y las
   fotos verticales — la mitad de las que sube un agente con el móvil — hacían
   una tarjeta 200px más alta que las demás. */
.prop__media img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.prop__media--empty {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  color: #98a0b5; font-size: 13px;
}
/* Sobre la foto van tres cosas y no más: qué operación es, cuántas fotos hay y
   la letra energética, que es obligatoria en el anuncio. */
.prop__tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(17,23,44,0.82); color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  padding: 5px 10px; border-radius: 999px;
}
.prop__count {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(17,23,44,0.72); color: #fff;
  font-size: 11.5px; padding: 4px 9px; border-radius: 999px;
}
.prop__cee {
  position: absolute; top: 12px; right: 12px;
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  background: #6b7280;
}
/* La escala de colores del certificado es la oficial, de verde a rojo. */
.prop__cee--a { background: #1f8a3b; }
.prop__cee--b { background: #4fa62a; }
.prop__cee--c { background: #a5c11d; }
.prop__cee--d { background: #efc411; }
.prop__cee--e { background: #e59a12; }
.prop__cee--f { background: #dd6f18; }
.prop__cee--g { background: #cc2b1e; }

.prop__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.prop__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prop__price { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0; }
.prop__perm2 { font-size: 12.5px; color: #6b7280; margin: 0; }
.prop__title { font-size: 16px; margin: 8px 0 2px; }
.prop__place { font-size: 13.5px; color: #6b7280; margin: 0 0 14px; }

.prop__specs, .prop__extras { list-style: none; display: flex; flex-wrap: wrap; padding: 0; }
.prop__specs {
  gap: 14px; margin: 0 0 14px;
  font-size: 13.5px; color: #4b5266;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.prop__extras { gap: 6px; margin: 0 0 16px; }
.prop__extras li {
  font-size: 12px; color: var(--accent);
  background: var(--accent-tint); border-radius: 6px; padding: 3px 8px;
}
.prop__more {
  margin-top: auto; width: 100%;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink); cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.prop__more:hover { background: var(--paper); border-color: #cfd4e2; }

.props__filters { display: flex; justify-content: center; gap: 8px; margin: -24px 0 32px; flex-wrap: wrap; }
/* Un `display` de autor gana al `display: none` que el navegador aplica al
   atributo hidden, así que sin esta línea los filtros se ven siempre — y se
   veían, sin funcionar, porque el script sólo les engancha el clic cuando de
   verdad hay algo que filtrar. Lo mismo para cualquier otro bloque que se
   oculte desde JavaScript y tenga display propio. */
.props__filters[hidden], .props__all[hidden] { display: none; }

/* Enlace a la cartera completa, bajo el escaparate de la portada. */
.props__all { display: flex; justify-content: center; margin-top: 32px; }
.props__filter {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 16px; font: inherit; font-size: 13.5px; color: #4b5266; cursor: pointer;
}
.props__filter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.props__empty { text-align: center; color: #6b7280; }
.props__empty a { color: var(--accent); text-decoration: underline; }

/* Fallo de carga. Distinto de la cartera vacía: aquí no sabemos qué hay, así
   que lo que se ofrece es volver a intentarlo, no una despedida. */
.props__error { text-align: center; color: #6b7280; }
.props__error p { margin-bottom: 14px; }
.props__error-alt { font-size: 13.5px; margin: 16px 0 0; }
.props__error a { color: var(--accent); text-decoration: underline; }

/* Fantasmas de carga: mismo tamaño que la tarjeta real para que la lista no dé
   un salto cuando llegan los datos. */
.prop--skeleton .prop__media { background: linear-gradient(90deg, #eef1f7, #f7f9fc, #eef1f7); }
.prop--skeleton .prop__body span {
  display: block; height: 12px; border-radius: 6px; background: #eef1f7; margin-bottom: 10px;
}
.prop--skeleton .prop__body span:first-child { width: 45%; height: 20px; }
.prop--skeleton .prop__body span:last-child { width: 75%; }

/* Ficha ampliada */
.sheet {
  width: min(760px, 94vw); max-height: 92vh; padding: 0;
  border: none; border-radius: var(--radius);
  box-shadow: 0 30px 60px rgba(17,23,44,0.28);
}
.sheet::backdrop { background: rgba(17,23,44,0.55); }
.sheet__inner { position: relative; overflow-y: auto; max-height: 92vh; padding: 0 28px 28px; }
.sheet__close {
  position: sticky; top: 12px; float: right; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.92); border: 1px solid var(--line);
  font-size: 15px; line-height: 1; cursor: pointer; color: var(--ink);
}
.sheet__gallery { position: relative; margin: 0 -28px; background: #0d1120; }
.sheet__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.sheet__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.9); border: none;
  font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink);
}
.sheet__nav--prev { left: 12px; }
.sheet__nav--next { right: 12px; }
.sheet__counter {
  position: absolute; bottom: 12px; right: 16px;
  background: rgba(17,23,44,0.72); color: #fff;
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
}
.sheet__strip {
  display: flex; gap: 8px; overflow-x: auto; padding: 12px 0;
  margin: 0 -28px; padding-left: 28px; padding-right: 28px;
  scrollbar-width: thin;
}
.sheet__thumb {
  flex: 0 0 84px; height: 62px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: none;
}
.sheet__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sheet__head { padding-top: 20px; }
.sheet__head h3 { font-size: 21px; margin-bottom: 4px; }
.sheet__place { color: #6b7280; font-size: 14px; margin: 0 0 10px; }
.sheet__price { font-size: 26px; font-weight: 800; color: var(--ink); margin: 0 0 16px; }
.sheet__text { margin: 18px 0 22px; }
.sheet__text p { font-size: 14.5px; }

/* Responsive */
@media (max-width: 860px) {
  .nav__links { display: none; }
  /* Sin los enlaces sólo quedan dos bloques: si se dejan tres columnas, las
     acciones se colocan en la del medio y se quedan a media página. */
  .nav__inner { grid-template-columns: 1fr auto; }
  .footer__inner { grid-template-columns: 1fr; }
  /* Apilado el pie, la barra lateral pierde su línea: ya no separa nada
     porque no hay nada a su izquierda. */
  .footer__rail { border-left: 0; padding-left: 0; }
  /* .props no se toca aquí a propósito: su auto-fill ya reparte las columnas
     solo, y forzarle una sola a 860px dejaba tarjetas de 800px de ancho con
     una foto de 600px de alto. Sólo se fuerza en móvil, más abajo. */
  .sheet { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; margin: 0; }
  .sheet__inner { max-height: 100vh; }
}

@media (max-width: 560px) {
  .props { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .prop { transition: none; }
  .prop:hover { transform: none; }
  /* El cambio de página se hace de golpe. No se desactiva la transición
     entera: sin animación, el navegador la resuelve en un corte limpio, que es
     justo lo que se pide aquí. */
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .nav { transition: none; }
}

/* ===========================================================================
   Rediseño: portada y páginas de línea
   ---------------------------------------------------------------------------
   Un titular grande partido en pocas palabras por línea, mucho aire y una
   imagen a sangre. Mientras las fotos lleven la marca de agua de idealista no
   se pueden usar a pantalla completa, así que la portadilla se dibuja con el
   motivo de círculos de la propia marca. Cuando haya fotos limpias, basta con
   poner --hero-img en la sección y el motivo se aparta.
   ========================================================================= */

.lede {
  font-size: clamp(19px, 1.65vw, 27px);
  line-height: 1.5;
  max-width: 34ch;
  color: var(--ink);
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--clay);
  margin: 0 0 18px;
}

/* Enlace de texto con su flecha, para "seguir leyendo" sin gritar. */
.arrow-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: clamp(15px, 1vw, 19px); font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line); padding-bottom: 4px;
}
.arrow-link::after { content: '→'; transition: transform .18s ease; }
.arrow-link:hover { border-bottom-color: var(--ink); }
.arrow-link:hover::after { transform: translateX(4px); }

/* ---------- Portadilla ---------- */
.cover {
  position: relative;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* La portadilla va a sangre y con el mismo margen que la barra, para que el
   titular arranque justo debajo de la marca y no doscientos píxeles a su
   derecha. El resto de la página sigue ceñido a sus 1120 px: lo que se alinea
   aquí es la portada con la cabecera, no la página entera. */
.cover__inner {
  max-width: none; margin: 0; padding: 96px var(--gutter) 104px;
  position: relative; z-index: 1;
}
/* El titular de portadilla es lo único que va en Inter: grande, de peso medio
   y muy apretado de letra. El aire lo pone el tamaño, no el interlineado — de
   ahí un line-height por debajo de uno, que hace de las tres líneas un bloque
   y no una lista. El apretado fuerte sólo funciona en cuerpos grandes: en
   móvil se afloja más abajo, o las letras se tocan. */
.cover h1 {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(40px, 7.9vw, 112px);
  letter-spacing: -0.045em;
  line-height: 0.9;
  max-width: none;
  margin-bottom: 32px;
}
@media (min-width: 700px) {
  .cover h1 { letter-spacing: -0.07em; }
}

/* Cada línea del titular entra por debajo de la anterior, con un retardo
   escalonado. La ventana que la recorta es el propio .cover__line: por eso
   lleva overflow oculto y, para que no se coma las colas de la "g" y la "p",
   un hueco abajo que se descuenta con el margen negativo.
   El estado inicial vive dentro del keyframe (y no en una regla aparte) para
   que, si el navegador no anima, el texto se vea igual en su sitio. */
.cover__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.cover__line > span {
  display: block;
  animation: cover-line-up 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 95ms);
}
@keyframes cover-line-up {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cover__line > span { animation: none; }
}
.cover .lede { max-width: 46ch; }

/* El motivo: discos de la paleta de la marca, recortados por el borde. Es el
   mismo gesto que el logotipo — un círculo que hace de ventana — repetido. */
.cover__motif {
  position: absolute; right: -80px; top: -60px; bottom: -60px; width: 46%;
  pointer-events: none; opacity: 0.9;
}
.cover__motif circle { transform-origin: center; }
.cover--photo .cover__motif { display: none; }
.cover--photo {
  background-color: #171c24;
  background-image:
    linear-gradient(100deg, rgba(23,28,36,0.90) 0%, rgba(23,28,36,0.72) 42%, rgba(23,28,36,0.30) 78%, rgba(23,28,36,0.18) 100%),
    var(--hero-img);
  background-size: cover;
  background-position: center 38%;
  border-bottom: none;
}
/* La portada ocupa exactamente una pantalla, ni más ni menos. Al medirse en
   unidades de ventana, la fotografía encaja igual de bien en un portátil que
   en un monitor ancho, y al acercar o alejar el zoom sólo cambia el texto: la
   imagen sigue llenando la pantalla. Bajar es lo único que la deja atrás.

   svh y no vh: en el móvil, vh cuenta la ventana sin la barra del navegador,
   así que la portada asomaba por debajo del pliegue y daba un salto al
   aparecer y desaparecer esa barra. La declaración en vh se queda delante
   como respaldo para quien no entienda svh. */
.cover--photo {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}
/* Centrada en vertical, pero con más aire arriba que abajo: la barra flota
   sobre la imagen y, sin ese desnivel, el epígrafe se le acercaba demasiado. */
.cover--photo .cover__inner {
  width: 100%;
  padding-top: 132px;
  padding-bottom: 72px;
}
.cover--photo h1, .cover--photo .lede { color: #fff; }
.cover--photo .eyebrow { color: #e9bfae; }
/* El crédito de la foto va aquí abajo y no en un pie aparte: la licencia pide
   citar al autor donde se usa la obra, y esta portada no tiene pie. */
.cover__credito {
  position: absolute; right: var(--gutter); bottom: 14px; z-index: 2;
  font-size: 11px; color: rgba(255,255,255,0.62);
}
.cover__credito a { color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Las cuatro líneas ----------
   La rejilla se ciñe al mismo ancho que el resto de la página. A sangre, en una
   pantalla ancha cada casilla pasaba de mil píxeles y el texto se quedaba
   pegado a la izquierda con medio metro de crema al lado: parecían cuatro
   cosas sueltas y no una rejilla.

   Dentro, cada casilla es una rejilla de cuatro filas —número, título, texto y
   enlace— para que las cuatro partes empiecen a la misma altura en las cuatro
   casillas. Sin eso, "Inversión" ocupa una línea y "Promoción y construcción"
   dos, y los párrafos de al lado arrancan desfasados. */
.lineas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  max-width: 1120px;
  margin: 0 auto;
}
.linea {
  background: var(--paper);
  padding: 44px 40px 40px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 260px;
  transition: background .2s ease;
}
.linea:hover { background: #fff; }
.linea__num {
  font-family: var(--font-display); font-size: 15px; color: var(--clay);
  margin: 0 0 20px;
}
/* Dos líneas de alto pase lo que pase: es lo que alinea los párrafos. */
.linea h3 {
  font-size: clamp(22px, 2.6vw, 30px);
  margin-bottom: 10px;
  max-width: 14ch;
  min-height: 2.5em;
}
.linea p { font-size: 15px; max-width: 42ch; margin-bottom: 20px; }
.linea .arrow-link { align-self: end; justify-self: start; }

/* ---------- Cifras ---------- */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.cifra strong {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 5vw, 60px); line-height: 1; color: var(--accent);
  margin-bottom: 10px;
}
.cifra span { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }

/* ---------- Dos columnas de texto ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.duo h2 { margin-bottom: 0; }
.duo__body p:last-child { margin-bottom: 0; }

/* ---------- Lista de puntos de una línea ---------- */
.puntos { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line); }
.puntos li { background: var(--paper); padding: 22px 26px; display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline; }
.puntos li strong { font-family: var(--font-display); font-weight: 400; color: var(--clay); font-size: 15px; }
.puntos li span { font-size: 15.5px; color: var(--ink); }

@media (max-width: 860px) {
  .lineas, .duo { grid-template-columns: 1fr; }
  .linea h3 { min-height: 0; }
  .cifras { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .cover__motif { display: none; }
  .cover__inner { padding: 64px var(--gutter) 72px; }
  /* La barra encoge en móvil, así que el hueco que le reserva la portada
     también: 168 px dejaban un socavón encima del epígrafe. */
  .cover--photo .cover__inner { padding-top: 128px; }
}

/* Aquí vivía la banda ilustrada: la panorámica del Puerto iba suelta, debajo
   del titular de "Nosotros". Ahora esa misma fotografía es el fondo de la
   portadilla y el titular va encima, como en las demás páginas, así que la
   banda se ha quedado sin ninguna página que la use y sus reglas se han
   retirado con ella. El crédito de la licencia no se ha perdido: viajó al
   .cover__credito de la portadilla. */

/* En el móvil la cabecera no cabe entera. Se retira primero el selector de
   idioma —es el que menos falta hace, y de momento sólo ofrece un idioma— y
   después, en las pantallas más estrechas, se aprietan los dos botones en vez
   de esconder ninguno: Inmuebles y Contactar son las dos cosas a las que se
   viene, y ninguna de las dos sobra. */
@media (max-width: 620px) {
  .nav__inner { gap: 12px; }
  .nav .lang { display: none; }
  .brand { font-size: 23px; }
  .cover__credito { position: static; padding: 0 24px 18px; color: rgba(255,255,255,0.6); }
}

@media (max-width: 430px) {
  .nav .btn--small { padding: 8px 11px; font-size: 12px; }
  .nav .btn--outline svg { display: none; }
}

/* ===========================================================================
   Formulario de contacto
   ---------------------------------------------------------------------------
   Panel verde de marca y no negro: justo debajo va el pie, que ya es tinta
   casi negra, y dos bloques oscuros seguidos se leen como uno solo con una
   costura rara en medio. El verde los separa sin salirse de la paleta.

   Los campos son una raya y no una caja. Sobre fondo oscuro, siete cajas con
   borde forman una reja que pesa más que el propio formulario; la raya deja
   ver el fondo y ordena igual.
   ========================================================================= */
.contacto {
  background: var(--gradient);
  color: #eef2ef;
}
.contacto .eyebrow { color: #e9bfae; }
.contacto h2 {
  color: #fff;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(34px, 3.6vw, 62px);
  letter-spacing: -0.03em;
  line-height: 0.98;
}
.contacto__texto { color: #cfdad3; max-width: 42ch; }
.contacto__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}
.contacto__correo {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 22px; color: #fff; font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 4px;
}
.contacto__correo:hover { border-bottom-color: #fff; }

/* ---------- Campos ----------
   La etiqueta empieza dentro del campo y sube al escribir. Es un <label> de
   verdad, no un placeholder: el placeholder desaparece en cuanto hay texto y
   deja al lector sin saber qué contenía ese hueco. El truco es
   :placeholder-shown, que sólo es cierto mientras el campo está vacío; de ahí
   el placeholder=" " del marcado, que existe únicamente para eso. */
.form__pareja, .form__telefono {
  display: grid;
  gap: 0 22px;
}
.form__pareja { grid-template-columns: 1fr 1fr; }
.form__telefono { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }

.campo { position: relative; margin: 0 0 26px; }
.campo__control {
  width: 100%;
  padding: 22px 0 9px;
  font: inherit;
  font-size: 19px;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.28);
  border-radius: 0;
  transition: border-color .18s ease;
}
.campo__control:hover { border-bottom-color: rgba(255,255,255,0.5); }
.campo__control:focus {
  outline: none;
  border-bottom-color: #fff;
}
.campo__control:focus-visible { outline: none; }
textarea.campo__control { resize: vertical; min-height: 76px; line-height: 1.5; }

.campo__etiqueta {
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.62);
  pointer-events: none;
  transition: transform .16s ease, font-size .16s ease, color .16s ease;
  transform-origin: left top;
}
/* Vacío y sin foco: la etiqueta baja al hueco y hace de rótulo. */
.campo__control:placeholder-shown:not(:focus) + .campo__etiqueta {
  font-size: 19px;
  transform: translateY(19px);
  color: rgba(255,255,255,0.7);
}
.campo__control:focus + .campo__etiqueta { color: #fff; }
.campo__etiqueta abbr { color: #e9bfae; text-decoration: none; }
.campo__nota { color: rgba(255,255,255,0.45); }

/* Un desplegable siempre tiene valor, así que su etiqueta no puede bajar al
   hueco: se queda arriba desde el principio.

   Va colocada en absoluto, en la misma coordenada exacta que la etiqueta ya
   subida de los campos de texto, y el desplegable recibe el mismo relleno que
   un input. Antes la etiqueta ocupaba sitio en el flujo y empujaba el
   desplegable hacia abajo: la caja quedaba dieciséis píxeles más baja y su
   raya caía seis por debajo de la del campo de al lado. Con "Prefijo" y
   "Teléfono" uno junto al otro, ese escalón se veía. Las dos rayas tienen que
   salir de la misma receta, no de dos parecidas. */
.campo--lista .campo__fija {
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.62);
  pointer-events: none;
}
.campo--lista .campo__fija abbr { color: #e9bfae; text-decoration: none; }
.campo--lista .campo__control {
  padding-top: 22px;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.65) 50%),
                    linear-gradient(135deg, rgba(255,255,255,0.65) 50%, transparent 50%);
  /* La flecha se alinea con el texto, no con el centro de la caja: el relleno
     de arriba es mucho mayor que el de abajo, así que "center" la dejaba
     flotando por encima de la palabra. */
  background-position: right 8px top 64%, right 3px top 64%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 22px;
}
.campo--lista option { color: var(--ink); background: #fff; }

.form__casilla {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 4px 0 18px; font-size: 14.5px; color: #cfdad3;
}
.form__casilla input {
  flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px;
  accent-color: var(--clay);
}
/* La trampa del formulario: fuera de la pantalla, no oculta.
   No se usa display:none ni visibility:hidden porque los programas que rellenan
   formularios los reconocen y saltan esos campos, que es justo lo contrario de
   lo que se busca. Así el campo existe, es enfocable por el programa y no lo ve
   nadie. */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__aviso { font-size: 13px; color: rgba(255,255,255,0.55); margin: 0 0 22px; }
.form__aviso a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.form__enviar { min-width: 168px; justify-content: center; }
.form__estado { margin: 14px 0 0; font-size: 14.5px; min-height: 1.4em; }
.form__estado--error { color: #ffc9b7; }
.form__estado--ok { color: #cfe6d8; }
/* El campo que falla se marca en el propio subrayado; el mensaje de arriba
   dice cuál es, para quien no distinga el color. */
.campo__control[aria-invalid='true'] { border-bottom-color: #e9866a; }

@media (max-width: 860px) {
  .contacto__inner { grid-template-columns: 1fr; }
  .form__pareja { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .form__telefono { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Nuestros agentes
   ---------------------------------------------------------------------------
   Hoy hay un agente. Así que no hay rejilla, ni tarjeta, ni tres columnas
   vacías esperando compañía: una fotografía grande y su ficha al lado. El día
   que haya un segundo, .agentes pasa a dos columnas y esta ficha entra tal
   cual, sin tocar el marcado.
   ========================================================================= */
.agentes-seccion { background: #fff; }

.agente {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: 34px;
}
.agente__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  /* Fondo mientras carga —y si el fichero falta— para que el hueco sea un
     bloque tranquilo y no un icono de imagen rota. */
  background: var(--accent-tint);
}
.agente__nombre {
  font-size: clamp(28px, 2.8vw, 44px);
  margin-bottom: 6px;
}
.agente__cargo {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clay);
  margin-bottom: 20px;
}
.agente__texto { max-width: 46ch; }
.agente__correo {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 10px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line); padding-bottom: 4px;
}
.agente__correo:hover { border-bottom-color: var(--ink); }

@media (max-width: 760px) {
  .agente { grid-template-columns: 1fr; }
  .agente__foto { max-width: 420px; }
}

/* ---------- Portadilla con formulario ----------
   El velo de las demás portadillas se aclara mucho hacia la derecha, para
   dejar respirar la fotografía junto al titular. Aquí no sirve: a la derecha
   es donde caen los campos, y unas rayas blancas sobre arena clara no se ven.
   Este velo mantiene cuerpo de lado a lado y sólo cede un poco en el centro.

   Los campos ya venían pensados para fondo oscuro —blancos, con subrayado
   translúcido—, así que se montan sobre la foto sin tocar una sola regla. */
.cover--formulario {
  background-image:
    linear-gradient(100deg, rgba(23,28,36,0.92) 0%, rgba(23,28,36,0.78) 38%, rgba(23,28,36,0.74) 62%, rgba(23,28,36,0.86) 100%),
    var(--hero-img);
}
/* La portadilla ya centra su contenido en vertical; el formulario es alto, así
   que la caja crece con él en lugar de recortarlo. */
.cover--formulario .cover__inner {
  align-items: center;
  padding-top: 148px;
  padding-bottom: 84px;
}
.cover--formulario .contacto__intro { align-self: center; }
/* El titular comparte fila con el formulario, así que dispone de media página
   y no de la página entera. Al tamaño de las otras portadillas, sus tres
   líneas se partían en cinco y el bloque perdía la forma. */
.cover--formulario h1 {
  font-size: clamp(32px, 3.7vw, 64px);
  letter-spacing: -0.035em;
}
.cover--formulario .lede { color: #dfe6e2; }
.cover--formulario .contacto__correo { color: #fff; }

@media (max-width: 860px) {
  /* Apilados, el titular va arriba y el formulario debajo, ambos sobre la
     misma fotografía. */
  .cover--formulario .cover__inner { padding-top: 128px; }
}

/* ---------- Qué línea le interesa ----------
   Píldoras que se encienden al marcarlas. La casilla de verdad sigue ahí
   debajo, sólo que escondida: se navega con el tabulador, se marca con la
   barra espaciadora y el lector de pantalla la anuncia como lo que es. Lo que
   se ve es la etiqueta, que hace de botón.

   El aro de foco se dibuja sobre la etiqueta —la casilla es invisible y su
   foco no se vería—, porque si no, quien va con teclado se queda sin saber
   dónde está. */
.interes {
  border: 0;
  margin: 0 0 26px;
  padding: 0;
  min-width: 0;
}
.interes__titulo {
  padding: 0;
  margin-bottom: 12px;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.62);
}
.interes__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.interes__lista input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.interes__lista label {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 999px;
  font-size: 14.5px;
  color: #dfe6e2;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.interes__lista label:hover { border-color: rgba(255,255,255,0.7); color: #fff; }
.interes__lista input:checked + label {
  background: var(--clay);
  border-color: var(--clay);
  color: #fff;
  font-weight: 600;
}
.interes__lista input:focus-visible + label {
  outline: 3px solid #fff;
  outline-offset: 2px;
}