/* ═══════════════════════════════════════════════════════════
   Hogarista Inmobiliaria
   Sistema visual derivado del logotipo: verde bosque, dorado
   champán y el ángulo de 45° de las patas del isotipo.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Verde corporativo */
  --verde-900:#0B1B17;
  --verde-800:#122B27;
  --verde-700:#163226;   /* fondo del logotipo maestro */
  --verde-600:#1F4034;
  --verde-500:#2C5445;

  /* Dorado / champán */
  --oro-300:#E7CDAB;
  --oro-400:#D9BE95;     /* acento del logotipo */
  --oro-500:#C2A472;
  --oro-600:#A8874F;
  --oro-texto:#6E5222;   /* dorado legible sobre fondo claro */

  /* Neutros */
  --crema:#F1EEE7;
  --papel:#FBF7F2;
  --texto-claro:#E8EDE9;
  --texto-tenue:#9FB0A6;
  --texto-oscuro:#12211C;
  --texto-oscuro-tenue:#4A5B52;

  /* Tipografía */
  --display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --texto:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Ritmo */
  --ancho-max:1280px;
  --margen:clamp(1.25rem, 5vw, 3.5rem);
  --aire:clamp(4.5rem, 11vw, 9.5rem);
  --curva:cubic-bezier(.22,1,.36,1);
}

/* ── Base ────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--verde-800);
  color:var(--texto-claro);
  font-family:var(--texto);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
::selection{ background:var(--oro-400); color:var(--verde-900); }

h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.08; margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.contenedor{ width:100%; max-width:var(--ancho-max); margin-inline:auto; padding-inline:var(--margen); }

.visualmente-oculto{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.salto-contenido{
  position:absolute; left:.5rem; top:.5rem; z-index:200;
  background:var(--oro-400); color:var(--verde-900);
  padding:.75rem 1.25rem; border-radius:2px; font-weight:500;
  transform:translateY(-350%);
  transition:transform .2s ease;
}
.salto-contenido:focus{ transform:none; }

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--oro-400);
  outline-offset:3px;
}

/* ── Tipografía de marca ─────────────────────────────────── */
.antetitulo{
  font-family:var(--texto);
  font-size:.75rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--oro-400);
  margin-bottom:1.5rem;
}
.antetitulo--oscuro,
.seccion--clara .antetitulo{ color:var(--oro-texto); }

.titulo-display{
  font-size:clamp(2.35rem,1.4rem + 4.2vw,4.6rem);
  letter-spacing:-.015em;
}
.titulo-display em{ font-style:italic; font-weight:400; color:var(--oro-300); }

.nota{ font-size:.86rem; color:var(--texto-tenue); }
.nota--oscura{ color:var(--texto-oscuro-tenue); }

/* ── Botones ─────────────────────────────────────────────── */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:48px; padding:.85rem 1.75rem;
  font-family:var(--texto); font-size:.82rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; border-radius:2px; cursor:pointer;
  transition:background-color .35s var(--curva), color .35s var(--curva), border-color .35s var(--curva);
}
.boton--oro{ background:var(--oro-400); color:var(--verde-900); }
.boton--oro:hover{ background:var(--oro-300); }
.boton--verde{ background:var(--verde-700); color:var(--papel); }
.boton--verde:hover{ background:var(--verde-600); }
.boton--wasap{ border-color:rgba(217,190,149,.45); color:var(--oro-300); background:transparent; }
.boton--wasap:hover{ background:var(--oro-400); color:var(--verde-900); border-color:var(--oro-400); }
.boton--ancho{ width:100%; }
.icono{ width:18px; height:18px; fill:currentColor; flex:none; }

