/* ══════════════════════════════════════════════
   GRUPO GSM — ESTILOS COMPARTIDOS
   Importado en todas las páginas del sitio.
   Para estilos específicos de una sección,
   usa el <style> en esa página.
══════════════════════════════════════════════ */

/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #0a0a0a;
  color: #f0f0f0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* ─── VARIABLES GLOBALES ─── */
:root {
  --orange:  #F5A623;
  --green:   #5BA85A;
  --blue:    #2AACE2;
  --muted:   #888888;
  --line:    #1a1a1a;
  --line2:   #272727;
  --surface: #111111;
}

/* ─── LOGOTIPO ─── */
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.logo-mark {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; color: #0a0a0a;
  letter-spacing: -1px; flex-shrink: 0;
}
.logo-text {
  display: flex; flex-direction: column; line-height: 1.1;
}
.logo-text strong { font-size: 15px; font-weight: 800; letter-spacing: -.3px; }
.logo-text span   { font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }

/* ─── FOOTER ─── */
footer {
  padding: 80px 52px 40px;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.3fr;
  gap: 60px;
  max-width: 1400px; margin: 0 auto;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
}
.f-brand p {
  font-size: 13px; color: var(--muted);
  margin-top: 20px; line-height: 1.75; max-width: 280px;
}
.f-col h4 {
  font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--line2); margin-bottom: 22px;
}
.f-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.f-col li a { font-size: 14px; color: var(--muted); transition: color .2s; }
.f-col li a:hover { color: #f0f0f0; }
.f-contact { font-size: 13px; color: var(--muted); line-height: 1.9; }
.f-contact a { color: var(--orange); transition: opacity .2s; }
.f-contact a:hover { opacity: .75; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  max-width: 1400px; margin: 0 auto;
}
.footer-bottom p { font-size: 12px; color: var(--muted); }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-size: 12px; color: var(--muted); transition: color .2s; }
.footer-legal a:hover { color: #f0f0f0; }

/* ─── ANIMACIONES DE SCROLL ─── */
.r {
  opacity: 0; transform: translateY(32px);
  transition: opacity .7s ease, transform .7s ease;
}
.r.in  { opacity: 1; transform: none; }
.r.d1  { transition-delay: .07s; }
.r.d2  { transition-delay: .14s; }
.r.r3  { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  .r { opacity: 1; transform: none; transition: none; }
}

/* ══ SEÑAL LATERAL FIJA ══ */
.signpost {
  position: fixed;
  right: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 5px; z-index: 400; padding: 8px 0;
}
.sp-post {
  position: absolute; right: 16px; top: 0; bottom: 0;
  width: 2px; background: #1a1a1a; border-radius: 2px; z-index: 0;
}
.sp-post-base {
  position: absolute; right: 10px; bottom: -16px;
  width: 14px; height: 5px; background: #161616; border-radius: 3px;
}
.sp-sign {
  position: relative; z-index: 1;
  display: flex; align-items: center; text-decoration: none;
  transform: translateX(0);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.sp-sign:hover { transform: translateX(-10px); }
.sp-label {
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  color: #2a2a2a; padding: 0 12px 0 10px; height: 30px;
  display: flex; align-items: center; gap: 7px;
  background: #0e0e0e; border: 1px solid #1a1a1a; border-right: none;
  border-radius: 4px 0 0 4px;
  transition: color .2s, background .2s, border-color .2s;
  white-space: nowrap;
}
.sp-dot {
  width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0; opacity: .3; transition: opacity .2s;
}
.sp-arrow {
  width: 0; height: 0; flex-shrink: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  transition: border-left-color .2s;
}
.sp-arrow-hub,
.sp-arrow-green,
.sp-arrow-orange,
.sp-arrow-blue,
.sp-arrow-grey,
.sp-arrow-white,
.sp-arrow-cta    { border-left: 10px solid #0e0e0e; }

/* Badge NUEVO */
.sp-new {
  font-size: 8px; font-weight: 800; letter-spacing: 1px;
  background: #e05555; color: #fff;
  padding: 2px 5px; border-radius: 3px;
  animation: sp-pulse 2s ease-in-out infinite;
}
@keyframes sp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* Hover */
.sp-hub:hover    .sp-label { color:#F5A623; background:rgba(245,166,35,.07); border-color:rgba(245,166,35,.25); }
.sp-hub:hover    .sp-dot   { opacity:1; }
.sp-hub:hover    .sp-arrow-hub { border-left-color:rgba(245,166,35,.07); }
.sp-green:hover  .sp-label { color:#5BA85A; background:rgba(91,168,90,.07);  border-color:rgba(91,168,90,.25); }
.sp-green:hover  .sp-dot   { opacity:1; }
.sp-green:hover  .sp-arrow-green { border-left-color:rgba(91,168,90,.07); }
.sp-orange:hover .sp-label { color:#F5A623; background:rgba(245,166,35,.07); border-color:rgba(245,166,35,.25); }
.sp-orange:hover .sp-dot   { opacity:1; }
.sp-orange:hover .sp-arrow-orange { border-left-color:rgba(245,166,35,.07); }
.sp-blue:hover   .sp-label { color:#2AACE2; background:rgba(42,172,226,.07); border-color:rgba(42,172,226,.25); }
.sp-blue:hover   .sp-dot   { opacity:1; }
.sp-blue:hover   .sp-arrow-blue { border-left-color:rgba(42,172,226,.07); }
.sp-grey:hover   .sp-label { color:#aaa; background:rgba(170,170,170,.05); border-color:rgba(170,170,170,.2); }
.sp-grey:hover   .sp-dot   { opacity:1; }
.sp-grey:hover   .sp-arrow-grey { border-left-color:rgba(170,170,170,.05); }
.sp-white:hover  .sp-label { color:#f0f0f0; background:rgba(255,255,255,.05); border-color:#2a2a2a; }
.sp-white:hover  .sp-dot   { opacity:1; }
.sp-white:hover  .sp-arrow-white { border-left-color:rgba(255,255,255,.05); }

/* CTA siempre visible */
.sp-cta .sp-label { color:#2a2a2a !important; background:#0e0e0e !important; border-color:#1a1a1a !important; font-weight:700; }
.sp-sign.sp-active.sp-cta .sp-label { color:#F5A623 !important; background:rgba(245,166,35,.1) !important; border-color:rgba(245,166,35,.3) !important; font-weight:800; }
.sp-sign.sp-active.sp-cta .sp-arrow-cta { border-left-color:rgba(245,166,35,.1); }
.sp-cta:hover .sp-label { background:rgba(245,166,35,.18); border-color:rgba(245,166,35,.4); }
.sp-cta:hover .sp-arrow-cta { border-left-color:rgba(245,166,35,.18); }

/* Activo */
.sp-sign.sp-active.sp-hub    .sp-label { color:#F5A623; background:rgba(245,166,35,.1); border-color:rgba(245,166,35,.3); }
.sp-sign.sp-active.sp-hub    .sp-dot   { opacity:1; }
.sp-sign.sp-active.sp-hub    .sp-arrow-hub { border-left-color:rgba(245,166,35,.1); }
.sp-sign.sp-active.sp-green  .sp-label { color:#5BA85A; background:rgba(91,168,90,.1);  border-color:rgba(91,168,90,.3); }
.sp-sign.sp-active.sp-green  .sp-dot   { opacity:1; }
.sp-sign.sp-active.sp-green  .sp-arrow-green { border-left-color:rgba(91,168,90,.1); }
.sp-sign.sp-active.sp-orange .sp-label { color:#F5A623; background:rgba(245,166,35,.1); border-color:rgba(245,166,35,.3); }
.sp-sign.sp-active.sp-orange .sp-dot   { opacity:1; }
.sp-sign.sp-active.sp-orange .sp-arrow-orange { border-left-color:rgba(245,166,35,.1); }
.sp-sign.sp-active.sp-blue   .sp-label { color:#2AACE2; background:rgba(42,172,226,.1); border-color:rgba(42,172,226,.3); }
.sp-sign.sp-active.sp-blue   .sp-dot   { opacity:1; }
.sp-sign.sp-active.sp-blue   .sp-arrow-blue { border-left-color:rgba(42,172,226,.1); }
.sp-sign.sp-active.sp-grey   .sp-label { color:#aaa; background:rgba(170,170,170,.07); border-color:rgba(170,170,170,.25); }
.sp-sign.sp-active.sp-grey   .sp-dot   { opacity:1; }
.sp-sign.sp-active.sp-grey   .sp-arrow-grey { border-left-color:rgba(170,170,170,.07); }
.sp-sign.sp-active.sp-white  .sp-label { color:#fff; background:rgba(255,255,255,.13); border-color:#888; font-weight:700; }
.sp-sign.sp-active.sp-white  .sp-dot   { opacity:1; }
.sp-sign.sp-active.sp-white  .sp-arrow-white { border-left-color:rgba(255,255,255,.07); }

@media (max-width: 900px) { .signpost { display: none; } }

/* ─── RESPONSIVE FOOTER ─── */
@media (max-width: 900px) {
  footer { padding: 60px 24px 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════
   COMPONENTES COMUNES
   Hoisteados desde los <style> de las páginas: reglas
   idénticas en 3+ páginas. Se cargan ANTES que el CSS
   de página, así que cualquier variante propia sigue
   ganando por cascada.
══════════════════════════════════════════════ */

.breadcrumb a { transition: color .2s; }
.breadcrumb a:hover { color: rgba(255,255,255,.7); }
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,.3);
}

/* El posicionamiento absoluto de la miga de pan NO va aqui.
   Solo lo usan los heroes a sangre de renovables, ingenieria e
   instaladora, y vive en el CSS de cada una de esas paginas.
   Estaba en esta regla compartida porque las tres lo declaraban
   igual y el extractor la hoisteo entera, pero eso se lo colaba
   tambien a energia, cuyo hero es de dos columnas y coloca la
   miga en el flujo normal: se le montaba encima del eyebrow. */
.btn-ghost { display: inline-flex; align-items: center; gap: 9px; background: transparent; color: rgba(240,240,240,.55); font-size: 14px; font-weight: 500; padding: 15px 24px; border-radius: 5px; border: 1px solid var(--line2); transition: color .2s, border-color .2s, transform .2s; }
.btn-ghost:hover { color: #f0f0f0; border-color: rgba(255,255,255,.22); transform: translateY(-1px); }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--orange); }
.field label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.field select option { background: #111; color: #f0f0f0; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }
.field { display: flex; flex-direction: column; gap: 6px; }
.form-submit svg { width: 14px; height: 14px; }
.hero h1 .white { display: block; }
.hero { position: relative; height: 100vh; min-height: 660px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 52px 80px; overflow: hidden; }
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-inner { position: relative; max-width: 860px; }
.label-line { display: flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; }
.label-line::before { content: ''; width: 24px; height: 1px; background: var(--orange); }
.s-title { font-size: clamp(32px,4vw,52px); font-weight: 900; letter-spacing: -2px; line-height: .95; color: #f0f0f0; }
.scroll-cue { position: absolute; bottom: 28px; right: 52px; display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.2); }
.scroll-line { width: 44px; height: 1px; background: var(--line2); overflow: hidden; position: relative; }
@keyframes run { 0%{left:-100%} 60%{left:100%} 100%{left:100%} }


/* ══════════════════════════════════════════════
   ENLACES DESACTIVADOS
   Páginas que el diseño enlaza pero que aún no existen
   (aviso legal, privacidad, cookies, proyectos, blog).
   Se mantiene el aspecto del enlace pero sin interacción,
   para no dejar 404 sueltos por el sitio.
   Al crear la página se sustituye el <span> por un <a>.
══════════════════════════════════════════════ */
.link-off {
  color: inherit;
  opacity: .45;
  cursor: default;
  text-decoration: none;
}

/* Los enlaces desactivados son <span>, no <a>, asi que no heredan las
   reglas escritas para `a`. Sin esto salen mas grandes y mas claros que
   sus vecinos: en el pie, "Aviso legal / Privacidad / Cookies" se veian
   mas brillantes que "Proyectos", como si unos fuesen enlaces y otros
   no. Se replican aqui los mismos valores que usa cada contexto. */

.footer-legal .link-off {
  font-size: 12px;
  color: var(--muted);
}

.f-col ul .link-off,
.f-col li .link-off {
  font-size: 14px;
  color: var(--muted);
}

/* En textos corridos (parrafos legales de los formularios) el enlace
   desactivado conserva el subrayado tenue del original, para que la
   frase no pierda su forma. */
p .link-off,
.form-legal .link-off,
.nl-legal .link-off {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .18);
  text-underline-offset: 2px;
}

/* ── Salto al contenido (accesibilidad) ── */
.skip-link.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
}
.skip-link.screen-reader-text:focus {
  left: 8px;
  top: 8px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  background: var(--orange);
  color: #0a0a0a;
  font-weight: 700;
  font-size: 13px;
  border-radius: 2px;
}


/* ══════════════════════════════════════════════
   SALVAGUARDA DE ANCHO
   AÑADIDO, no forma parte de la maqueta original.

   El diseño da por hecho que las secciones son hijas directas de
   <body> a todo el ancho. Varias medidas del hero son porcentuales
   (.hero-left usa clamp(520px, 52%, 780px)), así que cualquier
   padding o max-width que el tema padre aplique al body estrecha la
   columna y hace que el titular parta en dos líneas.

   Twenty Twenty-Four es un tema de bloques y su theme.json puede
   introducir restricciones de ancho. Esto las neutraliza para el
   marcado del tema hijo.
══════════════════════════════════════════════ */
body {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* El ancla del salto al contenido no debe generar caja. */
#contenido {
  display: inline;
}


/* ══════════════════════════════════════════════
   AVISO PARA EL EDITOR
   AÑADIDO. Sólo se imprime para quien puede editar páginas
   (current_user_can('edit_pages')), nunca para el visitante.
   Lo usa template-parts/cf7-form.php cuando falta el ID del
   formulario: mejor un aviso claro en el panel que un hueco
   silencioso en la página.
══════════════════════════════════════════════ */
.gsm-aviso-editor {
  display: block;
  padding: 16px 18px;
  border: 1px dashed rgba(245,166,35,.5);
  background: rgba(245,166,35,.06);
  color: #f0f0f0;
  font-size: 13px;
  line-height: 1.6;
}
.gsm-aviso-editor strong { color: var(--orange); display: block; margin-bottom: 4px; }
.gsm-aviso-editor span { display: block; margin-top: 6px; font-size: 11px; opacity: .55; }


/* ══════════════════════════════════════════════
   HEROES INTERIORES — reparto vertical
   AÑADIDO. Se aparta a proposito de la maqueta.

   El diseño original alineaba el contenido de los heroes
   interiores abajo (justify-content: flex-end) dentro de una
   caja de 100vh. Todo el espacio sobrante se acumulaba arriba,
   dejando un hueco muy grande entre la miga de pan (que va
   absoluta en top:24px) y el titular. La portada, en cambio,
   centra su contenido, asi que su hueco superior es mucho menor.

   Al verlas seguidas la diferencia canta. Aqui se centra el
   contenido igual que en la portada, reservando arriba el sitio
   de la miga de pan para que nunca se solapen.

   Afecta a renovables, ingenieria e instaladora, que comparten
   la clase .hero. Energia no: tiene su propio hero en rejilla.

   Para ajustar el hueco, subir o bajar el padding-top.
══════════════════════════════════════════════ */
.hero {
  justify-content: center;
  padding-top: 120px;
}

/* La barra de administracion de WordPress desplaza la pagina 32px
   hacia abajo, pero 100vh sigue midiendo la ventana entera. Sin
   esto, quien esta identificado ve el hero mas alto que un
   visitante, y el hueco de arriba parece aun mayor. */
.admin-bar .hero {
  height: calc(100vh - 32px);
  min-height: calc(660px - 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .hero {
    height: calc(100vh - 46px);
    min-height: calc(660px - 46px);
  }
}