/* ============================================================================ AUTOGESTIÓN IBÉRICA · SISTEMA DE ESTILOS UNIFICADO v8 ---------------------------------------------------------------------------- UN solo archivo sustituye a los tres anteriores (style + mobile + sections, 195KB con guerras de especificidad y parches sobre parches). Reescrito de cero, MÓVIL PRIMERO: la base es el teléfono, los @media (min-width) añaden el escritorio. Nunca al revés. PALETA — tres colores y ni uno más: NEGRO #0a0a0a fondos de impacto, header, footer, tarjetas de servicio ORO #cba051 acción, acento, firma · #856420 para LEER sobre claro BLANCO #ffffff y su hermano roto #faf7f0 (crema) para alternar secciones El GRIS existe solo como retoque: bordes finos y notas al pie. Jamás como protagonista, jamás como color de texto principal. BOTONES SIN ANIMACIONES — decisión de esta versión: ni pulso, ni destello, ni elevación, ni escala. Solo un cambio de color de fondo en hover (.15s). Un botón debe parecer pulsable por su forma y contraste, no por moverse. ESTRUCTURA DEL ARCHIVO 01 tokens 02 base 03 tipografía 04 layout+ritmo 05 header+drawer 06 botones 07 heros 08 quad-nav 09 tarjetas 10 catálogo 11 tablas 12 formularios+quiz 13 calculadora 14 faq 15 clientes 16 home 17 blog 18 cierres 19 fijos+footer 20 movimiento 21 accesibilidad 22 utilidades 23 impresión ============================================================================ */ /* ═══ 00 · FUENTES AUTOALOJADAS ═══════════════════════════════════════════════ Servidas desde /public/fonts (no desde Google) por RGPD y rendimiento. Son las FUENTES VARIABLES tal cual las entrega fonts.google.com (un solo archivo cubre todo el rango de pesos, en vez de un archivo por peso — menos peticiones, menos peso total). font-display: swap → el texto se ve al instante con la fuente de respaldo y cambia al cargar la real (evita FOIT y mejora LCP/CLS). No incluimos las itálicas: el sitio no usa cursiva real, los dos existentes se renderizan con cursiva sintética del navegador. */ @font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/DMSerifDisplay-Regular.woff2") format("woff2"); } @font-face { font-family: "Fjalla One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/FjallaOne-Regular.woff2") format("woff2"); } @font-face { font-family: "Merriweather"; font-style: normal; font-weight: 300 900; /* variable: un archivo cubre 400 Y 700 */ font-display: swap; src: url("/fonts/Merriweather-Variable.woff2") format("woff2-variations"), url("/fonts/Merriweather-Variable.woff2") format("woff2"); } /* ═══ 01 · TOKENS ═════════════════════════════════════════════════════════ */ :root { --negro: #0a0a0a; --negro-2: #141414; --negro-3: #1d1d1d; --oro: #cba051; --oro-2: #b78d41; --oro-txt: #856420; --blanco: #ffffff; --crema: #faf7f0; --crema-2: #f5f1e6; --gris: #6b6b6b; --gris-borde: #e7e2d6; --gris-borde-osc: #2a2a2a; --claro-osc: #ece8de; --suave-osc: #cfcabd; --tinta: #191919; --linea-oro: rgba(203, 160, 81, .3); --sombra-1: 0 4px 16px rgba(10, 10, 10, .07); --sombra-2: 0 14px 34px rgba(10, 10, 10, .13); --radio: 12px; --radio-s: 8px; --canal: 1.25rem; --sp-sec: 2.75rem; --gap: 1rem; --ease: cubic-bezier(.22, .8, .3, 1); --hex: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 0v8.17L0 16.33v16.34L14 40.83V49m0-40.83L28 16.33v16.34L14 40.83M0 0v8.17M0 40.83V49M28 0v8.17M28 40.83V49' fill='none' stroke='%23cba051' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E"); --rombo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23cba051'%3E%3Crect x='18' y='18' width='64' height='64' transform='rotate(45 50 50)' stroke-opacity='.35' stroke-width='1.5'/%3E%3Crect x='31' y='31' width='38' height='38' transform='rotate(45 50 50)' stroke-opacity='.55' stroke-width='1.5'/%3E%3C/g%3E%3Crect x='46' y='46' width='8' height='8' transform='rotate(45 50 50)' fill='%23cba051' fill-opacity='.6'/%3E%3C/svg%3E") } @media (min-width: 900px) { :root { --canal: 2rem; --sp-sec: 5rem; --gap: 1.4rem } } /* ═══ 02 · BASE ═══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip } body { margin: 0; background: var(--blanco); color: var(--tinta); font: 400 16px/1.7 "Merriweather", Georgia, serif; -webkit-font-smoothing: antialiased; overflow-x: clip; overflow-wrap: break-word } main { min-height: 60vh } img { max-width: 100%; height: auto; display: block } img, video, iframe, svg, canvas { max-width: 100% } a { color: inherit } [hidden] { display: none !important } ::selection { background: var(--oro); color: var(--negro) } a, button { -webkit-tap-highlight-color: transparent } /* ═══ 03 · TIPOGRAFÍA ═════════════════════════════════════════════════════ */ h1, h2, h3, h4 { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; text-wrap: balance; margin-top: 0 } h1 { font-size: clamp(1.85rem, 7.2vw, 3.4rem); line-height: 1.1; margin-bottom: .85rem } h2 { font-size: clamp(1.4rem, 5.4vw, 2.3rem); line-height: 1.2; margin-bottom: 1.15rem } h3 { font-size: clamp(1.02rem, 3.4vw, 1.28rem); line-height: 1.34; margin-bottom: .55rem } /* Aire de títulos: el espacio de ARRIBA triplica al de abajo (proximidad Gestalt: el título pertenece a lo que le sigue, no a lo que le precede). */ section h2:not(:first-child), section .wrap > h2:not(:first-child) { margin-top: 2.6rem } section h3:not(:first-child), section .wrap > h3:not(:first-child) { margin-top: 1.9rem } :is(h1, h2, h3) + p { margin-top: 0 } p { margin: 0 0 1.1rem } ul, ol { margin: 0 0 1.1rem; padding-left: 1.3rem } li { margin-bottom: .45rem } @media (min-width: 900px) { h1 { margin-bottom: 1.1rem } h2 { margin-bottom: 1.35rem } section h2:not(:first-child), section .wrap > h2:not(:first-child) { margin-top: 3.4rem } } /* La barra diagonal oro bajo cada H2 de sección: la firma */ section.block > h2::before, section.block > .wrap > h2::before { content: ""; display: block; width: 44px; height: 6px; margin-bottom: .95rem; background: var(--oro); clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 8px 100%) } @media (min-width: 900px) { section.block > h2::before, section.block > .wrap > h2::before { width: 64px; height: 8px; margin-bottom: 1.15rem } } .kicker { font-family: "Fjalla One", sans-serif; color: var(--oro); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; margin: 0 0 .7rem } .gold { color: var(--oro) } /* Enlaces en texto corriente sobre claro: oro legible, subrayados. (Los contenedores oscuros los reescriben a --oro más abajo.) */ main p a:not(.btn), main li a:not(.btn), main td a:not(.btn), .table-note a, .post-contenido a, .legal-body a, details.faq a { color: var(--oro-txt); text-decoration: underline; text-underline-offset: 2px } /* ═══ 04 · LAYOUT + RITMO DE SECCIÓN ══════════════════════════════════════ */ .wrap { max-width: 1100px; margin-inline: auto; padding-inline: var(--canal); width: 100% } section.block { padding-block: var(--sp-sec); position: relative } /* Ciclo de CUATRO en páginas interiores (la portada tiene el suyo, §16): 1ª blanco · 2ª crema+filo+panal · 3ª blanco · 4ª crema profundo centrado Fondo a sangre por PINTURA (box-shadow+clip-path): jamás crea scroll. */ body.es-interior main > section.block:nth-of-type(4n + 2):not(.sec-gold) { background: var(--crema); box-shadow: 0 0 0 100vmax var(--crema); clip-path: inset(0 -100vmax); border-top: 2px solid var(--linea-oro) } body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold) { background: var(--crema-2); box-shadow: 0 0 0 100vmax var(--crema-2); clip-path: inset(0 -100vmax) } body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold) > h2, body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold) > .wrap > h2 { text-align: center } body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold) > h2::before, body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold) > .wrap > h2::before { margin-inline: auto } body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold) > .measure, body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold) > .wrap > .measure { margin-inline: auto; text-align: center } /* Rombo dorado que cierra la 4ª sección y remata su H2 */ body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold)::before { content: none } body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold) > .wrap > h2::after, body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold) > h2::after { content: ""; display: block; width: 7px; height: 7px; margin: .9rem auto 0; background: var(--oro); opacity: .5; transform: rotate(45deg) } /* Panal tenue en las secciones crema, desvanecido para no pisar la lectura */ body.es-interior main > section.block:nth-of-type(4n + 2):not(.sec-gold)::after, body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold)::after { content: ""; position: absolute; inset: 0; background: var(--hex); background-size: 28px 49px; background-attachment: fixed; background-position: center top; opacity: .17; pointer-events: none; z-index: 0 } body.es-interior main > section.block:nth-of-type(4n + 2) > *, body.es-interior main > section.block:nth-of-type(4n) > * { position: relative; z-index: 1 } /* Sección ORO (cierre de conversión) */ main > section.block.sec-gold { background: linear-gradient(120deg, var(--oro), var(--oro-2)); color: #fff; overflow: hidden; isolation: isolate } main > section.block.sec-gold::before { content: ""; position: absolute; inset: 0; background: var(--hex); background-size: 30px 52px; background-attachment: fixed; background-position: center top; filter: brightness(8); opacity: .2; pointer-events: none; z-index: 0 } main > section.block.sec-gold > .wrap { position: relative; z-index: 1 } main > section.block.sec-gold :is(h1, h2, h3) { color: #fff } main > section.block.sec-gold h2::before { background: #fff } main > section.block.sec-gold video { display: none !important } /* Panal sobre blanco (utilidad puntual de algunas vistas) */ section.block.sec-hex-light::before { content: ""; position: absolute; inset: 0; background: var(--hex); background-size: 28px 49px; background-attachment: fixed; background-position: center top; opacity: .2; pointer-events: none; z-index: 0 } section.block.sec-hex-light > * { position: relative; z-index: 1 } .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem } .split img { border-radius: var(--radio); border: 1px solid var(--gris-borde); width: 100% } .img-hex img { border-radius: var(--radio-s); border: 1px solid var(--gris-borde); box-shadow: var(--sombra-2) } @media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center } body.es-interior main > section.block:nth-of-type(even) .split > .img-hex { order: -1 } } /* ═══ 05 · HEADER + DRAWER ════════════════════════════════════════════════ */ .hdr { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; row-gap: .5rem; padding: .65rem 1rem; color: #fff; position: absolute; top: 0; left: 0; right: 0; z-index: 200; background: linear-gradient(180deg, rgba(10,10,10,.62), rgba(10,10,10,0)) } .hdr .brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff } .hdr img.brand-mark { height: 32px; width: auto; max-width: 120px; object-fit: contain; display: block } .brand-name, .hdr .brand-mark { font-family: "Fjalla One", sans-serif; font-weight: 400; letter-spacing: .015em; line-height: 1.12; margin: 0; text-transform: uppercase } .hdr .brand-name { font-size: .76rem } /* Fijado al bajar: sólido, arriba del todo. Sin animación de entrada llamativa: un deslizamiento corto del propio header (no es un botón). */ body.hdr-fijo .hdr { position: fixed; background: rgba(10, 10, 10, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea-oro); box-shadow: 0 6px 22px rgba(0, 0, 0, .38) } body.hdr-fijo .hdr img.brand-mark { height: 28px } body.nav-abierta .hdr { transform: none !important } /* Hamburguesa (44×44) */ .hdr-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; order: 2; background: none; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; cursor: pointer; position: relative; z-index: 400 } .hdr-toggle span { display: block; width: 20px; height: 2px; margin-inline: auto; background: #fff } .hdr-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) } .hdr-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 } .hdr-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) } /* Teléfono directo (solo móvil) */ .hdr-tel { display: grid; order: 1; margin-left: auto; margin-right: .55rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--oro); color: var(--oro); place-items: center; text-decoration: none; flex: 0 0 auto } .hdr-tel:active { background: var(--oro); color: var(--negro) } .hdr-tel .btn-ic { width: 19px; height: 19px } /* DRAWER: el panel cerrado se COLAPSA a ancho 0 pegado al borde (no se traslada fuera de pantalla: un fixed desplazado a la derecha crea scroll lateral aunque sea solo transform — verificado, +344px). */ .hdr-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 350; height: 100dvh; display: flex; flex-direction: column; align-items: stretch; gap: .1rem; background: var(--negro-2); box-shadow: -18px 0 44px rgba(0, 0, 0, .5); padding: 4.2rem 0 2rem; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; width: 0; min-width: 0; overflow: hidden; visibility: hidden; border-left: 0 solid var(--linea-oro) } .hdr-nav.hdr-nav--open { width: min(84vw, 340px); padding-inline: 1.2rem; overflow-y: auto; visibility: visible; border-left-width: 1px } .hdr-nav a { font-family: "Fjalla One", sans-serif; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--suave-osc); text-decoration: none; padding: .85rem .6rem; min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .08); white-space: nowrap } .hdr-nav.hdr-nav--open a { white-space: normal } .hdr-nav a:hover, .hdr-nav a.active { color: var(--oro) } .hdr-nav a.active { background: rgba(203, 160, 81, .1) } /* Telón bajo el drawer + bloqueo del scroll de fondo */ body.nav-abierta { overflow: hidden } body.nav-abierta::after { content: ""; position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .55) } /* Desplegable "Contenido": acordeón dentro del drawer */ .hdr-drop { display: block; position: relative } .hdr-drop-btn { display: flex; align-items: center; justify-content: space-between; gap: .35rem; width: 100%; min-height: 46px; padding: .85rem .6rem; background: none; border: none; cursor: pointer; color: var(--suave-osc); font-family: "Fjalla One", sans-serif; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, .08); white-space: nowrap } .hdr-drop-btn:hover, .hdr-drop-btn.active { color: var(--oro) } .hdr-drop-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor } .hdr-drop-btn[aria-expanded="true"] .hdr-drop-caret { transform: rotate(180deg) } .hdr-drop-menu { background: rgba(0, 0, 0, .25); max-height: 0; overflow: hidden } .hdr-drop--open .hdr-drop-menu { max-height: 220px } .hdr-drop-menu a { padding-left: 2rem } .hdr .btn-contact { display: none } .sticky-call { display: none } /* Escritorio: barra sticky sólida, menú en línea, dropdown flotante */ @media (min-width: 901px) { .hdr { position: sticky; top: 0; background: rgba(10, 10, 10, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 2px solid var(--oro); padding: .8rem 1.5rem } body.hdr-fijo .hdr { position: sticky; box-shadow: none } body.hdr-fijo .hdr img.brand-mark { height: 40px } .hdr img.brand-mark { height: 40px; max-width: 150px } .hdr .brand-name { font-size: .95rem } .hdr-toggle, .hdr-tel { display: none } .hdr-nav { position: static; height: auto; width: auto; min-width: 0; visibility: visible; overflow: visible; flex-direction: row; flex-wrap: wrap; flex: 1; justify-content: center; align-items: center; background: none; box-shadow: none; border: none; padding: 0 } .hdr-nav a { padding: .5rem .65rem; min-height: 0; border-bottom: 2px solid transparent; white-space: nowrap; border-radius: 6px 6px 0 0 } .hdr-nav a.active { background: none; border-bottom-color: var(--oro) } .hdr-drop-btn { width: auto; min-height: 0; padding: .5rem .65rem; border-bottom: 2px solid transparent } .hdr-drop-btn.active { border-bottom-color: var(--oro) } .hdr-drop-menu { position: absolute; top: 100%; right: 0; min-width: 170px; z-index: 210; max-height: none; overflow: visible; background: var(--negro-2); border: 1px solid var(--gris-borde-osc); border-radius: var(--radio-s); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); padding: .4rem; opacity: 0; visibility: hidden } .hdr-drop--open .hdr-drop-menu { opacity: 1; visibility: visible } .hdr-drop-menu a { padding: .6rem .8rem; border-bottom: none; border-radius: 4px } .hdr-drop-menu a:hover { background: rgba(203, 160, 81, .12) } .hdr .btn-contact { display: inline-block; padding: .6rem 1.15rem; border-radius: 6px; text-decoration: none; white-space: nowrap; background: var(--oro); color: #fff; font-weight: 700 } .hdr .btn-contact:hover { background: var(--oro-2) } } /* ═══ 06 · BOTONES — SIN ANIMACIONES, PERFECTAMENTE CENTRADOS ═════════════ Cero keyframes, cero transform, cero destello, cero pulso, cero elevación. Un botón comunica con forma y color. Lo ÚNICO que cambia es el fondo (.15s), que es feedback, no animación. CENTRADO — el detalle que rompía la simetría: cuando un botón lleva icono y el texto envuelve a dos líneas, `align-items: center` alinea el icono con el CENTRO del bloque de texto, y el conjunto queda descolgado respecto a la caja (medido: -30px en «Quiero grabar sin descuidos»). Se corrige en tres frentes: · text-align:center el texto se centra también al envolver · align-items:center + flex icono y texto comparten eje vertical · .btn-ic con align-self:center e interlineado neutralizado, para que el icono no arrastre la línea base del bloque Y los paddings son SIMÉTRICOS por definición (una sola pareja de valores), de modo que la caja siempre queda cuadrada respecto a su contenido. */ .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: .5rem; font-family: "Merriweather", Georgia, serif; text-decoration: none; cursor: pointer; padding: .75rem 1.35rem; min-height: 44px; border: 1px solid transparent; border-radius: var(--radio-s) } /* El icono no debe desplazar el centro óptico del botón */ .btn-ic { flex: none; width: 1.05em; height: 1.05em; align-self: center; line-height: 0 } /* ENVOLTURA DE TEXTO — el descentrado aparente y su causa real. Diagnóstico línea a línea del caso peor («Quiero grabar sin descuidos», 390px): las DOS líneas del texto están perfectamente centradas entre sí (línea 2 de 179 a 236 → centro 207; botón de 41 a 349 → centro 195). Lo que descuadra es el ICONO: al ser un ítem flex más, comparte la primera línea y desplaza ese renglón 22px a la derecha, de modo que el bloque de texto ya no puede centrarse respecto a la caja. `text-wrap: balance` no lo arregla (probado: empeora a 79px, reparte las líneas pero no reposiciona nada). Solución: el texto se convierte en su PROPIA columna flexible que ocupa el espacio restante y se centra dentro de él. El icono queda a un lado, centrado en vertical respecto al bloque completo, y el texto se centra en el ancho que le queda. Así el conjunto es simétrico tenga una o tres líneas, con icono o sin él. */ .btn > svg ~ * { min-width: 0 } /* Los rótulos cortos —la mayoría— no deben partirse nunca: con una sola línea el centrado es exacto por construcción y no hay caso especial. */ .hdr .btn-contact, .plan .btn, .filter-links a, .lq-continuar, .btn-tel, .cookie-actions .btn, .cookie-rechazar { white-space: nowrap } /* Cuando el botón sí debe partir (rótulos largos en móvil), el icono se ancla arriba y el texto ocupa una columna centrada propia. */ @media (max-width: 640px) { .btn { flex-wrap: nowrap } .btn > .btn-ic { align-self: center } } .btn-amber, button.btn-amber, .sticky-call-form { background: var(--oro); color: #fff !important; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); border: none } .btn-amber:hover { background: var(--oro-2) } .btn-ghost { border: 1px solid var(--oro); color: inherit; background: transparent } .btn-ghost:hover { background: var(--oro); color: #fff } .btn-dark { background: var(--negro); color: #fff !important; border: none } .btn-dark:hover { background: #000 } .btn-big { font-size: 1.05rem; padding: .9rem 1.5rem; width: 100% } .btn-tel { font-weight: 700; letter-spacing: .02em } .btn:disabled, .btn[disabled] { background: #d6d0c2 !important; color: #fff !important; cursor: not-allowed; text-shadow: none } @media (min-width: 640px) { .btn-big { width: auto } } .actions { margin-top: 1.5rem; display: grid; gap: .65rem } .actions .btn { width: 100% } @media (min-width: 640px) { .actions { display: flex; flex-wrap: wrap; gap: .75rem } .actions .btn { width: auto } } /* ═══ 07 · HEROS ══════════════════════════════════════════════════════════ Toda cabecera comparte las mismas capas: z:-3 vídeo (si lo hay) · z:-2 velo + brillo + ROMBO SVG · z:-1 panal */ .hero, .hero-video, .hero-home, .hero--compact, .hero-has-video, .hero-alarmas, .hero-anti-okupas, .hero-videovigilancia { position: relative; overflow: hidden; isolation: isolate; background-color: var(--negro); color: #fff } .hero, .hero-video, .hero-home { padding-block: 3rem 2.25rem } .hero--compact { padding-block: 2.5rem 1.75rem } .hero:has(.svc-cards) { padding-bottom: 2.75rem } /* El header superpuesto reserva su hueco */ body.hdr-overlay :is(.hero, .hero-video, .hero-home, .hero--compact) { padding-top: 5.2rem } .hero, .hero--compact, .hero-video, .hero-has-video { padding-top: 5.2rem } @media (min-width: 900px) { .hero, .hero-video, .hero-home { padding-block: 5rem 4rem } .hero--compact { padding-block: 3.5rem 2.75rem } .hero:has(.svc-cards) { padding-bottom: 4.5rem } body.hdr-overlay :is(.hero, .hero-video, .hero-home) { padding-top: 7rem } } .hero > video, .hero-video video, .hero-has-video > video, .hero-home video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .48; pointer-events: none; z-index: -3 } /* Velo + brillo dorado + rombo SVG (una sola capa, tres imágenes) */ /* Nota móvil: el offset vertical del rombo se sube a 88px (antes 18px) para que quede POR DEBAJO de la barra del header. A 18px caía justo sobre el botón de menú (44×44) de la esquina superior derecha y lo tapaba visualmente. En ≥640px hay sitio de sobra, así que esas reglas conservan su posición original. */ .hero::before, .hero-video::before, .hero-home::before, .hero-has-video::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(115deg, rgba(10, 10, 10, .82) 34%, rgba(10, 10, 10, .42)), radial-gradient(560px 280px at 88% -5%, rgba(203, 160, 81, .2), transparent 68%) } @media (min-width: 640px) { .hero::before, .hero-video::before, .hero-home::before, .hero-has-video::before { background: var(--rombo) no-repeat calc(100% - 26px) 24px / 110px 110px, linear-gradient(115deg, rgba(10, 10, 10, .82) 34%, rgba(10, 10, 10, .42)), radial-gradient(560px 280px at 88% -5%, rgba(203, 160, 81, .2), transparent 68%) } } @media (min-width: 900px) { .hero::before, .hero-video::before, .hero-home::before, .hero-has-video::before { background: var(--rombo) no-repeat 4% calc(100% - 22px) / 150px 150px, linear-gradient(115deg, rgba(10, 10, 10, .82) 34%, rgba(10, 10, 10, .42)), radial-gradient(560px 280px at 88% -5%, rgba(203, 160, 81, .2), transparent 68%) } } /* Panal, desvanecido en diagonal */ .hero::after, .hero-video::after, .hero-home::after, .hero-has-video::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hex); background-size: 28px 49px; opacity: .12; pointer-events: none; -webkit-mask-image: linear-gradient(160deg, #000 5%, transparent 78%); mask-image: linear-gradient(160deg, #000 5%, transparent 78%) } /* Rombos CSS grandes de escritorio (esquina superior derecha) */ .hero > .wrap, .hero-video > .wrap, .hero-home > .wrap { position: relative } @media (min-width: 900px) { .hero > .wrap::before, .hero-video > .wrap::before, .hero-home > .wrap::before { content: ""; position: absolute; top: -2.5rem; right: -3.5rem; width: 190px; height: 190px; z-index: -1; border: 1.5px solid rgba(203, 160, 81, .3); transform: rotate(45deg); pointer-events: none } } @media (min-width: 1100px) { .hero > .wrap::after, .hero-video > .wrap::after { content: ""; position: absolute; top: .6rem; right: -.4rem; width: 92px; height: 92px; z-index: -1; border: 1px solid rgba(203, 160, 81, .18); transform: rotate(45deg); pointer-events: none } } .hero :is(h1, h2, h3), .hero-video :is(h1, h2, h3) { color: #fff } .hero h1 .gold, .hero-video h1 .gold, .hero-home h1 .gold { position: relative; display: inline-block } .hero h1 .gold::after, .hero-video h1 .gold::after, .hero-home h1 .gold::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .09em; background: linear-gradient(90deg, var(--oro), rgba(203, 160, 81, .15)); border-radius: 2px } .hero p.lead, .hero-video .lead { color: var(--claro-osc); max-width: 62ch; font-size: 1rem; line-height: 1.72 } @media (min-width: 900px) { .hero p.lead, .hero-video .lead { font-size: 1.08rem } } .hero .kicker { margin-bottom: .7rem } /* El rótulo bajo las tarjetas del hero de alarmas: línea con filetes */ .hero .svc-cards + p { display: flex; align-items: center; gap: .9rem; justify-content: center } .hero .svc-cards + p::before, .hero .svc-cards + p::after { content: ""; height: 1px; flex: 1; max-width: 90px; background: linear-gradient(90deg, transparent, var(--linea-oro)) } .hero .svc-cards + p::after { background: linear-gradient(90deg, var(--linea-oro), transparent) } /* ═══ 08 · QUAD-NAV ═══════════════════════════════════════════════════════ */ .quad-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; background: var(--negro); padding: 1.1rem var(--canal) } .quad-nav a { font-family: "Fjalla One", sans-serif; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .45rem; min-height: 44px; padding: .95rem .55rem .85rem; background: var(--negro-2); color: #fff; text-decoration: none; border: 1px solid #3a3a3a; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); overflow-wrap: break-word; hyphens: auto } .quad-nav a:nth-child(5) { grid-column: 1 / -1; flex-direction: row; padding: .8rem } @media (min-width: 901px) { .quad-nav { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; padding: 1.6rem var(--canal) } .quad-nav a { font-size: .95rem; letter-spacing: .06em; flex-direction: row; padding: 1.3rem .9rem 1.15rem } .quad-nav a:nth-child(5) { grid-column: auto } } .quad-nav--global { padding-block: 1rem } /* ═══ 09 · TARJETAS ═══════════════════════════════════════════════════════ Cuatro personalidades, sin transform en hover (coherencia con §06): el estado se comunica con borde, sombra y color. .panel informativa clara · .svc-card negra de servicio .who-card de caso con foto · .case testimonio con comilla */ /* — .panel — */ /* PUNTAS CORTADAS — unifica `.panel` con el mismo lenguaje visual que las `.svc-card`: toda "tarjeta de servicio" del sitio comparte ahora el mismo bisel diagonal en la esquina superior derecha, sea negra (svc-card) o blanca (panel). El radio se sustituye por el recorte; el acento diagonal se dibuja con `::after` porque `::before` ya lo usa la barra lateral. */ .panel { position: relative; background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: 0; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); padding: 1.25rem 1.35rem; margin-bottom: 1rem; box-shadow: var(--sombra-1); overflow: hidden } .panel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--oro); transform: scaleY(0); transform-origin: top } .panel::after { content: ""; position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: linear-gradient(225deg, rgba(203, 160, 81, .4) 0 50%, transparent 50%); pointer-events: none } .panel:hover { border-color: var(--linea-oro); box-shadow: var(--sombra-2) } .panel:hover::before { transform: scaleY(1) } .panel p:last-child { margin-bottom: 0 } @media (min-width: 900px) { .panel { padding: 1.5rem 1.6rem } } /* — .svc-card: NEGRA. Colores cerrados con llave: nada de texto gris. — */ .svc-card { position: relative; border-radius: var(--radio-s); background: linear-gradient(160deg, #101010, #000 60%); border: 1px solid rgba(203, 160, 81, .38); padding: 1.35rem 1.3rem 1.4rem; color: #f2efe8; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%) } .svc-card h2, .svc-card h3, .svc-card h4 { font-family: "Fjalla One", sans-serif; letter-spacing: .1em; text-transform: uppercase; font-size: .92rem; color: var(--oro) !important; margin-bottom: .55rem } .svc-card p, .svc-card li, .svc-card td, .svc-card small, .svc-card figcaption, .svc-card div:not([class*="btn"]), .svc-card span:not([class*="btn"]), .svc-card strong, .svc-card em, .svc-card b { color: #f2efe8 !important } .svc-card .label-hint, .svc-card .muted { color: var(--suave-osc) !important } .svc-card a:not(.btn) { color: var(--oro) !important; text-decoration: underline; text-underline-offset: 2px } .svc-card .btn-ghost, .svc-card .btn-ghost span { color: #fff !important; border-color: var(--oro) } .svc-card .btn-ghost:hover { background: var(--oro) } .svc-cards { display: grid; gap: var(--gap); margin: 2rem 0 .5rem; grid-template-columns: minmax(0, 1fr) } @media (min-width: 420px) { .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (min-width: 960px) { .svc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) } .svc-card { padding: 1.6rem 1.5rem 1.55rem } .svc-card h3 { font-size: 1rem } } /* — .who-card — */ .who-cards { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); align-items: stretch } .who-card { border: 1px solid var(--gris-borde); border-radius: var(--radio); overflow: hidden; background: var(--blanco); box-shadow: var(--sombra-1) } .who-card:hover { box-shadow: 0 16px 36px rgba(203, 160, 81, .18); border-color: var(--linea-oro) } .who-card h3 { margin: .9rem 1rem .4rem } .who-card p { margin: 0 1rem 1rem; font-size: .92rem; color: var(--tinta) } .who-card--foto { padding: 0; text-align: left; justify-content: flex-start } .who-card--foto > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 1px solid var(--gris-borde); background: var(--blanco) } .who-card--foto .who-body { padding: 1.1rem 1.2rem 1.3rem; flex: 1; display: flex; flex-direction: column } .who-card--foto .who-body h3 { margin: 0 0 .4rem; font-size: 1.05rem } .who-card--foto .who-body p { margin: 0; font-size: .9rem; line-height: 1.6 } .who-card--icono { position: relative; display: flex; flex-direction: column; height: 100%; padding: 2rem 1.5rem 1.7rem; text-align: center; overflow: hidden } .who-card--icono::before { content: ""; position: absolute; inset: 0; background: var(--hex); background-size: 28px 49px; opacity: .2; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%) } .who-card--icono::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--oro), transparent 80%) } .who-card--icono > * { position: relative; z-index: 1 } .who-card--icono .who-ic { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 1.2rem; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(140deg, var(--negro), var(--negro-3)); color: var(--oro) } .who-svg { width: 28px; height: 28px } .who-card--icono h3 { margin: 0 0 .5rem } .who-card--icono p { margin: 0 0 1rem; color: var(--gris); font-size: .93rem } .who-card--icono .who-img { margin-top: auto; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--gris-borde) } .who-card--icono .who-img img { width: 100%; height: 100%; object-fit: cover } @media (min-width: 400px) { .who-cards--fotos { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (min-width: 640px) { .who-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (min-width: 960px) { .who-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) } .who-cards--2col { grid-template-columns: repeat(2, minmax(0, 1fr)) } .who-cards--fotos { grid-template-columns: repeat(3, minmax(0, 1fr)) } } /* — .case: testimonio — */ .case { position: relative; background: var(--blanco); border-left: none; border-radius: var(--radio); padding: 1.5rem 1.35rem 1.35rem; margin-bottom: 1.25rem; box-shadow: inset 3px 0 0 var(--oro), var(--sombra-1) } .case::before { content: "“"; position: absolute; top: -.1em; right: .5rem; font-family: "DM Serif Display", Georgia, serif; font-size: 4.5rem; line-height: 1; color: var(--oro); opacity: .16; pointer-events: none } .case h3 { margin-top: 0; font-size: 1rem } .case p:last-child { margin-bottom: 0 } .testi-grid { display: grid; gap: var(--gap); margin-top: 1.5rem; grid-template-columns: minmax(0, 1fr) } .testi-cell { display: flex } .testi-grid .case h3 { font-family: "Merriweather", Georgia, serif; font-size: .92rem; letter-spacing: .04em; color: var(--oro-txt); margin-bottom: .7rem } .testi-grid .case p { font-style: italic; line-height: 1.72 } @media (min-width: 640px) { .testi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (min-width: 1200px) { .testi-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) } } /* — .kit-card — */ .kit-grid { display: grid; gap: .8rem; margin-top: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)) } .kit-card { display: flex; flex-direction: column; text-decoration: none; background: #111; color: #eee; border: 1px solid var(--gris-borde-osc); border-radius: var(--radio-s); overflow: hidden; position: relative; height: 100%; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%) } .kit-card .kit-foto { aspect-ratio: 1 / 1; background: var(--blanco); display: grid; place-items: center; padding: .7rem } .kit-card .kit-foto img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain } .kit-foto-ph { display: grid; place-items: center; width: 54px; height: 54px; color: var(--oro-2); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: rgba(203, 160, 81, .15) } .kit-foto-ic { width: 24px; height: 24px } .kit-card .kit-body { padding: .7rem .8rem .85rem; display: flex; flex-direction: column; gap: .4rem; flex: 1 } .kit-card h3, .kit-grid .kit-card h3 { font-family: "Merriweather", Georgia, serif; font-weight: 700; font-size: .82rem; text-transform: none; letter-spacing: 0; margin: 0; line-height: 1.28; color: #fff !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .kit-card :is(p, small) { color: var(--claro-osc) !important } .kit-card .kit-tags span { font-family: "Fjalla One", sans-serif; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--oro); border: 1px solid rgba(203, 160, 81, .5); padding: .18rem .4rem; border-radius: 99px } .kit-card .kit-cta::after { content: " →" } @media (min-width: 640px) { .kit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap) } .kit-card .kit-foto { aspect-ratio: 1 / 1; padding: 1rem } .kit-card h3, .kit-grid .kit-card h3 { font-size: .98rem; line-height: 1.45; -webkit-line-clamp: unset; display: block } .kit-card .kit-tags span { font-size: .68rem; padding: .12rem .5rem } .kit-card .kit-cta { font-size: .9rem } .kit-card .kit-body { padding: 1.1rem 1.2rem 1.3rem; gap: .5rem } } @media (min-width: 1000px) { .kit-grid { grid-template-columns: repeat(4, 1fr); gap: .9rem } } .ahorra-kits-tira { text-align: left; margin-top: 2rem } .ahorra-kits-tira .kit-grid { margin-top: 0 } /* — .plan — */ .plans { display: grid; gap: var(--gap); margin-top: 1.5rem; grid-template-columns: minmax(0, 1fr) } .plan { border: 1px solid var(--gris-borde); border-radius: var(--radio); padding: 1.5rem 1.3rem 1.4rem; display: flex; flex-direction: column; background: var(--blanco); box-shadow: var(--sombra-1) } .plan h3 { margin-top: 0; font-size: 1.08rem } .plan-price { font-family: "Fjalla One", sans-serif; font-size: clamp(1.9rem, 9vw, 2.6rem); color: var(--negro); margin: .3rem 0 } .plan-price small { font-size: 1rem; color: var(--gris); font-family: "Merriweather", Georgia, serif } .plan ul { padding-left: 1.1rem; margin: .75rem 0 1.3rem; font-size: .92rem; flex: 1 } .plan .btn { width: 100%; text-align: center } .plan.featured { order: -1; border: 2px solid var(--oro); box-shadow: 0 14px 36px rgba(203, 160, 81, .28); background: linear-gradient(180deg, #fffdf8, #fff); padding-top: 1.4rem } .plan-badge { display: inline-block; align-self: flex-start; margin: 0 0 1rem; font-family: "Fjalla One", sans-serif; text-transform: uppercase; background: var(--oro); color: var(--negro); font-size: .7rem; letter-spacing: .08em; padding: .3rem .95rem; border-radius: 99px; white-space: nowrap } @media (min-width: 640px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)) } .plan.featured { order: 0 } .plan-badge { align-self: center } } @media (min-width: 960px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)) } .plan { padding: 1.9rem 1.6rem 1.7rem } } /* — .stats: panel oscuro de cifras — */ .stats::before { content: ""; position: absolute; inset: 0; background: var(--hex); background-size: 28px 49px; opacity: .1; pointer-events: none } .stat { position: relative; padding: 1.2rem .8rem; text-align: center; box-shadow: inset -1px -1px 0 rgba(203, 160, 81, .16) } .stat b { display: block; font-family: "DM Serif Display", Georgia, serif; font-size: clamp(1.6rem, 7vw, 2.2rem); color: var(--oro); line-height: 1.1; font-variant-numeric: tabular-nums; margin-bottom: .2rem } .stat span { font-size: .78rem; color: var(--suave-osc); display: block; line-height: 1.4 } @media (min-width: 700px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)) } .stat { padding: 1.5rem 1rem; box-shadow: inset -1px 0 0 rgba(203, 160, 81, .16) } .stat:nth-child(2n) { box-shadow: inset -1px 0 0 rgba(203, 160, 81, .16) } .stat:last-child { box-shadow: none } .stat b { font-size: 2.1rem } .stat span { font-size: .84rem } } /* — .mega-card (comparativas) — */ .mega-card { background: var(--crema); color: var(--tinta); border: 1px solid var(--gris-borde); border-radius: var(--radio); padding: 1.35rem 1.25rem 1.5rem; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(10, 10, 10, .07) } .mega-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--oro), transparent 80%) } .mega-card::after { content: ""; position: absolute; inset: 0; background: var(--hex); background-size: 28px 49px; opacity: .1; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000, transparent 45%); mask-image: linear-gradient(180deg, #000, transparent 45%) } .mega-card > * { position: relative; z-index: 1 } .mega-card :is(h2, h3) { color: var(--negro) } .mega-card :is(p, li, td, strong, em, span):not(.mejor):not(.btn) { color: var(--tinta) } .mega-card a:not(.btn) { color: var(--oro-txt) } @media (min-width: 900px) { .mega-card { padding: 2.5rem 2.75rem; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%) } } /* — .cta-duo — */ /* — comp-panel (relacionados en ficha) — */ .comp-panel { display: flex; gap: 1rem; align-items: center } .comp-panel .comp-thumb { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio-s); padding: .25rem } .comp-panel h3 { margin: 0 0 .15rem; text-transform: none; font-family: "Merriweather", Georgia, serif; font-weight: 700; font-size: .98rem } .comp-panel .cat { font-size: .8rem; color: var(--gris); margin: 0 } /* — marcas — */ .marcas-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap) } .marca-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.4rem 1.2rem; margin-bottom: 0 } .marca-logo { display: grid; place-items: center; height: 56px; margin-bottom: .9rem; padding: .4rem .8rem; background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio-s); width: 100%; max-width: 220px } .marca-logo img { max-height: 46px; width: auto; object-fit: contain } .marca-texto { display: grid; place-items: center; height: 52px; font-family: "Fjalla One", sans-serif; font-size: 1.8rem; letter-spacing: .14em; color: var(--negro) } @media (min-width: 640px) { .marcas-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (min-width: 900px) { .marca-logo { height: 64px } } .cols-3 { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr) } @media (min-width: 640px) { .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (min-width: 960px) { .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } } .cam-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: 1.6rem } .cam-card > img { object-fit: contain; padding: 1rem } @media (min-width: 700px) { .cam-duo { grid-template-columns: repeat(2, minmax(0, 1fr)) } } .proveedores { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem } .proveedores-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem } .proveedores-logos figure { margin: 0; text-align: center; background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio); padding: 1.2rem 1rem .9rem } .proveedores-logos figure:hover { border-color: var(--linea-oro); box-shadow: var(--sombra-2) } .proveedores-logos img { max-width: 100%; height: 52px; object-fit: contain; margin-inline: auto } .proveedores-logos figcaption { margin-top: .9rem; font-size: .82rem; color: var(--gris); text-transform: uppercase; letter-spacing: .06em } @media (min-width: 900px) { .proveedores { grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center } .proveedores-logos { gap: 1.25rem } .proveedores-logos figure { padding: 1.6rem 1.2rem 1.1rem } } /* ═══ 10 · CATÁLOGO Y FICHA ═══════════════════════════════════════════════ */ .catalog-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1.2rem } .catalog-toolbar .count { color: #565656; font-size: .8rem; margin-right: 0 } .chip-active { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; font-size: .82rem; color: var(--negro); background: #f3ecdc; border: 1px solid var(--oro); border-radius: 99px; padding: .3rem .8rem } .chip-active b { color: var(--oro-txt); font-weight: 700 } .busca { display: flex; align-items: center; gap: .6rem; flex: 1 1 100%; max-width: none; background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio-s); padding: .1rem .9rem } .busca:focus-within { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(203, 160, 81, .22) } .busca .btn-ic { color: var(--gris); flex: none } .busca input { flex: 1; border: none; outline: none; background: none; font: inherit; font-size: 16px; padding: .65rem 0; color: var(--negro); min-width: 0 } .busca--faq { margin-bottom: 1.5rem } .busca-vacio { padding: 2rem 1rem; text-align: center; color: var(--gris) } @media (min-width: 901px) { .busca { flex: 1 1 260px; max-width: 420px } } /* Filtros: chips con scroll horizontal en móvil, columna en escritorio */ .catalog-layout { display: block } .filters { display: block; margin-bottom: 1rem } .filter-group { margin-bottom: .6rem } .filters .filter-group h3 { margin: 0 0 .3rem; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #565656; font-family: "Fjalla One", sans-serif } .filter-links { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .35rem; -webkit-overflow-scrolling: touch; scrollbar-width: none } .filter-links::-webkit-scrollbar { display: none } .filter-links a { flex: none; white-space: nowrap; padding: .5rem .85rem; min-height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--gris-borde); border-radius: 999px; background: var(--blanco); font-size: .82rem; text-decoration: none; color: var(--tinta) } .filter-links a.active { background: var(--oro); border-color: var(--oro); color: #fff; font-weight: 700 } @media (min-width: 901px) { .catalog-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; align-items: start } .filters { border: 1px solid var(--gris-borde); border-radius: var(--radio); padding: 1.25rem; position: sticky; top: 84px; background: var(--blanco); margin-bottom: 0 } .filters .filter-group + .filter-group { margin-top: 1rem } .filter-links { display: block; overflow: visible; padding-bottom: 0 } .filter-links a { display: block; white-space: normal; min-height: 0; padding: .3rem .5rem; font-size: .9rem; border: none; border-radius: 5px; border-left: 3px solid transparent; color: var(--gris); background: none } .filter-links a:hover { color: var(--negro); background: #f5f1e8 } .filter-links a.active { color: var(--negro); background: #f3ecdc; font-weight: 600; border-left-color: var(--oro) } } .catalog-layout--reverse { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem } @media (min-width: 901px) { .catalog-layout--reverse { grid-template-columns: 1fr 300px } } /* Rejilla de productos: 2 columnas móvil (comparar es la mitad de comprar) */ .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; align-items: stretch } .card { background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; position: relative; height: 100% } .card:hover { box-shadow: var(--sombra-2); border-color: var(--oro) } .card .foto, .card .foto--vacia { aspect-ratio: 1 / 1; width: 100%; object-fit: contain; background: var(--blanco); padding: .35rem } .card .foto--vacia { display: flex; align-items: center; justify-content: center; color: var(--gris); font-size: .85rem; background: var(--crema-2); padding: 0 } .card .info { padding: .55rem .65rem .7rem; border-top: 1px solid var(--gris-borde); display: flex; flex-direction: column; flex: 1 } .card h3 { font-family: "Merriweather", Georgia, serif; font-weight: 700; font-size: .82rem; text-transform: none; letter-spacing: 0; margin: 0 0 .2rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .card .cat { margin: auto 0 0; font-size: .68rem; color: #565656; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .badge-ai { position: absolute; top: .6rem; left: .6rem; z-index: 2; background: linear-gradient(120deg, var(--negro), #262014); color: var(--oro); font-family: "Fjalla One", sans-serif; font-size: .62rem; letter-spacing: .1em; padding: .2rem .45rem; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%) } @media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem } .card h3 { font-size: .95rem; line-height: 1.4; -webkit-line-clamp: unset; display: block } .card .cat { font-size: .78rem; white-space: normal } .card .info { padding: .7rem .85rem .9rem } .card .foto, .card .foto--vacia { padding: .5rem } .badge-ai { font-size: .7rem; padding: .2rem .55rem } } @media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)) } } /* Ficha de producto */ .producto-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem } @media (min-width: 900px) { .producto-layout { grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: start } } .galeria-principal { margin: 0 0 .7rem } .galeria-principal img { aspect-ratio: 1 / 1; width: 100%; object-fit: contain; background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio-s); padding: .6rem } .galeria-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .5rem } .galeria-thumb { padding: 0; background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio-s); cursor: pointer; overflow: hidden; line-height: 0 } .galeria-thumb img { aspect-ratio: 1 / 1; width: 100%; object-fit: contain } .galeria-thumb:hover, .galeria-thumb.active { border-color: var(--oro) } .galeria-thumb.active { box-shadow: 0 0 0 2px rgba(203, 160, 81, .35) } .ficha-datos p { margin: .3rem 0 } .ficha-datos .etiqueta { color: var(--gris); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em } /* ═══ 11 · TABLAS ═════════════════════════════════════════════════════════ MÓVIL PRIMERO: la comparativa nace como TARJETAS APILADAS (cada fila una tarjeta, cabecera solo para lectores de pantalla, etiqueta desde data-col, la celda ganadora con ✓). El formato tabla llega con la pantalla ancha. */ .comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 1.5rem; font-size: .95rem; display: block } .comparison-table tbody, .comparison-table tr, .comparison-table td { display: block; width: 100% } .comparison-table thead, .comparison-table tr:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap } .comparison-table tr { border: 1px solid var(--gris-borde); border-radius: var(--radio-s); margin-bottom: .9rem; overflow: hidden; background: var(--blanco); box-shadow: var(--sombra-1) } .comparison-table td:first-child { background: var(--negro) !important; color: #fff !important; font-family: "Fjalla One", sans-serif; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; padding: .7rem .9rem; border: none; text-align: left } .comparison-table td:not(:first-child) { border: none; border-top: 1px solid var(--gris-borde); padding: .75rem .9rem; text-align: left; background: var(--blanco) !important } .comparison-table td:not(:first-child)::before { content: attr(data-col); display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #565656; margin-bottom: .15rem; font-weight: 700 } /* La columna que pierde NO se gris-ea: se mantiene en la tinta de la paleta. La jerarquía la marca la ganadora (oro + ✓ + fondo cálido), no el apagado de la perdedora. Un dato de tabla es contenido, no un retoque: el gris queda reservado a metadatos y notas al pie. */ .comparison-table td:not(:first-child):not(.mejor) { color: var(--tinta) } .comparison-table .mejor { border-left: 3px solid var(--oro); background: #fdfaf3 !important; font-weight: 700; color: var(--oro-txt); position: relative; padding-left: 2.1rem !important } .comparison-table .mejor::after { content: "✓"; position: absolute; left: .85rem; top: 50%; transform: translateY(-30%); color: var(--oro-txt); font-weight: 700 } @media (min-width: 701px) { .comparison-table { display: table; border-collapse: collapse } .comparison-table tbody { display: table-row-group } .comparison-table tr { display: table-row; border: none; box-shadow: none; margin: 0 } .comparison-table td { display: table-cell; width: auto } .comparison-table thead, .comparison-table tr:first-child { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; display: table-row } .comparison-table tr:first-child th { display: table-cell } .comparison-table th, .comparison-table td { border: 1px solid var(--gris-borde); padding: .7rem .9rem; text-align: center } .comparison-table td:first-child, .comparison-table th:first-child { text-align: left; background: var(--blanco) !important; color: var(--tinta) !important; font-family: inherit; text-transform: none; letter-spacing: 0; font-size: inherit } .comparison-table th { background: var(--negro) !important; color: #fff !important; font-family: "Fjalla One", sans-serif; font-weight: 400; letter-spacing: .04em } .comparison-table tr:nth-child(even) td { background: #f6f2e9 !important } .comparison-table td:not(:first-child)::before { content: none } .comparison-table td:not(:first-child):not(.mejor) { color: var(--tinta) } .comparison-table .mejor { border-left: 1px solid var(--gris-borde); padding-left: .9rem !important; background: #fdfaf3 !important } .comparison-table .mejor::after { content: none } .comparison-table tr:hover td { background: #fdfaf3 !important } } .table-note { margin-top: 1rem; font-size: .95rem; color: #565656; max-width: 75ch } .mega-card .table-note { color: #565656 } /* spec-table: clave/valor apilada en móvil */ .spec-table { width: 100%; margin-top: 1rem; font-size: .88rem; display: block; border-collapse: separate; border-spacing: 0 } .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: 100%; text-align: left } .spec-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #565656; padding: .5rem .2rem .1rem; border: none; background: none } .spec-table td { padding: 0 .2rem .55rem; border: none; border-bottom: 1px solid var(--gris-borde) } .spec-table tr:last-child td { border-bottom: none } @media (min-width: 701px) { .spec-table { display: table; border-collapse: collapse; font-size: .9rem } .spec-table tbody { display: table-row-group } .spec-table tr { display: table-row } .spec-table th, .spec-table td { display: table-cell; width: auto; border: 1px solid var(--gris-borde); padding: .45rem .7rem } .spec-table th { background: var(--crema-2); width: 36%; color: var(--tinta); font-size: inherit; text-transform: none; letter-spacing: 0 } } table:not(.comparison-table):not(.spec-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100% } /* ═══ 12 · FORMULARIOS + LEAD-QUIZ ════════════════════════════════════════ */ .contact-card { position: relative; background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio); padding: 1.4rem 1.25rem 1.5rem; overflow: hidden; box-shadow: 0 6px 18px rgba(10, 10, 10, .08) } .contact-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--oro), var(--oro-2)) } @media (min-width: 900px) { .contact-card { padding: 2.2rem 2.4rem 2rem; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)) } } .form-head { margin-bottom: 1.4rem } .form-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: .4rem } .form-head h2::before { content: none } .form-head p { color: var(--gris); font-size: .95rem; margin: 0 } .form-fila { display: grid; grid-template-columns: minmax(0, 1fr) } @media (min-width: 640px) { .form-fila { grid-template-columns: 1fr 1fr; gap: 1rem } } .campo { display: block; margin-bottom: 1rem } .campo-label { display: block; font-weight: 700; font-size: .85rem; color: var(--negro-2); margin-bottom: .4rem } .req { color: var(--oro-2); font-weight: 700 } .label-hint { font-size: .78rem; color: var(--gris); font-weight: 400; text-transform: none } .campo-input { position: relative; display: block } .campo-ic, .campo-input > svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; flex: none; z-index: 2; color: var(--gris); pointer-events: none } .campo-input--area .campo-ic, .campo-input--area > svg { top: 1.15rem; transform: none } .campo-input:focus-within > svg, .campo-input:focus-within .campo-ic { color: var(--oro-2) } form.stack input, form.stack textarea, form.stack select, .lead-form input, .lead-form textarea, .lead-form select { display: block; width: 100%; padding: .8rem .95rem; border: 1px solid var(--gris-borde); border-radius: var(--radio-s); font: inherit; font-size: 16px; background: #fbfaf8; color: var(--negro); min-height: 48px } form.stack .campo-input :is(input, textarea, select), .lead-form .campo-input :is(input, textarea, select), .campo-input :is(input, textarea, select) { padding-left: 3rem } .campo-input--area textarea { padding-top: .85rem; min-height: 6rem; resize: vertical } form.stack :is(input, textarea, select):hover, .lead-form :is(input, textarea, select):hover { border-color: #c9c2b3 } form.stack :is(input, textarea, select):focus, .lead-form :is(input, textarea, select):focus { outline: none; border-color: var(--oro); background: var(--blanco); box-shadow: 0 0 0 3px rgba(203, 160, 81, .22) } form.stack ::placeholder, .lead-form ::placeholder { color: #a8a396 } .campo-input--select select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.4rem } .campo-input--select::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 0; height: 0; margin-top: -2px; pointer-events: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--gris) } .campo-input--select:focus-within::after { border-top-color: var(--oro-2) } .contact-card .btn-big { margin-top: .4rem; width: 100% } .form-trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .45rem 1.1rem; margin: 1.2rem 0 0; padding: 0; font-size: .82rem; color: var(--gris) } .form-trust li { display: flex; align-items: center; gap: .4rem } .form-trust li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--oro); color: #fff; font-size: 10px; font-weight: 700; line-height: 1 } @media (min-width: 640px) { .form-trust { justify-content: center } } .producto-layout > div > .svc-card { margin-bottom: .8rem } .producto-layout > div > .svc-card:last-child { margin-bottom: 0 } .error-box { background: #fdecea; color: #b3261e; padding: .7rem 1rem; border-radius: var(--radio-s); margin-bottom: 1rem } .ahorro-banner { display: flex; align-items: flex-start; gap: .7rem; background: rgba(203, 160, 81, .12); border: 1px solid var(--oro); border-left-width: 4px; border-radius: var(--radio-s); padding: .95rem 1.1rem; margin-bottom: 1.5rem; font-size: .92rem; line-height: 1.6; color: var(--negro-2) } .ahorro-banner .btn-ic { color: var(--oro-2); flex: none } .ahorro-banner strong { color: var(--oro-2); font-size: 1.05rem } @media (min-width: 640px) { .ahorro-banner { align-items: center } } /* — LEAD-QUIZ del hero — */ .lead-quiz { background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio); padding: 1.35rem 1.15rem 1.25rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .22) } .lq-progress { height: 4px; background: #ece7dc; border-radius: 4px; overflow: hidden; margin-bottom: 1.2rem } .lq-progress-bar { height: 100%; width: 14%; background: var(--oro) } .lq-step legend { font-family: "Fjalla One", sans-serif; font-size: 1.05rem; letter-spacing: .02em; color: var(--negro); padding: 0; margin-bottom: 1rem } .lq-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem } .lq-opts--col { grid-template-columns: 1fr } @media (min-width: 480px) { .lq-opts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) } } .lq-opt { position: relative; display: flex; flex-direction: column; gap: .1rem; min-height: 52px; justify-content: center; padding: .9rem 1rem; background: #fbfaf8; border: 1px solid var(--gris-borde); border-radius: var(--radio-s); color: var(--negro); cursor: pointer } .lq-opt:hover { border-color: var(--oro) } .lq-opt input { position: absolute; opacity: 0; width: 0; height: 0 } .lq-opt span { font-weight: 700 } .lq-opt small { color: var(--gris); font-size: .78rem } .lq-opt:has(input:checked) { background: var(--oro); border-color: var(--oro); color: #fff } .lq-opt:has(input:checked) span { color: #fff } .lq-opt:has(input:checked) small { color: rgba(255, 255, 255, .85) } .lq-opt input:focus-visible ~ span { outline: 2px solid var(--oro); outline-offset: 3px } .lead-quiz .lq-input { background: #fbfaf8; border-color: var(--gris-borde); color: var(--negro) } .lead-quiz .lq-input:focus { background: var(--blanco) } .lq-continuar, .lq-submit { margin-top: 1rem; width: 100% } .lead-quiz .btn-ghost, .lead-quiz .lq-continuar { background: var(--oro); color: #fff !important; font-weight: 700; border: none } .lead-quiz .btn-ghost:hover, .lead-quiz .lq-continuar:hover { background: var(--oro-2) } .lq-back { display: block; margin-top: 1rem; background: none; border: none; color: var(--gris); font-size: .85rem; cursor: pointer; padding: 0; text-decoration: underline } .lq-back:hover { color: var(--oro) } .lq-trust { margin: 1rem 0 0; text-align: center; font-size: .82rem; color: var(--gris) } .lq-aviso { margin: .6rem 0 0; font-size: .84rem; color: #b3261e; font-weight: 700 } .lq-error { background: rgba(179, 38, 30, .9); color: #fff; padding: .6rem .9rem; border-radius: var(--radio-s); font-size: .88rem; margin-bottom: 1rem } /* ═══ 13 · CALCULADORA (idéntica a la original: negro + cifra oro) ═════════ */ .calc { background: var(--negro-2); color: var(--claro-osc); border: 1px solid var(--gris-borde-osc); border-radius: var(--radio); padding: clamp(1.2rem, 3vw, 1.6rem) clamp(1rem, 3vw, 1.4rem) clamp(1.2rem, 3vw, 1.8rem); position: relative; overflow: hidden; isolation: isolate } .calc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--oro), var(--oro-2)) } .calc-head { margin-bottom: 2rem } .calc :is(h2, h3) { color: #fff } .calc-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start } .calc-field { display: block; margin-bottom: 1.8rem } .calc-label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 700; font-size: .9rem; color: #fff; margin-bottom: .7rem } .calc-out { font-family: "Fjalla One", sans-serif; font-size: 1.35rem; color: var(--oro); background: none; border: none; padding: 0 } .calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: rgba(255, 255, 255, .15); border-radius: 6px; outline: none; cursor: pointer; min-height: 0; padding: 0; border: none } .calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--oro); cursor: grab; border: 3px solid var(--negro-2); box-shadow: 0 0 0 1px var(--oro), 0 3px 8px rgba(0,0,0,.4) } .calc input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--oro); cursor: grab; border: 3px solid var(--negro-2); box-shadow: 0 0 0 1px var(--oro), 0 3px 8px rgba(0, 0, 0, .4) } .calc input[type="range"]:focus-visible { outline: 3px solid var(--oro); outline-offset: 4px } .calc-scale { display: flex; justify-content: space-between; margin-top: .45rem; font-size: .76rem; color: var(--suave-osc) } .calc-sistema { border: none; padding: 0; margin: 0 } .calc-opts { display: grid; gap: .5rem; margin-top: .3rem } .calc-opt { position: relative; display: flex; flex-direction: column; gap: .05rem; padding: .65rem .9rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .15); border-radius: var(--radio-s); cursor: pointer } .calc-opt:hover { border-color: var(--oro) } .calc-opt input { position: absolute; opacity: 0; width: 0; height: 0; min-height: 0 } .calc-opt span { font-weight: 700; font-size: .92rem; color: #fff } .calc-opt small { color: var(--suave-osc); font-size: .78rem } .calc-opt:has(input:checked) { background: var(--oro); border-color: var(--oro) } .calc-opt:has(input:checked) small { color: rgba(255, 255, 255, .85) } .calc-result { background: rgba(0, 0, 0, .3); border: 1px solid var(--linea-oro); border-radius: var(--radio-s); padding: 1.8rem 1.6rem; text-align: center } .calc-result-kicker { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--suave-osc); margin: 0 0 .3rem } .calc-figure { font-family: "DM Serif Display", Georgia, serif; font-size: clamp(1.9rem, 10vw, 2.8rem); line-height: 1; color: var(--oro); margin: 0 0 1.5rem; letter-spacing: .01em } .calc-figure--neg { color: var(--suave-osc); font-size: clamp(1.5rem, 7vw, 2rem) } .calc-bars { display: grid; gap: .8rem; margin-bottom: 1.4rem; text-align: left } .calc-bar-row { display: grid; grid-template-columns: 1fr; gap: .3rem } .calc-bar-name { font-size: .8rem; color: var(--suave-osc) } .calc-bar-track { display: block; height: 12px; background: rgba(255, 255, 255, .08); border-radius: 12px; overflow: hidden } .calc-bar-fill { display: block; height: 100%; border-radius: 12px; width: 0 } .calc-bar-fill--them { background: var(--gris) } .calc-bar-fill--us { background: linear-gradient(90deg, var(--oro), var(--oro-2)) } .calc-bar-val { font-family: "Fjalla One", sans-serif; font-size: 1.05rem; color: #fff } .calc-bar-val--us { color: var(--oro) } .calc-note { font-size: .85rem; color: var(--claro-osc); margin: 0 0 1.2rem; min-height: 2.4em } .calc-disclaimer { font-size: .74rem; color: var(--suave-osc); margin: 1rem 0 0; line-height: 1.5 } @media (min-width: 861px) { .calc { padding: clamp(1.2rem, 4vw, 2.4rem); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)) } .calc-body { grid-template-columns: 1fr 1fr; gap: 2.5rem } } /* ═══ 14 · FAQ ════════════════════════════════════════════════════════════ */ details.faq { background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio-s); padding: .95rem 1.1rem; margin-bottom: .6rem; box-shadow: var(--sombra-1) } details.faq summary { font-weight: 700; cursor: pointer; list-style: none; position: relative; padding-right: 1.8rem; font-size: .96rem; line-height: 1.45; min-height: 44px; display: flex; align-items: center } details.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--oro); font-family: "Fjalla One", sans-serif; font-size: 1.2rem } details.faq:hover { border-color: var(--linea-oro) } details.faq[open] { background: var(--crema); border-color: var(--linea-oro); border-left: 4px solid var(--oro); box-shadow: var(--sombra-2) } details.faq[open] summary { color: var(--negro); margin-bottom: .6rem } details.faq[open] summary::after { transform: translateY(-50%) rotate(45deg) } details.faq p { margin-bottom: 0; font-size: .94rem; line-height: 1.7 } /* ═══ 15 · CLIENTES ═══════════════════════════════════════════════════════ */ .logos-clientes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1.4rem; margin-bottom: 1.6rem; padding: 1.1rem; background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio); box-shadow: var(--sombra-1) } .logo-cliente { display: grid; place-items: center; height: 68px; padding: .7rem .8rem; border-radius: var(--radio-s) } .logo-cliente img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .72 } @media (min-width: 560px) { .logos-clientes { grid-template-columns: repeat(3, minmax(0, 1fr)) } } @media (min-width: 900px) { .logos-clientes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem } .logo-cliente { height: 84px } } .galeria-clientes figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radio-s); aspect-ratio: 15 / 13; background: var(--crema); box-shadow: var(--sombra-1) } @media (min-width: 700px) { .galeria-clientes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem } } @media (min-width: 1000px) { .galeria-clientes { grid-template-columns: repeat(4, minmax(0, 1fr)) } .galeria-clientes > figure:first-child { grid-column: span 2; grid-row: span 2 } } /* ═══ 16 · HOME ═══════════════════════════════════════════════════════════ */ .hero-home { padding-block: 2rem 2.25rem } body.hdr-overlay .hero-home { padding-top: 5.4rem } .hero-home .wrap { display: grid; gap: 1.4rem } .hero-home h1 { color: #fff; font-size: clamp(1.8rem, 7.5vw, 2.35rem); line-height: 1.08; margin: 0 0 .75rem } .hero-home-sub { color: var(--claro-osc); font-size: .97rem; margin: 0; line-height: 1.7 } .hero-home-sub strong { color: #fff } .hero-home .kicker { font-size: .74rem; letter-spacing: .12em; margin-bottom: .5rem } @media (min-width: 900px) { .hero-home { padding-block: 4.25rem 4.5rem } body.hdr-overlay .hero-home { padding-top: 7rem } .hero-home .wrap { grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center } .hero-home h1 { font-size: clamp(2.3rem, 3.6vw, 3.1rem) } .hero-home-sub { font-size: 1.05rem; max-width: 46ch } } /* La portada usa alternancia SIMPLE de dos (no el ciclo de 4 interior) */ body.es-portada main > section.block:nth-of-type(even):not(.sec-gold) { background: var(--crema); box-shadow: 0 0 0 100vmax var(--crema); clip-path: inset(0 -100vmax) } body.es-portada main > section.block:nth-of-type(even):not(.sec-gold)::after { content: ""; position: absolute; inset: 0; background: var(--hex); background-size: 28px 49px; background-attachment: fixed; background-position: center top; opacity: .16; pointer-events: none; z-index: 0 } body.es-portada main > section.block:nth-of-type(even) > * { position: relative; z-index: 1 } .ahorro-band { background: linear-gradient(180deg, var(--negro-2), var(--negro) 70%); border-top: 1px solid var(--linea-oro); color: #fff; text-align: center; position: relative; overflow: hidden; padding: 2.6rem var(--canal) 2.8rem } .ahorro-band::before { content: ""; position: absolute; inset: 0; background: var(--hex); background-size: 28px 49px; opacity: .12; pointer-events: none } .ahorro-band > .wrap { position: relative } .ahorro-kicker { font-family: "Fjalla One", sans-serif; text-transform: uppercase; letter-spacing: .18em; font-size: .74rem; color: var(--suave-osc); margin: 0 0 .7rem } .ahorro-cifra { font-family: "DM Serif Display", Georgia, serif; font-size: clamp(1.5rem, 6vw, 2.5rem); line-height: 1.2; margin: 0 0 1.5rem } .ahorro-cifra strong { color: var(--oro); font-weight: 400; font-size: 1.22em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 18px rgba(203, 160, 81, .35) } .ahorro-band .btn-big { width: auto } .ver-todo { margin: 1.5rem 0 0 } .ver-todo a { font-family: "Fjalla One", sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--oro-txt); display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 0; text-decoration: none; border-bottom: 1px solid transparent } .ver-todo a:hover { border-bottom-color: var(--oro) } .vt-ic { width: 15px; height: 15px } .calidad-band { background: var(--blanco); border-top: 1px solid var(--gris-borde); border-bottom: 1px solid var(--gris-borde); padding: 2.6rem 0 2.4rem; text-align: center } .calidad-kicker { font-family: "Fjalla One", sans-serif; text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; color: var(--gris); margin: 0 0 .35rem } .calidad-titulo { margin: 0 0 1.7rem; font-size: clamp(1.35rem, 4.5vw, 1.9rem) } .calidad-cuadros { display: grid; grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: .8rem; max-width: 560px; margin: 0 auto } .cuadro { display: grid; place-items: center; height: 96px; padding: 1.1rem 1.3rem; background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio-s); overflow: hidden } .cuadro:hover { border-color: var(--linea-oro); box-shadow: var(--sombra-1) } .cuadro img { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain } .cuadro-rotativo img { transition: opacity .6s ease-in-out } @media (prefers-reduced-motion: reduce) { .cuadro-rotativo img { transition: none } } .cuadro .marca-texto { height: auto; padding: 0; border: none; background: none; font-size: 1.2rem; letter-spacing: .14em } .pasos { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; margin: 1.8rem 0 .6rem; text-align: left } .paso { background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .26); border-radius: var(--radio-s); padding: 1.2rem 1.2rem 1.3rem } .paso:hover { background: rgba(0, 0, 0, .28) } .paso-n { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: .85rem; background: #fff; color: var(--oro-2); font-family: "Fjalla One", sans-serif; font-size: 1.1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, .22); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%) } .paso h3 { color: #fff; margin: 0 0 .45rem; font-size: 1.02rem } .paso p { color: rgba(255, 255, 255, .92); margin: 0; font-size: .92rem; line-height: 1.65 } .pasos-cta { justify-content: center; margin-top: 1.6rem } @media (min-width: 700px) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem } } @media (min-width: 1000px) { .pasos { gap: 1.5rem } } /* ═══ 17 · BLOG ═══════════════════════════════════════════════════════════ */ .post-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr) } .post-card { background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio); padding: 1.35rem 1.3rem 1.4rem; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: var(--sombra-1) } .post-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--oro), transparent 70%); transform: scaleX(0); transform-origin: left } .post-card:hover { box-shadow: var(--sombra-2); border-color: var(--linea-oro) } .post-card:hover::before { transform: scaleX(1) } .post-card :is(h2, h3) { font-size: 1.15rem; margin: 0 0 .6rem } .post-card :is(h2, h3) a { text-decoration: none; color: inherit } .post-card :is(h2, h3) a:hover { color: var(--oro-txt) } .post-card p { font-size: .93rem } .post-meta { font-size: .78rem; color: var(--oro-txt); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .5rem } .post-more { margin-top: auto; padding-top: 1rem; margin-bottom: 0 } .post-more a { display: inline-flex; align-items: center; gap: .4rem; color: var(--oro-txt); font-weight: 700; font-size: .9rem; text-decoration: none } .post-body { max-width: 760px; margin: 0 auto; padding-top: .5rem } .post-contenido p { max-width: 68ch; margin-bottom: 1.1rem; line-height: 1.8 } .post-contenido p:first-of-type { font-size: 1.06rem; color: var(--negro-2) } @media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (min-width: 960px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) } .post-card { padding: 1.7rem 1.75rem 1.6rem } .post-grid > .post-card:first-child:nth-last-child(n + 3) { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem 2rem; align-items: start; background: var(--crema) } .post-grid > .post-card:first-child:nth-last-child(n + 3) :is(h2, h3) { grid-column: 1; font-size: 1.55rem } .post-grid > .post-card:first-child:nth-last-child(n + 3) .post-meta { grid-column: 1 } .post-grid > .post-card:first-child:nth-last-child(n + 3) > p:not(.post-meta):not(.post-more) { grid-column: 2; grid-row: 1 / span 3; align-self: center } } /* ═══ 18 · CIERRES DE CONVERSIÓN ══════════════════════════════════════════ */ .dark-band, .cta-video { position: relative; overflow: hidden; isolation: isolate; color: #fff; text-align: center; padding: 2.75rem 0 } .dark-band { background: var(--negro) } .cta-video { background: linear-gradient(120deg, var(--oro), var(--oro-2)) } /* VÍDEO DE FONDO — el mismo vídeo que el hero de esta misma página, reutilizado como fondo del cierre. z-index:-2, por debajo de todo lo demás. El fondo sólido de la sección (var(--negro) o el degradado dorado, arriba) sigue ahí: es el color de fondo real de la caja, así que pinta SIEMPRE antes que cualquier hijo, vídeo incluido. Si el vídeo no carga, el navegador no lo soporta o JavaScript está desactivado, ese color se ve igual que antes de este cambio — es el fallback automático, no uno nuevo que haya que mantener aparte. */ .dark-band > video, .cta-video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; pointer-events: none; z-index: -2; } /* TINTE DE COLOR — "manteniendo su color": el mismo negro o el mismo degradado dorado que tenía la sección, ahora semitransparente para dejar pasar el vídeo por debajo. Sin vídeo, este tinte se suma al fondo sólido y el resultado es indistinguible de como estaba antes de añadir vídeo. El tono dorado del CTA se oscurece un 50% hacia negro antes de aplicar la transparencia. Es necesario: medido contra el peor caso real (un fotograma de vídeo blanco detrás), el oro tal cual solo llegaba a 2,37:1 aunque se subiera la opacidad al 98% — el propio oro de marca, de por sí, ya daba 2,42:1 con el fondo sólido ORIGINAL sin vídeo (un contraste insuficiente que existía antes de este cambio y que se aprovecha para corregir aquí). Con el oro oscurecido, el peor caso sube a 5,8:1 / 5,4:1 — por encima del 4,5:1 de la WCAG AA — y sigue leyéndose como oro, ahora en un tono más profundo, coherente con --oro-2. */ .dark-band::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(10, 10, 10, .74); } .cta-video::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(120deg, rgba(106, 85, 46, .92), rgba(96, 76, 38, .92)); } /* PANAL — "manteniendo... hexágonos": esta regla no se toca, es exactamente la misma que ya existía. El panal queda por delante del vídeo y de su tinte (z-index:0 > -1 > -2), así que se ve idéntico a como se veía antes. */ .dark-band::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(420px 200px at 50% 100%, rgba(203, 160, 81, .16), transparent 70%), var(--hex); background-size: auto, 28px 49px; opacity: .9 } .cta-video::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--hex); background-size: 30px 52px; filter: brightness(8); opacity: .2; pointer-events: none } /* Corrección: el selector traía un `.wrap` duplicado (`.cta-video > .wrap > .wrap`) que no coincidía con ningún elemento real del marcado, así que el contenido de `.cta-video` no tenía z-index explícito. Con las nuevas capas por debajo esto ya importa: se iguala al patrón correcto de `.dark-band`. */ .dark-band > .wrap, .cta-video > .wrap { position: relative; z-index: 1 } .dark-band :is(h2, h3), .cta-video :is(h2, h3) { color: #fff; margin-bottom: .95rem } .dark-band h2::before, .cta-video h2::before { content: ""; display: block; width: 44px; height: 6px; margin: 0 auto .95rem; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 8px 100%) } .dark-band h2::before { background: var(--oro) } .cta-video h2::before { background: #fff } .dark-band p { color: var(--suave-osc) } .cta-video p { color: #fdf6e8 } .dark-band .measure, .cta-video .measure { margin-inline: auto; font-size: 1rem } .dark-band .mt-2, .cta-video .mt-2 { display: grid; gap: .65rem; margin-top: 1.5rem } .dark-band .mt-2 .btn, .cta-video .mt-2 .btn { width: 100% } .dark-band a:not(.btn), .sec-gold a:not(.btn) { color: var(--oro) } .cta-video .btn-amber { background: var(--negro) } .cta-video .btn-amber:hover { background: #000 } .cta-video .btn-ghost { border-color: #fff; color: #fff } .cta-video .btn-ghost:hover { background: #fff; color: var(--negro) } @media (min-width: 640px) { .dark-band .mt-2, .cta-video .mt-2 { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem } .dark-band .mt-2 .btn, .cta-video .mt-2 .btn { width: auto } } @media (min-width: 900px) { .dark-band, .cta-video { padding: 4.25rem 0; text-align: left } .dark-band h2::before, .cta-video h2::before { margin-left: 0 } .dark-band .measure, .cta-video .measure { margin-left: 0 } .dark-band .mt-2, .cta-video .mt-2 { justify-content: flex-start } } /* ═══ 19 · TICKER, FIJOS, COOKIES, FOOTER ═════════════════════════════════ */ .ticker { overflow: hidden; padding: 1.1rem 0; background: var(--blanco); border-bottom: 1px solid var(--gris-borde); position: relative } .ticker-track { display: flex; align-items: center; width: max-content; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-inline: 1.5rem } .ticker-track > * { scroll-snap-align: center } .ticker img { height: 48px; width: auto; margin-right: 3rem; flex: 0 0 auto } @media (min-width: 701px) { .ticker { padding: 1.75rem 0; min-height: 96px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) } .ticker-track { overflow: visible; padding-inline: 0 } .ticker img { height: 64px; margin-right: 4.5rem } } /* WhatsApp: píldora a lo ancho en móvil, círculo en escritorio. SIN animación de entrada ni transform en hover (es un botón). */ .wa-fab { position: fixed; z-index: 120; display: flex; align-items: center; justify-content: center; background: #25D366; color: #fff; text-decoration: none; left: .9rem; right: .9rem; bottom: calc(.7rem + env(safe-area-inset-bottom, 0px)); height: 46px; border-radius: 999px; box-shadow: 0 6px 20px rgba(37, 211, 102, .38) } .wa-fab:hover { background: #1fb457 } .wa-fab svg { width: 24px; height: 24px } body { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)) } @media (min-width: 901px) { .wa-fab { left: auto; right: 1.25rem; bottom: 1.5rem; width: 56px; height: 56px; border-radius: 50% } body { padding-bottom: 0 } } @media (max-height: 450px) and (orientation: landscape) { .wa-fab { display: none } body { padding-bottom: 0 } } .cookie-banner { position: fixed; left: .75rem; right: .75rem; z-index: 600; bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); max-width: 720px; margin-inline: auto; background: var(--negro-2); color: #e8e4d9; border: 1px solid var(--gris-borde-osc); border-radius: var(--radio); box-shadow: var(--sombra-2); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; align-items: stretch } .cookie-banner p { margin: 0; font-size: .88rem; line-height: 1.55 } .cookie-banner a { color: var(--oro) } .cookie-banner button { appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; line-height: 1.2 } .cookie-actions { display: flex; gap: .5rem; flex-shrink: 0; justify-content: stretch } .cookie-actions > * { flex: 1; text-align: center; justify-content: center } .cookie-rechazar { background: none; border: 1px solid var(--gris-borde-osc); color: #ddd; padding: .6rem 1rem; border-radius: var(--radio-s); font-size: .9rem; min-height: 44px } .cookie-rechazar:hover { border-color: var(--oro); color: var(--oro) } .cookie-banner .btn { font-size: .95rem } .cookie-banner[hidden] { display: none !important } @media (min-width: 901px) { .cookie-banner { left: 1rem; right: 1rem; bottom: 1rem; flex-direction: row; align-items: center; justify-content: space-between } .cookie-actions > * { flex: none } } .ftr { background: var(--negro); color: var(--suave-osc); padding: 3rem var(--canal) 1.5rem; margin-top: 3rem; border-top: 3px solid var(--oro); position: relative; overflow: hidden } .ftr::before { content: ""; position: absolute; inset: 0; background: var(--hex); background-size: 28px 49px; opacity: .08; pointer-events: none } .ftr > * { position: relative } .ftr a { color: var(--suave-osc); text-decoration: none } .ftr a:hover { color: var(--oro) } .ftr-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem } .ftr-head { font-family: "Fjalla One", sans-serif; color: var(--oro); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .6rem } .ftr-desc { font-size: .9rem; color: var(--suave-osc); max-width: 34ch } .ftr-grid a { display: flex; align-items: center; padding: .55rem 0; font-size: .92rem; min-height: 44px } .ftr-cta { margin-top: 1rem } .ftr-cta a { display: inline-flex; min-height: 0 } .ftr-social { display: flex; gap: .75rem; margin-top: .75rem } .ftr-social a { display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; padding: 0; border: 1px solid var(--oro); border-radius: 50%; color: var(--oro) } .ftr-social a svg { display: block } .ftr-social a:hover { background: var(--oro); color: var(--negro) } .ftr-legal { max-width: 1100px; margin: 2rem auto 0; padding-top: 1.25rem; border-top: 1px solid #222; font-size: .8rem; color: var(--gris); display: flex; flex-wrap: wrap; gap: .4rem 1.5rem } .ftr-legal a { color: var(--gris) } .legal-body { max-width: 800px } .legal-body h2 { margin-top: 2rem } @media (min-width: 640px) { .ftr-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2rem } } /* ═══ 20 · MOVIMIENTO ═════════════════════════════════════════════════════ Solo TARJETAS entran con reveal (nunca botones ni accesos de navegación). El rescate garantiza que nada quede invisible si el observer no dispara. */ /* Los accesos del quad-nav son navegación: el JS les pone reveal, aquí se anula */ /* ═══ 21 · ACCESIBILIDAD ══════════════════════════════════════════════════ */ [id] { scroll-margin-top: 5.5rem } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--oro); color: var(--negro); font-weight: 700; padding: .8rem 1.2rem; border-radius: 0 0 var(--radio-s) 0; text-decoration: none } .skip-link:focus { left: 0 } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--oro); outline-offset: 2px } .breadcrumbs { font-size: .78rem; color: var(--gris); margin-bottom: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--gris-borde); letter-spacing: .02em } .breadcrumbs a { color: var(--gris); text-decoration: none } .breadcrumbs a:hover { color: var(--oro-txt) } .breadcrumbs span { margin: 0 .35rem } .breadcrumbs span[aria-current] { color: var(--negro); margin: 0 } @media (min-width: 900px) { .breadcrumbs { font-size: .82rem } } /* ═══ 22 · UTILIDADES ═════════════════════════════════════════════════════ */ .measure { max-width: 68ch } .lead-p { font-size: 1.05rem } .lead { font-size: 1rem } .center { text-align: center } .mt-2 { margin-top: 1.5rem } .mb-1 { margin-bottom: 1rem } .muted { color: var(--gris) } .who-card .img-hex { padding: .9rem } section.block > .measure:first-of-type, section.block > .wrap > .measure:first-of-type { font-size: 1.02rem; line-height: 1.7; margin-bottom: 1.6rem } @media (min-width: 900px) { section.block > .measure:first-of-type, section.block > .wrap > .measure:first-of-type { font-size: 1.08rem } } /* Rejillas: cinturón universal contra desborde */ .cols-3, .svc-cards, .who-cards, .plans, .post-grid, .testi-grid, .kit-grid, .grid, .stats, .marcas-cards, .galeria-clientes, .logos-clientes, .quad-nav, .pasos, .cam-duo, .proveedores { max-width: 100% } /* ═══ 23 · IMPRESIÓN ══════════════════════════════════════════════════════ */ @media print { .hdr, .wa-fab, .cookie-banner, .sticky-call, .skip-link { display: none !important } body { padding-bottom: 0 } } /* ═══ 24 · SIMETRÍA Y CUADRATURA ══════════════════════════════════════════ Auditoría de simetría sobre 11 páginas × 2 anchos. Cuatro hallazgos y su corrección. Este bloque cierra el archivo: es la capa que garantiza que nada quede descuadrado, descentrado ni huérfano. ── 1 · REJILLAS SIN HUÉRFANOS ────────────────────────────────────────── Medido en escritorio: .who-cards 5 tarjetas en 3 columnas → última fila con 2 (hueco a la derecha, la retícula se rompe visualmente) .testi-grid 4 tarjetas en 3 columnas → última fila con 1 (peor aún: una tarjeta sola de 330px junto a 660px de vacío) La solución NO es forzar 5 columnas (quedarían estrechísimas). Es hacer que la última fila se REPARTA el ancho completo, de modo que el bloque siempre termine en un borde recto. Se usa `:nth-last-child` para detectar cuántos elementos quedan sueltos sin tocar el HTML ni el orden del DOM. */ @media (min-width: 960px) { /* — 5 elementos en 3 columnas: los 2 últimos ocupan media fila cada uno — */ .who-cards > *:nth-last-child(2):nth-child(4), .who-cards > *:nth-last-child(1):nth-child(5) { grid-column: span 3 } .who-cards:has(> *:nth-child(5)):not(:has(> *:nth-child(7))) { grid-template-columns: repeat(6, minmax(0, 1fr)) } .who-cards:has(> *:nth-child(5)):not(:has(> *:nth-child(7))) > * { grid-column: span 2 } .who-cards:has(> *:nth-child(5)):not(:has(> *:nth-child(7))) > *:nth-child(4), .who-cards:has(> *:nth-child(5)):not(:has(> *:nth-child(7))) > *:nth-child(5) { grid-column: span 3 } /* — .cols-3 con 5 paneles: mismo criterio — */ .cols-3:has(> *:nth-child(5)):not(:has(> *:nth-child(7))) { grid-template-columns: repeat(6, minmax(0, 1fr)) } .cols-3:has(> *:nth-child(5)):not(:has(> *:nth-child(7))) > * { grid-column: span 2 } .cols-3:has(> *:nth-child(5)):not(:has(> *:nth-child(7))) > *:nth-child(4), .cols-3:has(> *:nth-child(5)):not(:has(> *:nth-child(7))) > *:nth-child(5) { grid-column: span 3 } /* — 4 elementos en 3 columnas: pasan a 2×2, retícula perfecta — */ .who-cards:has(> *:nth-child(4)):not(:has(> *:nth-child(5))), .cols-3:has(> *:nth-child(4)):not(:has(> *:nth-child(5))) { grid-template-columns: repeat(2, minmax(0, 1fr)) } } /* — .testi-grid: 4 testimonios en 2×2 en vez de 3+1 — */ @media (min-width: 1200px) { .testi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } /* Con 3 o con 6 sí compensa la fila de tres */ .testi-grid:has(> *:nth-child(3)):not(:has(> *:nth-child(4))), .testi-grid:has(> *:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)) } } /* — quad-nav en móvil: el 5º accesso ocupa la fila entera (ya era así) y se confirma que el conjunto cierra en rectángulo — */ .quad-nav > a:nth-last-child(1):nth-child(odd) { grid-column: 1 / -1 } /* ── 2 · ALTURAS IGUALES ENTRE HERMANOS ───────────────────────────────── Las rejillas ya igualan altura por defecto (`align-items: stretch`), pero solo si la tarjeta se estira de verdad. Las que llevan `height:auto` o contenido corto se quedaban bajas. Se fuerza el estirado y el reparto interno para que el pie (botón o enlace) caiga SIEMPRE a la misma altura. */ .cols-3 > *, .svc-cards > *, .who-cards > *, .plans > *, .post-grid > *, .kit-grid > *, .grid > *, .testi-grid > *, .marcas-cards > *, .pasos > *, .cam-duo > * { height: 100%; margin-bottom: 0 } .panel, .svc-card, .who-card, .case, .post-card, .marca-card, .paso { display: flex; flex-direction: column } /* El último elemento se pega abajo: los pies quedan alineados entre hermanos */ .panel > *:last-child, .svc-card > *:last-child, .post-card > *:last-child { margin-bottom: 0 } .post-more, .kit-card .kit-cta, .plan .btn { margin-top: auto } /* ── 3 · CUADRATURA: UN SOLO SISTEMA DE RADIOS ────────────────────────── Se detectaron tres radios conviviendo (12px, 8px y 8px/0). El mixto venía de `.case`, que llevaba las esquinas izquierdas a 0 por su filete lateral. Resultado: en una fila de testimonios unas cajas se veían cuadradas por la izquierda y otras redondeadas. Se unifica: TODAS las tarjetas comparten el mismo radio y el filete se dibuja por dentro con box-shadow, que no deforma la esquina. */ /* El resto de contenedores al radio grande, las píldoras aparte */ .panel, .svc-card, .post-card, .who-card, .plan, .card, .kit-card, .mega-card, .contact-card, details.faq, .lead-quiz, .calc, .stats, .logos-clientes, .marca-card, .proveedores-logos figure { border-radius: var(--radio) } .galeria-clientes figure, .galeria-thumb, .marca-logo, .cuadro, .lq-opt, .calc-opt, .calc-result, .paso { border-radius: var(--radio-s) } .chip-active, .filter-links a, .kit-card .kit-tags span, .plan-badge, .wa-fab, .hdr-tel, .ftr-social a { border-radius: 999px } /* ── 4 · CENTRADO DEL BLOQUE DE ACCIÓN ────────────────────────────────── En móvil los grupos de botones son rejillas de una columna a ancho completo: quedan perfectamente alineados por definición. En escritorio pasan a fila y deben compartir línea base y altura, no solo posición. */ .actions, .mt-2, .pasos-cta, .cookie-actions { align-items: center } @media (min-width: 640px) { .actions, .dark-band .mt-2, .cta-video .mt-2 { align-items: stretch } /* Botones hermanos: misma altura aunque uno tenga texto más largo */ .actions > .btn, .mt-2 > .btn { min-height: 48px } } /* Bloques de acción centrados donde el contenido lo está */ body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold) .actions, body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold) .mt-2 { justify-content: center } /* El pie de las tarjetas de cliente con foto: el texto no debe empujar la caja y descuadrar la fila */ .who-card--foto .who-body p { margin-bottom: 0 } /* Las cifras: cada celda cuadrada respecto a sus hermanas */ .stat { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; text-align: center; padding: 1.35rem .8rem; min-height: 104px; box-shadow: inset -1px 0 0 rgba(203, 160, 81, .16), inset 0 -1px 0 rgba(203, 160, 81, .16) } /* ═══════════════════════════════════════════════════════════════════════════ 25 · REESCRITURA DE SECCIONES · v9 ─────────────────────────────────────────────────────────────────────────── Cinco zonas rehechas desde cero tras medirlas en el navegador. Este bloque va al final y tiene la última palabra sobre todo lo anterior. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 25.1 · MENÚ DE 5 ACCESOS ───────────────────────────────────────────── FALLO MEDIDO (escritorio 1280px): `repeat(auto-fit, minmax(200px,1fr))` generaba 5 columnas y los 5 accesos cabían en una fila. Pero la regla `nth-child(5) { grid-column: 1/-1 }` —pensada para móvil— seguía activa y empujaba el quinto a una segunda fila de 1216px. Resultado: cuatro botones arrimados a la izquierda y uno gigante debajo. Exactamente lo que describías. REESCRITURA: el número de columnas se declara explícitamente por tramo, en vez de dejarlo a `auto-fit`, y la regla del quinto se limita al tramo donde tiene sentido. Simetría en los cuatro tramos: < 560px 2 columnas · el 5º ocupa la fila entera (2+2+1) 560–899 3 columnas · los 2 últimos se reparten la fila (3+2) 900–1199 3 columnas · igual (3+2) ≥ 1200px 5 columnas · TODOS en una sola fila (5) En cada tramo el bloque cierra en rectángulo perfecto: sin huecos. */ .quad-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; background: var(--negro); padding: 1.1rem var(--canal); align-items: stretch } /* El quinto ocupa la fila completa SOLO cuando quedaría huérfano */ .quad-nav > a:nth-child(5):last-child { grid-column: 1 / -1 } @media (min-width: 560px) { .quad-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem } /* 5 en 3 columnas → los dos últimos se reparten la segunda fila */ .quad-nav > a:nth-child(4):nth-last-child(2) { grid-column: span 1 } .quad-nav:has(> a:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)) } .quad-nav:has(> a:nth-child(5):last-child) > a { grid-column: span 2 } .quad-nav:has(> a:nth-child(5):last-child) > a:nth-child(4), .quad-nav:has(> a:nth-child(5):last-child) > a:nth-child(5) { grid-column: span 3 } } @media (min-width: 1200px) { /* Caben los cinco en línea: se anula todo reparto anterior */ .quad-nav, .quad-nav:has(> a:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; padding: 1.6rem var(--canal) } .quad-nav > a, .quad-nav:has(> a:nth-child(5):last-child) > a, .quad-nav:has(> a:nth-child(5):last-child) > a:nth-child(4), .quad-nav:has(> a:nth-child(5):last-child) > a:nth-child(5) { grid-column: auto } } /* El contenido de cada acceso, centrado en los dos ejes SIEMPRE */ .quad-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .45rem; min-height: 68px; padding: .95rem .6rem; font-family: "Fjalla One", sans-serif; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25; background: var(--negro-2); color: #fff; text-decoration: none; border: 1px solid #3a3a3a; border-radius: var(--radio-s); clip-path: none; overflow-wrap: break-word } /* El quinto, cuando va a lo ancho, en fila (icono al lado del texto). Conserva la MISMA altura que sus hermanos: en una fila propia `stretch` no iguala nada, así que se fija explícitamente. */ .quad-nav > a:nth-child(5):last-child { flex-direction: row; gap: .6rem; min-height: 75px } @media (min-width: 1200px) { .quad-nav > a { font-size: .88rem; letter-spacing: .06em; min-height: 92px; padding: 1.2rem .8rem } .quad-nav > a:nth-child(5):last-child { flex-direction: column; gap: .45rem } } .quad-nav a .qn-ic { flex: none; width: 22px; height: 22px; color: var(--oro) } .quad-nav a:hover, .quad-nav a[aria-current="page"] { background: var(--oro); border-color: var(--oro) } .quad-nav a:hover .qn-ic, .quad-nav a[aria-current="page"] .qn-ic { color: #fff } /* ─── 25.2 · SERVICE CARDS DEL HERO ──────────────────────────────────────── FALLO MEDIDO (alarmas, 390px): las tres tarjetas debían ser gemelas pero card2 medía 129px frente a 156px de las otras dos. Además el `clip-path` con la esquina cortada anulaba el `border-radius` y recortaba el borde superior: es el «entrecortado» y la carga sucia que describías — el navegador debe recalcular la máscara en cada repintado, y sobre un hero con vídeo de fondo eso se ve como parpadeo. REESCRITURA COMPLETA: · Fuera el clip-path. La esquina se insinúa con un filete diagonal que NO recorta la caja (un degradado en la esquina), así que no hay repintado de máscara ni borde comido. · Altura idéntica garantizada: la rejilla estira y la tarjeta reparte su interior, de modo que el texto largo no agranda una y deja corta otra. · El título dorado deja de ser el problema: tipografía y color fijados sin depender de ninguna regla anterior. */ .svc-cards { display: grid; gap: var(--gap); margin: 2rem 0 .5rem; grid-template-columns: minmax(0, 1fr); align-items: stretch; grid-auto-rows: 1fr } @media (min-width: 560px) { .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (min-width: 900px) { .svc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) } } /* Tres tarjetas nunca deben partirse 2+1 en tableta: o 1, o 3 */ @media (min-width: 560px) and (max-width: 899px) { .svc-cards:has(> :nth-child(3)):not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)) } } /* Exactamente DOS tarjetas: en pantallas anchas la rejilla de 3 columnas dejaba un hueco vacío a la derecha (las 2 cards pegadas a la izquierda). Se centran limitando el contenedor y usando 2 columnas de ancho contenido. */ @media (min-width: 900px) { .svc-cards:has(> :nth-child(2)):not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; } } .svc-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 1.35rem 1.3rem 1.4rem; background: linear-gradient(160deg, #101010, #000 60%); border: 1px solid rgba(203, 160, 81, .38); border-radius: 0; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); overflow: hidden; color: #f2efe8; box-shadow: 0 8px 24px rgba(0, 0, 0, .28) } /* Filete superior dorado (sustituye al bisel recortado) */ .svc-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--oro), transparent 75%) } /* Esquina insinuada: triángulo pintado, sin recortar la caja */ .svc-card::after { content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px; background: linear-gradient(225deg, rgba(203, 160, 81, .35) 0 50%, transparent 50%); pointer-events: none } .svc-card:hover { border-color: var(--oro); box-shadow: 0 12px 28px rgba(203, 160, 81, .22) } .svc-card h2, .svc-card h3, .svc-card h4 { font-family: "Fjalla One", sans-serif; letter-spacing: .1em; text-transform: uppercase; font-size: .92rem; line-height: 1.3; color: var(--oro) !important; margin: 0 0 .55rem } .svc-card p { margin: 0 0 .8rem; line-height: 1.65 } .svc-card p:last-child { margin-bottom: 0 } /* El pie (botón o enlace) cae a la misma altura en las tres tarjetas */ .svc-card > .btn, .svc-card > p:last-of-type + .btn { margin-top: auto } @media (min-width: 900px) { .svc-card { padding: 1.6rem 1.5rem 1.55rem } .svc-card h3 { font-size: 1rem } } /* Dentro del hero: sin sombra pesada (el fondo ya es oscuro) y con más contraste de borde para despegarse del vídeo. */ .hero .svc-card, .hero-has-video .svc-card { box-shadow: none; background: rgba(12, 12, 12, .82); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-color: rgba(203, 160, 81, .45) } /* ─── 25.3 · CÁMARAS BULLETCAM / TURRETCAM ───────────────────────────────── FALLO: `.who-card--foto > img` aplica `object-fit: cover` con relación 3/2. Funciona con fotos de instalaciones (clientes), pero estas dos imágenes son PNG de producto —cámara centrada sobre fondo blanco—, así que `cover` las recortaba por arriba y abajo y se comía la cámara. REESCRITURA: la ficha de cámara es una tarjeta propia, no una foto de caso. · `object-fit: contain` y fondo blanco: el producto se ve entero. · Relación 4/3 con aire interior, que es como se fotografía un producto. · Las dos tarjetas, gemelas exactas en altura. */ .cam-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: 1.6rem; align-items: stretch } @media (min-width: 700px) { .cam-duo { grid-template-columns: repeat(2, minmax(0, 1fr)) } } .cam-card { display: flex; flex-direction: column; height: 100%; background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-1) } .cam-card:hover { border-color: var(--linea-oro); box-shadow: var(--sombra-2) } /* La imagen del producto: entera, centrada, con aire. NUNCA recortada. Especificidad elevada a propósito: `.who-card--foto > img` (0,2,1) impone `object-fit: cover` porque la tarjeta lleva ambas clases en el HTML. Aquí se combinan las dos para ganar sin recurrir a !important. */ .who-card--foto.cam-card > img, .cam-card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--blanco); padding: 1.1rem; border-bottom: 1px solid var(--gris-borde); transform: none !important } .who-card--foto.cam-card:hover > img, .cam-card:hover > img { transform: none !important } .cam-card .who-body { flex: 1; display: flex; flex-direction: column; padding: 1.15rem 1.25rem 1.35rem; text-align: left } .cam-card .who-body h3 { font-family: "Fjalla One", sans-serif; text-transform: uppercase; letter-spacing: .09em; font-size: .95rem; color: var(--oro-txt); margin: 0 0 .55rem } .cam-card .who-body p { margin: 0; font-size: .93rem; line-height: 1.68; color: var(--tinta) } @media (min-width: 900px) { .cam-card > img { padding: 1.5rem } .cam-card .who-body { padding: 1.4rem 1.5rem 1.5rem } } /* ─── 25.4 · DARK-BAND: PANAL DIFUMINADO ─────────────────────────────────── FALLO MEDIDO: la capa del panal iba a `opacity: .9`, con un oro medio de rgb(144,114,62) y un 3,1% de píxeles muy marcados. Los hexágonos competían con el titular y el botón, que es justo lo contrario de lo que debe hacer una banda de cierre. REESCRITURA: el panal baja a .28 y se difumina en vertical, de modo que viste la parte alta y desaparece donde caen el texto y el CTA. El halo dorado tras el botón se conserva —guía la mirada— pero más suave. */ /* PANAL — cobertura completa, SIN desvanecido. Antes tenía una máscara que lo hacía desaparecer entre el 45% y el 85% de la altura: en un cierre de ~320px eso significa que el hexágono se perdía en más del 80% de la banda, el mismo fallo de "solo se ve una parte" que ya se corrigió en otras secciones de la web. Aquí no se había tocado hasta ahora. Se quita la máscara y el panal cubre toda la banda, uniforme. */ .dark-band::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(460px 220px at 50% 100%, rgba(203, 160, 81, .13), transparent 72%), var(--hex); background-size: auto, 30px 52px; opacity: .28 } /* La sección dorada: el panal en blanco también se suaviza */ main > section.block.sec-gold::before { filter: brightness(6); opacity: .12 } .cta-video::before { filter: brightness(6); opacity: .16 } /* ─── 25.5 · PÁGINA DE CLIENTES · REESCRITA ──────────────────────────────── La página existe para una sola cosa: demostrar que otros ya confían. Se rehace por completo con jerarquía de prueba social y simetría estricta. Orden de peso: cifras → tipologías → logos → testimonios → galería. */ /* — 1 · CIFRAS: panel oscuro, retícula perfecta — */ .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.6rem; border-radius: var(--radio); overflow: hidden; position: relative; background: linear-gradient(150deg, var(--negro-2), #000); border: 1px solid var(--linea-oro); box-shadow: 0 12px 30px rgba(10, 10, 10, .18) } .stats::before { content: ""; position: absolute; inset: 0; background: var(--hex); background-size: 28px 49px; opacity: .07; pointer-events: none } .stat:nth-child(2n) { box-shadow: inset 0 -1px 0 rgba(203, 160, 81, .16) } .stat:nth-last-child(-n/**/+2) { box-shadow: inset -1px 0 0 rgba(203, 160, 81, .16) } .stat:last-child { box-shadow: none } .stat b { display: block; font-family: "DM Serif Display", Georgia, serif; font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.1; color: var(--oro); font-variant-numeric: tabular-nums; margin-bottom: .25rem } .stat span { font-size: .78rem; color: var(--suave-osc); line-height: 1.4 } @media (min-width: 700px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)) } .stat { padding: 1.6rem 1rem; min-height: 120px; box-shadow: inset -1px 0 0 rgba(203, 160, 81, .16) } .stat:nth-child(2n) { box-shadow: inset -1px 0 0 rgba(203, 160, 81, .16) } .stat:last-child { box-shadow: none } .stat b { font-size: 2.1rem } .stat span { font-size: .84rem } } /* — 2 · TIPOLOGÍAS CON FOTO: tarjetas gemelas — */ .who-cards--fotos { align-items: stretch } .who-card--foto { display: flex; flex-direction: column; height: 100%; padding: 0; text-align: left; background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-1) } .who-card--foto > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--gris-borde); background: var(--crema) } .who-card--foto .who-body { flex: 1; display: flex; flex-direction: column; padding: 1.1rem 1.2rem 1.25rem } .who-card--foto .who-body h3 { font-family: "Fjalla One", sans-serif; text-transform: uppercase; letter-spacing: .09em; font-size: .82rem; color: var(--oro-txt); margin: 0 0 .45rem } .who-card--foto .who-body p { margin: 0; font-size: .9rem; line-height: 1.62; color: var(--tinta) } /* — 3 · MURO DE LOGOS: retícula sin huérfanos — */ .logos-clientes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 1.4rem 0 1.6rem; padding: 1.1rem; background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio); box-shadow: var(--sombra-1) } @media (min-width: 560px) { .logos-clientes { grid-template-columns: repeat(3, minmax(0, 1fr)) } } @media (min-width: 900px) { .logos-clientes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem } } .logo-cliente { display: grid; place-items: center; height: 76px; padding: .7rem .8rem; border-radius: var(--radio-s) } .logo-cliente img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .7 } @media (min-width: 900px) { .logo-cliente { height: 88px } } /* — 4 · TESTIMONIOS: tarjetas iguales, cita centrada — */ .testi-grid { align-items: stretch } .testi-cell .case { width: 100%; margin-bottom: 0 } .testi-grid .case { display: flex; flex-direction: column; padding: 1.6rem 1.4rem 1.4rem; background: var(--blanco); border: 1px solid var(--gris-borde); border-left: none; border-radius: var(--radio); box-shadow: inset 3px 0 0 var(--oro), var(--sombra-1) } .testi-grid .case h3 { font-family: "Merriweather", Georgia, serif; font-size: .92rem; letter-spacing: .04em; color: var(--oro-txt); margin: 0 0 .7rem } .testi-grid .case p { font-style: italic; line-height: 1.72; margin: 0 } .testi-grid .case p + p { margin-top: .6rem } /* — 5 · GALERÍA: mosaico cuadrado — */ .galeria-clientes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 1.6rem } @media (min-width: 700px) { .galeria-clientes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem } } @media (min-width: 1000px) { .galeria-clientes { grid-template-columns: repeat(4, minmax(0, 1fr)) } } .galeria-clientes figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radio-s); aspect-ratio: 1 / 1; background: var(--crema); box-shadow: var(--sombra-1) } .galeria-clientes img { width: 100%; height: 100%; object-fit: cover } .galeria-clientes figure:hover { box-shadow: 0 14px 30px rgba(203, 160, 81, .22) } .galeria-clientes figure::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: var(--radio-s); pointer-events: none } .galeria-clientes figure:hover::after { border-color: var(--linea-oro) } /* La primera foto, doble, solo si el resto completa la retícula */ @media (min-width: 1000px) { .galeria-clientes:has(> figure:nth-child(7)) > figure:first-child { grid-column: span 2; grid-row: span 2 } } /* ═══════════════════════════════════════════════════════════════════════════ 26 · CORRECCIONES SOBRE CAPTURAS REALES · v10 ─────────────────────────────────────────────────────────────────────────── Tres fallos que las mediciones automáticas NO detectaban porque los fixtures de prueba tenían todos la misma proporción. Con logos reales —de 400×70 a 400×400— el sistema se rompía. Las capturas del cliente lo dejaron claro. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 26.1 · MURO DE LOGOS: LA CAJA MANDA ────────────────────────────────── FALLO MEDIDO: 6 de 11 logos se salían de su celda, hasta 127px por abajo. ROSMA pisaba a MIDAS, Euroeco desbordaba por la derecha. CAUSA: `.logo-cliente` era un con `display: grid` y altura fija de 88px, y la imagen llevaba `max-width/max-height: 100%`. Pero un elemento reemplazado (img) dentro de un grid item NO respeta `max-height: 100%` si el contenedor no tiene una altura definitiva en el eje: el navegador usa la altura intrínseca de la imagen y desborda. Con logos cuadrados (400×400) el desbordamiento era brutal. ARREGLO: la imagen deja de depender de porcentajes y pasa a `object-fit: contain` sobre una caja de dimensiones absolutas (100% del padre, que sí está resuelto). `contain` garantiza que la imagen entera cabe dentro, sea cual sea su proporción, sin recortar ni deformar. `overflow: hidden` en la celda es el cinturón por si algún motor antiguo falla. */ .logo-cliente { display: flex; align-items: center; justify-content: center; height: 76px; padding: .6rem .7rem; overflow: hidden; border-radius: var(--radio-s) } .logo-cliente img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; filter: grayscale(1); opacity: .7 } .logo-cliente:hover { background: var(--crema) } .logo-cliente:hover img { filter: none; opacity: 1 } @media (min-width: 900px) { .logo-cliente { height: 88px; padding: .7rem .9rem } } /* Galería superior de 5 logos destacados: misma tarjeta que la de abajo, pero forzada a una sola fila en pantallas anchas para que el preview quede limpio. */ @media (min-width: 760px) { .logos-clientes--top { grid-template-columns: repeat(5, minmax(0, 1fr)) } } /* La galería de fotos sufre lo mismo: la figura fija el marco, la imagen se adapta. Aquí sí `cover` (son fotos, no logos: recortar es aceptable). */ .galeria-clientes figure { overflow: hidden } .galeria-clientes img { display: block; width: 100%; height: 100%; object-fit: cover } /* ─── 26.2 · KITS: ALTURA ESTABLE, SIN «PILLARSE» ────────────────────────── FALLO MEDIDO: en /videovigilancia las tarjetas medían 372px y en el resto 328px, y dentro de una misma rejilla convivían 328px y 277px. CAUSA: `.kit-foto` es un con `aspect-ratio` y `display:grid`, dentro de un flex. Cuando la imagen tarda en cargar (o no existe), el span colapsa y la tarjeta encoge; al llegar la imagen, salta. Ese salto es el «quedarse pillado» que describes: el navegador recalcula la rejilla entera a mitad de carga. Además el título con `-webkit-line-clamp` cambia de altura según cuántas líneas ocupe el nombre del kit. ARREGLO: · La foto reserva su espacio SIEMPRE (aspect-ratio + min-height), aunque la imagen aún no haya llegado: sin salto de disposición (bueno para CLS). · El título ocupa una altura fija de 2 líneas en móvil, así todas las tarjetas de una fila arrancan el cuerpo a la misma altura. · La rejilla iguala filas con `grid-auto-rows: 1fr`. */ .kit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.5rem; align-items: stretch; grid-auto-rows: 1fr } @media (min-width: 640px) { .kit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap) } } @media (min-width: 1000px) { .kit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem } } .kit-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: #111; color: #eee; border: 1px solid var(--gris-borde-osc); border-radius: var(--radio); overflow: hidden; position: relative; clip-path: none } .kit-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--oro), transparent 75%); z-index: 2 } .kit-card:hover { border-color: var(--oro); box-shadow: 0 12px 28px rgba(203, 160, 81, .22) } /* La foto reserva su hueco antes de que la imagen cargue: cero saltos */ .kit-card .kit-foto { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; min-height: 118px; flex: none; background: var(--blanco); padding: .7rem; overflow: hidden } .kit-card .kit-foto img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain } .kit-card .kit-foto--vacia { background: var(--crema-2) } .kit-card .kit-body { display: flex; flex-direction: column; gap: .4rem; flex: 1; padding: .7rem .8rem .85rem } /* Título a dos líneas fijas: los cuerpos arrancan alineados entre hermanas */ .kit-card h3, .kit-grid .kit-card h3 { font-family: "Merriweather", Georgia, serif; font-weight: 700; font-size: .82rem; line-height: 1.28; margin: 0; color: #fff !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.28em) } .kit-card .kit-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 } .kit-card .kit-cta { margin-top: auto; color: var(--oro); font-size: .78rem } @media (min-width: 640px) { .kit-card .kit-foto { min-height: 140px; padding: 1rem } .kit-card .kit-body { padding: 1.1rem 1.2rem 1.3rem; gap: .5rem } .kit-card h3, .kit-grid .kit-card h3 { font-size: .98rem; line-height: 1.45; min-height: calc(2 * 1.45em) } .kit-card .kit-cta { font-size: .9rem } } /* ─── 26.3 · MENÚ DE 5: VUELVE LA ESQUINA CORTADA ────────────────────────── Petición: recuperar el bisel que tenían antes los cinco accesos. Se hace con `clip-path`, igual que en el diseño original, pero AHORA sin el problema que tenía: la esquina recortada no puede descuadrar la fila porque el reparto de columnas ya está resuelto en §25.1 y todas las celdas miden exactamente lo mismo. El bisel es puramente visual. Se recorta solo la esquina superior derecha e inferior izquierda: da el sesgo diagonal característico manteniendo la caja simétrica respecto a su centro (rotación de 180°, que es lo que hace que se lea «cuadrado»). */ .quad-nav a { border-radius: 0; clip-path: polygon( 0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px) ); border: none; box-shadow: inset 0 0 0 1px #3a3a3a } /* El filete dorado del bisel: se dibuja por dentro para que no lo corte el propio clip-path (un borde normal sí se corta y deja el canto abierto). */ .quad-nav a:hover, .quad-nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--oro) } @media (min-width: 1200px) { .quad-nav a { clip-path: polygon( 0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px) ) } } /* ─── 26.4 · CÁMARAS: BLOQUE SIMÉTRICO ───────────────────────────────────── En la captura las dos tarjetas no eran gemelas (la izquierda más estrecha) y los tres botones quedaban apelotonados a la izquierda. La desigualdad venía de `.cam-card` heredando `.who-card` dentro de una rejilla que en ese tramo no era de columnas iguales. Se fija explícitamente y se centra el grupo de botones bajo el bloque. */ .cam-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: 1.6rem; align-items: stretch; grid-auto-rows: 1fr } @media (min-width: 700px) { .cam-duo { grid-template-columns: repeat(2, minmax(0, 1fr)) } } .cam-card { width: 100% } /* El grupo de acciones bajo las cámaras: repartido, no apelotonado */ .cam-duo + .mt-2 { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.6rem } .cam-duo + .mt-2 .btn { flex: 1 1 auto; max-width: 320px } @media (min-width: 700px) { .cam-duo + .mt-2 .btn { flex: 0 1 auto } } /* ─── 26.5 · LIMPIEZA: CLASES MUERTAS ELIMINADAS ─────────────────────────── Auditoría cruzada CSS ↔ vistas ↔ JS. Ocho clases estaban definidas pero no aparecen en NINGUNA vista ni en el JS del layout. Sus reglas se han eliminado del archivo: .cta-duo · .cta-gold bloques de cierre de una versión anterior .kit-cards renombrada a .kit-grid en el partial de kits .hero-copy contenedor del hero que ya no se usa .case-roi pie de testimonio que no llegó a publicarse .solo-movil se resolvió con media queries, no con clases .solo-desktop ídem .w3 resto de una rejilla antigua Se conservan .btn-ic, .kit-foto, .center, .muted, .org, .ticker-track y .hdr-overlay: aunque el rastreo automático las marcaba, sí se usan (unas se generan desde PHP con `icon()`, otras las añade el JS del layout). */ /* ═══════════════════════════════════════════════════════════════════════════ 27 · SIN MOVIMIENTO · v11 ─────────────────────────────────────────────────────────────────────────── Se han eliminado del archivo, uno a uno: 4 @keyframes (pulso del header, rescate del reveal, rombo, ticker) 12 animation 57 transition 67 transform de movimiento (scale y translate de hover) Y del layout.php, el IntersectionObserver que ponía `reveal`. POR QUÉ — el fallo que describías («aparecen los primeros y el otro se medio ve», en la primera sección de antiokupas y en los kits de videovigilancia): El observer usaba `threshold: 0`, que dispara en cuanto UN PÍXEL del elemento entra en pantalla. Con un escalonado de hasta .18s más una transición de .45s, una tarjeta empezaba a aparecer estando todavía fuera de la vista. Si el scroll seguía —o la CPU estaba ocupada pintando el vídeo del hero— la transición se quedaba a medio camino y esa tarjeta se veía translúcida mientras sus hermanas ya estaban completas. Las rejillas más altas (antiokupas y los kits) eran donde más se notaba. No se ha «desactivado» el efecto: se ha eliminado el estado intermedio que podía atascarse. Ahora el contenido está a opacidad 1 desde el primer fotograma. Ventajas colaterales: mejor LCP, cero trabajo de composición durante el scroll y funcionamiento idéntico sin JavaScript. Este bloque cierra el archivo y es la garantía final: pase lo que pase, nada queda invisible ni a medias. ═══════════════════════════════════════════════════════════════════════════ */ /* Cinturón: cualquier resto de la clase antigua queda neutralizado */ .svc-card, .who-card, .plan, .case, .kit-card, .paso, .marca-card, .quad-nav a, .galeria-clientes figure, .panel, .post-card, .card { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important } /* Ninguna regla del archivo puede reintroducir movimiento */ *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important } /* EXCEPCIONES DELIBERADAS — no son movimiento, son ESTADO. Sin ellas el menú desplegable y el drawer dejarían de funcionar. */ .hdr-drop-menu { transition: none } .hdr-nav { transition: none } /* El rombo del hero conserva su rotación: es geometría estática, no animación (dibuja el diamante). Se declara aquí para que el `transform: none` universal de arriba no lo aplaste. */ .hero > .wrap::before, .hero-video > .wrap::before, .hero-home > .wrap::before, .hero > .wrap::after, .hero-video > .wrap::after { transform: rotate(45deg) !important } body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold)::before, body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold) > .wrap > h2::after, body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold) > h2::after { transform: rotate(45deg) !important } /* Centrados que usan transform: son posición, no movimiento */ details.faq summary::after { transform: translateY(-50%) !important } details.faq[open] summary::after { transform: translateY(-50%) rotate(45deg) !important } .campo-ic, .campo-input > svg { transform: translateY(-50%) !important } .campo-input--area .campo-ic, .campo-input--area > svg { transform: none !important } .comparison-table .mejor::after { transform: translateY(-30%) !important } .hdr-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important } .hdr-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important } /* El ticker deja de desplazarse solo: pasa a ser una tira deslizable con el dedo, que es más accesible y no consume CPU en segundo plano. */ .ticker-track { animation: none !important; transform: none !important; overflow-x: auto; -webkit-overflow-scrolling: touch } /* ═══════════════════════════════════════════════════════════════════════════ 28 · APARICIÓN AL SCROLL · una sola animación para todo ─────────────────────────────────────────────────────────────────────────── Un único efecto, igual para productos, kits y tarjetas: un desvanecido con un desplazamiento corto hacia arriba. Discreto, rápido (.5s) y sin rebote. CÓMO EVITA EL ATASCO DE LA VERSIÓN ANTERIOR · Solo se esconde si `html.anim` existe, y esa clase la pone el JS DESPUÉS de comprobar que hay IntersectionObserver y que el usuario no ha pedido menos movimiento. Sin JS, sin soporte o con movimiento reducido, las tarjetas se ven normales desde el primer fotograma: es imposible que algo quede invisible por un fallo de script. · El estado inicial es `opacity: .001`, no `0`. Un elemento a opacidad exacta 0 puede ser saltado por el pintor en algunos motores y quedarse sin repintar al cambiar; un valor mínimo pero no nulo mantiene el elemento en el árbol de pintura y la transición siempre completa. · El retardo escalonado lo pone el JS elemento a elemento (máx. 180 ms) en vez de venir de `:nth-child`, que aplicaba el retardo aunque la tarjeta entrara sola en pantalla. Estas reglas van al FINAL del archivo y usan `!important` porque el bloque 27 impone `transition: none !important` a todo. Es la única excepción. */ /* Estado inicial: solo cuando el JS ha confirmado que puede animar */ html.anim .aparece { opacity: .001 !important; transform: translateY(12px) !important; transition: opacity .5s ease, transform .5s ease !important; will-change: opacity, transform; } /* Estado final */ html.anim .aparece.visible { opacity: 1 !important; transform: none !important; } /* Un elemento que ya terminó (el JS le quita las clases) vuelve a ser completamente estático: sin transición ni capa de composición. */ html.anim .kit-card:not(.aparece), html.anim .card:not(.aparece), html.anim .svc-card:not(.aparece), html.anim .who-card:not(.aparece), html.anim .plan:not(.aparece), html.anim .case:not(.aparece), html.anim .marca-card:not(.aparece), html.anim .paso:not(.aparece), html.anim .post-card:not(.aparece), html.anim .panel:not(.aparece), html.anim .galeria-clientes figure:not(.aparece) { opacity: 1 !important; transform: none !important; will-change: auto; } /* Sin la clase `anim` —es decir, sin JS o sin soporte— nada se esconde. Esta regla es la garantía de que el contenido siempre es visible. */ html:not(.anim) .aparece { opacity: 1 !important; transform: none !important; } /* Movimiento reducido: el JS ni siquiera activa `anim`, pero se declara también en CSS por si la preferencia cambia con la página ya cargada. */ @media (prefers-reduced-motion: reduce) { html.anim .aparece, html.anim .aparece.visible { opacity: 1 !important; transform: none !important; transition: none !important; } } /* En impresión, todo visible sin excepción */ @media print { .aparece { opacity: 1 !important; transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 29 · DECORACIÓN GRÁFICA · SVG embebidos ─────────────────────────────────────────────────────────────────────────── Capa ornamental construida ENTERAMENTE con SVG en data-URI: cero peticiones de red, cero archivos que subir, y se cachea junto con el CSS. Nada de esto toca el HTML, así que el SEO y el marcado quedan intactos. Todos los SVG usan el oro de marca (#cba051) con opacidades bajas: decoran sin competir con el texto. Y todos llevan `pointer-events: none`, de modo que jamás interceptan un clic. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* — Trama de puntos: fondo sutil para secciones claras — */ /* — Líneas diagonales finas: textura para bandas — */ /* — Escudo: marca de agua para secciones de seguridad — */ /* — Cámara: marca de agua para videovigilancia — */ /* — Onda: separador orgánico entre secciones — */ /* — Marco de esquina: filigrana para tarjetas destacadas — */ --svg-esquina: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0 H10 M40 0 V10' stroke='%23cba051' stroke-opacity='.55' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='34' cy='6' r='1.6' fill='%23cba051' fill-opacity='.6'/%3E%3C/svg%3E"); /* — Check dorado: viñeta para listas — */ --svg-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' stroke='%23cba051' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ─── 29.1 · SEPARADOR DE ONDA ENTRE SECCIONES ───────────────────────────── Una línea ondulada dorada cierra las secciones crema. Sustituye al rombo suelto por algo con más presencia, sin añadir peso: es el mismo truco de data-URI y se repite en horizontal. */ /* ─── 29.2 · MARCAS DE AGUA TEMÁTICAS ────────────────────────────────────── Un icono grande y muy tenue en la esquina de las bandas de cierre. Da personalidad sin ocupar sitio ni distraer: al 6% de opacidad se percibe como textura, no como dibujo. Antes solo estaba en `.dark-band`; ahora se extiende a `.cta-video` para que las dos variantes del CTA (negra y dorada) compartan el mismo lenguaje visual: vídeo + panal + logo. */ .dark-band > .wrap, .cta-video > .wrap { position: relative; } .dark-band > .wrap::after, .cta-video > .wrap::after { content: ''; position: absolute; right: -.5rem; top: 50%; width: 185px; height: 185px; margin-top: -92px; background: url('/media/logo.png') no-repeat center / contain; opacity: .24; -webkit-mask-image: radial-gradient(closest-side, #000 66%, transparent); mask-image: radial-gradient(closest-side, #000 66%, transparent); pointer-events: none; display: none; } @media (min-width: 900px) { .dark-band > .wrap::after, .cta-video > .wrap::after { display: block; } } /* ─── 29.3 · FILIGRANA DE ESQUINA EN TARJETAS DESTACADAS ─────────────────── El plan recomendado y la tarjeta de comparativa reciben una esquina trazada: refuerza la jerarquía sin recurrir a más color. */ .plan.featured, .mega-card { position: relative; } .plan.featured::after, .mega-card > .esquina-deco { content: ''; position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; background: var(--svg-esquina) no-repeat center / contain; pointer-events: none; opacity: .8; } /* ─── 29.4 · TRAMA DE PUNTOS EN SECCIONES CLARAS ─────────────────────────── Las secciones blancas (1ª y 3ª del ciclo) eran las únicas sin textura y se veían planas al lado de las crema. Una trama de puntos muy leve, desvanecida hacia abajo, las iguala en riqueza sin ensuciar la lectura. */ /* Las secciones blancas (3ª del ciclo) llevaban una trama de puntos que se desvanecía al 55% de la altura por un `mask-image` — el usuario vio con razón que "solo se ve una parte". Se sustituye por el panal de marca, que cubre toda la sección sin máscara que lo recorte. La opacidad se sube (el panal sobre blanco necesita algo más de presencia que sobre crema) y NO hay gradiente de desvanecido: la textura llega hasta abajo, uniforme. */ body.es-interior main > section.block:nth-of-type(4n + 3):not(.sec-gold)::after { content: ''; position: absolute; inset: 0; background: var(--hex); background-size: 28px 49px; /* fixed ancla el patrón al viewport, no a la sección: así el panal es CONTINUO entre secciones apiladas en vez de reiniciarse en el top de cada una. Antes, como cada sección tiene distinta altura, los hexágonos no encajaban en los límites y se veían "cortados". */ background-attachment: fixed; background-position: center top; opacity: .16; pointer-events: none; z-index: 0; } body.es-interior main > section.block:nth-of-type(4n + 3) > * { position: relative; z-index: 1; } /* ─── 29.5 · VIÑETAS DE LISTA CON CHECK DORADO ───────────────────────────── Las listas de los planes y de las tarjetas pasan de topo estándar a un check dorado dibujado en SVG. Se aplica solo donde enumera ventajas, no en listas de navegación. */ .plan ul, .svc-card ul, .panel ul, .mega-card ul { list-style: none; padding-left: 0; } .plan ul li, .svc-card ul li, .panel ul li, .mega-card ul li { position: relative; padding-left: 1.6rem; } .plan ul li::before, .svc-card ul li::before, .panel ul li::before, .mega-card ul li::before { content: ''; position: absolute; left: 0; top: .45em; width: 15px; height: 15px; background: var(--svg-check) no-repeat center / contain; pointer-events: none; } /* ─── 29.6 · TEXTURA DE RAYAS EN LA FRANJA DE AHORRO ─────────────────────── La banda de la portada gana profundidad con rayas diagonales muy tenues sobre el panal existente: dos texturas superpuestas a baja opacidad leen como un material, no como un patrón. */ body.es-portada .ahorro-band > .wrap { position: relative; z-index: 1; } /* ─── 29.7 · ICONO DE ACENTO EN LAS TARJETAS DE SERVICIO ─────────────────── Cada .svc-card lleva ya un filete dorado arriba. Se le añade un escudo diminuto en la esquina inferior derecha, al 8%: firma la tarjeta como «producto de seguridad» sin necesidad de ningún . */ .svc-card::after { content: ''; position: absolute; right: 10px; bottom: 10px; width: 46px; height: 46px; background: url('/media/logo.png') no-repeat center / contain; opacity: .07; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); pointer-events: none; /* Se anula el triángulo de esquina anterior: ahora manda el escudo */ top: auto; left: auto; } /* ─── 29.8 · MARCA DE AGUA DE CÁMARA EN LAS FICHAS ───────────────────────── Las tarjetas de BulletCam y TurretCam llevan el icono de cámara al fondo del cuerpo de texto: refuerza de qué producto se habla. */ .cam-card .who-body { position: relative; } .cam-card .who-body::after { content: ''; position: absolute; right: .9rem; bottom: .9rem; width: 42px; height: 42px; background: url('/media/logo.png') no-repeat center / contain; opacity: .09; -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent); mask-image: radial-gradient(closest-side, #000 58%, transparent); pointer-events: none; } /* ─── 29.9 · REMATE DEL PIE ──────────────────────────────────────────────── Una línea ondulada dorada corona el footer y lo separa del contenido con más gracia que un borde recto. */ .ftr { position: relative; } /* ─── 29.10 · SALVAGUARDAS ───────────────────────────────────────────────── Toda la decoración es puramente visual: se oculta en impresión y nunca captura clics. Si el navegador no soporta `mask-image`, los fondos siguen viéndose (solo pierden el desvanecido), así que no hay degradación grave. */ @media print { body.es-interior main > section.block::before, body.es-interior main > section.block::after, .dark-band > .wrap::after, .cta-video > .wrap::after, .plan.featured::after, .svc-card::after, .cam-card .who-body::after, .ftr::after { display: none !important; } } /* ─── 29.11 · CIERRE DE LA SECCIÓN CREMA PROFUNDA ────────────────────────── La 4ª sección de cada ciclo llevaba un rombo dorado suelto al pie, pero el `transform: none !important` del bloque 27 —necesario para eliminar el movimiento— le quitaba la rotación de 45° y quedaba como un cuadrado. Se sustituye por la misma onda que cierra la 2ª sección: además de resolver el conflicto, unifica el lenguaje gráfico (todas las secciones de color terminan igual) y no depende de ningún transform. */ /* El pequeño rombo que remataba el H2 centrado sufría lo mismo. Se cambia por un trío de puntos dorados: sin transform, mismo aire ornamental. */ /* ═══════════════════════════════════════════════════════════════════════════ 30 · FIX · SVC-CARDS EN LA COLUMNA DEL FORMULARIO (instalación, móvil) ─────────────────────────────────────────────────────────────────────────── Las tres tarjetas de contexto que acompañan al formulario de presupuesto (soporte remoto, técnico a domicilio, estudio gratuito) se veían como cajas negras gigantes: medían 538px cada una cuando su contenido necesita ~172px, sobrándoles 366px de vacío. En móvil, apiladas, ocupaban una pantalla entera casi hueca — de ahí que se vieran "muy abajo y cortadas". CAUSA: `.svc-card` lleva `height: 100%` para igualar alturas cuando vive en la rejilla `.svc-cards`. Pero aquí no está en esa rejilla: está en la columna `
` del `.producto-layout`, que es `display: block`. Contra un padre en bloque, `height: 100%` se resuelve como el 100% de la altura del contenedor (que a su vez la fija el formulario, mucho más alto), estirando cada tarjeta. ARREGLO: en la columna del formulario, la tarjeta se ajusta a su contenido (`height: auto`) y recupera su margen inferior de separación. No afecta a las `.svc-cards` en rejilla, que siguen igualando altura como deben. */ .producto-layout > div > .svc-card { height: auto; align-self: start; } /* ═══════════════════════════════════════════════════════════════════════════ 31 · ICONOS EN TARJETAS DE SERVICIO Y PANELES ─────────────────────────────────────────────────────────────────────────── Cada tarjeta de servicio (.svc-card) y cada panel de infraestructura (.panel) lleva ahora un icono temático embebido en su

: wifi, señal 4G, fibra, cable, switch, ahorro, escudo, etc. El icono va dentro de un que lo separa del texto pero lo mantiene alineado con la primera línea del título. El SVG hereda `currentColor`, así que toma el mismo dorado del título en las svc-cards (oro sobre fondo negro) y el oro-txt en los paneles (sobre fondo claro). Sin peso extra de red: son los mismos SVG inline del helper icon(). */ /* — El icono dentro del título — */ .svc-ic, .panel-ic { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; } .svc-ic .ic, .panel-ic .ic { width: 1.15em; height: 1.15em; stroke-width: 2; } /* — En las svc-cards: icono en línea con el título, del color del título — */ .svc-card h2, .svc-card h3, .svc-card h4 { display: flex; align-items: center; gap: .55rem; } .svc-card .svc-ic { flex: none; color: var(--oro); } .svc-card .svc-ic .ic { width: 1.3em; height: 1.3em; } /* — En los paneles de infraestructura: el icono va ARRIBA, como acento, sobre un disco dorado tenue que lo destaca del fondo blanco — */ .panel { padding-top: 1.35rem; } .panel .panel-ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: .85rem; border-radius: 12px; background: linear-gradient(150deg, rgba(203, 160, 81, .16), rgba(203, 160, 81, .06)); border: 1px solid rgba(203, 160, 81, .3); color: var(--oro-txt); } .panel .panel-ic .ic { width: 24px; height: 24px; } .panel h3 { margin-top: 0; } /* — El who-card de Instagram/LinkedIn: icono junto al nombre de la red — */ .who-card h3 { display: flex; align-items: center; gap: .5rem; justify-content: center; } .who-card .svc-ic { flex: none; color: var(--oro-txt); } .who-card .svc-ic .ic { width: 1.25em; height: 1.25em; } /* — Los pasos numerados (1·Estudio, 2·Instalación…) NO reciben icono temático: su número YA es su icono, y añadir otro los recargaría — */ /* ═══════════════════════════════════════════════════════════════════════════ 32 · LOGO COMO MARCA DE AGUA · más ubicaciones (mobile-first) ─────────────────────────────────────────────────────────────────────────── El logo aparecía en 3 sitios (banda oscura, svc-card, cam-card). Se extiende a más zonas de la web como filigrana muy tenue, SIEMPRE con difuminado radial y opacidad baja para que no compita con el contenido. MOBILE-FIRST: en móvil el logo es pequeño (o se oculta donde estorbaría), y solo crece en pantallas grandes donde hay espacio. Nunca provoca scroll ni tapa texto: pointer-events:none y position absolute contenida. */ /* — Helper reutilizable: máscara de difuminado del logo — */ /* (cada bloque la aplica inline porque los navegadores no heredan mask) */ /* — 1 · Hero: logo tenue en la esquina, solo tablet+ (en móvil el hero ya tiene vídeo/imagen y añadirlo recargaría) — */ .hero > .wrap, .hero-home > .wrap, .hero-alarmas > .wrap { position: relative; } .hero::after, .hero-home::after { content: ''; position: absolute; right: 1.5rem; bottom: 1.2rem; width: 90px; height: 90px; background: url('/media/logo.png') no-repeat center / contain; opacity: .05; pointer-events: none; z-index: 0; display: none; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent); } @media (min-width: 768px) { .hero::after, .hero-home::after { display: block; } } /* — 2 · Página de gracias / cierres de conversión secundarios — */ .sec-gold { position: relative; overflow: hidden; } .sec-gold::after { content: ''; position: absolute; right: -20px; top: 50%; width: 120px; height: 120px; margin-top: -60px; background: url('/media/logo.png') no-repeat center / contain; opacity: .06; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); display: none; } @media (min-width: 700px) { .sec-gold::after { display: block; } } /* — 3 · Formularios (contact-card): logo de fondo muy tenue, refuerza marca en el momento de conversión. Visible ya en móvil pero pequeño — */ .contact-card { position: relative; overflow: hidden; } .contact-card::before { content: ''; position: absolute; right: -12px; bottom: -12px; width: 70px; height: 70px; background: url('/media/logo.png') no-repeat center / contain; opacity: .05; pointer-events: none; z-index: 0; -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent); mask-image: radial-gradient(closest-side, #000 58%, transparent); } .contact-card > * { position: relative; z-index: 1; } @media (min-width: 768px) { .contact-card::before { width: 100px; height: 100px; } } /* — 4 · Footer: logo centrado tenue detrás del contenido — */ .ftr { position: relative; overflow: hidden; } .ftr::before { content: ''; position: absolute; left: 50%; top: 1.5rem; width: 130px; height: 130px; margin-left: -65px; background: url('/media/logo.png') no-repeat center / contain; opacity: .04; pointer-events: none; z-index: 0; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent); } .ftr > * { position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════════════════ 34 · IMÁGENES EN PANELES DE INFRAESTRUCTURA ─────────────────────────────────────────────────────────────────────────── Algunos paneles (Fibra aérea, Cableado estructurado, WiFi punto a punto) llevan ahora una fotografía real por encima del icono y el título — el resto de paneles se queda solo con icono, sin recargar toda la rejilla. La imagen ocupa el ancho completo del panel, ANTES del padding (se sale del área de texto pero no de la tarjeta: el `overflow:hidden` + `clip-path` del panel ya recortan automáticamente sus esquinas, así que la foto hereda el mismo bisel diagonal sin ninguna regla extra. */ .panel-img { display: block; width: calc(100% + 2.7rem); margin: -1.25rem -1.35rem 1rem; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; background: var(--crema-2); } @media (min-width: 900px) { .panel-img { width: calc(100% + 3.2rem); margin: -1.5rem -1.6rem 1.1rem; } } /* El icono, cuando conviven imagen + icono, pasa a ir en línea con el título en vez de sobre su propio disco (la foto ya cumple la función de acento visual superior; un segundo disco dorado justo debajo sería redundante). */ .panel-img + .panel-ic { width: auto; height: auto; background: none; border: none; margin-bottom: .4rem; } .panel-img + .panel-ic .ic { width: 22px; height: 22px; } /* ═══════════════════════════════════════════════════════════════════════════ 35 · CONTINUIDAD DEL PANAL + OPTIMIZACIÓN DE RENDIMIENTO ─────────────────────────────────────────────────────────────────────────── Los fondos hexagonales de las secciones usan ahora `background-attachment: fixed` (bloques 03, 25.4 y afines) para que el panal sea CONTINUO entre secciones apiladas: antes cada sección reiniciaba el patrón en su propio borde superior y, como cada una tiene distinta altura, los hexágonos no encajaban en los límites — se veían "cortados por columnas" al hacer scroll. PERO `fixed` obliga al navegador a recomponer el fondo en cada fotograma de scroll, lo que en móviles de gama baja puede causar tirones. Como en una pantalla estrecha el patrón continuo apenas se percibe (hay poca altura visible a la vez), en móvil se vuelve al anclaje normal `scroll`, que es gratis. El resultado: continuidad perfecta en escritorio (donde se nota y la CPU sobra) y cero coste en móvil (donde no se nota). Este es también un arreglo de rendimiento, no solo visual. */ @media (max-width: 900px) { body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold)::after, body.es-interior main > section.block:nth-of-type(4n + 2):not(.sec-gold)::after, body.es-interior main > section.block:nth-of-type(4n + 3):not(.sec-gold)::after, body.es-portada main > section.block:nth-of-type(even):not(.sec-gold)::after, main > section.block.sec-gold::before, section.block.sec-hex-light::before { background-attachment: scroll; } } /* NOTA sobre rendimiento: se probó promover las secciones a su propia capa de composición con `transform: translateZ(0)`, pero eso CREA un contexto de contención que anula `background-attachment: fixed` — el fondo volvía a comportarse como `scroll` y reaparecían los cortes entre secciones. Es incompatible con el fix de continuidad, así que no se usa. El `fixed` por sí solo ya es suficientemente eficiente en escritorio, y en móvil se desactiva (arriba), que es donde el rendimiento importa. */ /* ═══════════════════════════════════════════════════════════════════════════ 36 · PANAL A SANGRE LATERAL + CORTE DE PUNTAS (bisel diagonal) ─────────────────────────────────────────────────────────────────────────── Enfoque técnico: el COLOR de fondo de las secciones ya sangra de borde a borde por pintura (box-shadow 0 0 0 100vmax + clip-path inset), pero la TEXTURA hexagonal seguía anclada a `inset: 0`, es decir, a la caja de la sección. En pantallas anchas el panal terminaba donde termina el contenido y los laterales quedaban en color plano: el hexágono se veía "cortado" a los lados. Aquí se extiende el área de pintura del pseudo a sangre completa (`inset: 0 -100vmax`), igual que el color, para que la retícula llegue a los dos bordes. Por qué ahora es seguro (antes NO se hacía, ver §3): el workaround original evitaba left/right negativos porque en su día provocaban scroll horizontal en iOS. Eso ya no aplica: `html` y `body` llevan `overflow-x: clip` (§01), que recorta el desborde lateral SIN crear un contenedor de scroll — el bug de iOS no puede reaparecer. Coste de repintado nulo (el pseudo ya existía). ─────────────────────────────────────────────────────────────────────────── */ /* Interiores: 2ª y 4ª de cada cuatro (las que llevan panal) */ body.es-interior main > section.block:nth-of-type(4n + 2):not(.sec-gold)::after, body.es-interior main > section.block:nth-of-type(4n):not(.sec-gold)::after, /* Portada: pares */ body.es-portada main > section.block:nth-of-type(even):not(.sec-gold)::after, /* Sección oro de cierre y utilidad de panal sobre claro */ main > section.block.sec-gold::before, section.block.sec-hex-light::before { inset: 0 -100vmax; } /* Las bandas oscuras de CTA también sangran su color a los lados; su panal debe acompañarlas para no cortarse. Son de ancho de sección, no de tarjeta. */ .dark-band::before, .cta-video::before { inset: 0 -100vmax; } /* ═══════════════════════════════════════════════════════════════════════════ 37 · CORTE DE PUNTAS LATERAL EN TARJETAS Y BOTONES ─────────────────────────────────────────────────────────────────────────── Enfoque técnico: se unifica la firma de marca (el bisel diagonal ya presente en .quad-nav, .contact-card y .calc) en casi todas las tarjetas de servicio y en los botones. El corte se hace con `clip-path` — GPU, sin reflow, sin impacto en CLS ni Core Web Vitals. Antes muchas tarjetas llevaban solo la punta superior-derecha (o ninguna); ahora comparten el mismo lenguaje. Enfoque de conversión: coherencia visual del CTA en todo el sitio → la marca se refuerza y los botones de captación de leads leen como un sistema, no como piezas sueltas. La geometría es idéntica, solo cambia el tamaño del chaflán según el elemento (tarjeta grande vs. botón). La caja base define dos variables para no repetir la fórmula: --pt : profundidad del corte (tamaño del chaflán) Geometría de "dos puntas" (sup-dcha + inf-izda), la del sistema: polygon(0 0, calc(100% - P) 0, 100% P, 100% 100%, P 100%, 0 calc(100% - P)) ─────────────────────────────────────────────────────────────────────────── */ /* ---- Tarjetas: corte de dos puntas (arriba-dcha + abajo-izda) ---- */ .svc-card, .kit-card, .panel, .plan, .who-card, .who-card--icono, .cam-card, .mega-card { --pt: 22px; border-radius: 0; clip-path: polygon( 0 0, calc(100% - var(--pt)) 0, 100% var(--pt), 100% 100%, var(--pt) 100%, 0 calc(100% - var(--pt)) ); } /* La tarjeta oro/mega y la de servicio pueden permitirse un chaflán mayor */ .mega-card { --pt: 28px; } /* La punta pintada a mano de .svc-card ya no hace falta: el clip-path da la forma real. Se apaga el triángulo decorativo para que no aparezca desalineado sobre el nuevo recorte. El filete dorado superior (::before) SÍ se conserva. */ .svc-card::after { content: none; } /* ---- Botones: mismo bisel, más discreto ---- */ /* Se aplica al botón genérico; el chaflán es proporcional a su altura. */ .btn { --pt: 12px; border-radius: 0; clip-path: polygon( 0 0, calc(100% - var(--pt)) 0, 100% var(--pt), 100% 100%, var(--pt) 100%, 0 calc(100% - var(--pt)) ); } /* Excepciones: botones-píldora o de utilidad donde el corte no encaja (cabecera, WhatsApp flotante, chips redondeados, acciones de cookies). */ .hdr .btn-contact, .wa-fab, .filter-links a, .cookie-actions .btn, .cookie-rechazar, .btn.btn-pill { clip-path: none; border-radius: 6px; } .wa-fab { border-radius: 999px; } /* ═══════════════════════════════════════════════════════════════════════════ 38 · SEGURIDAD MÓVIL DEL CHAFLÁN ─────────────────────────────────────────────────────────────────────────── El corte se "come" ~P px por esquina. En una tarjeta de 1100px es imperceptible; en uno de 330px puede tapar contenido. Igual que ya hace §12 de mobile.css con .calc/.mega-card, en pantallas estrechas se reduce el chaflán (no se elimina del todo para conservar la firma) y se anula en los elementos más apretados. */ @media (max-width: 560px) { .svc-card, .kit-card, .panel, .plan, .who-card, .who-card--icono, .cam-card { --pt: 14px; } /* Botones a ancho completo en móvil: sin corte, para no morder el texto del CTA (que es justo donde se capta el lead). */ .btn-big, .actions .btn, .lead-quiz .btn, .contact-card .btn { clip-path: none; border-radius: var(--radio-s); } }