/* ═══════════════════════════════════════════════════════════════════════════ PIEL v4 «Fuego y agua» — EMBUDO Y HERRAMIENTAS (2026-09-22) /elige · /es-agua · /en-tu-mueble · /plantilla · /muebles/ · /muebles/m03 (+ hojas y lámina) · /empieza · /reveal. Solo piel y estructura visual: el copy no cambia. Solo tokens de firecool.css (:root); ni un hex. Cada página lleva una clase e4-* en para que estas reglas no pinten fuera de su grupo; las páginas sin header (plantilla, hojas, lámina) se reconocen por su clase de siempre. Al cerrar la piel, esto se funde en firecool.css. Donde un selector viejo pinta encima (los de la capa «PIEL v4» llevan !important), se gana con !important y se anota. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 0. Comunes del grupo ─────────────────────────────────────────────── */ body[class*="e4-"] { background: var(--bg); color: var(--fg); } /* Botón secundario: pastilla vacía con borde de tinta; hover se rellena de tinta (DESIGN button-secondary). !important: .asis-salida-cta y .camino-cta llegan en brasa desde la capa PIEL v4. */ .header-cta, .plantilla-btn--ghost, .revela-btn, .sel-btn, .asis-salida-cta, .empieza-cta, .hueco-btn.hueco-btn--hecho, .res-hero + .res-hero .res-cta, .kit-dlg-x, .e4-otra-via .camino-cta--ghost { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 52px; padding: 0 28px; border-radius: var(--r-pill) !important; border: 2px solid var(--fg) !important; background: transparent !important; color: var(--fg) !important; font-family: var(--ff-sans) !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none; line-height: 1; cursor: pointer; box-shadow: none; transform: none; transition: background-color var(--dur-1) var(--ease-in-out), color var(--dur-1) var(--ease-in-out); } .header-cta:hover, .plantilla-btn--ghost:hover, .revela-btn:hover, .sel-btn:hover, .asis-salida-cta:hover, .empieza-card:hover .empieza-cta, .hueco-btn.hueco-btn--hecho:hover, .res-hero + .res-hero .res-cta:hover, .kit-dlg-x:hover, .e4-otra-via .camino-cta--ghost:hover { background: var(--fg) !important; color: var(--bg) !important; transform: none; } /* Botón principal: la brasa, solo en comprar/avanzar (DESIGN button-primary) */ .plantilla-btn, .hueco-btn, .res-cta, .etq-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 52px; padding: 0 28px; margin: 0; border-radius: var(--r-pill); border: 2px solid var(--fg); background: var(--accent); color: var(--accent-fg); box-shadow: var(--canto); font-family: var(--ff-sans); font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; text-decoration: none; line-height: 1; cursor: pointer; transition: background-color var(--dur-1) var(--ease-in-out), box-shadow var(--dur-1) var(--ease-in-out), transform var(--dur-1) var(--ease-in-out); } .plantilla-btn:hover, .hueco-btn:hover, .res-cta:hover, .etq-btn:hover { background: var(--accent-hover); color: var(--accent-fg); box-shadow: var(--canto-sm); transform: translate(2px, 2px); } /* Etiqueta (DESIGN label-tag): avisos, estados y notas → brasa-suave, borde 2 px, radio 8, canto */ .hoja-aviso, .hoja-aire, .hueco-aire, .hueco-nada, .fm-pruebas, .plantilla-cab-pruebas, .revela-nota, body[class*="e4-"] .lead-ok, body[class*="e4-"] .lead-error, .kit-dlg .lead-ok { background: var(--accent-soft); color: var(--fg); border: 2px solid var(--fg); border-radius: var(--r-1); box-shadow: var(--canto); padding: var(--s-4) var(--s-5); max-width: 60ch; font-family: var(--ff-sans); font-size: 15px; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none; opacity: 1; } body[class*="e4-"] .lead-error { border-color: var(--error); margin-top: var(--s-4); } body[class*="e4-"] .lead-ok a, .kit-dlg .lead-ok a, .plantilla .lead-ok a, .mu-kit .lead-ok a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; } /* Etiquetas de formulario y pies de figura: Manrope 700, caja mixta (las mayúsculas se van) */ body[class*="e4-"] .lead-label, .sel-campo label, .hueco-campo label, .hoja-fig figcaption, .landing-video figcaption, .revela-capa figcaption, .plantilla-hojas, .hoja-para, .mu-mas, .mu-tarjeta-id, .etq-que, .etq-hueco, .mu-detalle-h, .mu-detalle-l, .res-nombre, .res-fila-nombre, .hoja-a3-cab, .hoja-a3-pie, .hoja-a3-t, .hoja-a3-h2, .lam-wordmark, .lam-cab-linea, .lam-cab-meta, .lam-vista figcaption, .lam-tabla th, .mu-tabla thead th, .fm-tabla thead th, .hoja-cotas dd, .landing-lecturas dd, .empieza-n, .mu-tarjeta-leer, .mu-chim-cta, .asis-card-flag { font-family: var(--ff-sans); font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; line-height: 1.3; } body[class*="e4-"] .lead-label { opacity: 1; margin-bottom: var(--s-3); } /* Cifras: Manrope 800 tabular */ .hoja-cotas dt, .landing-lecturas dt, .mu-detalle-v, .hueco-mejor-precio, .res-precio, .res-fila-precio, .mu-chim-precio, .hueco-input input, .dibujo .dib-cota text, .tec-cota text, .lam-codigo { font-family: var(--ff-cifra); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* Titulares que la capa PIEL v4 no alcanza (spans, legends, h3/h4 con clase propia): Bricolage, caja mixta */ .asis-q, .asis-res-h, .asis-salida-h, .asis-salidas-h, .res-linea, .res-fila-linea, .hueco-res-h, .hueco-mejor-nombre, .fm-h, .fm-h3, .plantilla-h, .hoja-h, .mu-tarjeta-h, .mu-tuyo-h, .mu-cierre-h, .mu-chim-h, .mu-kit-h, .empieza-h, .confianza-h, .etq-nombre, .etq-nombre-mote, .lam-h1, .lam-h2, .landing-h, .landing-h-l--acento { font-family: var(--ff-display); text-transform: none; letter-spacing: -0.015em; font-weight: 700; color: var(--fg); } .hoja-h, .plantilla-h, .landing-h, .etq-nombre { font-size: var(--fs-h1); font-weight: 800; line-height: 1; letter-spacing: -0.02em; max-width: 14ch; } .fm-h, .asis-res-h, .hueco-res-h, .mu-tuyo-h, .mu-cierre-h, .mu-kit-h, .confianza-h, .lam-h1, .asis-salidas-h { font-size: var(--fs-h2); line-height: 1.1; } .asis-q, .fm-h3, .asis-salida-h, .res-linea, .hueco-mejor-nombre, .mu-tarjeta-h, .mu-chim-h, .empieza-h, .etq-nombre-mote, .lam-h2, .asis-res-h--menor { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; } .res-fila-linea { font-size: 17px; line-height: 1.2; } /* Campos: pastilla con borde de tinta, foco en agua (DESIGN input) */ .sel select, .hueco-input, body[class*="e4-"] .lead-input { height: 52px; padding: 0 var(--s-6); background: var(--bg); color: var(--fg); border: 2px solid var(--fg); border-radius: var(--r-pill); font-family: var(--ff-sans); font-weight: 500; font-size: 16px; } .sel select:focus-visible, .hueco-input:focus-within, body[class*="e4-"] .lead-input:focus-visible { border-color: var(--focus); outline: none; } /* Paneles de vapor (DESIGN panel-vapor) */ .asis-paso, .asis-salida, .mu-etq, .mu-kit, .e4-vapor-panel, .kit-dlg-caja, .confianza-lista li, .mu-tuyo--panel { background: var(--vapor-200); color: var(--fg); border-radius: var(--r-2); } /* Bandas de agua (DESIGN banda-agua): cifras y bloques de marca */ .hoja-cotas, .landing-lecturas, .mu-detalle-dato, .e4-banda { background: var(--bg-agua); color: var(--fg-agua); } /* Tarjeta con canto (DESIGN card-product): misma anatomía que .h4-card */ .asis-opt-caja, .res-hero, .res-fila-a, .mu-tarjeta-a, .mu-chim, .hueco-mejor, .kit-dlg-caja, .hoja-fig, .revela-plano { background: var(--bg); color: var(--fg); border: 2px solid var(--fg); border-radius: var(--r-2); box-shadow: var(--canto-lg); transition: box-shadow var(--dur-1) var(--ease-in-out), transform var(--dur-1) var(--ease-in-out), background-color var(--dur-1) var(--ease-in-out), color var(--dur-1) var(--ease-in-out); } .res-fila-a:hover, .mu-tarjeta-a:hover, .mu-chim:hover, .asis-opt-caja:hover { box-shadow: var(--canto-sm); transform: translate(3px, 3px); border-color: var(--fg); } /* Fotos y vídeos con marco (DESIGN Imagen: sobre crema, las fotos de noche llevan marco y canto) */ .landing-video video, .revela-capa--encendida img, .mu-detalle-foto img, .mu-galeria .product-gallery-main, .lam-render, .empieza-img, .plantilla-vista svg, .mu-arma-marco { border: 2px solid var(--fg); border-radius: var(--r-2); box-shadow: var(--canto-lg); background: var(--agua-900); } /* Nada de «→» ni rayas decorativas (DESIGN anti-patrones) */ .res-fila-ir { display: none; } .hoja-cotas > div, .acto-lecturas > div, .mu-detalle-dato, .confianza-lista li, .fm-tabla th, .fm-tabla td, .fm-ferr li, .hueco-lista li, .mu-tuyo, .mu-tarjeta-a, .mu-cierre, .etq-hueco, .lam-pie, .lam-lista li, .hoja-a3-pie { border-top: 0; border-bottom: 0; } /* ─── 1. /elige — el asistente por hueco ───────────────────────────────── */ .e4-elige .asis { background: var(--bg); color: var(--fg); padding-block: var(--s-10) var(--s-section); } /* cabecera sticky en flujo (contenido.css): nada que compensar, solo aire */ .e4-elige .asis-h { font-size: var(--fs-h1); font-weight: 800; line-height: 1; letter-spacing: -0.02em; max-width: 14ch; } .e4-elige .asis-p { font-size: var(--fs-lead); color: var(--fg-2); max-width: 48ch; } .e4-elige .asis-head-in > :last-child { margin-bottom: var(--s-8); } /* barra de pasos: agua para lo recorrido, crema hundida para lo que queda */ .e4-elige .asis-punto { width: 44px; height: 8px; border-radius: var(--r-pill); background: var(--crema-300); } .e4-elige .asis-punto.is-activo { background: var(--agua-700); } .e4-elige .asis-punto:not(:disabled):hover { background: var(--agua-500); } /* cada paso, un panel de vapor */ .e4-elige .asis-paso { padding: clamp(24px, 3vw, 40px); } .e4-elige .asis-q { float: left; width: 100%; margin: 0 0 var(--s-6); padding: 0; } /* un se sale del relleno del fieldset: flotado se queda dentro */ .e4-elige .asis-opts { clear: both; } .e4-elige .asis-opts { gap: var(--s-5); } /* las opciones: tarjetas con borde y canto; la activa se rellena de tinta */ .e4-elige .asis-opt-caja { padding: clamp(20px, 2vw, 28px); gap: var(--s-4); box-shadow: var(--canto); } .e4-elige .asis-opt-picto { width: 40px; height: 40px; } .e4-elige .asis-opt-txt { font-family: var(--ff-sans); font-weight: 700; font-size: 16px; line-height: 1.3; } .e4-elige .asis-opt-clave { color: var(--fg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .e4-elige .asis-opt input:checked + .asis-opt-caja { background: var(--fg); border-color: var(--fg); color: var(--bg); box-shadow: var(--canto-sm); transform: translate(3px, 3px); } .e4-elige .asis-opt input:checked + .asis-opt-caja .asis-opt-clave, .e4-elige .asis-opt input:checked + .asis-opt-caja .asis-opt-picto { color: var(--accent-soft); } .e4-elige .asis-opt input:focus-visible + .asis-opt-caja { outline: 3px solid var(--focus); outline-offset: 3px; } .e4-elige .asis-atras { color: var(--fg); font-family: var(--ff-sans); font-size: 15px; text-underline-offset: 4px; } /* el resultado: tarjeta de producto v4 (anatomía de .h4-card) */ .e4-elige .asis-res { margin-top: var(--s-6); } .e4-elige .asis-res-h { margin: 0 0 var(--s-6); } .e4-elige .res-hero { padding: 0; overflow: hidden; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0; } .e4-elige .res-ideales--3 .res-hero, .e4-elige .res-ideales--2 .res-hero { grid-template-columns: 1fr; } .e4-elige .res-hero--necesita, .e4-elige .res-hero--naranja { border-style: solid; } .e4-elige .res-hero-media { aspect-ratio: 3 / 4; max-height: none; height: 100%; background: var(--vapor-200); border-right: 2px solid var(--fg); } .e4-elige .res-ideales--3 .res-hero-media, .e4-elige .res-ideales--2 .res-hero-media { border-right: 0; border-bottom: 2px solid var(--fg); height: auto; aspect-ratio: 4 / 3; } .e4-elige .res-hero-cuerpo { padding: clamp(20px, 2vw, 28px); gap: var(--s-2); } .e4-elige .res-linea { margin: 0; } .e4-elige .res-nombre { color: var(--fg-2); font-weight: 500; min-height: 0; } .e4-elige .res-datos { font-size: 15px; color: var(--fg); min-height: 0; gap: var(--s-1); } .e4-elige .res-dato-hueco { display: inline-block; margin-top: var(--s-2); padding: var(--s-1) var(--s-3); background: var(--vapor-200); border-radius: var(--r-pill); font-weight: 700; } .e4-elige .res-compra { gap: var(--s-3); } .e4-elige .res-precio { font-size: var(--fs-h2); margin: 0; } /* el rótulo de la tarjeta («Necesita 70 cm», «También hace naranja fijo») como etiqueta v4 */ .e4-elige .asis-card-flag, .e4-elige .res-hero .asis-card-flag { top: var(--s-3); left: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-1); background: var(--accent-soft); color: var(--fg); border: 2px solid var(--fg); box-shadow: var(--canto); } .e4-elige .asis-card-flag--necesita, .e4-elige .asis-card-flag--naranja { background: var(--vapor-200); color: var(--fg); } /* los que también caben: filas-tarjeta */ .e4-elige .res-lista { gap: var(--s-4); } .e4-elige .res-fila-a { grid-template-columns: 64px minmax(0, 1fr) auto; min-height: 0; padding: var(--s-3) var(--s-4); box-shadow: var(--canto); color: var(--fg); } .e4-elige .res-fila-media { width: 64px; border-radius: var(--r-1); border: 2px solid var(--fg); background: var(--vapor-200); } .e4-elige .res-fila-nombre, .e4-elige .res-fila-dato { color: var(--fg-2); font-weight: 500; font-size: 14px; } .e4-elige .res-fila-precio { font-size: var(--fs-cifra); } .e4-elige .res-menores > .asis-res-h--menor:first-child { margin-top: 0; } .e4-elige .asis-res-h--menor { margin-top: var(--s-8); } /* las salidas: paneles de vapor con botón secundario; el «Pero…» deja de gritar */ .e4-elige .asis-salidas { gap: var(--s-5); margin-top: var(--s-8); } .e4-elige .asis-salidas--col { margin-top: 0; } .e4-elige .asis-salida { border: 0; padding: clamp(20px, 2vw, 28px); grid-template-columns: 40px minmax(0, 1fr); } .e4-elige .asis-salida-picto { color: var(--fg); } .e4-elige .asis-salida-p { color: var(--fg); } .e4-elige .asis-salidas-h { transform: none; margin: var(--s-10) 0 var(--s-4); color: var(--fg); position: static; } .e4-elige .asis-inicio { color: var(--fg); font-family: var(--ff-sans); font-size: 15px; text-underline-offset: 4px; } .e4-elige .asis-nojs { color: var(--fg); } .e4-elige .asis-nojs a { color: var(--fg); font-family: var(--ff-sans); } /* la otra vía (tres medidas exactas): banda de agua */ .e4-otra-via { padding-block: var(--s-section); } .e4-otra-via .mu-tuyo { margin-block: 0; padding-block: 0; } /* .container centra con margin auto: solo se quita el aire vertical */ .e4-otra-via .mu-tuyo-h, .e4-otra-via .mu-tuyo-p { color: var(--fg-agua); } .e4-otra-via .mu-tuyo-p { color: var(--vapor-200); } .e4-otra-via .camino-cta--ghost { border-color: var(--fg-agua) !important; color: var(--fg-agua) !important; } .e4-otra-via .camino-cta--ghost:hover { background: var(--fg-agua) !important; color: var(--agua-700) !important; } /* ─── 2. /es-agua ───────────────────────────────────────────────────────── */ .e4-agua .landing-hero { padding-block: var(--s-10) var(--s-section); } /* cabecera sticky en flujo (contenido.css): nada que compensar, solo aire */ .e4-agua .landing-grid { align-items: center; } .e4-agua .landing-video { max-width: 420px; padding: var(--s-6) 0 0 var(--s-4); } /* aire para el sello, que asoma por arriba */ .e4-agua .landing-video video { aspect-ratio: 9 / 16; } .e4-agua .landing-video figcaption { margin-top: var(--s-4); color: var(--fg-2); font-weight: 500; } /* el sello «Es agua · sin cortes», como en la home */ .e4-agua .landing-video .h4-sello { top: 0; left: -8px; right: auto; } /* el botón de sonido: pastilla con borde */ .e4-agua .video-sonido { top: var(--s-10); right: var(--s-3); width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--bg); color: var(--fg); border: 2px solid var(--fg); box-shadow: var(--canto-sm); } .e4-agua .video-sonido:hover { background: var(--fg); color: var(--bg); } .e4-agua .landing-h { margin-bottom: var(--s-6); } .e4-agua .landing-p { font-size: var(--fs-lead); max-width: 40ch; font-weight: 500; } /* las tres cifras: sobre agua, texto en crema */ .e4-agua .landing-lecturas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin: var(--s-8) 0 var(--s-8); padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-2); } .e4-agua .landing-lecturas > div { padding: 0 0 0 var(--s-4); border-left: 2px solid var(--vapor-200); } .e4-agua .landing-lecturas dt { font-size: var(--fs-h2); line-height: 1.1; white-space: normal; } .e4-agua .landing-lecturas dd { color: var(--vapor-200); font-weight: 500; margin-top: var(--s-2); } .e4-agua .landing-cta-p { margin-top: 0; } /* la mano: panel de vapor a todo el ancho, pictograma en tinta */ .e4-agua .landing-mano { padding-block: var(--s-section); background: var(--vapor-200); color: var(--fg); } .e4-agua .landing-mano .acto-inner { row-gap: var(--s-4); } .e4-agua .landing-mano .acto-h { color: var(--fg); font-size: var(--fs-h2); } .e4-agua .landing-mano .acto-p { color: var(--fg); font-size: var(--fs-lead); font-weight: 500; } .e4-agua .landing-mano .acto-picto { color: var(--fg); stroke-width: 2.5; } /* confianza: cuatro paneles de vapor en vez de cuatro rayas */ .e4-agua .confianza { padding-block: var(--s-section); } .e4-agua .confianza-h { margin-bottom: var(--s-8); } .e4-agua .confianza-lista { gap: var(--s-5); margin-bottom: var(--s-8); } .e4-agua .confianza-lista li { padding: var(--s-5); gap: var(--s-2); } .e4-agua .confianza-lista strong { font-family: var(--ff-display); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; } .e4-agua .confianza-lista span { color: var(--fg); font-size: 15px; } /* ─── 3. /en-tu-mueble ──────────────────────────────────────────────────── */ .e4-mueble .hoja { background: var(--bg); color: var(--fg); padding-block: var(--s-10) var(--s-section); } /* cabecera sticky en flujo (contenido.css): nada que compensar, solo aire */ .e4-mueble .hoja-h { margin-bottom: var(--s-4); } .e4-mueble .hoja-p { font-size: var(--fs-lead); color: var(--fg-2); max-width: 52ch; margin-bottom: var(--s-8); } .e4-mueble .sel { gap: var(--s-4); } .e4-mueble .sel-campo label { margin-bottom: var(--s-2); color: var(--fg); } .e4-mueble .sel select { font-weight: 700; appearance: none; -webkit-appearance: none; background-image: none; } .e4-mueble .hoja-para { color: var(--fg-2); margin: 0 0 var(--s-6); } .e4-mueble .hoja-aviso { margin: 0 0 var(--s-6); } /* el dibujo paramétrico: panel crema con borde y canto; líneas en tinta, cotas en Manrope */ .e4-mueble .hoja-dibujos { gap: var(--s-6); } .e4-mueble .hoja-fig { padding: clamp(16px, 2vw, 32px); background: var(--bg); } .e4-mueble .hoja-fig figcaption { margin-top: var(--s-4); color: var(--fg-2); } .e4-mueble .hoja-fig .dibujo, .e4-reveal .revela-plano .dibujo { color: var(--fg); } /* las cotas, sobre agua */ .e4-mueble .hoja-cotas { margin-top: var(--s-8); padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-2); gap: var(--s-6); } .e4-mueble .hoja-cotas > div { padding: 0 0 0 var(--s-4); border-left: 2px solid var(--vapor-200); } .e4-mueble .hoja-cotas dt { font-size: var(--fs-h2); line-height: 1.1; } .e4-mueble .hoja-cotas dd { color: var(--vapor-200); font-weight: 500; margin-top: var(--s-2); } .e4-mueble .hoja-aire { margin-top: var(--s-8); } /* piezas y montaje: banda de vapor */ .e4-mueble .ficha-mueble { background: var(--vapor-200); color: var(--fg); padding-block: var(--s-section); } .e4-mueble .fm-h { margin-bottom: var(--s-4); } .e4-mueble .fm-h3 { margin: var(--s-8) 0 var(--s-4); } .e4-mueble .fm-p { color: var(--fg); font-size: 15px; } .e4-mueble .fm-pruebas { margin-bottom: var(--s-6); } .e4-mueble .fm-tabla th, .e4-mueble .fm-tabla td { border-top: 2px solid var(--bg); padding: var(--s-3) var(--s-3) var(--s-3) 0; font-size: 15px; } .e4-mueble .fm-tabla thead th { border-top: 0; color: var(--fg-2); padding-top: 0; } .e4-mueble .fm-tabla tbody th { font-family: var(--ff-sans); font-weight: 700; } .e4-mueble .fm-tabla td:nth-child(3) { font-family: var(--ff-cifra); font-weight: 800; } .e4-mueble .fm-ferr li { border-top: 2px solid var(--bg); padding: var(--s-3) 0; font-size: 15px; } .e4-mueble .fm-ferr strong { font-family: var(--ff-cifra); font-weight: 800; } .e4-mueble .fm-ferr span { color: var(--fg-2); font-size: 14px; } .e4-mueble .pasos { gap: var(--s-4); } .e4-mueble .paso { grid-template-columns: 44px 44px minmax(0, 1fr); gap: var(--s-4); align-items: center; } .e4-mueble .paso-n { width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--bg); color: var(--fg); border: 2px solid var(--fg); font-family: var(--ff-cifra); font-weight: 800; font-size: 16px; box-shadow: var(--canto-sm); } .e4-mueble .paso-pic { width: 44px; height: 44px; color: var(--fg); } /* venía en papel-100 (crema) y sobre vapor no se veía */ .e4-mueble .paso-pic svg { width: 36px; height: 36px; stroke-width: 2; } .e4-mueble .paso-pic .pic-corte { stroke: var(--agua-500); } .e4-mueble .paso-t { padding-top: 0; font-size: 15px; } .e4-mueble .fm-notas { color: var(--fg); font-size: 15px; } /* la plantilla: crema */ .e4-mueble .plantilla { background: var(--bg); color: var(--fg); padding-block: var(--s-section); } .e4-mueble .plantilla-h { margin-bottom: var(--s-4); } .e4-mueble .plantilla-p { color: var(--fg); font-size: var(--fs-lead); max-width: 44ch; } .e4-mueble .plantilla-hojas { color: var(--fg-2); font-weight: 500; } .e4-mueble .plantilla-ver { font-family: var(--ff-sans); font-weight: 700; font-size: 15px; color: var(--fg); text-underline-offset: 4px; } .e4-mueble .lead-row { gap: var(--s-3); flex-wrap: wrap; } .e4-mueble .lead-legal { color: var(--fg-2); font-size: 14px; } /* la otra vía (nuestros muebles): banda de agua */ .e4-mueble .mu-desde-taller { background: var(--bg-agua); color: var(--fg-agua); padding-block: var(--s-section); } .e4-mueble .mu-desde-taller .mu-tuyo { margin-block: 0; padding-block: 0; } .e4-mueble .mu-desde-taller .mu-tuyo-h { color: var(--fg-agua); } .e4-mueble .mu-desde-taller .mu-tuyo-p { color: var(--vapor-200); font-size: var(--fs-lead); } .e4-mueble .mu-desde-taller .camino-cta--ghost { border-color: var(--fg-agua) !important; color: var(--fg-agua) !important; } /* la capa PIEL v4 lo pone en tinta */ .e4-mueble .mu-desde-taller .camino-cta--ghost:hover { background: var(--fg-agua) !important; color: var(--agua-700) !important; } /* «tengo mi propio hueco»: banda de vapor (era el acto amarillo) */ .e4-mueble .hueco { background: var(--vapor-200) !important; color: var(--fg) !important; padding-block: var(--s-section); } /* .acto--4 pinta agua-900 y texto crema */ .e4-mueble .hueco .acto-h { color: var(--fg); font-size: var(--fs-h2); } .e4-mueble .hueco .acto-p { color: var(--fg); font-size: var(--fs-lead); } .e4-mueble .hueco-form { gap: var(--s-4); margin-top: var(--s-8); } .e4-mueble .hueco-campo label { color: var(--fg); margin-bottom: var(--s-2); } .e4-mueble .hueco-input { padding: 0 var(--s-5) 0 0; } .e4-mueble .hueco-input input { padding: 0 var(--s-2) 0 var(--s-6); font-size: 20px; color: var(--fg); } .e4-mueble .hueco-input span { color: var(--fg-2); font-family: var(--ff-sans); font-weight: 700; padding: 0; } .e4-mueble .hueco-aire { margin-top: var(--s-6); } .e4-mueble .hueco-res { margin-top: var(--s-10); max-width: 900px; } .e4-mueble .hueco-res-h { margin: var(--s-8) 0 var(--s-4); } /* la recomendación: tarjeta de producto v4 */ .e4-mueble .hueco-mejor { padding: clamp(20px, 2.4vw, 32px); gap: var(--s-2); } .e4-mueble .hueco-mejor-nombre { font-size: var(--fs-h2); } .e4-mueble .hueco-mejor-datos { color: var(--fg-2); font-family: var(--ff-sans); font-weight: 500; font-size: 15px; letter-spacing: 0; text-transform: none; } .e4-mueble .hueco-mejor-precio { font-size: var(--fs-h2); } .e4-mueble .hueco-mejor-ctas { margin-top: var(--s-4); gap: var(--s-4); } .e4-mueble .hueco-lista li { border-top: 2px solid var(--bg); padding: var(--s-3) 0; font-size: 15px; } .e4-mueble .hueco-lista a { font-family: var(--ff-sans); color: var(--fg); text-underline-offset: 3px; } .e4-mueble .hueco-lista--no { opacity: 1; color: var(--fg-2); } .e4-mueble .hueco-nada { border-style: solid; } @media (max-width: 760px) { .e4-mueble .hoja { padding-top: var(--s-8); } .e4-mueble .hoja-fig { padding: var(--s-3); } } /* ─── 4. /plantilla (página sin cabecera) ───────────────────────────────── */ .plantilla-pagina { background: var(--bg); color: var(--fg); font-family: var(--ff-sans); } .plantilla-cab { padding: var(--s-6) var(--gutter); border-bottom: 2px solid var(--fg); gap: var(--s-3); } .plantilla-cab-t { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -0.01em; } .plantilla-cab-p { color: var(--fg-2); font-size: 15px; } .plantilla-cab-pruebas { margin: var(--s-2) 0; } .plantilla-cab-acciones { gap: var(--s-4); margin-top: var(--s-3); } .plantilla-vista { background: var(--bg-2); padding: var(--gutter); } /* la previsualización: el SVG viene con papel blanco y líneas casi negras para imprimir; en pantalla, crema y tinta */ .plantilla-pagina:not(.plantilla-pagina--print) .plantilla-vista svg { background: var(--bg); box-shadow: var(--canto-lg); } .plantilla-pagina:not(.plantilla-pagina--print) .plantilla-vista svg > rect:first-of-type { fill: var(--bg); } .plantilla-pagina:not(.plantilla-pagina--print) .plantilla-vista svg text { fill: var(--fg); font-family: var(--ff-sans); } .plantilla-pagina--print, .plantilla-hoja { background: var(--blanco); } .plantilla-hoja svg { border: 0; border-radius: 0; box-shadow: none; background: var(--blanco); } @media print { .plantilla-vista svg { border: 0; box-shadow: none; } } /* ─── 5. /muebles/ — el índice ──────────────────────────────────────────── */ .e4-muebles .guia { background: var(--bg); color: var(--fg); padding-block: var(--s-10) var(--s-section); } /* cabecera sticky en flujo (contenido.css): nada que compensar, solo aire */ .e4-muebles .guia-lead { font-size: var(--fs-lead); color: var(--fg-2); max-width: 52ch; } .e4-muebles .mu-tarjetas { margin-top: var(--s-10); gap: var(--s-8); } .e4-muebles .mu-tarjeta-a { padding: 0; gap: 0; overflow: hidden; color: var(--fg); } .e4-muebles .mu-tarjeta:only-child .mu-tarjeta-a { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; align-items: stretch; } .e4-muebles .mu-tarjeta-media, .e4-muebles .mu-tarjeta-media--foto { padding: 0; background: var(--agua-900); border-right: 2px solid var(--fg); display: grid; align-items: center; } .e4-muebles .mu-tarjeta-media:not(.mu-tarjeta-media--foto) { background: var(--vapor-200); padding: var(--s-6); } .e4-muebles .mu-tarjeta-media picture { display: contents; } .e4-muebles .mu-tarjeta-media img { height: 100%; object-fit: cover; display: block; } .e4-muebles .mu-tarjeta-cuerpo { padding: clamp(24px, 3vw, 48px); gap: var(--s-3); align-content: center; } .e4-muebles .mu-tarjeta-id { display: inline-block; justify-self: start; padding: var(--s-1) var(--s-3); background: var(--vapor-200); border-radius: var(--r-pill); color: var(--fg); } .e4-muebles .mu-tarjeta-h { font-size: var(--fs-h2); line-height: 1.1; } .e4-muebles .mu-tarjeta-p { color: var(--fg); font-size: var(--fs-body); } .e4-muebles .mu-tarjeta-leer { margin-top: var(--s-3); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .e4-muebles .mu-tarjeta-a:hover .mu-tarjeta-leer { color: var(--fg); } .e4-muebles .mu-mas { color: var(--fg-2); font-weight: 500; margin-top: var(--s-6); } /* «¿Ya tienes mueble?»: panel de vapor */ .e4-muebles .mu-tuyo { margin-top: var(--s-12); padding: clamp(24px, 3vw, 40px); background: var(--vapor-200); border-radius: var(--r-2); } .e4-muebles .mu-tuyo-p { color: var(--fg); font-size: var(--fs-lead); } @media (max-width: 900px) { .e4-muebles .mu-tarjeta:only-child .mu-tarjeta-a { grid-template-columns: 1fr; } .e4-muebles .mu-tarjeta-media, .e4-muebles .mu-tarjeta-media--foto { border-right: 0; border-bottom: 2px solid var(--fg); } } /* ─── 6. /muebles/m03 — la ficha ────────────────────────────────────────── */ .e4-m03 .pdp-miga { padding-top: var(--s-6); font-family: var(--ff-sans); font-weight: 700; font-size: 15px; letter-spacing: 0; color: var(--fg-2); } .e4-m03 .pdp-miga a { color: var(--fg-2); } .e4-m03 .pdp-miga a:hover, .e4-m03 .pdp-miga span:last-child { color: var(--fg); } .e4-m03 .pdp-hero { background: var(--bg); padding-bottom: var(--s-12); } /* la galería, enmarcada; la foto grande manda y las de 16:9 se centran sobre agua profunda */ .e4-m03 .mu-galeria .product-gallery-main { max-height: var(--mu-gal-max); overflow: hidden; } .e4-m03 .mu-galeria .product-thumb { width: 72px; border: 2px solid var(--fg); border-radius: var(--r-1); background: var(--vapor-200); box-shadow: none; transform: none; } .e4-m03 .mu-galeria .product-thumb:hover { border-color: var(--fg); box-shadow: var(--canto-sm); } .e4-m03 .mu-galeria .product-thumb.is-active { border-color: var(--fg); box-shadow: var(--canto); transform: none; } .e4-m03 .product-gallery-thumbs { padding: var(--s-1) var(--s-2) var(--s-2) var(--s-1); gap: var(--s-3); } .e4-m03 .product-gallery-dots { background: var(--bg); border: 2px solid var(--fg); padding: var(--s-2) var(--s-3); gap: var(--s-2); } .e4-m03 .product-dot { background: var(--fg); opacity: 0.35; width: 8px; height: 8px; } .e4-m03 .product-dot.is-active { background: var(--agua-700); opacity: 1; } /* la etiqueta del mueble: panel de vapor con el botón de brasa dentro */ .e4-m03 .mu-etq { padding: clamp(24px, 3vw, 40px); gap: var(--s-4); } .e4-m03 .etq-nombre { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.02em; gap: var(--s-2); } .e4-m03 .etq-nombre-mote { color: var(--fg-2); font-weight: 700; } .e4-m03 .etq-que { color: var(--fg-2); font-weight: 500; } .e4-m03 .etq-hueco { padding: 0; font-weight: 700; font-size: var(--fs-body); } .e4-m03 .etq-btn { justify-self: start; height: 52px; margin-top: var(--s-2); } /* la secuencia de ensamblaje: sobre vapor, con marco */ .e4-m03 .mu-arma { margin: 0; padding-block: var(--s-10); background: var(--vapor-200); } .e4-m03 .mu-arma-pista { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .e4-m03 .mu-arma-lienzo, .e4-m03 .mu-arma-estatica { background: var(--agua-900); border: 2px solid var(--fg); border-radius: var(--r-2); box-shadow: var(--canto-lg); } /* los dos detalles: fotos con marco y la cifra sobre agua */ .e4-m03 .mu-detalles { margin-top: var(--s-section); gap: var(--s-8); } .e4-m03 .mu-detalle { gap: var(--s-4); } .e4-m03 .mu-detalle-h { font-family: var(--ff-display); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; color: var(--fg); } .e4-m03 .mu-detalle-dato { padding: var(--s-5) var(--s-6); border-radius: var(--r-2); gap: var(--s-1); } .e4-m03 .mu-detalle-v { color: var(--fg-agua); font-size: var(--fs-h2); } .e4-m03 .mu-detalle-l { color: var(--vapor-200); font-weight: 500; } .e4-m03 .mu-detalle-p { color: var(--fg); } /* el cierre: la chimenea como tarjeta tumbada y el kit en vapor */ .e4-m03 .mu-cierre { margin-top: var(--s-section); padding-top: 0; padding-bottom: var(--s-section); } .e4-m03 .mu-cierre-h { margin-bottom: var(--s-6); } .e4-m03 .mu-chim { padding: 0; gap: 0; overflow: hidden; grid-template-columns: clamp(180px, 20vw, 280px) minmax(0, 1fr); } .e4-m03 .mu-chim img { height: 100%; min-height: 180px; background: var(--vapor-200); border-right: 2px solid var(--fg); } .e4-m03 .mu-chim-cuerpo { padding: clamp(20px, 2.4vw, 32px); } .e4-m03 .mu-chim-p { color: var(--fg); } .e4-m03 .mu-chim-precio { font-size: var(--fs-h2); } .e4-m03 .mu-chim-cta { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .e4-m03 .mu-kit { margin-top: var(--s-8); padding: clamp(24px, 3vw, 40px); } .e4-m03 .mu-kit-p { color: var(--fg); font-size: var(--fs-lead); } .e4-m03 .mu-kit-legal { color: var(--fg-2); font-size: 14px; } .e4-m03 .lead-row { gap: var(--s-3); flex-wrap: wrap; } @media (max-width: 900px) { .e4-m03 .mu-chim { grid-template-columns: 1fr; } .e4-m03 .mu-chim img { border-right: 0; border-bottom: 2px solid var(--fg); height: clamp(150px, 40vw, 220px); } } /* el popup del kit: tarjeta con borde y canto, cierre como botón secundario, y una nube de vapor al abrir */ .kit-dlg { max-width: min(560px, calc(100% - 2 * var(--gutter))); } .kit-dlg::backdrop { background: rgb(var(--agua-rgb) / .72); } .kit-dlg-caja { padding: clamp(28px, 3vw, 44px); background: var(--bg); } .kit-dlg-x { position: absolute; top: var(--s-3); right: var(--s-3); width: 44px; height: 44px; padding: 0; } .kit-dlg .mu-kit-h { padding-right: var(--s-12); } .kit-dlg .mu-kit-p { color: var(--fg); } .kit-dlg .mu-kit-legal { color: var(--fg-2); } .kit-dlg .lead-row { gap: var(--s-3); flex-wrap: wrap; } @media (prefers-reduced-motion: no-preference) { .kit-dlg[open] .kit-dlg-caja { animation: e4-vapor var(--dur-3) var(--ease-out) both; } @keyframes e4-vapor { from { opacity: 0; transform: translateY(12px) scale(0.98); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } } } /* ─── 7. Hojas A3 (/muebles/m03-hojas) y la lámina (/muebles/m03-lamina): papel limpio ─── */ .hojas-pagina { background: var(--bg-2); color: var(--fg); font-family: var(--ff-sans); } .hoja-a3 { background: var(--bg); border: 2px solid var(--fg); border-radius: var(--r-2); box-shadow: var(--canto-lg); } .hoja-a3-cab { border-bottom: 2px solid var(--fg); color: var(--fg-2); } .hoja-a3-pie { border-top: 2px solid var(--vapor-200); color: var(--fg-2); } .hoja-a3-t, .hoja-a3-url { color: var(--fg); } .hoja-a3-h2 { color: var(--fg-2); } .mu-tabla th, .mu-tabla td { border-bottom: 2px solid var(--vapor-200); } .mu-tabla thead th { border-bottom: 2px solid var(--fg); color: var(--fg-2); } .mu-paso-n { color: var(--fg); } .mu-paso-pic svg .pic-corte { fill: var(--vapor-200); } html.lamina, body.lamina { background: var(--bg-2); color: var(--fg); } .lam { background: var(--bg); border: 2px solid var(--fg); border-radius: var(--r-2); box-shadow: var(--canto-lg); margin-block: var(--s-8); } .lam-cab { border-bottom: 2px solid var(--fg); } .lam-wordmark { font-family: var(--ff-display); font-weight: 800; font-size: var(--fs-h3); letter-spacing: -0.02em; } .lam-cab-linea { color: var(--fg-2); } .lam-cab-meta { color: var(--fg-2); } .lam-render { background: var(--agua-900); overflow: hidden; } .lam-render img { border-radius: 0; } .lam-p, .lam-pie-nota, .lam-vista figcaption { color: var(--fg-2); } .lam-tabla td, .lam-lista li { border-bottom: 2px solid var(--vapor-200); } .lam-n, .lam-paso-n { background: var(--agua-700); color: var(--fg-agua); font-family: var(--ff-cifra); font-weight: 800; } .lam-pie { border-top: 2px solid var(--vapor-200); color: var(--fg-2); } /* la numeración y los globos del despiece, en agua: son señal, no fuego */ .tec-num circle, .explo-globo { fill: var(--agua-700); } .tec-num .tec-guia { stroke: var(--agua-700); } .explo-aparato { fill: var(--fg); } @media print { .hoja-a3, .lam { border: 0; border-radius: 0; box-shadow: none; margin: 0; } .hojas-pagina, html.lamina, body.lamina { background: var(--blanco); } } /* ─── 8. /empieza ───────────────────────────────────────────────────────── */ .e4-empieza .landing-hero { padding-block: var(--s-10) var(--s-section); } /* cabecera sticky en flujo (contenido.css): nada que compensar, solo aire */ .e4-empieza .empieza-lista { margin-top: var(--s-10); gap: var(--s-8); } .e4-empieza .empieza-card { padding: var(--s-5); gap: var(--s-4); background: var(--bg) !important; } /* la capa PIEL v4 ya le da borde y canto */ .e4-empieza .empieza-n { justify-self: start; padding: var(--s-1) var(--s-3); background: var(--vapor-200); border-radius: var(--r-pill); color: var(--fg); } .e4-empieza .empieza-img { border-radius: var(--r-1); box-shadow: none; } .e4-empieza .empieza-picto { background: var(--vapor-200); border-radius: var(--r-1); color: var(--fg); padding: 22%; stroke-width: 2.5; } .e4-empieza .empieza-h { font-size: var(--fs-h2); line-height: 1.1; } .e4-empieza .empieza-p { color: var(--fg); font-size: var(--fs-body); } .e4-empieza .empieza-cta { justify-self: start; height: 48px; } .e4-empieza .empieza-pie { color: var(--fg-2); margin-top: var(--s-10); } .e4-empieza .empieza-pie a { color: var(--fg); font-weight: 700; text-underline-offset: 3px; } /* ─── 9. /reveal ────────────────────────────────────────────────────────── */ .e4-reveal .landing-hero { padding-block: var(--s-10) var(--s-section); } /* cabecera sticky en flujo (contenido.css): nada que compensar, solo aire */ .e4-reveal .landing-p { font-size: var(--fs-lead); } .e4-reveal .revela { margin: var(--s-8) 0 var(--s-4); gap: var(--s-6); } .e4-reveal .revela-plano { background: var(--bg); padding: clamp(16px, 3vw, 48px); } .e4-reveal .revela-capa figcaption { margin-top: var(--s-4); color: var(--fg-2); } .e4-reveal .revela-controles { gap: var(--s-3); } .e4-reveal .revela-btn[aria-pressed="true"] { background: var(--fg) !important; color: var(--bg) !important; } /* activa = tinta; la regla vieja la ponía en brasa */ .e4-reveal .revela-nota { margin-top: var(--s-6); } .e4-reveal .landing-cta-p { margin-top: var(--s-8); } /* ─── 10. Cabecera mínima de las landings ───────────────────────────────── */ .header--minimal .header-cta { height: 44px; padding: 0 var(--s-5); } /* ─── 11. Móvil: cantos de 3 px y rejillas a una columna ────────────────── */ @media (max-width: 1023px) { .e4-elige .res-hero { grid-template-columns: 1fr; } .e4-elige .res-hero-media { border-right: 0; border-bottom: 2px solid var(--fg); height: auto; aspect-ratio: 4 / 3; } .e4-elige .res-a { grid-template-columns: 1fr; } .e4-elige .res-ideales--2, .e4-elige .res-ideales--3, .e4-elige .res-lista--2col { grid-template-columns: 1fr; } .e4-elige .asis-salidas { grid-template-columns: 1fr; } .e4-agua .landing-lecturas { grid-template-columns: 1fr; gap: var(--s-4); } .e4-agua .landing-lecturas > div { padding-left: var(--s-4); } .e4-agua .confianza-lista { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .e4-agua .landing-video { max-width: none; padding: var(--s-6) 0 0; } .e4-agua .landing-video .h4-sello { left: auto; right: -8px; } .e4-agua .video-sonido { top: var(--s-10); } .e4-agua .confianza-lista { grid-template-columns: 1fr; } .e4-mueble .hoja-cotas { grid-template-columns: 1fr; gap: var(--s-4); } .e4-mueble .hueco-form { grid-template-columns: 1fr; } .e4-mueble .paso { grid-template-columns: 44px 44px minmax(0, 1fr); } .e4-elige .asis-paso { padding: var(--s-5); } .e4-elige .asis-opts, .e4-elige .asis-opts--tramos { grid-template-columns: 1fr; gap: var(--s-4); } .e4-elige .res-fila-a { grid-template-columns: 56px minmax(0, 1fr); } .e4-elige .res-fila-precio { grid-column: 2; } .e4-m03 .mu-arma { padding-block: var(--s-6); } .e4-m03 .mu-arma-sticky { height: min(calc(100svh - var(--h-header) - 2 * var(--mu-arma-aire)), 80vw); } /* en móvil el lienzo 16:9 es bajo: sin esto quedaba una pantalla de vapor vacía */ .e4-m03 .mu-arma-pista { padding-inline: var(--s-4); } .e4-empieza .empieza-lista { grid-template-columns: 1fr; gap: var(--s-6); } .asis-opt-caja, .res-hero, .res-fila-a, .mu-tarjeta-a, .mu-chim, .hueco-mejor, .kit-dlg-caja, .hoja-fig, .revela-plano, .landing-video video, .revela-capa--encendida img, .mu-detalle-foto img, .mu-galeria .product-gallery-main, .empieza-img, .plantilla-vista svg, .e4-m03 .mu-arma-lienzo, .e4-m03 .mu-arma-estatica, .plantilla-btn, .hueco-btn, .res-cta, .etq-btn, .hoja-aviso, .hoja-aire, .hueco-aire, .hueco-nada, .fm-pruebas, .revela-nota, body[class*="e4-"] .lead-ok, body[class*="e4-"] .lead-error, .e4-elige .asis-card-flag { box-shadow: 3px 3px 0 0 var(--agua-700); } }