/* ==========================================================================
   CHARO CARRACEDO REAL ESTATE — Estructura y componentes
   ========================================================================== */

/* ---------- 1. Barra de progreso de lectura ------------------------------- */
.progreso{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:1100;
  background:linear-gradient(90deg,var(--gold-400),var(--gold-300));
  transform:scaleX(0);transform-origin:left;will-change:transform;
}

/* ---------- 2. Cabecera ---------------------------------------------------- */
.cab{
  position:fixed;inset:0 0 auto 0;z-index:1000;
  padding-block:clamp(1rem,2.2vw,1.7rem);
  transition:background var(--v-medio) var(--ease-suave),
             padding var(--v-medio) var(--ease-suave),
             box-shadow var(--v-medio) var(--ease-suave),
             backdrop-filter var(--v-medio) var(--ease-suave);
}
.cab::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--borde-inv) 30%,var(--borde-inv) 70%,transparent);
  opacity:0;transition:opacity var(--v-medio) var(--ease-suave);
}
.cab.fija{
  background:rgba(6,28,42,.86);backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  padding-block:.72rem;box-shadow:0 10px 40px rgba(6,28,42,.28);
}
.cab.fija::after{opacity:1}
.cab.oculta{transform:translateY(-100%)}
.cab{transition:transform var(--v-medio) var(--ease-suave),background var(--v-medio) var(--ease-suave),
     padding var(--v-medio) var(--ease-suave),box-shadow var(--v-medio) var(--ease-suave)}

.cab__marco{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4)}

/* Logo: bloqueo horizontal montado a partir del isotipo + texto */
.logo{display:flex;align-items:center;gap:.85rem;flex-shrink:0}
.logo__iso{width:auto;height:clamp(38px,4.4vw,52px);transition:height var(--v-medio) var(--ease-suave)}
.cab.fija .logo__iso{height:34px}
.logo__txt{display:flex;flex-direction:column;line-height:1;gap:.24rem}
.logo__nom{
  font-family:var(--f-ui);font-size:clamp(.85rem,1.5vw,1.02rem);font-weight:500;
  letter-spacing:.19em;color:var(--blanco);white-space:nowrap;
}
.logo__sub{
  font-family:var(--f-ui);font-size:clamp(.53rem,.9vw,.63rem);font-weight:500;
  letter-spacing:.34em;color:var(--gold-400);white-space:nowrap;
}
.logo__lema{
  font-family:var(--f-display);font-style:italic;font-size:.72rem;font-weight:400;
  letter-spacing:.06em;color:rgba(255,255,255,.55);margin-top:.1rem;
}

/* Navegación de escritorio */
.nav{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.3rem)}
.nav__a{
  position:relative;font-size:var(--t-sm);font-weight:400;letter-spacing:.055em;
  color:rgba(255,255,255,.82);padding-block:.4rem;white-space:nowrap;
  transition:color var(--v-rapido) var(--ease-suave);
}
.nav__a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold-400);
  transform:scaleX(0);transform-origin:right;transition:transform var(--v-medio) var(--ease-salida);
}
.nav__a:hover,.nav__a[aria-current="page"]{color:var(--gold-400)}
.nav__a:hover::after,.nav__a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* Submenú */
.nav__grupo{position:relative}
/* Puente invisible que cubre el hueco entre el enlace y el desplegable: sin él,
   al bajar el ratón se perdía el :hover y el menú se cerraba antes de llegar. */
