/* ===== Tema #54AAEF: lienzo con tonos de #54AAEF (el nombre del archivo es histórico) =====
   Se carga después de styles.css. Los tokens de la gama (--c-50 … --c-900) están en styles.css. */
body{background:var(--c-600)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 620px at 8% 4%,var(--c-800) 0%,transparent 70%),
    radial-gradient(820px 620px at 96% 30%,color-mix(in srgb,var(--c-400) 80%,transparent) 0%,transparent 70%),
    radial-gradient(900px 700px at 20% 100%,var(--c-500) 0%,transparent 72%),
    var(--c-600)}
:focus-visible{outline-color:#fff}
.trust :focus-visible,.form :focus-visible,.product :focus-visible,.tile-plain :focus-visible,.news-card:focus-visible{outline-color:var(--c-700)}

/* navegación */
.nav{background:color-mix(in srgb,var(--c-700) 86%,transparent)}
.brand img,.footer-logo{filter:brightness(0) invert(1)}
.nav-links a{color:var(--c-100)}
.nav-links a:hover,.nav-links a[aria-current="true"]{color:#fff;background:rgb(255 255 255 / .14)}
.phone{color:#fff}
.menu-toggle{background:rgb(255 255 255 / .12);color:#fff;border-color:rgb(255 255 255 / .3)}
@media (max-width:1080px){.nav-links{background:var(--c-700)}}

/* botones sobre el lienzo */
.btn-ghost{background:transparent;color:#fff;border-color:rgb(255 255 255 / .55)}
.btn-ghost:hover{background:#fff;color:var(--c-800);border-color:#fff}
.btn-primary{box-shadow:0 8px 22px -10px rgb(15 50 80 / .8)}

/* textos sobre el lienzo */
.lead,.section-lead{color:var(--c-50)}
.eyebrow{color:var(--c-100)}

/* bandas y secciones */
.section-soft{background:linear-gradient(180deg,rgb(29 95 152 / 0) 0%,rgb(29 95 152 / .75) 14%,rgb(23 74 118 / .8) 86%,rgb(23 74 118 / 0) 100%)}
.section-ceye{background:radial-gradient(1100px 520px at 72% 0%,rgb(84 170 239 / .55),transparent 70%)}
.tile-photo::before{background:linear-gradient(180deg,rgb(15 50 80 / .1) 0%,rgb(15 50 80 / .55) 45%,rgb(15 50 80 / .94) 100%)}

/* pestañas de infografías */
.tabs{background:rgb(255 255 255 / .12);border-color:rgb(255 255 255 / .25)}
.tabs button{color:var(--c-50)}
.tabs button[aria-selected="true"]{background:var(--c-50);color:var(--c-900)}

/* mantenimiento */
.norm{background:rgb(255 255 255 / .12);border-left-color:var(--c-100);color:#fff}

/* contacto */
.contact-list li{color:#fff}
.contact-list a:hover{color:var(--c-100)}

/* figura CEYE: tarjeta clara en tonos de la gama */
.ceye-figure .iso-plate{box-shadow:0 0 0 1px rgb(255 255 255 / .35),var(--shadow)}
.ceye-figure .iso-legend{color:var(--c-50)}
.ceye-figure .iso-legend .iso-key{color:var(--c-50)}
.ceye-figure .iso-swatch path{stroke-width:3}
.ceye-figure .iso-swatch[data-mark="red"] path{stroke:#ffb3b8}
.ceye-figure .iso-swatch[data-mark="blue"] path{stroke:#b9d6ff}
.ceye-figure .iso-swatch[data-mark="green"] path{stroke:#a8e8c6}
.ceye-figure .iso-swatch:not([data-mark="red"]):not([data-mark="blue"]):not([data-mark="green"]) path{stroke:#fff}
html body .ceye-figure .ceye-steps button{background:var(--c-50);border-color:var(--c-200);color:#1F3B55}
html body .ceye-figure .ceye-steps button[aria-pressed="true"]{background:var(--c-900);border-color:var(--c-900);color:#fff}

/* pie */
.footer{background:var(--c-800);border-top-color:rgb(255 255 255 / .12);color:var(--c-200)}
.footer a{color:var(--c-100)}
.footer a:hover{color:#fff}
.footer-base{border-top-color:rgb(255 255 255 / .12);color:var(--c-300)}

/* WhatsApp: botón flotante y panel con preguntas de inicio */
.wa{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:inherit}
.wa-fab{position:relative;width:58px;height:58px;border-radius:50%;border:0;background:#25D366;color:#fff;font-size:30px;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 12px 28px -10px rgb(15 50 80 / .75),0 0 0 4px rgb(255 255 255 / .16);transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s}
.wa-fab:hover{transform:translateY(-2px) scale(1.04);background:#20bd5a}
.wa-fab:active{transform:scale(.96)}
.wa-fab:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wa-fab .ph{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.wa[data-open] .wa-fab{background:var(--c-800);font-size:24px}
.wa[data-open] .wa-fab .ph{transform:rotate(90deg)}
.wa-hint{position:absolute;right:68px;top:50%;translate:0 -50%;white-space:nowrap;background:var(--c-50);color:var(--c-900);font-size:13px;font-weight:500;padding:8px 12px;border-radius:999px;box-shadow:0 8px 20px -10px rgb(15 50 80 / .7);pointer-events:none;opacity:0;transition:opacity .3s}
.wa[data-hint] .wa-hint{opacity:1}
.wa[data-open] .wa-hint{opacity:0}

.wa-panel{width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 120px);overflow:auto;background:var(--c-50);color:#1F3B55;border-radius:18px;
  box-shadow:0 30px 60px -24px rgb(10 34 56 / .7),0 0 0 1px rgb(255 255 255 / .35);transform-origin:100% 100%;overscroll-behavior:contain}
.wa-panel:not([hidden]){animation:wa-in .28s cubic-bezier(.2,.8,.2,1)}
@keyframes wa-in{from{opacity:0;transform:translateY(8px) scale(.96)}}
.wa-head{display:flex;align-items:center;gap:12px;padding:14px 12px 14px 16px;background:var(--c-800);color:#fff}
.wa-avatar{width:40px;height:40px;flex:none;border-radius:50%;background:#25D366;display:grid;place-items:center;font-size:22px;color:#fff}
.wa-title{margin:0;font-weight:600;font-size:15px;line-height:1.2;color:#fff}
.wa-sub{margin:2px 0 0;font-size:12.5px;color:var(--c-200);display:flex;align-items:center;gap:6px}
.wa-dot{width:7px;height:7px;border-radius:50%;background:#25D366;box-shadow:0 0 0 3px rgb(37 211 102 / .25)}
.wa-close{margin-left:auto;width:36px;height:36px;border-radius:50%;border:0;background:rgb(255 255 255 / .1);color:#fff;font-size:18px;display:grid;place-items:center;cursor:pointer}
.wa-close:hover{background:rgb(255 255 255 / .2)}
.wa-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.wa-body{padding:16px;background:linear-gradient(180deg,var(--c-100),var(--c-50))}
.wa-bubble{margin:0 0 14px;max-width:90%;padding:10px 12px;background:#fff;border-radius:4px 14px 14px 14px;font-size:14px;line-height:1.45;color:#1F3B55;box-shadow:0 1px 2px rgb(15 50 80 / .12)}
.wa-questions{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wa-questions a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:#fff;border:1px solid var(--c-200);color:var(--c-900);font-size:14px;line-height:1.35;font-weight:500;text-decoration:none;
  transition:border-color .2s,background .2s,transform .12s}
.wa-questions a .ph{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--c-100);color:var(--c-700);font-size:17px}
.wa-questions a:hover{border-color:var(--c-400);background:var(--c-50)}
.wa-questions a:active{transform:scale(.98)}
.wa-questions a:focus-visible,.wa-free:focus-visible{outline:2px solid var(--c-700);outline-offset:2px}
.wa-free{display:flex;justify-content:center;align-items:center;gap:6px;padding:12px 16px;border-top:1px solid var(--c-200);color:var(--c-700);font-size:13.5px;font-weight:600;text-decoration:none}
.wa-free:hover{color:var(--c-900);background:var(--c-100)}
@media (max-width:640px){.wa{right:16px;bottom:16px}.wa-fab{width:54px;height:54px;font-size:28px}.wa-hint{display:none}}
@media (prefers-reduced-motion:reduce){.wa-panel:not([hidden]){animation:none}.wa-fab,.wa-fab .ph{transition:none}}
@media print{.wa{display:none}}