/* CSS no crítico de /descalcificador-de-agua-[municipio] (bloques 2 en adelante, todos por debajo del pliegue). Se carga en diferido (preload + swap a stylesheet) desde la plantilla, para sacarlo del critical path y no retrasar el LCP del hero. El CSS crítico del hero se queda inline/bloqueante en la propia plantilla. Ver src/pages/descalcificador-de-agua-[municipio].astro. */ /* Red de seguridad: sin la clase js-anim en (añadida por el script de la plantilla como primera acción), estos bloques se ven SIEMPRE opacity:1 — si el script no llega a correr en absoluto (bloqueado, CSP, JS desactivado), nada queda invisible para siempre. Es un CSS plano, no scoped por Astro, así que no necesita el wrapper :global(). */ html:not(.js-anim) .bcn-cal-stagger, html:not(.js-anim) .bcn-zona-chip, html:not(.js-anim) .bcn-sol-stagger, html:not(.js-anim) .bcn-sol-card, html:not(.js-anim) .bcn-usp-stagger, html:not(.js-anim) .bcn-usp-card, html:not(.js-anim) .bcn-faq-stagger, html:not(.js-anim) .bcn-faq-item, html:not(.js-anim) .bcn-map-stagger, html:not(.js-anim) .bcn-map2-comarca, html:not(.js-anim) .bcn-map2-pin, html:not(.js-anim) .bcn-map-nap, html:not(.js-anim) .bcn-gmap-wrap, html:not(.js-anim) .bcn-vecinos-stagger, html:not(.js-anim) .bcn-vecinos-chip, html:not(.js-anim) .bcn-steps-stagger, html:not(.js-anim) .bcn-steps-step, html:not(.js-anim) .bcn-author-item { opacity: 1 !important; transform: none !important; filter: none !important; } html:not(.js-anim) .bcn-steps-connector-h-trail, html:not(.js-anim) .bcn-steps-connector-v-trail { transform: scale(1) !important; } /* ===== Bloque 2: La cal en el municipio — fade-up cascada ===== */ .bcn-cal-stagger, .bcn-zona-chip { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--delay, 0ms); } .bcn-cal-section.is-visible .bcn-cal-stagger, .bcn-cal-section.is-visible .bcn-zona-chip { opacity: 1; transform: translateY(0); } /* ===== Bloque 2 (extra): tabla de dureza — mismo lenguaje visual que las tablas premium del sitio (thead navy, filas alternas) ===== */ .bcn-table { font-size: 0.9rem; } .bcn-table thead th { background: linear-gradient(135deg, #0b2d48 0%, #1565a0 100%); color: #ffffff; font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; text-align: left; padding: 0.9em 1.1em; white-space: nowrap; } .bcn-table tbody td { padding: 0.85em 1.1em; border-bottom: 1px solid #eef2f7; color: #33475b; vertical-align: middle; } .bcn-table tbody tr:last-child td { border-bottom: none; } .bcn-table tbody tr:nth-child(even) { background: #f9fbfd; } .bcn-table tbody td:first-child { font-weight: 600; color: #0b2d48; } /* ===== Bloque 3: Soluciones — blur-rise ===== */ .bcn-sol-stagger { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--delay, 0ms); } .bcn-sol-card { opacity: 0; filter: blur(6px); transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--delay, 0ms); } .bcn-sol-section.is-visible .bcn-sol-stagger { opacity: 1; transform: translateY(0); } .bcn-sol-section.is-visible .bcn-sol-card { opacity: 1; filter: blur(0); transform: translateY(0); } .bcn-sol-glow { animation: bcn-glow-drift 24s ease-in-out infinite alternate; } @keyframes bcn-glow-drift { from { transform: translate(0, 0); } to { transform: translate(60px, 40px); } } /* ===== Bloque 4: Por qué Aquaclar — stagger 3D ===== */ .bcn-usp-stagger { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--delay, 0ms); } .bcn-usp-card { opacity: 0; transform: perspective(800px) rotateX(8deg) translateY(30px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--delay, 0ms); } .bcn-usp-section.is-visible .bcn-usp-stagger { opacity: 1; transform: translateY(0); } .bcn-usp-section.is-visible .bcn-usp-card { opacity: 1; transform: perspective(800px) rotateX(0deg) translateY(0); } /* ===== Bloque 5: FAQ — acordeón (patrón propio, clon del de con-sal con prefijo bcn-) ===== */ .bcn-faq-stagger { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--delay, 0ms); } .bcn-faq-section.is-visible .bcn-faq-stagger { opacity: 1; transform: translateY(0); } .bcn-faq-item { opacity: 0; transform: translateX(-16px); border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--delay, 0ms); } .bcn-faq-section.is-visible .bcn-faq-item { opacity: 1; transform: translateX(0); } .bcn-faq-trigger { display: flex; width: 100%; cursor: pointer; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; background: transparent; border: none; text-align: left; font-family: "DM Sans", sans-serif; } .bcn-faq-question { font-size: 0.98rem; font-weight: 600; color: white; } .bcn-faq-chevron { flex: none; display: flex; color: #5bb8dc; transition: transform 0.3s ease; } .bcn-faq-item.is-open .bcn-faq-chevron { transform: rotate(180deg); } .bcn-faq-content { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.35s ease; } .bcn-faq-item.is-open .bcn-faq-content { grid-template-rows: 1fr; } .bcn-faq-content-inner { min-height: 0; } .bcn-faq-answer { padding: 0 22px 20px; font-size: 0.92rem; line-height: 1.7; color: rgba(255, 255, 255, 0.7); } /* ===== Bloque 6: Mapa de cobertura — trazado + puntos en cascada ===== */ .bcn-map-stagger { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--delay, 0ms); } .bcn-map-section.is-visible .bcn-map-stagger { opacity: 1; transform: translateY(0); } /* Mapa real de comarcas (sustituye al trazado a mano anterior) */ .bcn-map2-mainland path, .bcn-map2-mainland polygon { fill: #14304a; } .bcn-map2-comarca { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0.86); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease; transition-delay: var(--delay, 0ms), var(--delay, 0ms), 0s; cursor: pointer; } .bcn-map-section.is-visible .bcn-map2-comarca { opacity: 1; transform: scale(1); } .bcn-map2-comarca path, .bcn-map2-comarca polygon { fill: #163449; stroke: #4A6478; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .bcn-map2-comarca.is-active path, .bcn-map2-comarca.is-active polygon { fill: #5BB8DC; stroke: #EAF6FC; } .bcn-map2-comarca:hover, .bcn-map2-comarca:focus-visible, .bcn-map2-comarca.is-tapped { filter: brightness(1.28); } .bcn-map2-comarca:focus-visible { outline: none; } .bcn-map2-pin { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.5); transition: opacity 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: var(--delay, 0ms); } .bcn-map-section.is-visible .bcn-map2-pin { opacity: 1; transform: scale(1); } .bcn-map2-pin-dot { fill: #2196C9; stroke: white; stroke-width: 0.8; } .bcn-map2-pin-pulse { stroke: #5BB8DC; stroke-width: 1; animation: bcn-point-pulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; } .bcn-map2-pin-label { font-family: Arial, Helvetica, sans-serif; font-size: 6.5px; font-weight: 600; fill: #EAF6FC; paint-order: stroke; stroke: #0B2D48; stroke-width: 2.2px; stroke-linejoin: round; } @keyframes bcn-point-pulse { 0% { opacity: 0.8; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.4); } } .bcn-map-nap { opacity: 0; transition: opacity 0.6s ease 2.2s; } .bcn-map-section.is-visible .bcn-map-nap { opacity: 1; } /* Mapa en vivo (piloto): revela justo después del NAP, dentro de la misma sección — no necesita su propio observer. */ .bcn-gmap-wrap { opacity: 0; transition: opacity 0.6s ease 2.4s; } .bcn-map-section.is-visible .bcn-gmap-wrap { opacity: 1; } .bcn-gmap-facade { transition: border-color 0.2s ease, background 0.2s ease; } .bcn-gmap-facade:hover, .bcn-gmap-facade:focus-visible { border-color: rgba(33, 150, 201, 0.4); background: white; } .bcn-gmap-facade:focus-visible { outline: 2px solid #2196c9; outline-offset: 2px; } /* ===== Bloque 6b-bis: También instalamos cerca — fade+scale stagger (efecto distinto: escala desde el centro, no traslación) ===== */ .bcn-vecinos-stagger { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--delay, 0ms); } .bcn-vecinos-chip { opacity: 0; transform: scale(0.9); transition: opacity 0.5s cubic-bezier(0.34, 1.3, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1); transition-delay: var(--delay, 0ms); } .bcn-vecinos-section.is-visible .bcn-vecinos-stagger { opacity: 1; transform: translateY(0); } .bcn-vecinos-section.is-visible .bcn-vecinos-chip { opacity: 1; transform: scale(1); } /* ===== Bloque 6b: Cómo instalamos — conector trazándose + iconos en staircase (efecto distinto a los anteriores: cascada, blur-rise, 3D stagger, acordeón y trazado de mapa) ===== */ .bcn-steps-stagger { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--delay, 0ms); } .bcn-steps-section.is-visible .bcn-steps-stagger { opacity: 1; transform: translateY(0); } .bcn-steps-connector-h-trail { transform-origin: left; transform: scaleX(0); transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1) 200ms; } .bcn-steps-section.is-visible .bcn-steps-connector-h-trail { transform: scaleX(1); } .bcn-steps-connector-v-trail { transform-origin: top; transform: scaleY(0); transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1) 200ms; } .bcn-steps-section.is-visible .bcn-steps-connector-v-trail { transform: scaleY(1); } .bcn-steps-step { opacity: 0; transform: scale(0.85); transition: opacity 0.55s cubic-bezier(0.34, 1.3, 0.64, 1), transform 0.55s cubic-bezier(0.34, 1.3, 0.64, 1); transition-delay: var(--delay, 0ms); } .bcn-steps-section.is-visible .bcn-steps-step { opacity: 1; transform: scale(1); } /* ===== Bloque 6c: Autor/E-E-A-T — fade + blur-settle de un único bloque, sin stagger (efecto distinto a todos los anteriores, deliberadamente más discreto/lento, acorde a un bloque de firma) ===== */ .bcn-author-item { opacity: 0; filter: blur(4px); transform: translateY(10px); transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease; } .bcn-author-section.is-visible .bcn-author-item { opacity: 1; filter: blur(0); transform: translateY(0); } /* ===== Fallback: si no hay JS/IntersectionObserver, todo visible siempre ===== (el hero tiene su propio bloque equivalente en el CSS crítico) ===== */ @media (prefers-reduced-motion: reduce) { .bcn-cal-stagger, .bcn-zona-chip, .bcn-sol-stagger, .bcn-sol-card, .bcn-usp-stagger, .bcn-usp-card, .bcn-faq-stagger, .bcn-faq-item, .bcn-map-stagger, .bcn-map-nap, .bcn-map2-comarca, .bcn-map2-pin, .bcn-gmap-wrap, .bcn-steps-stagger, .bcn-steps-step, .bcn-vecinos-stagger, .bcn-vecinos-chip, .bcn-author-item { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .bcn-map2-pin-pulse { animation: none !important; } .bcn-steps-connector-h-trail, .bcn-steps-connector-v-trail { transform: scale(1) !important; transition: none !important; } }