/* ============================================================ TOKENS — Obra Clara · reformas en Madrid Plantilla Maestra CRO v3.0.0, edición «Dossier» ÚNICO archivo que se personaliza por cliente. `global.css` y `bloques.css` NO se tocan: todo lo que hay aquí abajo son tokens o reglas de mayor especificidad que las suyas. ------------------------------------------------------------ ENCARGO DEL 24 DE AGOSTO DE 2026 (segunda tanda) — «burbuja» ------------------------------------------------------------ El propietario sube una carpeta nueva de referencias (`inspo/`: Realexa, solar, Relax.IO, Home Zone y A.forest) y pide, literal: el mismo diseño manteniendo la estructura, más imágenes, más imágenes de fondo, más diseño, otros colores, estilo «moderno y burbuja», sin tocar estructura ni textos, y arreglar el Hero, «que la foto no está bien puesta», armonizándolo con los heros de la inspiración. Lo que eso significa aquí, y lo que se desvía de `docs/09`: 1 · PALETA NUEVA. Fuera el terracota. Entra el VERDE DE OBRA (#1f5c3d) sobre papel crema, y un verde profundo (#143226) como fondo de página. Es la paleta de A.forest, que es la referencia más «burbuja» de las cinco. 2 · GEOMETRÍA DE BURBUJA. `docs/09` §3 fija radios de 8 a 16 px y prohíbe círculos y píldoras. La referencia es lo contrario: paneles de 22-38 px, botones cápsula y avatares redondos. Se aplica POR ORDEN EXPRESA. No se hereda a otro cliente. 3 · PÁGINA EN PANELES FLOTANTES. Cada bloque del esqueleto se convierte en un panel redondeado que flota sobre el verde. Ni un bloque se añade, se quita ni se reordena: es la misma secuencia de siempre, con otra carrocería. 4 · FOTOGRAFÍA DE FONDO. Seis bloques y siete tarjetas llevan ahora foto de ambiente bajo un velo del papel que les toca. El velo nunca baja del 97 % donde puede caer texto. 5 · TIPOGRAFÍA. Sigue el maridaje del encargo anterior (Newsreader + Public Sans), también fuera de `docs/09` §1. El H1 baja de 72 a 64 px: con la foto del Hero ya cuadrada, 72 px obligaba a estirar la imagen y era justo lo que había que arreglar. ============================================================ */ /* ============================================================ 1 · TIPOGRAFÍA AUTOALOJADA · maridaje de autor Sin Google Fonts por CDN: 0 peticiones a terceros (LCP + RGPD). ============================================================ */ /* --- TITULARES: NEWSREADER variable --- Serif editorial de contraste medio con eje OPSZ (tamano optico): el dibujo de la letra CAMBIA segun el cuerpo, no se limita a escalar. 24 ago 2026 (5.a tanda) · ESPACIO DE DISENO RECORTADO. Los .woff2 venian con los dos ejes al completo (wght 200-800, opsz 6-72). Un variable de dos ejes guarda deltas para el espacio ENTERO, y este archivo se precarga: 132 KB en la ruta critica. La web solo pinta la serif en wght 600 y 700 y en opsz 16 y 60, asi que los ejes se han recortado a wght 400-700 y opsz 16-60 (el 400 se conserva porque es la posicion por defecto del eje y no se puede mover). 132 -> 86 KB en latin y 87 -> 55 KB en latin-ext, con los contornos intactos: la desviacion maxima en los cuatro pares que usa la web es de 1,4 unidades sobre 2000 de em, o sea 0,04 px a 64 px de cuerpo. El descriptor `font-weight` de abajo baja de `200 800` a `400 700` para que coincida con lo que el fichero trae. */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/newsreader-latin.woff2?v=20260824g') 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: 'Newsreader'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/newsreader-latin-ext.woff2?v=20260824g') 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; } /* --- CUERPO Y ACCIONES: PUBLIC SANS variable --- */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/publicsans-latin.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: 'Public Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/publicsans-latin-ext.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; } :root { /* ============================================================ 2 · PAPEL Y FONDO DE PÁGINA La novedad de esta edición: el papel ya no llega al borde de la ventana. Debajo hay un VERDE PROFUNDO que se ve como marco entre panel y panel. Es lo que convierte la pila de secciones en una pila de burbujas. ============================================================ */ --page: #143226; /* verde de fondo · solo se ve en los márgenes */ --page-2: #0f2820; --bg-1: #fbf9f4; /* papel crema · bloque impar */ --bg-2: #f1eee4; /* papel crema tostado · bloque par */ --bg-3: #e4dfd2; /* superficies hundidas */ --bg-card: #fffefb; /* tarjetas: un punto por encima del fondo */ --bg-dark: #12291f; /* verde tinta · bloque 8 (Garantía) y footer */ --bg-dark-2: #1b3a2c; /* superficies dentro del bloque oscuro */ /* Los mismos papeles en componentes, para montar velos sobre foto. */ --rgb-bg-1: 251, 249, 244; --rgb-bg-2: 241, 238, 228; --rgb-bg-card: 255, 254, 251; --rgb-bg-dark: 18, 41, 31; /* ============================================================ 3 · TINTA — verde muy oscuro, no negro Todos los pares verificados con `scripts/contraste.py`. ============================================================ */ --text-heading: #14231c; /* 15,5:1 sobre --bg-1 */ --text-body: #4b5a52; /* 6,9:1 */ --text-muted: #5a695f; /* 5,5:1 sobre --bg-1 · 5,0:1 sobre --bg-2 */ --text-faint: #5a695f; --text-on-dark: #f2f5f0; --text-on-dark-muted: #a8bcaf; /* Filetes milimétricos, en tinta verde translúcida */ --border: rgba(20, 35, 28, 0.11); --border-solid: #e2ded1; --border-strong: #c9c6b8; --border-dark: rgba(242, 245, 240, 0.14); --ghost-number: #e6e2d6; /* números gigantes 01/02/03 */ /* ============================================================ 4 · ACENTO ESTRUCTURAL — tinta, no color ============================================================ */ --accent: #14231c; --accent-600: #26382e; --accent-soft: rgba(20, 35, 28, 0.055); --accent-softer: rgba(20, 35, 28, 0.028); --accent-ring: rgba(31, 92, 61, 0.24); --accent-fade: rgba(20, 35, 28, 0); --accent-halo: rgba(20, 35, 28, 0.07); --accent-halo-strong: rgba(216, 184, 120, 0.22); /* ============================================================ 5 · ACENTO DE CONVERSIÓN — el único color saturado de la web VERDE DE OBRA. Blanco encima: 7,91:1 (AAA). Hover: 10,61:1. Si algo lleva este verde, es que hay que pulsarlo. ============================================================ */ --cta: #1f5c3d; --cta-hover: #17472f; --cta-contrast: #ffffff; --cta-soft: rgba(31, 92, 61, 0.10); --cta-ring: rgba(31, 92, 61, 0.30); --cta-fade: rgba(31, 92, 61, 0); --cta-glow: rgba(23, 71, 47, 0.28); --cta-glow-strong: rgba(23, 71, 47, 0.38); /* Compatibilidad: el resto del CSS sigue nombrando `--accent-cta*`. */ --accent-cta: var(--cta); --accent-cta-hover: var(--cta-hover); --accent-contrast: var(--cta-contrast); /* Latón apagado: sello de garantía y estrellas. Matiz, no color de marca. */ --gold: #a87326; --gold-bright: #d8b878; --gold-soft: rgba(168, 115, 38, 0.10); --gold-ring: rgba(168, 115, 38, 0.26); --gold-ink: #7a5318; --star: #a87326; /* ============================================================ 6 · ÍNDICE Y FILETES — la firma que sí se conserva ============================================================ */ --rule: rgba(20, 35, 28, 0.12); --rule-strong: rgba(20, 35, 28, 0.24); --rule-dark: rgba(242, 245, 240, 0.16); --indice-rule: 30px; /* ============================================================ 7 · TEXTURA ============================================================ */ --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --noise-opacity: 0.030; --noise-opacity-dark: 0.050; /* Aspa de la micro-copia de riesgo (3.ª tanda, ver §H2). Se usa como máscara, así que el color lo pone `currentColor`: la cruz va en la tinta del párrafo, nunca en rojo. */ --icon-aspa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); --grid-line: rgba(20, 35, 28, 0.04); --grid-size: 56px; --grid-line-fine: rgba(20, 35, 28, 0.05); --grid-size-fine: 22px; /* ============================================================ 8 · DEGRADADOS — ahora con un punto de verde, no de gris ============================================================ */ --grad-hero: radial-gradient(1100px 620px at 6% -14%, rgba(31, 92, 61, 0.10), transparent 62%), radial-gradient(900px 540px at 96% 2%, rgba(168, 115, 38, 0.07), transparent 60%), linear-gradient(168deg, #f3f1e8 0%, #fbf9f4 62%); --grad-cta: radial-gradient(860px 470px at 12% 0%, rgba(31, 92, 61, 0.10), transparent 60%), radial-gradient(760px 470px at 90% 20%, rgba(168, 115, 38, 0.07), transparent 62%), linear-gradient(180deg, #fbf9f4 0%, #f1eee4 100%); --grad-dark: radial-gradient(800px 470px at 10% 2%, rgba(216, 184, 120, 0.12), transparent 62%), radial-gradient(700px 480px at 95% 98%, rgba(31, 92, 61, 0.34), transparent 62%), linear-gradient(180deg, #12291f 0%, #1a3628 100%); --grad-magnet: radial-gradient(760px 400px at 90% 0%, rgba(31, 92, 61, 0.09), transparent 62%), radial-gradient(600px 360px at 0% 100%, var(--gold-soft), transparent 60%), linear-gradient(180deg, #fffefb 0%, #eeebe0 100%); /* Marca de agua del Hero (3.ª tanda): el isotipo de la cubierta, en latón sobre el verde. Es lo que convierte la burbuja verde de relleno en una placa de marca. */ --marca-agua: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23d8b878' stroke-opacity='0.5' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17 16 7.4 27 17'/%3E%3Cpath d='M5 25.6h22'/%3E%3Cpath d='M16 20.6v5'/%3E%3C/svg%3E"); /* Burbuja verde del Hero: la tarjeta pequeña que acompaña a la foto. */ --grad-burbuja: linear-gradient(to right, rgba(216, 184, 120, 0.16) 1px, transparent 1px), linear-gradient(to bottom, rgba(216, 184, 120, 0.16) 1px, transparent 1px), radial-gradient(120% 120% at 18% 12%, rgba(216, 184, 120, 0.22), transparent 58%), linear-gradient(150deg, #235f42 0%, #16362a 100%); /* ============================================================ 9 · CRISTAL — más opaco que en la edición anterior, porque ahora hay FOTO debajo de casi todas las superficies de cristal y el texto no puede perder contraste. ============================================================ */ /* 3.ª tanda: sobre el verde profundo del fondo de página, un cristal al 86 % dejaba la cápsula de la cabecera en un sage apagado, no en crema. Sube a 0,94 (0,97 al pegarse): la barra vuelve a leerse como papel flotando sobre el verde, que es lo que pedían las referencias. */ --glass-bg: rgba(251, 249, 244, 0.94); --glass-bg-stuck: rgba(251, 249, 244, 0.97); --glass-bg-strong: rgba(251, 249, 244, 0.97); --glass-border: rgba(255, 255, 255, 0.72); --glass-blur: saturate(150%) blur(14px); --glass-blur-deep: saturate(150%) blur(20px); /* ============================================================ 10 · ESCALA TIPOGRÁFICA ============================================================ */ --font-serif: 'Newsreader', 'Iowan Old Style', 'Hoefler Text', Georgia, 'Times New Roman', serif; --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Ejes variables de Newsreader remapeados a OPSZ, conservando los dos nombres de token que consumen global.css y bloques.css. */ --wonk-display: 'opsz' 60; --wonk-sub: 'opsz' 16; /* El H1 baja de 72 a 64 px: ver nota 5 de la cabecera del archivo. */ --fs-h1: clamp(2.375rem, 1.35rem + 4.1vw, 4rem); /* 38 → 64 px */ --fs-h2: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); /* 30 → 48 px */ --fs-h3: clamp(1.1875rem, 1.11rem + 0.38vw, 1.375rem); /* 19 → 22 px */ --fs-lead: clamp(1.125rem, 1.05rem + 0.34vw, 1.3125rem); /* 18 → 21 px */ --fs-body: clamp(1rem, 0.98rem + 0.12vw, 1.0625rem); /* 16 → 17 px · NUNCA < 16px */ --fs-small: clamp(0.875rem, 0.86rem + 0.09vw, 0.9375rem);/* 14 → 15 px */ --fs-micro: 0.75rem; /* 12 px · rótulos */ --lh-tight: 1.06; --lh-heading: 1.14; --lh-body: 1.68; --ls-tight: -0.02em; --ls-serif: -0.016em; --ls-wide: 0.14em; --fw-body: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ============================================================ 11 · ESPACIADO + reglas de composición física ============================================================ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 96px; --safe-margin: 24px; --gap-titular-sub: var(--sp-6); --gap-cta: clamp(48px, 4.5vw, 64px); --section-pad: clamp(72px, 9vw, 112px); --container: 1200px; --container-pad: clamp(20px, 5vw, 40px); --measure: 66ch; --measure-h1: 16ch; /* EL MARCO: cuánto verde se ve alrededor de cada panel y entre panel y panel. Es la medida que define toda la edición burbuja. */ --marco: clamp(6px, 1.1vw, 16px); --marco-gap: clamp(6px, 1.1vw, 16px); /* ============================================================ 12 · FORMA · BURBUJA (desviación de docs/09 §3, por orden expresa) La edición anterior iba de 8 a 16 px y prohibía círculos y píldoras. Las referencias de `inspo/` van justo al revés: paneles muy redondeados, botones cápsula y avatares redondos. Se aplica entero, porque a medias no se lee como el estilo pedido: quedaría una plantilla recta con las esquinas un poco más blandas. ============================================================ */ --radius-panel: clamp(22px, 2.8vw, 38px); /* el panel de bloque */ --radius-panel-in: clamp(16px, 2vw, 26px); /* piezas grandes dentro */ --radius-xl: 30px; /* contenedores grandes */ --radius-card: 24px; /* tarjetas */ --radius-md: 18px; /* sub-elementos dentro de tarjeta */ --radius-sm: 14px; --radius-btn: 999px; /* CÁPSULA */ --radius-pill: 999px; /* chips y rótulos */ --radius-round: 999px; /* avatares, nodos y chevrones */ /* ============================================================ 13 · SOMBRAS — teñidas de verde, no de gris ============================================================ */ --shadow-xs: 0 1px 2px rgba(20, 35, 28, 0.04); --shadow-sm: 0 10px 24px -12px rgba(20, 35, 28, 0.11), 0 1px 2px rgba(20, 35, 28, 0.03); --shadow-card: 0 18px 40px -20px rgba(20, 35, 28, 0.09); --shadow-hover: 0 34px 62px -14px rgba(20, 35, 28, 0.12), 0 3px 8px -4px rgba(20, 35, 28, 0.06); --shadow-float: 0 45px 85px -24px rgba(20, 35, 28, 0.16), 0 12px 28px -18px rgba(20, 35, 28, 0.09); --shadow-glass: 0 25px 50px -18px rgba(20, 35, 28, 0.12); --shadow-panel: 0 30px 70px -34px rgba(6, 20, 14, 0.55); --shadow-cta: 0 12px 28px -10px var(--cta-glow), 0 1px 2px rgba(11, 46, 30, 0.18); --shadow-cta-hover: 0 18px 34px -10px var(--cta-glow-strong), 0 1px 2px rgba(11, 46, 30, 0.22); --shadow-cta-compact:0 8px 18px -8px var(--cta-glow), 0 1px 2px rgba(11, 46, 30, 0.16); /* ============================================================ 14 · OTROS ============================================================ */ --tap-min: 56px; --header-h: 72px; --sticky-h: 64px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ############################################################ CAPA «BURBUJA» — encargo del 24 ago 2026 (segunda tanda) A partir de aquí no hay tokens: hay REGLAS. Todas viven en este archivo, ninguna toca `global.css` ni `bloques.css`, y todas ganan por especificidad a las suyas (prefijo `body`, doble clase o `#id`), porque los otros dos CSS se cargan DESPUÉS que este. El esqueleto de 10 bloques, su orden y sus textos: intactos. ############################################################ */ /* ============================================================ A · LA PÁGINA EN PANELES FLOTANTES El papel deja de llegar al borde de la ventana. Debajo hay verde, y cada bloque del esqueleto es una burbuja redondeada apoyada sobre él. Es el recurso central de `inspo/` (A.forest y Realexa). ============================================================ */ html { background-color: var(--page); } html body { background-color: var(--page); background-image: radial-gradient(900px 600px at 8% 0%, rgba(31, 92, 61, 0.45), transparent 60%), radial-gradient(700px 500px at 100% 100%, rgba(168, 115, 38, 0.13), transparent 62%); background-attachment: fixed; } /* Cada bloque, una burbuja. `isolation` monta un contexto de apilado propio: así los adornos de fondo pueden ir a z-index negativo y quedar POR ENCIMA del fondo del panel y POR DEBAJO del texto. */ body > .section { margin: var(--marco-gap) var(--marco) 0; border-radius: var(--radius-panel); overflow: hidden; isolation: isolate; box-shadow: var(--shadow-panel); } /* El pie es la última burbuja, y por debajo vuelve a verse el verde. */ body > .site-footer { margin: var(--marco-gap) var(--marco); border-radius: var(--radius-panel); overflow: hidden; box-shadow: var(--shadow-panel); } @media (max-width: 767px) { /* Con la barra fija abajo, el margen inferior del pie sobra. */ body > .site-footer { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } /* ============================================================ B · CABECERA · barra cápsula flotando sobre el verde Sigue siendo `sticky` y sigue siendo la misma navegación de 4 anclas. Cambia la carrocería: cápsula, filete completo y aire verde alrededor. ============================================================ */ body .site-header { top: var(--marco-gap); margin: var(--marco-gap) var(--marco) 0; border: 1px solid var(--glass-border); border-radius: var(--radius-round); box-shadow: var(--shadow-glass); } body .site-header.is-stuck { border-color: var(--border); box-shadow: var(--shadow-float); } body .site-header__inner { min-height: var(--header-h); } /* Con la cabecera ya flotando, el primer panel no necesita separarse otra vez: se pega al aire que deja la cápsula. */ body > .section:first-of-type { margin-top: var(--marco-gap); } /* ============================================================ C · HERO · «arregla el hero, que la foto no está bien puesta» QUÉ PASABA. La edición anterior sacaba la foto a sangre contra el borde derecho de la ventana y la estiraba a la altura completa del bloque (92svh). La foto de origen es 3:2 apaisada; forzada a una columna vertical de ~560×760, `object-fit: cover` se comía casi la mitad del ancho y dejaba un recorte central sin salón, sin ventanal y sin suelo. Se veía un trozo de sofá ampliado. QUÉ SE HACE AHORA, siguiendo los heros de `inspo/` (A.forest): el Hero es un panel con DOS BURBUJAS dentro. A la izquierda, la tarjeta de conversión (mismo titular, mismo subtitular, mismos dos CTA y misma micro-copia: no se toca ni una palabra). A la derecha, una rejilla fotográfica: la foto principal en 4:3 —que recorta un 11 % del ancho en vez de un 45 %— y debajo dos burbujas más, una verde y una segunda fotografía. Ya no hay sangrado: con la página en paneles, salir por el borde derecho de la ventana sería salirse de la burbuja. ============================================================ */ .hero.hero--placa { padding-top: clamp(28px, 3.4vw, 48px); padding-bottom: clamp(28px, 3.4vw, 48px); background-image: var(--grad-hero); } .hero.hero--placa .hero__grid { gap: clamp(28px, 4.5vw, 44px); } /* Los dos CTA del Hero se rompen a dos filas en cuanto no caben a lo ancho, en vez de encogerse hasta partir la etiqueta en tres renglones (a 320 px cada botón se quedaba en 128 px). Es el mismo criterio que ya aplica `global.css` al cambiar a la etiqueta corta: «tres líneas dentro de un botón, no». Doble clase para ganarle a `bloques.css`. */ .hero.hero--placa .cta-group--par > .btn { flex: 1 1 340px; } /* --- La rejilla fotográfica de la derecha --- */ .hero.hero--placa .hero__media { display: grid; grid-template-columns: 1.18fr 1fr; grid-template-rows: auto minmax(84px, auto); gap: var(--sp-3); margin-inline: 0; min-width: 0; } .hero.hero--placa .hero__foto { grid-column: 1 / -1; grid-row: 1; display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 58%; border-radius: var(--radius-panel-in); box-shadow: var(--shadow-card); } /* Las dos burbujas de apoyo. En `bloques.css` el `::before` de `.hero__media` es una sombra difusa absoluta: aquí se reconvierte en pieza de rejilla (`position: static`, sin `filter`). */ .hero.hero--placa .hero__media::before, .hero.hero--placa .hero__media::after { content: ""; display: block; position: static; inset: auto; grid-row: 2; min-height: 84px; filter: none; border-radius: var(--radius-panel-in); box-shadow: var(--shadow-card); background-repeat: no-repeat; background-position: center; background-size: cover; } .hero.hero--placa .hero__media::before { grid-column: 1; /* 3.ª tanda: encima de la retícula, el isotipo como marca de agua. */ background-image: var(--marca-agua), var(--grad-burbuja); /* La retícula milimetrada de la plantilla, aquí en latón sobre verde: sin ella la burbuja era un degradado plano al lado de dos fotos. */ background-size: clamp(96px, 46%, 180px) auto, 26px 26px, 26px 26px, auto, auto; background-position: center, center, center, center, center; /* FLECO CERRADO (3.ª tanda). La regla común de las dos burbujas fija `background-repeat: no-repeat` para las fotos, y eso alcanzaba también a las dos líneas de la retícula: en vez de una cuadrícula se dibujaba UNA sola cruz suelta en el centro de la burbuja verde, que es lo que se veía como una marca perdida. Las dos primeras capas vuelven a repetirse; las dos de degradado, no. */ background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat; /* Mismo canto de luz que llevan los paneles: la burbuja deja de ser un rectángulo verde y pasa a ser una pieza del mismo sistema. */ box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(216, 184, 120, 0.18); } .hero.hero--placa .hero__media::after { grid-column: 2; background-image: url("../img/amb/amb-cocina-01.webp"); } /* --- Escritorio: dos burbujas a la misma altura --- */ @media (min-width: 1000px) { .hero.hero--placa .hero__grid { grid-template-columns: 1.08fr 1fr; align-items: stretch; gap: var(--sp-5); min-height: min(660px, calc(84svh - var(--header-h))); } /* La columna de texto pasa a ser TARJETA: es lo que hace que el Hero se lea como dos burbujas y no como texto suelto al lado de una foto. El contenido va centrado en vertical. */ .hero.hero--placa .hero__texto { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 3vw, 46px); background-color: var(--bg-card); background-image: radial-gradient(120% 90% at 6% 0%, rgba(31, 92, 61, 0.07), transparent 58%); border: 1px solid var(--border); border-radius: var(--radius-panel-in); box-shadow: var(--shadow-card); } /* La fila de abajo absorbe la altura sobrante, así la foto NUNCA se estira más allá de su 4:3. Ese es el arreglo. */ .hero.hero--placa .hero__media { grid-template-rows: auto minmax(clamp(96px, 12vh, 170px), 1fr); } .hero.hero--placa .hero__foto { aspect-ratio: 4 / 3; object-position: 50% 55%; } /* Los dos CTA dejan de compartir fila DENTRO de la tarjeta del Hero. `bloques.css` los reparte con `flex: 1 1 0` para que vayan siempre en una sola fila, y con la columna de texto ya convertida en tarjeta eso dejaba 235 px por botón: «Pedir presupuesto por WhatsApp» partía en tres renglones. Es el mismo caso que ya contempla `global.css` cuando cambia a la etiqueta corta por debajo de 620 px —«tres líneas dentro de un botón, no»—, solo que aquí ni la etiqueta corta cabe. Cada uno a su fila y a ancho completo: una línea, y es además lo que hacen los heros de `inspo/`. Doble clase para ganarle en especificidad a `bloques.css`, que se carga después. */ .hero.hero--placa .cta-group--par > .btn { flex: 1 1 100%; } } /* En móvil el titular es lo primero; la tarjeta con padding comería ancho de pantalla, así que ahí el texto va suelto sobre el panel. */ @media (max-width: 999px) { .hero.hero--placa .hero__texto { padding: 0; background: none; border: 0; box-shadow: none; } } /* ============================================================ D · FOTOGRAFÍA DE FONDO · «pon más imágenes de fondo» Regla de contraste que no se salta ninguna de estas reglas: el velo de papel NUNCA baja del 95 % allí donde puede caer texto de cuerpo o atenuado. Solo se abre (hasta el 80 %) en el espacio negativo que queda por debajo de las tarjetas, que son opacas. Con el velo al 95 % sobre --bg-1, el peor píxel posible de la foto deja --text-muted en 4,7:1: por encima del umbral AA. Las fotos son CC0 de Openverse (rawpixel), la misma procedencia y la misma desviación de `docs/09` §6 ya documentada en el informe de entrega. Inventario y origen: `brief/imagenes/CREDITOS.md`. ============================================================ */ /* --- Bloque 01 · Dolor. Una vivienda vacía recién descargada de obra: el "antes" del problema que cuenta el bloque. --- */ body #dolor { background-color: var(--bg-2); background-image: linear-gradient(180deg, rgba(var(--rgb-bg-2), 0.990) 0%, rgba(var(--rgb-bg-2), 0.985) 34%, rgba(var(--rgb-bg-2), 0.820) 100%), url("../img/amb/fondo-obra.webp"); background-size: cover; background-position: center 30%; background-repeat: no-repeat; } /* --- Bloque 04 · Servicios. Cocina terminada bajo la rejilla. --- */ body #servicios { background-color: var(--bg-2); background-image: linear-gradient(180deg, rgba(var(--rgb-bg-2), 0.990) 0%, rgba(var(--rgb-bg-2), 0.985) 32%, rgba(var(--rgb-bg-2), 0.820) 100%), url("../img/amb/fondo-cocina.webp"); background-size: cover; background-position: center 40%; background-repeat: no-repeat; } /* --- Bloque 05 · Proceso. Aquí el texto de los tres pasos va suelto sobre el fondo, sin tarjeta. 3.ª tanda · FLECO CERRADO: la rampa iba del 98,5 % al 96 %, y a 96 % una foto de interior con ventanales no se lee como textura: se le reconocen el marco de la ventana y las lámparas, y en un bloque sin tarjetas eso queda como manchas sueltas por detrás del texto. Los bloques SIN tarjeta pasan a velo plano al 98,8 %: la foto aporta profundidad y ya no dibuja objetos. Los bloques CON tarjeta (01, 03 y 10) mantienen la rampa: ahí la foto se abre en el espacio negativo, que es su sitio. --- */ body #proceso { background-color: var(--bg-1); background-image: linear-gradient(180deg, rgba(var(--rgb-bg-1), 0.990) 0%, rgba(var(--rgb-bg-1), 0.986) 100%), url("../img/amb/fondo-salon.webp"); background-size: cover; background-position: center 55%; background-repeat: no-repeat; } /* --- Bloque 07 · Galería. Los pies de foto van sobre el fondo y las dos piezas grandes ya son fotografía: aquí el fondo tiene que callarse del todo o compite con el comparador. Velo plano (3.ª tanda). --- */ body #galeria { background-color: var(--bg-1); background-image: linear-gradient(180deg, rgba(var(--rgb-bg-1), 0.992) 0%, rgba(var(--rgb-bg-1), 0.988) 100%), url("../img/amb/fondo-luz.webp"); background-size: cover; background-position: center 45%; background-repeat: no-repeat; } /* --- Bloque 09 · FAQs. Mismo caso: acordeón sin tarjeta, mismo velo plano de la 3.ª tanda. --- */ body #faqs { background-color: var(--bg-1); background-image: linear-gradient(180deg, rgba(var(--rgb-bg-1), 0.990) 0%, rgba(var(--rgb-bg-1), 0.986) 100%), url("../img/amb/amb-salon-01.webp"); background-size: cover; background-position: center 20%; background-repeat: no-repeat; } /* --- Bloque 08 · Garantía. El único bloque oscuro, y el único donde el velo es de tinta verde en vez de papel. 3.ª tanda · FLECO CERRADO: iba del 93 % al 86 %, y a 86 % la foto dejaba de ser atmósfera para ser contenido —se leían las sillas, la planta y el ventanal por detrás del párrafo de la garantía, que es el texto más importante de la web—. Sube al 97,5 % → 94,5 %: la foto se intuye como profundidad y el texto vuelve a mandar. Al cerrar el velo el contraste solo puede subir: el compuesto se acerca al token, que ya cumple AA por sí solo. --- */ body #garantia { background-color: var(--bg-dark); background-image: radial-gradient(800px 470px at 10% 2%, rgba(216, 184, 120, 0.14), transparent 62%), radial-gradient(760px 520px at 96% 98%, rgba(31, 92, 61, 0.40), transparent 64%), linear-gradient(180deg, rgba(var(--rgb-bg-dark), 0.975) 0%, rgba(var(--rgb-bg-dark), 0.962) 45%, rgba(var(--rgb-bg-dark), 0.945) 100%), url("../img/amb/fondo-oscuro.webp"); background-size: auto, auto, auto, cover; background-position: center, center, center, center 60%; background-repeat: no-repeat; } /* --- Bloque 10 · CTA final. Doble velo: el del bloque y el de la tarjeta de cristal que va encima, donde vive todo el texto. --- */ body #cta-final { background-color: var(--bg-1); background-image: radial-gradient(860px 470px at 12% 0%, rgba(31, 92, 61, 0.10), transparent 60%), linear-gradient(180deg, rgba(var(--rgb-bg-1), 0.940) 0%, rgba(var(--rgb-bg-2), 0.890) 100%), url("../img/amb/fondo-salon.webp"); background-size: auto, auto, cover; background-position: center, center, center 50%; background-repeat: no-repeat; } /* ============================================================ E · FOTOGRAFÍA DENTRO DE LAS TARJETAS Las dos tarjetas anchas del bento de Servicios llevan una banda de foto pegada al canto derecho, como las fichas de `inspo/`. El velo es OPACO hasta 210 px del borde y la tarjeta gana un `padding-right` mayor que ese margen: el texto no puede llegar nunca a la foto. ============================================================ */ @media (min-width: 1000px) { .servicios .servicio:nth-child(1), .servicios .servicio:nth-child(4) { padding-right: clamp(168px, 18vw, 236px); background-repeat: no-repeat; background-size: cover; background-position: right center; } .servicios .servicio:nth-child(1) { background-image: linear-gradient(90deg, rgba(var(--rgb-bg-card), 1) 0%, rgba(var(--rgb-bg-card), 1) calc(100% - 208px), rgba(var(--rgb-bg-card), 0.20) calc(100% - 168px), rgba(var(--rgb-bg-card), 0) calc(100% - 150px)), url("../img/amb/fondo-luz.webp"); } /* 3.ª tanda · las dos bandas se reasignan por lo que DICE la tarjeta: la 1 («Tu casa entera, terminada y limpia») pasa a un salón acabado y con luz, y la 4 («Tu local abierto y facturando antes») al único ambiente del inventario que se lee como LOCAL —banco corrido, ventanal y pared de ladrillo—, en vez del sillón de oficina que llevaba antes. También se estrecha la fundida de la banda de 72 a 58 px: con 72 la foto entraba en el papel como un borrón. */ .servicios .servicio:nth-child(4) { background-image: linear-gradient(90deg, rgba(var(--rgb-bg-card), 1) 0%, rgba(var(--rgb-bg-card), 1) calc(100% - 208px), rgba(var(--rgb-bg-card), 0.20) calc(100% - 168px), rgba(var(--rgb-bg-card), 0) calc(100% - 150px)), url("../img/amb/fondo-salon.webp"); } } /* La tercera tarjeta del bloque 01 es la SALIDA, y es oscura: aquí la foto entra como textura bajo un velo de tinta verde. */ .dolor .dolor__col--salida { background-image: linear-gradient(155deg, rgba(var(--rgb-bg-dark), 0.960) 0%, rgba(var(--rgb-bg-dark), 0.905) 100%), url("../img/amb/amb-bano-01.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } /* La reseña destacada del bloque 03. 3.ª tanda · FLECO CERRADO: aquí había una foto de baño a `cover` bajo un velo del 96,5 %. En una tarjeta de 620 × 740 px la foto no se leía como textura sino como un borrón —se distinguían el espejo y una banda oscura contra el canto izquierdo— justo debajo del testimonio. Y además insinuaba que esa foto era la obra de Marta L., que es una afirmación que nadie puede sostener. Se sustituye por un lavado del mismo verde, sin foto: la jerarquía la da el tamaño de la tarjeta y la comilla del final, no una imagen prestada. */ @media (min-width: 900px) { .prueba .opinion:first-child { background-image: radial-gradient(120% 90% at 4% 100%, rgba(31, 92, 61, 0.055), transparent 62%), radial-gradient(90% 70% at 96% 0%, rgba(168, 115, 38, 0.05), transparent 60%); background-repeat: no-repeat; } } /* Bloque 06 · Lead magnet. La foto sube por el ángulo superior derecho, por detrás de la caja de acción. Esa caja se opaca del 86 % al 95 % para que el texto no pierda contraste sobre la foto. */ .magnet { background-image: linear-gradient(210deg, rgba(var(--rgb-bg-1), 0.780) 0%, rgba(var(--rgb-bg-card), 0.980) 46%, rgba(var(--rgb-bg-card), 1) 100%), url("../img/amb/amb-salon-02.webp"); background-size: cover; background-position: right top; background-repeat: no-repeat; } .magnet .magnet__accion { background-color: rgba(var(--rgb-bg-card), 0.95); border-radius: var(--radius-panel-in); } /* Bloque 10 · la tarjeta de cristal del CTA final, con su propia foto por debajo del cristal. Va doblemente velada (bloque + cristal). */ .cta-final .cta-final__caja { background-image: linear-gradient(165deg, rgba(var(--rgb-bg-1), 0.930) 0%, rgba(var(--rgb-bg-1), 0.960) 100%), url("../img/amb/amb-cocina-03.webp"); background-size: cover; background-position: center 60%; background-repeat: no-repeat; box-shadow: var(--shadow-float), inset 0 0 0 5px rgba(31, 92, 61, 0.045); } /* ============================================================ F · ACABADO BURBUJA · lo que convierte los radios en un estilo `docs/09` §3 dice, literal, que en esta plantilla no hay círculos ni píldoras. Las cinco referencias de `inspo/` son exactamente lo contrario, y el encargo pide «ese estilo moderno y burbuja». Se aplica por ORDEN EXPRESA y NO se hereda a la siguiente web. Lo que NO se ha tocado, aunque el estilo lo pidiera: la regla de que solo el botón lleva color saturado. En las referencias los iconos van en cápsulas de color; aquí siguen en tinta. Con seis chips de color compitiendo, el verde del CTA deja de ser una señal y pasa a ser decoración, que es justo lo que no queremos. ============================================================ */ /* --- Anillo interior de luz en cada panel: el canto que hace que la burbuja parezca un objeto y no un rectángulo pintado. --- */ body > .section { box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, 0.55); } body > .section.section--dark, body > .site-footer { box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, 0.07); } /* --- La palabra marcada del H1. Era un filete recto a regla; ahora es la cápsula de acento de las referencias. Mismo texto. --- */ body .mark { padding: 0.06em 0.34em 0.1em; margin-inline: -0.16em; border-radius: var(--radius-round); background: var(--cta-soft); box-shadow: inset 0 0 0 1px var(--cta-ring); } body .mark::after { content: none; } /* --- Botones y chips: cápsula --- */ body .btn--compact { border-radius: var(--radius-round); } body .sticky-cta a { border-radius: var(--radius-round); } body .mockup__titulo, body .dolor__etiqueta, body .magnet__sello, body .sello, body .comparador__etq, body .comparador__tirador { border-radius: var(--radius-round); } /* --- Redondos: avatares, nodos, chevrones e iconos --- */ body .opinion__foto { border-radius: var(--radius-round); } body .paso__nodo { border-radius: var(--radius-round); } body .faq__chevron { border-radius: var(--radius-round); } body .servicio__icono-caja { border-radius: var(--radius-round); } body .magnet__check { border-radius: var(--radius-round); } body .rotulo-vivo__punto, body .mockup__puntos span { border-radius: var(--radius-round); } body .prueba__grid::-webkit-scrollbar-thumb { border-radius: var(--radius-round); } /* --- Piezas grandes: el radio del panel interior --- */ body .garantia__grid, body .magnet, body .cta-final__caja, body .comparador { border-radius: var(--radius-panel-in); } /* --- Las tarjetas se despegan un poco más al pasar el ratón: es el gesto «burbuja» de las referencias, dentro de la duración y la curva que ya usaba la plantilla. --- */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { body .dolor__col:hover, body .opinion:hover, body .servicio:hover { transform: translateY(-6px); } } /* --- El grano de la maqueta se mantiene, pero el fondo verde de la página ya no lo necesita: encima del verde se ve como suciedad. Se recorta a los paneles dejándolo en el `body` a opacidad baja, que es donde estaba calibrado. --- */ body::after { opacity: var(--noise-opacity); } /* ============================================================ G · AJUSTES FINOS POR ANCHO Verificado sobre 320 · 380 · 560 · 768 · 940 · 1100 · 1440. ============================================================ */ /* Por debajo de 400px el marco verde se come ancho de lectura: se estrecha al mínimo y el radio baja para no comerse las esquinas del contenido. */ @media (max-width: 399px) { :root { --marco: 5px; --marco-gap: 5px; --radius-panel: 20px; } body .site-header__inner { min-height: 64px; } } /* A partir de 1440px el marco crece un punto: con la ventana muy ancha, 16px de verde alrededor de 1200px de papel se pierden. */ @media (min-width: 1440px) { :root { --marco: 22px; --marco-gap: 20px; } } /* ############################################################ H · REFINADO Y ARMONÍA — encargo del 24 ago 2026 (3.ª tanda) Petición literal: «arregla y armoniza todo, me gusta pero hay flecos y cosas sin terminar de definir todavía, mejora el diseño y refínalo». No es un rediseño: la edición «burbuja» se queda tal cual. Es el ACABADO. Cada regla de aquí abajo cierra un cabo suelto concreto que se ve en la web publicada, y dice cuál. Ni un bloque nuevo, ni uno menos, ni reordenado, y ni una palabra de copy tocada. Sigue sin tocarse `global.css` ni `bloques.css`. ############################################################ */ /* ------------------------------------------------------------ H1 · EL ÍNDICE PEGAJOSO SE PARABA DEBAJO DE LA CABECERA `global.css` lo fija a `--header-h + 24px`, que era correcto cuando la cabecera empezaba en el borde de la ventana. Ahora la cápsula flota a `--marco-gap` del borde, así que el índice se quedaba a 8 px de ella, casi pegado. Se le suma el marco. ------------------------------------------------------------ */ @media (min-width: 900px) { body .section__head--rail > .indice { top: calc(var(--header-h) + var(--marco-gap) + var(--sp-8)); } } /* ------------------------------------------------------------ H2 · LA CRUZ DE LA MICRO-COPIA DE RIESGO El copy de reversión de riesgo empieza, literalmente, por «❌». Como emoji, cada sistema la pinta a su manera: en Windows y Android sale un aspa ROJA de color pleno —el único color saturado de la web tiene que ser el del botón (`docs/09` §2)— y en un equipo sin fuente de emoji no sale nada, dejando la línea con una sangría fantasma. Aquí no se cambia el texto: el carácter sigue en el HTML, envuelto en un ``, y se dibuja como aspa de 2 px en la MISMA tinta del párrafo, heredando `currentColor`. ------------------------------------------------------------ */ @supports ((-webkit-mask-image: url("#m")) or (mask-image: url("#m"))) { body .risk__x { display: inline-block; /* En `rem`, no en `em`: el propio `font-size: 0` que oculta el emoji dejaría el aspa en 0 × 0 si la caja se midiera en `em`. */ width: 0.85rem; height: 0.85rem; margin-right: 0.2rem; /* `middle` y no un desplazamiento en `em`: con `font-size: 0` la caja se alinearía por su borde inferior y colgaría sobre la línea siguiente. */ vertical-align: middle; font-size: 0; /* el emoji queda oculto: debajo va el aspa */ background-color: currentColor; opacity: 0.85; -webkit-mask: var(--icon-aspa) center / contain no-repeat; mask: var(--icon-aspa) center / contain no-repeat; } } /* ------------------------------------------------------------ H3 · BLOQUE 01 · LOS NÚMEROS FANTASMA CHOCABAN CON EL TITULAR `.ghost` va arriba a la derecha y `bloques.css` reserva 2,4 rem de guardia en el h3. Con Newsreader a 72 px, «01» mide unos 75 px: «El problema, sin rodeos» se montaba encima de la cifra. Y las tres tarjetas se estiran a la más alta, así que la primera cerraba con un hueco muerto de 200 px. Las dos cosas se arreglan con el mismo gesto: la cifra baja al pie de la tarjeta, en su propia banda, como el folio de una página. ------------------------------------------------------------ */ body .dolor__col { position: relative; padding-bottom: clamp(72px, 6.4vw, 92px); } body .dolor__col h3 { padding-right: 0; } body .dolor__col .ghost, body .dolor__col--salida .ghost { top: auto; bottom: clamp(14px, 1.6vw, 20px); right: clamp(22px, 2.2vw, 30px); font-size: clamp(46px, 4.8vw, 64px); line-height: 0.82; } /* ------------------------------------------------------------ H4 · BLOQUE 02 · EL HUECO DE LA RESEÑA DESTACADA La reseña destacada ocupa dos filas de la rejilla, y el testimonio de Marta L. no llega a llenarlas: quedaban 380 px de papel en blanco entre el texto y el sello de «Reseña verificada». Se cierra con la comilla de cierre a cuerpo grande, en el mismo gris fantasma que ya usan los números del bloque 01. Es tipografía del propio sistema, no un adorno nuevo, y no afirma nada. ------------------------------------------------------------ */ @media (min-width: 900px) { body .prueba .opinion:first-child { position: relative; overflow: hidden; } body .prueba .opinion:first-child::after { content: "”"; /* Con texto alternativo vacío, para que el lector de pantalla no cante una comilla suelta: es el mismo criterio que el `aria-hidden="true"` de los números fantasma del bloque 01. La declaración anterior queda de respaldo donde no se soporte. */ content: "”" / ""; position: absolute; right: clamp(24px, 2.4vw, 38px); bottom: clamp(-46px, -3.4vw, -30px); z-index: 0; font-family: var(--font-serif); font-variation-settings: var(--wonk-display); font-size: clamp(150px, 14vw, 210px); font-weight: var(--fw-bold); line-height: 1; color: var(--ghost-number); user-select: none; pointer-events: none; } /* El texto de la reseña, por delante de la comilla. */ body .prueba .opinion:first-child > * { position: relative; z-index: 1; } } /* ------------------------------------------------------------ H5 · BLOQUE 06 · LA CAJA DE ACCIÓN FLOTABA EN MITAD DEL PANEL `bloques.css` centra en vertical las dos columnas del lead magnet. Con la columna izquierda a 700 px de alto y la caja de acción a 300, la caja quedaba suspendida en el centro, con hueco arriba y abajo y sin apoyarse en nada. Ahora la caja ocupa la altura de su columna y es su CONTENIDO el que va centrado: misma pieza, mismo texto, pero ya es un panel y no un recorte flotando. ------------------------------------------------------------ */ @media (min-width: 940px) { body .magnet { align-items: stretch; } body .magnet .magnet__accion { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } body .magnet .magnet__accion .cta-group { width: 100%; } /* Y lo que sobra de columna, después de la micro-copia, lo ocupa una foto de ambiente con el radio interior de la casa. Antes ese hueco era papel en blanco; ahora la caja de acción es una pieza entera, de arriba abajo. La foto va DEBAJO de todo el texto: no hay letra apoyada en ella. */ body .magnet .magnet__accion::after { content: ""; flex: 1 1 auto; align-self: stretch; min-height: 150px; margin-top: var(--sp-8); border-radius: var(--radius-md); background-image: url("../img/amb/amb-cocina-02.webp"); background-size: cover; background-position: center 62%; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px var(--border); } } /* El botón del lead magnet partía «Solicitar mi tabla de precios gratis» en dos renglones dentro de la cápsula: 17 px con 40 px de aire lateral no cabían en los 358 px útiles de la caja. Baja a 16 px y se le ajusta el aire; sigue por encima de los 56 px de alto y por encima del mínimo de 16 px de cuerpo. */ body .magnet__accion .btn { padding-inline: var(--sp-5); font-size: 1rem; } /* ------------------------------------------------------------ H6 · LA BARRA FIJA DE MÓVIL, DENTRO DEL LENGUAJE «BURBUJA» Era la única pieza de la web que seguía siendo un rectángulo a sangre con esquinas vivas, pegado al borde de la pantalla, con los dos CTA cosidos por un filete de 1 px. Sobre una página hecha de paneles flotantes se leía como un resto de otra maqueta. Pasa a ser lo mismo que la cabecera: dos cápsulas flotando sobre el verde, con el mismo marco lateral que los paneles. ------------------------------------------------------------ */ @media (max-width: 767px) { body .sticky-cta { left: var(--marco); right: var(--marco); bottom: calc(var(--marco-gap) + env(safe-area-inset-bottom, 0px)); gap: var(--sp-2); padding-bottom: 0; background: transparent; box-shadow: none; transform: translateY(calc(100% + var(--marco-gap) + 24px)); } body .sticky-cta.is-visible { transform: translateY(0); } body .sticky-cta a { border-radius: var(--radius-round); box-shadow: var(--shadow-float); } body .sticky-cta__wa { box-shadow: var(--shadow-cta), var(--shadow-float); } body .sticky-cta__tel { border: 1px solid var(--border-strong); } /* Con la barra ya flotando, el pie recupera su margen y sus dos esquinas redondeadas: era el único panel cortado en seco. */ body > .site-footer { margin-bottom: calc(var(--sticky-h) + var(--marco-gap)); border-bottom-left-radius: var(--radius-panel); border-bottom-right-radius: var(--radius-panel); } body { padding-bottom: env(safe-area-inset-bottom, 0px); } } /* ------------------------------------------------------------ H7 · EL PIE · CUATRO COLUMNAS QUE NO CUADRABAN La columna de contacto lleva horario, zonas, radio de visita y la nota de datos registrales; con 1,1 fr se partía en once renglones y colgaba 400 px por debajo de las otras tres. Se reparte el ancho a favor de la que tiene texto y se le da aire entre párrafos. El contenido es exactamente el mismo. ------------------------------------------------------------ */ @media (min-width: 1040px) { body .site-footer__grid { grid-template-columns: 1.25fr 0.72fr 1.42fr 1.05fr; } } body .site-footer__datos + p { line-height: 1.85; } body .site-footer__sellos { gap: var(--sp-2) var(--sp-2); } /* Los sellos eran la última esquina viva del pie. */ body .sello { border-radius: var(--radius-round); padding-inline: var(--sp-4); } /* ------------------------------------------------------------ H8 · PÁGINAS LEGALES Y «GRACIAS» Heredaban la columna de 800 px pegada al canto izquierdo de un panel de 1.400: media página de crema vacía a la derecha, que es justo lo que se ve como «sin terminar». La columna se centra en el panel —el texto sigue alineado a la izquierda, que es como se lee un documento— y el bloque recibe el mismo lavado de color que el resto de la edición para que no sea el único papel plano. ------------------------------------------------------------ */ body .legal { margin-inline: auto; } body main > .section:first-of-type:not(.hero) { background-image: radial-gradient(900px 520px at 12% 0%, rgba(31, 92, 61, 0.07), transparent 62%), radial-gradient(700px 420px at 92% 4%, rgba(168, 115, 38, 0.055), transparent 60%); } /* El «volver» de las páginas legales, en cápsula: es el único botón que llevan y era un enlace suelto en verde. */ body .legal .volver { padding: 14px var(--sp-6); border-radius: var(--radius-round); border: 1px solid var(--cta-ring); background: var(--cta-soft); } body .legal .volver:hover { text-decoration: none; background: rgba(31, 92, 61, 0.16); } /* ############################################################ CAPA DE MOVIMIENTO — encargo del 24 ago 2026 (CUARTA tanda) Encargo literal: «añade animaciones y dinamismo a la página». DESVIACIÓN DECLARADA. `docs/01` §5 y la casilla D9 de `docs/08-CHECKLIST-QA.md` prohíben, con esas palabras, las «animaciones de entrada al hacer scroll». Aquí se aplican POR ORDEN EXPRESA del propietario. NO se heredan a la siguiente web de cliente sin volver a pedirlas. Reglas que se ha impuesto la capa para no romper nada de lo demás: 1 · SOLO `opacity`, `translate`, `transform` y `clip-path`. Nada que obligue al navegador a recalcular el layout. Cero animaciones de `width`, `height`, `top` o `background-position`. 2 · SE USA `translate:` (la propiedad independiente), NO `transform:`. Así el desplazamiento de entrada y el `translateY` de hover que ya traía `bloques.css` no se pisan: cada uno tiene su propia propiedad y su propia duración. 3 · EL ESTADO OCULTO VIVE DENTRO DE `@media (prefers-reduced-motion: no-preference)`. Es la parte crítica: `global.css` mata con `!important` toda animación y transición cuando el usuario pide menos movimiento. Si el `opacity: 0` viviera fuera del media query, ese usuario se encontraría media web invisible. Con esta estructura, quien pide menos movimiento no llega ni a tener estado oculto. 4 · EL ESTADO OCULTO ESTÁ ADEMÁS DETRÁS DE `html.js-anim`, clase que pone un script de una línea en el ``. Sin JavaScript (o sin `IntersectionObserver`) no hay nada que revele los bloques, así que tampoco hay nada escondido: la web se ve entera, quieta. Degradación limpia. 5 · EL HERO NO SE OCULTA. Es el LCP y lo ve el 100 % del tráfico: entra con una animación de carga, no con una de scroll, y la foto se anima SOLO con `transform` (nunca con `opacity`, que retrasaría la medición del LCP). 6 · Ni un color nuevo, ni un radio nuevo, ni una pieza nueva. El esqueleto de 10 bloques, su orden y sus textos: intactos. ############################################################ */ :root { /* Tres duraciones, no diez. */ --mo-rapida: 200ms; --mo-media: 420ms; --mo-larga: 640ms; /* Dos curvas. La de aterrizaje suave para casi todo; la de rebote corto solo donde algo tiene que «caer en su sitio» (nodos del proceso y cuño de garantía). */ --mo-salida: cubic-bezier(0.16, 0.84, 0.34, 1); --mo-rebote: cubic-bezier(0.34, 1.4, 0.5, 1); /* Cuánto sube cada pieza al aparecer, y el escalón del desfase. */ --mo-alza: 20px; --mo-escalon: 80ms; } /* ============================================================ I1 · ENTRADA AL HACER SCROLL El observador de `index.html` añade `.rv-in` a cada pieza la primera vez que asoma. Después deja de observarla: la animación ocurre una sola vez y no vuelve al bajar y subir. ============================================================ */ @media (prefers-reduced-motion: no-preference) { html.js-anim body :is( .section__head, .dolor__col, .opinion, .servicio, .paso, .magnet, .magnet__bullets > li, .par, .garantia__grid, .faq, .cta-final__caja, .site-footer__grid > * ) { opacity: 0; translate: 0 var(--mo-alza); } html.js-anim body :is( .section__head, .dolor__col, .opinion, .servicio, .paso, .magnet, .magnet__bullets > li, .par, .garantia__grid, .faq, .cta-final__caja, .site-footer__grid > * ).rv-in { opacity: 1; translate: none; transition: opacity var(--mo-larga) var(--mo-salida) var(--mo-desfase, 0ms), translate var(--mo-larga) var(--mo-salida) var(--mo-desfase, 0ms); } /* Desfase EN REJILLA, no en lista. Las piezas que entran juntas se escalonan; las de una columna larga (los 8 FAQs) no, porque cada una ya entra en su momento y encadenarlas se leería como retraso. */ html.js-anim body :is( .dolor__grid, .prueba__grid, .servicios__grid, .proceso__grid, .galeria__grid, .magnet__bullets, .site-footer__grid ) > *:nth-child(2) { --mo-desfase: var(--mo-escalon); } html.js-anim body :is( .dolor__grid, .prueba__grid, .servicios__grid, .proceso__grid, .galeria__grid, .magnet__bullets, .site-footer__grid ) > *:nth-child(3) { --mo-desfase: calc(var(--mo-escalon) * 2); } html.js-anim body :is( .servicios__grid, .magnet__bullets, .site-footer__grid ) > *:nth-child(4) { --mo-desfase: calc(var(--mo-escalon) * 3); } html.js-anim body .servicios__grid > *:nth-child(5) { --mo-desfase: calc(var(--mo-escalon) * 4); } html.js-anim body .servicios__grid > *:nth-child(6) { --mo-desfase: calc(var(--mo-escalon) * 5); } /* La rejilla de opiniones es carril con scroll-snap por debajo de 720px: ahí el desfase vertical sobra y la tarjeta que asoma por el canto tiene que verse desde el principio. */ @media (max-width: 719px) { html.js-anim body .prueba__grid > * { --mo-desfase: 0ms; } } } /* ============================================================ I2 · EL HERO ENTRA AL CARGAR, NO AL HACER SCROLL Lo ve el 100 % del tráfico y es el LCP. Escalonado de arriba a abajo en el orden en que se lee: titular, subtítulo, botones, reversión de riesgo. ============================================================ */ @media (prefers-reduced-motion: no-preference) { body .hero__texto > * { animation: mo-sube var(--mo-larga) var(--mo-salida) backwards; } body .hero__texto > *:nth-child(1) { animation-delay: 80ms; } body .hero__texto > *:nth-child(2) { animation-delay: 200ms; } body .hero__texto > *:nth-child(3) { animation-delay: 320ms; } body .hero__texto > *:nth-child(4) { animation-delay: 440ms; } /* La foto principal: SOLO transform. Si aquí hubiera un fundido de opacidad, Chrome no contaría el elemento como pintado hasta el final de la animación y el LCP se iría al garete. Un acercamiento del 3,5 % no cuesta LCP y da la sensación de placa que se asienta; más que eso se saldría del hueco de rejilla mientras dura. */ body .hero__foto { animation: mo-placa 1000ms var(--mo-salida) backwards; } /* Las dos burbujas de apoyo NO son el LCP, así que esas sí pueden fundirse. Entran detrás de la foto grande, de izquierda a derecha. */ body .hero.hero--placa .hero__media::before { animation: mo-sube 620ms var(--mo-salida) 380ms backwards; } body .hero.hero--placa .hero__media::after { animation: mo-sube 620ms var(--mo-salida) 480ms backwards; } /* La retícula técnica del fondo del Hero y del CTA final se revela después del texto, para que no compita con el titular. */ body .grid-bg::before { animation: mo-aparece 1200ms var(--mo-salida) 260ms backwards; } /* LA PALABRA MARCADA DEL H1 («8 semanas»). La cápsula de acento se pinta de izquierda a derecha, como un rotulador, 700 ms después de que el titular esté en su sitio. Es el único momento de la página en el que el color de conversión se mueve. */ body .hero h1 .mark { position: relative; z-index: 0; background: transparent; box-shadow: none; } body .hero h1 .mark::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius-round); background: var(--cta-soft); box-shadow: inset 0 0 0 1px var(--cta-ring); transform-origin: left center; animation: mo-rotulador 560ms var(--mo-salida) 700ms backwards; } } @keyframes mo-sube { from { opacity: 0; translate: 0 22px; } } @keyframes mo-placa { from { transform: scale(1.035); } } @keyframes mo-aparece { from { opacity: 0; } } @keyframes mo-rotulador { from { transform: scaleX(0); } } /* ============================================================ I3 · BARRA DE PROGRESO DE LECTURA EN LA CABECERA Un filete de 2 px dentro de la cápsula que se llena conforme baja la página. CERO JavaScript: es una animación con línea de tiempo de scroll. Donde el navegador no la soporta, el `@supports` deja la cabecera exactamente como estaba. ============================================================ */ @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { body .site-header::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 7px; height: 2px; border-radius: var(--radius-round); background: var(--cta); opacity: 0.5; transform: scaleX(0); transform-origin: left center; pointer-events: none; animation: mo-progreso linear both; animation-duration: auto; /* obligatorio con línea de tiempo de scroll */ animation-timeline: scroll(root block); } body .site-header.is-cta-hidden::after { opacity: 0.7; } } } @keyframes mo-progreso { to { transform: scaleX(1); } } /* ============================================================ I4 · LOS BOTONES · el elemento más importante de la página Tres capas, y ninguna añade color nuevo: destello que barre, hundido al pulsar y latido del ring en el botón principal. ============================================================ */ body .btn { position: relative; overflow: hidden; isolation: isolate; } /* El destello. Un barrido blanco al 22 % que cruza el botón al pasar el ratón, y solo en el botón primario: en el secundario, sobre cristal, se vería como una mancha. */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { body .btn--primary::after { content: ""; position: absolute; top: -60%; bottom: -60%; left: -55%; width: 34%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: skewX(-16deg); translate: 0 0; pointer-events: none; } body .btn--primary:hover::after { animation: mo-destello 720ms var(--mo-salida); } } @keyframes mo-destello { from { translate: 0; } to { translate: 480% 0; } } /* Hundido al pulsar. `bloques.css` ya devolvía el botón a su sitio en `:active`; esto añade el punto de compresión que hace que el toque se sienta en el dedo, que es lo que se pide en móvil. */ body .btn:active { transform: translateY(0) scale(0.978); } body .sticky-cta a:active { transform: scale(0.975); } /* LATIDO DEL BOTÓN PRINCIPAL. Es el mismo gesto que `global.css` ya usaba para el punto del rótulo en vivo —un anillo que se abre y se desvanece—, aquí sobre la sombra propia del botón. Va SOLO en los dos botones que sostienen la conversión: el del Hero y el del lead magnet. Ponerlo en los cinco lo convertiría en decoración. Por qué en la sombra del propio botón y no en un pseudo-elemento: el botón lleva `overflow: hidden` para poder recortar el destello, y eso recortaría también el anillo de un `::before`. La sombra de un elemento no la recorta su propio `overflow`. Al pasar el ratón la animación se apaga entera (`animation: none`), no se pausa: pausada seguiría ganándole a la sombra de `:hover` y el botón no reaccionaría al ratón. */ @media (prefers-reduced-motion: no-preference) { body .hero .btn--primary, body .magnet .btn--xl { animation: mo-latido-cta 3.6s var(--mo-salida) 1.2s infinite; } body .hero .btn--primary:hover, body .magnet .btn--xl:hover { animation: none; } } @keyframes mo-latido-cta { 0%, 100% { box-shadow: var(--shadow-cta), inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 0 0 0 var(--cta-ring); } 60% { box-shadow: var(--shadow-cta), inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 0 0 13px var(--cta-fade); } } /* El icono acompaña. Ligerísimo: 2 px y 6 grados. */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { body .btn svg { transition: transform var(--mo-rapida) var(--mo-salida); } body .btn:hover svg { transform: translateX(2px) rotate(-6deg); } body .btn--secondary:hover svg { transform: rotate(-10deg) scale(1.06); } } /* ============================================================ I5 · MICROINTERACCIONES BLOQUE A BLOQUE Ninguna se inventa un gesto nuevo: todas prolongan el `translateY` de hover que la maqueta ya tenía en las tarjetas. ============================================================ */ /* — Bloque 4 · el icono del servicio gira y crece dentro de su caja — */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { body .servicio__icono-caja { transition: transform var(--mo-media) var(--mo-rebote), background-color var(--mo-media) var(--mo-salida); } body .servicio:hover .servicio__icono-caja { transform: rotate(-7deg) scale(1.09); } /* — Bloque 2 · el número fantasma se asoma un punto — */ body .dolor__col .ghost { transition: transform var(--mo-larga) var(--mo-salida), opacity var(--mo-larga) var(--mo-salida); } body .dolor__col:hover .ghost { transform: translateY(-6px) scale(1.04); } /* — Bloque 7 · el par de fotos se despega como las tarjetas — */ body .par .comparador { transition: transform var(--mo-media) var(--mo-salida), box-shadow var(--mo-media) var(--mo-salida); } body .par:hover .comparador { transform: translateY(-5px); box-shadow: var(--shadow-hover); } /* — La marca de la cabecera — */ body .site-header__brand { transition: transform var(--mo-media) var(--mo-rebote); } body .site-header__brand:hover { transform: scale(1.03); } } /* — Bloque 5 · los tres pasos se montan solos: primero el nodo con rebote, después la flecha que empuja hacia el siguiente paso — */ @media (prefers-reduced-motion: no-preference) { body .paso.rv-in .paso__nodo { animation: mo-nodo 560ms var(--mo-rebote) backwards; animation-delay: calc(var(--mo-desfase, 0ms) + 180ms); } body .paso.rv-in .paso__flecha { animation: mo-flecha 620ms var(--mo-salida) backwards; animation-delay: calc(var(--mo-desfase, 0ms) + 320ms); } body .paso.rv-in .paso__icono { animation: mo-sube 560ms var(--mo-salida) backwards; animation-delay: calc(var(--mo-desfase, 0ms) + 260ms); } } @keyframes mo-nodo { from { opacity: 0; transform: scale(0.5); } } @keyframes mo-flecha { from { opacity: 0; translate: -14px 0; } } /* — Bloque 8 · el cuño de garantía se estampa. Es el único bloque oscuro y el que frena el scroll: se merece el único gesto con rebote y giro de toda la página. — */ @media (prefers-reduced-motion: no-preference) { body .garantia__grid.rv-in .garantia__sello { animation: mo-cuno 760ms var(--mo-rebote) 220ms backwards; } } @keyframes mo-cuno { from { opacity: 0; transform: scale(1.22) rotate(-8deg); } } /* — Bloque 6 · el sello «sin registros» y los tres checks — */ @media (prefers-reduced-motion: no-preference) { body .magnet.rv-in .magnet__sello { animation: mo-sube 520ms var(--mo-salida) 300ms backwards; } body .magnet__bullets > li.rv-in .magnet__check { animation: mo-nodo 520ms var(--mo-rebote) backwards; animation-delay: calc(var(--mo-desfase, 0ms) + 140ms); } } /* — Bloque 9 · el FAQ se despliega en vez de dar el salto seco que hace `
` por defecto. El `+` que gira a `×` ya lo hacía `bloques.css`; lo que faltaba era el cuerpo. — */ @media (prefers-reduced-motion: no-preference) { body .faq[open] .faq__cuerpo { animation: mo-despliega 340ms var(--mo-salida); } } @keyframes mo-despliega { from { opacity: 0; translate: 0 -8px; } } /* — La barra fija de móvil sube un poco más despacio de lo que subía (300 ms → 420 ms): es la única pieza de la web que aparece sin que el usuario la pida, y entrando de golpe se leía como un banner. Curva de aterrizaje, NO de rebote: la de rebote se pasa de su posición final y deja ver una franja de página por debajo del canto inferior de la ventana. — */ body .sticky-cta { transition: transform 420ms var(--mo-salida); } /* — El tirador del comparador respira mientras nadie lo toca, para que se lea como agarrable. Se apaga en cuanto se usa (la clase la quita el script del comparador). — */ @media (prefers-reduced-motion: no-preference) { body .comparador.mo-vivo .comparador__tirador { animation: mo-agarre 2.4s var(--mo-salida) 6; } } @keyframes mo-agarre { 0%, 100% { box-shadow: var(--shadow-float), 0 0 0 0 var(--cta-ring); } 55% { box-shadow: var(--shadow-float), 0 0 0 9px var(--cta-fade); } }