.nav__grupo::after{content:"";position:absolute;left:-.6rem;right:-.6rem;top:100%;height:1.3rem}
.nav__grupo>.nav__a{display:inline-flex;align-items:center;gap:.4em;cursor:pointer}
.nav__grupo>.nav__a svg{transition:transform var(--v-rapido) var(--ease-suave)}
.nav__grupo:hover>.nav__a svg,.nav__grupo:focus-within>.nav__a svg{transform:rotate(180deg)}
.submenu{
  position:absolute;top:calc(100% + .9rem);left:50%;transform:translateX(-50%) translateY(-8px);
  min-width:270px;padding:.6rem;background:rgba(6,28,42,.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--borde-inv);box-shadow:0 24px 60px rgba(6,28,42,.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--v-rapido) var(--ease-suave),transform var(--v-rapido) var(--ease-suave),visibility var(--v-rapido);
  /* Margen de gracia al salir: 200 ms para volver sin que se cierre */
  transition-delay:.2s;
}
.nav__grupo:hover .submenu,.nav__grupo:focus-within .submenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
  transition-delay:0s;
}
.submenu::before{
  content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:11px;height:11px;background:rgba(6,28,42,.97);
  border-left:1px solid var(--borde-inv);border-top:1px solid var(--borde-inv);
}
.submenu a{
  display:block;padding:.72rem 1rem;font-size:var(--t-sm);color:rgba(255,255,255,.78);
  border-left:1px solid transparent;
  transition:color var(--v-rapido) var(--ease-suave),background var(--v-rapido) var(--ease-suave),
             border-color var(--v-rapido) var(--ease-suave),padding-left var(--v-rapido) var(--ease-suave);
}
.submenu a small{display:block;font-size:.72rem;color:rgba(255,255,255,.4);letter-spacing:.01em;margin-top:.12rem}
.submenu a:hover{color:var(--gold-400);background:rgba(223,195,90,.07);border-left-color:var(--gold-400);padding-left:1.3rem}

/* Acciones */
.cab__acc{display:flex;align-items:center;gap:1.1rem}
.tel-cab{
  display:inline-flex;align-items:center;gap:.55em;font-size:var(--t-sm);font-weight:400;
  color:var(--gold-400);letter-spacing:.03em;white-space:nowrap;
  transition:opacity var(--v-rapido) var(--ease-suave);
}
.tel-cab:hover{opacity:.75}
.btn-cab{padding:.82em 1.7em;font-size:var(--t-xs)}

/* Botón hamburguesa */
.hamb{
  display:none;position:relative;width:46px;height:46px;background:none;border:0;cursor:pointer;
  z-index:1201;flex-shrink:0;
}
.hamb span{
  position:absolute;left:11px;width:24px;height:1.5px;background:var(--blanco);
  transition:transform var(--v-medio) var(--ease-elast),opacity var(--v-rapido),width var(--v-medio) var(--ease-suave);
}
.hamb span:nth-child(1){top:17px}
.hamb span:nth-child(2){top:23px;width:17px}
.hamb span:nth-child(3){top:29px}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0;width:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- 3. Menú móvil a pantalla completa ----------------------------- */
.menu-movil{
  position:fixed;inset:0;z-index:1150;background:var(--navy-950);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--marco) 3rem;overflow-y:auto;
  clip-path:circle(0% at calc(100% - 44px) 44px);
  transition:clip-path .78s var(--ease-salida);
  visibility:hidden;
}
.menu-movil.abierto{clip-path:circle(150% at calc(100% - 44px) 44px);visibility:visible}
.menu-movil::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 80% 10%,rgba(89,132,237,.14),transparent 60%),
             radial-gradient(70% 50% at 10% 90%,rgba(223,195,90,.09),transparent 60%);
}
.menu-movil__lista{position:relative;display:flex;flex-direction:column;gap:.15rem}
.menu-movil__lista a{
  font-family:var(--f-display);font-size:clamp(1.7rem,7.5vw,2.6rem);font-weight:300;
  color:var(--blanco);padding-block:.36rem;
  opacity:0;transform:translateY(22px);
  transition:opacity .5s var(--ease-salida),transform .5s var(--ease-salida),color var(--v-rapido);
}
.menu-movil.abierto .menu-movil__lista a{opacity:1;transform:none}
.menu-movil__lista a:active,.menu-movil__lista a:hover{color:var(--gold-400)}
.menu-movil__lista a span{
  font-family:var(--f-ui);font-size:.62rem;letter-spacing:.26em;color:var(--gold-400);
  display:block;margin-bottom:.1rem;opacity:.75;
}
.menu-movil__pie{
  position:relative;margin-top:auto;padding-top:2.4rem;
  display:flex;flex-direction:column;gap:1rem;
  opacity:0;transition:opacity .5s var(--ease-salida) .5s;
}
.menu-movil.abierto .menu-movil__pie{opacity:1}
.menu-movil__pie .btn{width:100%}

