/* =========================================================
   La Torroja Properties — sitio v4 (24/09/2026), sobre la v3 (22/09/2026)
   v4: identidad del libro de marca, propuesta B «Cal», al final de la hoja.
   Rehecho para el Hosting Web Starter de Nominalia (Apache + PHP).

   IDENTIDAD MEZCLA, decidida por Albert el 20/08/2026:
   · Estructura y tono ......... Clikalia (limpio, blanco, poco texto)
   · Color ..................... Libro de Marca v2.0, apartado 4.3
   · Tipografía ................ de sistema (NO Cormorant ni Jost)

   Por qué tipografía de sistema: evita webfonts y por tanto evita
   cualquier petición a un tercero.

   NOVEDAD v3: en las páginas no queda ni un atributo style="" ni un
   <script> en línea. Todo el aspecto vive aquí. Es lo que permite
   que el servidor mande una política de seguridad (CSP) estricta:
   la de la v2 decía style-src 'self' y, con los estilos en línea
   que tenía (214), habría desmontado el diseño al publicarse.

   Sin cookies. Sin JavaScript de terceros. Los formularios se envían
   al propio servidor (/enviar/), no a Formspree.
   ========================================================= */

:root{
  /* ---- Color · Libro 4.3 ---- */
  --azul:#24344D;          /* azul tinta · principal */
  --azul-osc:#16202F;      /* tinta oscura · hover, pie */
  --azul-suave:#EEF1F5;    /* lavado de azul para realces */
  --oro:#A98E5D;           /* oro viejo · SOLO filetes y detalles */
  --crema:#FBF9F4;         /* bandas alternas */
  --piedra:#6F685D;        /* texto secundario (piedra del libro, oscurecido a AA) */
  --blanco:#FFFFFF;        /* fondo por defecto — el sitio es blanco, Clikalia */
  --linea:#E8E4DA;
  --rojo:#7A3B32;          /* funcional: solo errores de formulario */

  --radio:18px;
  --radio-sm:10px;
  --sombra:0 6px 24px rgba(36,52,77,.07);
  --sombra-alta:0 12px 40px rgba(36,52,77,.12);

  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--blanco); color:var(--azul);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.estrecho{max-width:760px;margin:0 auto}
.centro{text-align:center}

h1,h2,h3{line-height:1.18;letter-spacing:-.015em;font-weight:600}
h1{font-size:clamp(2.1rem,4.8vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:.5em}
h3{font-size:1.25rem;margin-bottom:.4em}
p{margin-bottom:1em}
a{color:var(--azul)}

section{padding:84px 0}
section.crema{background:var(--crema)}
.lead{font-size:1.2rem;color:var(--piedra);line-height:1.6}

/* Sobrelínea. Tracking amplio del libro (4.4), pero en PIEDRA, no en oro.
   El oro sobre crema da 2,97:1 y la etiqueta va a 11,5 px — el propio libro
   lo prohíbe: «el oro nunca compone texto por debajo de 18 px». El oro se
   queda donde sí le corresponde: el filete que va justo debajo. */
.kicker{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--piedra);margin-bottom:14px}

/* Titular a dos líneas, el patrón que Clikalia repite en todas sus secciones:
   la primera línea nombra el tema y cierra en punto; la segunda es la promesa.
   La segunda va en piedra y sin negrita para que el ojo distinga las dos
   funciones sin necesidad de un tamaño distinto. */
h1 .seg, h2 .seg{display:block;color:var(--piedra);font-weight:400}
.cierre h2 .seg{color:#B9C4D2}

/* Filete de oro: el detalle de marca. Nunca compone texto. */
.filete{height:2px;width:52px;background:var(--oro);border:0;margin:0 0 26px}
.filete.centrado{margin:0 auto 26px}

/* Marcador de contenido que Albert tiene que aportar */
.ph{background:#FCF7E8;border-bottom:2px solid var(--oro);padding:1px 4px;
  border-radius:3px;font-style:normal}

/* ---------- Wordmark ---------- */
/* Solo texto. El dibujo de la masía se probó aquí y se retiró: la marca
   en la cabecera se lee mejor limpia. El favicon es assets/marca/favicon.svg. */
.marca{display:inline-block;text-decoration:none;color:var(--azul);line-height:1}
.marca .wm1{display:block;font-size:1.05rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.marca .wm2{display:block;font-size:.42rem;font-weight:600;letter-spacing:.5em;
  text-transform:uppercase;color:var(--oro);margin-top:.6em;padding-left:.15em}

/* ---------- Cabecera ---------- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.topbar-in{display:flex;align-items:center;gap:20px;padding:16px 24px;
  max-width:1160px;margin:0 auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:28px;font-size:.94rem}
/* Los enlaces van en PIEDRA, no en azul. Antes el menú y el botón eran el
   mismo color y el botón no se distinguía de nada: solo era una mancha oscura
   entre texto oscuro. Bajando el menú a secundario, el azul del botón pasa a
   ser lo único azul de la cabecera y destaca sin cambiar de color. */
.nav a{color:var(--piedra);text-decoration:none;font-weight:500;white-space:nowrap}
.nav a:hover{color:var(--azul)}
.nav a.btn{color:#fff}
.tel-cab{display:flex;align-items:center;gap:7px;font-weight:600;font-size:.94rem;
  text-decoration:none;color:var(--azul)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--linea);
  border-radius:var(--radio-sm);padding:9px 14px;font-family:inherit;font-size:.9rem;
  font-weight:600;color:var(--azul);cursor:pointer}
/* Con «Profesionales» en el menú (23/09) no cabe entre 900 y 1060 px:
   el menú desplegable entra antes y entre 1060 y 1200 se juntan los enlaces. */
@media(max-width:1200px){.nav{gap:20px}}
@media(max-width:1060px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--blanco);border-bottom:1px solid var(--linea);
    box-shadow:var(--sombra);padding:8px 0}
  .nav.abierto{display:flex}
  .nav a{padding:14px 24px;border-bottom:1px solid var(--linea)}
  .nav .btn{margin:12px 24px;text-align:center}
}

/* ---------- Botones ---------- */
.btn{display:inline-block;font-family:inherit;font-weight:600;font-size:1rem;
  padding:15px 30px;border-radius:var(--radio-sm);text-decoration:none;cursor:pointer;
  border:0;transition:.16s;text-align:center;line-height:1.3}
/* El hover ACLARA, no oscurece. El anterior iba de 3,37 a 1,41 de luminancia:
   el ojo lo leía como «se apaga», no como «responde». Ahora sube a 6,36 y suma
   un filete de oro y sombra: el botón se levanta. Blanco encima: 9,24:1. */
