/* Solsureste Solar — base styles, ported 1:1 from the Claude Design prototype
   (project/Solsureste Solar.dc.html). Section-specific layout stays inline in
   index.html (matches the source); this file holds resets, keyframes and the
   :hover/:focus states that the prototype expressed via non-standard
   style-hover / style-focus / style-before attributes. */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#0a0a0c;font-family:'Space Grotesk',system-ui,sans-serif}
::selection{background:rgba(255,180,61,.28);color:#fff}
a{text-decoration:none}
input::placeholder,textarea::placeholder{color:rgba(244,243,240,.34)}

@keyframes sssFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(6deg)}}
@keyframes sssSpin{to{transform:rotate(360deg)}}
@keyframes sssParticle{0%{opacity:0;transform:translateY(0) scale(.4)}14%{opacity:1}50%{opacity:.9}100%{opacity:0;transform:translateY(-130px) scale(.5)}}
@keyframes sssAurora{0%{transform:translate(-8%,-4%) rotate(0deg) scale(1.05)}50%{transform:translate(6%,5%) rotate(180deg) scale(1.3)}100%{transform:translate(-8%,-4%) rotate(360deg) scale(1.05)}}
@keyframes sssGrid{to{background-position:0 64px,64px 0}}
@keyframes sssShimmer{to{background-position:200% center}}
@keyframes sssPulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes sssPing{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.6);opacity:0}}
@keyframes sssTyping{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
@keyframes sssMarquee{to{transform:translateX(-50%)}}
@keyframes sssDash{to{stroke-dashoffset:-32}}
@keyframes sssSheen{0%{transform:translateX(-140%) skewX(-18deg)}60%,100%{transform:translateX(160%) skewX(-18deg)}}
@keyframes sssRise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes sssBokeh{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-40px) scale(1.15)}66%{transform:translate(-25px,25px) scale(.9)}}
@keyframes sssBloom{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes sssCardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@property --sssA{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes sssRotBorder{to{--sssA:360deg}}

.sss-halo{position:relative;isolation:isolate}
.sss-halo::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.6px;background:conic-gradient(from var(--sssA),transparent 0deg,rgba(255,200,110,.95) 55deg,rgba(255,244,214,.85) 90deg,rgba(255,150,50,.35) 150deg,transparent 230deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:sssRotBorder 6s linear infinite;pointer-events:none;z-index:6;filter:drop-shadow(0 0 6px rgba(255,180,61,.5))}
.sss-shimmer{background:linear-gradient(100deg,#f4f3f0 20%,#FFC766 45%,#FFB43D 55%,#f4f3f0 80%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sssShimmer 5.5s linear infinite}
.sss-plasma{background:linear-gradient(92deg,#FF5A1F 0%,#FF8A3D 20%,#FFC766 42%,#FFF4D6 52%,#FFC766 62%,#FF8A3D 80%,#FF5A1F 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 2px 16px rgba(255,150,40,.5));animation:sssPlasma 4.2s ease-in-out infinite}
@keyframes sssPlasma{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.js-ready [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.js-ready [data-reveal="left"]{transform:translateX(-30px)}
.js-ready [data-reveal="scale"]{transform:scale(.88)}
.js-ready [data-reveal].in{opacity:1;transform:none}

#sss-chat-msgs::-webkit-scrollbar{width:6px}
#sss-chat-msgs::-webkit-scrollbar-thumb{background:rgba(255,180,61,.3);border-radius:3px}

/* ---------- interactive states (were style-hover / style-focus / style-before) ---------- */
.sss-navlink:hover{color:#f4f3f0}
.sss-footlink:hover{color:#FFB43D}
.sss-nav-cta:hover{box-shadow:0 10px 30px rgba(255,180,61,.5)}
.sss-field:focus{border-color:#FFB43D;box-shadow:0 0 0 3px rgba(255,180,61,.16)}
.sss-chatfield:focus{border-color:#FFB43D;box-shadow:0 0 0 3px rgba(255,180,61,.14)}
.sss-iconbtn:hover{color:#FFB43D}
.sss-sendbtn:hover{transform:scale(1.08)}
.sss-btn:hover{box-shadow:0 16px 44px rgba(255,180,61,.65),0 0 64px rgba(255,180,61,.32)}
.sss-submit{position:relative;overflow:hidden}
.sss-submit::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.5) 50%,transparent 64%);animation:sssSheen 4s ease-in-out infinite}
.sss-submit:hover{box-shadow:0 16px 44px rgba(255,180,61,.65),0 0 70px rgba(255,180,61,.35)}

.sss-langbtn-on{background:#FFB43D;color:#1a1205;border:none;cursor:pointer;padding:4px 9px;border-radius:7px;font-size:12px;font-weight:700;font-family:inherit}
.sss-langbtn-off{background:none;color:rgba(244,243,240,.6);border:none;cursor:pointer;padding:4px 9px;border-radius:7px;font-size:12px;font-weight:700;font-family:inherit}

/* ---------- accesibilidad: skip-link (oculto hasta recibir foco) ---------- */
.sss-skip-link{position:absolute;left:-9999px;top:0;z-index:10000;padding:12px 20px;background:#FFB43D;color:#1a1205;font-weight:600;border-radius:0 0 8px 0;text-decoration:none}
.sss-skip-link:focus{left:0}

/* ---------- teléfono en el header (visible siempre, no solo desktop) ---------- */
.sss-header-tel{display:flex;align-items:center;gap:7px;color:#FFB43D;font-size:14px;font-weight:600;white-space:nowrap;flex-shrink:0;transition:color .2s}
.sss-header-tel:hover{color:#FFC766}

/* ---------- CTA de texto inline (llamar / WhatsApp) tras bloques de valor ---------- */
.sss-inline-cta{margin-top:16px;font-size:14px;color:rgba(244,243,240,.55)}
.sss-inline-cta a{color:#FFB43D;font-weight:600}
.sss-inline-cta a:hover{color:#FFC766}

/* ---------- barra sticky de llamada/WhatsApp en móvil (oculta en desktop) ---------- */
.sss-sticky-cta{display:none}
.sss-sticky-cta a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:52px;font-size:14.5px;font-weight:600}
.sss-sticky-call{background:linear-gradient(135deg,#FFB43D,#F5921E);color:#1a1205}
.sss-sticky-wa{background:#25D366;color:#fff}

/* ---------- H2 de sección (patrón repetido, extraído de inline styles) ---------- */
.sss-h2{margin:14px 0 0;font-size:clamp(28px,5vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.1}

/* ---------- tarjetas de sección (patrón repetido 14x, extraído de inline styles) ---------- */
.sss-card{border-radius:20px;border:1px solid rgba(255,255,255,.07);background:#141417;padding:26px}
.sss-card-hover{transition:transform .4s,border-color .4s,box-shadow .4s}
.sss-card-row{display:flex;align-items:flex-start;gap:15px}

/* ---------- padding de sección (patrón repetido, extraído de inline styles) ---------- */
.sss-section{padding:clamp(48px,8vw,96px) 24px}
.sss-section-a{background:rgba(9,9,12,.36)}
.sss-section-b{background:rgba(13,13,16,.4)}
.sss-section-border{border-top:1px solid rgba(255,255,255,.06)}

/* ---------- botón flotante de WhatsApp ---------- */
.sss-wa-float{position:fixed;right:24px;bottom:24px;z-index:500;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .2s,box-shadow .2s}
.sss-wa-float:hover{transform:scale(1.08);box-shadow:0 10px 30px rgba(0,0,0,.45)}

/* ---------- banner de cookies: mismo peso visual en Aceptar y Rechazar ---------- */
.sss-cookie-btn{height:38px;padding:0 18px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#f4f3f0;font-weight:600;font-family:inherit;font-size:14px;cursor:pointer;transition:background .2s,border-color .2s}
.sss-cookie-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}

/* ---------- image placeholders (no real photos supplied yet) ---------- */
.sss-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.16);color:rgba(244,243,240,.32);font-size:12.5px;line-height:1.4;padding:16px}
.sss-placeholder svg{opacity:.55;flex-shrink:0}

/* ---------- hero variant switch (cinematic default; flip via data-hero-variant="aurora" on #inicio) ---------- */
.sss-hero-bg-aurora{display:none}
[data-hero-variant="aurora"] .sss-hero-bg-cinematic{display:none}
[data-hero-variant="aurora"] .sss-hero-bg-aurora{display:block}

@media (prefers-reduced-motion:reduce){
  .js-ready [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001s!important;animation-iteration-count:1!important}
}
@media (max-width:860px){
  .sss-hidemob{display:none!important}
  .sss-herogrid{grid-template-columns:1fr!important}
  .sss-2col{grid-template-columns:1fr!important}
  .sss-3col{grid-template-columns:1fr!important}
  .sss-formgrid{grid-template-columns:1fr!important}
  .sss-statgrid{grid-template-columns:repeat(2,1fr)!important}
  .sss-h1{font-size:42px!important}
  body{padding-bottom:52px}
  .sss-sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:600}
  .sss-wa-float{display:none!important}
}
/* breakpoint intermedio: por debajo de ~370px, "+15 MW" no cabe en una columna de
   .sss-statgrid a 2 columnas y el número se parte en dos líneas (verificado con
   pruebas reales de viewport) — pasa a 1 columna solo en pantallas muy estrechas */
@media (max-width:400px){
  .sss-statgrid{grid-template-columns:1fr!important}
}