/* ---------- 4. Hero -------------------------------------------------------- */
.hero{
  position:relative;min-height:clamp(600px,100svh,1000px);
  display:flex;align-items:flex-end;overflow:hidden;background:var(--navy-950);
  /* La cabecera es fija: sin este colchón superior se come el titular cuando el
     contenido es más alto que el hueco disponible (pasaba en todos los móviles). */
  padding-top:clamp(7rem,13vh,9.5rem);
  padding-bottom:clamp(7rem,11vh,7.5rem);
}
.hero__fondo{position:absolute;inset:0;z-index:0}
.hero__fondo img{
  width:100%;height:100%;object-fit:cover;object-position:center 58%;
  transform:scale(1.09);animation:kenburns 26s var(--ease-suave) infinite alternate;
}
@keyframes kenburns{from{transform:scale(1.09) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-1.4%,-1.2%,0)}}
@media (prefers-reduced-motion:reduce){.hero__fondo img{animation:none;transform:scale(1.02)}}

/* Velo: sin él la tipografía nunca tiene contraste suficiente */
.hero__velo{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(6,28,42,.72) 0%,rgba(6,28,42,.30) 30%,rgba(6,28,42,.68) 72%,rgba(6,28,42,.95) 100%),
    radial-gradient(120% 85% at 18% 78%,rgba(6,28,42,.68),transparent 62%);
}
/* Grano finísimo: quita el aspecto "plano digital" de los degradados */
.hero__grano{
  position:absolute;inset:0;z-index:2;opacity:.045;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__cont{position:relative;z-index:3;width:100%}
.hero__lema{
  font-family:var(--f-display);font-style:italic;font-weight:300;
  font-size:clamp(1.05rem,2.4vw,1.6rem);color:var(--gold-400);
  letter-spacing:.03em;margin-bottom:.6rem;
}
.hero h1{
  color:var(--blanco);font-size:var(--t-hero);font-weight:300;line-height:.98;
  letter-spacing:-.028em;max-width:16ch;
}
.hero h1 em{font-style:italic;color:var(--gold-400);font-weight:300}
.hero__sub{
  max-width:52ch;margin-top:var(--e-3);font-size:var(--t-lg);font-weight:300;
  color:rgba(255,255,255,.8);line-height:1.6;
}
.hero__acc{display:flex;flex-wrap:wrap;gap:1rem;margin-top:var(--e-4)}

/* Sellos de acreditación: la señal de confianza que casi nadie pone en el hero */
.hero__sellos{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,3vw,2.4rem);
  margin-top:var(--e-5);padding-top:var(--e-3);
  border-top:1px solid rgba(223,195,90,.18);
}
.sello{display:flex;flex-direction:column;gap:.1rem}
.sello__n{font-family:var(--f-display);font-size:clamp(1.2rem,2.4vw,1.6rem);color:var(--gold-400);line-height:1}
.sello__t{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* Indicador de scroll */
.hero__scroll{
  position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.42);
  pointer-events:none;
}
/* En pantallas cortas o estrechas no cabe sin pisar los sellos, y además el
   gesto de scroll en móvil no necesita pista visual. */
@media (max-width:1024px),(max-height:820px){ .hero__scroll{display:none} }
.hero__scroll i{display:block;width:1px;height:44px;background:linear-gradient(180deg,var(--gold-400),transparent);animation:baja 2.4s var(--ease-suave) infinite}
@keyframes baja{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 5. Cabecera de página interior -------------------------------- */
.cabpag{
  position:relative;padding-top:clamp(9rem,17vh,13rem);padding-bottom:clamp(3.5rem,7vh,6rem);
  background:var(--navy-950);overflow:hidden;
}
.cabpag__fondo{position:absolute;inset:0;z-index:0;opacity:.34}
.cabpag__fondo img{width:100%;height:100%;object-fit:cover}
.cabpag::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,28,42,.9),rgba(6,28,42,.72) 45%,var(--navy-950));
}
.cabpag>.marco{position:relative;z-index:2}
.cabpag h1{color:var(--blanco);font-size:var(--t-4xl);max-width:20ch}
.cabpag h1 em{font-style:italic;color:var(--gold-400)}
.cabpag .entradilla{max-width:60ch;margin-top:var(--e-3);color:rgba(255,255,255,.74)}

/* Migas */
.migas{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;font-size:var(--t-xs);
  letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:var(--e-3)}