.btn-p{background:var(--azul);color:#fff;
  box-shadow:0 1px 0 rgba(169,142,93,.9), 0 4px 14px rgba(36,52,77,.22)}
.btn-p:hover{background:#3A485F;color:#fff;transform:translateY(-1px);
  box-shadow:0 2px 0 var(--oro), 0 8px 22px rgba(36,52,77,.28)}
.btn-s{background:transparent;color:var(--azul);border:1.5px solid var(--azul)}
.btn-s:hover{background:var(--azul);color:#fff}
.btn-b{background:#fff;color:var(--azul)}
.btn-b:hover{background:var(--crema)}
.btn-sm{padding:12px 22px;font-size:.92rem}
.btn-xl{padding:18px 34px;font-size:1.06rem}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.microcopy{font-size:.87rem;color:var(--piedra)}

/* ---------- Hero ---------- */
.hero{padding:96px 0 88px;background:
  radial-gradient(900px 420px at 88% -12%, var(--azul-suave) 0%, rgba(238,241,245,0) 65%),
  var(--blanco)}
.hero h1{margin-bottom:24px}
/* Hero a una sola columna, centrado. La tarjeta lateral del teléfono se retiró:
   el foco es el titular y el campo de dirección, sin nada que compita. */
.hero-centro{max-width:820px;margin:0 auto}
.hero .lead{font-size:1.22rem;margin:0 auto 38px;max-width:60ch}
.hero .buscador{max-width:660px;margin:0 auto}
.hero .hero-nota{justify-content:center;margin-top:20px}
@media(max-width:900px){.hero{padding:66px 0 62px}}

/* Campo de dirección estilo Clikalia. Es un form GET sin JavaScript:
   manda ?direccion= a /vender/ y allí llega precargada. */
.buscador{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra-alta);padding:10px;display:flex;gap:10px}
.buscador input{flex:1;border:0;padding:16px 18px;font-family:inherit;font-size:1.02rem;
  color:var(--azul);background:transparent;border-radius:var(--radio-sm)}
.buscador input::placeholder{color:#9a958b}
.buscador input:focus{outline:2px solid var(--oro);outline-offset:-1px}
@media(max-width:560px){.buscador{flex-direction:column}.buscador .btn{width:100%}}

.hero-nota{display:flex;align-items:center;gap:10px;margin-top:18px;
  font-size:.9rem;color:var(--piedra)}

/* ---------- Rejillas ---------- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:32px;box-shadow:var(--sombra)}
.card.plana{box-shadow:none}

/* ---------- Pasos ---------- */
.paso .num{width:44px;height:44px;border-radius:50%;background:var(--azul-suave);
  color:var(--azul);display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:1.05rem;margin-bottom:18px}
.paso p{color:var(--piedra);margin-bottom:0}
.paso .plazo{display:inline-block;margin-top:16px;font-size:.74rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--azul);
  border-top:2px solid var(--oro);padding-top:8px}   /* el oro va en el filete, no en la letra */

/* ---------- Antes / después ---------- */
.antes-despues{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:620px){.antes-despues{grid-template-columns:1fr}}
.foto{border-radius:var(--radio);overflow:hidden;background:var(--crema);
  border:1px solid var(--linea);position:relative}
.foto img{width:100%;aspect-ratio:3/2;object-fit:cover}
.foto .etiqueta{position:absolute;z-index:1;top:14px;left:14px;background:rgba(36,52,77,.92);
  color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 13px;border-radius:100px}
.foto.antes img{filter:grayscale(1)}
/* Hueco mientras no haya foto real */
.foto-hueco{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;color:var(--piedra);font-size:.9rem;
  background:repeating-linear-gradient(45deg,var(--crema),var(--crema) 12px,#F5F1E8 12px,#F5F1E8 24px)}

/* ---------- Situaciones ---------- */
.situacion{display:block;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio);padding:36px;text-decoration:none;color:var(--azul);
  box-shadow:var(--sombra);transition:.18s;height:100%}
.situacion:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);border-color:var(--oro)}
.situacion p{color:var(--piedra);margin-bottom:16px}
.situacion .flecha{font-weight:600;color:var(--azul);margin:0}

/* ---------- Valores ---------- */
.valor h3{font-size:1.12rem}
.valor p{color:var(--piedra);font-size:.98rem;margin-bottom:0}
.valor .filete{margin-bottom:18px}

/* ---------- Zonas ---------- */
.zonas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px;list-style:none;padding:0}
.zona{background:#fff;border:1px solid var(--linea);border-radius:100px;
  padding:9px 20px;font-size:.93rem;color:var(--azul)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--linea);padding:22px 0}
.faq summary{font-weight:600;font-size:1.08rem;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:1.5rem;font-weight:400;color:var(--oro);
  line-height:1;flex-shrink:0}
.faq details[open] summary:after{content:"\2212"}
.faq details > *:not(summary){margin-top:14px;color:var(--piedra)}

