/* ============================================================ GRUPO COPRINCI — landing.css Estilos de las landings de servicio (anti-PDF: scrollytelling, slider antes/después, selectores interactivos, cortes SVG/CSS). Carga DESPUÉS de styles.css. No redefine tokens ni la home. ============================================================ */ :root { --header-h: 60px; } /* Las landings tienen su propio hero oscuro -> header arranca transparente */ .landing main { overflow: clip; } .landing section { scroll-margin-top: calc(var(--header-h) + 64px); } /* ============================================================ SUB-NAV STICKY POR PÁGINA (scrollspy) ============================================================ */ .subnav { position: sticky; top: var(--header-h); z-index: 120; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .subnav__inner { display: flex; align-items: center; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .55rem 0; } .subnav__inner::-webkit-scrollbar { display: none; } .subnav a { flex: 0 0 auto; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--text-soft); padding: .45rem .9rem; border-radius: var(--r-pill); white-space: nowrap; transition: color .2s ease, background .2s ease; } .subnav a:hover { color: var(--marino); background: var(--cal); } .subnav a.is-active { color: #fff; background: var(--azul); } /* En móvil la sub-nav desborda: desvanecido al borde derecho como pista de scroll */ @media (max-width: 760px) { .subnav__inner { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); } } /* ============================================================ HERO DE SERVICIO ============================================================ */ .lhero { position: relative; min-height: 80vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; } .lhero__media { position: absolute; inset: 0; z-index: -2; } .lhero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16,52,97,.45) 0%, rgba(16,52,97,.72) 55%, rgba(10,26,51,.92) 100%); } .lhero__inner { padding: 9rem 0 3.5rem; max-width: 860px; } .lhero__eyebrow { font-family: var(--font-display); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; color: var(--energia); margin-bottom: 1rem; } .lhero__title { font-size: var(--fs-hero); line-height: 1.05; font-weight: 700; margin-bottom: 1.1rem; } .lhero__sub { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: rgba(255,255,255,.92); max-width: 620px; margin-bottom: 1.8rem; } .lhero__cta { display: flex; flex-wrap: wrap; gap: 1rem; } /* Entrada del hero de landing: cascada (reusa @keyframes heroUp de styles.css) + ken-burns lento. CSS puro, fire-on-load; el ya trae .js. Unifica la sensación premium con la home. */ .js .lhero__inner > * { animation: heroUp .8s var(--ease) both; } .js .lhero__eyebrow { animation-delay: .05s; } .js .lhero__title { animation-delay: .18s; } .js .lhero__sub { animation-delay: .34s; } .js .lhero__cta { animation-delay: .5s; } .js .lhero__media { animation: lheroKen 18s var(--ease) both; will-change: transform; } @keyframes lheroKen { from { transform: scale(1.02); } to { transform: scale(1.1); } } /* Placeholder visual de piso epóxico (CSS, sin foto — Memo aprueba la real luego) */ .ph-epoxy-floor { background: radial-gradient(120% 80% at 25% 18%, rgba(255,255,255,.22), transparent 45%), linear-gradient(180deg, #0b4fc0 0%, #0747a8 38%, var(--marino) 100%); } .ph-epoxy-floor::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px); -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000); mask-image: linear-gradient(180deg, transparent 40%, #000); } /* etiqueta honesta: visual de desarrollo */ .ph-badge { position: absolute; right: .7rem; bottom: .7rem; z-index: 3; font: 600 .68rem/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(22,35,43,.6); padding: .3rem .55rem; border-radius: var(--r-sm); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } /* ============================================================ TIRA DE DATOS (números que cuentan — reales) ============================================================ */ .facts { background: var(--marino); color: #fff; } .facts__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding: 2.2rem 0; text-align: center; } .fact .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--naranja); line-height: 1; } .fact .l { font-size: .92rem; color: rgba(255,255,255,.82); margin-top: .35rem; } @media (max-width: 720px) { .facts__inner { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; } } /* ============================================================ SECCIONES + DIVISORES ANGULARES / HEX ============================================================ */ .lsection { padding: clamp(3.5rem, 8vw, 6.5rem) 0; position: relative; } .lsection--soft { background: var(--cal); } .lsection--dark { background: var(--marino); color: #fff; } .lsection--dark .lhead__title { color: #fff; } .lsection--dark .lhead__lead { color: rgba(255,255,255,.8); } /* corte diagonal entre secciones (guiño constructivo) */ .lsection--angled { clip-path: polygon(0 2.2vw, 100% 0, 100% 100%, 0 100%); margin-top: -2.2vw; } .lhead { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); } .lhead--center { margin-inline: auto; text-align: center; } .lhead__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--azul); margin-bottom: .6rem; } .lsection--dark .lhead__eyebrow { color: var(--energia); } .lhead__eyebrow::before { content: ""; width: 16px; height: 18px; background: currentColor; -webkit-clip-path: var(--hex); clip-path: var(--hex); } .lhead__title { font-size: var(--fs-h2); color: var(--marino); margin-bottom: .6rem; } .lhead__lead { color: var(--text-soft); font-size: 1.1rem; } /* ============================================================ SLIDER ANTES / DESPUÉS (arrastrable + teclado) ============================================================ */ .ba { --pos: 50%; position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); touch-action: pan-y; user-select: none; } .ba__layer { position: absolute; inset: 0; } .ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 2; } /* "Antes" (concreto) a la izquierda */ .ba__after { z-index: 1; } /* "Después" (epóxico) de fondo */ .ba__divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; transform: translateX(-50%); background: #fff; z-index: 3; box-shadow: 0 0 0 1px rgba(0,0,0,.12); } .ba__knob { position: absolute; top: 50%; left: var(--pos); transform: translate(-50%, -50%); z-index: 4; width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-md); display: grid; place-items: center; color: var(--marino); font-size: 1.1rem; pointer-events: none; } .ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 5; } .ba__range:focus-visible ~ .ba__knob { outline: 3px solid var(--energia); outline-offset: 3px; } .ba__tag { position: absolute; top: 1rem; z-index: 3; font: 700 .8rem/1 var(--font-display); color: #fff; background: rgba(16,52,97,.7); padding: .35rem .7rem; border-radius: var(--r-pill); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .ba__tag--before { left: 1rem; } .ba__tag--after { right: 1rem; } /* placeholders procedurales del slider */ .ph-concrete { background: #9aa1a6; background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,.16) 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgba(0,0,0,.13) 0 2px, transparent 3px), radial-gradient(circle at 45% 80%, rgba(0,0,0,.12) 0 1px, transparent 2px), radial-gradient(circle at 85% 20%, rgba(255,255,255,.18) 0 2px, transparent 3px), linear-gradient(160deg, #a7adb1, #8b9398); background-size: 70px 70px, 90px 90px, 55px 55px, 60px 60px, 100% 100%; } /* sin position:relative -> no debe pisar el position:absolute de .ba__layer (el ::after se posiciona contra la capa absoluta que lo contiene) */ .ph-epoxy { background: radial-gradient(130% 90% at 22% 12%, rgba(255,255,255,.32), transparent 42%), linear-gradient(165deg, #0b57cf 0%, #0747a8 45%, #0a3f7a 100%); } .ph-epoxy::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(118deg, rgba(255,255,255,.06) 0 2px, transparent 2px 30px); } /* ============================================================ SELECTOR DE ACABADOS (chips -> preview cambia en vivo) ============================================================ */ .finish { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.4rem; } .chip { font-family: var(--font-display); font-weight: 600; font-size: .95rem; cursor: pointer; padding: .55rem 1.1rem; border-radius: var(--r-pill); border: 2px solid var(--border); background: #fff; color: var(--marino); transition: border-color .2s, background .2s, color .2s, transform .15s var(--ease); } .chip:hover { transform: translateY(-2px); } .chip[aria-selected="true"], .chip[aria-checked="true"], .chip.is-active { background: var(--azul); border-color: var(--azul); color: #fff; } .finish__desc { color: var(--text-soft); min-height: 3.2em; } .finish__desc b { color: var(--marino); font-family: var(--font-display); } .finish__preview { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); background: linear-gradient(165deg, #0b57cf, #0a3f7a); } .finish__preview::before { /* brillo/reflejo controlable por --gloss */ content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 28% 15%, rgba(255,255,255,calc(.10 + var(--gloss,.4) * .55)), transparent 55%); transition: background .4s var(--ease); } .finish__preview::after { /* textura controlable por --tex */ content: ""; position: absolute; inset: 0; opacity: var(--tex, 0); transition: opacity .4s var(--ease); background: radial-gradient(circle at 30% 30%, rgba(0,0,0,.16) 0 2px, transparent 3px) 0 0 / 16px 16px, radial-gradient(circle at 70% 60%, rgba(255,255,255,.10) 0 2px, transparent 3px) 8px 8px / 20px 20px; } .finish__preview[data-finish="brillante"] { --gloss: .95; --tex: 0; } .finish__preview[data-finish="mate"] { --gloss: .12; --tex: .12; } .finish__preview[data-finish="antiderrapante"] { --gloss: .3; --tex: .9; } .finish__preview[data-finish="cascara"] { --gloss: .5; --tex: .55; } .finish__preview[data-finish="cascara"]::after { background-size: 26px 26px, 34px 34px; } .finish__label { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; font: 700 1.05rem/1 var(--font-display); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.4); } @media (max-width: 760px) { .finish { grid-template-columns: 1fr; } } /* ============================================================ SCROLLYTELLING: texto que scrollea + visual STICKY ============================================================ */ .scrolly { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .scrolly__visual { position: sticky; top: calc(var(--header-h) + 80px); } .scrolly__steps { display: flex; flex-direction: column; } .scrolly__step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; } .scrolly__step .num { display: inline-grid; place-items: center; width: 40px; height: 44px; background: var(--azul); color: #fff; font: 700 1.1rem var(--font-display); -webkit-clip-path: var(--hex); clip-path: var(--hex); margin-bottom: 1rem; transition: background .3s; } .js .scrolly__step:not(.is-active) { opacity: .38; transition: opacity .4s var(--ease); } .js .scrolly__step:not(.is-active) .num { background: var(--acero); } .scrolly__step h3 { font-size: var(--fs-h3); color: var(--marino); margin-bottom: .6rem; } .scrolly__step p { color: var(--text-soft); max-width: 46ch; } /* ============================================================ CORTE TRANSVERSAL (cross-section) — usado en proceso y espesores ============================================================ */ .xsection { position: relative; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(180deg, #eaf0f3, #dde6ec); box-shadow: var(--shadow-md); aspect-ratio: 4 / 3.2; } /* posición absoluta -> altura definida para que los % de las capas resuelvan */ .xstack { position: absolute; left: 1.1rem; right: 1.1rem; top: 3.6rem; bottom: 1.1rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; } .xlayer { position: relative; border-radius: 4px; display: flex; align-items: center; padding-left: .9rem; color: #fff; font: 600 .85rem var(--font-display); overflow: hidden; transition: height .5s var(--ease), opacity .4s var(--ease), filter .3s; } .xlayer span { position: relative; z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,.35); } .xlayer[data-layer="concreto"] { background: linear-gradient(180deg, #8b9398, #6f777c); color: #1c2429; height: 26%; } .xlayer[data-layer="concreto"] span { text-shadow: none; color: #2b343a; } .xlayer[data-layer="primario"] { background: var(--fuerza); height: 12%; } .xlayer[data-layer="cuerpo"] { background: linear-gradient(180deg, var(--azul), var(--marino)); height: 34%; } .xlayer[data-layer="acabado"] { background: linear-gradient(180deg, color-mix(in srgb, var(--azul) 72%, #fff), var(--azul)); height: 14%; } .xlayer[data-layer="acabado"]::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 25% 10%, rgba(255,255,255,.5), transparent 55%); } /* resaltado por paso (scrollytelling) */ .xsection[data-active="concreto"] .xlayer:not([data-layer="concreto"]), .xsection[data-active="primario"] .xlayer:not([data-layer="primario"]), .xsection[data-active="cuerpo"] .xlayer:not([data-layer="cuerpo"]), .xsection[data-active="acabado"] .xlayer:not([data-layer="acabado"]) { filter: grayscale(.55) brightness(.82); opacity: .75; } .xsection[data-active] .xlayer { transform: none; } /* niveles de espesor (visualizador) */ .xsection[data-level="0"] .xlayer[data-layer="cuerpo"] { height: 11%; } .xsection[data-level="1"] .xlayer[data-layer="cuerpo"] { height: 34%; } .xsection[data-level="2"] .xlayer[data-layer="cuerpo"] { height: 46%; } .xsection[data-level="0"] .xlayer[data-layer="primario"] { height: 8%; } .xtag { position: absolute; top: 1rem; left: 1rem; font: 700 .8rem var(--font-display); color: var(--marino); background: #fff; padding: .3rem .7rem; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); } /* ============================================================ VISUALIZADOR DE ESPESORES ============================================================ */ .thick { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .thick__range { width: 100%; margin: 1.4rem 0 .6rem; accent-color: var(--azul); } .thick__ticks { display: flex; justify-content: space-between; font: 600 .82rem var(--font-display); color: var(--text-soft); } .thick__ticks button { background: none; border: 0; cursor: pointer; color: inherit; font: inherit; padding: .2rem .35rem; min-height: 44px; display: inline-flex; align-items: center; } .thick__ticks button.is-active { color: var(--azul); } .thick__card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.4rem; margin-top: 1.4rem; box-shadow: var(--shadow-sm); } .thick__card h3 { color: var(--marino); font-size: 1.15rem; margin-bottom: .3rem; } .thick__card .mm { color: var(--naranja); font-weight: 700; font-family: var(--font-display); } @media (max-width: 760px) { .thick { grid-template-columns: 1fr; } } /* ============================================================ SELECTOR DE SECTORES ============================================================ */ .sectors__tabs { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; } /* gateado con .js -> sin JS los 5 paneles quedan visibles y legibles (PE) */ .js .sector-panel { display: none; } .js .sector-panel.is-active { display: block; animation: fadeUp .45s var(--ease) both; } .sector-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .sector-grid ul { display: grid; gap: .7rem; } .sector-grid li { display: flex; gap: .6rem; align-items: flex-start; } .sector-grid li::before { content: ""; flex: 0 0 auto; width: 14px; height: 16px; margin-top: .25rem; background: var(--azul); -webkit-clip-path: var(--hex); clip-path: var(--hex); } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (max-width: 760px) { .sector-grid { grid-template-columns: 1fr; } } /* ============================================================ MINI-ESTIMADOR (arma el WhatsApp, sin precio) ============================================================ */ .estimator { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); } .estimator__card { background: #fff; border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2.2rem); box-shadow: var(--shadow-md); } .field { margin-bottom: 1.1rem; } .field label { display: block; font: 600 .9rem var(--font-display); color: var(--marino); margin-bottom: .4rem; } .field input, .field select { width: 100%; padding: .75rem .9rem; border: 2px solid var(--border); border-radius: var(--r-sm); font: inherit; color: var(--text); background: #fff; } .field input:focus, .field select:focus { outline: none; border-color: var(--azul); } .estimator__out { background: var(--cal); border-radius: var(--r-md); padding: 1.1rem 1.2rem; font-size: .95rem; color: var(--text-soft); margin-bottom: 1.2rem; } .estimator__out b { color: var(--marino); } .estimator__aside { display: flex; flex-direction: column; justify-content: center; } .estimator__aside li { display: flex; gap: .6rem; margin-bottom: .8rem; } .estimator__aside li::before { content: "✓"; color: var(--azul); font-weight: 700; } @media (max-width: 760px) { .estimator { grid-template-columns: 1fr; } } /* ============================================================ TOGGLE DE MODOS (compartido: naves Construcción/Mantenimiento, mantenimiento Preventivo/Correctivo) ============================================================ */ .toggle-modes { display: none; background: var(--cal); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px; gap: 4px; margin-bottom: 1.6rem; } .js .toggle-modes { display: inline-flex; } /* sin JS no se muestra el control inerte; quedan las dos listas */ .toggle-modes button { border: 0; background: none; cursor: pointer; font: 600 .95rem var(--font-display); color: var(--text-soft); padding: .55rem 1.3rem; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--r-pill); transition: background .2s var(--ease), color .2s; } .toggle-modes button[aria-pressed="true"] { background: var(--azul); color: #fff; } .js .mode-panel { display: none; } .js .mode-panel.is-active { display: block; animation: fadeUp .4s var(--ease) both; } /* Tags de servicios (estáticos, motivo hex) — compartido (naves, cuadrillas, mantenimiento) */ .tag-grid { display: flex; flex-wrap: wrap; gap: .6rem; } .tag { font: 600 .92rem var(--font-display); color: var(--marino); background: #fff; border: 1px solid var(--border); border-radius: var(--r-pill); padding: .5rem 1rem; display: inline-flex; align-items: center; gap: .55rem; transition: transform .18s var(--ease), border-color .2s; } .tag:hover { transform: translateY(-2px); border-color: var(--azul); } .tag::before { content: ""; flex: 0 0 auto; width: 12px; height: 14px; background: var(--azul); -webkit-clip-path: var(--hex); clip-path: var(--hex); } /* Suprime la viñeta hex solo cuando el tag trae su propio icono Lucide. */ .tag:has(.licon)::before { display: none; } /* ============================================================ STEPPER (compartido: naves "llave en mano", cuadrillas "modelo") flex -> sirve para cualquier número de pasos ============================================================ */ .stepper { display: flex; gap: 1rem; margin-top: 1rem; } .stepper__item { flex: 1; text-align: center; position: relative; } .stepper__item::before { content: ""; position: absolute; top: 23px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; } .stepper__item:first-child::before { display: none; } .stepper__num { position: relative; z-index: 1; width: 44px; height: 48px; margin: 0 auto .7rem; display: grid; place-items: center; background: var(--grad-marca); color: #fff; font: 700 1.05rem var(--font-display); -webkit-clip-path: var(--hex); clip-path: var(--hex); } .stepper__item h4 { font-size: .98rem; color: var(--marino); line-height: 1.2; } @media (max-width: 760px) { .stepper { flex-wrap: wrap; } .stepper__item { flex: 1 1 40%; } .stepper__item::before { display: none; } } /* ============================================================ GRID DE VENTAJAS (íconos hexagonales) ============================================================ */ .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; } .benefit { display: flex; align-items: center; gap: .9rem; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem 1.2rem; font-family: var(--font-display); font-weight: 600; color: var(--marino); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .benefit__ico { flex: 0 0 auto; width: 26px; height: 30px; background: var(--grad-marca); -webkit-clip-path: var(--hex); clip-path: var(--hex); position: relative; } .benefit__ico::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .85rem; font-weight: 700; } /* ============================================================ BLOQUE CTA CONTEXTUAL ============================================================ */ .cta-band { background: var(--grad-marca); color: #fff; border-radius: var(--r-lg); padding: clamp(1.8rem, 4vw, 2.6rem); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .cta-band h3 { font-size: var(--fs-h3); } .cta-band p { color: rgba(255,255,255,.85); } /* ============================================================ BARRA CTA FIJA (móvil) ============================================================ */ .mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 130; display: none; padding: .6rem max(env(safe-area-inset-left), .8rem) calc(.6rem + env(safe-area-inset-bottom)) max(env(safe-area-inset-right), .8rem); background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 -6px 20px rgba(16,52,97,.12); } .mcta .btn { width: 100%; } @media (max-width: 760px) { .mcta { display: block; } .landing .wa-float { display: none; } /* evita choque con la barra fija */ body.landing { padding-bottom: 76px; } } /* ============================================================ RESPONSIVE scrollytelling / móvil ============================================================ */ @media (max-width: 860px) { .scrolly { grid-template-columns: 1fr; } .scrolly__visual { position: sticky; top: calc(var(--header-h) + 8px); z-index: 10; margin-bottom: 1rem; max-width: 460px; } .scrolly__step { min-height: 48vh; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .scrolly__visual { position: static; } .js .scrolly__step:not(.is-active) { opacity: 1; } .lsection--angled { clip-path: none; margin-top: 0; } .js .lhero__inner > * { animation: none !important; } .js .lhero__media { animation: none !important; transform: none !important; } } /* ============================================================ PISOS EPÓXICOS — acentos terracota + naranja (rompe la monocromía azul) ============================================================ */ .pisos { --terracota: #b06a4f; } .pisos .lhero__eyebrow, .pisos .lhead__eyebrow { color: var(--naranja); } .pisos #acabados { background: linear-gradient(180deg, #faf2ec 0%, #fff 72%); } .pisos #ventajas { background: linear-gradient(180deg, #fff 0%, #f7efe9 100%); } .pisos .chip[aria-selected="true"], .pisos .chip[aria-checked="true"], .pisos .chip.is-active { background: var(--naranja); border-color: var(--naranja); color: var(--roca); } .pisos .thick__card { border-left: 4px solid var(--terracota); } .pisos .thick__ticks button.is-active { color: var(--terracota); } /* ============================================================ CARRUSEL (data-carousel): tira con scroll-snap + flechas/puntos (los inyecta landings.js). Sin JS sigue siendo una tira deslizable. Tarjeta = imagen + caption. ============================================================ */ .carousel { position: relative; } .carousel__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: .3rem .15rem 1rem; margin: 0; list-style: none; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__slide { flex: 0 0 84%; scroll-snap-align: start; } @media (min-width: 560px) { .carousel__slide { flex-basis: calc(50% - .5rem); } } @media (min-width: 860px) { .carousel__slide { flex-basis: calc(33.333% - .67rem); } } @media (min-width: 1200px) { .carousel__slide { flex-basis: calc(25% - .75rem); } } .cslide { position: relative; height: 100%; margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--marino); } .cslide__img { aspect-ratio: 4 / 3; } .cslide__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); } .cslide:hover .cslide__img img, .cslide:focus-within .cslide__img img { transform: scale(1.05); } .cslide__cap { position: absolute; inset: auto 0 0 0; padding: 1.5rem 1.1rem 1rem; color: #fff; background: linear-gradient(0deg, rgba(10,26,51,.94) 8%, rgba(10,26,51,.55) 55%, transparent); } .cslide__title { font: 700 1.1rem var(--font-display); margin: 0 0 .15rem; color: #fff; } .cslide__text { font-size: .87rem; color: rgba(255,255,255,.85); margin: 0; line-height: 1.34; } /* flechas + puntos: los crea landings.js (sin JS no aparecen; la tira igual se desliza) */ .carousel__btn { display: none; position: absolute; top: calc(50% - 1.3rem); transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--marino); box-shadow: var(--shadow-md); cursor: pointer; font-size: 1.7rem; line-height: 1; place-items: center; transition: background .2s var(--ease), color .2s var(--ease), opacity .2s; } .js .carousel__btn { display: grid; } .carousel__btn:hover { background: var(--azul); color: #fff; } .carousel__btn--prev { left: 6px; } .carousel__btn--next { right: 6px; } .carousel__btn[disabled] { opacity: 0; pointer-events: none; } @media (max-width: 560px) { .carousel__btn { display: none !important; } } .carousel__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; } .carousel__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--border); cursor: pointer; transition: background .2s, transform .2s; } .carousel__dot:hover { background: var(--text-soft); } .carousel__dot.is-active { background: var(--azul); transform: scale(1.3); } @media (prefers-reduced-motion: reduce) { .cslide__img img { transition: none; } }