/* ── Navegación ──────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .4s ease, border-color .4s ease, backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
.nav.es-solida{
  background:rgba(18,43,39,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--verde-500);
}
.nav__interior{
  max-width:var(--ancho-max); margin-inline:auto;
  padding:.9rem var(--margen);
  display:flex; align-items:center; gap:2rem;
}
.nav__logo{ flex:none; line-height:0; display:flex; align-items:center; min-height:44px; }
.nav__logo img{ width:clamp(150px,16vw,205px); height:auto; }
.nav__enlaces{ display:flex; gap:2rem; margin-left:auto; }
.nav__enlaces a{
  position:relative; text-decoration:none; white-space:nowrap;
  font-size:.78rem; font-weight:400; letter-spacing:.13em; text-transform:uppercase;
  color:var(--texto-claro); padding-block:.4rem;
}
.nav__enlaces a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--oro-400); transition:width .4s var(--curva);
}
.nav__enlaces a:hover::after{ width:100%; }
.nav__cta{ flex:none; }
.nav__enlaces .nav__cambio{ color:var(--oro-300); }
.nav__enlaces .nav__cambio::after{ background:var(--oro-300); }

.nav__hamburguesa{
  display:none; width:48px; height:48px; margin-left:auto;
  background:none; border:0; cursor:pointer; color:var(--texto-claro);
}
.nav__barras{ display:block; width:24px; margin-inline:auto; }
.nav__barras i{ display:block; height:1px; background:currentColor; transition:transform .35s var(--curva); }
.nav__barras i:first-child{ margin-bottom:7px; }
[aria-expanded="true"] .nav__barras i:first-child{ transform:translateY(4px) rotate(45deg); }
[aria-expanded="true"] .nav__barras i:last-child{ transform:translateY(-4px) rotate(-45deg); }

.menu-movil{
  display:none; flex-direction:column; gap:.25rem;
  padding:.5rem var(--margen) 2rem;
  background:var(--verde-900); border-top:1px solid var(--verde-500);
}
.menu-movil a{
  color:var(--texto-claro);   /* explicito: en las paginas legales el texto heredado es oscuro */
  text-decoration:none; padding:.9rem 0;
  font-size:1.05rem; letter-spacing:.04em;
  border-bottom:1px solid rgba(232,237,233,.08);
}
.menu-movil .boton{ margin-top:1.25rem; border-bottom:0; }

/* ── Portada ─────────────────────────────────────────────── */
.portada{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-block:clamp(7rem,16vh,10rem) clamp(3rem,7vh,5rem);
  overflow:hidden;
}
.portada__fondo{ position:absolute; inset:0; }
.portada__fondo img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08); transform-origin:center 40%;
  will-change:transform;
}
.portada__velo{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,27,23,.9) 0%, rgba(11,27,23,.72) 35%, rgba(18,43,39,.99) 100%),
    linear-gradient(100deg, rgba(11,27,23,.92) 0%, rgba(11,27,23,.55) 55%, rgba(11,27,23,.25) 100%),
    radial-gradient(120% 80% at 82% 12%, rgba(217,190,149,.14), transparent 62%);
}
.portada__interior{ position:relative; z-index:2; margin-block-start:auto; }
.portada--interior{ min-height:clamp(30rem,86svh,52rem); }
.portada__acciones{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;
  margin-top:clamp(2rem,5vw,3rem);
}
.enlace-sutil{
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-tenue); text-decoration:none;
  border-bottom:1px solid rgba(217,190,149,.4); padding-block:.5rem;
  display:inline-flex; align-items:center; min-height:44px;
}
.enlace-sutil:hover{ color:var(--oro-300); border-bottom-color:var(--oro-300); }
.portada__titulo{
  font-size:clamp(3rem,1.3rem + 8vw,7rem);
  letter-spacing:-.02em; margin-bottom:1.75rem;
}
.portada__titulo em{ font-style:italic; font-weight:400; color:var(--oro-300); }
.portada__entrada{
  max-width:46ch; color:rgba(232,237,233,.86);
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);
}

/* ── Portal: pantalla de eleccion, sin scroll ─────────────
   Dos mitades separadas por una diagonal a 45°, el mismo angulo
   con el que se cierran las patas del isotipo. ── */
.es-portal{ height:100%; overflow:hidden; }
.es-portal body,
body.es-portal{ height:100dvh; overflow:hidden; }