/* ---------- Banda de cierre ---------- */
.cierre{background:var(--azul);color:#fff;padding:88px 0}
.cierre h2{color:#fff}
.cierre p{color:#CBD2DC}
.cierre .filete{background:var(--oro)}

/* ---------- «Prefiero que me llaméis» ----------
   Dos botones iguales, uno al lado del otro, y el formulario se despliega
   debajo a todo el ancho. Sin JavaScript: es la técnica de la casilla
   oculta — un checkbox invisible pero enfocable con el tabulador, una
   etiqueta estilizada como botón, y el panel que aparece con :checked.
   Se prefirió a un <details> porque este tiene que ocupar el ancho
   completo para desplegarse, y entonces los dos botones no quedan
   igualados en una fila. */
.abre-llamada{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Los dos botones del cierre son IGUALES: mismo color, mismo tamaño.
   La rejilla de dos columnas idénticas los iguala en ancho aunque el texto
   sea de distinta longitud, y align-items:stretch los iguala en alto si
   uno de los dos llegara a partirse en dos líneas. */
.ctas-par{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;
  max-width:620px;margin:0 auto}
.ctas-par .btn{width:100%;display:flex;align-items:center;justify-content:center}
@media(max-width:560px){.ctas-par{grid-template-columns:1fr}}

/* Estado abierto: como los dos son blancos, la única marca es un filete
   de oro bajo el que está activo. Suficiente y no rompe la simetría. */
.abre-llamada:checked ~ .ctas-par label{box-shadow:inset 0 -3px 0 var(--oro)}
.abre-llamada:focus-visible ~ .ctas-par label{outline:3px solid var(--oro);outline-offset:3px}

.panel-llamada{display:none;max-width:560px;margin:24px auto 0;text-align:left;
  background:#fff;color:var(--azul);border-radius:var(--radio);
  border-top:3px solid var(--oro);padding:28px 28px 30px;
  box-shadow:0 12px 40px rgba(0,0,0,.22)}
.abre-llamada:checked ~ .panel-llamada{display:block}
/* Formulario «Quiero verlo»: también se abre al llegar con #visita */
.panel-visita:target{display:block}
/* Formulario de llamada abierto desde un enlace #ancla (portada de prueba, 24/09) */
.panel-llamada[id]:target{display:block}
.panel-llamada[id]{scroll-margin-top:100px}
.hero .hero-llamada{margin:14px 0 0;font-size:.95rem;color:var(--piedra)}
.hero .hero-llamada a{color:var(--azul);font-weight:600}
.hero .hero-llamada a[href^="tel:"]{white-space:nowrap}
.panel-visita{scroll-margin-top:100px}
.panel-visita select{margin-bottom:14px}
.panel-llamada p{color:var(--piedra)}
.panel-llamada label{margin-top:14px}
.panel-llamada .fila label{margin-top:0}

.franjas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:7px}
.franjas label{display:block;margin:0;text-transform:none;letter-spacing:0;
  font-weight:400;font-size:.92rem;text-align:center;border:1px solid var(--linea);
  border-radius:var(--radio-sm);padding:11px 6px;cursor:pointer;color:var(--piedra)}
.franjas input{position:absolute;opacity:0;width:0;height:0}
.franjas input:checked + span{color:var(--azul);font-weight:600}
.franjas label:has(input:checked){border-color:var(--oro);background:var(--crema)}
.franjas label:focus-within{outline:2px solid var(--oro);outline-offset:2px}
@media(max-width:460px){.franjas{grid-template-columns:1fr}}
@media(max-width:520px){.cierre .ctas .btn{width:100%}}

/* ---------- Pie ---------- */
footer.pie{background:var(--azul-osc);color:#B9C0CB;font-size:.9rem;
  padding:56px 0 32px;border-top:2px solid var(--oro)}
.pie-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:34px}
@media(max-width:760px){.pie-grid{grid-template-columns:1fr;gap:28px}}
.pie .pie-titulo{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:#fff;
  font-weight:600;margin-bottom:14px}
.pie ul{list-style:none}
.pie li{margin-bottom:9px}
.pie a{color:#B9C0CB;text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline}
.pie .marca{color:#fff;margin-bottom:16px}
.pie .marca .wm1{color:#fff}
.pie-legal{border-top:1px solid rgba(169,142,93,.3);padding-top:24px;
  font-size:.82rem;line-height:1.7;color:#98A0AC}
.pie-lema{font-size:.95rem;color:var(--oro);letter-spacing:.02em;margin-top:6px}

/* ---------- Formularios ---------- */
form label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;margin:20px 0 7px;color:var(--azul)}
input,select,textarea{width:100%;padding:14px 16px;border:1px solid var(--linea);
  border-radius:var(--radio-sm);font-size:1rem;font-family:inherit;
  background:#fff;color:var(--azul)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--oro);
  box-shadow:0 0 0 3px rgba(169,142,93,.16)}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.fila{grid-template-columns:1fr}}
.consent{display:flex;gap:11px;align-items:flex-start;margin-top:22px}
.consent input{width:auto;flex-shrink:0;margin-top:5px;accent-color:var(--azul)}
.consent span{font-size:.91rem;line-height:1.55;color:var(--piedra)}

/* ---------- Impresión ---------- */
@media print{
  .topbar,.ctas,.buscador,.ctas-par,.panel-llamada{display:none}
  body{font-size:11pt}
  .cierre,footer.pie{background:#fff;color:#000}
  .pie a,.pie h4,.cierre h2,.cierre p{color:#000}
}

/* =========================================================
   BLOQUE AÑADIDO EL 20/08/2026

   La primera mitad repara un fallo: .protocolo, .bullets y .nota
   se usaban en /como-trabajamos/ desde que se escribió la página
   y NO tenían ni una línea de CSS. Los cuatro pasos del proceso
   se veían como una lista numerada del navegador, sin nada.

   La segunda mitad es lo que necesitan las tres páginas nuevas.
   ========================================================= */

/* ---------- Lista numerada del proceso ---------- */
.protocolo{list-style:none;counter-reset:paso;margin:0;padding:0}
.protocolo li{counter-increment:paso;position:relative;padding:0 0 30px 62px;
  border-left:1px solid var(--linea);margin-left:19px}
.protocolo li:last-child{border-left-color:transparent;padding-bottom:0}
.protocolo li::before{content:counter(paso);position:absolute;left:-19px;top:-2px;
  width:38px;height:38px;border-radius:50%;background:var(--blanco);
  border:1.5px solid var(--oro);color:var(--azul);
  font-weight:600;font-size:.95rem;display:flex;align-items:center;justify-content:center}
.protocolo h3{font-size:1.12rem;font-weight:600;margin-bottom:.35em;color:var(--azul)}
.protocolo p{color:var(--piedra);margin-bottom:0}
section.crema .protocolo li::before{background:var(--crema)}

/* ---------- Listas con marca de oro ---------- */
.bullets{list-style:none;padding:0}
.bullets li{position:relative;padding-left:24px;margin-bottom:11px;color:var(--piedra)}
.bullets li::before{content:"";position:absolute;left:0;top:.62em;
  width:9px;height:2px;background:var(--oro)}
.bullets li b{color:var(--azul)}
.bullets li:last-child{margin-bottom:0}

/* ---------- Recuadro de aviso ---------- */
.nota{background:var(--crema);border-left:3px solid var(--oro);
  border-radius:0 var(--radio-sm) var(--radio-sm) 0;
  padding:20px 24px;color:var(--piedra);line-height:1.6}

/* ---------- Utilidad de accesibilidad ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Ficha de inmueble (/comprar/) ---------- */
.precio{font-size:clamp(2rem,4vw,2.9rem);font-weight:600;color:var(--azul);
  letter-spacing:-.02em;line-height:1}
.precio-nota{font-size:.9rem;color:var(--piedra);margin-top:8px}
.precio-nota.precio-impuestos{margin-top:-6px;font-size:.84rem}
.precio-s + .precio-impuestos{margin-top:-4px;margin-bottom:0}
.resumen{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.resumen li{background:var(--azul-suave);color:var(--azul);border-radius:100px;
  padding:7px 15px;font-size:.9rem;font-weight:500}

/* Ficha tecnica: pares dato/valor. En movil pasa a una columna
   porque a dos se parten los valores largos como "Orientacion". */
.ficha{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;margin:0}
.ficha div{display:flex;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--linea)}
.ficha dt{color:var(--piedra);font-size:.94rem}
.ficha dd{margin:0;font-weight:600;text-align:right;color:var(--azul)}
@media(max-width:700px){.ficha{grid-template-columns:1fr;gap:0}}

/* Galeria: hueco marcado mientras no haya fotos reales */
.galeria{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.galeria .hueco{background:var(--crema);border:1px dashed var(--oro);
  border-radius:var(--radio-sm);min-height:150px;display:flex;
  align-items:center;justify-content:center;text-align:center;padding:16px;
  font-size:.82rem;color:var(--piedra);line-height:1.45}
.galeria .hueco.grande{grid-row:span 2;min-height:312px}
@media(max-width:700px){
  .galeria{grid-template-columns:1fr 1fr}
  .galeria .hueco.grande{grid-column:span 2;grid-row:auto;min-height:180px}
}

/* ---------- Vias de contacto (/contacto/) ---------- */
.via{display:block;text-decoration:none;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--radio);padding:28px 26px;
  box-shadow:var(--sombra);transition:.16s;height:100%}
.via:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta);
  border-color:var(--oro)}
.via h3{margin-bottom:.3em}
.via .dato{font-size:1.12rem;font-weight:600;color:var(--azul);
  word-break:break-word;display:block;margin-bottom:8px}
.via p{color:var(--piedra);font-size:.93rem;margin-bottom:0}

/* ---------- Páginas legales y de texto largo ---------- */
/* Texto denso: se lee mejor con la línea algo más corta y los
   epígrafes bien separados. La numeración es manual, no automática,
   porque los apartados legales se citan por su número. */
.legal{max-width:720px;margin:0 auto}
.legal h2{font-size:1.32rem;margin:44px 0 14px;padding-top:22px;
  border-top:1px solid var(--linea)}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.legal h3{font-size:1.05rem;margin:26px 0 8px}
.legal p,.legal li{color:var(--piedra);font-size:1rem;line-height:1.72}
.legal b,.legal strong{color:var(--azul)}
.legal .fecha{font-size:.9rem;color:var(--piedra);margin-bottom:34px}
.legal table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.93rem}
.legal th{text-align:left;padding:11px 12px 11px 0;border-bottom:2px solid var(--oro);
  color:var(--azul);font-weight:600;vertical-align:bottom}
.legal td{padding:12px 12px 12px 0;border-bottom:1px solid var(--linea);
  color:var(--piedra);vertical-align:top}
.legal td:first-child{color:var(--azul);font-weight:500}
@media(max-width:640px){
  .legal table,.legal thead,.legal tbody,.legal tr,.legal th,.legal td{display:block;width:100%}
  .legal thead{display:none}
  .legal tr{border-bottom:1px solid var(--linea);padding:12px 0}
  .legal td{border:0;padding:3px 0}
}
.migas{font-size:.85rem;color:var(--piedra);margin-bottom:26px}
.migas a{color:var(--piedra)}

/* ---------- 404 ---------- */
.error-404{text-align:center;padding:120px 0 110px}
.error-404 .cifra{font-size:clamp(4rem,12vw,7rem);font-weight:600;color:#C3CEDC;
  line-height:1;letter-spacing:-.04em;margin-bottom:10px}


/* =========================================================
   BLOQUE v3 — 22/09/2026
   Sustituye a los atributos style="" de la v2, uno por uno.
   ========================================================= */

/* ---------- Color del énfasis ----------
   En la v2 cada <b> llevaba style="color:var(--azul)". Ahora es
   la regla general: la negrita va en azul tinta sobre texto piedra. */
b,strong{color:var(--azul)}
.cierre b,.cierre strong{color:#fff}
.texto-2{color:var(--piedra)}
.texto-grande{font-size:1.1rem}

/* ---------- Espaciado ---------- */
.mb-0{margin-bottom:0}
.mb-s{margin-bottom:14px}
.mb-m{margin-bottom:28px}
.mb-l{margin-bottom:34px}
.mt-s{margin-top:16px}
.mt-m{margin-top:28px}
.mt-l{margin-top:26px}
.mt-xl{margin-top:44px}
.my-s{margin:20px 0}
.pt-s{padding-top:20px}
.pt-m{padding-top:44px}
.intro{margin-bottom:46px}

/* ---------- Cabeceras de las páginas interiores ---------- */
.hero-int{padding:76px 0 40px}
.hero-int .lead{margin:22px auto 0;max-width:60ch}
.hero-migas{padding:70px 0 36px}
.hero-migas .lead{margin:22px 0 0}
.estado-inmueble{display:inline-block;margin-top:18px;font-size:.74rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;border-top:2px solid var(--oro);padding-top:8px}
@media(max-width:900px){.hero-int{padding:60px 0 32px}}

/* Secciones que en la v2 llevaban el relleno escrito a mano */
section.sec-nota{padding:26px 0 56px}
section.sec-encuadre{padding:26px 0 60px}
section.sec-vias{padding:16px 0 70px}
section.sec-legal{padding:64px 0 30px}
section.sec-ficha{padding-top:48px}

/* ---------- Rejillas con variante ---------- */
.g2-medio{align-items:center;gap:56px}
.g2-ficha{gap:48px;align-items:start;margin-top:40px}
.g2-lista{gap:6px 32px}
.g2-lista2{gap:20px 40px}
.h-lista{font-size:1.1rem}

/* ---------- Tarjetas ---------- */
.card p:last-child{margin-bottom:0}
.card.suave{background:var(--crema);box-shadow:none}
.card.aviso{border-left:3px solid var(--oro);border-radius:0 var(--radio) var(--radio) 0}
.card.aviso p{color:var(--piedra)}
.h-aviso{font-size:1.25rem;margin-bottom:10px}
.nota-azul{background:var(--azul-suave)}
.nota p:last-child{margin-bottom:0}

/* ---------- Varios ---------- */
.emblema{max-width:340px;margin:0 auto 26px}
.emblema-s{max-width:420px;margin-bottom:30px}
.separador{border:0;height:1px;background:var(--oro);opacity:.45;margin:32px 0}
.btn-bloque{width:100%}
.cierre .lead{margin-bottom:30px}
.pie-contacto{margin-top:18px;margin-bottom:0}
.h1-legal{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:10px}

/* ---------- Formularios ---------- */
form label.consent{text-transform:none;letter-spacing:0;font-weight:400;margin-top:24px}
.panel-llamada label.consent{margin-top:20px}
/* Primera capa de privacidad junto a cada formulario (24/09) */
.capa-privacidad{margin:24px 0 0;font-size:.84rem;line-height:1.55;color:var(--piedra)}
.capa-privacidad a{color:inherit}
form .capa-privacidad + label.consent{margin-top:10px}
.opcional{text-transform:none;font-weight:400;letter-spacing:0;color:var(--piedra)}
.panel-intro{margin-bottom:20px;font-size:.97rem}
/* «Cuándo te viene mejor» ahora es un grupo con su leyenda (antes era
   una etiqueta suelta que no apuntaba a ningún campo) */
.franjas-grupo{border:0;padding:0;margin:14px 0 0;min-width:0}
.franjas-grupo legend{font-size:.8rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--azul);padding:0}
/* Campo trampa anti-robots: fuera de la vista y del tabulador */
.campo-trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.lista-errores{text-align:left;max-width:520px;margin:26px auto 22px}

/* ---------- Catálogo /comprar/ ---------- */
.listado{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px}
.inmueble-tarjeta{display:block;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio);overflow:hidden;text-decoration:none;color:var(--azul);
  box-shadow:var(--sombra);transition:.18s;max-width:560px}
.inmueble-tarjeta:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);border-color:var(--oro)}
.inmueble-foto{position:relative;background:var(--crema)}
.inmueble-foto img{width:100%;aspect-ratio:3/2;object-fit:cover}
.inmueble-foto .etiqueta{position:absolute;top:14px;left:14px;z-index:1;background:rgba(36,52,77,.92);
  color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 13px;border-radius:100px}
