/* CSV45.9 · Sistema de llamadas a la acción táctiles Volumen óptico, brillo controlado y respuesta física sin alterar la estructura. */ :root{ --csv-cta-blue-1:#63c8ff; --csv-cta-blue-2:#0868df; --csv-cta-blue-3:#043a9f; --csv-cta-orange-1:#ffd07a; --csv-cta-orange-2:#ff7a18; --csv-cta-orange-3:#d84709; --csv-cta-green-1:#73f58a; --csv-cta-green-2:#22c65a; --csv-cta-green-3:#078a36; } /* Solo controles de acción; navegación y enlaces informativos quedan intactos. */ :where(.btn.is-interactive,.toggle-form,.station-tab.is-interactive,.wa-open.is-interactive,button[type="submit"].is-interactive){ --cta-top:var(--csv-cta-orange-1); --cta-mid:var(--csv-cta-orange-2); --cta-bottom:var(--csv-cta-orange-3); --cta-edge:#b73605; --cta-glow:rgba(255,132,28,.34); position:relative; isolation:isolate; overflow:hidden; border:1px solid rgba(255,255,255,.72)!important; border-radius:999px; color:#fff!important; background: linear-gradient(180deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.08) 31%,rgba(255,255,255,0) 47%), radial-gradient(120% 105% at 50% -10%,var(--cta-top) 0%,var(--cta-mid) 48%,var(--cta-bottom) 100%)!important; box-shadow: inset 0 2px 1px rgba(255,255,255,.88), inset 0 -5px 9px rgba(45,18,0,.28), inset 0 0 0 2px rgba(255,255,255,.14), 0 2px 0 var(--cta-edge), 0 8px 14px rgba(6,23,43,.20), 0 14px 30px var(--cta-glow)!important; text-shadow:0 1px 1px rgba(0,0,0,.38); transform:translateY(0) translateZ(0); transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s ease,filter .16s ease; -webkit-tap-highlight-color:transparent; will-change:transform; } :where(.btn.is-interactive,.toggle-form,.station-tab.is-interactive,.wa-open.is-interactive,button[type="submit"].is-interactive)::before{ content:""; position:absolute; z-index:-1; left:8%;right:8%;top:5%;height:45%; border-radius:inherit; background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.18)); opacity:.72; pointer-events:none; transform:translateY(-2px); } :where(.btn.is-interactive,.toggle-form,.station-tab.is-interactive,.wa-open.is-interactive,button[type="submit"].is-interactive)::after{ content:""; position:absolute; z-index:2; inset:-45% auto -45% -42%; width:28%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent); transform:skewX(-18deg) translateX(-230%); pointer-events:none; transition:transform .62s cubic-bezier(.2,.7,.2,1); } @media (hover:hover){ :where(.btn.is-interactive,.toggle-form,.station-tab.is-interactive,.wa-open.is-interactive,button[type="submit"].is-interactive):hover{ transform:translateY(-3px) scale(1.015); filter:saturate(1.08) brightness(1.045); box-shadow: inset 0 2px 1px rgba(255,255,255,.94), inset 0 -5px 9px rgba(45,18,0,.24), inset 0 0 0 2px rgba(255,255,255,.17), 0 3px 0 var(--cta-edge), 0 12px 20px rgba(6,23,43,.23), 0 18px 38px var(--cta-glow)!important; } :where(.btn.is-interactive,.toggle-form,.station-tab.is-interactive,.wa-open.is-interactive,button[type="submit"].is-interactive):hover::after{ transform:skewX(-18deg) translateX(650%); } } :where(.btn.is-interactive,.toggle-form,.station-tab.is-interactive,.wa-open.is-interactive,button[type="submit"].is-interactive):active, :where(.btn.is-interactive,.toggle-form,.station-tab.is-interactive,.wa-open.is-interactive,button[type="submit"].is-interactive).csv-cta-pressed{ transform:translateY(2px) scale(.985); filter:brightness(.96) saturate(1.03); box-shadow: inset 0 4px 10px rgba(0,0,0,.25), inset 0 -1px 2px rgba(255,255,255,.48), 0 1px 0 var(--cta-edge), 0 4px 8px rgba(6,23,43,.18)!important; } /* Azul: llamada, rutas, acciones secundarias y utilidades. */ :where(.btn.dark,.btn.outline,.btn.alt,.csv-object--call,.csv-object--route,.csv-utility-actions .btn,.station-tab.is-interactive){ --cta-top:var(--csv-cta-blue-1); --cta-mid:var(--csv-cta-blue-2); --cta-bottom:var(--csv-cta-blue-3); --cta-edge:#032c7b; --cta-glow:rgba(14,111,224,.34); } /* WhatsApp conserva identidad verde, con el mismo acabado premium. */ :where(.csv-object--whatsapp,.wa-open.is-interactive){ --cta-top:var(--csv-cta-green-1); --cta-mid:var(--csv-cta-green-2); --cta-bottom:var(--csv-cta-green-3); --cta-edge:#056b2c; --cta-glow:rgba(24,190,83,.34); } /* Pestaña activa: lectura inmediata del estado seleccionado. */ .station-tab.is-interactive[aria-selected="true"]{ --cta-top:#fff1a8; --cta-mid:#f2a900; --cta-bottom:#b76900; --cta-edge:#8e5200; --cta-glow:rgba(242,169,0,.35); } .station-tab.is-interactive[aria-selected="false"]{opacity:.91} /* Iconos: placa interior elevada, no círculo duplicado. */ :where(.btn,.wa-open) .csv-object__icon{ display:inline-grid; place-items:center; flex:0 0 auto; width:1.9em;height:1.9em; border-radius:50%; background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.08)); box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -2px 4px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.14); } :where(.btn,.wa-open) .csv-object__icon svg{width:1.05em;height:1.05em;filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))} :where(.btn,.wa-open) .csv-object__label{position:relative;z-index:3} /* Foco visible y accesible. */ :where(.btn.is-interactive,.toggle-form,.station-tab.is-interactive,.wa-open.is-interactive,button[type="submit"].is-interactive):focus-visible{ outline:3px solid #fff!important; outline-offset:3px; box-shadow:0 0 0 6px rgba(5,83,173,.72),0 12px 28px var(--cta-glow)!important; } /* La barra móvil mantiene la respiración y no convierte los CTA en bloques pesados. */ @media(max-width:650px){ :where(.btn.is-interactive,.toggle-form,.wa-open.is-interactive,button[type="submit"].is-interactive){min-height:48px;padding-inline:17px} .station-actions .btn{min-height:50px} .station-tab.is-interactive{border-radius:18px} } @media(prefers-reduced-motion:reduce){ :where(.btn.is-interactive,.toggle-form,.station-tab.is-interactive,.wa-open.is-interactive,button[type="submit"].is-interactive){transition:none!important} :where(.btn.is-interactive,.toggle-form,.station-tab.is-interactive,.wa-open.is-interactive,button[type="submit"].is-interactive)::after{display:none} }