.portal{
  position:relative; isolation:isolate;
  height:100dvh; display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(1rem,3vh,2rem);
  padding:clamp(1.5rem,4vh,3rem) var(--margen) clamp(1rem,2.5vh,1.75rem);
  overflow:hidden;
}

.portal__fondos{ position:absolute; inset:0; z-index:-1; }
/* Velo en las bandas de arriba y abajo: el titular y el pie cruzan la costura
   de la diagonal y sin esto se pierden sobre la mitad clara. */
.portal__fondos::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(11,27,23,.94) 0%, rgba(11,27,23,.85) 28%, rgba(11,27,23,.6) 40%, rgba(11,27,23,0) 52%),
    linear-gradient(0deg,   rgba(11,27,23,.97) 0%, rgba(11,27,23,.93) 10%, rgba(11,27,23,.5) 15%, rgba(11,27,23,0) 22%);
}
.portal__foto{ position:absolute; inset:0; }
.portal__foto img{ width:100%; height:100%; object-fit:cover; }
.portal__foto::after{ content:''; position:absolute; inset:0; }
.portal__foto--inquilino::after{
  background:linear-gradient(180deg, rgba(11,27,23,.86), rgba(11,27,23,.94));
}
.portal__foto--propietario::after{
  background:linear-gradient(180deg, rgba(241,238,231,.9), rgba(230,226,216,.95));
}
@media (min-width:56rem){
  /* corte en diagonal: la mitad derecha entra en cuna sobre la izquierda */
  .portal__foto--propietario{ clip-path:polygon(46% 0, 100% 0, 100% 100%, 54% 100%); }
}
@media (max-width:55.99rem){
  .portal__foto--inquilino{ clip-path:polygon(0 0, 100% 0, 100% 58%, 0 66%); }
  .portal__foto--propietario{ clip-path:polygon(0 66%, 100% 58%, 100% 100%, 0 100%); }
}

.portal__cabecera{ display:grid; justify-items:center; text-align:center; gap:clamp(.5rem,1.5vh,1rem); }
.portal__logo{ width:clamp(112px,13vh,168px); height:auto; }
.portal__titulo{
  font-size:clamp(1.5rem,1rem + 2.4vw,2.75rem);
  letter-spacing:-.015em; max-width:18ch; text-wrap:balance;
}
.portal__titulo em{ font-style:italic; font-weight:400; color:var(--oro-300); }
.portal__entrada{
  max-width:52ch; color:rgba(232,237,233,.82);
  font-size:clamp(.9rem,.86rem + .25vw,1.05rem); line-height:1.55;
}

.portal__puertas{
  display:grid; gap:clamp(.75rem,2vh,1.25rem);
  align-content:center; min-height:0;
}
@media (min-width:56rem){
  .portal__puertas{ grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:stretch; }
}

.puerta{
  position:relative; display:grid; align-content:center; gap:.35rem;
  padding:clamp(1.1rem,3vh,2.25rem) clamp(1.25rem,3vw,2.25rem);
  text-decoration:none; border:1px solid;
  transition:background-color .45s var(--curva), border-color .45s var(--curva);
  overflow:hidden;
}
.puerta::before{           /* muesca a 45°, la firma del isotipo */
  content:''; position:absolute; right:-1px; bottom:-1px;
  border-style:solid; border-width:0 0 24px 24px;
  border-color:transparent transparent currentColor transparent;
  opacity:.5; transition:border-width .45s var(--curva), opacity .45s var(--curva);
}
.puerta:hover::before,
.puerta:focus-visible::before{ border-width:0 0 40px 40px; opacity:1; }

.puerta--inquilino{
  color:var(--oro-400); border-color:rgba(217,190,149,.4);
  /* opaca de sobra: el texto no depende de la foto que haya detras */
  background:rgba(11,27,23,.9);
}
.puerta--inquilino:hover{ background:rgba(31,64,52,.95); border-color:var(--oro-400); }
.puerta--propietario{
  color:var(--oro-texto); border-color:rgba(110,82,34,.34);
  background:rgba(251,247,242,.93);
}
.puerta--propietario:hover{ background:rgba(251,247,242,1); border-color:var(--oro-600); }

