/* SolarStorm — Pie de página v2.2 (manual de marca v1, 07-10-2026)
   Fondo claro (el logo no va sobre fondo oscuro sin variante negativa) y
   franja final grafito, sin logo. Colores: SOLO tokens de ss-marca.css.
   El mapa es una fachada: Google no se descarga hasta el clic (ss-pie.js).
   Editar aquí, NO en Elementor. */

/* ─────────────────────────────────────────────────────────────
   1. RESET ACOTADO
   ───────────────────────────────────────────────────────────── */
.ss-pie :where(p,ul,li){ margin:0; padding:0; }
.ss-pie ul{ list-style:none; }
.ss-pie a{ text-decoration:none; }
.ss-pie :where(img,svg,iframe){ display:block; max-width:100%; }
.ss-pie :where(button){ font:inherit; cursor:pointer; }
.ss-pie{
  --ssp-pad-x:clamp(18px, 3vw, 32px);
  --ssp-version:"2.2";
  box-sizing:border-box;
  background:var(--ss-neutro, #F3F6F4);
  color:var(--ss-texto-2, #4A5553);
  font-size:15px; line-height:1.55;
  border-top:1px solid var(--ss-linea, #DCE3E0);
}
.ss-pie *, .ss-pie *::before, .ss-pie *::after{ box-sizing:inherit; }
.ssp-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ssp-solo-lectores{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.ssp-ico{ width:18px; height:18px; flex:0 0 18px; }

.ss-pie a{ color:var(--ss-texto-2, #4A5553); transition:color .15s ease, background-size .2s ease; }
.ss-pie a:focus-visible,
.ss-pie button:focus-visible{ outline:3px solid var(--ss-verde-texto, #416500); outline-offset:3px; border-radius:var(--ss-radio, 6px); }

/* ─────────────────────────────────────────────────────────────
   2. FRANJA "VISÍTANOS O ESCRÍBENOS" (contacto + mapa)
   ───────────────────────────────────────────────────────────── */
.ssp-visita{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); gap:32px;
  max-width:var(--ss-contenedor, 1240px); margin:0 auto;
  padding:clamp(40px, 5vw, 56px) var(--ssp-pad-x) 0;
}
.ssp-visita__titulo{
  margin-bottom:14px; color:var(--ss-grafito, #182322);
  font-size:22px; font-weight:700; line-height:1.25;
}
.ssp-contacto__lista a,
.ssp-contacto__lista li > span{ display:inline-flex; align-items:center; gap:10px; padding:6px 0; }
.ss-pie .ssp-contacto__lista a:hover{ color:var(--ss-grafito, #182322); }
.ssp-visita .ssp-ico{ color:var(--ss-verde-texto, #416500); }
.ssp-servicio{
  display:grid; gap:8px; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--ss-linea, #DCE3E0); font-size:14px;
}
.ssp-servicio li{ display:flex; align-items:flex-start; gap:10px; }
.ssp-servicio .ssp-ico{ margin-top:2px; }

/* Botones: verde del hero con texto blanco (5,43:1) · secundario con borde */
.ssp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; margin-top:20px; padding:10px 18px;
  border:0; border-radius:var(--ss-radio, 6px);
  font-weight:600; font-size:15px; line-height:1.2;
  transition:background-color .15s ease, color .15s ease, transform .15s ease;
}
.ss-pie a.ssp-btn,
.ss-pie button.ssp-btn{ background:var(--ss-verde-boton, #117A38); color:var(--ss-blanco, #FFFFFF); }
.ss-pie a.ssp-btn:hover,
.ss-pie button.ssp-btn:hover{ background:var(--ss-verde-boton-hover, #0E6630); color:var(--ss-blanco, #FFFFFF); }
.ss-pie .ssp-visita a.ssp-btn .ssp-ico{ color:currentColor; }
.ss-pie .ssp-btn:active{ transform:scale(.98); }
.ss-pie button.ssp-btn--secundario{
  margin-top:0; background:var(--ss-blanco, #FFFFFF); color:var(--ss-grafito, #182322);
  box-shadow:inset 0 0 0 1.5px var(--ss-grafito, #182322);
}
.ss-pie button.ssp-btn--secundario:hover{ background:var(--ss-grafito, #182322); color:var(--ss-blanco, #FFFFFF); }

/* Mapa: tarjeta con fachada liviana (sin peticiones a Google hasta el clic).
   El alto es fijo para que al cargar el iframe no cambie nada (CLS 0). */
.ssp-mapa{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  min-height:300px; border:1px solid var(--ss-linea, #DCE3E0); border-radius:10px;
  background:var(--ss-blanco, #FFFFFF);
}
.ssp-mapa__fachada{
  position:relative; flex:1 1 auto; min-height:200px;
  /* Calles dibujadas con gradientes: es una ilustración, no un mapa real */
  background-color:var(--ss-neutro, #F3F6F4);
  background-image:
    linear-gradient(115deg, transparent 47%, var(--ss-blanco, #FFFFFF) 47.5%, var(--ss-blanco, #FFFFFF) 50.5%, transparent 51%),
    linear-gradient(25deg, transparent 58%, var(--ss-blanco, #FFFFFF) 58.5%, var(--ss-blanco, #FFFFFF) 60.5%, transparent 61%),
    linear-gradient(0deg, var(--ss-linea, #DCE3E0) 1px, transparent 1px),
    linear-gradient(90deg, var(--ss-linea, #DCE3E0) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 28px 28px, 28px 28px;
}
.ssp-mapa__pin{
  position:absolute; left:50%; top:46%;
  display:grid; place-items:center; width:48px; height:48px; border-radius:50% 50% 50% 0;
  transform:translate(-50%, -50%) rotate(-45deg);
  background:var(--ss-verde-boton, #117A38);
  box-shadow:0 6px 16px rgba(24,35,34,.25);
}
.ssp-mapa__pin .ssp-ico{ transform:rotate(45deg); color:var(--ss-blanco, #FFFFFF); width:22px; height:22px; }
.ssp-mapa__pie{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px;
  padding:14px 16px; border-top:1px solid var(--ss-linea, #DCE3E0);
}
.ssp-mapa__dir strong{ display:block; color:var(--ss-grafito, #182322); font-weight:600; }
.ssp-mapa__acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.ss-pie .ssp-mapa__ir{ display:inline-block; padding:8px 0; color:var(--ss-verde-texto, #416500); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.ssp-mapa iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.ssp-mapa.is-cargado .ssp-mapa__fachada,
.ssp-mapa.is-cargado .ssp-mapa__pie{ visibility:hidden; }

/* ─────────────────────────────────────────────────────────────
   3. REJILLA DE ENLACES
   ───────────────────────────────────────────────────────────── */
.ssp-grid{
  display:grid;
  grid-template-columns:minmax(220px, 1.3fr) repeat(3, minmax(0, 1fr));
  gap:40px 32px;
  max-width:var(--ss-contenedor, 1240px); margin-inline:auto;
  padding:clamp(40px, 5vw, 56px) var(--ssp-pad-x);
}

.ssp-marca__logo{ display:inline-flex; align-items:center; gap:10px; }
.ssp-marca__logo img{ width:44px; height:44px; }
.ssp-marca__nombre{ font-size:22px; font-weight:700; letter-spacing:.005em; }
.ss-pie .ss-nombre__solar{ color:var(--ss-marca-azul, #227998); }
.ss-pie .ss-nombre__storm{ color:var(--ss-marca-verde, #2C8125); }
.ssp-marca__desc{ margin-top:14px; max-width:38ch; }

.ssp-redes{ display:flex; gap:10px; margin-top:20px; }
.ssp-redes a{
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid var(--ss-borde, #6B7775); border-radius:50%;
  color:var(--ss-grafito, #182322); background:var(--ss-blanco, #FFFFFF);
  transition:transform .15s ease, background-color .15s ease, color .15s ease;
}
.ss-pie .ssp-redes a:hover{ transform:translateY(-2px); background:var(--ss-grafito, #182322); color:var(--ss-blanco, #FFFFFF); }

.ssp-col__titulo{
  margin-bottom:14px; color:var(--ss-grafito, #182322);
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.ssp-col__lista a{
  display:inline-block; padding:5px 0;
  background:linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
}
.ss-pie .ssp-col__lista a:hover{ color:var(--ss-grafito, #182322); background-size:100% 1px; }

/* ─────────────────────────────────────────────────────────────
   4. FRANJA FINAL (grafito, sin logo)
   ───────────────────────────────────────────────────────────── */
.ssp-base{ background:var(--ss-grafito, #182322); color:var(--ss-texto-oscuro, #C9D1CF); font-size:13.5px; }
.ssp-base__in{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 24px;
  max-width:var(--ss-contenedor, 1240px); margin-inline:auto; padding:16px var(--ssp-pad-x);
}
.ss-pie .ssp-base a{ display:inline-block; padding:6px 0; color:var(--ss-texto-oscuro, #C9D1CF); text-decoration:underline; text-underline-offset:3px; }
.ss-pie .ssp-base a:hover{ color:var(--ss-blanco, #FFFFFF); }

/* ─────────────────────────────────────────────────────────────
   5. RESPONSIVO
   ───────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .ssp-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .ssp-marca{ grid-column:1 / -1; }
}
@media (max-width:860px){
  .ssp-visita{ grid-template-columns:1fr; }
}
/* Móvil: todo centrado, con el mismo margen a ambos lados (cliente, 07-10) */
@media (max-width:640px){
  .ss-pie{ text-align:center; }
  .ssp-visita__info,
  .ssp-marca{ display:flex; flex-direction:column; align-items:center; }
  .ssp-contacto__lista,
  .ssp-servicio{ display:flex; flex-direction:column; align-items:center; }
  .ssp-servicio li{ flex-direction:column; align-items:center; gap:4px; text-align:center; }
  .ssp-marca__desc{ margin-inline:auto; }
  .ssp-redes{ justify-content:center; }
  .ssp-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px 16px; }
  .ssp-mapa__pie{ flex-direction:column; text-align:center; }
  .ssp-mapa__acciones{ justify-content:center; }
  .ssp-base__in{ flex-direction:column; align-items:center; text-align:center; }
}
@media (max-width:359px){
  .ssp-grid{ grid-template-columns:1fr; }
}

/* ─────────────────────────────────────────────────────────────
   6. ACCESIBILIDAD
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .ss-pie *, .ss-pie *::before, .ss-pie *::after{ transition:none !important; }
}
@media (forced-colors:active){
  .ssp-redes a, .ssp-btn{ border:1px solid ButtonText; }
}

/* ─────────────────────────────────────────────────────────────
   CONTRASTES MEDIDOS (WCAG 2.1 · 4,5:1 texto · 3:1 interfaz), 07-10-2026

   Enlaces     #4A5553 sobre #F3F6F4 .......... 7,11:1  ✔
   Títulos     #182322 sobre #F3F6F4 ......... 14,82:1  ✔
   "Solar"     #227998 sobre #F3F6F4 .......... 4,53:1  ✔
   "storm"     #2C8125 sobre #F3F6F4 .......... 4,52:1  ✔
   Íconos      #416500 sobre #F3F6F4 .......... 6,25:1  ✔
   Botón       #FFFFFF sobre #117A38 .......... 5,43:1  ✔
   Botón hover #FFFFFF sobre #0E6630 .......... 7,09:1  ✔
   Ver mapa    #182322 sobre #FFFFFF ......... 16,12:1  ✔
   Abrir Maps  #416500 sobre #FFFFFF .......... 6,80:1  ✔
   Borde redes #6B7775 sobre #F3F6F4 .......... 4,27:1  ✔ (interfaz)
   Base        #C9D1CF sobre #182322 ......... 10,37:1  ✔
   ───────────────────────────────────────────────────────────── */