.migas a{transition:color var(--v-rapido)}
.migas a:hover{color:var(--gold-400)}
.migas span{opacity:.4}

/* ---------- 6. Rejillas ---------------------------------------------------- */
.rejilla{display:grid;gap:clamp(1.5rem,3vw,2.6rem)}
.rej-2{grid-template-columns:repeat(2,1fr)}
.rej-3{grid-template-columns:repeat(3,1fr)}
.rej-4{grid-template-columns:repeat(4,1fr)}
.rej-partida{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,5vw,5.5rem)}
.rej-partida--ancha{grid-template-columns:1.15fr .85fr}

/* ---------- 7. Tarjeta de servicio ---------------------------------------- */
.tarj{
  position:relative;display:flex;flex-direction:column;gap:var(--e-2);
  padding:clamp(1.7rem,2.6vw,2.5rem);background:var(--blanco);
  border:1px solid var(--borde);isolation:isolate;overflow:hidden;
  transition:transform var(--v-medio) var(--ease-salida),box-shadow var(--v-medio) var(--ease-salida),
             border-color var(--v-medio) var(--ease-suave);
}
/* El barrido dorado desde abajo, coherente con el de los botones */
.tarj::before{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--gold-400);
  transform:scaleX(0);transform-origin:left;z-index:2;
  transition:transform var(--v-medio) var(--ease-salida);
}
.tarj:hover{transform:translateY(-7px);box-shadow:var(--sombra-3);border-color:rgba(223,195,90,.45)}
.tarj:hover::before{transform:scaleX(1)}
.tarj__num{
  font-family:var(--f-display);font-size:2.6rem;font-weight:300;line-height:1;
  color:var(--gold-700);transition:color var(--v-medio) var(--ease-suave);
}
.tarj:hover .tarj__num{color:var(--gold-500)}
.tarj h3{font-size:var(--t-xl);color:var(--navy-900)}
.tarj p{font-size:var(--t-sm);color:var(--texto-suave);line-height:1.68;flex:1}
.tarj__ico{
  width:44px;height:44px;color:var(--gold-600);
  transition:transform var(--v-medio) var(--ease-elast),color var(--v-medio) var(--ease-suave);
}
.tarj:hover .tarj__ico{transform:translateY(-3px) scale(1.06);color:var(--gold-700)}

/* Variante oscura */
.oscuro .tarj{background:rgba(255,255,255,.035);border-color:var(--borde-inv)}
.oscuro .tarj h3{color:var(--blanco)}
.oscuro .tarj p{color:rgba(255,255,255,.62)}
.oscuro .tarj:hover{background:rgba(255,255,255,.06);border-color:rgba(223,195,90,.5)}
.oscuro .tarj__num{color:rgba(223,195,90,.42)}
.oscuro .tarj:hover .tarj__num{color:var(--gold-400)}
.oscuro .tarj__ico{color:var(--gold-400)}

/* ---------- 8. Bloque de cita de Charo (1.ª persona) ---------------------- */
/* Decisión de diseño ya acordada: sus textos en 1.ª del singular van en un
   recuadro diferenciado con su fotografía. */
.cita{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.6rem,3.5vw,3rem);
  align-items:center;padding:clamp(1.8rem,3.5vw,3.2rem);
  background:linear-gradient(135deg,rgba(223,195,90,.07),rgba(223,195,90,.02));
  border:1px solid rgba(223,195,90,.3);position:relative;
}
.cita::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--gold-400),transparent);
}
.cita__foto{
  width:clamp(88px,13vw,150px);height:clamp(88px,13vw,150px);border-radius:50%;
  object-fit:cover;object-position:center 22%;flex-shrink:0;
  border:2px solid var(--gold-400);box-shadow:var(--sombra-oro);
}
.cita__txt{font-family:var(--f-display);font-size:var(--t-xl);font-style:italic;
  font-weight:300;line-height:1.5;color:var(--navy-900)}
.oscuro .cita__txt{color:var(--blanco)}
.cita__firma{
  display:flex;align-items:center;gap:.7rem;margin-top:var(--e-2);
  font-family:var(--f-ui);font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-800);font-style:normal;
}
.oscuro .cita__firma{color:var(--gold-400)}
.cita__firma::before{content:"";width:2rem;height:1px;background:currentColor;opacity:.5}