.inmueble-texto{padding:24px 26px 26px}
.inmueble-texto h3{margin-bottom:4px}
.inmueble-lugar{color:var(--piedra);margin-bottom:16px}
.precio-s{font-size:1.8rem}
.inmueble-texto .resumen{margin-top:14px}
.inmueble-texto .flecha{font-weight:600;margin:18px 0 0}
/* Con una sola vivienda, la tarjeta se pone en horizontal y centrada:
   en la rejilla quedaba pequeña y pegada a la izquierda. */
.listado.uno{display:block;max-width:980px;margin:0 auto}
.listado.uno .inmueble-tarjeta{display:grid;grid-template-columns:1.25fr 1fr;max-width:none;align-items:stretch}
.listado.uno .inmueble-foto img,.listado.uno .inmueble-foto .foto-hueco{height:100%;min-height:300px;aspect-ratio:auto}
.listado.uno .inmueble-texto{padding:34px 34px;display:flex;flex-direction:column;justify-content:center}
@media(max-width:760px){.listado.uno .inmueble-tarjeta{grid-template-columns:1fr}
  .listado.uno .inmueble-foto img,.listado.uno .inmueble-foto .foto-hueco{min-height:0;aspect-ratio:3/2}}

/* Galería de la ficha con fotos reales */
.galeria-foto{position:relative;display:block;border-radius:var(--radio-sm);overflow:hidden;cursor:zoom-in}
.galeria-foto img{display:block;width:100%;height:100%;min-height:150px;object-fit:cover;
  transition:transform .35s ease}