.puerta__eyebrow{ font-size:.75rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; }
.puerta__titulo{
  font-family:var(--display); font-weight:600; line-height:1.1;
  font-size:clamp(1.6rem,1.2rem + 1.8vw,2.6rem);
}
.puerta--inquilino .puerta__titulo{ color:var(--texto-claro); }
.puerta--propietario .puerta__titulo{ color:var(--texto-oscuro); }
.puerta__texto{ font-size:.95rem; max-width:34ch; }
.puerta--inquilino .puerta__texto{ color:var(--texto-tenue); }
.puerta--propietario .puerta__texto{ color:var(--texto-oscuro-tenue); }
.puerta__flecha{ margin-top:.75rem; width:40px; }
.puerta__flecha svg{ width:100%; height:8px; display:block; }
.puerta:hover .puerta__flecha{ transform:translateX(6px); }
.puerta__flecha{ transition:transform .45s var(--curva); }

.portal__pie{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem 1.5rem;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
}
.portal__pie a{
  color:var(--texto-tenue); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px;
}
.portal__pie a:hover{ color:var(--oro-300); }

/* ── Secciones ───────────────────────────────────────────── */
.seccion{ padding-block:var(--aire); position:relative; }
.seccion--oscura{ background:var(--verde-800); }
.seccion--clara{ background:var(--crema); color:var(--texto-oscuro); }
.seccion--clara .titulo-display em{ color:var(--oro-texto); }
.seccion--clara .seccion__entrada{ color:var(--texto-oscuro-tenue); }

.seccion__cabecera{ max-width:56ch; margin-bottom:clamp(3rem,7vw,5rem); }
.seccion__entrada{ margin-top:1.75rem; color:rgba(232,237,233,.8); font-size:1.06rem; }
.seccion__pie{ margin-top:clamp(2.5rem,5vw,3.5rem); display:grid; gap:1rem; justify-items:start; }