/* ---------- 9. Cifras ------------------------------------------------------ */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(1.5rem,3vw,3rem)}
.cifra{text-align:center;position:relative}
.cifra:not(:last-child)::after{
  content:"";position:absolute;right:calc(var(--e-4) * -.5);top:15%;height:70%;width:1px;
  background:linear-gradient(180deg,transparent,var(--borde-inv),transparent);
}
.cifra__n{font-family:var(--f-display);font-size:clamp(2.4rem,5.5vw,4.1rem);font-weight:300;
  line-height:1;color:var(--gold-400);letter-spacing:-.02em}
.cifra__t{font-size:var(--t-xs);letter-spacing:.19em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-top:.7rem}

/* ---------- 10. Media con texto ------------------------------------------- */
.media{position:relative}
.media img{width:100%;object-fit:cover}
.media--alto img{aspect-ratio:3/4}
.media--ancho img{aspect-ratio:4/3}
/* Marco dorado desplazado: detalle editorial barato de hacer y de mucho efecto */
.media--marco::before{
  content:"";position:absolute;inset:auto auto -1.1rem -1.1rem;width:62%;height:62%;
  border-left:1px solid var(--gold-400);border-bottom:1px solid var(--gold-400);
  opacity:0;transform:translate(10px,-10px);
  transition:opacity var(--v-lento) var(--ease-salida) .25s,transform var(--v-lento) var(--ease-salida) .25s;
  pointer-events:none;z-index:-1;
}
.media--marco.visible::before{opacity:1;transform:none}

/* ---------- 11. Lista con marca dorada ------------------------------------ */
.lista-oro li{
  position:relative;padding-left:1.9rem;margin-bottom:.9rem;
  font-size:var(--t-base);line-height:1.65;color:var(--texto-suave);
}
.oscuro .lista-oro li{color:rgba(255,255,255,.7)}
.lista-oro li::before{
  content:"";position:absolute;left:0;top:.72em;width:.8rem;height:1px;background:var(--gold-500);
}
.lista-oro li strong{color:var(--navy-900);font-weight:500}
.oscuro .lista-oro li strong{color:var(--blanco)}

/* ---------- 12. Acordeón (FAQ) -------------------------------------------- */
.acor{border-top:1px solid var(--borde)}
.acor__it{border-bottom:1px solid var(--borde)}
.acor__b{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--f-display);font-size:var(--t-lg);font-weight:400;color:var(--navy-900);
  transition:color var(--v-rapido) var(--ease-suave);
}
.acor__b:hover{color:var(--gold-800)}
.acor__b i{
  position:relative;flex-shrink:0;width:15px;height:15px;
}
.acor__b i::before,.acor__b i::after{
  content:"";position:absolute;top:7px;left:0;width:15px;height:1px;background:var(--gold-600);
  transition:transform var(--v-medio) var(--ease-elast);
}
.acor__b i::after{transform:rotate(90deg)}
.acor__b[aria-expanded="true"] i::after{transform:rotate(0)}
.acor__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--v-medio) var(--ease-salida)}
.acor__it.abierto .acor__p{grid-template-rows:1fr}
.acor__p>div{overflow:hidden}
.acor__p p{padding-bottom:1.6rem;color:var(--texto-suave);max-width:70ch}

/* ---------- 13. Formulario ------------------------------------------------- */
.form{display:grid;gap:var(--e-3)}
.campo{position:relative;display:flex;flex-direction:column;gap:.5rem}
.campo label{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--texto-suave);font-weight:500}
.oscuro .campo label{color:rgba(255,255,255,.6)}
.campo input,.campo textarea,.campo select{
  width:100%;padding:.95rem 1.1rem;background:var(--blanco);
  border:1px solid var(--borde);color:var(--texto);font-size:var(--t-base);font-weight:300;
  transition:border-color var(--v-rapido) var(--ease-suave),box-shadow var(--v-rapido) var(--ease-suave);
}
.oscuro .campo input,.oscuro .campo textarea,.oscuro .campo select{
  background:rgba(255,255,255,.05);border-color:var(--borde-inv);color:var(--blanco);
}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;border-color:var(--gold-400);box-shadow:0 0 0 3px rgba(223,195,90,.16);
}
.campo textarea{resize:vertical;min-height:130px}
.campo--check{flex-direction:row;align-items:flex-start;gap:.8rem}
.campo--check input{width:auto;margin-top:.35rem;accent-color:var(--gold-500)}
.campo--check label{text-transform:none;letter-spacing:0;font-size:var(--t-sm);font-weight:300;line-height:1.6}

