/*
Theme Name: Seguridad Salta
Theme URI: https://www.seguridadsalta.com.ar
Author: Seguridad Salta
Description: Block theme (FSE) para Seguridad Salta — servicio técnico de PC, cámaras de seguridad, celulares e impresoras a domicilio, y monitoreo de alarmas en Salta. Editable al 100% desde el Editor del Sitio.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ssalta
Tags: full-site-editing, block-patterns, business, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments

Este es un BLOCK THEME (FSE). El estilo vive en theme.json y se edita desde
Apariencia → Editor. Este archivo solo aporta lo que el editor no cubre
nativamente: slider antes/después, marquee de clientes y el botón flotante
de WhatsApp.
*/

/* ── Botón flotante de WhatsApp ── */
.wa-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  animation: wa-pulse 1.8s ease-in-out infinite, wa-beat 1.8s ease-in-out infinite;
}
.wa-float:hover { animation-play-state: paused; transform: scale(1.1); }
.wa-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
@keyframes wa-pulse {
  0% { box-shadow: 0 4px 20px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,.5); }
  70% { box-shadow: 0 4px 20px rgba(37,211,102,.4), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 4px 20px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,0); }
}
@keyframes wa-beat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ── Sellos de confianza (Trust & Authority) ── */
.ss-badges { display: flex; flex-wrap: wrap; gap: .75rem; }
.ss-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--wp--preset--color--surface, #1a1a1a);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: .7rem 1rem;
}
.ss-badge svg { width: 24px; height: 24px; flex-shrink: 0; }
.ss-badge b { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1rem; color: #fff; line-height: 1; }
.ss-badge span { font-size: .72rem; color: #78746e; text-transform: uppercase; letter-spacing: .05em; }

/* ── Slider Antes/Después ── */
.ss-ba {
  position: relative; width: 100%; aspect-ratio: 3/2; overflow: hidden;
  user-select: none; touch-action: pan-y; cursor: ew-resize; border-radius: 10px;
}
.ss-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ss-ba__after { z-index: 1; }
.ss-ba__before { z-index: 2; clip-path: inset(0 50% 0 0); }
.ss-ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
  background: var(--wp--preset--color--primary, #1e90ff); transform: translateX(-50%); z-index: 3; pointer-events: none;
}
.ss-ba__handle::before {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--wp--preset--color--primary, #1e90ff); box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.ss-ba__handle::after {
  content: '⟺'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  color: #fff; font-size: 18px; font-weight: 700;
}
.ss-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; }
.ss-ba__range:focus-visible + .ss-ba__handle::before { outline: 3px solid #fff; outline-offset: 2px; }
.ss-ba__label {
  position: absolute; bottom: 12px; z-index: 3; font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px;
  pointer-events: none; color: #fff;
}
.ss-ba__label--before { left: 12px; background: rgba(190,40,40,.85); }
.ss-ba__label--after { right: 12px; background: rgba(16,185,129,.9); }

/* ── Marquee de clientes ── */
.ss-marquee {
  display: flex; overflow: hidden; gap: 3rem; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ss-marquee__track { display: flex; gap: 3rem; flex-shrink: 0; align-items: center; animation: ss-marquee 28s linear infinite; }
@keyframes ss-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.ss-marquee:hover .ss-marquee__track { animation-play-state: paused; }
.ss-marquee__item {
  display: flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-family: var(--wp--preset--font-family--display, sans-serif); font-size: 1.2rem;
  color: var(--wp--preset--color--contrast-2, #b8b3ac); flex-shrink: 0;
}
.ss-marquee__item svg { width: 20px; height: 20px; color: var(--wp--preset--color--success, #10b981); }

/* ── Monitoreo: tarjeta destacada con precio ── */
.ss-monitor-card {
  background: var(--wp--preset--color--surface, #1a1a1a);
  border: 2px solid var(--wp--preset--color--primary, #1e90ff);
  border-radius: 16px; padding: 2.25rem; position: relative; overflow: hidden;
}
.ss-monitor-card__badge {
  position: absolute; top: 0; right: 0; background: var(--wp--preset--color--primary, #1e90ff);
  color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .4rem 1rem; border-bottom-left-radius: 10px;
}
.ss-monitor-price {
  text-align: center; background: var(--wp--preset--color--base, #0f0f0f);
  border-radius: 12px; padding: 1.5rem 2rem; min-width: 180px;
}
.ss-monitor-price__amount { color: var(--wp--preset--color--primary, #1e90ff); font-size: 2.2rem; font-family: var(--wp--preset--font-family--display); line-height: 1; }

/* ── Accesibilidad ── */
@media (prefers-reduced-motion: reduce) {
  .ss-marquee__track, .wa-float { animation: none; }
}
.skip-link:focus { color: #fff; background: var(--wp--preset--color--primary, #1e90ff); }


/* ==========================================================================
   EFECTOS VISUALES v1.1
   Todo respeta prefers-reduced-motion y deja el contenido visible sin JS.
   ========================================================================== */

/* ── Aparición al hacer scroll (la clase ss-js la agrega un script en <head>) ── */
html.ss-js .ss-reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--ss-delay, 0s); }
html.ss-js .ss-reveal.is-visible, html.ss-force .ss-reveal { opacity: 1; transform: none; }

/* ── Barra de progreso de lectura ── */
.ss-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 400; background: linear-gradient(90deg, #1e90ff, #6cc4ff); box-shadow: 0 0 10px rgba(30,144,255,.7); pointer-events: none; }

/* ── HERO: radar de vigilancia ── */
.ss-hero { position: relative; overflow: hidden; }
.ss-hero > .wp-block-cover__background {
  overflow: hidden;
  background-image:
    radial-gradient(ellipse 60% 55% at 78% 32%, rgba(30,144,255,.18), transparent 70%),
    radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: auto, 46px 46px;
}
.ss-hero > .wp-block-cover__background::before,
.ss-hero > .wp-block-cover__background::after {
  content: ""; position: absolute; right: -14%; top: 50%; width: min(920px, 100vw); aspect-ratio: 1; border-radius: 50%;
  transform: translateY(-50%); pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, #000 0 68%, transparent 71%); mask-image: radial-gradient(circle, #000 0 68%, transparent 71%);
}
.ss-hero > .wp-block-cover__background::before {
  background: conic-gradient(from 0deg, rgba(30,144,255,0) 0deg, rgba(30,144,255,0) 262deg, rgba(30,144,255,.34) 352deg, rgba(120,200,255,.55) 359deg, rgba(30,144,255,0) 360deg);
  animation: ss-sweep 7s linear infinite;
}
.ss-hero > .wp-block-cover__background::after {
  background: repeating-radial-gradient(circle, transparent 0 62px, rgba(30,144,255,.14) 63px 64px);
}
@keyframes ss-sweep { to { transform: translateY(-50%) rotate(360deg); } }
@media (max-width: 781px) { .ss-hero > .wp-block-cover__background::before, .ss-hero > .wp-block-cover__background::after { opacity: .55; right: -45%; } }

/* Palabra clave del título con brillo animado */
.ss-hero h1 mark {
  background: linear-gradient(90deg, #1e90ff, #7fd0ff, #1e90ff) !important; background-size: 220% 100% !important;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: ss-shimmer 5s linear infinite;
}
@keyframes ss-shimmer { to { background-position: -220% 0; } }

/* Punto "en vivo" */
.ss-live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .55rem; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.7); animation: ss-live 1.8s infinite; vertical-align: middle; }
@keyframes ss-live { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.7); } 70% { box-shadow: 0 0 0 10px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }

/* ── Botones: pulso de luz + destello al pasar el mouse ── */
.ss-glow .wp-block-button__link { position: relative; overflow: hidden; animation: ss-glowpulse 2.6s ease-in-out infinite; transition: transform .2s ease; }
.ss-glow .wp-block-button__link::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); }
.ss-glow .wp-block-button__link:hover { transform: translateY(-2px); }
.ss-glow .wp-block-button__link:hover::after { left: 130%; transition: left .7s ease; }
@keyframes ss-glowpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(30,144,255,.55); } 50% { box-shadow: 0 0 0 12px rgba(30,144,255,0); } }

/* ── Tarjetas con elevación y borde luminoso ── */
@property --ss-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.ss-card { position: relative; transition: transform .35s ease, box-shadow .35s ease; }
.ss-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 34px rgba(30,144,255,.14); }
.ss-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: conic-gradient(from var(--ss-angle), transparent 0 62%, #1e90ff 82%, #7fd0ff 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ss-spin 3.5s linear infinite;
}
.ss-card:hover::before { opacity: 1; }
@keyframes ss-spin { to { --ss-angle: 360deg; } }

/* Pilares: número grande decorativo */
.ss-pillars { counter-reset: pillar; }
.ss-pillar { counter-increment: pillar; overflow: hidden; }
.ss-pillar::after { content: "0" counter(pillar); position: absolute; top: .6rem; right: 1.1rem; font-family: var(--wp--preset--font-family--display); font-size: 3.4rem; line-height: 1; color: rgba(30,144,255,.13); pointer-events: none; transition: color .35s ease, transform .35s ease; }
.ss-pillar:hover::after { color: rgba(30,144,255,.32); transform: scale(1.08); }

/* ── Escudo con anillos pulsantes (monitoreo) ── */
.ss-ring { position: relative; }
.ss-ring::before, .ss-ring::after { content: ""; position: absolute; inset: 0; border-radius: 12px; border: 2px solid rgba(30,144,255,.55); animation: ss-ringout 2.6s ease-out infinite; }
.ss-ring::after { animation-delay: 1.3s; }
@keyframes ss-ringout { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }

/* ── Contadores ── */
.ss-count { text-shadow: 0 0 28px rgba(30,144,255,.45); font-variant-numeric: tabular-nums; }
.ss-stats-band { background-image: radial-gradient(ellipse 70% 120% at 50% 0%, rgba(30,144,255,.14), transparent 70%); }

/* ── Vista de cámara CCTV (sección de cámaras) ── */
.ss-cctv { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.14);
  background: radial-gradient(ellipse at 50% 120%, #14304d 0%, #0b1622 55%, #070b11 100%); box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 0 60px rgba(0,0,0,.6); font-family: ui-monospace, Menlo, Consolas, monospace; }
.ss-cctv::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); pointer-events: none; }
.ss-cctv__grid { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(rgba(30,144,255,.22) 1px, transparent 1px) 0 0/100% 26px, linear-gradient(90deg, rgba(30,144,255,.22) 1px, transparent 1px) 0 0/48px 100%; transform: perspective(240px) rotateX(58deg); transform-origin: bottom; opacity: .55; }
.ss-cctv__top, .ss-cctv__bottom { position: absolute; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; font-size: .72rem; letter-spacing: .08em; color: #cfe4fb; z-index: 3; }
.ss-cctv__top { top: 12px; } .ss-cctv__bottom { bottom: 12px; color: #78a9d6; }
.ss-cctv__rec { display: inline-flex; align-items: center; gap: .45rem; color: #ff5a5a; font-weight: 700; }
.ss-cctv__rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; animation: ss-blink 1.1s steps(2, start) infinite; }
@keyframes ss-blink { to { visibility: hidden; } }
.ss-cctv__corners { position: absolute; inset: 34px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(#1e90ff,#1e90ff) top left/22px 2px no-repeat, linear-gradient(#1e90ff,#1e90ff) top left/2px 22px no-repeat,
    linear-gradient(#1e90ff,#1e90ff) top right/22px 2px no-repeat, linear-gradient(#1e90ff,#1e90ff) top right/2px 22px no-repeat,
    linear-gradient(#1e90ff,#1e90ff) bottom left/22px 2px no-repeat, linear-gradient(#1e90ff,#1e90ff) bottom left/2px 22px no-repeat,
    linear-gradient(#1e90ff,#1e90ff) bottom right/22px 2px no-repeat, linear-gradient(#1e90ff,#1e90ff) bottom right/2px 22px no-repeat; }
.ss-cctv__scan { position: absolute; left: 0; right: 0; height: 70px; z-index: 2; background: linear-gradient(180deg, transparent, rgba(30,144,255,.22), transparent); animation: ss-scan 4.5s linear infinite; pointer-events: none; }
@keyframes ss-scan { from { top: -70px; } to { top: 100%; } }
.ss-cctv__box { position: absolute; z-index: 3; width: 22%; height: 38%; border: 2px solid #10b981; border-radius: 4px; box-shadow: 0 0 16px rgba(16,185,129,.45); animation: ss-detect 9s ease-in-out infinite; }
.ss-cctv__box span { position: absolute; top: -1.15rem; left: -2px; font-size: .62rem; background: #10b981; color: #04130d; padding: 1px 6px; font-weight: 700; letter-spacing: .06em; }
@keyframes ss-detect { 0%,100% { left: 12%; top: 40%; } 35% { left: 48%; top: 30%; } 70% { left: 66%; top: 44%; } }

/* ── Red de sucursales (sección mantenedora) ── */
.ss-net { width: 100%; max-width: 470px; margin: 0 auto; display: block; overflow: visible; }
.ss-net-line { stroke: rgba(30,144,255,.55); stroke-width: 1.6; stroke-dasharray: 6 8; animation: ss-dash 2.2s linear infinite; }
@keyframes ss-dash { to { stroke-dashoffset: -56; } }
.ss-net-node { fill: #14202e; stroke: #1e90ff; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ss-node 3.2s ease-in-out infinite; }
@keyframes ss-node { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.ss-net-dot { fill: #7fd0ff; }
.ss-net-hub { fill: #1e90ff; }
.ss-net-ring { fill: none; stroke: #1e90ff; transform-box: fill-box; transform-origin: center; animation: ss-hubring 2.8s ease-out infinite; }
@keyframes ss-hubring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.4); opacity: 0; } }
.ss-net-label { fill: #b8b3ac; font: 600 11px 'Inter Tight', system-ui, sans-serif; letter-spacing: .08em; text-anchor: middle; text-transform: uppercase; }

/* ── Movimiento reducido: sin animaciones ── */
@media (prefers-reduced-motion: reduce) {
  html.ss-js .ss-reveal { opacity: 1; transform: none; transition: none; }
  .ss-hero > .wp-block-cover__background::before, .ss-hero h1 mark, .ss-live::before, .ss-glow .wp-block-button__link,
  .ss-card::before, .ss-ring::before, .ss-ring::after, .ss-cctv__scan, .ss-cctv__box, .ss-cctv__rec::before,
  .ss-net-line, .ss-net-node, .ss-net-ring { animation: none !important; }
  .ss-card, .ss-card:hover { transition: none; transform: none; }
}


/* ==========================================================================
   v2.0 — RUBROS, TRABAJOS, CALCULADOR, VISUALES Y PARALLAX
   ========================================================================== */

/* ── PARALLAX ── */
.ss-parallax { position: relative; overflow: hidden; }
.ss-parallax > *:not(.ss-orb) { position: relative; z-index: 1; }
.ss-px { transform: translate3d(0, var(--ss-py, 0px), 0); will-change: transform; }
.ss-orb { position: absolute; width: 460px; height: 460px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(30,144,255,.17), rgba(30,144,255,0) 68%); filter: blur(2px); }
.ss-orb--2 { width: 340px; height: 340px; background: radial-gradient(circle, rgba(16,185,129,.10), rgba(16,185,129,0) 70%); }
.ss-hero > .wp-block-cover__background { top: -22%; bottom: -22%; will-change: transform; }
.ss-px-img { position: relative; overflow: hidden; display: block; }
.ss-px-img img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--ss-iy, 0px), 0) scale(1.18); transition: filter .4s ease; will-change: transform; }
.ss-card:hover .ss-px-img img { filter: brightness(1.12) saturate(1.1); }

/* ── Migas de pan ── */
.ss-crumb { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .8rem; color: #78746e; margin-bottom: 1rem; }
.ss-crumb a { color: #b8b3ac; text-decoration: none; } .ss-crumb a:hover { color: #1e90ff; }

/* ── Encabezado de las páginas de rubro ── */
.ss-page-hero { position: relative; overflow: hidden; border-bottom: 1px solid #1d1d1d; }
.ss-page-hero::before { content: ""; position: absolute; right: -10%; top: -40%; width: 620px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(30,144,255,.20), transparent 65%); animation: ss-float 9s ease-in-out infinite; pointer-events: none; }
@keyframes ss-float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-30px,24px,0); } }
.ss-page-hero > * { position: relative; z-index: 1; }

/* ── Grilla de los 11 rubros ── */
.ss-rubros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ss-rubro { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.6rem 1.5rem; border-radius: 14px; border: 1px solid #262626;
  background: #1a1a1a; text-decoration: none; color: inherit; overflow: hidden; }
.ss-rubro--main { grid-column: span 3; flex-direction: column; padding: 2.2rem 2rem; border: 2px solid #1e90ff;
  background: linear-gradient(135deg, #12263b 0%, #1a1a1a 60%); }
.ss-rubro__n { position: absolute; top: .7rem; right: 1.1rem; font-family: var(--wp--preset--font-family--display); font-size: 2.6rem; line-height: 1; color: rgba(30,144,255,.14); transition: color .35s ease, transform .35s ease; }
.ss-rubro:hover .ss-rubro__n { color: rgba(30,144,255,.34); transform: scale(1.1); }
.ss-rubro__ico { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 12px; color: #1e90ff; background: rgba(30,144,255,.13); transition: transform .35s ease, background .35s ease; }
.ss-rubro:hover .ss-rubro__ico { transform: rotate(-6deg) scale(1.1); background: rgba(30,144,255,.24); }
.ss-rubro__tag { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #10b981; }
.ss-rubro__name { font-family: var(--wp--preset--font-family--display); color: #fff; font-size: 1.15rem; line-height: 1.15; font-weight: 400; }
.ss-rubro--main .ss-rubro__name { font-size: 1.9rem; }
.ss-rubro__txt { color: #b8b3ac; font-size: .9rem; line-height: 1.55; max-width: 70ch; }
.ss-rubro__more { margin-top: auto; padding-top: .5rem; color: #1e90ff; font-weight: 700; font-size: .85rem; }
@media (max-width: 900px) { .ss-rubros { grid-template-columns: repeat(2, 1fr); } .ss-rubro--main { grid-column: span 2; } }
@media (max-width: 600px) { .ss-rubros { grid-template-columns: 1fr; } .ss-rubro--main { grid-column: span 1; } }

/* ── Otros servicios (lista compacta con enlaces internos) ── */
.ss-otros { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; }
.ss-otros__item { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 10px; border: 1px solid #262626; background: #1a1a1a; color: #e8e4de; text-decoration: none; font-size: .92rem; font-weight: 600; transition: border-color .25s ease, transform .25s ease, background .25s ease; }
.ss-otros__item:hover { border-color: #1e90ff; transform: translateX(4px); background: #15202e; color: #fff; }
.ss-otros__ico { display: inline-flex; color: #1e90ff; }

/* ── Trabajos realizados (entradas con fotos) ── */
.ss-works { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.4rem; }
.ss-work-card { border-radius: 14px; border: 1px solid #262626; background: #1a1a1a; overflow: hidden; }
.ss-work-media { aspect-ratio: 4/3; background: linear-gradient(135deg, #14304d, #0b1622); }
.ss-work-body { padding: 1.2rem 1.3rem 1.4rem; }
.ss-work-cat { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #1e90ff; }
.ss-work-body h3 { font-size: 1.1rem; margin: .35rem 0 .5rem; font-family: var(--wp--preset--font-family--display); font-weight: 400; line-height: 1.2; }
.ss-work-body h3 a { color: #fff; text-decoration: none; } .ss-work-body h3 a:hover { color: #1e90ff; }
.ss-work-body p { font-size: .88rem; color: #9a958e; margin: 0; }
.ss-works-title { margin: 0 0 1.5rem; }
.ss-works-more { margin-top: 1.5rem; } .ss-works-more a { font-weight: 700; }
.ss-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.ss-filter__chip { padding: .45rem .95rem; border-radius: 100px; border: 1px solid #333; color: #b8b3ac; font-size: .82rem; font-weight: 600; text-decoration: none; transition: all .25s ease; }
.ss-filter__chip:hover, .ss-filter__chip.is-active { border-color: #1e90ff; color: #fff; background: rgba(30,144,255,.16); }
.ss-work-card .wp-block-post-featured-image { margin: 0; aspect-ratio: 4/3; }
.ss-work-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }

/* ── Visual de aire acondicionado ── */
.ss-ac { position: relative; width: 100%; max-width: 480px; margin: 0 auto; aspect-ratio: 1/.9; }
.ss-ac svg { width: 100%; height: 100%; overflow: visible; }
.ss-ac-wind { fill: none; stroke: #7fd0ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 40 90; animation: ss-wind 2.6s linear infinite; opacity: .85; }
.ss-ac-wind:nth-of-type(2) { animation-delay: .5s; } .ss-ac-wind:nth-of-type(3) { animation-delay: 1s; } .ss-ac-wind:nth-of-type(4) { animation-delay: 1.5s; }
@keyframes ss-wind { from { stroke-dashoffset: 130; } to { stroke-dashoffset: -130; } }
.ss-ac-flake { fill: none; stroke: #bfe6ff; stroke-width: 2; stroke-linecap: round; animation: ss-fall 5s linear infinite; opacity: 0; }
@keyframes ss-fall { 0% { transform: translateY(-10px) rotate(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(130px) rotate(180deg); opacity: 0; } }
.ss-ac-led { fill: #10b981; animation: ss-blink2 1.6s ease-in-out infinite; }
@keyframes ss-blink2 { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ── Visual solar ── */
.ss-sun { position: relative; width: 100%; max-width: 480px; margin: 0 auto; aspect-ratio: 1/.9; }
.ss-sun svg { width: 100%; height: 100%; overflow: visible; }
.ss-sun-rays { transform-origin: 90px 80px; animation: ss-rot 40s linear infinite; }
@keyframes ss-rot { to { transform: rotate(360deg); } }
.ss-sun-core { fill: #f5a623; filter: drop-shadow(0 0 22px rgba(245,166,35,.8)); animation: ss-pulse2 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ss-pulse2 { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.ss-panel-cell { fill: #0f3b6b; stroke: #1e90ff; stroke-width: 1.5; }
.ss-panel-sheen { fill: url(#ssSheen); animation: ss-sheen 4s ease-in-out infinite; }
@keyframes ss-sheen { 0% { transform: translateX(-140px); } 60%,100% { transform: translateX(260px); } }
.ss-flow { fill: none; stroke: #10b981; stroke-width: 3; stroke-dasharray: 8 12; stroke-linecap: round; animation: ss-dash 1.6s linear infinite; }

/* ── Empresas ── */
.ss-clients-lead strong { color: #fff; }

/* ── CALCULADOR DE KIT SOLAR ── */
.ssc { color: #b8b3ac; }
.ssc * { box-sizing: border-box; }
.ssc-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.75rem; align-items: start; }
@media (max-width: 960px) { .ssc-grid { grid-template-columns: 1fr; } }
.ssc-step { border: 1px solid #262626; background: #161616; border-radius: 14px; padding: 1.25rem 1.3rem 1.4rem; margin: 0 0 1rem; min-width: 0; }
.ssc-step legend { display: flex; align-items: center; gap: .6rem; padding: 0 .4rem; color: #fff; font-weight: 700; font-size: 1rem; }
.ssc-step legend span { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: #1e90ff; color: #fff; font-size: .8rem; }
.ssc-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
@media (max-width: 700px) { .ssc-opts { grid-template-columns: 1fr; } }
.ssc-opt { display: block; position: relative; padding: .9rem 1rem; border-radius: 12px; border: 1px solid #2c2c2c; background: #1b1b1b; cursor: pointer; transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.ssc-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ssc-opt b { display: block; color: #fff; font-size: 1rem; margin-bottom: .2rem; }
.ssc-opt small { display: block; font-size: .78rem; line-height: 1.45; color: #9a958e; }
.ssc-opt:hover { transform: translateY(-2px); border-color: #3a6fa5; }
.ssc-opt.is-on { border-color: #1e90ff; background: #12263b; box-shadow: 0 0 0 1px #1e90ff, 0 8px 24px rgba(30,144,255,.18); }
.ssc-opt:focus-within { outline: 2px solid #7fd0ff; outline-offset: 2px; }
.ssc-lbl { display: block; font-size: .82rem; font-weight: 600; color: #cfcac2; margin: .6rem 0 .3rem; }
.ssc select, .ssc input[type=number] { width: 100%; padding: .65rem .8rem; border-radius: 9px; border: 1px solid #333; background: #0f0f0f; color: #fff; font: inherit; font-size: .95rem; }
.ssc select:focus, .ssc input:focus { outline: 2px solid #1e90ff; outline-offset: 1px; }
.ssc input[type=range] { width: 100%; accent-color: #1e90ff; }
.ssc-hint { font-size: .78rem; color: #78746e; margin: .5rem 0 0; }
.ssc-tabs { display: flex; gap: .5rem; margin-bottom: .8rem; flex-wrap: wrap; }
.ssc-tab { cursor: pointer; } .ssc-tab input { position: absolute; opacity: 0; }
.ssc-tab span { display: inline-block; padding: .5rem 1rem; border-radius: 100px; border: 1px solid #333; font-size: .85rem; font-weight: 600; color: #b8b3ac; transition: all .25s ease; }
.ssc-tab input:checked + span { border-color: #1e90ff; color: #fff; background: rgba(30,144,255,.18); }
.ssc-tab input:focus-visible + span { outline: 2px solid #7fd0ff; outline-offset: 2px; }
.ssc-tablewrap { overflow-x: auto; max-height: 420px; overflow-y: auto; border: 1px solid #262626; border-radius: 10px; }
.ssc-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ssc-table th { position: sticky; top: 0; background: #1d1d1d; text-align: left; padding: .55rem .6rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #78746e; }
.ssc-table td { padding: .35rem .5rem; border-top: 1px solid #222; }
.ssc-table td:first-child { color: #e8e4de; min-width: 180px; }
.ssc-table input[type=number] { padding: .4rem .5rem; min-width: 70px; font-size: .88rem; }
.ssc-adv { border: 1px solid #262626; border-radius: 14px; background: #161616; padding: .9rem 1.3rem; }
.ssc-adv summary { cursor: pointer; font-weight: 700; color: #fff; }
.ssc-advgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem 1rem; margin-top: .6rem; }
@media (max-width: 600px) { .ssc-advgrid { grid-template-columns: 1fr; } }
[hidden] { display: none !important; }

.ssc-result { position: sticky; top: 90px; border-radius: 16px; border: 2px solid #1e90ff; background: linear-gradient(160deg, #12263b, #121212 70%); padding: 1.5rem; box-shadow: 0 20px 60px rgba(30,144,255,.14); }
@media (max-width: 960px) { .ssc-result { position: static; } }
.ssc-kicker { margin: 0 0 1rem; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #1e90ff; }
.ssc-empty { color: #b8b3ac; margin: 0; }
.ssc-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: .8rem; }
@media (max-width: 520px) { .ssc-kpis { grid-template-columns: 1fr; } }
.ssc-kpi { background: rgba(0,0,0,.35); border: 1px solid #2a3a4d; border-radius: 12px; padding: .9rem 1rem; display: block; }
.ssc-kpi small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #78a9d6; font-weight: 700; }
.ssc-kpi b { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1.7rem; color: #fff; line-height: 1.15; margin: .2rem 0; animation: ssc-pop .4s ease; }
.ssc-kpi span, .ssc-kpi em { display: block; font-size: .8rem; color: #b8b3ac; font-style: normal; }
.ssc-kpi em { color: #7fd0ff; margin-top: .2rem; }
.ssc-kpi--wide { margin-bottom: .8rem; }
@keyframes ssc-pop { from { transform: scale(.94); opacity: .5; } to { transform: scale(1); opacity: 1; } }
.ssc-bars { margin: 1rem 0; }
.ssc-bar { display: grid; grid-template-columns: 120px 1fr auto; gap: .6rem; align-items: center; margin-bottom: .55rem; font-size: .8rem; }
.ssc-track { height: 12px; background: #1f1f1f; border-radius: 8px; overflow: hidden; }
.ssc-fill { display: block; height: 100%; border-radius: 8px; transition: width .7s cubic-bezier(.2,.7,.2,1); }
.ssc-fill--c { background: linear-gradient(90deg, #8a8378, #b8b3ac); } .ssc-fill--p { background: linear-gradient(90deg, #1e90ff, #7fd0ff); }
.ssc-bar b { color: #fff; font-variant-numeric: tabular-nums; }
.ssc-cover { margin: .4rem 0 0; color: #10b981; font-weight: 700; font-size: .9rem; }
.ssc-facts, .ssc-warn { margin: .8rem 0; padding-left: 1.1rem; font-size: .85rem; line-height: 1.7; }
.ssc-facts b { color: #fff; } .ssc-warn { color: #f5c26b; }
.ssc-cta { display: block; text-align: center; margin-top: 1rem; padding: .95rem 1.2rem; border-radius: 10px; background: #25d366; color: #fff !important; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.ssc-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,.35); }
.ssc-disc { margin: .9rem 0 0; font-size: .74rem; color: #78746e; line-height: 1.55; }

/* ── Reducir movimiento (v2) ── */
@media (prefers-reduced-motion: reduce) {
  .ss-px, .ss-px-img img, .ss-hero > .wp-block-cover__background { transform: none !important; }
  .ss-page-hero::before, .ss-ac-wind, .ss-ac-flake, .ss-ac-led, .ss-sun-rays, .ss-sun-core, .ss-panel-sheen, .ss-flow, .ssc-kpi b { animation: none !important; }
  .ss-px-img img { transform: scale(1.05) !important; }
}

/* ── Banda de trabajos en la portada ── */
.ss-band { background: #0a0a0a; padding: 5rem 1.25rem; border-top: 1px solid #1d1d1d; }
.ss-band-in { max-width: 1200px; margin: 0 auto; }
.ss-eyebrow { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1e90ff; }
.ss-works-intro { color: #b8b3ac; margin: 0 0 1.75rem; }

/* ── Contenido de las páginas de rubro ── */
.ss-autoreveal h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 2.6rem 0 1rem; padding-left: 1rem; border-left: 4px solid #1e90ff; }
.ss-autoreveal h2:first-child { margin-top: 0; }
.ss-autoreveal h3 { font-size: 1.15rem; margin: 1.6rem 0 .4rem; color: #fff; }
.ss-autoreveal p, .ss-autoreveal li { line-height: 1.7; }
.ss-autoreveal ul, .ss-autoreveal ol { padding-left: 1.3rem; }
.ss-autoreveal ul li::marker { color: #1e90ff; }
.ss-autoreveal ol li::marker { color: #1e90ff; font-weight: 700; }
.ss-autoreveal li { margin-bottom: .45rem; }
.ss-autoreveal strong { color: #fff; }
.ss-autoreveal .wp-block-buttons { margin: 1.4rem 0 .4rem; }
.ss-autoreveal .wp-block-button__link { background: #1e90ff; color: #fff; border-radius: 6px; font-weight: 700; padding: .85rem 1.6rem; transition: transform .2s ease, box-shadow .2s ease; }
.ss-autoreveal .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(30,144,255,.35); }