/* ── Ventajas ────────────────────────────────────────────── */
.ventajas{
  display:grid; gap:clamp(1.75rem,3.5vw,2.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.ventajas--dos{ grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.ventaja{ padding-top:1.5rem; border-top:1px solid rgba(217,190,149,.3); }
.seccion--clara .ventaja{ border-top-color:rgba(110,82,34,.28); }
.ventaja__marca{
  display:block; font-size:.75rem; letter-spacing:.24em;
  color:var(--oro-400); margin-bottom:1rem;
}
.seccion--clara .ventaja__marca{ color:var(--oro-texto); }
.ventaja h3{ font-size:1.22rem; margin-bottom:.7rem; line-height:1.25; }
.ventaja p{ color:var(--texto-tenue); font-size:.96rem; }
.seccion--clara .ventaja p{ color:var(--texto-oscuro-tenue); }

/* ── Valoración: texto y tarjeta ─────────────────────────── */
.rejilla-valoracion{
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:1fr;
}
@media (min-width:64rem){
  .rejilla-valoracion{ grid-template-columns:1.1fr 1fr; align-items:start; }
}
.tarjeta-valoracion{
  background:var(--papel);
  border:1px solid rgba(110,82,34,.25);
  padding:clamp(1.75rem,3vw,2.5rem);
  display:grid; gap:1.1rem; justify-items:start;
  position:relative;
}
.tarjeta-valoracion::after{
  content:''; position:absolute; left:0; top:0; width:36px; height:36px;
  border-top:1px solid var(--oro-600); border-left:1px solid var(--oro-600);
  transform:translate(-1px,-1px);
}
.tarjeta-valoracion h3{ font-size:1.5rem; line-height:1.2; }
.tarjeta-valoracion p{ color:var(--texto-oscuro-tenue); font-size:.96rem; }

/* ── Proceso ─────────────────────────────────────────────── */
.proceso__rejilla{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr; }
@media (min-width:64rem){
  /* align-items:start evita que la caja de la foto se estire hasta la altura
     de la columna de texto y deje un hueco de fondo debajo de la imagen. */
  .proceso__rejilla{ grid-template-columns:1fr 1fr; align-items:start; }
  .proceso__lienzo{ position:sticky; top:6.5rem; }
}
.proceso__lienzo{ overflow:hidden; background:var(--verde-900); }
.proceso__lienzo img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:opacity .5s ease;
}
.paso{ padding:clamp(2rem,4vw,3rem) 0; border-top:1px solid rgba(217,190,149,.3); }
.paso:last-child{ border-bottom:1px solid rgba(217,190,149,.3); }
.paso__numero{
  font-size:.75rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--oro-400); margin-bottom:1rem;
}
.paso h3{ font-size:clamp(1.4rem,1.2rem + .7vw,1.9rem); margin-bottom:.85rem; }
.paso p{ color:var(--texto-tenue); max-width:44ch; }
.paso.es-activo .paso__numero{ color:var(--oro-300); }

/* El mismo bloque sobre fondo claro */
.seccion--clara .paso{ border-top-color:rgba(110,82,34,.28); }
.seccion--clara .paso:last-child{ border-bottom-color:rgba(110,82,34,.28); }
.seccion--clara .paso__numero{ color:var(--oro-texto); }
.seccion--clara .paso p{ color:var(--texto-oscuro-tenue); }
.seccion--clara .paso.es-activo .paso__numero{ color:var(--verde-700); }
.seccion--clara .proceso__lienzo{ background:var(--crema); }
.seccion--clara .nota{ color:var(--texto-oscuro-tenue); }

/* ── Zonas ───────────────────────────────────────────────── */
.seccion--filete{
  background:var(--verde-900);
  padding-block:clamp(3rem,6vw,4.5rem);
  border-block:1px solid var(--verde-500);
}
.zonas__lista{
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem;
  font-family:var(--display); font-size:clamp(1.15rem,1rem + 1vw,1.75rem);
  color:rgba(232,237,233,.75);
}
.zonas__lista li{ display:flex; align-items:center; gap:1.5rem; }
.zonas__lista li:not(:last-child)::after{
  content:''; width:5px; height:5px; transform:rotate(45deg);
  border:1px solid var(--oro-500);
}

/* ── Contacto ────────────────────────────────────────────── */
.contacto__rejilla{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); grid-template-columns:1fr; }
@media (min-width:64rem){ .contacto__rejilla{ grid-template-columns:1fr 1.15fr; } }

.contacto__datos{ margin-top:2.5rem; display:grid; gap:1.1rem; }
.contacto__datos div{ display:grid; gap:.15rem; }
.contacto__datos dt{
  font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; color:var(--texto-tenue);
}
.contacto__datos dd{ margin:0; font-size:1.05rem; }
.contacto__datos a{ text-decoration:none; border-bottom:1px solid rgba(217,190,149,.5); padding-bottom:2px; }
.contacto__datos a:hover{ border-bottom-color:var(--oro-300); }