/* ---------- 14. Pie -------------------------------------------------------- */
.pie{background:var(--navy-950);color:rgba(255,255,255,.62);padding-top:var(--sec);position:relative;overflow:hidden}
.pie::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 55% at 15% 0%,rgba(89,132,237,.10),transparent 60%),
             radial-gradient(60% 45% at 90% 100%,rgba(223,195,90,.07),transparent 60%);
}
.pie>*{position:relative}
.pie__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(2rem,4vw,3.5rem);padding-bottom:var(--e-6)}
.pie h4{font-family:var(--f-ui);font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-400);font-weight:500;margin-bottom:1.3rem}
.pie a{transition:color var(--v-rapido) var(--ease-suave),padding-left var(--v-rapido) var(--ease-suave)}
.pie li{margin-bottom:.72rem;font-size:var(--t-sm)}
.pie li a:hover{color:var(--gold-400);padding-left:.35rem}
.pie__logo{margin-bottom:1.4rem}
.pie__logo img{height:72px;width:auto}
.pie__desc{font-size:var(--t-sm);line-height:1.75;max-width:38ch}
.pie__cred{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.5rem;
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42);
}
.pie__cred b{color:var(--gold-400);font-weight:500}
.pie__bajo{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
  padding-block:1.8rem;border-top:1px solid rgba(255,255,255,.08);
  font-size:var(--t-xs);color:rgba(255,255,255,.4);
}
.pie__legal{display:flex;flex-wrap:wrap;gap:1.4rem}
.pie__legal a:hover{color:var(--gold-400)}
.pie__cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-3);
  padding:clamp(1.8rem,3.5vw,2.8rem);margin-bottom:var(--e-6);
  border:1px solid var(--borde-inv);background:rgba(223,195,90,.045);
}
.pie__cta h3{font-size:var(--t-2xl);color:var(--blanco);max-width:22ch}

/* ---------- 15. Botón flotante de WhatsApp -------------------------------- */
.wa{
  position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:900;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;color:#fff;box-shadow:0 8px 30px rgba(37,211,102,.4);
  transform:translateY(90px) scale(.8);opacity:0;
  transition:transform var(--v-medio) var(--ease-elast),opacity var(--v-medio),box-shadow var(--v-rapido);
}
.wa.visible{transform:none;opacity:1}
.wa:hover{box-shadow:0 12px 40px rgba(37,211,102,.55);transform:scale(1.07)}
.wa svg{width:29px;height:29px}

/* ==========================================================================
   16. RESPONSIVE — de escritorio hacia abajo
   ========================================================================== */
@media (max-width:1180px){
  .nav{gap:1.1rem}
  .nav__a{font-size:.82rem}
  .tel-cab{display:none}
}
@media (max-width:1024px){
  .pie__top{grid-template-columns:1fr 1fr;gap:2.5rem}
  .rej-4{grid-template-columns:repeat(2,1fr)}
  .cifra:not(:last-child)::after{display:none}
}
@media (max-width:940px){
  .nav,.btn-cab{display:none}
  .hamb{display:block}
  .rej-partida,.rej-partida--ancha{grid-template-columns:1fr;gap:2.5rem}
  .rej-partida>.media{order:-1}
  .rej-3{grid-template-columns:repeat(2,1fr)}
  .hero{min-height:640px}
  .hero h1{max-width:14ch}
}
@media (max-width:680px){
  .hero__sellos{gap:1rem 1.6rem;margin-top:var(--e-4);padding-top:var(--e-2)}
  .sello__n{font-size:1.05rem}
  .sello__t{font-size:.58rem;letter-spacing:.16em}
  .rej-2,.rej-3,.rej-4{grid-template-columns:1fr}
  .pie__top{grid-template-columns:1fr;gap:2.2rem}
  .cita{grid-template-columns:1fr;text-align:center;justify-items:center}
  .cita::before{width:100%;height:2px;bottom:auto;
    background:linear-gradient(90deg,var(--gold-400),transparent)}
  .cita__firma{justify-content:center}
  .hero__acc .btn{width:100%}
  .pie__cta{flex-direction:column;align-items:flex-start}
  .pie__bajo{flex-direction:column;align-items:flex-start;gap:1rem}
  .hero__sellos{gap:1.2rem 1.8rem}
  .logo__lema{display:none}
}
@media (max-width:420px){
  /* A 320 px no caben logo + idioma + hamburguesa. El selector de idioma vive
     también en el menú móvil, que es su sitio natural en un teléfono. */
  .cab__acc .idioma{display:none}
  .logo{min-width:0}
  .logo__txt{min-width:0;overflow:hidden}
  .logo__nom,.logo__sub{overflow:hidden;text-overflow:ellipsis}
  .logo__iso{height:34px}
  .logo__nom{font-size:.78rem;letter-spacing:.14em}
  .logo__sub{font-size:.5rem;letter-spacing:.26em}
}