.galeria-foto:hover img{transform:scale(1.03)}
.galeria-foto:focus-visible{outline:3px solid var(--oro);outline-offset:3px}
.galeria-foto.grande{grid-row:span 2}
.galeria-foto.grande img{min-height:312px}
.galeria-foto.extra{display:none}
.galeria-ver{position:absolute;right:14px;bottom:14px;background:rgba(255,255,255,.94);
  color:var(--azul);font-size:.85rem;font-weight:600;padding:8px 14px;border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,.15)}
.galeria-mas{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(22,32,47,.55);color:#fff;font-size:1.6rem;font-weight:600}
@media(max-width:700px){
  .galeria-foto.grande{grid-column:span 2;grid-row:auto}
  .galeria-foto.grande img{min-height:180px}
}

/* Visor de fotos a pantalla completa (ficha) */
.visor{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;border:0;padding:0;background:rgba(14,20,30,.96);color:#fff}
.visor:not([open]){display:none}
.visor[open]{display:flex;align-items:center;justify-content:center}
.visor::backdrop{background:rgba(14,20,30,.96)}
html.visor-abierto{overflow:hidden}
.visor-marco{margin:0;max-width:min(1200px,calc(100vw - 150px));text-align:center}
.visor-img{display:block;max-width:100%;max-height:calc(100vh - 120px);width:auto;height:auto;
  margin:0 auto;border-radius:6px;user-select:none}
.visor-pie{margin-top:14px;font-size:.95rem;color:rgba(255,255,255,.85);line-height:1.4}
.visor-cuenta{color:rgba(255,255,255,.6);white-space:nowrap;margin-left:6px}
.visor-cerrar,.visor-flecha{position:absolute;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  font-family:inherit;line-height:1;transition:background .2s}
.visor-cerrar:hover,.visor-flecha:hover{background:rgba(255,255,255,.26)}
.visor-cerrar:focus-visible,.visor-flecha:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
.visor-cerrar{top:18px;right:18px;width:48px;height:48px;font-size:2rem}
.visor-flecha{top:50%;transform:translateY(-50%);width:56px;height:56px;font-size:2.6rem;padding-bottom:4px}
.visor-ant{left:18px}
.visor-sig{right:18px}
@media(max-width:700px){
  .visor-marco{max-width:100vw}
  .visor-img{max-height:calc(100vh - 170px);border-radius:0}
  .visor-pie{padding:0 16px}
  .visor-cerrar{top:12px;right:12px}
  .visor-flecha{top:auto;bottom:22px;transform:none;width:52px;height:52px}
  .visor-ant{left:calc(50% - 64px)}
  .visor-sig{right:calc(50% - 64px)}
}

/* ---------- Páginas de resultado (gracias, error) ---------- */
.lead-error{margin:22px auto 34px;max-width:52ch}
.ctas-estrechos{max-width:560px}

/* ---------- Llegada directa al formulario de /vender/ (23/09/2026) ----------
   El buscador de la home lleva a /vender/#formulario. El margen evita
   que la cabecera fija tape el principio de la sección. */
#formulario{scroll-margin-top:72px}
.nota-form{display:none;margin:0 0 6px;font-size:.93rem}
#formulario:target .nota-form{display:block}

/* El texto de ayuda del buscador («Calle, número y población de tu
   vivienda», 23/09/2026) no cabía entero en móvil: un punto menos de
   letra y menos relleno lateral solo en pantallas estrechas. */
@media(max-width:560px){
  .buscador input{font-size:.94rem;padding:15px 10px}
  .buscador input::placeholder{font-size:.9rem}
}
@media(max-width:380px){
  .buscador{padding:8px}
  .buscador input{padding:14px 8px}
  .buscador input::placeholder{font-size:.84rem}
}

/* ---------- Casillas de situación en /vender/ (23/09/2026) ---------- */
.grupo-casillas{border:0;padding:0;margin:20px 0 0;min-width:0}
.grupo-casillas legend{font-size:.8rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--azul);padding:0;margin-bottom:7px}
.grupo-casillas legend .opcional{font-size:.8rem}
.casillas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
form .casillas label{display:flex;gap:10px;align-items:center;margin:0;text-transform:none;
  letter-spacing:0;font-weight:400;font-size:.95rem;color:var(--piedra);
  border:1px solid var(--linea);border-radius:var(--radio-sm);padding:12px 14px;cursor:pointer;background:#fff}
.casillas input{width:auto;flex-shrink:0;accent-color:var(--azul)}
.casillas label:has(input:checked){border-color:var(--oro);background:var(--crema);color:var(--azul)}
.casillas label:focus-within{outline:2px solid var(--oro);outline-offset:2px}
@media(max-width:460px){.casillas{grid-template-columns:1fr}}
.casillas label:has(input[data-exclusiva]){grid-column:1/-1}

/* Habitaciones y baños: dos desplegables cortos que se quedan en la misma
   fila también en móvil (23/09/2026). */
@media(max-width:560px){.fila.fila-fija{grid-template-columns:1fr 1fr}}
select:invalid{color:#9a958b}
select option{color:var(--azul)}

/* Condiciones de la oferta en la página de gracias de /vender/ (23/09/2026) */
.nota-gracias{text-align:left;max-width:560px;margin:0 auto 34px}
.nota-gracias p{margin-bottom:10px}

/* Preguntas frecuentes de /vender/ (23/09/2026) */
.faq .bullets{margin-top:12px}
.faq-cierre{margin:34px auto 0;color:var(--piedra)}
.faq-cierre a{font-weight:600}

/* Situaciones de «Cómo trabajamos»: desplegables dentro de la tarjeta */
.faq-situaciones details{padding:16px 0}
.faq-situaciones details:last-child{border-bottom:0;padding-bottom:0}
.faq-situaciones summary{font-size:1rem}

/* ---------- Carrusel antes / después («Cómo trabajamos») ---------- */
.carrusel-pista{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;outline-offset:4px}
.carrusel-pista::-webkit-scrollbar{display:none}
.carrusel-diapo{flex:0 0 100%;scroll-snap-align:start}
.carrusel-pie{margin:12px 0 0;text-align:center;color:var(--piedra);font-size:.9rem}
.carrusel-mandos{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px}
.carrusel-mandos[hidden]{display:none}
.carrusel-flecha{width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);
  background:#fff;color:var(--azul);font-size:1.2rem;cursor:pointer;line-height:1}
.carrusel-flecha:hover{border-color:var(--oro)}
.carrusel-pausa{width:36px;height:36px;border-radius:50%;border:1px solid var(--linea);
  background:#fff;color:var(--piedra);font-size:.7rem;cursor:pointer;line-height:1;letter-spacing:-.1em}
.carrusel-pausa:hover{border-color:var(--oro);color:var(--azul)}
.carrusel-puntos{display:flex;gap:10px}
.carrusel-punto{width:10px;height:10px;border-radius:50%;border:0;padding:0;
  background:var(--linea);cursor:pointer}
.carrusel-punto[aria-current="true"]{background:var(--oro)}
@media(prefers-reduced-motion:reduce){.carrusel-pista{scroll-behavior:auto}}

/* ---------- Equipo («Conócenos») ---------- */
.h-equipo{font-size:1.35rem;margin:0}
.persona-foto{border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea);
  background:var(--crema);margin-bottom:16px}
.persona-foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* Retratos en blanco y negro (23/09/2026, Albert): igualan fotos de calidad
   y luz muy distintas. Los archivos se guardan en color: quitar esta línea
   devuelve el color sin tocar las fotos. */
.persona-foto img{filter:grayscale(1) contrast(1.05)}
.persona-foto .foto-hueco{aspect-ratio:4/5}
.persona h3{font-size:1.08rem;margin:0 0 4px}
.persona-cargo{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--piedra);margin:0 0 10px}   /* el oro no va en la letra (libro de marca) */

/* Enlace «¿Prefieres escribirnos?» bajo los botones del cierre */
.cierre-escribir{margin:18px 0 0;font-size:.95rem}
.cierre .cierre-escribir a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- Acceso a /profesionales/ ---------- */
.acceso{max-width:460px}
.acceso-error{color:var(--rojo);font-weight:600;margin:0 0 18px}
.acceso-pedir{margin:34px 0 14px}

/* ---------- Avisos del formulario en la propia página (app.js) ---------- */
.form-aviso{border:1px solid var(--rojo);background:#FBF4F2;color:var(--rojo);
  border-radius:var(--radio-sm);padding:14px 18px;margin:0 0 22px;text-align:left;
  scroll-margin-top:110px}
.form-aviso p{margin:0 0 6px;color:var(--rojo);font-size:1rem}
.form-aviso b{color:var(--rojo)}
.form-aviso li{color:var(--rojo)}
.form-aviso ul{margin:0;padding-left:20px}
.form-aviso a{color:var(--rojo)}
.form-aviso:focus{outline:0}
.form-aviso:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
input.campo-error,select.campo-error,textarea.campo-error{border-color:var(--rojo);
  box-shadow:0 0 0 3px rgba(122,59,50,.14)}
form label.consent.campo-error{color:var(--rojo)}
fieldset.campo-error .casillas label,fieldset.campo-error .franjas label{border-color:var(--rojo);
  box-shadow:0 0 0 3px rgba(122,59,50,.14)}
fieldset.campo-error legend{color:var(--rojo)}
form label.consent.campo-error input{outline:2px solid var(--rojo);outline-offset:2px}


/* =========================================================
   v4 · FUENTES DEL LIBRO DE MARCA (autoalojadas)
   ========================================================= */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fuentes/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;
  src:url(/assets/fuentes/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fuentes/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;
  src:url(/assets/fuentes/jost-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fuentes/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fuentes/jost-latin-500-normal.woff2) format("woff2")}


/* =========================================================
   PROPUESTA B · «CAL» — v4, 24/09/2026
   La evolución más prudente de la v3: misma composición (todo centrado,
   bandas alternas, tarjetas), pero con la tipografía y el color del libro.
   Elegida por Albert el 24/09/2026. Va al final de esta hoja y manda sobre
   lo anterior (v3): solo cambia el aspecto.

   · Fondo blanco cal del libro (#FDFCF9, «soportes digitales»), bandas en
     crema papel (#F7F3EA, más presente que la #FBF9F4 de la v3).
   · Cormorant en titulares y wordmark; Jost en texto y cifras.
   · Segunda línea de los titulares en Cormorant redonda, en piedra.
   · Radios medios (6 px) y sombras casi imperceptibles.
   ========================================================= */

:root{
  --azul:#24344D;
  --azul-osc:#16202F;
  --azul-suave:#EEF0F3;
  --oro:#A98E5D;
  --crema:#F7F3EA;         /* bandas: crema papel del libro */
  --piedra:#6F685D;
  --blanco:#FDFCF9;        /* base: blanco cal del libro */
  --linea:#E6E0D3;

  --radio:8px;
  --radio-sm:6px;
  --sombra:0 1px 2px rgba(22,32,47,.05);
  --sombra-alta:0 6px 18px rgba(22,32,47,.08);

  --display:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

html{font-synthesis:none}
body{background:var(--blanco);font-family:var(--sans);font-weight:400}
b,strong{font-weight:500}

/* ---------- Titulares ---------- */
h1,h2{font-family:var(--display);font-weight:600;letter-spacing:.005em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(2.45rem,5.2vw,3.625rem)}   /* libro 4.4: H1 de 34 a 58 px */
h2{font-size:clamp(2rem,3.5vw,2.75rem)}
h3{font-family:var(--sans);font-weight:500;letter-spacing:0;line-height:1.3}
h1 .seg,h2 .seg{font-weight:500;color:var(--piedra)}
.cierre h2 .seg{color:#C8D0DB}
.h1-legal{font-size:clamp(2.2rem,4.4vw,3rem)}
.legal h2{font-family:var(--display);font-size:1.65rem}
.h-equipo{font-size:1.65rem}

.kicker{font-weight:500;letter-spacing:.3em}
.filete{height:1px;width:56px}

/* ---------- Wordmark (Libro 4.1) ---------- */
.marca .wm1{font-family:var(--display);font-weight:600;font-size:1.38rem;letter-spacing:.22em}
.marca .wm2{font-family:var(--sans);font-weight:500;font-size:.44rem;letter-spacing:.55em;margin-top:.45em;padding-left:.2em}

/* ---------- Cabecera ---------- */
.topbar{background:rgba(253,252,249,.95)}
.nav a{font-weight:400}
.nav a[aria-current]{color:var(--azul)}
.menu-btn{font-weight:500}

/* ---------- Botones: sin saltito; el hover solo oscurece ---------- */
.btn{font-weight:500;transition:background-color .16s,color .16s,border-color .16s}
.btn-p{box-shadow:none}
.btn-p:hover{background:var(--azul-osc);transform:none;box-shadow:none}
.btn-b:hover{background:var(--crema)}

.buscador{box-shadow:0 8px 28px rgba(22,32,47,.08);border-radius:var(--radio)}

/* ---------- Tarjetas ---------- */
.card,.situacion,.via,.inmueble-tarjeta{border-color:var(--linea)}
.situacion:hover,.via:hover,.inmueble-tarjeta:hover{transform:none}
.situacion .flecha,.inmueble-texto .flecha{font-weight:500}
.card.suave{background:var(--crema)}

/* ---------- Pasos ---------- */
.paso .num{background:transparent;border:1px solid var(--oro);font-weight:400}
.paso .plazo{font-weight:500;border-top-width:1px}
.protocolo li::before{border-width:1px;font-weight:400}

/* ---------- Fotos y etiquetas ---------- */
.foto .etiqueta,.inmueble-foto .etiqueta{border-radius:4px;font-weight:500}
.galeria-ver{font-weight:500}

/* ---------- Zonas ---------- */
.zona{border-radius:var(--radio-sm);background:var(--blanco)}

/* ---------- Preguntas frecuentes ---------- */
.faq summary{font-weight:500}
.faq summary:after{font-weight:300}

/* ---------- Pie ---------- */
.pie .pie-titulo{font-weight:500;color:var(--oro);letter-spacing:.28em}
.pie-lema{font-family:var(--display);font-style:italic;font-size:1.2rem;font-weight:500}

/* ---------- Formularios ---------- */
form label,.franjas-grupo legend,.grupo-casillas legend{font-weight:500;letter-spacing:.1em}
input,select,textarea{background:#fff}
.franjas input:checked + span{font-weight:500}

/* ---------- Cifras en Jost (Libro 4.4) ---------- */
.precio{font-weight:400}
.ficha dd{font-weight:500}
.resumen li{font-weight:400}
.persona-cargo{font-weight:500}
.error-404 .cifra{font-weight:300}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Puntos del carrusel: el dibujo sigue midiendo 10 px, pero la zona
   que se puede pulsar pasa a 24 × 24 (WCAG 2.2, tamaño del objetivo). */
.carrusel-puntos{gap:0}
.carrusel-punto{width:24px;height:24px;background:transparent;display:flex;align-items:center;justify-content:center}
.carrusel-punto::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--linea)}
.carrusel-punto[aria-current="true"]{background:transparent}
.carrusel-punto[aria-current="true"]::before{background:var(--oro)}

/* Sin el halo de la v3 en las cabeceras (brief 5.3): fondo liso */
.hero.hero-int{background:none}

/* Textos de ayuda de los campos («Elige», «Calle, número…») en piedra:
   el gris de la v3 daba 2,9:1. Ahora pasan AA sin confundirse con lo escrito. */
select:invalid,input::placeholder,textarea::placeholder,.buscador input::placeholder{color:var(--piedra);opacity:1}
.error-404 .cifra{color:#CFC5B1}

/* ---------- Revisión final de la v4 (24/09/2026) ---------- */
/* Títulos del pie: son etiquetas, no titulares. El libro (4.4) las quiere en
   Jost Medium con tracking; en Cormorant a 11 px no se leían bien. */
.pie .pie-titulo{font-family:var(--sans);font-size:.7rem}
.pie-lema{font-size:1.25rem}                 /* 20 px: Cormorant nunca por debajo */
/* Pesos: Jost solo tiene 300/400/500. Lo que la v3 pedía en 600 se declara
   en 500, que es como ya se dibujaba (sin negritas falsas). */
.protocolo h3,.via .dato,.legal th,.legal td:first-child,.hero .hero-llamada a,.faq-cierre a,
.nav a.btn,.btn{font-weight:500}
/* El dibujo de «Conócenos» no puede ser más ancho que la pantalla (320 px). */
.emblema{max-width:min(340px,100%)}
.emblema-s{max-width:min(420px,100%)}
/* Foco del teclado visible y de la marca: tinta sobre claro, crema sobre oscuro. */
:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
.cierre :focus-visible,footer.pie :focus-visible,.visor :focus-visible{outline-color:var(--crema)}
/* Menú desplegable en móvil: una sombra suave lo separa del contenido de debajo. */
@media(max-width:1060px){.nav{box-shadow:0 14px 28px rgba(22,32,47,.10)}}

/* ---------- Portada (Albert, 24/09/2026) ----------
   Mismo orden que «Conócenos»: primero la frase, luego el sello de marca
   y después el texto y el campo de dirección.
   · «Compramos tu casa en Barcelona.» es lo primero que se ve: H1 al
     máximo que admite el libro (58 px), en una línea en escritorio.
   · «Y le damos una segunda vida» a 40 px (28 en móvil): por debajo del
     titular pero con presencia. El libro no fija el tamaño de esta línea.
   · Sello: la misma composición que la imagen para compartir (dibujo,
     LA TORROJA / PROPERTIES, filete de oro y lema), a escala.           */
.hero:not(.hero-int){padding:36px 0 72px;background:var(--blanco)}   /* sin el halo azul de la v3 */
.hero:not(.hero-int) .hero-centro{max-width:940px}
.hero:not(.hero-int) h1{margin-bottom:0}
.hero:not(.hero-int) h1 .seg{font-size:clamp(1.75rem,3.1vw,2.5rem);line-height:1.15;margin-top:.3em}
/* Sello algo más pequeño (24/09, noche) para que el campo de dirección se vea
   sin desplazarse también en un portátil de 1366 × 768 y en móviles pequeños.
   Mantiene las proporciones de la imagen para compartir. Desde el 27/09 el
   dibujo va entero (el mismo de «Conócenos»), sin recortar (Albert). */
.sello-portada{display:flex;flex-direction:column;align-items:center;margin:22px auto 20px}
.sello-portada img{display:block;width:240px;height:auto;margin-bottom:12px}
.sello-wm1{font-family:var(--display);font-weight:600;color:var(--azul);font-size:1.5rem;
  letter-spacing:.22em;padding-left:.22em;text-transform:uppercase;line-height:1}
.sello-wm2{font-family:var(--sans);font-weight:500;color:var(--oro);font-size:.48rem;
  letter-spacing:.55em;padding-left:.55em;text-transform:uppercase;line-height:1;margin-top:7px}
.sello-filete{display:block;width:36px;height:1px;background:var(--oro);margin:12px 0 9px}
.sello-lema{font-family:var(--display);font-style:italic;font-weight:500;color:var(--azul);font-size:1.05rem;line-height:1}
.hero:not(.hero-int) .lead{max-width:70ch;margin-bottom:10px}
/* Frase bajo el texto de la portada, en el azul y la cursiva del lema
   (Albert, 27/09/2026): deja claro que buscamos pisos por reformar. La
   segunda frase no se parte: en móvil baja entera a la línea siguiente. */
.frase-portada{font-family:var(--display);font-style:italic;font-weight:500;color:var(--azul);
  font-size:1.4rem;line-height:1.25;margin:0 auto 24px}
.frase-portada span{display:inline-block}
@media(max-width:900px){
  .hero:not(.hero-int){padding:22px 0 52px}
  .sello-portada{margin:14px auto 12px}
  .sello-portada img{width:184px;margin-bottom:8px}
  .sello-wm1{font-size:1.15rem}
  .sello-wm2{font-size:.37rem;margin-top:6px}
  .sello-filete{width:30px;margin:9px 0 7px}
  .sello-lema{font-size:.9rem}
  .hero:not(.hero-int) .lead{margin-bottom:8px;font-size:1.05rem;line-height:1.55}
  .frase-portada{font-size:1.2rem;margin:0 auto 16px}
}
/* Móviles pequeños (≤ 380 px: iPhone SE, Android compactos): un punto menos
   de todo para que el campo y el botón quepan en la primera pantalla.
   El H1 no baja de 34 px (mínimo del libro de marca, 4.4). */
@media(max-width:380px){
  .hero:not(.hero-int){padding-top:14px}
  .hero:not(.hero-int) h1{font-size:2.15rem}
  .hero:not(.hero-int) h1 .seg{font-size:1.5rem}
  .sello-portada{margin:10px auto 10px}
  .sello-portada img{width:158px;margin-bottom:6px}
  .sello-wm1{font-size:1rem}
  .sello-wm2{font-size:.32rem;margin-top:5px}
  .sello-filete{width:26px;margin:7px 0 6px}
  .sello-lema{font-size:.8rem}
  .hero:not(.hero-int) .lead{font-size:.98rem;line-height:1.5;margin-bottom:6px}
  .frase-portada{font-size:1.05rem;line-height:1.2;margin:0 auto 10px}
}
/* SEO técnico (25/09/2026): los dibujos tienen versiones más ligeras
   (srcset). Se fija la proporción del original para que la página mida
   exactamente lo mismo cargue la versión que cargue. */
.sello-portada img{aspect-ratio:840/312}
.emblema-s{aspect-ratio:840/312}

/* ---------- Revisión de diseño y adaptabilidad (28/09/2026) ----------
   1. Títulos pequeños equilibrados y sin palabras sueltas al final de
      párrafo (navegadores que no lo entienden lo ignoran).
   2. Preguntas frecuentes: toda la fila responde al toque, no solo el
      texto (antes el relleno estaba fuera del <summary>). Mismo aspecto.
   3. Equipo en dos columnas en móvil: cuatro retratos a todo el ancho
      alargaban mucho la página.
   4. Botón de pausa del carrusel del mismo tamaño que las flechas.   */
h3{text-wrap:balance}
.lead,main p,main li{text-wrap:pretty}
.faq details{padding:0}
.faq summary{padding:22px 0}
.faq details[open]{padding-bottom:22px}
.faq details[open] summary{padding-bottom:8px}
.faq details > *:not(summary){margin-top:6px}
@media(max-width:620px){
  .g4.equipo{grid-template-columns:1fr 1fr;gap:18px 14px}
  .equipo .persona h3{font-size:1rem}
  .equipo .persona-cargo{font-size:.64rem;letter-spacing:.1em}
  .equipo .texto-2{font-size:.9rem;line-height:1.5}
}
.carrusel-pausa{width:44px;height:44px}
/* 5. Portátiles de pantalla baja (1280 × 720 y similares): sello y
      márgenes algo más compactos para que el campo de dirección de la
      portada se vea sin desplazarse. No afecta a 1366 × 768 ni a móviles. */
@media(min-width:901px) and (max-height:740px){
  .hero:not(.hero-int){padding-top:24px}
  .sello-portada{margin:14px auto 12px}
  .sello-portada img{width:200px;margin-bottom:8px}
}

/* Informe del contador de formularios (/tareas/contador/, 28/09/2026). Página interna. */
.contador-informe{max-width:1100px;margin:0 auto;padding:24px 16px}
.contador-informe table{border-collapse:collapse;width:100%;margin:8px 0 28px;font-size:15px}
.contador-informe th,.contador-informe td{border:1px solid #d9d4c7;padding:6px 8px;text-align:left;vertical-align:top}
.contador-informe th{background:#f3efe6}