.formulario{
  display:grid; gap:1.35rem 1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  background:var(--verde-900);
  border:1px solid var(--verde-500);
  padding:clamp(1.5rem,3.5vw,2.75rem);
}
.campo{ display:grid; gap:.45rem; }
.campo--ancho{ grid-column:1/-1; }
.campo label{ font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--texto-tenue); }
.opcional{ text-transform:none; letter-spacing:normal; }
.entrada{
  width:100%; min-height:48px;
  background:transparent; color:var(--texto-claro);
  border:0; border-bottom:1px solid var(--verde-500);
  font-family:var(--texto); font-size:1rem; font-weight:300;
  padding:.6rem .1rem;
}
.entrada:focus{ outline:none; border-bottom-color:var(--oro-400); }
.entrada:focus-visible{ outline:2px solid var(--oro-400); outline-offset:3px; }
select.entrada option{ background:var(--verde-900); color:var(--texto-claro); }
select.entrada{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M0 0l5.5 7L11 0z' fill='%23D9BE95'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .3rem center;
}
.entrada[aria-invalid="true"]{ border-bottom-color:#E9A2A2; }

.consentimiento{ grid-template-columns:auto 1fr; align-items:start; gap:.75rem; }
.consentimiento input{ width:24px; height:24px; margin-top:.15rem; accent-color:var(--oro-400); }
.consentimiento label{
  text-transform:none; letter-spacing:normal; font-size:.9rem;
  color:var(--texto-tenue); line-height:1.55;
}
.consentimiento a{ color:var(--oro-300); }

.formulario__error{ grid-column:1/-1; color:#E9A2A2; font-size:.9rem; }
.formulario__ok{ grid-column:1/-1; color:var(--oro-300); font-size:.95rem; }

/* ── Pie ─────────────────────────────────────────────────── */
.pie{ background:var(--verde-900); border-top:1px solid var(--verde-500); padding-block:clamp(3rem,6vw,4.5rem); }
.pie__interior{ display:grid; gap:2.5rem; align-items:start; }
@media (min-width:48rem){ .pie__interior{ grid-template-columns:1fr auto auto; gap:3rem; } }
.pie__logo{ width:150px; }
.pie__nota{ margin-top:1.25rem; color:var(--texto-tenue); font-size:.92rem; max-width:32ch; }
.pie__enlaces{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.pie__enlaces a{
  display:inline-flex; align-items:center; min-height:44px;
  text-decoration:none; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-tenue);
}
.pie__enlaces a:hover{ color:var(--oro-300); }
.pie__copy{ font-size:.78rem; letter-spacing:.1em; color:var(--texto-tenue); }

/* ── Movimiento ──────────────────────────────────────────── */
.js-activo .revelar{
  opacity:0; transform:translateY(34px);
  transition:opacity .9s var(--curva), transform .9s var(--curva);
}
.js-activo .revelar.es-visible{ opacity:1; transform:none; }

/* Barra completa solo desde 1280 px: medido, la de propietarios ocupa ~1240 px en una linea */
@media (max-width:79.99rem){
  .nav__enlaces,.nav__cta{ display:none; }
  .nav__hamburguesa{ display:block; }
  .menu-movil[data-abierto="true"]{ display:flex; }
  .nav.tiene-menu{ background:var(--verde-900); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js-activo .revelar{ opacity:1; transform:none; }
  .portada__fondo img{ transform:none; }
}

/* ── Páginas legales ─────────────────────────────────────── */
/* Texto largo: oscuro sobre crema, que se lee mejor que claro sobre verde. */
body.es-legal{ background:var(--crema); color:var(--texto-oscuro); }
.legal{ padding-block:clamp(8rem,16vh,10.5rem) var(--aire); }
.legal__envoltorio{ max-width:74ch; margin-inline:auto; padding-inline:var(--margen); }
.legal .antetitulo{ color:var(--oro-texto); }
.legal h1{ font-size:clamp(2.2rem,1.5rem + 3vw,3.4rem); letter-spacing:-.015em; text-wrap:balance; }
.legal__entrada{ margin-top:1.25rem; color:var(--texto-oscuro-tenue); font-size:1.06rem; }
.legal__fecha{ margin-top:1rem; font-size:.85rem; color:var(--texto-oscuro-tenue); }

.legal__indice{
  margin-block:2.5rem 1rem; padding:1.5rem 1.75rem;
  background:var(--papel); border:1px solid rgba(110,82,34,.2);
}
.legal__indice p{
  font-size:.75rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--oro-texto); margin-bottom:.75rem;
}
.legal__indice ol{ list-style:decimal; padding-left:1.25rem; display:grid; gap:.3rem; }
.legal__indice a{ color:var(--texto-oscuro); text-underline-offset:3px; }

.legal__texto h2{ font-size:1.45rem; margin-block:2.75rem 1rem; scroll-margin-top:7rem; }
.legal__texto p, .legal__texto li{ color:#2A3A33; }
.legal__texto p + p{ margin-top:1rem; }
.legal__texto ul{ list-style:disc; padding-left:1.25rem; display:grid; gap:.4rem; margin-block:1rem; }
.legal__texto a{ color:var(--verde-700); text-underline-offset:3px; }
.legal__texto strong{ font-weight:600; }

.ficha{ display:grid; grid-template-columns:minmax(10rem,auto) 1fr; margin-block:1.25rem; }
.ficha dt, .ficha dd{ margin:0; padding:.7rem 0; border-bottom:1px solid rgba(110,82,34,.18); }
.ficha dt{ font-weight:500; padding-right:1.25rem; }
@media (max-width:32rem){
  .ficha{ grid-template-columns:1fr; }
  .ficha dt{ border-bottom:0; padding-bottom:0; }
}

.tabla-legal{ overflow-x:auto; margin-block:1.25rem; }
.tabla-legal table{ width:100%; min-width:36rem; border-collapse:collapse; font-size:.93rem; }
.tabla-legal th, .tabla-legal td{
  text-align:left; vertical-align:top;
  padding:.75rem 1rem .75rem 0; border-bottom:1px solid rgba(110,82,34,.18);
}
.tabla-legal th{
  font-weight:500; font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--oro-texto);
}

.pie__enlaces a[aria-current="page"]{ color:var(--oro-300); }

/* Información básica de protección de datos, junto al botón de enviar */
.formulario__rgpd{ grid-column:1/-1; font-size:.8rem; line-height:1.55; color:var(--texto-tenue); }
.formulario__rgpd a{ color:var(--oro-300); }

/* ── Zona de clientes (noindex) ──────────────────────────── */
body.es-zona{ background:var(--crema); color:var(--texto-oscuro); }
.zona{ padding-block:clamp(8rem,16vh,10.5rem) var(--aire); }
.zona__envoltorio{ max-width:68rem; margin-inline:auto; padding-inline:var(--margen); }
.zona .antetitulo{ color:var(--oro-texto); }
.zona h1{ font-size:clamp(2.2rem,1.5rem + 3vw,3.4rem); letter-spacing:-.015em; text-wrap:balance; max-width:20ch; }
.zona__entrada{ margin-top:1.25rem; color:var(--texto-oscuro-tenue); font-size:1.06rem; max-width:56ch; }
.zona h2{ font-size:1.6rem; margin-bottom:.75rem; scroll-margin-top:7rem; }
.zona__bloque > p{ color:var(--texto-oscuro-tenue); margin-bottom:1.5rem; }
.zona__bloque--contacto{ margin-top:clamp(3rem,6vw,4.5rem); }

.urgente{
  margin-top:2.5rem; padding:1.25rem 1.5rem;
  display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:center; justify-content:space-between;
  background:var(--verde-800); color:var(--texto-claro); border-left:3px solid var(--oro-400);
}
.urgente p{ max-width:52ch; }
.urgente strong{ color:var(--oro-300); font-weight:600; }

.zona__rejilla{ display:grid; gap:clamp(2.5rem,5vw,4rem); margin-top:clamp(3rem,6vw,4.5rem); }
@media (min-width:60rem){ .zona__rejilla{ grid-template-columns:1.1fr 1fr; align-items:start; } }

/* Formulario de aviso: compone el mensaje y abre WhatsApp, no envia nada a la web */
.aviso{
  display:grid; gap:1.25rem;
  background:var(--papel); border:1px solid rgba(110,82,34,.22);
  padding:clamp(1.25rem,3vw,2rem);
}
.aviso .campo label{ color:var(--texto-oscuro-tenue); }
.aviso .entrada{ color:var(--texto-oscuro); border-bottom-color:rgba(110,82,34,.35); }
.aviso .entrada::placeholder{ color:#8A8676; }
.aviso .entrada:focus{ border-bottom-color:var(--verde-700); }
.aviso .entrada:focus-visible{ outline-color:var(--verde-700); }
.aviso select.entrada{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M0 0l5.5 7L11 0z' fill='%236E5222'/%3E%3C/svg%3E");
}
.aviso select.entrada option{ background:var(--papel); color:var(--texto-oscuro); }
.aviso__nota{ font-size:.85rem; color:var(--texto-oscuro-tenue); }
.aviso__nota a{ color:var(--verde-700); }
.aviso__error{ color:#9B2C2C; font-size:.9rem; }

.dudas{ display:grid; border-top:1px solid rgba(110,82,34,.22); }
.dudas details{ border-bottom:1px solid rgba(110,82,34,.22); }
.dudas summary{
  cursor:pointer; list-style:none; position:relative;
  padding:1.1rem 2.25rem 1.1rem 0; min-height:44px; font-weight:500;
}
.dudas summary::-webkit-details-marker{ display:none; }
.dudas summary::after{            /* la uve a 45°, la misma de la marca */
  content:''; position:absolute; right:.5rem; top:1.4rem; width:8px; height:8px;
  border-right:1px solid var(--oro-texto); border-bottom:1px solid var(--oro-texto);
  transform:rotate(45deg); transition:transform .3s var(--curva);
}
.dudas details[open] summary::after{ transform:rotate(-135deg); top:1.65rem; }
.dudas details p{ padding:0 0 1.25rem; color:#2A3A33; max-width:60ch; }

.contacto-directo{
  display:grid; gap:1px; margin-top:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  background:rgba(110,82,34,.2); border:1px solid rgba(110,82,34,.2);
}
.contacto-directo a{ background:var(--papel); padding:1.1rem 1.25rem; text-decoration:none; display:grid; gap:.2rem; min-height:44px; }
.contacto-directo a:hover{ background:#fff; }
.contacto-directo span{ font-size:.75rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--oro-texto); }
.contacto-directo strong{ font-weight:500; color:var(--texto-oscuro); overflow-wrap:anywhere; }

/* Banda "¿ya eres cliente?" al final de las paginas publicas */
.banda-clientes{ background:var(--verde-900); border-top:1px solid var(--verde-500); padding-block:1.25rem; }
.banda-clientes .contenedor{ display:flex; flex-wrap:wrap; gap:.25rem 1.5rem; align-items:center; justify-content:space-between; }
.banda-clientes p{ color:var(--texto-tenue); }

/* Enlace sutil sobre fondo claro (pagina de gracias) */
.enlace-sutil--oscuro{ color:var(--texto-oscuro-tenue); border-bottom-color:rgba(110,82,34,.4); }
.enlace-sutil--oscuro:hover{ color:var(--verde-700); border-bottom-color:var(--verde-700); }

/* ── Portal en pantallas bajas ────────────────────────────
   El portal no scrollea, así que en móviles cortos hay que
   compactarlo o el contenido se recorta sin remedio. */
@media (max-height:760px){
  .portal{ gap:clamp(.5rem,1.5vh,1rem); padding-block:clamp(1rem,2.5vh,2rem) clamp(.75rem,1.5vh,1.25rem); }
  .portal__logo{ width:clamp(86px,11vh,130px); }
  .portal__titulo{ font-size:clamp(1.3rem,.9rem + 2vw,1.9rem); }
  .portal__entrada{ font-size:.88rem; line-height:1.45; }
  .puerta{ padding:clamp(.8rem,2vh,1.25rem) clamp(1rem,3vw,1.5rem); }
  .puerta__titulo{ font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem); }
  .puerta__texto{ font-size:.85rem; }
  .puerta__flecha{ margin-top:.4rem; }
  .portal__pie{ font-size:.7rem; gap:.2rem 1rem; }
  .portal__pie a{ min-height:38px; }
}
@media (max-height:620px){
  .portal__entrada{ display:none; }   /* lo dicen ya las dos puertas */
  .portal__logo{ width:clamp(70px,9vh,100px); }
}
/* Última red: si aun así no cabe, mejor poder desplazar que perder contenido */
@media (max-height:520px){
  html.es-portal, body.es-portal{ height:auto; overflow:auto; }
  .portal{ height:auto; min-height:100dvh; }
}