/* Pantallas muy anchas: no dejar que el texto se estire */
@media (min-width:1700px){
  :root{--ancho:1440px}
}

/* ---------- 17. Piezas de la Home ----------------------------------------- */
/* Palabra clave dentro del H1, con aire de antetítulo */
.hero__kw{
  display:block;font-family:var(--f-ui);font-size:clamp(.68rem,1.5vw,.82rem);
  font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-400);margin-bottom:1.1rem;
}

/* Valores de la filosofía */
.valores{display:flex;flex-wrap:wrap;gap:.7rem 1.9rem}
.valores span{
  position:relative;font-size:var(--t-xs);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-800);
}
.valores span:not(:last-child)::after{
  content:"";position:absolute;right:-1rem;top:50%;width:3px;height:3px;border-radius:50%;
  background:var(--gold-400);transform:translateY(-50%);
}

/* Bloques "lo que nos diferencia" */
.dif{position:relative;padding-left:clamp(3.2rem,5vw,4.4rem)}
.dif__n{
  position:absolute;left:0;top:-.15em;
  font-family:var(--f-display);font-size:clamp(2rem,3.6vw,2.9rem);font-weight:300;
  line-height:1;color:var(--gold-700);
}
.dif h3{color:var(--navy-900);margin-bottom:.6rem}
.dif p{font-size:var(--t-sm);color:var(--texto-suave);line-height:1.7}

/* La Albufera pide un poco más de calidez en su recuadro */
.media--alto img{aspect-ratio:3/4;object-position:center 55%}

@media (max-width:680px){
  .dif{padding-left:2.8rem}
  .hero__kw{letter-spacing:.22em}
}

/* ---------- 18. Objetivos táctiles en móvil ------------------------------- */
/* WCAG 2.5.8 pide 24px mínimo; el estándar de oficio son 44px. */
@media (max-width:940px){
  .enlace-flecha{min-height:44px;align-items:center}
  .enlace{display:inline-flex;align-items:center;min-height:44px}
  /* En el pie el enlace ocupa toda la fila: así se acierta con el pulgar
     sin tener que apuntar a una palabra de 27 px de ancho. */
  .pie li a{display:flex;align-items:center;min-height:44px;width:100%}
  .pie__legal a{display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;padding-inline:.4rem;margin-inline:-.4rem}
  /* Las migas son navegación, no texto corrido: necesitan área de toque */
  .migas a{display:inline-flex;align-items:center;justify-content:center;
    min-height:40px;min-width:44px;padding-inline:.35rem;margin-inline:-.35rem}
}

/* ---------- 19. Formularios: avisos, errores y trampa antispam ------------- */
/* El señuelo debe ser invisible pero NO display:none: algunos bots lo detectan.
   Lo sacamos del flujo y del foco. */
