/* main.css — Adel Properties (2026) LA FUENTE, Y POR QUÉ YA NO VIENE DE GOOGLE ------------------------------------------ Esta hoja cargaba Ubuntu con `@import` desde fonts.googleapis.com. Eso significa que el navegador de cada visitante contactaba con Google —y le entregaba su IP— en cuanto abría CUALQUIER página, antes de aceptar nada. Es exactamente lo que la política de cookies de este sitio promete que no pasa, y además hay sentencias en Alemania que lo han multado. Fuera. Del 12 de agosto al 7 de octubre de 2026 la hoja pedía Manrope, pero los archivos nunca se subieron (404 en cada página) y la web se veía con la fuente del sistema de cada visitante. Antonio quería Ubuntu desde el principio, así que ahora es Ubuntu, ALOJADA AQUÍ MISMO en /assets/fonts/ubuntu/ (licencia Ubuntu Font Licence 1.0, libre; copia en esa carpeta). Sin Google por medio. CÓMO ESTÁ PARTIDA: doce archivos .woff2, uno por alfabeto y grosor (latín · latín extendido para el polaco · cirílico para el ruso) × (300 · 400 · 500 · 700). Gracias a `unicode-range` el navegador descarga SOLO los alfabetos que la página usa: una página en español baja los cuatro latinos (~135 KB en total), una en ruso baja además los cirílicos. Sin cursivas: se usan en tres notas pequeñas y el navegador las inclina solo. GROSORES: Ubuntu no tiene 600 y esta hoja lo usa en títulos y botones. El archivo Medium (500) se declara para el rango 500-600, así que el 600 sale en Medium y no salta a Bold; es lo más parecido al semibold que había antes. */ @font-face{ font-family:'Ubuntu'; font-style:normal; font-display:swap; font-weight:300; src:url('/assets/fonts/ubuntu/ubuntu-latin-300-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Ubuntu'; font-style:normal; font-display:swap; font-weight:400; src:url('/assets/fonts/ubuntu/ubuntu-latin-400-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Ubuntu'; font-style:normal; font-display:swap; font-weight:500 600; src:url('/assets/fonts/ubuntu/ubuntu-latin-500-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Ubuntu'; font-style:normal; font-display:swap; font-weight:700; src:url('/assets/fonts/ubuntu/ubuntu-latin-700-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Latín extendido: las letras polacas (ą ć ę ł ń ó ś ź ż). */ @font-face{ font-family:'Ubuntu'; font-style:normal; font-display:swap; font-weight:300; src:url('/assets/fonts/ubuntu/ubuntu-latin-ext-300-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Ubuntu'; font-style:normal; font-display:swap; font-weight:400; src:url('/assets/fonts/ubuntu/ubuntu-latin-ext-400-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Ubuntu'; font-style:normal; font-display:swap; font-weight:500 600; src:url('/assets/fonts/ubuntu/ubuntu-latin-ext-500-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Ubuntu'; font-style:normal; font-display:swap; font-weight:700; src:url('/assets/fonts/ubuntu/ubuntu-latin-ext-700-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Cirílico: la versión rusa. */ @font-face{ font-family:'Ubuntu'; font-style:normal; font-display:swap; font-weight:300; src:url('/assets/fonts/ubuntu/ubuntu-cyrillic-300-normal.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:'Ubuntu'; font-style:normal; font-display:swap; font-weight:400; src:url('/assets/fonts/ubuntu/ubuntu-cyrillic-400-normal.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:'Ubuntu'; font-style:normal; font-display:swap; font-weight:500 600; src:url('/assets/fonts/ubuntu/ubuntu-cyrillic-500-normal.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:'Ubuntu'; font-style:normal; font-display:swap; font-weight:700; src:url('/assets/fonts/ubuntu/ubuntu-cyrillic-700-normal.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } :root{ /* La pila completa: Ubuntu, y si por lo que sea no carga, la mejor fuente de palo seco que tenga el sistema. Ninguna de la reserva se descarga: todas vienen con el sistema operativo. */ --fuente: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --bg: #F8F6F1; /* ----- El dorado (22 de agosto) -------------------------------------- Antonio pidió cambiar el dorado de la marca de #D4AF37 al más vivo #D4AF37. Se aplica, pero hacen falta DOS tonos y no uno, y conviene saber por qué antes de tocarlos. #D4AF37 sobre el crema del fondo da un contraste de 1.95:1. El mínimo para leer texto pequeño es 4.5:1 y el viejo #D4AF37 ya se quedaba corto (3.48:1). O sea que el dorado nuevo, puesto en las letras pequeñas sobre fondo claro, no se leería: los rótulos tipo «COSTA BLANCA Y MAR MENOR» son de 12px y desaparecerían. Sobre fondo oscuro pasa lo contrario: el nuevo da 8.26:1 frente al 4.62:1 del viejo. Ahí gana, y mucho. Por eso: --gold el dorado de la marca. Filetes, bordes, iconos, fondos, y texto sobre fondo OSCURO. Es el que se ve en el 90% de los sitios. --gold-texto solo para texto pequeño sobre fondo CLARO. Mismo tono (46°) y misma saturación, más oscuro. Da 3.76:1, o sea que además mejora lo que había. -------------------------------------------------------------------- */ --gold: #D4AF37; --gold-apagado: #977B20; --gold-texto: var(--gold-apagado); --white: #FFFFFF; --black: #000000; --gray-dark: #3A3A3A; --gray-mid: #8a8a8a; /* ----- Tamaño del logo ---------------------------------------------- Valores del boceto `index.html` (Ronda 33), que lleva el logo real incrustado: 1600x661 px, la misma imagen que logo-blanco.png. Es decir, el `width:220px` del boceto SÍ está calculado para este logo (a 220 px de ancho da 91 px de alto). Se fija el ANCHO y la altura va sola: es como lo dice el boceto y así el logo no se deforma nunca. El menú lateral de móvil es la excepción: el boceto pone 165 px, pero Antonio aprobó expresamente el tamaño más contenido que se ve ahora. -------------------------------------------------------------------- */ --ancho-logo: 220px; /* cabecera — 91 px de alto */ --ancho-logo-estrecho: 170px;/* cabecera en móviles estrechos (<=480px) */ --ancho-logo-movil: 106px; /* menú lateral — 44 px de alto, aprobado */ --ancho-logo-pie: 220px; /* pie — 91 px de alto */ --ancho-logo-pie-movil: 180px; } *{ box-sizing: border-box; margin:0; padding:0; } /* El menú móvil vive fuera de la pantalla, a la derecha (`transform: translateX(100%)`), y eso ensanchaba el documento: TODAS las páginas se podían arrastrar 15 px a la derecha. `body` ya tenía `overflow-x:hidden`, pero el que desbordaba era `html`. `clip` y no `hidden` a propósito: `hidden` convertiría a `html` en contenedor de scroll y rompería el `position: sticky` del índice de las páginas legales y de la cabecera. `clip` recorta sin crear contenedor de scroll. */ html{ overflow-x: clip; } /* `clip` y no `hidden`, por el mismo motivo que en `html` justo arriba y porque aquí era peor: con `hidden`, `body` se convertía en contenedor de scroll y el `position: sticky` de la cabecera de las páginas interiores dejaba de pegarse al viewport — la cabecera se iba con el scroll en todas las páginas menos en la home (que usa `position: fixed`). Es exactamente lo que se veía. `clip` recorta el desbordamiento del menú móvil sin crear contenedor de scroll, así que la cabecera vuelve a quedarse arriba. */ body{ font-family: var(--fuente); background: var(--bg); color: var(--black); line-height: 1.5; overflow-x: clip; } /* Utilidad para que un bloque rompa el contenedor .wrap y ocupe todo el ancho de la pantalla, sea cual sea la resolución (incluso pantallas muy anchas, 4000px+) */ .full-bleed{ width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } h1,h2,h3{ font-family: var(--fuente); font-weight: 700; letter-spacing: 0.2px; } .font-note{ display:inline-block; font-size:10px; color: var(--gold-texto); background: rgba(212, 175, 55,0.08); padding: 2px 8px; border-radius: 3px; margin-left: 8px; vertical-align: middle; font-family: var(--fuente); font-weight:400; } a{ text-decoration:none; color:inherit; } img{ max-width:100%; display:block; } .wrap{ max-width: 1240px; margin:0 auto; padding:0 32px; } /* ===== BANNER DE AVISO BOCETO ===== */ .draft-banner{ background: var(--black); color: var(--white); text-align:center; font-size:13px; padding:10px 16px; letter-spacing:0.5px; } .draft-banner strong{ color:#D8B65C; } /* ===== HEADER (transparente → sólido al hacer scroll) ===== */ header{ background: transparent; border-bottom: 1px solid transparent; position: fixed; top:0; left:0; right:0; z-index: 50; transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease; } /* Valores del boceto (Ronda 33): fondo crema —el mismo del cuerpo, no blanco— y línea dorada de 3 px abajo. Aquí había quedado un blanco al 97 % con una línea gris de 1 px, de una versión anterior: se notaba porque la cabecera salía blanca sobre un cuerpo crema, y la línea dorada, que es la firma del diseño, no aparecía. La regla hermana `body.cabecera-solida header` ya llevaba estos mismos valores. */ header.scrolled{ background: var(--bg); border-bottom: 3px solid var(--gold); box-shadow: 0 4px 24px rgba(0,0,0,0.05); backdrop-filter: blur(6px); } .header-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; box-sizing:border-box; padding: 26px 40px; transition: padding 0.4s ease; gap: 24px; } header.scrolled .header-inner{ padding: 16px 40px; } .logo{ display:flex; align-items:center; flex-shrink:0; } /* Ancho fijo y altura automática, como el boceto. Antes había `height` fijo, que dejaba el logo a poco más de la mitad de su tamaño. */ .logo img{ width: var(--ancho-logo); height:auto; display:block; } .logo .logo-blanco{ display:block; } .logo .logo-negro{ display:none; } header.scrolled .logo .logo-blanco{ display:none; } header.scrolled .logo .logo-negro{ display:block; } /* El menú móvil siempre se abre sobre fondo blanco → logo negro fijo */ .mobile-menu-top .logo .logo-blanco{ display:none; } .mobile-menu-top .logo .logo-negro{ display:block; } nav.main-nav{ flex: 1 1 auto; display:flex; justify-content:center; min-width:0; } /* EL HUECO ENTRE ENLACES, ELÁSTICO (28 de agosto de 2026) Antes era fijo, 30px, midiera lo que midiera la pantalla. Antonio lo vio y lo describió bien: el menú «se ve agrupado» al ensanchar la ventana, porque los enlaces seguían pegados en el centro mientras todo el sitio que sobraba se iba a los márgenes. Con `clamp` el hueco crece con la pantalla y se recoge en las estrechas, que es donde hace falta: 1300px -> 16px 1920px -> 23px 2560px -> 31px Medido, no a ojo: los diez enlaces ocupan de texto 626px en español, 524 en inglés, 728 en polaco y 805 en ruso. El ruso es el largo, no el polaco como parecía a simple vista. */ nav.main-nav ul{ list-style:none; display:flex; align-items:center; gap: clamp(16px, 1.2vw, 42px); } /* `position:relative` es imprescindible: las líneas finas que separan los elementos del menú son un ::after con `position:absolute; right:-15px`. Sin referencia en el propio
  • se posicionaban respecto al
    y las nueve rayitas se apilaban en el mismo punto, con lo que el menú parecía no tener separadores. También es lo que ancla el desplegable de «Zonas». */ nav.main-nav li{ display:flex; align-items:center; position:relative; } nav.main-nav a{ /* 12px con menos espaciado, en vez de 13px con 0.4 (28 de agosto de 2026). No es un capricho de estilo: son 83px menos de menú en ruso y 77 en polaco, y eso es lo que permite que el menú completo se enseñe en un portátil normal en vez de saltar a hamburguesa. En mayúsculas y con este peso, la diferencia de tamaño no se nota; la de anchura, sí. */ font-size: 12px; font-weight:500; letter-spacing: 0.2px; text-transform: uppercase; color: var(--white); transition: color 0.3s ease, transform 0.3s ease; position:relative; text-shadow: 0 1px 4px rgba(0,0,0,0.25); white-space:nowrap; display:flex; align-items:center; } /* Mismo lenguaje de interacción que el menú lateral: color a dorado y un pequeño desplazamiento. Estaba en el boceto y se había quedado fuera. */ nav.main-nav a:hover{ color: var(--gold-texto); transform: translateX(3px); } header.scrolled nav.main-nav a{ color: var(--black); text-shadow:none; } header.scrolled nav.main-nav a:hover{ color: var(--gold-texto); } .header-right{ display:flex; align-items:center; gap: 20px; flex-shrink:0; } .lang-selector{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; } .lang-selector span{ display:flex; align-items:center; gap:6px; padding: 5px 10px; cursor:pointer; color: rgba(255,255,255,0.85); border-radius:20px; border: 1px solid rgba(255,255,255,0.35); transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease; } .flag-icon{ width:18px; height:13px; object-fit:cover; border-radius:2px; display:block; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); flex-shrink:0; } .lang-selector span.active{ color: var(--white); background: rgba(255,255,255,0.15); border-color: var(--gold); } header.scrolled .lang-selector span{ color: var(--gray-mid); border-color: rgba(0,0,0,0.12); } header.scrolled .lang-selector span.active{ color: var(--black); background: var(--bg); border-color: var(--gold); } /* * POR QUE LOS BOTONES LLEVAN `display:inline-block` (21-sep-2026). * * Son etiquetas ``, o sea elementos EN LINEA. En un elemento en * linea el relleno de arriba y abajo se pinta, pero NO empuja a las * lineas de alrededor: el boton se dibuja mas alto que su renglon y se * monta sobre el texto de encima y de debajo. * * Se veia en la pagina de «Esta vivienda ya no esta disponible», donde * los dos botones van dentro de un

    entre dos parrafos: pisaban el * texto de arriba y el enlace de abajo quedaba pegado. * * Ya habia pasado antes con el boton «Avisar del enlace roto» (agosto), * y se parcheo solo ahi (`.err-reportar .btn-outline`). Se arregla en la * clase base para no repetirlo pagina por pagina. * * `inline-block` y no `block` a proposito: dos botones seguidos tienen * que poder ir uno al lado del otro. * * Las reglas que mas abajo ponen `display:block` o `display:none` para * un sitio concreto (tarjeta de canal, listado, cabecera) son mas * especificas y siguen mandando. Comprobado. */ .btn-cta, .btn-outline{ display:inline-block; vertical-align:middle; } .btn-cta{ background: var(--gold); color: var(--white); padding: 11px 22px; border-radius: 3px; font-size: 14px; font-weight:500; transition: background 0.25s ease; white-space:nowrap; } .btn-cta:hover{ background:#8a6c2c; } .btn-outline{ border: 1px solid var(--gold); color: var(--gold-texto); background: transparent; padding: 10px 21px; border-radius:3px; font-size:14px; font-weight:500; } .btn-outline--header{ border: 1px solid rgba(255,255,255,0.7); color: var(--white); font-size:13px; padding: 9px 18px; transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease; white-space:nowrap; } .btn-outline--header:hover{ background: rgba(255,255,255,0.12); } header.scrolled .btn-outline--header{ border-color: var(--gold); color: var(--gold-texto); } header.scrolled .btn-outline--header:hover{ background: rgba(212, 175, 55,0.08); } .burger{ display:none; font-size:24px; cursor:pointer; color:var(--white); background:none; border:none; line-height:1; transition: color 0.3s ease; } header.scrolled .burger{ color: var(--black); } /* ===== PANEL «¿VENDES TU PROPIEDAD?» (variante D, panel con titular) ===== Sustituye a los dos botones sueltos que flotaban antes. Dos comportamientos, y la diferencia es el motivo del cambio: Escritorio panel negro fijo a la derecha. Al ir fijo, da igual en qué parte del HTML esté escrito. Móvil deja de flotar y se convierte en un módulo del propio documento, a ancho completo. Flotando tapaba el titular del hero, que es justo lo que se quería arreglar. */ .panel-cta{ position: fixed; top: 50%; right: 24px; transform: translateY(-50%); z-index: 45; width: 260px; padding: 22px 22px 20px; background: #1a1a1a; border-radius: 6px; box-shadow: 0 18px 44px rgba(0,0,0,0.28); transition: opacity 0.3s ease, visibility 0.3s ease; } .panel-cta-titular{ color: var(--white); font-size: 18px; font-weight: 700; line-height: 1.25; margin: 0 0 6px; } .panel-cta-apoyo{ color: rgba(255,255,255,0.62); font-size: 13px; line-height: 1.45; margin: 0 0 16px; } .panel-cta-botones{ display: flex; flex-direction: column; gap: 9px; } /* Vender: dorado macizo, es la acción que se quiere empujar. */ .panel-cta-vender, .panel-cta-contactar{ display: block; text-align: center; padding: 14px 18px; border-radius: 3px; font-size: 15px; font-weight: 600; white-space: nowrap; transition: background 0.25s ease, color 0.25s ease; } .panel-cta-vender{ background: var(--gold); color: var(--white); } .panel-cta-vender:hover{ background: #8c6d2b; } /* Contactar: blanco, secundaria pero legible sobre el panel negro. */ .panel-cta-contactar{ background: var(--white); color: #1a1a1a; } .panel-cta-contactar:hover{ background: #ede9e0; } /* Se aparta mientras el banner de la guía está en pantalla, para no solaparse con su botón. Solo tiene sentido cuando el panel flota: en móvil va dentro del documento y no puede taparlo, así que el script ni lo intenta. */ .panel-cta--oculto{ opacity: 0; visibility: hidden; pointer-events: none; } /* ===== MENÚ MÓVIL (cajón lateral, no tapa toda la pantalla) ===== */ .mobile-menu-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 99; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .mobile-menu-backdrop.open{ opacity: 1; pointer-events: auto; } .mobile-menu{ position: fixed; top:0; right:0; bottom:0; width: min(78vw, 340px); background: var(--white); z-index: 100; display:flex; flex-direction:column; padding: 26px 28px; box-shadow: -12px 0 40px rgba(0,0,0,0.15); border-left: 3px solid var(--gold); transform: translateX(100%); transition: transform 0.35s ease; overflow-y:auto; } .mobile-menu.open{ transform: translateX(0); } .mobile-menu-top{ display:flex; justify-content:space-between; align-items:center; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid rgba(212, 175, 55,0.25); } .mobile-menu-close{ font-size:20px; width: 34px; height: 34px; display:flex; align-items:center; justify-content:center; background:none; border: 1px solid var(--gold); border-radius: 50%; cursor:pointer; color: var(--gold-texto); line-height:1; transition: background 0.2s ease, color 0.2s ease; } .mobile-menu-close:hover{ background: var(--gold); color: var(--white); } .mobile-menu nav ul{ list-style:none; display:flex; flex-direction:column; gap: 4px; margin-bottom: 28px; } .mobile-menu nav li{ border-bottom: 1px solid rgba(0,0,0,0.06); } .mobile-menu nav a{ display:flex; align-items:center; justify-content:space-between; font-size: 17px; font-weight:500; color: var(--black); padding: 13px 2px; transition: color 0.2s ease, padding-left 0.2s ease; } .mobile-menu nav a::after{ content:'›'; color: var(--gold-texto); font-size:18px; opacity:0.7; } .mobile-menu nav a:hover{ color: var(--gold-texto); padding-left: 6px; } .mobile-menu .lang-selector{ margin-bottom: 24px; padding-top: 18px; border-top: 1px solid rgba(212, 175, 55,0.25); flex-wrap:wrap; } .mobile-menu .lang-selector span{ color: var(--gray-mid); font-size:14px; padding:5px 11px; border: 1px solid rgba(0,0,0,0.1); border-radius: 20px; } .mobile-menu .lang-selector span.active{ color: var(--black); background: var(--bg); border-color: var(--gold); } .mobile-menu-actions{ display:flex; flex-direction:column; gap: 12px; margin-top:auto; padding-top: 22px; border-top: 1px solid rgba(212, 175, 55,0.25); } .mobile-menu-actions .btn-outline{ color: var(--gold-texto); border-color: var(--gold); text-align:center; padding: 14px; } .mobile-menu-actions .btn-cta{ text-align:center; padding:14px; } /* ===== HERO — pantalla completa, estilo editorial Sotheby's ===== */ .hero{ position:relative; height: 100vh; min-height: 720px; display:flex; align-items:flex-end; /* El color de debajo NO es decorativo: es la red de seguridad. Mientras no esté subida la foto —o si un día falla— el degradado necesita algo oscuro sobre lo que aplicarse, o el titular blanco queda blanco sobre gris claro y no se lee. Con esto, la peor cara posible de la home sigue siendo legible. */ background-color: #2b2724; background-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.75) 100%), url('/assets/img/hero/hero.jpg'); background-size: cover; background-position: center; } /* ------------------------------------------------------------------- La foto del hero cambia según la forma de la pantalla, no solo de tamaño. Y es por una razón de fondo, no por afinar: `cover` recorta lo que sobra para llenar el hueco. En un móvil el hero es alto y estrecho, así que una foto horizontal se amplía hasta cubrir el alto y se queda en una franja central estirada — se pierde casi todo lo que hacía buena a esa foto. Al revés pasa igual: una foto vertical en escritorio enseña solo un 35 % de sí misma. Por eso hay dos: `hero.jpg` horizontal para escritorio y `hero-movil.jpg` vertical para el móvil, cada una encuadrada para su forma. El navegador solo descarga la que le toca. El corte va en 760 px, el mismo que usa el resto del sitio. ------------------------------------------------------------------- */ @media (max-width: 760px){ .hero{ /* El velo del móvil es MÁS FUERTE que el de escritorio, y no por gusto: está medido. En el móvil el titular ocupa media pantalla y cae encima de lo que haya en el centro de la foto. Con el degradado de escritorio —que casi se abre entre el 30 % y el 60 %— el texto blanco sobre las zonas claras de la foto (un cielo de atardecer, las luces de una casa) se quedaba en 1,0 de contraste: literalmente blanco sobre blanco. Con estos valores el peor punto sube por encima del 4,5 que pide la norma de accesibilidad. Se pierde algo de foto, pero una portada que no se puede leer no sirve de nada. Si algún día se cambia la foto del móvil por una oscura, esto se puede suavizar — midiéndolo otra vez, no a ojo. */ background-image: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.45) 62%, rgba(0,0,0,0.82) 100%), url('/assets/img/hero/hero-movil.jpg'); } /* Dos ajustes de color medidos sobre la foto real, no elegidos a ojo: · El párrafo en gris claro se quedaba en 3,99 sobre las zonas más claras. En blanco puro sube a 5,4. En escritorio puede seguir siendo gris, porque ahí el texto ocupa mucha menos pantalla y no cae sobre las zonas comprometidas. · El «COSTA BLANCA · ESPAÑA» en el dorado de marca (#D4AF37) se quedaba en 2,79 y no hay velo razonable que lo arregle: ese tono necesitaría el fondo casi negro. Con el dorado claro de la marca (#D8B65C, el mismo que ya se usa en otros sitios sobre fondo oscuro) llega a 5,3 sin tocar nada más. La sombra remata el contorno en los puntos sueltos donde la foto se aclara de golpe. */ .hero-heading p{ color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.55); } .hero-heading .eyebrow{ color: #D8B65C; text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.8); } } .hero-placeholder-label{ position:absolute; top:90px; left:16px; background: rgba(0,0,0,0.55); color:#fff; font-size:11px; padding:4px 10px; border-radius:3px; z-index:3; } .stock-tag{ position:absolute; z-index:3; background: rgba(0,0,0,0.6); color:#fff; font-size:9px; padding:2px 7px; border-radius:3px; letter-spacing:0.3px; } .hero-scroll-cue{ position:absolute; bottom: 28px; left:50%; transform: translateX(-50%); color: rgba(255,255,255,0.85); font-size:11px; letter-spacing:2px; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2; } .hero-scroll-cue .line{ width:1px; height:34px; background: rgba(255,255,255,0.6); animation: scrollpulse 2s ease-in-out infinite; } @keyframes scrollpulse{ 0%,100%{ opacity:0.3; } 50%{ opacity:1; } } .hero-content{ position:relative; z-index:2; color:var(--white); max-width: 860px; padding-bottom: 90px; } .hero-content .eyebrow{ display:inline-block; font-size:13px; letter-spacing: 3px; text-transform:uppercase; color: var(--gold-texto); font-weight:600; margin-bottom: 22px; } .hero-content h1{ font-size: 68px; font-weight:400; line-height:1.08; letter-spacing: 0.5px; margin-bottom:26px; text-shadow: 0 2px 20px rgba(0,0,0,0.35); } .hero-content p{ font-size:19px; font-weight:300; letter-spacing:0.2px; margin-bottom: 44px; max-width: 580px; text-shadow: 0 1px 8px rgba(0,0,0,0.35); } /* buscador */ .search-box{ background: rgba(255,255,255,0.97); border-radius: 4px; padding: 24px; display:grid; /* Cuatro campos + boton desde el 8 de septiembre de 2026, cuando se anadio «Referencia». La columna de la referencia va mas estrecha (0.7fr): es un codigo corto, no necesita el ancho de un desplegable de zonas, y asi los tres primeros campos no se estrechan. */ grid-template-columns: 1fr 1fr 1fr 0.7fr auto; gap: 16px; box-shadow: 0 25px 60px rgba(0,0,0,0.3); } .search-field{ display:flex; flex-direction:column; gap:4px; } .search-field label{ font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color: var(--gray-mid); font-weight:500; } .search-field select, .search-field input{ border:none; border-bottom: 1px solid rgba(0,0,0,0.15); padding: 6px 2px; font-size:14px; font-family:var(--fuente); background:transparent; color: var(--black); } .search-submit{ background: var(--gold); color:#fff; border:none; border-radius:4px; padding: 0 26px; font-size:14px; font-weight:600; cursor:pointer; align-self:center; } /* ================================================================== LAS DOS CASILLAS: OBRA NUEVA / SEGUNDA MANO ================================================================== Antonio, 20 de agosto: «deberia tener a la vista dos casillas; una para obra nueva y otra para segunda mano [...] Algo como lo de la imagen pero mas discreto y al elegir uno se deselecciona al otro». Son dos `radio` de toda la vida, que es lo que hace sola la parte de «al elegir uno se deselecciona el otro»: dos radios con el mismo `name` son excluyentes por definición del navegador, sin una línea de JavaScript. Si se hubieran puesto casillas de verificación habría hecho falta código para desmarcar la otra, y ese código no se ejecuta cuando falla la descarga del script. LO DISCRETO. La referencia que mandó era una píldora dorada maciza contra otra blanca con borde. Aquí la elegida no se rellena de dorado macizo: se tiñe al 10 %, con el borde y la letra en dorado. Se distingue de un vistazo cuál está elegida y no compite con el botón «Buscar», que es el dorado macizo de verdad y el único que debe llamar a pulsar. El `input` se esconde con el mismo recorte que `.sr-solo` en vez de con `display:none`: escondido con `display:none` el navegador lo saca del recorrido del tabulador y estas dos casillas dejarían de existir para quien navega con teclado. */ .search-clase{ grid-column: 1 / -1; /* ocupa el ancho entero, encima de los campos */ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:2px; } .clase-op{ position:relative; /* ancla del input escondido, que va absoluto */ display:block; } .clase-op input{ position:absolute; width:1px; height:1px; margin:0; padding:0; opacity:0; overflow:hidden; clip-path: inset(50%); } .clase-op span{ display:block; padding: 7px 15px; border: 1px solid rgba(0,0,0,0.15); border-radius: 999px; font-size:13px; line-height:1.2; color: var(--gray-dark); background: transparent; cursor:pointer; user-select:none; transition: color .2s ease, border-color .2s ease, background .2s ease; } .clase-op:hover span{ border-color: var(--gold); color: var(--gold-texto); } .clase-op input:checked + span{ background: rgba(212, 175, 55,0.10); border-color: var(--gold); color: var(--gold-texto); font-weight:600; } /* El foco del teclado tiene que verse. Con el `input` recortado a un píxel no se ve nada por sí solo, así que se dibuja sobre la píldora. */ .clase-op input:focus-visible + span{ outline: 2px solid var(--gold); outline-offset: 2px; } /* ===== SECTION GENERIC ===== */ section{ padding: 84px 0; } .section-head{ text-align:center; max-width: 640px; margin: 0 auto 48px auto; } .section-head .eyebrow{ display:inline-block; font-size:12px; letter-spacing: 1.5px; text-transform:uppercase; color: var(--gold-texto); font-weight:600; margin-bottom: 10px; } .section-head h2{ font-size: 34px; margin-bottom: 14px; } .section-head p{ color: var(--gray-dark); font-size:15px; } /* ===== ZONAS ===== */ .zones-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .zone-card{ position:relative; height: 280px; border-radius: 6px; overflow:hidden; background: repeating-linear-gradient(135deg, #ded9cf, #ded9cf 18px, #e8e4da 18px, #e8e4da 36px); display:flex; align-items:flex-end; color:#fff; } .zone-card::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.65) 100%); } .zone-card .zone-label{ position:relative; z-index:2; padding: 20px; } .zone-card .zone-label .count{ font-size:11px; opacity:0.85; display:block; margin-bottom:4px; } .zone-card .zone-label .name{ font-size:19px; font-weight:700; } .img-tag{ position:absolute; top:10px; right:10px; z-index:3; background: rgba(0,0,0,0.55); color:#fff; font-size:10px; padding:3px 8px; border-radius:3px; } /* ===== OBRA NUEVA / SEGUNDA MANO ===== */ .split-two{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; } .split-card{ background: var(--white); border-radius: 6px; overflow:hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.06); } .split-card .img{ height: 220px; position:relative; /* El rayado del boceto: lo que se ve mientras no haya foto. */ background: repeating-linear-gradient(60deg, #e2ded4, #e2ded4 16px, #ece8de 16px, #ece8de 32px); } /* Con foto. La clase la pone la página cuando el archivo existe de verdad en `assets/img/catalogo/`; el `background-image` va en el estilo en línea porque la comprobación del archivo solo la puede hacer PHP. `center` y no `top`: las dos fotos tienen lo importante en la banda central, que es lo que se pidió al generarlas. */ .split-card .img.con-foto{ background-size: cover; background-position: center; background-repeat: no-repeat; } /* El mismo acercamiento suave que ya tienen las tarjetas de propiedad y de noticia al pasar el ratón, para que el módulo no se sienta distinto. */ .split-card .img.con-foto{ transition: transform 0.5s ease; } .split-card:hover .img.con-foto{ transform: scale(1.04); } .split-card .content{ padding: 28px; } /* EL «OBRA NUEVA» / «SEGUNDA MANO» MANDA SOBRE EL TITULAR (1 sep 2026). Antonio, viendo la home: «lo que diferencia una de la otra es el texto mas pequeño». Y tenia razon — era al reves de lo que pide la pagina. Las dos tarjetas son gemelas a proposito: misma foto de piscina, mismo largo de texto, titulares casi calcados («Promociones seleccionadas» / «Propiedades seleccionadas»). Lo UNICO que dice cual es cual es esta etiqueta, y estaba a 11px mientras el titular iba a 22. Asi que la etiqueta pasa a 24px y el titular baja a 19: quien mira la home lee primero OBRA NUEVA y SEGUNDA MANO, que es la decision que tiene que tomar ahi, y solo despues el titular. Se le quita el `letter-spacing` de 1px, que a 11px separaba bien las versales pero a 24px las desparrama, y se deja en 0.5px. El color no se toca: es el dorado de la marca, aprobado. */ .split-card .content .tag{ font-size:24px; text-transform:uppercase; letter-spacing:0.5px; color: var(--gold-texto); font-weight:700; line-height:1.15; margin-bottom:10px; display:block; } .split-card .content h3{ font-size:19px; font-weight:600; margin-bottom:10px; } .split-card .content p{ font-size:14px; color: var(--gray-dark); margin-bottom:18px; } /* ===== PROPIEDADES DESTACADAS ===== */ .properties-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .property-card{ background: var(--white); border-radius: 6px; overflow:hidden; box-shadow: 0 6px 24px rgba(0,0,0,0.06); transition: transform 0.25s ease; } .property-card:hover{ transform: translateY(-4px); } .property-card .photo{ height: 210px; position:relative; background: repeating-linear-gradient(100deg, #e6e2d8, #e6e2d8 14px, #efece2 14px, #efece2 28px); } .property-card .ref-badge{ position:absolute; top:12px; left:12px; background: var(--white); font-size:11px; font-weight:700; padding: 4px 10px; border-radius:3px; color: var(--black); } .property-card .price-badge{ position:absolute; bottom:12px; left:12px; background: var(--gold); color:#fff; font-size:15px; font-weight:700; padding: 6px 14px; border-radius:3px; } .property-card .info{ padding: 20px; } .property-card .info .location{ font-size:12px; color: var(--gray-mid); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; } .property-card .info h4{ font-size:17px; margin-bottom:12px; } .property-meta{ display:flex; gap:16px; font-size:13px; color: var(--gray-dark); border-top: 1px solid rgba(0,0,0,0.06); padding-top: 12px; } .property-meta span{ display:flex; align-items:center; gap:5px; } .see-more-wrap{ text-align:center; margin-top: 40px; } /* ===== CONFIANZA / RESEÑAS ===== */ .trust-band{ background: var(--black); color: var(--white); padding: 60px 0; } .trust-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align:center; } .trust-item .num{ font-size: 36px; font-weight:700; color: var(--gold-texto); margin-bottom:6px; } .trust-item .label{ font-size:13px; color: #cfcfcf; text-transform:uppercase; letter-spacing:0.5px; } .reviews-section{ background: var(--bg); position:relative; overflow:hidden; } .reviews-section::before{ content:'"'; position:absolute; top:-60px; left:50%; transform:translateX(-50%); font-size:340px; font-family: Georgia, serif; color: rgba(212, 175, 55,0.06); line-height:1; pointer-events:none; } .reviews-score{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom: 48px; position:relative; z-index:1; } .reviews-score .google-badge{ display:flex; align-items:center; gap:8px; background: var(--white); padding: 10px 20px; border-radius: 40px; box-shadow: 0 6px 20px rgba(0,0,0,0.07); font-size:14px; font-weight:600; } .reviews-score .google-badge .g-icon{ width:20px; height:20px; border-radius:50%; background: conic-gradient(#4285F4 0deg 90deg, #34A853 90deg 180deg, #FBBC05 180deg 270deg, #EA4335 270deg 360deg); display:inline-block; } .reviews-score .stars-big{ color: var(--gold-texto); font-size:15px; letter-spacing:1px; } .review-card{ background: var(--white); border-radius:8px; padding: 32px 28px; position:relative; z-index:1; box-shadow: 0 10px 34px rgba(0,0,0,0.05); border-top: 3px solid var(--gold); } .stars{ color:var(--gold-texto); font-size:15px; margin-bottom:14px; letter-spacing:1px; } .review-card p{ font-size:14px; color:var(--gray-dark); margin-bottom:18px; font-style:italic; } .review-card .author{ font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px; } .review-card .author .avatar{ width:30px; height:30px; border-radius:50%; background: var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; } .reviews-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; position:relative; z-index:1; } .reviews-cta{ text-align:center; margin-top: 40px; position:relative; z-index:1; } /* ===== NOTICIAS (widget propio por idioma) ===== */ .news-section{ background: var(--white); } .news-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .news-card{ background: var(--bg); border-radius: 6px; overflow:hidden; transition: transform 0.25s ease; } .news-card:hover{ transform: translateY(-4px); } .news-card .photo{ height: 170px; background: repeating-linear-gradient(70deg, #e6e2d8, #e6e2d8 14px, #efece2 14px, #efece2 28px); position:relative; } .news-card .content{ padding: 20px; } .news-card .date{ font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color: var(--gold-texto); font-weight:700; margin-bottom:8px; display:block; } .news-card h4{ font-size:16px; margin-bottom:10px; line-height:1.3; } .news-card .read-more{ font-size:13px; color: var(--gold-texto); font-weight:600; } .news-widget-note{ text-align:center; font-size:12px; color: var(--gray-mid); margin-top: 24px; } /* ====================================================== MAPA + DATOS CORPORATIVOS + FORMULARIO DE CONTACTO (mismo módulo aprobado en el boceto "Empresa y acreditaciones") ====================================================== */ .corp-module{ position: relative; border-radius: 10px; overflow: hidden; min-height: 560px; display:flex; align-items:center; /* Foto de fondo real de la oficina/recepción de Adel Properties. AHORA: placeholder de banco de imágenes (Unsplash) — sustituir por foto real de la oficina */ background-color: #ded8cc; background-image: linear-gradient(90deg, rgba(248,246,241,0.55) 0%, rgba(248,246,241,0.25) 42%, rgba(248,246,241,0.05) 60%), url('/assets/img/oficina/oficina.jpg'); background-size: cover; background-position: center; } .full-bleed .corp-module{ border-radius:0; } .corp-stock-tag{ position:absolute; top:14px; right:14px; z-index:5; background: rgba(0,0,0,0.6); color:#fff; font-size:10px; padding:4px 10px; border-radius:3px; } .corp-card{ position:relative; z-index:2; background: rgba(255,255,255,0.94); backdrop-filter: blur(2px); border: 1px solid var(--gold); border-radius: 10px; padding: 32px 34px; max-width: 460px; margin: 32px; box-shadow: 0 20px 50px rgba(0,0,0,0.15); } .corp-card h2{ font-size: 22px; margin-bottom: 20px; } .corp-field{ margin-bottom: 12px; font-size:14px; } .corp-field .label{ color: var(--gray-mid); display:block; font-size:12px; margin-bottom:1px; } .corp-field .value{ font-weight:700; color: var(--black); } /* ================================================================== EL MAPA DE LA OFICINA, AL LADO DE LOS DATOS ================================================================== El hueco estaba previsto desde el boceto —`.mapa-oficina` lleva `width:100%; height:100%` esperando precisamente a esto— pero nunca se llegó a colocar el mapa: la portada y Empresa enseñaban solo la tarjeta blanca sobre la foto, con un enlace «Cómo llegar» que se abre fuera. Antonio, 20 de agosto: «el mapa de la ubicacion de nuestra oficina en donde están los datos corporativos (que deberia de estar tambien en la pagina de empresa ya que el modulo es igual)». `.corp-module` ya era un `display:flex`, así que el mapa entra como segundo hijo y se reparte la fila con la tarjeta sin tocar nada de lo aprobado: la tarjeta conserva su ancho de 460 px y su margen, y el mapa se queda con lo que sobra. El `z-index:2` es obligatorio y no decorativo: `.corp-module::before` pinta el rayado dorado sobre toda la caja, y sin subir el mapa por encima el mapa se vería a través de las rayas. ESTE MAPA SÍ LLEVA MARCA, al revés que los de las viviendas y las promociones. Allí el pin miente —la dirección exacta no se da hasta el primer contacto— y aquí es justo lo contrario: es nuestra puerta, y lo que se quiere es que la encuentren. Como `mapa-oficina.php` pasa la dirección como texto y no coordenadas, `mapa.php` se queda en la incrustación de siempre, que clava el pin en el portal. O sea que esto funciona hoy, sin esperar a la clave de Google. */ .corp-mapa{ position:relative; z-index:2; /* por encima del rayado de ::before */ /* DEL MISMO TAMAÑO QUE LA TARJETA, no de lo que sobre. Antonio, 20 de agosto: «hay que hacer mas pequeño el mapa porque es gigante, ocupa todo el modulo y no debe de ser asi. Yo imagino que deberia de tener el mismo tamaño que el modulo de Datos corporativos». La primera versión llevaba `flex:1 1 auto` y se quedaba con todo el ancho libre: en una pantalla de 1920 px eso son 1.372 px de mapa contra 452 de tarjeta. Además de desproporcionado, tapaba entera la foto de la oficina que hace de fondo del módulo. Ahora se le pone la misma medida que a `.corp-card` —460 px de tope, y `flex:0 1` para que no crezca— y `align-self:stretch` con los mismos márgenes verticales, que es lo que le da exactamente la misma altura que la tarjeta sin tener que fijarla a mano. */ flex: 0 1 460px; max-width: 460px; align-self: stretch; min-width:0; /* si no, el iframe no deja encoger la caja */ margin: 32px 32px 32px 0; /* pegado a la tarjeta, con aire por fuera */ border: 1px solid var(--gold); border-radius: 10px; overflow: hidden; /* recorta el iframe a las esquinas redondas */ background: rgba(255,255,255,0.94); box-shadow: 0 20px 50px rgba(0,0,0,0.15); } /* Suelo por si algún día el módulo se queda corto: el aviso previo al mapa (cuando hay que pulsar para cargarlo) es más bajo que la tarjeta y sin esto la caja se encogería hasta el texto. Con `stretch` manda la altura de la tarjeta, así que en la práctica no se llega a usar. */ .corp-mapa .mapa-oficina, .corp-mapa .mapa-destino, .corp-mapa .mapa-destino iframe{ min-height: 320px; } /* REGLA GENERAL PARA TODA LA WEB: - Cualquier email visible → enlazado con mailto: - Cualquier teléfono móvil visible → enlazado con tel: + enlace adicional a wa.me (WhatsApp) - Teléfono fijo (si lo hubiera) → solo tel:, sin WhatsApp */ .contact-link{ font-weight:700; color: var(--black); border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .contact-link:hover{ color: var(--gold-texto); border-color: var(--gold); } .contact-link--wa{ display:inline-flex; margin-left:2px; font-size:13px; text-decoration:none; } .corp-map{ margin-top: 18px; border-radius: 6px; overflow:hidden; border: 1px solid rgba(0,0,0,0.1); position:relative; } .corp-map iframe{ width:100%; height:220px; border:0; display:block; } .corp-map-open{ position:absolute; top:10px; left:10px; background: var(--white); color: #1a73e8; font-size:12px; font-weight:600; padding: 7px 12px; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); display:flex; align-items:center; gap:6px; z-index:3; } .contact-module{ background: var(--bg); border: 1px solid var(--gold); border-radius: 10px; overflow: hidden; display:grid; grid-template-columns: 1fr 1fr; box-shadow: 0 10px 40px rgba(0,0,0,0.05); } .contact-text-side{ position:relative; padding: 56px 48px; display:flex; flex-direction:column; justify-content:center; /* Aquí estaba `equipo.jpg`, la foto del equipo. Antonio la retiró: una foto de personas justo al lado de un formulario invita a mirar a las personas, no a rellenarlo. Esa foto está ahora en el bloque «Quiénes somos» de Empresa. En su lugar va `formulario.png`: una foto —taza, portátil y llaves sobre una mesa— que solo tiene opacidad en su cuarto derecho, con un máximo del 20 %, y se disuelve hacia la izquierda. Va en ESTE medio, el del texto, y ANCLADA A LA DERECHA. Los dos detalles son decisión de Antonio y los dos importan: · en el medio del texto y no en el del formulario, porque el lado donde se escribe va limpio; · a la derecha, porque el dibujo está en ese borde: centrada, la parte con contenido cae fuera del recorte y no se ve nada. Anclada ahí, el degradado muere justo hacia el texto, que es para lo que está hecho. Dos capas: el velo claro encima y la foto debajo. El velo va del 97 % de crema a la izquierda —donde está el titular y hay que poder leer— al 35 % a la derecha, que es lo que deja asomar la foto. `auto 100%` y no `cover`: se escala por altura y conserva su proporción. Con `cover` en una columna estrecha se ampliaría tanto que solo se vería un trozo de mantel. */ background-color: #ded8cc; background-image: linear-gradient(90deg, rgba(248,246,241,0.97) 0%, rgba(248,246,241,0.85) 55%, rgba(248,246,241,0.35) 100%), /* OJO: la extension va escrita a mano. Una hoja de estilos no puede comprobar si un archivo existe, asi que si esta foto cambia de formato hay que tocar ESTA linea. Paso a .webp el 18/08/2026: de 703 KB a 42 KB. */ url('/assets/img/oficina/formulario.webp'); background-repeat: no-repeat, no-repeat; background-position: center, right center; background-size: cover, auto 100%; } .contact-stock-tag{ position:absolute; top:14px; left:14px; z-index:5; background: rgba(0,0,0,0.55); color:#fff; font-size:10px; padding:4px 10px; border-radius:3px; } .contact-text-side h2{ font-size: 30px; margin-bottom: 20px; line-height:1.25; max-width: 420px; } .contact-text-side p{ font-size:15px; color: var(--gray-dark); margin-bottom: 22px; max-width: 420px; } .contact-checks{ list-style:none; } .contact-checks li{ font-size:14px; font-weight:600; margin-bottom: 10px; display:flex; align-items:center; gap:8px; } .contact-checks li::before{ content:'✓'; color: var(--gold-texto); font-weight:700; } .contact-form-side{ /* LIMPIO, sin imagen. Decisión de Antonio: «el contenedor de la derecha en donde se escribe va limpio sin imagen». Hubo un intento de poner aquí `formulario.png` y estaba mal: la imagen va en el medio del texto. Un fondo detrás de los campos, aunque sea tenue, es ruido justo donde el visitante tiene que leer y escribir. */ background: var(--bg); padding: 56px 48px; display:flex; flex-direction:column; align-items:stretch; justify-content:center; text-align:left; } .contact-form-side input:not([type="checkbox"]), .contact-form-side textarea, .contact-form-side select{ width:100%; border: 1px solid rgba(0,0,0,0.15); border-radius: 6px; padding: 13px 16px; font-size:14px; font-family:var(--fuente); margin-bottom: 14px; background: var(--white); color: var(--black); } /* ================================================================== ETIQUETA SOLO PARA LECTORES DE PANTALLA ================================================================== ESTA REGLA FALTABA, y llevaba faltando desde el primer día. El formulario de contacto de la portada marca cinco etiquetas con `class="sr-solo"` — «Nombre y apellidos», «Prefijo», «Teléfono», «Email» y «Mensaje» — porque el diseño aprobado enseña esos nombres dentro del campo, como marcador de posición, no encima. La clase se usaba en el HTML pero nunca se escribió aquí, así que no ocultaba nada: las cinco etiquetas salían a la vista repitiendo palabra por palabra lo que ya decía el marcador. Donde más se notaba era en el teléfono. «Prefijo» y «Teléfono» caían DENTRO de la caja del teléfono, una a cada lado del desplegable, y entre las dos palabras y el propio desplegable no quedaba sitio para escribir el número. Antonio, 20 de agosto: «lo del prefijo del telefono muy grande y no caben las palabras casi». Por qué no vale `display:none` ni `visibility:hidden`: los lectores de pantalla saltan igual lo que está escondido así, y entonces los campos se quedarían sin nombre — que es justo lo que estas etiquetas vienen a evitar. Hay que sacarlas de la vista SIN sacarlas del documento, y eso es lo que hace este recorte a un píxel. `clip` está obsoleto pero se deja al lado de `clip-path`: los navegadores viejos no entienden el segundo y sin el primero enseñarían la etiqueta de vuelta. */ .sr-solo{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space:nowrap; border:0; } .phone-field{ display:flex; align-items:center; border: 1px solid rgba(0,0,0,0.15); border-radius: 6px; margin-bottom: 14px; overflow:hidden; } /* El desplegable del prefijo ocupa lo que necesita y ni un píxel más: `flex:0 0 auto` para que no crezca, y letra un punto más pequeña porque «ES +34» no es el dato principal de la caja — el número sí. AVISO: estas medidas se REPITEN al final del archivo, en el bloque «EL PREFIJO DEL TELÉFONO». No es un descuido ni sobra ninguna de las dos: una regla mucho más abajo empata en especificidad con esta y le gana por ir después. Allí está explicado. Si se cambia una medida aquí, hay que cambiarla también allí. */ .phone-field select{ border:none; border-right: 1px solid rgba(0,0,0,0.1); border-radius:0; margin-bottom:0; flex: 0 0 auto; width:auto; padding: 13px 8px; font-size:13px; color: var(--gray-dark); } /* `min-width:0` no es un adorno: sin él, un campo dentro de un flex se niega a encogerse por debajo de su tamaño natural, y el desplegable acababa apretado contra el borde en las pantallas justas. */ .phone-field input{ border:none; border-radius:0; margin-bottom:0; flex: 1 1 auto; min-width:0; } .contact-form-side textarea{ resize:vertical; min-height:90px; } .contact-legal{ font-size:11px; color: var(--gray-mid); margin-bottom: 8px; line-height:1.6; text-align:left; } .contact-legal a{ color: var(--gold-texto); text-decoration:underline; } .contact-privacy-check{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color: var(--gray-dark); margin-bottom: 20px; } .contact-privacy-check input[type="checkbox"]{ width:16px; height:16px; flex-shrink:0; margin:2px 0 0 0; } .contact-submit{ background: var(--gold); color: var(--white); border:none; border-radius: 6px; padding: 15px; font-size:15px; font-weight:600; cursor:pointer; transition: background 0.25s ease; } .contact-submit:hover{ background:#8a6c2c; } @media (max-width: 900px){ .contact-module{ grid-template-columns: 1fr; } .contact-text-side{ padding: 40px 28px; } .contact-form-side{ padding: 40px 28px; } /* En columna: primero los datos, debajo el mapa. Al lado no caben los dos sin que el mapa quede en una tira inservible. */ .corp-module{ min-height: auto; padding: 20px 0; flex-direction: column; } /* `align-self:stretch` en la tarjeta, y no solo en el mapa: apilados, los dos tienen que medir lo mismo o el bloque se ve descuadrado. Sin esto la tarjeta se quedaba con el ancho de su propio texto —438 px dentro de un módulo de 768— y el mapa, que sí ocupa todo, salía claramente más ancho justo debajo. */ .corp-card{ margin: 20px; max-width:none; align-self: stretch; } /* Apilados, el tope de 460 px no pinta nada: aquí los dos ocupan el ancho entero, y tienen que seguir midiendo lo mismo. */ .corp-mapa{ align-self: stretch; max-width: none; flex: 0 0 auto; margin: 0 20px 20px 20px; } /* Apilado, el mapa no copia la altura de la tarjeta: la tarjeta puede irse a 570 px de texto y un mapa igual de alto se come la pantalla entera del móvil. Se le da una altura propia, suficiente para situarse y no más. */ .corp-mapa .mapa-oficina, .corp-mapa .mapa-destino, .corp-mapa .mapa-destino iframe{ min-height: 300px; } } /* ===== CAPTACION / GUIA — BANNER (29 julio: sustituye al formulario completo. Contenido/imagen definitivos pendientes de diseñar; de momento placeholder con el degradado dorado de marca, para que Antonio vea el cambio de formato.) ===== */ .guide-banner{ position:relative; overflow:hidden; background: linear-gradient(120deg, #D4AF37 0%, #8a6c2c 100%); color: var(--white); border-radius: 8px; padding: 48px 52px; display:flex; align-items:center; justify-content:space-between; gap: 32px; } .guide-banner-tag{ position:absolute; top:14px; right:14px; z-index:2; background: rgba(0,0,0,0.25); color:#fff; font-size:10px; padding:4px 10px; border-radius:3px; } .guide-banner-text{ max-width: 620px; } .guide-banner-text .eyebrow{ color: rgba(255,255,255,0.85); } .guide-banner-text h2{ font-size:27px; margin: 10px 0 10px; color: var(--white); } .guide-banner-text p{ font-size:14px; color: rgba(255,255,255,0.9); margin:0; } .guide-banner .btn-cta{ flex-shrink:0; background: var(--white); color: var(--gold-texto); font-weight:700; padding: 14px 28px; white-space:nowrap; } .guide-banner .btn-cta:hover{ background: var(--bg); } @media (max-width:760px){ .guide-banner{ flex-direction:column; align-items:flex-start; padding:34px 28px; } .guide-banner .btn-cta{ width:100%; text-align:center; } } /* =================================================================== FOTO DE FONDO CON PARALAJE EN EL BANNER DE GUÍA =================================================================== Sin foto, el banner se queda con el degradado dorado del boceto: la clase `con-foto` solo la pone `includes/banner-guia.php` cuando el archivo existe de verdad en `assets/img/banners/`. El movimiento lo hace JavaScript con `transform` (no con `background-attachment: fixed`, que en el iPhone se ve a saltos y que además se lleva mal con el `overflow: clip` del body). Si el visitante tiene activado «reducir movimiento», la foto se queda quieta: se ve igual de bien, simplemente no se mueve. =================================================================== */ /* Un gris de fondo mientras la foto carga, para que el blanco del texto no aparezca un instante sobre el crema y parezca un fallo. */ .guide-banner.con-foto{ background: #2f2b24; } /* Salvo cuando el banner va SIN velo. Ahí ese marrón oscuro es lo único oscuro que queda en el banner, y asoma —en la carga, en los bordes, en cualquier píxel que la foto no llegue a cubrir— justo en el banner en el que Antonio pidió que no hubiera ningún relleno de color. (25 de agosto: «sale el lado del degradado oscuro y debajo del banner debería de haber un color claro».) */ .guide-banner.con-foto.sin-velo{ background: var(--bg); } .guide-banner .parallax-foto{ position:absolute; left:0; right:0; /* Sobresale por arriba y por abajo MÁS de lo que la va a mover el paralaje (110 px, `data-recorrido` en banner-guia.php). Si midiera justo, al desplazarse asomaría el fondo por un borde. Si algún día se sube el recorrido, hay que subir esto con él. */ top:-124px; bottom:-124px; background-size:cover; background-position:center; z-index:0; will-change: transform; } /* El velo. El texto del banner es blanco, así que sobre una foto CLARA no se leería. Poniéndolo en el CSS, Antonio puede usar la foto que quiera sin tener que oscurecerla antes en Photoshop. Se conserva un toque dorado por la derecha para que siga siendo el banner de Adel y no una foto con letras encima. SE PUEDE QUITAR BANNER A BANNER (24 de agosto, Antonio: «quiero que salga la imagen original tal cual la he dejado en la carpeta»). Se pone `$bannerSinVelo = true;` antes de pedir el banner y la foto se ve como es. Solo tiene sentido con fotos oscuras: medido sobre las tres que hay hoy, sin velo el texto queda en 3,9:1 sobre la de asesoría —se lee— y en 1,9:1 sobre las de comprar y vender, que son luminosas —no se lee—. El mínimo para un titular es 3:1. */ .guide-banner.con-foto:not(.sin-velo)::after{ content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(100deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.50) 52%, rgba(212, 175, 55,0.42) 100%); } /* Sin velo, el texto se apoya en una sombra pegada a las letras en vez de en una capa sobre la foto: levanta el texto cuando pasa por una zona algo más clara y no apaga la imagen. */ .guide-banner.con-foto.sin-velo .guide-banner-text .eyebrow, .guide-banner.con-foto.sin-velo .guide-banner-text h2, .guide-banner.con-foto.sin-velo .guide-banner-text p{ text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 12px rgba(0,0,0,0.40); } /* El contenido, por encima de foto y velo. */ .guide-banner-inner{ position:relative; z-index:2; } .guide-banner-tag{ z-index:3; } @media (prefers-reduced-motion: reduce){ .guide-banner .parallax-foto{ transform:none !important; will-change:auto; } } /* ===== FOOTER ===== */ footer{ background: #1a1a1a; color: #cfcfcf; padding: 64px 0 24px 0; font-size:13px; } .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 48px; } .footer-col h5{ color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:18px; } .footer-col ul{ list-style:none; } .footer-col li{ margin-bottom:10px; } .footer-col a{ color:#a8a8a8; transition:color 0.2s ease; } .footer-col a:hover{ color: var(--gold-texto); } .footer-logo{ margin-bottom:18px; } /* El footer siempre tiene fondo oscuro, así que aquí se usa directamente el logo blanco */ /* 220 px como en el boceto. Estaba en `height:32px`, o sea 77 px de ancho: menos de un tercio del logo del boceto. */ .footer-logo img{ width: var(--ancho-logo-pie); height:auto; display:block; } .footer-bottom{ border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; } .footer-langs{ display:flex; gap:10px; } .footer-langs span{ display:flex; align-items:center; gap:5px; padding:2px 8px; border:1px solid #444; border-radius:3px; font-size:11px; } .social-row{ display:flex; gap:14px; } .social-row a{ width:32px; height:32px; border:1px solid #444; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; } /* ===== responsive básico ===== */ /* Con el logo del pie a 220 px ya no caben dos columnas en móvil: el boceto lo apila a una sola y baja el logo a 180 px. Igual aquí. */ @media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; } .footer-logo img{ width: var(--ancho-logo-pie-movil); } } /* En móviles estrechos el logo de la cabecera (220 px) queda muy pegado al botón de menú — mismo ajuste que el boceto. */ @media (max-width: 480px){ .logo img{ width: var(--ancho-logo-estrecho); } } @media (max-width: 1024px){ .zones-grid{ grid-template-columns: repeat(2,1fr); } .properties-grid{ grid-template-columns: repeat(2,1fr); } /* minmax(0,1fr) y no 1fr (20 oct 2026): con 1fr cada columna exige como minimo el ancho de su contenido y, como `.trust-item` es flex (cifra y rotulo en fila, regla de asesoria.php), en un movil real la segunda columna se salia por la derecha y se veia cortada. */ .trust-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:24px; } .reviews-grid{ grid-template-columns: 1fr; } .news-grid{ grid-template-columns: 1fr; } .footer-grid{ grid-template-columns: 1fr 1fr; } .lead-capture{ grid-template-columns: 1fr; } .contact-map-grid{ grid-template-columns: 1fr; } .map-block iframe{ min-height:320px; } } /* ===================================================================== CUÁNDO SE CAMBIA AL MENÚ DE HAMBURGUESA ===================================================================== El corte estaba en 1150px para los cuatro idiomas, y estaba MAL. No se veía porque en español casi cuela, pero medido uno a uno el menú se desbordaba en todos: español cabía a partir de 1301px (se rompía de 1151 a 1300) polaco cabía a partir de 1331px ruso cabía a partir de 1401px O sea que en un portátil de 1280 o 1366 —que es de lo más común— el menú no cabía y se salía. Se descubrió el 28 de agosto de 2026 al ir a arreglar otra cosa: que el menú se veía apelotonado. El corte no puede ser el mismo para los cuatro, porque las etiquetas no miden lo mismo. Con la letra de 12px, los diez enlaces ocupan: inglés 524px · español 626px · polaco 728px · ruso 805px Así que cada idioma salta a hamburguesa cuando de verdad le hace falta, en vez de castigar al español con el listón del ruso. El idioma sale del `lang` del , que ya lo pone `header.php`. El 1150 de siempre se queda como suelo común: por debajo de eso no se enseña el menú en ningún idioma, pase lo que pase. ===================================================================== */ @media (max-width: 1150px){ nav.main-nav, .header-right .lang-selector{ display:none; } .burger{ display:block; } /* EL PANEL DEJA DE FLOTAR ANTES QUE EN MOVIL. * * Flotaba fijo a la derecha hasta los 760px, y entre 760 y 1150 se * come el buscador: el buscador ocupa ahi todo el ancho en dos filas * y el panel se le pone encima. Se veia al estrechar la ventana en un * portatil (Antonio, 8 de septiembre de 2026). * * Solucion: lo que ya se hacia en movil, pero empezando antes. Pasa * al flujo de la pagina, debajo del hero, y deja de tapar nada. */ .panel-cta{ position: static; transform: none; right: auto; width: auto; max-width: 420px; margin: 24px auto 0; padding: 22px; border-radius: 6px; } } /* Español e inglés: por debajo de 1300px los diez enlaces ya no caben. Polaco y ruso tienen su propio corte, más alto, en el bloque «EL MENÚ DE LA CABECERA EN POLACO Y EN RUSO» del final de esta hoja. */ @media (max-width: 1300px){ nav.main-nav, .header-right .lang-selector{ display:none; } .burger{ display:block; } } /* Tablet: layout de escritorio pero hero algo más pequeño */ @media (max-width: 1150px) and (min-width: 761px){ .hero-content h1{ font-size:52px; } /* EL BUSCADOR, EN DOS FILAS. * * Con cuatro campos y el boton, cinco columnas no caben por debajo de * 1150px: el ultimo campo y el boton se salian de la caja. Se veia al * estrechar la ventana en un portatil (Antonio, 8 de septiembre de * 2026, el mismo dia de anadir «Referencia»). * * Dos filas de dos campos, y el boton ocupando el ancho debajo. Antes * cabian los cuatro elementos justos; con el quinto ya no. */ .search-box{ grid-template-columns: 1fr 1fr; } .search-box .search-clase{ grid-column: 1 / -1; } .search-box .search-submit{ grid-column: 1 / -1; padding: 12px 26px; } } /* Móvil: aquí sí cambian columnas y tamaños de texto */ @media (max-width: 760px){ .search-box{ grid-template-columns: 1fr; } /* Las dos casillas se reparten la línea a partes iguales en vez de partirse en dos renglones. Sueltas, «Obra nueva» y «Segunda mano» suman más de lo que hay de ancho y la segunda caía debajo: dos píldoras de distinto tamaño, una encima de otra, que ya no se leen como una elección entre dos. Repartidas quedan como lo que son. */ .clase-op{ flex: 1 1 0; } /* `nowrap` y un punto menos de letra para que «Segunda mano» quepa en un renglón: partido en dos, deja las dos píldoras de distinta altura y el conjunto se descuadra. */ .clase-op span{ text-align:center; padding: 9px 6px; font-size:12px; white-space:nowrap; } .hero-content h1{ font-size:36px; } .hero-content p{ font-size:16px; } .hero{ min-height: 620px; align-items:flex-end; } .split-two{ grid-template-columns:1fr; } .zones-grid{ grid-template-columns: 1fr; } .properties-grid{ grid-template-columns: 1fr; } } /* Móvil: el panel deja de flotar y pasa a ser un módulo más del documento, a ancho completo. Se pinta donde esté escrito en el HTML, por eso la home lo incluye justo debajo del hero. */ @media (max-width: 760px){ .panel-cta{ position: static; transform: none; width: auto; margin: 0 0 32px; padding: 26px 22px 24px; border-radius: 0; box-shadow: none; } .panel-cta-titular{ font-size: 21px; } .panel-cta-apoyo{ font-size: 14px; margin-bottom: 18px; } .panel-cta-botones{ gap: 10px; } .panel-cta-vender, .panel-cta-contactar{ padding: 16px 18px; font-size: 16px; } /* Dentro del documento no puede tapar nada, así que aunque el script se equivocara y le pusiera la clase, aquí se sigue viendo. */ .panel-cta--oculto{ opacity: 1; visibility: visible; pointer-events: auto; } } /* ===================================================================== */ /* 404 y resultados de búsqueda */ /* */ /* Traído del boceto 404.html (Web muestra) sin cambios de diseño. Los */ /* @media van enteros: la primera vez se copiaron solo las reglas de */ /* dentro y la versión de móvil pisaba a la de escritorio, dejando las */ /* tres tarjetas en columna en pantallas grandes. */ /* ===================================================================== */ /* ---------- 404: bloque principal ---------- */ .err-hero { padding-bottom:64px; } .err-hero-inner { max-width:760px; text-align:center; margin:0 auto; } .err-num { font-size:120px; font-weight:700; line-height:1; color: rgba(212, 175, 55,0.18); letter-spacing:2px; margin-bottom:8px; } .err-eyebrow { font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color: var(--gold-texto); font-weight:600; margin-bottom:14px; } .err-hero h1 { font-size:38px; line-height:1.2; margin-bottom:18px; } .err-lead { font-size:17px; color: var(--gray-dark); line-height:1.7; max-width:560px; margin:0 auto 40px auto; } .err-buscador { max-width:520px; margin:0 auto; text-align:left; } .err-buscar-label { display:block; font-size:12px; letter-spacing:1px; text-transform:uppercase; color: var(--gray-mid); font-weight:600; margin-bottom:10px; } .err-buscar-caja { display:flex; gap:0; border:1px solid rgba(0,0,0,0.16); border-radius:8px; overflow:hidden; } .err-buscar-caja input { flex:1; min-width:0; border:none; padding:16px 18px; font-size:15px; font-family:inherit; background: var(--white); color: var(--gray-dark); } .err-buscar-caja input::placeholder { color: var(--gray-mid); } .err-buscar-caja input:disabled { background: var(--bg); cursor:not-allowed; } .err-buscar-btn { flex:none; border:none; background: var(--black); color: var(--white); font-family:inherit; font-size:14px; font-weight:600; padding:0 26px; cursor:not-allowed; } .err-buscador .pending-note { margin-top:16px; text-align:left; } /* ---------- Tres salidas ---------- */ .err-salidas { padding:56px 0 64px 0; border-top:1px solid rgba(0,0,0,0.07); } .err-salidas-eyebrow { font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color: var(--gold-texto); font-weight:600; text-align:center; margin-bottom:28px; } .err-salidas-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; } .err-salida-card { display:flex; flex-direction:column; align-items:stretch; min-width:0; border:1px solid rgba(0,0,0,0.09); border-radius:10px; padding:26px 24px; transition: border-color 0.25s ease, transform 0.25s ease; } .err-salida-card:hover { border-color: rgba(212, 175, 55,0.6); transform: translateY(-3px); } .err-salida-card h3 { font-size:19px; line-height:1.3; margin-bottom:8px; } .err-salida-card p { font-size:14px; color: var(--gray-dark); line-height:1.6; margin-bottom:14px; } .err-salida-mas { font-size:13px; font-weight:600; color: var(--gold-texto); margin-top:auto; } @media (max-width: 1024px) { .err-salidas-grid {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 760px) { .err-salidas-grid {grid-template-columns: 1fr; gap:16px;} } /* ---------- Reportar enlace roto ---------- */ .err-reportar { background: var(--black); color: var(--white); padding:44px 0; } .err-reportar-inner { display:flex; align-items:center; gap:28px; } .err-reportar-icon { flex:none; width:60px; height:60px; border-radius:50%; } .err-reportar-texto { min-width:0; } .err-reportar h2 { font-size:22px; color: var(--white); margin-bottom:10px; } .err-reportar p { font-size:15px; color: #c9c9c9; line-height:1.7; } .err-reportar .contact-link { color: var(--white); text-decoration:underline; font-weight:600; } /* El botón de avisar iba pegado al párrafo: es un inline justo después del

    , y ninguno de los dos traía margen. Se le da aire y se convierte en bloque para que el margen superior cuente de verdad —en un inline, el margin-top no separa nada. */ .err-reportar .btn-outline { display:inline-block; margin-top:20px; } @media (max-width: 600px) { .err-reportar-inner {flex-direction:column; align-items:flex-start; gap:16px;} } @media (max-width: 480px) { .err-num {font-size:88px;} .err-hero h1 {font-size:28px;} .err-buscar-caja {flex-direction:column;} .err-buscar-btn {padding:14px;} } /* Lista de resultados dentro de la 404. No estaba en el boceto porque allí el buscador estaba desactivado: son los resultados de verdad. */ .err-resultados { padding: 0 0 48px; } .err-resultados .wrap { max-width: 760px; } .err-resultados-lista { list-style: none; padding: 0; margin: 16px 0 0; } .err-resultados-lista li { border-bottom: 1px solid rgba(0,0,0,0.08); } .err-resultados-lista li:last-child { border-bottom: none; } .err-resultados-lista a { display: block; padding: 14px 0; text-decoration: none; color: inherit; } .err-resultados-lista a:hover { color: var(--gold-texto); } /* ===================================================================== APARICIÓN AL HACER SCROLL (.reveal) ===================================================================== Estaba en todos los bocetos pero se quedó fuera al extraer esta hoja del boceto de la home, así que hasta ahora ningún `class="reveal"` del sitio hacía nada. Dos avisos para quien lo toque: 1. El estado inicial (opacity:0) vive DENTRO de `prefers-reduced-motion: no-preference`, a propósito. Si se sacara fuera y el JS fallara, el contenido se quedaría invisible para siempre. Tal como está, sin JS el peor caso es que no haya animación, que es un problema muy distinto. 2. Quien pinte contenido con `.reveal` necesita `main.js` cargado — es quien pone `.is-visible` al entrar en pantalla. ===================================================================== */ .reveal{ opacity: 1; } @media (prefers-reduced-motion: no-preference){ .reveal{ opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.is-visible{ opacity: 1; transform: translateY(0); } /* Cascada dentro de las rejillas: cada tarjeta entra un pelín después que la anterior, en vez de todas a la vez. */ .zones-grid .reveal:nth-child(2){ transition-delay: 0.08s; } .zones-grid .reveal:nth-child(3){ transition-delay: 0.16s; } .zones-grid .reveal:nth-child(4){ transition-delay: 0.24s; } .properties-grid .reveal:nth-child(2){ transition-delay: 0.08s; } .properties-grid .reveal:nth-child(3){ transition-delay: 0.16s; } .similar-grid .reveal:nth-child(2){ transition-delay: 0.08s; } .similar-grid .reveal:nth-child(3){ transition-delay: 0.16s; } .news-grid .reveal:nth-child(2){ transition-delay: 0.08s; } .news-grid .reveal:nth-child(3){ transition-delay: 0.16s; } .reviews-grid .reveal:nth-child(2){ transition-delay: 0.08s; } .reviews-grid .reveal:nth-child(3){ transition-delay: 0.16s; } .split-two .reveal:nth-child(2){ transition-delay: 0.1s; } } /* Al imprimir se ve todo, pase lo que pase con el JS. */ @media print{ .reveal{ opacity:1 !important; transform:none !important; } } /* ===================================================================== CABECERA SÓLIDA — páginas sin hero ===================================================================== La cabecera de arriba es transparente y se vuelve sólida al hacer scroll, porque en la home se apoya sobre el hero a pantalla completa. En las páginas que NO tienen hero (ficha de propiedad, zona, noticias, 404, gracias...) eso deja el logo blanco sobre fondo claro: invisible hasta que el visitante hace scroll. Por eso esas páginas piden cabecera sólida desde el primer momento, poniendo `$cabeceraSolida = true` antes de incluir includes/header.php. Va con `position: sticky` en vez de `fixed`: así ocupa su sitio en el documento y el contenido de debajo ya no necesita el `padding-top:160px` a mano que llevan las páginas portadas hasta ahora. ===================================================================== */ body.cabecera-solida header{ background: var(--bg); border-bottom: 3px solid var(--gold); position: sticky; box-shadow: 0 4px 24px rgba(0,0,0,0.05); } /* Sobre fondo claro el logo es siempre el negro, haya scroll o no. */ body.cabecera-solida .logo .logo-blanco{ display:none; } body.cabecera-solida .logo .logo-negro{ display:block; } body.cabecera-solida nav.main-nav a{ color: var(--black); } body.cabecera-solida .lang-selector span{ color: var(--black); } body.cabecera-solida .burger{ color: var(--black); } /* ===================================================================== FICHA DE PROPIEDAD (/es/propiedad.php) ===================================================================== Extraído del boceto ya validado `propiedad.html`, conservando sus propios comentarios. Cubre: galería, visor ampliado (lightbox), cabecera con precio, datos clave, columnas de contenido + sidebar pegajosa con el formulario, certificado energético, mapa, el bloque "¿Vendes la tuya?" y las propiedades similares. Se ha dejado fuera lo que solo servía dentro del boceto: el banner de borrador, el botón "Mapa de bocetos" y los marcadores de foto de relleno. ===================================================================== */ /* Aquí había un duplicado de las líneas separadoras del menú SIN el `header.scrolled` delante, colado al portar la ficha de propiedad. Las rayitas son gris oscuro (rgba(0,0,0,0.12)): sobre el hero, con la cabecera transparente, no se ven, y en el boceto solo aparecen cuando la cabecera se pone sólida. La regla correcta —con `header.scrolled`— está más abajo; esta se quita para no duplicar. */ .lang-selector span:not(.active):hover{ border-color: var(--gold); color: var(--black); } .sell-prompt{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin: 48px 0; padding: 32px 36px; border: 1px solid rgba(212, 175, 55,0.3); border-radius:4px; background: var(--bg); } /* ------------------------------------------------------------- LA FOTO DE FONDO DEL BANNER (.con-foto) ------------------------------------------------------------- Misma receta que el banner del final de los listados: la imagen se ancla a la DERECHA y se escala por ALTURA conservando su proporción (`auto 100%`), no con `cover`. Con `cover` en una franja tan baja se ampliaría tanto que solo se vería un recorte sin sentido. `overflow:hidden` porque el banner tiene esquinas redondeadas y sin esto la foto asoma por fuera del filo. El texto y el botón van por delante con `position:relative`: sin eso el fondo es del contenedor y el contenido no sube, pero al añadir cualquier fondo propio a un hijo se descolocaría el orden. EN MÓVIL NO SE VE, a propósito. Ahí el banner se apila —el botón pasa a ocupar todo el ancho— y crece de alto, así que la imagen se ampliaría hasta tapar el texto. */ .sell-prompt.con-foto{ position:relative; overflow:hidden; background-repeat: no-repeat; background-position: right center; background-size: auto 100%; background-color: var(--bg); } .sell-prompt.con-foto > *{ position:relative; z-index:2; } @media (max-width: 760px){ .sell-prompt.con-foto{ background-image: none !important; } } .sell-prompt-text h3{ font-size:20px; font-weight:600; margin-bottom:6px; } .sell-prompt-text p{ font-size:14px; color: var(--gray-mid); max-width:480px; } .sell-prompt-text .inline-link{ color: var(--gold-texto); text-decoration: underline; text-underline-offset:2px; cursor:pointer; font-weight:600; transition: opacity 0.2s ease; } .sell-prompt-text .inline-link:hover{ opacity:0.7; } .sell-prompt-actions{ display:flex; gap:12px; flex-shrink:0; } .sell-prompt-actions a{ padding: 13px 24px; white-space:nowrap; } /* Aquí estaba `width:165px` a secas. Combinado con el `height` fijo de `.logo img` el logo salía estirado en el menú móvil: se fijaban ancho Y alto a la vez, ignorando la proporción real de la imagen. Se fija solo la altura, igual que en la cabecera. */ .mobile-menu-top .logo img{ width: var(--ancho-logo-movil); height:auto; } /* El CSS del desplegable «Zonas» (.has-dropdown / .nav-dropdown / .mobile-sub) YA estaba portado del boceto más abajo en este archivo. No hacía falta escribirlo otra vez: lo único que faltaba era que includes/nav.php incluyese «Zonas» y «Reseñas» en la lista del menú. */ .breadcrumb{ padding: 18px 0; font-size:12px; color: var(--gray-mid); } .breadcrumb a{ color: var(--gray-mid); transition: color 0.2s ease; } .breadcrumb a:hover{ color: var(--gold-texto); } .breadcrumb .sep{ margin:0 6px; } .breadcrumb .current{ color: var(--black); } .gallery{ display:grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: 560px; position:relative; border-radius: 4px; overflow:hidden; } .gallery .main-photo{ grid-row: 1 / 3; } .gallery > div{ position:relative; overflow:hidden; cursor:pointer; background: repeating-linear-gradient(48deg, #e6e2d8, #e6e2d8 16px, #efece2 16px, #efece2 32px); } .gallery > div::after{ content:''; position:absolute; inset:0; transition: transform 0.5s ease; } .gallery > div:hover{ } .gallery-view-all{ position:absolute; bottom: 20px; right: 20px; background: var(--white); padding: 10px 18px; border-radius: 3px; font-size:13px; font-weight:600; box-shadow: 0 8px 20px rgba(0,0,0,0.15); display:flex; align-items:center; gap:8px; z-index:2; transition: transform 0.2s ease; } .gallery-view-all:hover{ transform: translateY(-2px); } .lightbox{ position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; background: rgba(10,9,7,0.96); opacity:0; pointer-events:none; transition: opacity 0.3s ease; } .lightbox.open{ opacity:1; pointer-events:auto; } .lightbox-top{ display:flex; justify-content:space-between; align-items:center; padding: 18px 24px; flex-shrink:0; } .lightbox-counter{ color:#e8e4da; font-size:14px; letter-spacing:0.5px; } .lightbox-caption{ color: var(--gold-texto); font-size:12px; text-transform:uppercase; letter-spacing:1px; font-weight:700; margin-left:12px; } .lightbox-close{ background:none; border:1px solid rgba(255,255,255,0.35); color:#fff; width:38px; height:38px; border-radius:50%; font-size:18px; cursor:pointer; transition: border-color 0.2s ease, color 0.2s ease; } .lightbox-close:hover{ border-color: var(--gold); color: var(--gold-texto); } .lightbox-stage{ flex:1; display:flex; align-items:center; justify-content:center; position:relative; padding: 0 70px; min-height:0; } .lightbox-media{ width:100%; height:100%; max-width:1100px; border-radius:4px; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; background: repeating-linear-gradient(48deg, #2a2620, #2a2620 16px, #322d25 16px, #322d25 32px); } .lightbox-media .media-label{ color:#cfc9bb; font-size:13px; text-align:center; padding: 0 20px; } .lightbox-media .media-label strong{ display:block; color:#fff; font-size:16px; margin-bottom:6px; } .lightbox-arrow{ position:absolute; top:50%; transform: translateY(-50%); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color:#fff; width:46px; height:46px; border-radius:50%; font-size:20px; cursor:pointer; transition: background 0.2s ease, border-color 0.2s ease; } .lightbox-arrow:hover{ background: rgba(212, 175, 55,0.35); border-color: var(--gold); } .lightbox-arrow--prev{ left:14px; } .lightbox-arrow--next{ right:14px; } .lightbox-thumbs{ display:flex; gap:8px; padding: 16px 24px 22px; overflow-x:auto; flex-shrink:0; } .lightbox-thumb{ position:relative; flex-shrink:0; width:74px; height:56px; border-radius:3px; overflow:hidden; cursor:pointer; background: repeating-linear-gradient(48deg, #34302a, #34302a 10px, #3c372f 10px, #3c372f 20px); border: 2px solid transparent; transition: border-color 0.2s ease, opacity 0.2s ease; opacity:0.55; /* La foto de la miniatura la pone main.js como background-image. Sin esto se veia a tamano real recortada por la esquina superior izquierda: cielo en exteriores, pared en interiores (22 oct 2026). */ background-size: cover; background-position: center; } .lightbox-thumb:hover{ opacity:0.85; } .lightbox-thumb.active{ border-color: var(--gold); opacity:1; } .lightbox-thumb .tag{ position:absolute; bottom:2px; left:2px; right:2px; text-align:center; font-size:8px; color:#fff; background: rgba(0,0,0,0.55); border-radius:2px; padding:1px 0; letter-spacing:0.5px; } .property-header{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px; padding: 40px 0 32px 0; border-bottom: 1px solid rgba(0,0,0,0.08); } .property-header .eyebrow{ font-size:12px; text-transform:uppercase; letter-spacing:2px; color: var(--gold-texto); font-weight:600; margin-bottom:12px; display:block; } .property-header h1{ font-size: 40px; font-weight:400; line-height:1.2; max-width: 640px; margin-bottom:10px; } .property-header .location-line{ font-size:14px; color: var(--gray-mid); } .property-price-block{ text-align:right; } .property-price-block .price{ font-size: 36px; font-weight:700; color: var(--black); } .property-price-block .ref{ font-size:12px; color: var(--gray-mid); margin-top:6px; } /* ---------- Compartir la vivienda ----------------------------------- Cuatro iconos pegados al precio. Van en gris y a 18 px a proposito: lo primero que tiene que leerse en esta esquina es el precio, y cuatro botones con palabras se lo comerian. Se ven cuando se buscan y desaparecen cuando no — que es como se comportan en Idealista y Kyero. El bloque padre lleva `text-align:right`, asi que la fila se alinea a la derecha con `justify-content:flex-end` para quedar bajo el precio. */ .compartir{ display:flex; align-items:center; gap:6px; justify-content:flex-end; margin-top:12px; } .compartir-tit{ font-size:11px; text-transform:uppercase; letter-spacing:0.8px; color: var(--gray-mid); margin-right:4px; } .compartir-btn{ width:32px; height:32px; flex:0 0 32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,0.10); border-radius:50%; background:none; padding:0; cursor:pointer; color: var(--gray-mid); transition: color 0.2s ease, border-color 0.2s ease; position:relative; /* por el aviso de «copiado» */ -webkit-tap-highlight-color: transparent; } .compartir-btn svg{ width:16px; height:16px; display:block; } /* Al pasar por encima toman el dorado de la casa, igual que `.icon-btn`. */ .compartir-btn:hover, .compartir-btn:focus-visible{ color: var(--gold-texto); border-color: var(--gold); } /* El boton de copiar, cuando ya ha copiado. */ .compartir-btn.copiado{ color: var(--gold-texto); border-color: var(--gold); } /* El «¡Enlace copiado!». Va flotando encima para no ensanchar la fila ni mover el precio de sitio cuando aparece. Sin texto no ocupa nada, asi que no hace falta ocultarlo ni encenderlo: se pinta solo cuando el JavaScript le mete la frase. */ .compartir-aviso{ position:absolute; bottom: calc(100% + 8px); right:0; white-space:nowrap; font-size:12px; line-height:1; color:#fff; background: rgba(0,0,0,0.82); border-radius:4px; padding:0; max-width:0; overflow:hidden; transition: max-width 0.2s ease, padding 0.2s ease; } .compartir-btn.copiado .compartir-aviso{ padding:7px 11px; max-width:220px; } /* En movil la fila se centra: el bloque del precio deja de ir a la derecha y una fila pegada a un lado queda descolgada. */ @media (max-width: 760px){ .compartir{ justify-content:flex-start; margin-top:14px; } .compartir-aviso{ right:auto; left:0; } } .header-actions{ display:flex; gap:10px; margin-top:14px; justify-content:flex-end; } .icon-btn{ width:38px; height:38px; border: 1px solid rgba(0,0,0,0.12); border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; transition: border-color 0.2s ease, color 0.2s ease; } .icon-btn:hover{ border-color: var(--gold); color: var(--gold-texto); } .key-facts{ display:flex; gap: 48px; padding: 28px 0; border-bottom: 1px solid rgba(0,0,0,0.08); flex-wrap:wrap; } .key-fact{ display:flex; flex-direction:column; gap:4px; } .key-fact .val{ font-size:22px; font-weight:700; } .key-fact .lbl{ font-size:12px; text-transform:uppercase; letter-spacing:0.5px; color: var(--gray-mid); } .main-layout{ display:grid; grid-template-columns: 1.7fr 1fr; gap: 56px; padding: 48px 0 80px 0; } .content-block{ margin-bottom: 56px; } .content-block h2{ font-size: 26px; font-weight:400; margin-bottom: 20px; } .content-block p{ font-size:15px; color: var(--gray-dark); margin-bottom: 14px; max-width: 640px; } .read-more-link{ font-size:13px; font-weight:600; color: var(--gold-texto); display:inline-block; margin-top:6px; } .features-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; } .feature-item{ display:flex; align-items:center; gap:10px; font-size:14px; color: var(--gray-dark); padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.06); } .feature-item .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; } .map-embed{ border-radius: 4px; overflow:hidden; height: 340px; position:relative; } .map-embed iframe{ width:100%; height:100%; border:0; } .map-note{ font-size:12px; color: var(--gray-mid); margin-top:10px; } .energy-cert{ display:flex; align-items:center; gap: 14px; padding: 14px 16px; border: 1px dashed rgba(212, 175, 55,0.35); border-radius: 4px; } .energy-badge{ background:transparent; border: 1.5px solid var(--gold); color: var(--gold-texto); font-size:11px; font-weight:700; letter-spacing:0.5px; padding: 6px 12px; border-radius:20px; white-space:nowrap; } .sidebar{ position:sticky; top: 24px; align-self:flex-start; } .agent-card{ background: var(--bg); border-radius: 6px; padding: 28px; margin-bottom: 24px; } .agent-card .agent-info{ display:flex; align-items:center; gap:14px; margin-bottom:20px; } .agent-avatar{ width:56px; height:56px; border-radius:50%; background: var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; flex-shrink:0; } /* --------------------------------------------------------------- EL CÍRCULO CON EL LOGOTIPO (.con-logo) --------------------------------------------------------------- Fondo BLANCO y aro dorado, no círculo dorado. El logotipo vertical de Adel es dorado con degradado: sobre un fondo dorado se pierde entero. Sobre blanco respira, y el aro conserva el color de la casa sin robarle protagonismo. Blanco puro y no el crema del fondo: el crema y los dorados claros del logo están demasiado cerca y el conjunto se apaga. El blanco lo recorta y de paso separa el círculo del fondo de la tarjeta. 60 px en vez de 56: cuatro píxeles más no descolocan nada y son la diferencia entre distinguir los edificios del logo y ver una mancha. Más grande empezaría a competir con el nombre de al lado. */ .agent-avatar.con-logo{ width:60px; height:60px; background: #fff; border: 1px solid rgba(212, 175, 55,0.45); /* 7 px de aire: el logotipo llega casi hasta el borde por abajo —el «Properties»— y pegado al aro se ve apretado. */ padding: 7px; box-sizing: border-box; overflow:hidden; } /* `object-fit: contain` para que el logo no se recorte nunca: es cuadrado, pero si algún día se cambia por uno apaisado seguiría entrando entero en vez de perder los lados. */ .agent-avatar.con-logo img{ width:100%; height:100%; object-fit: contain; display:block; } .agent-info .name{ font-size:15px; font-weight:700; } .agent-info .role{ font-size:12px; color: var(--gray-mid); } .form-intent-toggle{ display:flex; gap:8px; margin-bottom:18px; } .intent-pill{ flex:1; text-align:center; padding:8px 6px; font-size:12px; font-weight:600; border:1px solid rgba(0,0,0,0.15); border-radius:20px; cursor:pointer; color: var(--gray-mid); background: var(--white); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .intent-pill.active{ background: var(--gold); color:#fff; border-color: var(--gold); } .agent-card.pulse{ animation: agentCardPulse 1.1s ease; } .contact-form label{ font-size:12px; color: var(--gray-dark); display:block; margin-bottom:4px; font-weight:500; } .contact-form input, .contact-form textarea{ width:100%; border:1px solid rgba(0,0,0,0.15); border-radius:4px; padding: 10px 12px; font-size:14px; margin-bottom:14px; font-family:var(--fuente); background: var(--white); } .contact-form textarea{ resize:vertical; min-height:70px; } .contact-form .btn-cta{ width:100%; text-align:center; } /* * LA CASILLA DE PRIVACIDAD DE LA COLUMNA DE CONTACTO (ficha y promoción). * * Antonio, 4 de septiembre de 2026: «se podría arreglar la apariencia del * texto junto a la casilla, que no queda muy estético». En su captura el * cuadradito salía arriba del todo y el texto caía debajo en tres líneas * descolgadas, en vez de ir a su lado. * * LA CAUSA. De las tres variantes de esta casilla que hay en la web * —`.contact-privacy-check`, `.form-privacy-check` y esta—, esta era la * ÚNICA sin regla para el `input`. Sin `flex-shrink:0` el navegador * encoge la casilla para dejar sitio al texto, y en una columna estrecha * como la de la ficha la aplasta hasta casi desaparecer. Las otras dos ya * llevaban la regla desde el principio; a esta se le pasó. * * Se copia el mismo tratamiento que ya tienen las otras dos, para que las * tres se comporten igual: casilla de 16 px que no se encoge, alineada con * la primera línea del texto. `line-height` un poco más suelto porque aquí * el texto va a 11 px —es la columna estrecha— y a ese tamaño las líneas * juntas se leen peor. */ .privacy-check{ display:flex; align-items:flex-start; gap:8px; font-size:11px; line-height:1.45; color: var(--gray-mid); margin-bottom:16px; } .privacy-check input[type="checkbox"]{ width:16px; height:16px; flex-shrink:0; margin:1px 0 0 0; } /* El `

    con un enlace dentro: así se puede pulsar toda la tarjeta, que es lo que la gente intenta hacer en el móvil. */ .similar-grid .property-card{ display:block; color: inherit; text-decoration: none; } .similar-grid .property-card .photo{ background-size: cover; background-position: center; } /* El enlace de WhatsApp de la sidebar hereda el aspecto de la caja del boceto, que allí era un
    sin destino. */ a.whatsapp-cta{ color: inherit; text-decoration: none; } /* El botón «Ver galería completa» va superpuesto sobre la foto grande, no como una celda más de la rejilla. Necesita ganarle en especificidad a `.gallery > div` (que vale 0-1-1 por llevar el nombre de etiqueta), o esa regla le impone `position:relative` y el fondo de rayas, y el botón acaba abriendo una tercera fila en la rejilla con una franja vacía debajo. Con la clase repetida sube a 0-2-0 y manda esta. */ .gallery .gallery-view-all{ position:absolute; background: var(--white); grid-row: auto; } /* Nombre de la promoción en las tarjetas de listado: va debajo del tipo de vivienda y en pequeño, porque es el dato que se repite entre las viviendas de un mismo edificio — el que distingue es el tipo. */ .property-card .card-promo{ font-size: 12px; color: var(--gray-mid); margin-top: -4px; margin-bottom: 4px; } /* --------------------------------------------------------------- LA ENTREGA, en la tarjeta de promoción --------------------------------------------------------------- Ocupa el sitio que dejó el nombre del residencial, y es el dato que de verdad decide en obra nueva: quien busca para vivir dentro de un año descarta de un vistazo lo que entrega en 2029. En dorado y no en gris —al revés que el nombre de la promoción— porque aquí SÍ distingue: dos promociones del mismo municipio con el mismo precio se separan por cuándo entregan. Cuando el feed no trae la fecha, la línea no se pinta: no hay hueco ni guion. */ .property-card .card-entrega{ font-size: 12px; font-weight: 600; color: var(--gold-texto); margin-top: -2px; margin-bottom: 6px; } /* El contador de viviendas reutiliza la chapa de la referencia: mismo sitio, mismo tamaño, misma esquina. Es a propósito — el visitante ya sabe mirar ahí— pero en dorado, porque «4 viviendas» es una invitación a entrar y una referencia no lo es. */ .promo-card .ref-badge{ background: var(--gold); color: #fff; } /* ===================================================================== HOME — lo que faltaba al extraer esta hoja ===================================================================== El grueso del CSS de la home ya estaba aquí desde el principio. Esto es lo que se quedó fuera: el separador entre secciones, la colocación del hero, el modal de la guía y la tabla plegable de «información básica sobre protección de datos» de los formularios. No se traen las reglas de `.side-actions`: eran los dos botones flotantes antiguos, sustituidos por `panel-cta.php` (la variante D aprobada) el 12 de agosto. ===================================================================== */ header.scrolled nav.main-nav li:not(:last-child)::after{ content:''; position:absolute; right:-15px; top:50%; transform:translateY(-50%); width:1px; height:14px; background: rgba(0,0,0,0.12); } header.scrolled .lang-selector span:not(.active):hover{ border-color: var(--gold); color: var(--black); } /* Aquí el boceto tenía, comentada, una alternativa de los botones flotantes antiguos (.side-actions--with-hero). Se ha quitado entera: esos botones ya no existen —los sustituyó panel-cta.php— y el comentario, al arrastrar dentro una regla, se quedaba sin cerrar y dejaba fuera de juego TODO el CSS del hero que venía detrás. El titular salía en negro sobre fondo oscuro. */ .hero-inner{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:space-between; padding-top: 170px; padding-bottom: 90px; } .hero-heading{ color:var(--white); max-width: 860px; } .hero-heading .eyebrow{ display:inline-block; font-size:13px; letter-spacing: 3px; text-transform:uppercase; color: var(--gold-texto); font-weight:600; margin-bottom: 22px; } /* El H1 de la portada es la línea pequeña (19 oct 2026): lleva la clase .eyebrow y aquí solo se le quitan los márgenes de un h1 normal. */ .hero-heading h1.eyebrow{ margin: 0 0 22px; line-height: 1.4; } /* El claim grande: era el h1 y ahora es un
    , con exactamente los mismos valores. */ .hero-heading .hero-titular{ font-family: var(--fuente); font-size: 68px; font-weight:400; line-height:1.08; letter-spacing: 0.5px; margin-bottom:26px; text-shadow: 0 2px 20px rgba(0,0,0,0.35); } .hero-heading p{ font-size:19px; font-weight:300; letter-spacing:0.2px; max-width: 580px; text-shadow: 0 1px 8px rgba(0,0,0,0.35); } .section-divider{ padding: 30px 0; } .section-divider .wrap{ display:flex; justify-content:center; } .section-divider .divider-pill{ width: 100%; max-width: 820px; height: 16px; border: 1.5px solid var(--gold); border-radius: 999px; background: transparent; } .zone-card:hover{ transform: scale(1.035); z-index:2; } .split-card:hover{ transform: translateY(-4px); } .split-card:hover .img{ transform: scale(1.06); } .review-card:hover{ transform: translateY(-4px); } .news-card:hover .photo{ transform: scale(1.06); } .full-bleed .guide-banner{ border-radius:0; } .guide-banner-inner{ display:flex; align-items:center; justify-content:space-between; gap: 32px; padding: 48px 32px; } details.info-basica{ border: 1px solid rgba(212, 175, 55,0.35); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; background: rgba(212, 175, 55,0.05); } details.info-basica summary{ font-size:12px; font-weight:600; color: var(--gold-texto); cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; } details.info-basica summary::-webkit-details-marker{ display:none; } details.info-basica summary::before{ content:"+"; font-weight:700; width:12px; display:inline-block; } details.info-basica[open] summary::before{ content:"–"; } details.info-basica table{ width:100%; border-collapse:collapse; margin-top:10px; } details.info-basica th{ text-align:left; font-size:11px; letter-spacing:0.4px; text-transform:uppercase; color: var(--gray-mid); font-weight:600; padding:5px 10px 5px 0; vertical-align:top; white-space:nowrap; } details.info-basica td{ font-size:12px; color: var(--gray-dark); padding:5px 0; line-height:1.5; } details.info-basica td a{ color: var(--gold-texto); text-decoration:underline; } .guia-modal-backdrop{ position: fixed; inset:0; background: rgba(0,0,0,0.5); z-index:199; opacity:0; pointer-events:none; transition:opacity 0.3s ease; } .guia-modal-backdrop.open{ opacity:1; pointer-events:auto; } .guia-modal{ position: fixed; top:50%; left:50%; transform:translate(-50%,-48%); width:min(480px, 92vw); max-height:88vh; overflow-y:auto; background: var(--white); border-radius:12px; padding:36px 32px 28px; z-index:200; opacity:0; pointer-events:none; transition: opacity 0.3s ease, transform 0.3s ease; box-shadow:0 30px 70px rgba(0,0,0,0.25); } .guia-modal.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%); } .guia-modal-close{ position:absolute; top:14px; right:14px; background:none; border:none; font-size:18px; cursor:pointer; color: var(--gray-mid); width:32px; height:32px; border-radius:50%; } .guia-modal-close:hover{ background: var(--bg); } .guia-modal h3{ font-size:22px; margin:6px 0 10px; } .guia-modal-sub{ font-size:13px; color: var(--gray-dark); margin-bottom:20px; line-height:1.5; } .guia-modal .field-label{ font-size:12px; font-weight:600; color: var(--gray-dark); display:block; margin-bottom:5px; } .guia-modal input:not([type="checkbox"]), .guia-modal select{ width:100%; border: 1px solid rgba(0,0,0,0.15); border-radius: 6px; padding: 12px 14px; font-size:14px; font-family:var(--fuente); margin-bottom: 14px; background: var(--white); color: var(--black); } .guia-modal .phone-field{ margin-bottom:0; } @media (max-width:760px) { .guide-banner-inner{ flex-direction:column; align-items:flex-start; padding:34px 28px; } } @media (max-width: 1300px) and (min-width: 761px) { .hero-heading .hero-titular{ font-size:52px; } } @media (max-width: 760px) { .hero-heading .hero-titular{ font-size:36px; } .hero-heading p{ font-size:16px; } .hero-inner{ padding-top:130px; } } @media(max-width:600px) { .guia-modal{ padding:28px 22px 22px; } } /* ===================================================================== VENDER (/es/vender.php) ===================================================================== Extraído del boceto `vender.html`: formulario de valoración, bloques alternos de «cómo te ayudamos», el proceso paso a paso, lo que incluye, dónde se publica, preguntas frecuentes y la llamada final. ===================================================================== */ button{ font-family:inherit; } .logo-text{ font-family:var(--fuente); font-weight:700; font-size:20px; letter-spacing:0.3px; color: var(--black); white-space:nowrap; } .logo-text .dot{ color: var(--gold-texto); } footer .logo-text{ color: var(--white); } nav.main-nav a.current{ color: var(--gold-texto); } .btn-outline:hover{ background: rgba(212, 175, 55,0.08); } .btn-outline--header.is-here{ background: var(--gold); color: var(--white); cursor:default; } .page-intro{ padding: 20px 0 40px 0; } .page-intro .eyebrow{ display:inline-block; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color: var(--gold-texto); font-weight:600; margin-bottom:10px; } .page-intro h1{ font-size:38px; margin-bottom:16px; max-width:900px; } .page-intro p{ color: var(--gray-dark); font-size:16px; max-width:760px; } .img-ph{ position:relative; width:100%; border-radius:10px; overflow:hidden; background: repeating-linear-gradient(45deg, rgba(212, 175, 55,0.05) 0 12px, rgba(212, 175, 55,0.10) 12px 24px), var(--bg); border:1px dashed rgba(212, 175, 55,0.55); display:flex; align-items:center; justify-content:center; color: var(--gold-texto); font-size:12px; letter-spacing:1px; text-transform:uppercase; font-weight:600; text-align:center; padding:16px; } .img-ph--4x3{ aspect-ratio: 4 / 3; } .icon-ph{ width:52px; height:52px; border-radius:50%; border:1px dashed rgba(212, 175, 55,0.6); background: rgba(212, 175, 55,0.06); display:flex; align-items:center; justify-content:center; color: var(--gold-texto); font-size:10px; font-weight:700; letter-spacing:0.5px; margin-bottom:18px; flex-shrink:0; } /* --------------------------------------------------------------------- EL ICONO DE VERDAD, en el hueco que dejaba `.icon-ph` --------------------------------------------------------------------- Mismo tamaño, misma posición y mismo color que el círculo de puntos del boceto, pero con línea continua: el borde discontinuo dice «aquí falta algo», y ya no falta. El hereda el color con `currentColor`, así que basta con darle el dorado al círculo y el icono lo coge. Si mañana se cambia el dorado de la marca, esto se entera solo. --------------------------------------------------------------------- */ .icono-circulo{ width:52px; height:52px; border-radius:50%; border:1px solid rgba(212, 175, 55,0.35); background: rgba(212, 175, 55,0.07); display:inline-flex; align-items:center; justify-content:center; color: var(--gold-texto); margin-bottom:18px; flex-shrink:0; } .icono-circulo .icono{ width:26px; height:26px; display:block; } /* En la banda de confianza van en fila con el texto, más pequeños y sin el margen de debajo — igual que hacía `.trust-item .icon-ph`. */ .trust-item .icono-circulo{ width:44px; height:44px; margin-bottom:0; } .trust-item .icono-circulo .icono{ width:22px; height:22px; } /* Las tarjetas de «en qué te apoyamos» centran su contenido, así que el círculo tiene que centrarse también: `inline-flex` respeta el `text-align` de la tarjeta, pero conviene dejarlo dicho. */ .svc-card .icono-circulo{ margin-left:auto; margin-right:auto; } /* --------------------------------------------------------------------- LA FOTO DE CADA ETAPA --------------------------------------------------------------------- `.story-img` ya existía para el cuadro gris del boceto. Aquí se le da forma a la imagen real: 4:3 como en el boceto, recortada al centro para que dé igual el encuadre que traiga la foto, y con la misma esquina redondeada del resto de tarjetas. --------------------------------------------------------------------- */ .story-img img{ width:100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius:10px; display:block; } /* Lo de `.story-row.sin-foto` —una fila sin foto ocupa el ancho entero— ya está más abajo, con el resto de reglas de esa sección. No se repite aquí. */ .val-section{ padding: 8px 0 64px 0; } .val-module{ background: var(--bg); border: 1px solid var(--gold); border-radius: 10px; overflow: hidden; display:grid; grid-template-columns: 1fr 1fr; box-shadow: 0 10px 40px rgba(0,0,0,0.05); } .val-text-side{ position:relative; padding: 56px 48px; display:flex; flex-direction:column; justify-content:center; /* LA FOTO DEL MODULO, igual que en la home y en contacto. Aqui habia rayas diagonales doradas: el relleno del boceto para decir «aqui va una imagen». Se quedaron puestas al portar la pagina y se veian como un fondo raro con textura de aviso. LA FOTO LA ELIGE EL PHP, no esta escrita aqui. La pagina pone `style="--val-foto: url('...')"` en el div, y la variable la resuelve `imagenDeCarpeta()`, que encuentra el archivo sea .webp o .jpg. Esa es la diferencia con `.contact-text-side`, que tiene la extension escrita a mano y ya obligo a tocar el CSS cuando Antonio paso `formulario.png` a `.webp`. Una hoja de estilos no puede comprobar si un archivo existe; PHP si. Si la variable no llega, quedan las rayas: nunca un hueco. El degradado va del 97 % de crema a la izquierda —donde esta el titular y hay que poder leer— al 50 % a la derecha, que es lo que deja asomar la foto sin robarle protagonismo al texto. */ background-color: #ded8cc; background-image: linear-gradient(90deg, rgba(248,246,241,0.97) 0%, rgba(248,246,241,0.85) 55%, rgba(248,246,241,0.5) 100%), var(--val-foto, repeating-linear-gradient(45deg, rgba(212, 175, 55,0.06) 0 14px, rgba(212, 175, 55,0.11) 14px 28px)); background-repeat: no-repeat, no-repeat; background-position: center, right center; background-size: cover, auto 100%; } .val-text-side h2{ font-size: 30px; margin-bottom: 18px; line-height:1.25; max-width: 420px; } .val-text-side p{ font-size:15px; color: var(--gray-dark); margin-bottom: 20px; max-width: 440px; } .val-checks{ list-style:none; } .val-checks li{ font-size:14px; font-weight:600; margin-bottom: 10px; display:flex; align-items:flex-start; gap:8px; } .val-checks li::before{ content:'✓'; color: var(--gold-texto); font-weight:700; } .val-form-side{ background: var(--white); padding: 48px 44px; display:flex; flex-direction:column; justify-content:center; } .val-form-side h3{ font-size:19px; margin-bottom:6px; } .val-form-side .form-sub{ font-size:13px; color: var(--gray-mid); margin-bottom:22px; } .field-label{ font-size:12px; font-weight:600; color: var(--gray-dark); display:block; margin-bottom:5px; } .val-form-side input:not([type="checkbox"]):not([type="radio"]), .val-form-side textarea, .val-form-side select{ width:100%; border: 1px solid rgba(0,0,0,0.15); border-radius: 6px; padding: 12px 14px; font-size:14px; font-family:var(--fuente); margin-bottom: 14px; background: var(--white); color: var(--black); } .val-form-side textarea{ resize:vertical; min-height:80px; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .pref-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; } .pref-opt{ position:relative; } .pref-opt input{ position:absolute; opacity:0; width:0; height:0; } .pref-opt span{ display:inline-block; border:1px solid rgba(0,0,0,0.15); border-radius:20px; padding:7px 15px; font-size:13px; cursor:pointer; transition: all 0.2s ease; background: var(--white); } .pref-opt input:checked + span{ border-color: var(--gold); background: rgba(212, 175, 55,0.08); color: var(--gold-texto); font-weight:600; } .form-legal{ font-size:11px; color: var(--gray-mid); margin-bottom: 10px; line-height:1.6; } .form-legal a{ color: var(--gold-texto); text-decoration:underline; } .form-privacy-check{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color: var(--gray-dark); margin-bottom: 18px; } .form-privacy-check input[type="checkbox"]{ width:16px; height:16px; flex-shrink:0; margin:2px 0 0 0; } .form-submit{ background: var(--gold); color: var(--white); border:none; border-radius: 6px; padding: 15px; font-size:15px; font-weight:600; cursor:pointer; transition: background 0.25s ease; width:100%; } .form-submit:hover{ background:#8a6c2c; } .form-reassure{ font-size:12px; color: var(--gray-mid); text-align:center; margin-top:12px; } .form-alt{ margin-top:16px; padding-top:16px; border-top:1px solid #e8e4da; text-align:center; font-size:13px; color: var(--gray-dark); } .form-alt a{ margin:0 4px; } .trust-strip{ background: var(--bg); border-top:1px solid rgba(0,0,0,0.06); border-bottom:1px solid rgba(0,0,0,0.06); } .trust-inner{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; padding:34px 32px; } .trust-item{ display:flex; align-items:center; gap:16px; } .trust-item .icon-ph{ margin-bottom:0; width:44px; height:44px; } .trust-item .k{ font-size:15px; font-weight:700; display:block; line-height:1.3; } .trust-item .s{ font-size:12px; color: var(--gray-mid); display:block; margin-top:2px; } .trust-item a.more{ color: var(--gold-texto); border-bottom:1px solid transparent; } .trust-item a.more:hover{ border-color: var(--gold); } /* La franja de cifras de la PORTADA (.trust-band) en movil: cifra encima del rotulo y centrado, en vez de en fila. La regla `.trust-item{display:flex}` de arriba es la de la franja de Asesoria y se le colaba; en 375 px la fila «1.404 + PROPIEDADES ACTIVAS» no cabe en media pantalla (20 oct 2026). */ @media (max-width: 760px){ .trust-band .trust-item{ display:block; text-align:center; min-width:0; } .trust-band .trust-item .num{ margin-bottom:6px; } } .story-section{ padding: 72px 0; } .story-row{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; margin-bottom:64px; } .story-row:last-child{ margin-bottom:0; } .story-row.reverse .story-text{ order:2; } .story-row.reverse .story-img{ order:1; } .story-text h3{ font-size:24px; margin-bottom:16px; line-height:1.3; } .story-text p{ color: var(--gray-dark); font-size:15px; margin-bottom:14px; } .story-text p:last-child{ margin-bottom:0; } .story-list{ list-style:none; margin-top:16px; } .story-list li{ font-size:14px; color: var(--gray-dark); margin-bottom:9px; display:flex; align-items:flex-start; gap:9px; line-height:1.5; } .story-list li::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--gold); flex-shrink:0; margin-top:8px; } .story-note{ font-size:12px; color: var(--gray-mid); font-style:italic; margin-top:12px; } .steps-section{ background: var(--bg); padding: 72px 0; } .steps-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:0; position:relative; } .step{ position:relative; padding: 0 18px; text-align:center; } .step .n{ width:52px; height:52px; border-radius:50%; margin:0 auto 16px auto; background: var(--white); border:2px solid var(--gold); color: var(--gold-texto); font-size:19px; font-weight:700; display:flex; align-items:center; justify-content:center; position:relative; z-index:2; } .step::before{ content:''; position:absolute; top:26px; left:50%; width:100%; height:2px; background: rgba(212, 175, 55,0.3); z-index:1; } .step:last-child::before{ display:none; } .step h4{ font-size:15px; margin-bottom:7px; } .step p{ font-size:13px; color: var(--gray-dark); } .svc-section{ padding: 72px 0 64px 0; } .svc-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:22px; } .svc-card{ background: var(--white); border:1px solid rgba(0,0,0,0.08); border-radius:10px; padding:30px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .svc-card:hover{ border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,0.07); } .svc-card h4{ font-size:15px; line-height:1.35; } .pub-module{ background: var(--bg); border-top:1px solid rgba(0,0,0,0.06); border-bottom:1px solid rgba(0,0,0,0.06); padding: 72px 0; } .pub-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; } .pub-card{ background: var(--white); border:1px solid rgba(0,0,0,0.08); border-radius:10px; padding:28px 26px; } .pub-card h4{ font-size:16px; margin-bottom:8px; } .pub-card p{ font-size:14px; color: var(--gray-dark); } .pub-logos{ margin-top:26px; border:1px dashed rgba(212, 175, 55,0.55); border-radius:10px; background: repeating-linear-gradient(45deg, rgba(212, 175, 55,0.04) 0 12px, rgba(212, 175, 55,0.08) 12px 24px); padding:26px; display:flex; align-items:center; justify-content:center; gap:34px; flex-wrap:wrap; color: var(--gold-texto); font-size:12px; letter-spacing:1px; text-transform:uppercase; font-weight:600; } .pub-logos .slot{ width:120px; height:44px; border:1px dashed rgba(212, 175, 55,0.5); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:10px; background: rgba(255,255,255,0.6); } .faq-section{ padding: 72px 0; } .faq-list{ max-width:860px; margin:0 auto; } .faq-item{ background: var(--white); border:1px solid rgba(0,0,0,0.08); border-radius:8px; margin-bottom:12px; overflow:hidden; transition: border-color 0.2s ease; } /* LAS PREGUNTAS SE ABREN SOLAS, SIN JAVASCRIPT. Esto estaba escrito para una version con JavaScript: el CSS esperaba una clase `.open` que alguien tenia que poner al pulsar. Ese JavaScript nunca se escribio, asi que `max-height:0` no se levantaba jamas y las respuestas quedaban invisibles para siempre — las preguntas se pulsaban y no pasaba nada. El HTML, en cambio, usa
    /, que el navegador abre y cierra el solo poniendo el atributo `open`. Bastaba con escuchar ESE atributo en vez de una clase que no llega nunca. Ahora funciona sin una linea de JavaScript, que ademas es mas robusto: sigue abriendo si el JS falla o esta desactivado. `max-height` en vez de `height:auto` porque auto no se puede animar. El valor es un tope alto: cabe cualquier respuesta razonable. */ .faq-item[open]{ border-color: var(--gold); } .faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:18px 24px; font-size:15px; font-weight:600; color: var(--black); display:flex; align-items:center; justify-content:space-between; gap:16px; list-style:none; /* fuera la flecha por defecto del navegador */ } /* Safari y Chrome viejos pintan su propio triangulito: se quita aparte. */ .faq-q::-webkit-details-marker{ display:none; } .faq-q::marker{ content:''; } .faq-q::after{ content:'+'; color: var(--gold-texto); font-size:22px; font-weight:400; line-height:1; flex-shrink:0; transition: transform 0.25s ease; } .faq-item[open] .faq-q::after{ content:'−'; } .faq-a{ max-height:0; overflow:hidden; transition: max-height 0.3s ease; } .faq-item[open] .faq-a{ max-height:600px; } .faq-a p{ padding:0 24px 18px 24px; font-size:14px; color: var(--gray-dark); } .page-cta{ background: linear-gradient(135deg, #D4AF37 0%, #8a6c2c 100%); color: var(--white); position:relative; overflow:hidden; } .page-cta-tag{ position:absolute; top:14px; right:14px; z-index:2; background: rgba(0,0,0,0.25); color:#fff; font-size:10px; padding:4px 10px; border-radius:3px; } .page-cta-inner{ padding:56px 32px; display:grid; grid-template-columns:1fr 1fr; gap:32px; text-align:left; } .page-cta .cta-block h3{ font-size:22px; margin-bottom:12px; font-weight:700; } .page-cta .cta-block p{ font-size:14px; opacity:0.9; margin-bottom:20px; } .page-cta .btn-white{ background: var(--white); color: var(--gold-texto); padding:11px 24px; border-radius:3px; font-size:14px; font-weight:600; display:inline-block; transition: transform 0.2s ease, box-shadow 0.2s ease; } /* Dos botones en el mismo bloque (zona: segunda mano y obra nueva, 20 oct 2026): separación entre ellos, también cuando el segundo salta de línea en móvil. */ .page-cta .cta-block .btn-white{ margin: 0 8px 8px 0; } .page-cta .btn-white:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.18); } @media (max-width:1300px) { nav.main-nav, .header-right .lang-selector, .header-right .btn-outline--header{ display:none; } } /* ===================================================================== MENÚ DEL HEADER EN PANTALLAS DE PORTÁTIL (1301–1600 px) ===================================================================== El diseño del boceto (gap 30 px, texto de 13 px) está calculado para el español en una pantalla ancha. Con nueve elementos y las palabras del polaco y del ruso —más largas, y en mayúsculas todavía más— el menú se comía el logo por la izquierda y las banderas por la derecha justo en los anchos de portátil más comunes (1366, 1440, 1536). Solo se aprieta el espaciado en esa franja: a partir de 1601 px el diseño queda exactamente como el boceto, y por debajo de 1300 px ya entra el menú de hamburguesa. ===================================================================== */ @media (max-width:1600px) and (min-width:1301px) { .header-inner{ padding-left: 24px; padding-right: 24px; gap: 16px; } /* 28 de agosto de 2026: el `gap` fijo de 17px se quita. El `clamp` de arriba ya da 17px justo en esta franja (1.2vw de 1440px son 17,3px) y además sigue creciendo, así que la regla fija solo servía para anular ese crecimiento en el borde de 1600px. La letra sí se queda escrita aquí porque es la misma que ahora usa el menú a cualquier ancho. */ nav.main-nav a{ font-size: 12px; letter-spacing: 0.2px; } /* Las rayitas separadoras van a mitad del hueco, y el hueco ha cambiado. */ header.scrolled nav.main-nav li:not(:last-child)::after{ right: -9px; } .lang-selector{ gap: 6px; } .lang-selector span{ padding: 5px 8px; } } @media (max-width:1100px) { .steps-grid{ grid-template-columns: repeat(3,1fr); gap:34px 0; } .step::before{ display:none; } .svc-grid{ grid-template-columns: repeat(3,1fr); } } @media (max-width:1024px) { .trust-inner{ grid-template-columns:1fr; gap:22px; } .pub-grid{ grid-template-columns:1fr; } } @media (max-width:900px) { .val-module{ grid-template-columns: 1fr; } .val-text-side{ padding: 40px 28px; } .val-form-side{ padding: 40px 28px; } .story-row{ grid-template-columns:1fr; gap:28px; margin-bottom:48px; } .story-row.reverse .story-text{ order:1; } .story-row.reverse .story-img{ order:2; } .steps-grid{ grid-template-columns: 1fr 1fr; } .svc-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width:760px) { .page-intro h1{ font-size:28px; } .val-text-side h2, .section-head h2{ font-size:25px; } .field-row{ grid-template-columns:1fr; } .steps-grid{ grid-template-columns: 1fr; } .svc-grid{ grid-template-columns: 1fr; } .page-cta-inner{ grid-template-columns:1fr; padding:40px 24px; } } /* Las pastillas de «¿cómo prefieres que te respondamos?» esconden el radio de verdad y estilizan la etiqueta. Funciona con el ratón, pero dejaba sin rastro a quien navega con el teclado: el foco estaba en un elemento de 0×0 píxeles, invisible. Con esto, al llegar tabulando se ve exactamente en qué opción está. `:focus-visible` y no `:focus` para que el borde no aparezca también al hacer clic con el ratón, que es lo que lo hace molesto. */ .pref-opt input:focus-visible + span{ outline: 2px solid var(--gold); outline-offset: 2px; } /* ===================================================================== RESEÑAS DE GOOGLE — la caja previa al widget ===================================================================== Lo que se ve antes de cargar Featurable. Tiene que valerse por sí sola: habrá visitantes que no pulsen nunca el botón, y aun así deben salir de aquí sabiendo que la agencia tiene un 5,0 en Google. ===================================================================== */ .resenas-widget{ margin: 8px 0 0; } .resenas-aviso{ background: var(--white); border: 1px solid rgba(212, 175, 55,0.3); border-radius: 6px; padding: 34px 32px; text-align: center; max-width: 640px; margin: 0 auto; } .resenas-aviso-titulo{ font-size: 18px; font-weight: 600; margin-bottom: 14px; } .resenas-nota{ display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 16px; } .resenas-estrellas{ color: var(--gold-texto); font-size: 20px; letter-spacing: 2px; } .resenas-cifra{ font-size: 30px; font-weight: 600; line-height: 1; } .resenas-de{ font-size: 13px; color: var(--gray-mid); } .resenas-aviso-texto{ font-size: 13px; color: var(--gray-dark); line-height: 1.65; max-width: 460px; margin: 0 auto 20px; } .resenas-boton{ display: inline-block; } .resenas-aviso-pie{ font-size: 12px; color: var(--gray-mid); margin-top: 16px; } .resenas-aviso-pie a{ color: var(--gold-texto); text-decoration: underline; } /* Donde se pinta el widget una vez cargado. Featurable trae su propio diseño: aquí solo se le reserva el sitio y se le da aire. */ .resenas-destino{ min-height: 120px; } .resenas-fallo{ text-align: center; font-size: 14px; color: var(--gray-dark); padding: 30px 20px; } .resenas-fallo a{ color: var(--gold-texto); text-decoration: underline; } /* Versión corta para la home, donde las reseñas son un apoyo y no el contenido principal de la página. */ .resenas-widget--compacto .resenas-aviso{ padding: 26px 24px; } .resenas-widget--compacto .resenas-aviso-texto{ font-size: 12px; } @media (max-width: 600px){ .resenas-aviso{ padding: 24px 18px; } .resenas-cifra{ font-size: 26px; } } /* ===================================================================== RESEÑAS (/es/resenas.php) ===================================================================== Cabecera con las cuatro cifras, el muro donde se carga el widget y la franja de «escribe la tuya». El hueco de relleno que enseñaba el código del widget en el boceto no se trae: ahora hay widget de verdad. ===================================================================== */ .intro-acciones{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 18px; margin-top:26px; } .intro-acciones .o{ font-size:13px; color: var(--gray-mid); } .intro-directo{ font-size:14px; } .intro-directo a{ margin-right:14px; } .etapa-cab{ display:flex; align-items:center; gap:14px; margin-bottom:14px; } .etapa-n{ width:46px; height:46px; border-radius:50%; flex-shrink:0; background: var(--white); border:2px solid var(--gold); color: var(--gold-texto); font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center; } .etapa-cuando{ font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color: var(--gold-texto); font-weight:700; } .remite{ border-left:3px solid var(--gold); padding:2px 0 2px 18px; margin-top:16px; font-size:15px; color: var(--gray-dark); } .remite .contact-link{ display:inline-block; margin-top:10px; color: var(--gold-texto); border-bottom-color: var(--gold); } .alcance-section{ background: var(--bg); padding: 72px 0; } .alcance-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; } .alcance-card{ background: var(--white); border:1px solid rgba(0,0,0,0.08); border-radius:10px; padding:30px 28px; } .alcance-card .icon-ph{ margin-bottom:16px; } .alcance-card h4{ font-size:17px; margin-bottom:10px; } .alcance-card p{ font-size:14px; color: var(--gray-dark); } /* AQUÍ ESTABA EL ESPACIO ANTES DE LAS COMAS. Era `display:flex` con `gap:12px`. En un contenedor flex cada trozo de texto suelto se convierte en un elemento propio, así que «español», la coma y «English» eran tres cajas distintas y el `gap` metía doce píxeles entre cada una: «español , English , Русский y Polski .» Es una frase, no una fila de elementos. Con `text-align:center` se centra igual y las comas se pegan a su palabra, que es lo suyo. */ .idiomas-linea{ text-align:center; margin-top:26px; font-size:14px; color: var(--gray-dark); line-height:1.7; } .idiomas-linea b{ color: var(--black); } .form-section{ padding: 8px 0 72px 0; } .res-intro{ padding-bottom:12px; } .res-intro-inner{ max-width:820px; margin:0 auto; text-align:center; } .res-eyebrow{ font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color: var(--gold-texto); font-weight:600; margin-bottom:14px; } .res-intro h1{ font-size:38px; line-height:1.2; margin-bottom:18px; } .res-lead{ font-size:17px; color: var(--gray-dark); line-height:1.75; max-width:640px; margin:0 auto 40px auto; } .res-cifras{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; border-top:1px solid rgba(0,0,0,0.08); border-bottom:1px solid rgba(0,0,0,0.08); padding:26px 0; margin-bottom:26px; } .res-cifra{ min-width:0; } .res-cifra-num{ display:block; font-size:30px; font-weight:700; color: var(--gold-texto); line-height:1.1; margin-bottom:6px; } .res-cifra-txt{ display:block; font-size:13px; color: var(--gray-mid); line-height:1.5; } .res-filtros-sec{ padding:30px 0 6px 0; } .res-filtros{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } .res-filtro{ font-family:inherit; font-size:13px; font-weight:600; color: var(--gray-dark); background: var(--white); border:1px solid rgba(0,0,0,0.14); border-radius:999px; padding:9px 18px; cursor:pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; } .res-filtro:hover{ border-color: rgba(212, 175, 55,0.6); color: var(--gold-texto); } .res-filtro.is-activo{ background: var(--black); border-color: var(--black); color: var(--white); } .res-filtro-n{ opacity:.55; font-weight:400; margin-left:4px; } .res-filtros-vacio{ text-align:center; color: var(--gray-mid); font-size:15px; margin-top:24px; } .res-muro{ padding:34px 0 64px 0; } .res-grid{ column-count:3; column-gap:22px; } .res-card{ break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; display:block; width:100%; background: var(--white); border:1px solid rgba(0,0,0,0.09); border-radius:12px; padding:24px 22px; margin:0 0 22px 0; } .res-card[hidden]{ display:none; } .res-cabeza{ display:flex; align-items:center; gap:12px; margin-bottom:12px; } .res-avatar{ flex:none; width:44px; height:44px; border-radius:50%; background: rgba(212, 175, 55,0.12); border:1px dashed rgba(212, 175, 55,0.55); color: var(--gold-texto); font-size:14px; font-weight:700; letter-spacing:.5px; display:flex; align-items:center; justify-content:center; } .res-quien{ min-width:0; flex:1; } .res-nombre{ display:block; font-size:15px; font-weight:600; color: var(--black); line-height:1.3; overflow-wrap:anywhere; } .res-fecha{ display:block; font-size:12px; color: var(--gray-mid); margin-top:2px; } .res-lengua{ flex:none; font-size:11px; font-weight:700; letter-spacing:1px; color: var(--gray-mid); border:1px solid rgba(0,0,0,0.12); border-radius:5px; padding:3px 7px; cursor:help; } .res-estrellas{ display:block; color: var(--gold-texto); font-size:15px; letter-spacing:2px; margin-bottom:12px; } .res-texto p{ font-size:14.5px; line-height:1.75; color: var(--gray-dark); margin:0 0 10px 0; overflow-wrap:anywhere; } .res-texto p:last-child{ margin-bottom:0; } .res-trad{ margin-top:14px; border-top:1px solid rgba(0,0,0,0.07); padding-top:12px; } .res-trad > summary{ font-size:13px; font-weight:600; color: var(--gold-texto); cursor:pointer; list-style:none; } .res-trad > summary::-webkit-details-marker{ display:none; } .res-trad > summary::before{ content:"+ "; } .res-trad[open] > summary::before{ content:"\2212 "; } .res-trad-cuerpo{ padding-top:10px; } .res-trad-aviso{ font-size:11.5px; color: var(--gray-mid); text-transform:uppercase; letter-spacing:.8px; margin-bottom:8px; } .res-trad-cuerpo p{ font-size:14px; line-height:1.7; color: var(--gray-mid); margin:0 0 9px 0; overflow-wrap:anywhere; } .res-respuesta{ margin-top:16px; background:#F4F1EA; border-left:3px solid var(--gold); border-radius:0 8px 8px 0; padding:13px 15px; } .res-respuesta-quien{ display:block; font-size:11px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color: var(--gold-texto); margin-bottom:7px; } .res-respuesta p{ font-size:13.5px; line-height:1.7; color: var(--gray-dark); margin:0 0 9px 0; overflow-wrap:anywhere; } .res-respuesta p:last-child{ margin-bottom:0; } .res-origen{ display:block; margin-top:14px; font-size:11.5px; letter-spacing:.6px; text-transform:uppercase; color: var(--gray-mid); } .res-escribir{ background: var(--black); color: var(--white); padding:48px 0; } .res-escribir-inner{ display:flex; align-items:center; gap:32px; justify-content:space-between; } .res-escribir-texto{ min-width:0; } .res-escribir h2{ font-size:24px; color: var(--white); margin-bottom:10px; } .res-escribir p{ font-size:15px; color:#c9c9c9; line-height:1.7; max-width:560px; } .res-escribir-btn{ flex:none; } .res-tecnica{ padding:40px 0 56px 0; } @media (max-width:1024px) { .alcance-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width:760px) { .alcance-grid{ grid-template-columns: 1fr; } .etapa-n{ width:40px; height:40px; font-size:16px; } .intro-acciones{ align-items:flex-start; flex-direction:column; gap:12px; } .intro-directo a{ display:inline-block; margin:0 14px 6px 0; } } @media (max-width: 600px) { .res-cifras{ grid-template-columns: repeat(2, 1fr); gap:22px 14px; } } @media (max-width: 1100px) { .res-grid{ column-count:2; } } @media (max-width: 760px) { .res-grid{ column-count:1; } .res-escribir-inner{ flex-direction:column; align-items:flex-start; gap:20px; } } @media (max-width: 480px) { .res-intro h1{ font-size:28px; } .res-card{ padding:20px 18px; } } /* ===================================================================== VÍDEO DE FONDO DEL HERO ===================================================================== El vídeo va DEBAJO del degradado y del contenido, cubriendo el hero entero. La foto de portada (`hero.jpg`) sigue como fondo del `.hero`, así que se ve mientras el vídeo carga, si no llega a cargar, y en los móviles, donde a propósito no se descarga. `object-fit: cover` recorta lo que sobre en vez de deformar la imagen: el hero cambia de proporción según la pantalla y estirar una playa se nota enseguida. ===================================================================== */ .hero-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; /* Aparece con un fundido corto cuando ya tiene imagen que enseñar, en vez de dar un salto brusco desde la foto. */ opacity: 0; transition: opacity 0.8s ease; } .hero-video.listo{ opacity: 1; } /* El degradado del `.hero` es un fondo, así que quedaría por debajo del vídeo. Se repite aquí como capa propia para que siga cayendo encima y el titular blanco se lea igual de bien sobre el vídeo. */ .hero-velo{ position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.75) 100%); } /* El contenido, por encima de las dos capas. */ .hero .hero-inner, .hero .hero-scroll-cue{ position: relative; z-index: 2; } /* ===================================================================== LISTADOS DE CATÁLOGO (obra nueva y segunda mano) ===================================================================== Extraído del boceto `segunda-mano.html`. Las dos páginas comparten diseño y comparten también la plantilla que lo pinta (`includes/listado-propiedades.php`), así que este bloque sirve para las dos: pestañas de catálogo, panel de búsqueda con filtros avanzados, etiquetas de filtros aplicados, barra de resultados y rejilla. ===================================================================== */ @media (prefers-reduced-motion: no-preference) { .properties-grid .reveal:nth-child(4){ transition-delay: 0.15s; } .properties-grid .reveal:nth-child(5){ transition-delay: 0.2s; } .properties-grid .reveal:nth-child(6){ transition-delay: 0.25s; } } .breadcrumb .group-label{ color: var(--gray-mid); cursor:default; } .catalog-tabs{ display:flex; gap:10px; margin-top:22px; } .catalog-tab{ padding:10px 20px; border-radius:30px; border:1px solid rgba(0,0,0,0.15); font-size:13px; font-weight:600; transition: border-color 0.2s ease, color 0.2s ease; } .catalog-tab:hover{ border-color: var(--gold); color: var(--gold-texto); } .catalog-tab.current{ background: var(--gold); color:#fff; border-color: var(--gold); } .search-panel{ background: var(--white); border: 1px solid rgba(0,0,0,0.08); border-radius:8px; padding:24px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin-top:-8px; position:relative; z-index:5; } .search-row{ display:grid; grid-template-columns: repeat(4, 1fr) 1.3fr auto; gap:16px; align-items:end; } .field{ display:flex; flex-direction:column; gap:6px; } .field label{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; color: var(--gray-mid); } .field select, .field input[type="text"]{ padding:11px 12px; border:1px solid rgba(0,0,0,0.15); border-radius:4px; font-size:14px; font-family:inherit; color: var(--black); background: var(--white); transition: border-color 0.2s ease; } .field select:focus, .field input:focus{ outline:none; border-color: var(--gold); } .search-btn{ height:44px; padding:0 28px; } .advanced-toggle{ background:none; border:none; color: var(--gold-texto); font-size:13px; font-weight:500; margin-top:16px; cursor:pointer; padding:4px 0; display:inline-flex; align-items:center; gap:6px; } .advanced-toggle:hover{ text-decoration: underline; } .advanced-toggle .chevron{ transition: transform 0.25s ease; display:inline-block; } .advanced-toggle.open .chevron{ transform: rotate(180deg); } .advanced-filters{ display:none; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top:18px; padding-top:18px; border-top:1px solid rgba(0,0,0,0.08); } .advanced-filters.open{ display:grid; } .advanced-filters .checks{ grid-column: span 2; display:flex; flex-wrap:wrap; gap:14px; align-items:center; } .advanced-filters .checks label{ display:flex; align-items:center; gap:7px; font-size:13px; color: var(--gray-dark); cursor:pointer; } .advanced-filters .checks input[type="checkbox"]{ width:15px; height:15px; accent-color: var(--gold); cursor:pointer; } /* --------------------------------------------------------------------- BUSCADOR EN VIVO — el aviso de «estoy trabajando» --------------------------------------------------------------------- Mientras llegan los resultados nuevos, los viejos se quedan puestos y se apagan un poco. Vaciar la lista y enseñar un hueco blanco durante 200 ms es peor que dejar lo anterior atenuado: el parpadeo se lee como un fallo, y con un filtro que apenas cambia nada el visitante ve desaparecer y reaparecer lo mismo. `pointer-events:none` evita el otro problema: pinchar dos veces seguidas en «página 3» mientras la primera petición vuelve. La transición entra despacio (0.15s) y sale al momento: si la respuesta tarda 40 ms no se llega a ver nada, que es lo que se quiere. Solo se nota cuando de verdad hay espera. */ #resultadosListado{ transition: opacity 0.15s ease; } #resultadosListado.cargando{ opacity: 0.45; pointer-events: none; } /* Quien pide menos movimiento no quiere que la pantalla palpite en cada tecla: se queda quieta y ya se entera por el recuento, que es `aria-live`. */ @media (prefers-reduced-motion: reduce){ #resultadosListado{ transition: none; } #resultadosListado.cargando{ opacity: 1; } } .active-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin: 22px 0 4px 0; } .active-filters:empty{ display:none; } .filter-tag{ display:inline-flex; align-items:center; gap:8px; background: var(--bg); border:1px solid rgba(212, 175, 55,0.35); color: var(--gray-dark); font-size:12px; font-weight:500; padding:7px 8px 7px 14px; border-radius:20px; } .remove-tag{ background: none; border:none; color: var(--gray-mid); cursor:pointer; font-size:14px; line-height:1; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition: background 0.2s ease, color 0.2s ease; } .remove-tag:hover{ background: var(--gold); color:#fff; } .clear-filters{ font-size:12px; color: var(--gray-mid); text-decoration:underline; } .clear-filters:hover{ color: var(--gold-texto); } .results-toolbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding: 20px 0 28px 0; border-bottom:1px solid rgba(0,0,0,0.06); margin-bottom:32px; } .results-count{ font-size:14px; color: var(--gray-dark); } /* «· 671 viviendas en total», detrás del recuento de tarjetas. En gris y sin negrita: acompaña al número grande, no compite con él. */ .results-detalle{ color: var(--gray-mid); font-size:13px; } .results-count strong{ color: var(--black); font-size:16px; } .sort-field{ display:flex; align-items:center; gap:10px; } .sort-field label{ font-size:12px; color: var(--gray-mid); white-space:nowrap; } .sort-field select{ padding:9px 12px; border:1px solid rgba(0,0,0,0.15); border-radius:4px; font-size:13px; font-family:inherit; } .property-card .type-badge{ position:absolute; top:12px; right:12px; background: rgba(0,0,0,0.55); color:#fff; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; padding:4px 9px; border-radius:3px; } /* ===================================================================== BANNER DEL FINAL DEL LISTADO («¿No encuentras lo que buscas?») ===================================================================== Opción 3 elegida por Antonio: crema con filo dorado, al ancho de la página, botón dorado del ancho de su texto. Iba con fondo dorado y un botón TAMBIÉN dorado —el `.btn-white` de aquí abajo existía pero el PHP no lo usaba—, en una rejilla de dos mitades que estiraba el botón hasta ocupar media franja. Se veía enorme y sin contraste. Ya no. ===================================================================== */ .listing-cta{ background: var(--bg); color: var(--black); position:relative; overflow:hidden; border: 1px solid rgba(212, 175, 55,0.45); border-left: 5px solid var(--gold); border-radius: 6px; } /* Por si alguna página lo dejara de borde a borde: sin esquinas ni filo, que ahí quedan raros. */ .full-bleed .listing-cta{ border-radius:0; border-left-width:1px; } .listing-cta-tag{ position:absolute; top:14px; right:14px; z-index:3; background: rgba(0,0,0,0.25); color:#fff; font-size:10px; padding:4px 10px; border-radius:3px; } /* `auto` en la segunda columna y no `1fr`: la columna del botón mide lo que mide el botón, y el texto se queda con el resto. Era la causa del botón gigante. */ .listing-cta-inner{ position:relative; z-index:2; padding:44px 34px; display:grid; grid-template-columns: 1fr auto; gap:32px; align-items:center; text-align:left; } .listing-cta .listing-cta-text{ max-width: 620px; } .listing-cta .listing-cta-text h3{ font-size:22px; margin:0 0 12px; font-weight:700; } .listing-cta .listing-cta-text p{ font-size:14px; color: var(--gray-dark); margin:0; line-height:1.6; } .listing-cta-accion .btn-cta{ white-space:nowrap; } /* --- La imagen de fondo, cuando existe ------------------------------- PNG con transparencia anclado a la DERECHA, igual que el del formulario de contacto: el dibujo está en su tercio derecho y se disuelve hacia la izquierda, así que centrado no se vería. `auto 100%` escala por altura y conserva la proporción. Y se esconde en móvil: ahí el bloque se apila, crece de alto, y la imagen se ampliaría tanto que solo se vería un trozo sin sentido. */ .listing-cta.con-foto{ background-repeat: no-repeat; background-position: right center; background-size: auto 100%; background-color: var(--bg); } .listing-cta .btn-white{ background: var(--white); color: var(--gold-texto); padding:11px 24px; border-radius:3px; font-size:14px; font-weight:600; display:inline-block; transition: transform 0.2s ease, box-shadow 0.2s ease; } .listing-cta .btn-white:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.18); } @media (max-width:760px) { .listing-cta-inner{ padding:32px 22px; } /* En móvil el texto y el botón se apilan, así que la columna «auto» pasa a ocupar todo el ancho y el botón se estira: correcto ahí, es más fácil de pulsar. */ .listing-cta-inner{ grid-template-columns: 1fr; gap:22px; } .listing-cta-accion .btn-cta{ display:block; text-align:center; } /* Fuera la imagen: el bloque crece de alto al apilarse y `auto 100%` la ampliaría hasta que solo se viese un recorte sin sentido. */ .listing-cta.con-foto{ background-image: none !important; } .advanced-filters{ grid-template-columns: 1fr; } .results-toolbar{ flex-direction:column; align-items:flex-start; } .listing-cta-inner{ grid-template-columns:1fr; } } /* ---------------------------------------------------------------------- EL BUSCADOR AL ESTRECHARSE: DE MAYOR A MENOR ---------------------------------------------------------------------- Estas dos reglas estaban al reves: la de 760px (una columna) iba ANTES que la de 1100px (dos columnas). Un movil de 390px cumple las DOS condiciones, y en CSS gana la ultima, asi que acababa con DOS columnas: el desplegable de ZONA salia cortado y el boton Buscar se iba fuera de la pantalla. Antonio lo vio el 17 de septiembre en el movil. Ordenadas de mayor a menor, cada anchura se queda con la suya: hasta 1100px dos columnas, y por debajo de 760px una sola. Afecta al buscador del listado y al del mapa, que comparten `.search-row`. ---------------------------------------------------------------------- */ @media (max-width:1100px) { .search-row{ grid-template-columns: 1fr 1fr; } .search-btn{ grid-column: span 2; height:44px; } } @media (max-width:760px) { .search-row{ grid-template-columns: 1fr; } .search-btn{ grid-column: span 1; } /* Un
    ` al principio del texto ("Propias:", "De terceros:") se convierte en elemento de la caja y se parte en dos líneas teniendo sitio de sobra. Como bloque, vuelve a ser texto en línea. Mismo resultado visual, sin la trampa. */ .legal-sec ul li{ display:block; position:relative; padding-left:17px; color: var(--gray-dark); font-size:15px; line-height:1.65; } .legal-sec ul li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background: var(--gold); } .legal-fecha{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color: var(--gray-mid); border:1px solid rgba(0,0,0,0.1); border-radius:40px; padding:6px 16px; margin-top:4px; } /* Los datos que la gente viene de verdad a buscar, fuera del muro de texto: quién responde y a dónde se reclama. Son los dos bloques que se copian y se pegan en un escrito, así que van en tarjeta y con enlaces que funcionan (tel: y mailto:). `dt` a 170px y no 150: las filas registrales («Registro Mercantil») no entran en 150 y se partían. */ .ident-card, .aepd-card{ background: var(--white); border:1px solid rgba(0,0,0,0.09); border-left:3px solid var(--gold); border-radius:8px; padding:24px 26px; margin: 4px 0 18px 0; } .ident-card dl, .aepd-card dl{ margin:0; } .ident-row{ display:flex; gap:14px; padding:9px 0; font-size:14.5px; line-height:1.5; border-bottom:1px solid rgba(0,0,0,0.05); } .ident-row:last-child{ border-bottom:none; } .ident-row dt{ min-width:170px; color: var(--gray-mid); font-size:13px; padding-top:2px; flex-shrink:0; } .ident-row dd{ margin:0; color: var(--black); font-weight:500; } .ident-row dd a{ color: var(--gold-texto); border-bottom:1px solid rgba(212, 175, 55,0.35); } .ident-row dd a:hover{ border-bottom-color: var(--gold); } /* De todo el aviso legal, lo único que puede afectar a alguien que va a comprar es que los datos de los inmuebles son orientativos. Enterrado en un párrafo no lo lee nadie: va en bloque aparte, con fondo, para que se vea aunque se lea en diagonal. */ .aviso-destacado{ background: rgba(212, 175, 55,0.07); border:1px solid rgba(212, 175, 55,0.3); border-radius:8px; padding:22px 24px; margin: 6px 0 18px 0; } .aviso-destacado p{ margin-bottom:10px; font-size:15px; } .aviso-destacado p:last-child{ margin-bottom:0; } .aviso-destacado strong{ color: var(--black); } /* Reglas de uso y derechos, en rejilla. Enumerados en un párrafo se leen como relleno legal; en tarjetas se ven como cuatro compromisos y seis cosas que uno puede pedir, que es lo que son. */ .reglas-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; margin: 6px 0 20px 0; } .derechos-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin: 6px 0 20px 0; } .regla-card, .derecho-card{ background: var(--white); border:1px solid rgba(0,0,0,0.08); border-radius:8px; padding:18px 18px 20px 18px; transition: border-color .25s ease, transform .25s ease; } .regla-card:hover, .derecho-card:hover{ border-color: var(--gold); transform: translateY(-3px); } .regla-card h5, .derecho-card h5{ font-size:14.5px; margin-bottom:7px; color: var(--black); display:flex; align-items:center; gap:8px; } .regla-card h5 span, .derecho-card h5 span{ width:22px; height:22px; border-radius:50%; background: rgba(212, 175, 55,0.12); color: var(--gold-texto); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .regla-card p, .derecho-card p{ font-size:13.5px; color: var(--gray-dark); line-height:1.6; margin:0; } /* Tira de enlaces al resto de páginas legales. Quien está aquí suele acabar buscando cookies o el aviso legal; obligarle a volver al pie es gratuito y molesto. */ .legal-otras{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; padding-top:26px; border-top:1px solid rgba(0,0,0,0.08); } .legal-otras a{ border:1px solid rgba(212, 175, 55,0.45); color: var(--gold-texto); border-radius:40px; padding:8px 18px; font-size:13.5px; transition: background .25s ease, color .25s ease; } .legal-otras a:hover{ background: var(--gold); color: var(--white); } @media (max-width: 900px){ /* Debajo de 900 el índice fijo se come el ancho de lectura. Pasa a ser un desplegable arriba del todo, cerrado por defecto: quien quiera saltar lo abre, y quien venga a leer de arriba abajo no se lo encuentra en medio. */ .legal-layout{ grid-template-columns: 1fr; gap:0; } .legal-index{ position: static; margin-bottom: 26px; } .legal-index h4{ display:none; } .legal-index-toggle{ display:flex; width:100%; align-items:center; justify-content:space-between; background: var(--white); border:1px solid rgba(212, 175, 55,0.45); border-radius:6px; padding:13px 16px; font-size:14px; font-weight:600; color: var(--gold-texto); cursor:pointer; font-family:inherit; } .legal-index-toggle .chev{ transition: transform .25s ease; } .legal-index.abierto .legal-index-toggle .chev{ transform: rotate(180deg); } .legal-index ol{ display:none; margin-top:8px; } .legal-index.abierto ol{ display:block; } .legal-body{ max-width:none; } .legal-sec h2{ font-size:20px; } } @media (max-width: 600px){ .reglas-grid, .derechos-grid{ grid-template-columns: 1fr; } .ident-row{ flex-direction:column; gap:3px; } .ident-row dt{ min-width:0; } .legal-sec h2{ flex-direction:column; gap:8px; } .legal-sec h2 .num{ align-self:flex-start; } .aviso-destacado{ padding:18px 18px; } } /* ====================================================== PROPIO DE LA POLÍTICA DE COOKIES ====================================================== */ /* Tres criterios de clasificación a la vez. En párrafo corrido es un ladrillo; en tres columnas se entiende de un vistazo. */ .tipos-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin: 6px 0 20px 0; } .tipo-card{ background: var(--white); border:1px solid rgba(0,0,0,0.08); border-radius:8px; padding:18px 18px 20px 18px; } .tipo-card h5{ font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color: var(--gold-texto); margin-bottom:12px; font-weight:600; } .tipo-card dl{ margin:0; } .tipo-card dt{ font-size:14px; color: var(--black); font-weight:600; margin-top:11px; } .tipo-card dt:first-child{ margin-top:0; } .tipo-card dd{ margin:2px 0 0 0; font-size:13.2px; color: var(--gray-dark); line-height:1.55; } /* El panel de preferencias. Ya no es una maqueta: guarda de verdad. */ .cookie-panel{ background: var(--white); border:1px solid rgba(0,0,0,0.1); border-top:3px solid var(--gold); border-radius:10px; padding:24px 26px 22px 26px; margin: 8px 0 18px 0; box-shadow: 0 6px 22px rgba(0,0,0,0.06); scroll-margin-top: 110px; } .cookie-panel-head h4{ font-size:17px; margin-bottom:5px; } .cookie-panel-head p{ font-size:13.5px; color: var(--gray-mid); margin-bottom:16px; line-height:1.6; } .cookie-cat{ display:flex; gap:16px; align-items:flex-start; justify-content:space-between; padding:15px 0; border-top:1px solid rgba(0,0,0,0.07); } .cookie-cat-txt h6{ font-size:14.5px; margin-bottom:4px; color: var(--black); display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .cookie-cat-txt .fijo{ font-size:10.5px; letter-spacing:0.6px; text-transform:uppercase; color: var(--gold-texto); border:1px solid rgba(212, 175, 55,0.4); border-radius:20px; padding:2px 8px; font-weight:600; } .cookie-cat-txt p{ font-size:13.2px; color: var(--gray-dark); line-height:1.6; margin:0; } .cookie-switch{ position:relative; width:44px; height:24px; flex-shrink:0; margin-top:2px; } .cookie-switch input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:2; } .cookie-switch .pista{ position:absolute; inset:0; background:#d9d5cd; border-radius:40px; transition: background .25s ease; pointer-events:none; } .cookie-switch .bola{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background: var(--white); box-shadow:0 1px 3px rgba(0,0,0,0.28); transition: transform .25s ease; pointer-events:none; } .cookie-switch input:checked ~ .pista{ background: var(--gold); } .cookie-switch input:checked ~ .bola{ transform: translateX(20px); } .cookie-switch input:focus-visible ~ .pista{ outline:2px solid var(--gold); outline-offset:2px; } .cookie-switch input:disabled{ cursor:not-allowed; } .cookie-switch input:disabled ~ .pista{ background: var(--gold); opacity:0.4; } .cookie-acciones{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; padding-top:18px; border-top:1px solid rgba(0,0,0,0.07); } .ck-btn{ font-family:inherit; font-size:13.5px; border-radius:40px; padding:10px 20px; cursor:pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; } .ck-btn--ghost{ background:transparent; border:1px solid rgba(0,0,0,0.2); color: var(--gray-dark); } .ck-btn--ghost:hover{ border-color: var(--gold); color: var(--gold-texto); } .ck-btn--solid{ background: var(--gold); border:1px solid var(--gold); color: var(--white); } .ck-btn--solid:hover{ background:#8c6e2d; border-color:#8c6e2d; } /* Nada de display:flex aquí: el del estado se convertiría en elemento de la caja flexible y el gap le abriría un hueco antes del punto final. */ .cookie-estado{ margin-top:12px; font-size:12.5px; color: var(--gray-mid); line-height:1.6; } .cookie-estado b{ color: var(--gold-texto); font-weight:600; } /* La tabla de cookies. */ .tabla-wrap{ overflow-x:auto; max-width:100%; margin: 6px 0 16px 0; -webkit-overflow-scrolling: touch; } .cookie-tabla{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px; background: var(--white); border:1px solid rgba(0,0,0,0.09); border-radius:8px; } .cookie-tabla th{ text-align:left; font-size:11.5px; letter-spacing:0.9px; text-transform:uppercase; color: var(--gold-texto); font-weight:600; padding:13px 14px; border-bottom:1px solid rgba(0,0,0,0.09); white-space:nowrap; } .cookie-tabla td{ padding:14px; color: var(--gray-dark); line-height:1.6; vertical-align:top; border-top:1px solid rgba(0,0,0,0.06); } .cookie-tabla tbody tr:first-child td{ border-top:none; } .cookie-tabla td code{ font-size:12.5px; background: rgba(0,0,0,0.04); border-radius:3px; padding:1px 5px; } .cookie-tabla td.estado-no{ color: var(--gray-mid); } /* Los terceros que usa la web, uno por tarjeta. */ .servicios-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; margin: 6px 0 18px 0; } .servicio-card{ background: var(--white); border:1px solid rgba(0,0,0,0.08); border-radius:8px; padding:17px 18px 18px 18px; border-left:3px solid rgba(212, 175, 55,0.35); } .servicio-card h5{ font-size:14.5px; margin-bottom:3px; color: var(--black); display:flex; align-items:center; justify-content:space-between; gap:10px; } .servicio-card .cat{ font-size:10.5px; letter-spacing:0.6px; text-transform:uppercase; color: var(--gray-mid); border:1px solid rgba(0,0,0,0.14); border-radius:20px; padding:2px 8px; flex-shrink:0; font-weight:600; } .servicio-card .para{ font-size:13px; color: var(--gray-dark); line-height:1.55; margin:6px 0 0 0; } .servicio-card .trae{ font-size:12.5px; color: var(--gray-mid); line-height:1.5; margin:9px 0 0 0; padding-top:9px; border-top:1px dashed rgba(0,0,0,0.12); } .servicio-card .trae b{ color: var(--gray-dark); font-weight:600; } /* Cómo borrarlas desde cada navegador. */ .navegadores{ display:flex; flex-wrap:wrap; gap:10px; margin: 4px 0 16px 0; } .navegadores a{ border:1px solid rgba(0,0,0,0.15); border-radius:40px; padding:9px 18px; font-size:13.5px; color: var(--gray-dark); transition: border-color .25s ease, color .25s ease; } .navegadores a:hover{ border-color: var(--gold); color: var(--gold-texto); } @media (max-width: 600px){ .tipos-grid, .servicios-grid{ grid-template-columns: 1fr; } .cookie-panel{ padding:20px 18px 18px 18px; } .cookie-acciones .ck-btn{ flex:1 1 100%; text-align:center; } .navegadores a{ flex:1 1 100%; text-align:center; } } /* ====================================================== EL AVISO DE COOKIES ====================================================== Abajo y a lo ancho, no en el centro tapando la página: el visitante puede seguir leyendo mientras decide, y eso es parte de que la decisión sea libre. Los tres botones tienen el mismo tamaño. Rechazar tiene que costar lo mismo que aceptar — lo pide la guía de la AEPD y además es lo honesto. ====================================================== */ .ck-aviso{ position: fixed; left:0; right:0; bottom:0; z-index: 3000; background: var(--white); border-top:3px solid var(--gold); box-shadow: 0 -6px 28px rgba(0,0,0,0.16); padding:18px 24px; } .ck-aviso[hidden]{ display:none; } .ck-aviso-caja{ max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:32px; justify-content:space-between; } .ck-aviso-texto h4{ font-size:15px; margin-bottom:5px; } .ck-aviso-texto p{ font-size:13.2px; color: var(--gray-dark); line-height:1.6; margin:0; max-width:74ch; } .ck-aviso-texto p a{ color: var(--gold-texto); border-bottom:1px solid rgba(212, 175, 55,0.4); } .ck-aviso-botones{ display:flex; gap:10px; flex-shrink:0; } .ck-aviso-botones .ck-btn{ white-space:nowrap; } @media (max-width: 900px){ .ck-aviso{ padding:16px 18px; max-height:70vh; overflow-y:auto; } .ck-aviso-caja{ flex-direction:column; align-items:stretch; gap:16px; } .ck-aviso-botones{ flex-wrap:wrap; } .ck-aviso-botones .ck-btn{ flex:1 1 140px; text-align:center; } } /* ====================================================== PROPIO DE POSTVENTA Y ASESORÍA ====================================================== El resto de piezas de estas dos páginas (story-row, svc-grid, alcance-card, faq, page-cta) ya vinieron con Vender. Aquí solo va lo que faltaba. ====================================================== */ /* ====================================================== ¿A QUIÉN LE TOCA CADA COSA? MEJORA: la landing enumera cuatro bloques de servicio sin decir a quién va dirigido cada uno. Un propietario no residente, un comprador que acaba de recoger llaves y un inversor no necesitan lo mismo, y hoy tienen que deducirlo leyendo las 17 viñetas. Esta rejilla los orienta en cinco segundos y ancla a cada bloque. ====================================================== */ .perfil-section{ background: var(--bg); padding: 72px 0; } .perfil-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; } .perfil-card{ background: var(--white); border:1px solid rgba(0,0,0,0.08); border-radius:10px; padding:30px 28px; display:flex; flex-direction:column; } .perfil-card .icon-ph{ margin-bottom:16px; } .perfil-card h4{ font-size:17px; margin-bottom:10px; } .perfil-card p{ font-size:14px; color: var(--gray-dark); } .perfil-card .perfil-ir{ margin-top:auto; padding-top:16px; font-size:13px; } /* ====================================================== BLOQUES DE SERVICIO Reutiliza .story-row del donante. El numerito redondo es el mismo círculo dorado de las etapas de Asesoría, pero aquí no significa "orden en el tiempo" sino "bloque nº": en postventa las cosas no van en secuencia, cada cliente entra por la puerta que necesita. Por eso la etiqueta superior dice PARA QUIÉN es, no CUÁNDO ocurre. ====================================================== */ .bloque-cab{ display:flex; align-items:center; gap:14px; margin-bottom:14px; } .bloque-n{ width:46px; height:46px; border-radius:50%; flex-shrink:0; background: var(--white); border:2px solid var(--gold); color: var(--gold-texto); font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center; } .bloque-para{ font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color: var(--gold-texto); font-weight:700; } /* ====================================================== FRONTERA CON ASESORÍA MEJORA: no está en la landing. Las dos páginas comparten siete servicios y sin esto el visitante no sabe cuál leer, ni Google cuál posicionar. Se resuelve diciéndolo en una línea y enlazando, no duplicando contenido. ====================================================== */ .frontera{ border:1px solid rgba(212, 175, 55,0.35); border-left:4px solid var(--gold); border-radius:8px; background: var(--white); padding:26px 30px; margin-top:8px; } .frontera h4{ font-size:17px; margin-bottom:10px; } .frontera p{ font-size:14px; color: var(--gray-dark); margin-bottom:10px; } .frontera p:last-child{ margin-bottom:0; } @media (max-width:760px){ .perfil-grid{ grid-template-columns: 1fr; } .bloque-n{ width:40px; height:40px; font-size:16px; } .intro-acciones{ align-items:flex-start; flex-direction:column; gap:12px; } .intro-directo a{ display:inline-block; margin:0 14px 6px 0; } .frontera{ padding:22px 20px; } } /* Lista de impuestos en la FAQ (Ronda 37) */ .impuestos-lista{ list-style:none; margin:4px 24px 12px 24px; padding:0; } .impuestos-lista li{ position:relative; padding-left:18px; margin-bottom:8px; font-size:14px; color: var(--gray-dark); line-height:1.6; } .impuestos-lista li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background: var(--gold); } .impuestos-fecha{ font-size:12px !important; color: var(--gray-mid) !important; border-top:1px solid rgba(0,0,0,0.08); padding-top:10px !important; margin-top:4px; } /* Fila de servicio sin foto. `.story-row` es una rejilla de dos columnas: texto e imagen. En Asesoría y Postventa las fotos editoriales todavía no existen, y dejar la columna de la derecha vacía hacía que el texto ocupara media pantalla con un hueco al lado. Mientras no estén, la fila va a una sola columna y el texto usa el ancho entero. Al añadir las fotos basta con quitar `sin-foto` del PHP. */ .story-row.sin-foto{ grid-template-columns: 1fr; } .story-row.sin-foto .story-text{ max-width: 820px; } /* ===================================================================== PÁGINA DE UNA PROMOCIÓN — lo que le faltaba a la hoja ===================================================================== La página `includes/paginas/obra-nueva-promocion.php` estaba escrita entera y sin una sola línea de CSS propia. Casi no se notaba, porque reutiliza las clases de la ficha de vivienda —`.key-facts`, `.features-grid`, `.gallery`, `.agent-card`— que sí estaban. Lo que no estaba era su tabla de viviendas, que es justo el bloque por el que se entra en la página. Sin esto, la tabla salía con los bordes del navegador, las columnas descuadradas y —lo peor— el texto para lectores de pantalla A LA VISTA: cada botón decía «Ver ficha Chalet Ref. 57433» desbordando su celda. Antonio lo vio el 18 de agosto y con razón: «lo veo muy vacío». ===================================================================== */ /* Texto solo para lectores de pantalla. Se saca de la vista sin usar `display:none` ni `visibility:hidden`, que lo esconderían también del lector. La receta de 1 px con `clip-path` es la estándar; el `white-space: nowrap` evita que un texto largo empuje el ancho de la página desde su escondite. */ .promo-oculto{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path: inset(50%); white-space:nowrap; border:0; } .promo-nota{ font-size:14px; color: var(--gray-mid); margin: -8px 0 24px 0; max-width: 620px; } /* --------------------------------------------------------------------- LA TABLA DE VIVIENDAS --------------------------------------------------------------------- Es una tabla de verdad y no una rejilla de
    , a propósito: son datos tabulares, y con `` quien navega con lector de pantalla oye «Precio: 690.000 €» en vez de un número suelto. `table-layout: auto` para que la columna del tipo y la del precio se queden con lo que necesitan; lo que se fija es el mínimo del bloque entero, para que en pantallas estrechas se pueda arrastrar en vez de apretujar las cifras hasta partirlas. */ .promo-tabla{ width:100%; border-collapse: collapse; font-size:15px; } .promo-tabla thead th{ text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color: var(--gray-mid); padding: 0 16px 10px 0; border-bottom: 2px solid var(--gold); white-space:nowrap; } .promo-tabla tbody td, .promo-tabla tbody th{ padding: 16px 16px 16px 0; border-bottom: 1px solid rgba(0,0,0,0.07); vertical-align: middle; text-align:left; } .promo-tabla tbody tr:last-child td, .promo-tabla tbody tr:last-child th{ border-bottom:none; } .promo-tabla tbody tr:hover{ background: rgba(212, 175, 55,0.04); } /* La primera celda es el nombre de la vivienda y su referencia debajo. Va en `` porque encabeza la fila, pero no debe salir con la pinta de una cabecera de columna. */ .promo-tabla tbody th{ font-weight:600; color: var(--black); min-width: 150px; } .promo-tabla tbody th a{ color: var(--black); text-decoration:none; } .promo-tabla tbody th a:hover{ color: var(--gold-texto); } .promo-ref{ display:block; font-size:12px; font-weight:400; color: var(--gray-mid); margin-top:2px; } .promo-precio{ font-weight:700; color: var(--black); white-space:nowrap; } /* La celda del botón: pegada a la derecha y sin que el botón se estire. `width:1%` con `white-space:nowrap` es la manera de decirle a una tabla «esta columna, lo justo»: el resto del ancho se lo reparten las demás. */ .promo-ir{ width:1%; white-space:nowrap; text-align:right !important; padding-right:0 !important; } .promo-ir .btn-outline{ padding: 8px 18px; font-size:13px; display:inline-block; } /* --------------------------------------------------------------------- LA FICHA TÉCNICA DEL EDIFICIO --------------------------------------------------------------------- Dos columnas: la etiqueta y el dato. La etiqueta no se parte nunca —`white-space: nowrap`— porque «Certificado energético» partido en dos líneas al lado de una «B» suelta se lee fatal, y eso es exactamente lo que pasaba sin este bloque. */ .promo-ficha{ width:100%; border-collapse: collapse; font-size:15px; margin-top: 20px; } .promo-ficha th{ text-align:left; font-weight:600; color: var(--gray-dark); padding: 10px 24px 10px 0; white-space:nowrap; vertical-align: top; width:1%; } .promo-ficha td{ padding: 10px 0; color: var(--black); border-bottom: 1px solid rgba(0,0,0,0.06); } .promo-ficha tr:last-child td{ border-bottom:none; } @media (max-width: 760px){ /* En móvil la tabla no cabe. Se deja arrastrar en horizontal en vez de apretar las columnas: un precio partido en dos líneas se lee mal, y una tabla que se puede empujar con el dedo se entiende sola. */ .promo-tabla{ display:block; overflow-x:auto; white-space:nowrap; } /* AVISO DE QUE LA TABLA SIGUE (8 de octubre de 2026). Antonio: «la gente no va a saber que eso se puede desplazar». El borde por el que queda tabla se difumina y lleva una sombra suave; al llegar al final desaparece solo, y si se vuelve atras aparece en el otro lado. Sin JavaScript: las dos primeras capas viajan con el contenido («local») y tapan la sombra cuando ese borde ya esta a la vista; las dos ultimas se quedan quietas en los bordes de la caja («scroll»). Elegido entre dos maquetas (la otra llevaba ademas un texto). */ .promo-tabla{ background: linear-gradient(to right, var(--bg) 30%, rgba(248,246,241,0)) left center / 48px 100% no-repeat local, linear-gradient(to left, var(--bg) 30%, rgba(248,246,241,0)) right center / 48px 100% no-repeat local, linear-gradient(to right, rgba(0,0,0,0.10), rgba(0,0,0,0)) left center / 18px 100% no-repeat scroll, linear-gradient(to left, rgba(0,0,0,0.10), rgba(0,0,0,0)) right center / 18px 100% no-repeat scroll; } .promo-tabla tbody th{ min-width:130px; } .promo-ficha th{ white-space:normal; } } /* Calidades y superficies, lado a lado en escritorio. Dos tablas cortas una al lado de la otra ocupan la mitad de alto que apiladas, y en una pagina que ya es larga eso importa. En movil se apilan solas. */ .promo-calidades{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 56px; margin-top: 34px; } .promo-subtitulo{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color: var(--gray-mid); margin-bottom: 4px; } /* En estas dos tablas la columna del dato es estrecha —caben dos por fila— y «Suelo radiante» o «Incluido en el precio» se partian en dos lineas mientras la etiqueta de al lado tenia sitio de sobra. Se le quita aire a la etiqueta y se lo damos al valor, que es lo que se viene a leer. */ .promo-calidades .promo-ficha th{ padding-right: 14px; } .promo-calidades .promo-ficha td{ min-width: 120px; } /* Volver a la busqueda, encima de las migas de pan. No es una miga mas: las migas dicen DONDE ESTAS dentro del sitio y este enlace dice COMO VOLVER A LO QUE ESTABAS HACIENDO. Son dos cosas distintas y por eso va aparte y con la flecha delante. */ .volver-busqueda{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color: var(--gray-mid); text-decoration:none; margin-bottom: 10px; transition: color 0.2s ease; } .volver-busqueda:hover{ color: var(--gold-texto); } /* Los dos enlaces de vuelta van en fila y se apilan solos si no caben. En la ficha de vivienda pueden ser dos —«tu búsqueda» y «la promoción»— y en la de promoción solo uno. */ .volver-fila{ display:flex; flex-wrap:wrap; align-items:center; gap: 6px 26px; margin-bottom: 10px; /* Aire por arriba (21 de agosto). Sin esto el enlace arrancaba pegado a la raya dorada del header: la cabecera es `sticky`, o sea que ocupa su sitio real en el documento, y este bloque es lo PRIMERO que va debajo. Quedaba tan al filo que costaba verlo. Los 18px no son un número al azar: son los mismos que ya lleva `.breadcrumb` de padding, que es el bloque hermano justo debajo. Así la vuelta y las migas respiran igual y el conjunto no queda cojo. */ margin-top: 18px; } .volver-fila .volver-busqueda{ margin-bottom:0; } /* «(7 viviendas)» detrás de «Volver a la promoción»: dice cuántas hermanas hay sin obligar a entrar para descubrirlo. En claro y sin negrita, que acompaña al enlace y no compite con él. */ .volver-cuenta{ font-weight:400; color: var(--gray-mid); opacity: 0.75; } .volver-busqueda span{ font-size:15px; line-height:1; } .volver-busqueda .volver-cuenta{ font-size:13px; } /* La casilla «necesito vender para comprar», debajo del mensaje. Va en un recuadro con filo dorado y no suelta como las de consentimiento: no es un trámite legal, es una pregunta comercial, y conviene que se vea. Pero en crema y sin negrita en todo el texto, para que no compita con el botón de enviar, que es lo que hay que pulsar. */ .vender-check{ display:flex; align-items:flex-start; gap:10px; font-size:12px; line-height:1.45; color: var(--gray-dark); background: var(--bg); border: 1px solid rgba(212, 175, 55,0.35); border-radius: 6px; padding: 12px 14px; margin-bottom: 18px; } .vender-check input[type="checkbox"]{ width:16px; height:16px; flex-shrink:0; margin:1px 0 0 0; accent-color: var(--gold); cursor:pointer; } .vender-check label{ cursor:pointer; } .vender-check strong{ display:block; color: var(--black); font-weight:600; } /* `hidden` en un elemento con `display:flex` no esconde nada: la regla del display gana. Hay que decirlo explícitamente. */ .vender-check[hidden]{ display:none; } /* El mapa dentro de un bloque de contenido —ficha de vivienda y pagina de promocion— necesita altura propia: el de la pagina de contacto la hereda de su columna y aqui no hay columna que la de. */ .content-block .mapa-incrustado{ margin-top: 20px; border: 1px solid rgba(0,0,0,0.08); border-radius: 6px; overflow: hidden; min-height: 300px; } .content-block .mapa-aviso{ /* Centrado y con aire: es lo unico que se ve hasta que se pide el mapa, asi que no puede parecer un hueco a medio cargar. */ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 28px 24px; width:100%; } .content-block .mapa-aviso-texto{ max-width: 420px; } /* --------------------------------------------------------------------- EL AVISO, CUANDO YA NO HACE FALTA --------------------------------------------------------------------- `hidden` es un atributo, no una regla: vale `display:none`, pero lo vale con la fuerza mas debil que hay. Cualquier `display:flex` escrito despues gana, y aqui hay dos. Resultado: al cargar el mapa, el aviso seguia ahi, encima del mapa, diciendo que habia que pulsar un boton que ya se habia pulsado. Un fallo de una linea que solo se ve cuando el mapa carga de verdad, que es justo lo que no pasaba mientras hacia falta pulsar para verlo. --------------------------------------------------------------------- */ .mapa-aviso[hidden], .mapa-destino[hidden]{ display:none !important; } /* ===================================================================== VÍDEO Y TOUR VIRTUAL ===================================================================== La carátula está dibujada aquí entera, sin ninguna imagen. Es a propósito: la miniatura de un vídeo de YouTube se descarga de los servidores de Google, y entonces la fachada no serviría de nada —el visitante habría contactado con Google igual, solo que sin ver el vídeo. Un degradado en los colores de la marca cuesta cero bytes y no le cuenta a nadie qué ficha se está mirando. ===================================================================== */ .video-marco{ position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #1c1a17; margin-top: 6px; } .video-caratula{ position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; border: 0; cursor: pointer; text-align: center; font: inherit; color: #fff; background: radial-gradient(circle at 50% 42%, rgba(212, 175, 55,0.35) 0%, rgba(28,26,23,0) 62%), linear-gradient(140deg, #2a2621 0%, #1c1a17 55%, #14120f 100%); transition: background 0.25s ease; } .video-caratula:hover{ background: radial-gradient(circle at 50% 42%, rgba(212, 175, 55,0.5) 0%, rgba(28,26,23,0) 64%), linear-gradient(140deg, #2a2621 0%, #1c1a17 55%, #14120f 100%); } /* El triángulo de play: un borde izquierdo grueso y los otros dos transparentes. El truco de siempre, y así no hace falta ni un SVG. */ .video-play{ width: 68px; height: 68px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.85); background: rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease, background 0.25s ease; } .video-play::after{ content: ''; width: 0; height: 0; margin-left: 5px; /* centra el triángulo en el círculo */ border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; } .video-caratula:hover .video-play{ transform: scale(1.07); background: rgba(212, 175, 55,0.35); } .video-etiqueta{ font-size: 15px; font-weight: 700; letter-spacing: 0.3px; } .video-nota{ font-size: 12px; color: rgba(255,255,255,0.72); max-width: 420px; line-height: 1.5; } .video-destino, .video-destino iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* SIN ESTO EL BOTÓN DE PLAY NO FUNCIONA. `hidden` es un atributo y vale `display:none`, pero con la fuerza más débil que hay: el `display:block` de la regla de arriba lo gana. El destino del vídeo está en `position:absolute; inset:0`, o sea que cubre el marco entero — y aunque no se viera nada, se estaba comiendo todos los clics antes de que llegaran a la carátula. Es el mismo fallo que tenía el aviso del mapa. Dos veces la misma piedra: cuando se pone `display` a algo que luego se esconde con `hidden`, hay que escribir también la regla del `[hidden]`. */ .video-destino[hidden]{ display: none !important; } /* Y lo mismo por el otro lado: al cargar el vídeo, `main.js` esconde la carátula con `hidden`, y su `display:flex` también le ganaba. Se quedaba puesta encima del reproductor. */ .video-caratula[hidden]{ display: none !important; } .video-fuera{ font-size: 12px; color: var(--gray-mid); margin-top: 10px; } .video-fuera a{ color: var(--gold-texto); text-decoration: underline; } @media (max-width: 640px){ .video-play{ width: 56px; height: 56px; } .video-play::after{ border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; } .video-nota{ font-size: 11px; } } /* Quien haya pedido a su sistema que no anime nada, no ve el zoom del botón. La carátula sigue funcionando igual. */ @media (prefers-reduced-motion: reduce){ .video-caratula, .video-play{ transition: none; } .video-caratula:hover .video-play{ transform: none; } } /* ====================================================================== «MÁS ABAJO: …» — EL ÍNDICE DE LA INTRO ====================================================================== Nació para Vender (21 de agosto), pero es genérico: cualquier página larga que empiece con algo que llena la pantalla puede usarlo. El problema que resuelve: cuando lo primero que se ve ocupa el alto entero —un formulario grande, una foto a sangre—, la página parece terminar ahí. Y lo que asoma por debajo, si es más de lo mismo, no invita a bajar: confirma que no hay nada nuevo. Un «↓ sigue bajando» a secas avisa de que hay más, pero no de QUÉ hay. Enumerar las secciones sí, y de paso lleva a cada una. Ocupa un renglón. Deliberadamente DISCRETO: letra pequeña, sin fondo, sin caja. Compite con el formulario, que es la acción principal de la página, así que tiene que informar sin llamar más que él. ====================================================================== */ .intro-indice{ display:flex; flex-wrap:wrap; align-items:center; gap: 10px 14px; margin-top: 24px; } .intro-indice-eti{ display:inline-flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:1.2px; font-size:11px; font-weight:700; color: var(--gray-mid); } /* La flecha baja despacio y vuelve. Es lo que hace que la fila se lea como «esto continúa» y no como una lista de enlaces cualquiera: el ojo va al movimiento antes que al texto. */ .intro-indice-flecha{ font-size:14px; line-height:1; color: var(--gold-texto); animation: indiceflecha 2.4s ease-in-out infinite; } @keyframes indiceflecha{ 0%, 100%{ transform: translateY(0); opacity:.55; } 50% { transform: translateY(4px); opacity:1; } } .intro-indice-enlaces{ display:flex; flex-wrap:wrap; gap:8px; } /* Pastillas, no enlaces subrayados. Un renglón de texto pequeño se lee como letra pequeña —o sea, como algo que se puede saltar—; cuatro pastillas se leen como botones y se pulsan. Es el mismo recurso que las casillas del buscador de la portada, con el mismo dorado al 10 %. */ .intro-indice-enlaces a{ display:inline-block; padding: 7px 14px; border: 1px solid rgba(212, 175, 55,0.45); border-radius: 999px; background: rgba(212, 175, 55,0.07); color: var(--gold-texto); font-size:13px; font-weight:600; line-height:1.2; text-decoration:none; transition: background .2s ease, border-color .2s ease, color .2s ease; } .intro-indice-enlaces a:hover, .intro-indice-enlaces a:focus-visible{ background: var(--gold); border-color: var(--gold); color: #fff; } @media (prefers-reduced-motion: reduce){ .intro-indice-flecha{ animation:none; } } @media (max-width: 600px){ /* En el móvil las cuatro pastillas ocupan tres renglones y empujan el formulario fuera de la pantalla. Se dejan en dos columnas iguales, que caben en dos renglones y siguen siendo cómodas de pulsar con el dedo. */ .intro-indice{ display:block; } .intro-indice-eti{ margin-bottom:10px; } .intro-indice-enlaces{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; } .intro-indice-enlaces a{ text-align:center; padding: 9px 8px; font-size:12px; } } /* ====================================================================== LA FLECHA DEL FINAL — «Cómo trabajamos ↓» ====================================================================== Para quien ha bajado hasta el final del formulario sin rellenarlo. El índice de arriba avisa antes de empezar; esto avisa al llegar al fondo. Es el mismo gesto que el «Descubre más» del hero de la portada, con la misma línea que late, pero en oscuro sobre fondo claro en vez de blanco sobre el vídeo. ====================================================================== */ .baja-cue{ display:flex; flex-direction:column; align-items:center; gap:10px; padding: 6px 0 34px 0; text-decoration:none; color: var(--gray-mid); font-size:11px; letter-spacing:2px; text-transform:uppercase; transition: color .2s ease; } .baja-cue:hover{ color: var(--gold-texto); } .baja-linea{ width:1px; height:34px; background: rgba(0,0,0,0.25); animation: scrollpulse 2s ease-in-out infinite; } .baja-cue:hover .baja-linea{ background: var(--gold); } /* Quien haya pedido en su sistema que no se muevan las cosas, no las mueve. La línea sigue ahí, simplemente deja de latir. */ @media (prefers-reduced-motion: reduce){ .baja-linea{ animation: none; } } /* El salto a la sección no puede quedar debajo de la cabecera, que es pegajosa. `scroll-margin-top` reserva su alto: sin esto, pulsar «el proceso» deja el título de la sección tapado por el menú. */ #como-ayudamos, #el-proceso, #que-incluye, #preguntas, #valoracion{ scroll-margin-top: 96px; } /* ====================================================================== LA IMAGEN DE CADA ACREDITACIÓN (/es/empresa) ====================================================================== Antonio, 21 de agosto: «los 3 contenedores que estan en la misma linea llevan una imagen cada uno (no tan grande como los modulos de arriba) [...] El contenedor de las imagenes todos del mismo tamaño y ya las ajusto yo». ALTURA FIJA, y ahí está la clave de que la fila quede cuadrada. Si el alto lo pusiera cada imagen, un cartel apaisado y un logo cuadrado dejarían los tres títulos a distinta altura y la fila se vería desalineada aunque las tarjetas midan lo mismo. `object-fit: contain` y NO `cover`. Estas no son fotos: son un cartel, un logo y unos títulos. `cover` recorta para llenar, y recortar un logo por los lados o cortarle el borde a un diploma es peor que dejar aire alrededor. Con `contain` cabe entera siempre, mida lo que mida, y Antonio ajusta el encuadre cuando quiera sin que nada se rompa mientras tanto. MEDIDA PARA QUE LLENE EL HUECO EXACTO: 760 × 300 px. Cualquier otra proporción también vale — simplemente deja aire arriba y abajo o a los lados, sin recortarse. ====================================================================== */ .accred-img{ height: 150px; margin-bottom: 20px; border-radius: 6px; background: var(--bg); display:flex; align-items:center; justify-content:center; padding: 10px; overflow:hidden; } .accred-img img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit: contain; display:block; } @media (max-width: 1024px){ /* Apiladas a una columna, una imagen de 150 px de alto ocupando todo el ancho se ve desproporcionada. Se le baja un poco. */ .accred-img{ height: 130px; } } /* ====================================================================== EL ICONO DE CADA BLOQUE DE EMPRESA ====================================================================== Va en la misma línea que el título, a su izquierda, como en la referencia que mandó Antonio el 21 de agosto. `align-items: baseline` NO valdría: el icono es un cuadrado y su línea base cae en el borde de abajo, así que quedaría hundido respecto a la letra. Con `center` sobre la primera línea del título se alinea a ojo, que es lo que importa. `flex-shrink: 0` en el icono para que un título largo —«Licencias, garantías y seguridad profesional» ocupa dos líneas en pantallas medianas— lo estruje hasta deformarlo. ====================================================================== */ .story-h3{ display:flex; align-items:center; gap:12px; } .story-icono{ flex: 0 0 auto; width:30px; height:30px; color: var(--gold-texto); display:inline-flex; align-items:center; justify-content:center; } .story-icono svg{ width:100%; height:100%; display:block; } @media (max-width: 760px){ /* En el móvil el título ya ocupa dos o tres líneas: el icono se sube arriba del todo para que no quede flotando en mitad del bloque. */ .story-h3{ align-items:flex-start; gap:10px; } .story-icono{ width:26px; height:26px; margin-top:2px; } } /* ====================================================================== ====================================================================== NOTICIAS — EL LISTADO Y LA FICHA ====================================================================== ====================================================================== Esto es lo que faltaba para que la página de noticias dejara de estar «en construcción». El cuerpo en PHP —`includes/paginas/noticias.php` y `noticia.php`— estaba escrito desde hacía semanas, con su destacada, su rejilla, su paginación y su ficha. Lo que no existía era una sola línea de estos estilos, así que la página se veía como una lista de enlaces pelada y parecía que no había nada hecho. Se reaprovecha todo lo que ya estaba: `.page-intro`, `.breadcrumb`, `.section-head`, `.paginacion`, `.pag-enlace`, `.page-cta`, los botones. Aquí abajo solo va lo que es propio de noticias. ====================================================================== */ /* ---------------------------------------------------------------------- La frase «25 noticias publicadas», debajo de la entradilla. ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- `.eyebrow` — LA REGLA BASE QUE NUNCA SE ESCRIBIÓ ---------------------------------------------------------------------- `.eyebrow` es el rótulo pequeño que va encima de casi todos los titulares del sitio: «ACTUALIDAD», «SERVICIO DE VENTA», «EL EQUIPO». Aparece en una docena de sitios y siempre se ve igual… porque está escrito igual DOCE VECES, una por contexto: `.page-intro .eyebrow`, `.section-head .eyebrow`, `.intro-grid .eyebrow`, `.map-info .eyebrow`, `.google-card .eyebrow`… Nunca hubo una regla base. Y eso significa que un `.eyebrow` en un contexto nuevo no se ve como un eyebrow: se ve como un párrafo suelto. Al montar la ficha de noticia salió justo eso —la categoría «Mercado» en negro, tamaño normal y sin mayúsculas—, y al buscar si pasaba en más sitios aparecieron DOS MÁS, las dos en la portada y las dos de antes de hoy: · El «Guía gratuita» del banner de la guía: tenía el color puesto, pero ni mayúsculas, ni espaciado, ni tamaño. · El «Guía gratuita» del modal de descarga: sin nada de nada, en negro y a 16 px. Esta regla los arregla los tres de una vez. Las doce reglas de contexto siguen mandando donde existen —son más específicas—, así que ninguna página que ya se viera bien cambia. SIN `margin-bottom` A PROPÓSITO. El margen lo pone cada contexto y varía (10 px aquí, 12 px allá). Ponerlo aquí movería el banner y el modal de la portada, que están aprobados, y este arreglo es de estilo de letra, no de espaciado. ---------------------------------------------------------------------- */ .eyebrow{ display: inline-block; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-texto); font-weight: 600; } /* La categoría de la noticia, encima del titular. Aquí sí hace falta un respiro antes del

    . */ .articulo-head .eyebrow{ margin-bottom: 8px; } .noticias-recuento{ margin-top: 18px; font-size: 13px; color: var(--gray-mid); } .noticias-vacio{ padding: 40px 0; color: var(--gray-mid); font-size: 15px; } .listado-section{ padding: 0 0 72px 0; } .destacada-section{ padding: 40px 0 40px 0; } /* ---------------------------------------------------------------------- EL HUECO DE LA FOTO — `.noticia-media` ---------------------------------------------------------------------- La foto va de FONDO, no como , y es a propósito: las imágenes las sirve el generador de noticias y llegan con proporciones muy distintas —una captura de pantalla apaisada, un logo, una foto vertical—. Con `background-size:cover` todas rellenan su hueco recortadas por el centro y la rejilla queda cuadrada, que es lo que hace que un listado se lea de un vistazo. CUANDO NO HAY FOTO no se pinta un recuadro gris ni un «imagen no disponible»: queda el rayado tenue de la marca, igual que en el resto del sitio. El visitante no tiene por qué enterarse de que falta algo. `aria-hidden` y `tabindex="-1"` los pone el PHP: este enlace lleva a la misma noticia que el titular de al lado, así que para un lector de pantalla es un duplicado. Se oculta de ahí, pero sigue siendo pulsable con el ratón, que es para lo que está. ---------------------------------------------------------------------- */ .noticia-media{ display:block; background-color: #EFEBE3; background-image: repeating-linear-gradient(45deg, rgba(212, 175, 55,0.05) 0 12px, rgba(212, 175, 55,0.09) 12px 24px); background-size: cover; background-position: center; aspect-ratio: 16 / 10; border-radius: 8px 8px 0 0; } /* ---------------------------------------------------------------------- LA TARJETA ---------------------------------------------------------------------- */ .noticias-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .noticia-card{ display:flex; flex-direction:column; background: var(--white); border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; overflow:hidden; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .noticia-card:hover{ border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,0.07); } /* `flex:1` para que el pie —«Leer más»— quede abajo del todo en todas las tarjetas de la fila aunque unos titulares ocupen dos líneas y otros tres. Sin esto cada «Leer más» cae a una altura distinta. */ .noticia-body{ padding: 22px 22px 24px 22px; display:flex; flex-direction:column; flex: 1 1 auto; } /* ---------------------------------------------------------------------- LA LÍNEA DE ARRIBA: categoría · fecha · medio ---------------------------------------------------------------------- Van en un solo

    , así que se separan con flex y no con caracteres escritos a mano. Si se pusiera un «·» en el HTML entre cada uno, quedaría un punto suelto al principio cuando una noticia no trae categoría — que pasa a menudo. ---------------------------------------------------------------------- */ .noticia-meta{ display:flex; flex-wrap:wrap; align-items:center; gap: 6px 10px; margin-bottom: 12px; font-size: 12px; color: var(--gray-mid); } .noticia-cat{ display:inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(212, 175, 55,0.10); color: var(--gold-texto); font-weight: 700; letter-spacing: .3px; text-transform: uppercase; font-size: 10px; } .noticia-medio{ font-style: italic; } .noticia-card h2{ font-size: 17px; line-height: 1.35; margin-bottom: 10px; } .noticia-card h2 a{ color: var(--black); text-decoration:none; } .noticia-card:hover h2 a{ color: var(--gold-texto); } .noticia-card p{ font-size: 14px; color: var(--gray-dark); line-height: 1.6; margin-bottom: 16px; } /* «Leer más» NO es un enlace: es un . La tarjeta entera ya lleva dos enlaces a la misma noticia (la foto y el titular) y un tercero solo añadiría ruido para quien navega con teclado. Se pinta como si lo fuera porque el gesto que invita —«esto se puede pulsar»— sí es verdad: se pulsa el titular, que está justo encima. */ .noticia-mas{ margin-top:auto; font-size: 13px; font-weight: 600; color: var(--gold-texto); /* La flecha NO se pone aquí con `content: '→'`. El texto ya la trae escrita —«Leer la noticia →» en `lang/es/noticias.php`— y añadirla por CSS la duplicaba: «Leer la noticia → →». Se vio al mirar la página, no leyendo el código. Va en el texto y no en la hoja de estilos porque hay idiomas que escriben de derecha a izquierda; el día que haga falta, la flecha tiene que poder cambiar de lado con la traducción. */ transition: transform .2s ease; } /* El gesto de hover se hace moviendo la etiqueta entera un pelo, ya que la flecha no es un elemento aparte que se pueda animar sola. */ .noticia-card:hover .noticia-mas{ transform: translateX(3px); } /* ---------------------------------------------------------------------- LA ÚLTIMA NOTICIA, A DOBLE ANCHO ---------------------------------------------------------------------- Solo en la primera página: en la segunda, «la primera de la lista» ya no es la más reciente de nada. De eso se encarga el PHP. ---------------------------------------------------------------------- */ .destacada{ display:grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: var(--white); border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; overflow:hidden; transition: border-color .25s ease, box-shadow .25s ease; } .destacada:hover{ border-color: var(--gold); box-shadow: 0 16px 36px rgba(0,0,0,0.07); } /* La foto de la destacada manda menos que en la tarjeta: aquí el alto lo marca el texto de al lado, así que se estira a lo que haga falta. Por eso `height:100%` y no `aspect-ratio`, que la partiría. */ .destacada-media{ aspect-ratio: auto; height: 100%; min-height: 320px; border-radius: 0; } .destacada-texto{ padding: 40px 44px; display:flex; flex-direction:column; justify-content:center; } .destacada-texto h2{ font-size: 27px; line-height: 1.25; margin-bottom: 14px; } .destacada-texto h2 a{ color: var(--black); text-decoration:none; } .destacada:hover .destacada-texto h2 a{ color: var(--gold-texto); } .destacada-texto p{ font-size: 15px; color: var(--gray-dark); line-height: 1.7; margin-bottom: 0; } .destacada-pie{ margin-top: 22px; } /* ====================================================================== LA FICHA DE UNA NOTICIA ====================================================================== Una columna estrecha y centrada. No es un capricho: un texto largo a todo lo ancho de una pantalla de 1920 px obliga al ojo a barrer medio metro por línea y a buscar dónde empieza la siguiente. Entre 65 y 75 caracteres por línea es lo cómodo, y eso son unos 720 px con esta tipografía. ====================================================================== */ .articulo{ padding: 40px 0 72px 0; } .articulo-wrap{ max-width: 760px; margin: 0 auto; padding: 0 24px; } /* Las migas de la ficha llevan el titular entero, que puede ser larguísimo —«El alquiler medio sube un 9,45% interanual en julio hasta 14,82 euros por metro cuadrado»—. Se corta con puntos suspensivos en vez de dejar que ocupe tres renglones encima del titular de verdad. */ .articulo-head .breadcrumb .current{ display:inline-block; max-width: 320px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .articulo-head h1{ font-size: 34px; line-height: 1.22; margin: 10px 0 18px 0; } .articulo-entradilla{ font-size: 18px; line-height: 1.65; color: var(--gray-dark); margin-bottom: 20px; } .articulo-meta{ display:flex; flex-wrap:wrap; align-items:center; gap: 6px 14px; padding-bottom: 22px; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 13px; color: var(--gray-mid); } .articulo-firma{ font-weight: 600; color: var(--gray-dark); } .articulo-medio{ font-style: italic; } .articulo-portada{ margin: 28px 0 0 0; border-radius: 10px; overflow:hidden; } .articulo-portada img{ width:100%; height:auto; display:block; } /* ---------------------------------------------------------------------- EL CUERPO DEL ARTÍCULO ---------------------------------------------------------------------- El texto llega de la base de datos con HTML dentro (

    ,

    ,