.trampa{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.campo__error{
  display:block;margin-top:.35rem;font-size:var(--t-xs);color:#B4232A;
  letter-spacing:.02em;text-transform:none;font-weight:400;
}
.oscuro .campo__error{color:#FF9AA0}
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"],
.campo select[aria-invalid="true"]{
  border-color:#B4232A;box-shadow:0 0 0 3px rgba(180,35,42,.10);
}
.aviso{
  display:flex;align-items:flex-start;gap:.9rem;
  padding:1.1rem 1.3rem;margin-bottom:var(--e-3);border:1px solid;
  animation:aviso-entra .5s var(--ease-salida);
}
.aviso svg{width:21px;height:21px;flex-shrink:0;margin-top:.15rem}
.aviso p{margin:0;font-size:var(--t-sm);line-height:1.6}
.aviso--ok{
  border-color:rgba(35,124,72,.35);background:rgba(35,124,72,.07);color:#1B5F38;
}
.aviso--error{
  border-color:rgba(180,35,42,.35);background:rgba(180,35,42,.06);color:#8E1B21;
}
.oscuro .aviso--ok{border-color:rgba(120,220,160,.35);background:rgba(120,220,160,.09);color:#9BE7BC}
.oscuro .aviso--error{border-color:rgba(255,150,155,.35);background:rgba(255,120,125,.09);color:#FFB3B7}
@keyframes aviso-entra{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.aviso{animation:none}}

/* ---------- 20. Tarjeta de inmueble y listado ----------------------------- */
.inm{background:var(--blanco);border:1px solid var(--borde);overflow:hidden;
  transition:transform var(--v-medio) var(--ease-salida),box-shadow var(--v-medio) var(--ease-salida),
             border-color var(--v-medio) var(--ease-suave)}
.inm:hover{transform:translateY(-6px);box-shadow:var(--sombra-3);border-color:rgba(223,195,90,.45)}
.inm__enlace{display:block;height:100%}
.inm__foto{position:relative;overflow:hidden;background:var(--navy-100)}
.inm__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform 1s var(--ease-salida)}
.inm:hover .inm__foto img{transform:scale(1.055)}
.inm__sinfoto{display:grid;place-items:center;aspect-ratio:4/3;color:var(--navy-300)}
.inm__sinfoto svg{width:54px;height:54px}
.inm__sello{
  position:absolute;top:.85rem;left:.85rem;background:rgba(6,28,42,.92);color:#fff;
  padding:.4em .95em;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:500;
}
.inm__sello--oro{background:var(--gold-400);color:var(--navy-950)}
.inm--cerrado .inm__foto img{filter:grayscale(.65)}
.inm__cuerpo{padding:clamp(1.2rem,2.4vw,1.7rem);display:flex;flex-direction:column;gap:.5rem}
.inm__zona{font-size:var(--t-xs);letter-spacing:.15em;text-transform:uppercase;color:var(--gold-800)}
.inm__titulo{font-family:var(--f-display);font-size:var(--t-xl);font-weight:400;line-height:1.22;
  color:var(--navy-900);letter-spacing:-.01em}
.inm:hover .inm__titulo{color:var(--navy-950)}
.inm__entradilla{font-size:var(--t-sm);color:var(--texto-suave);line-height:1.6}
.inm__datos{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:var(--t-sm);color:var(--texto-suave)}
.inm__datos li{position:relative}
.inm__datos li:not(:last-child)::after{content:"";position:absolute;right:-.62rem;top:50%;
  width:3px;height:3px;border-radius:50%;background:var(--gold-500);transform:translateY(-50%)}
.inm__precio{margin-top:auto;padding-top:.6rem;font-family:var(--f-display);
  font-size:clamp(1.3rem,2.4vw,1.65rem);font-weight:400;color:var(--navy-950)}

.listado__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.listado__filtros{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.listado__filtros select{
  min-height:46px;padding:.55em 1em;background:var(--blanco);border:1px solid var(--borde);
  font-family:var(--f-ui);font-size:var(--t-sm);color:var(--texto);
}
.listado__filtros select:focus{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(223,195,90,.16)}
.listado__pag{margin-top:var(--e-5);display:flex;justify-content:center}
.listado__pag svg{width:16px;height:16px;display:inline}

/* ---------- 21. Selector de idioma ---------------------------------------- */
.idioma{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;min-height:42px;padding:.2em .6em;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;
  color:rgba(255,255,255,.72);border:1px solid rgba(223,195,90,.32);
  transition:color var(--v-rapido) var(--ease-suave),
             border-color var(--v-rapido) var(--ease-suave),
             background var(--v-rapido) var(--ease-suave);
}
.idioma:hover{color:var(--navy-950);background:var(--gold-400);border-color:var(--gold-400)}
@media (max-width:940px){ .cab__acc .idioma{margin-right:.2rem} }