/*
Theme Name: LanjaGas Repsol
Theme URI: https://lanjagas.es
Author: LanjaGas SL
Description: Tema oficial de LanjaGas - Agencia Distribuidora y Servicio Oficial de Repsol
Version: 4.0
License: GNU General Public License v2 or later
Text Domain: lanjagas
*/

/* Hanken Grotesk = la grotesca humanista más fiel a RepsolSole (propietaria) */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&display=swap');

/* =====================================================================
   DESIGN TOKENS — valores EXACTOS de clientlib-base.min.css (repsol.com)
   ===================================================================== */
:root {
  /* Navy (escala real Repsol) */
  --navy-0:   #f4f8fa;
  --navy-05:  #dbe6f0;   /* border-low */
  --navy-30:  #95b0c6;   /* border-high */
  --navy-60:  #43637d;   /* content-medium (texto secundario) */
  --navy-70:  #18354d;
  --navy-80:  #001e37;   /* content-high (texto principal) */

  /* Turquesa (enlaces) */
  --turq-30:  #5ae2f6;
  --turq-50:  #00badb;
  --turq-70:  #007899;   /* content-link */
  --turq-90:  #004357;

  /* Orange / sand */
  --orange-0:  #fff5f0;  /* surface-sand */
  --orange-05: #fae2d6;
  --orange-70: #ff590a;  /* acento promo */

  /* Neutros */
  --grey:    #f7f7f9;    /* surface-grey */
  --white:   #ffffff;
  --red-60:  #de1c2e;

  /* Tipografía */
  --font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radios reales */
  --r-s:      8px;
  --r-m:      16px;
  --r-l:      24px;
  --r-inputs: 12px;
  --r-round:  999px;

  /* Sombras reales */
  --shadow-s: 0 1px 6px 0 rgba(0,19,36,.08);
  --shadow-m: 0 4px 16px 0 rgba(0,19,36,.08);

  /* Espaciado real (rds-spacing) */
  --sp-4:  4px;   --sp-8:  8px;   --sp-12: 12px;  --sp-16: 16px;
  --sp-24: 24px;  --sp-32: 32px;  --sp-40: 40px;  --sp-48: 48px;
  --sp-56: 56px;  --sp-64: 64px;  --sp-72: 72px;  --sp-80: 80px;  --sp-96: 96px;

  --g-padding: 32px;   /* padding global desktop */
}

/* =====================================================================
   RESET
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--navy-80);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--font); cursor: pointer; }

/* Titulares: SIEMPRE peso 400 (como RepsolSoleDisplayRegular) — NO bold */
h1, h2, h3, h4 { font-weight: 400; line-height: 1.25; letter-spacing: -.005em; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--g-padding); }

/* Escala tipográfica real */
.t-headline-01 { font-size: 2.5rem; line-height: 3rem; font-weight: 400; }       /* hero/secciones grandes */
.t-headline-02 { font-size: 2rem;   line-height: 2.5rem; font-weight: 400; }     /* títulos de sección */
.t-headline-03 { font-size: 1.5rem; line-height: 2rem; font-weight: 400; }
.t-title-01    { font-size: 1.125rem; line-height: 1.625rem; font-weight: 700; } /* títulos de tarjeta */
.t-body-01     { font-size: 1rem; line-height: 1.5rem; }
.t-body-02     { font-size: .875rem; line-height: 1.25rem; }
.t-caption     { font-size: .75rem; line-height: 1rem; }

/* Enlace tipo Repsol: turquesa + flecha */
.rp-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--turq-70);
  font-size: 1rem;
  line-height: 1.5rem;
  transition: color .2s;
}
.rp-link::after { content: "→"; font-size: 1.1em; transition: transform .2s; }
.rp-link:hover { color: var(--turq-90); }
.rp-link:hover::after { transform: translateX(3px); }

/* =====================================================================
   HEADER — barra blanca fina (réplica header com new navigation)
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  box-shadow: 0 1px 0 0 var(--navy-05);
}
.header-bar {
  display: flex; align-items: center;
  height: 72px;
  max-width: 1280px; margin: 0 auto;
  padding: 0 var(--g-padding);
  gap: var(--sp-32);
}
.site-logo { display: flex; align-items: center; gap: var(--sp-12); flex-shrink: 0; }
.logo-img { height: 34px; width: auto; }
.logo-divider { width: 1px; height: 28px; background: var(--navy-05); }
.logo-lanjagas { height: 30px; width: auto; }

.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: var(--sp-4); }
.main-nav a {
  font-size: .9rem; font-weight: 500;
  color: var(--navy-80);
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--r-round);
  transition: color .2s, background .2s;
}
.main-nav a:hover { color: var(--turq-70); }
.main-nav a.active { color: var(--turq-70); }
.nav-cta {
  background: var(--navy-80) !important;
  color: var(--white) !important;
  padding: 10px 20px !important;
}
.nav-cta:hover { color: var(--white) !important; }

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: var(--sp-8); margin-left: auto;
}
.hamburger span { width: 22px; height: 2px; background: var(--navy-80); border-radius: 2px; }

/* =====================================================================
   BOTONES — réplica exacta .rds-button (ripple ::after, pill, bold)
   ===================================================================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-8);
  padding: 12px 22px;
  border: none;
  border-radius: var(--r-round);
  font-family: var(--font);
  font-size: 1rem; line-height: 1.5rem; font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  z-index: 0;
  transition: color .25s;
}
.btn::after {
  content: ""; position: absolute;
  width: 200%; min-height: 300px;
  left: -50%; top: 100%;
  border-radius: 50%;
  transition: top .28s ease-in-out;
  z-index: -1;
}
.btn:hover::after { top: -50%; }

.btn-primary { background: var(--navy-80); color: var(--white); }
.btn-primary::after { background: var(--turq-70); }

.btn-secondary {
  background: transparent; color: var(--navy-80);
  box-shadow: inset 0 0 0 1.5px var(--navy-60);
}
.btn-secondary::after { background: var(--navy-80); }
.btn-secondary:hover { color: var(--white); }

.btn-reverse {                 /* sobre imagen oscura */
  background: transparent; color: var(--white);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6);
}
.btn-reverse::after { background: rgba(255,255,255,.16); }

.btn-sm { padding: 6px 12px; font-size: .875rem; line-height: 1.25rem; }

/* =====================================================================
   HERO — réplica .hero-home-component
   imagen redondeada (radius 16) + panel translúcido blur(48)
   ===================================================================== */
.hero { padding: 0 var(--g-padding); }
.hero-inner {
  position: relative;
  max-width: 1280px; margin: 0 auto;
}
.hero-bg {
  width: 100%; height: 640px; max-height: 640px;
  object-fit: cover;
  border-radius: var(--r-m);
  background-size: cover; background-position: center;
}
.hero-panel {
  position: absolute; left: 32px; bottom: 32px;
  width: 632px; max-width: calc(100% - 64px);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
  box-shadow: 0 4px 16px 0 rgba(0,0,0,.08);
  border-radius: var(--r-m);
  padding: 32px;
  display: flex; flex-direction: column; gap: var(--sp-24);
}
.hero-tag {
  font-size: .75rem; line-height: 1rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--orange-70);
}
.hero-title {
  font-size: 2.5rem; line-height: 3rem; font-weight: 400;
  color: var(--navy-80);
}
.hero-sub {
  font-size: 1rem; line-height: 1.5rem;
  color: var(--navy-60);
}
.hero-btns { display: flex; gap: var(--sp-12); flex-wrap: wrap; }
.hero-badges {
  display: flex; gap: var(--sp-24); flex-wrap: wrap;
  padding-top: var(--sp-24);
  border-top: 1px solid var(--navy-05);
}
.hero-badge { display: flex; align-items: center; gap: var(--sp-8); }
.hero-badge .ico {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--r-round);
  background: var(--navy-0);
  display: flex; align-items: center; justify-content: center;
  color: var(--turq-70);
}
.hero-badge strong { display: block; font-size: .85rem; font-weight: 700; color: var(--navy-80); }
.hero-badge small { font-size: .72rem; color: var(--navy-60); }

/* =====================================================================
   PROMO STRIP — banda fina sand
   ===================================================================== */
.promo-strip { background: var(--orange-0); }
.promo-strip-inner {
  max-width: 1280px; margin: 0 auto;
  padding: var(--sp-16) var(--g-padding);
  display: flex; align-items: center; gap: var(--sp-12);
  font-size: .875rem; color: var(--navy-60);
}
.promo-chip {
  flex-shrink: 0;
  background: var(--orange-70); color: var(--white);
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 4px 10px; border-radius: var(--r-round);
}
.promo-strip-inner strong { color: var(--navy-80); }
.promo-strip-inner a { color: var(--turq-70); font-weight: 600; }
.promo-strip-inner a:hover { color: var(--turq-90); }

/* =====================================================================
   SECCIONES
   ===================================================================== */
.section { padding: var(--sp-80) 0; }
.section-head { margin-bottom: var(--sp-48); max-width: 720px; }
.section-title {
  font-size: 2rem; line-height: 2.5rem; font-weight: 400;
  color: var(--navy-80); margin-bottom: var(--sp-12);
}
.section-sub {
  font-size: 1rem; line-height: 1.5rem;
  color: var(--navy-60);
}
.eyebrow {
  display: inline-block;
  font-size: .75rem; line-height: 1rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--turq-70);
  margin-bottom: var(--sp-12);
}

/* Panel redondeado destacado (réplica módulos sand/grey de repsol.com) */
.panel { border-radius: var(--r-l); padding: var(--sp-80) 0; }
.panel-grey { background: var(--grey); }
.panel-sand { background: var(--orange-0); }
.panel .container { max-width: 1216px; }

/* =====================================================================
   NOVEDADES (2 imágenes)
   ===================================================================== */
.novedades-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); }
.novedades-img-wrap {
  border-radius: var(--r-m); overflow: hidden;
  border: 1px solid var(--navy-05);
}
.novedades-img-wrap img { width: 100%; height: 300px; object-fit: cover; }

/* =====================================================================
   FINANCIACIÓN (panel sand)
   ===================================================================== */
.fin-inner { display: flex; align-items: center; gap: var(--sp-64); }
.fin-text h2 { font-size: 2rem; line-height: 2.5rem; font-weight: 400; color: var(--navy-80); margin-bottom: var(--sp-16); }
.fin-text p { font-size: 1rem; line-height: 1.5rem; color: var(--navy-60); max-width: 500px; margin-bottom: var(--sp-24); }
.fin-badge {
  flex-shrink: 0;
  background: var(--white);
  border-radius: var(--r-l);
  border: 1px solid var(--navy-05);
  padding: var(--sp-40) var(--sp-48);
  text-align: center;
}
.fin-badge .num { font-size: 4rem; line-height: 1; font-weight: 400; color: var(--navy-80); }
.fin-badge small { display: block; margin-top: var(--sp-8); font-size: 1rem; color: var(--navy-60); }

/* =====================================================================
   TARJETAS — réplica .card-es-basic
   borde 1px navy-05, radius 16, blanco, SIN sombra, SIN hover-lift
   ===================================================================== */
.cards-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-24); }
.cards-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); }

.card {
  border: 1px solid var(--navy-05);
  border-radius: var(--r-m);
  background: var(--white);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s;
}
.card:hover { border-color: var(--navy-30); }
.card-img { width: 100%; height: 200px; object-fit: cover; }
.card-body { padding: var(--sp-24); display: flex; flex-direction: column; flex: 1; }
.card-tag {
  font-size: .75rem; line-height: 1rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--turq-70); margin-bottom: var(--sp-8);
}
.card-title { font-size: 1.125rem; line-height: 1.625rem; font-weight: 700; color: var(--navy-80); margin-bottom: var(--sp-12); }
.card-text { font-size: .875rem; line-height: 1.25rem; color: var(--navy-60); margin-bottom: var(--sp-16); flex: 1; }
.card-body .rp-link { margin-top: auto; font-size: .875rem; }

/* Tarjeta campaña con código */
.card-code {
  display: inline-block;
  background: var(--orange-0);
  color: var(--orange-70);
  font-size: .8rem; font-weight: 600;
  padding: 6px 12px; border-radius: var(--r-s);
  margin-bottom: var(--sp-16);
}
.card-placeholder {
  width: 100%; height: 200px;
  background: var(--navy-0);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-30); font-size: 3rem;
}

/* =====================================================================
   SLIDESHOW — dots tipo Repsol (píldora que se ensancha)
   ===================================================================== */
.slideshow { position: relative; }
.slideshow-track { border-radius: var(--r-l); overflow: hidden; }
.slides { display: flex; transition: transform .6s ease; }
.slide { min-width: 100%; }
.slide img { width: 100%; height: 460px; object-fit: cover; }
.slide-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: var(--r-round);
  background: var(--white); border: 1px solid var(--navy-05);
  color: var(--navy-80); font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-s); transition: background .2s;
}
.slide-btn:hover { background: var(--navy-0); }
.slide-btn-prev { left: var(--sp-24); }
.slide-btn-next { right: var(--sp-24); }
.slide-dots { display: flex; justify-content: center; gap: var(--sp-8); margin-top: var(--sp-24); }
.slide-dot {
  width: 12px; height: 6px; border-radius: var(--r-s);
  background: var(--navy-05); border: none;
  transition: width .25s, background .25s;
}
.slide-dot.active { width: 40px; background: var(--navy-80); }

/* =====================================================================
   SPLIT (texto + imágenes): nosotros, revisiones, NEL, solar, waylet
   ===================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-64); align-items: center; }
.split-text h2 { font-size: 2rem; line-height: 2.5rem; font-weight: 400; color: var(--navy-80); margin-bottom: var(--sp-16); }
.split-text > p { font-size: 1rem; line-height: 1.5rem; color: var(--navy-60); margin-bottom: var(--sp-16); }
.split-list { display: flex; flex-direction: column; }
.split-list li {
  font-size: .9375rem; line-height: 1.4rem; color: var(--navy-60);
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--navy-05);
  display: flex; gap: var(--sp-8);
}
.split-list li::before { content: "›"; color: var(--turq-70); font-weight: 700; }
.split-text .btn { margin-top: var(--sp-24); }

.split-imgs { display: grid; gap: var(--sp-16); }
.split-imgs img { width: 100%; border-radius: var(--r-m); border: 1px solid var(--navy-05); object-fit: cover; }
.split-imgs.two-col { grid-template-columns: 1fr 1fr; }
.split-imgs.two-col img { height: 200px; }
.split-imgs.two-col img:first-child { grid-column: 1 / -1; height: 280px; }

/* Galería nosotros */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.gallery img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--r-m); border: 1px solid var(--navy-05); }
.gallery img:first-child { grid-column: 1 / -1; height: 240px; }

/* Vídeo NEL */
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--r-m); border: 1px solid var(--navy-05); }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* =====================================================================
   FAQ — réplica .cmp-accordion: SOLO líneas divisorias, sin cajas
   ===================================================================== */
.faq { border-top: 1px solid var(--navy-05); margin-top: var(--sp-24); }
.faq-item { border-bottom: 1px solid var(--navy-05); }
.faq-question {
  width: 100%; text-align: left;
  background: transparent; border: none;
  padding: 20px 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-24);
  font-family: var(--font);
  font-size: 1rem; line-height: 1.5rem; font-weight: 500;
  color: var(--navy-80);
}
.faq-icon { font-size: 1.25rem; color: var(--navy-80); transition: transform .25s; flex-shrink: 0; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-answer p { font-size: .9375rem; line-height: 1.5rem; color: var(--navy-60); padding-bottom: 24px; }
.faq-item.open .faq-answer { max-height: 400px; }

/* =====================================================================
   WAYLET código
   ===================================================================== */
.waylet-code-box {
  display: flex; align-items: center; gap: var(--sp-16); flex-wrap: wrap;
  background: var(--orange-0);
  border-radius: var(--r-m);
  padding: var(--sp-16) var(--sp-24);
  margin: var(--sp-24) 0;
}
.waylet-code-box span { font-size: .875rem; color: var(--navy-60); }
.waylet-code { font-size: 1.5rem; font-weight: 700; color: var(--orange-70); letter-spacing: 2px; }

/* =====================================================================
   GASES INDUSTRIALES (tarjetas simples)
   ===================================================================== */
.gases-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-24); }
.gas-card {
  border: 1px solid var(--navy-05); border-radius: var(--r-m);
  background: var(--white); padding: var(--sp-32) var(--sp-24);
  transition: border-color .2s;
}
.gas-card:hover { border-color: var(--navy-30); }
.gas-card .ico {
  width: 48px; height: 48px; border-radius: var(--r-round);
  background: var(--navy-0); color: var(--turq-70);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: var(--sp-16);
}
.gas-card h3 { font-size: 1.125rem; font-weight: 700; color: var(--navy-80); margin-bottom: var(--sp-8); }
.gas-card p { font-size: .875rem; line-height: 1.25rem; color: var(--navy-60); }

/* =====================================================================
   MUNICIPIOS (pills)
   ===================================================================== */
.municipios-grid { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.municipio-pill {
  background: var(--white);
  border: 1px solid var(--navy-05);
  border-radius: var(--r-round);
  padding: 8px 16px;
  font-size: .875rem; font-weight: 500; color: var(--navy-60);
  transition: border-color .2s, color .2s;
}
.municipio-pill:hover { border-color: var(--turq-70); color: var(--turq-70); }

/* =====================================================================
   REPARTO: vídeo + almacenes (dentro de municipios)
   ===================================================================== */
.reparto-video { margin-top: var(--sp-64); max-width: 760px; }
.reparto-video-head { margin-bottom: var(--sp-24); }
.reparto-video-head h3 { font-size: 1.5rem; line-height: 2rem; font-weight: 400; color: var(--navy-80); }
.reparto-video-head p { font-size: .875rem; color: var(--navy-60); margin-top: var(--sp-4); }

.almacenes { margin-top: var(--sp-64); }
.almacenes-title { font-size: 1.5rem; line-height: 2rem; font-weight: 400; color: var(--navy-80); margin-bottom: var(--sp-12); }
.almacenes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); }
.almacen-card {
  border: 1px solid var(--navy-05); border-radius: var(--r-m);
  background: var(--white); overflow: hidden;
}
.almacen-name {
  font-size: 1.125rem; font-weight: 700; color: var(--navy-80);
  padding: var(--sp-16) var(--sp-24);
}
.almacen-card .mapa { border: none; border-top: 1px solid var(--navy-05); border-radius: 0; }
.almacen-card .mapa iframe { display: block; }

/* =====================================================================
   CONTACTO
   ===================================================================== */
.contacto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-48); }
.info-card {
  border: 1px solid var(--navy-05); border-radius: var(--r-m);
  background: var(--white); padding: var(--sp-32);
  margin-bottom: var(--sp-24);
}
.info-card h3 { font-size: 1.125rem; font-weight: 700; color: var(--navy-80); margin-bottom: var(--sp-24); }
.info-items { display: flex; flex-direction: column; gap: var(--sp-20, 20px); }
.info-item { display: flex; gap: var(--sp-12); align-items: flex-start; }
.info-item .ico {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-round);
  background: var(--navy-0); color: var(--turq-70);
  display: flex; align-items: center; justify-content: center;
}
.info-item strong { display: block; font-size: .875rem; font-weight: 700; color: var(--navy-80); margin-bottom: 2px; }
.info-item p, .info-item a { font-size: .875rem; color: var(--navy-60); line-height: 1.4; }
.info-item a:hover { color: var(--turq-70); }
.mapa { border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--navy-05); }

.form-card {
  border: 1px solid var(--navy-05); border-radius: var(--r-m);
  background: var(--white); padding: var(--sp-32);
}
.form-card h3 { font-size: 1.125rem; font-weight: 700; color: var(--navy-80); margin-bottom: var(--sp-24); }
.form-group { margin-bottom: var(--sp-16); }
.form-group label { display: block; font-size: .8rem; font-weight: 600; color: var(--navy-80); margin-bottom: var(--sp-4); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--navy-05);
  border-radius: var(--r-inputs);
  font-family: var(--font); font-size: .9375rem; color: var(--navy-80);
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--turq-50);
  box-shadow: 0 0 0 2px rgba(0,186,219,.2);
}
.form-group textarea { resize: vertical; }
.form-check { display: flex; gap: var(--sp-8); align-items: flex-start; }
.form-check label { font-size: .8rem; font-weight: 400; color: var(--navy-60); }
.form-check input { margin-top: 3px; accent-color: var(--navy-80); flex-shrink: 0; }
.form-check a { color: var(--turq-70); }
.btn-full { width: 100%; justify-content: center; }

/* =====================================================================
   FOOTER — réplica footer-v2 (blanco, columnas, divisores)
   ===================================================================== */
.site-footer { background: var(--white); border-top: 1px solid var(--navy-05); margin-top: var(--sp-96); }
.footer-top {
  max-width: 1280px; margin: 0 auto;
  padding: var(--sp-48) var(--g-padding);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-48);
  border-bottom: 1px solid var(--navy-05);
}
.footer-brand .logo-img { height: 32px; margin-bottom: var(--sp-16); }
.footer-brand p { font-size: .875rem; line-height: 1.25rem; color: var(--navy-60); max-width: 300px; }
.footer-socials { display: flex; gap: var(--sp-12); margin-top: var(--sp-20, 20px); }
.footer-social {
  width: 36px; height: 36px; border-radius: var(--r-round);
  border: 1px solid var(--navy-05);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-80); transition: color .2s, border-color .2s;
}
.footer-social:hover { color: var(--turq-70); border-color: var(--turq-70); }
.footer-social img { width: 16px; height: 16px; }
.footer-col h4 { font-size: 1rem; font-weight: 700; color: var(--navy-80); margin-bottom: var(--sp-16); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-12); }
.footer-col a { font-size: .875rem; color: var(--navy-60); transition: color .2s; }
.footer-col a:hover { color: var(--turq-70); }
.footer-eu { display: flex; gap: var(--sp-8); margin-top: var(--sp-16); flex-wrap: wrap; }
.footer-eu img { height: 38px; width: auto; }
.footer-bottom {
  max-width: 1280px; margin: 0 auto;
  padding: var(--sp-24) var(--g-padding);
  display: flex; align-items: center; gap: var(--sp-24); flex-wrap: wrap;
  font-size: .75rem; color: var(--navy-60);
}
.footer-bottom p { flex: 1; }
.footer-bottom a { color: var(--navy-60); }
.footer-bottom a:hover { color: var(--navy-80); }

/* =====================================================================
   WHATSAPP flotante
   ===================================================================== */
.wa-float {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  width: 52px; height: 52px; border-radius: var(--r-round);
  background: #25d366; color: var(--white); font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-m); transition: transform .2s;
}
.wa-float:hover { transform: scale(1.08); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
  .cards-grid-4, .gases-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .contacto-grid, .novedades-grid, .cards-grid-2 { grid-template-columns: 1fr; }
  .split { gap: var(--sp-32); }
  .fin-inner { flex-direction: column; align-items: flex-start; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .hero-panel { width: auto; left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* =====================================================================
   EDITOR DE BLOQUES — adapta el diseño Repsol a los bloques nativos
   (estas reglas solo afectan a las páginas montadas con bloques)
   ===================================================================== */

/* Control de ancho del contenido de bloques */
.lj-content > * {
  max-width: 1280px;
  margin-left: auto; margin-right: auto;
  padding-left: var(--g-padding); padding-right: var(--g-padding);
}
.lj-content > .alignfull { max-width: none; padding-left: 0; padding-right: 0; }
.lj-content > .alignwide { max-width: 1280px; }

/* Botones de bloque con estilo Repsol */
.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button.btn-secondary .wp-block-button__link {
  padding: 12px 22px; border-radius: var(--r-round);
  font-weight: 700; font-size: 1rem; border: none;
}
.wp-block-button.btn-primary .wp-block-button__link { background: var(--navy-80); color: #fff; }
.wp-block-button.btn-primary .wp-block-button__link:hover { background: var(--turq-70); }
.wp-block-button.btn-secondary .wp-block-button__link {
  background: transparent; color: var(--navy-80);
  box-shadow: inset 0 0 0 1.5px var(--navy-60);
}
.wp-block-button.btn-secondary .wp-block-button__link:hover { background: var(--navy-80); color: #fff; }

/* HERO como bloque Cover */
.lj-hero.wp-block-cover {
  min-height: 600px; border-radius: var(--r-m); overflow: hidden;
  align-items: flex-end; padding: 32px;
}
.lj-hero .wp-block-cover__inner-container { width: 100%; }
.lj-hero .hero-panel {
  position: static; max-width: 632px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(48px); -webkit-backdrop-filter: blur(48px);
  border-radius: var(--r-m); padding: 32px;
  box-shadow: 0 4px 16px 0 rgba(0,0,0,.08);
}

/* Secciones / paneles montados como grupos */
.wp-block-group.section { padding-top: var(--sp-80); padding-bottom: var(--sp-80); }
.wp-block-group.panel { border-radius: var(--r-l); padding: var(--sp-80) var(--sp-40); margin-top: var(--sp-48); margin-bottom: var(--sp-48); }
.wp-block-group.panel-grey { background: var(--grey); }
.wp-block-group.panel-sand { background: var(--orange-0); }
.wp-block-group.section > .section-title,
.wp-block-group.panel  > .section-title { margin-bottom: var(--sp-12); }

/* Columnas: separación tipo Repsol */
.lj-content .wp-block-columns { gap: var(--sp-24); margin-bottom: 0; }

/* Tarjetas como grupo de bloques */
.wp-block-group.card { padding: 0; gap: 0; overflow: hidden; }
.card-img { margin: 0; }
.card-img img { width: 100%; height: 200px; object-fit: cover; display: block; }
.wp-block-group.card-body { padding: var(--sp-24); gap: var(--sp-8); }

/* Galería de "nosotros" */
.gallery.wp-block-gallery img { border-radius: var(--r-m); border: 1px solid var(--navy-05); }

/* Imágenes de solar */
.solar-img { margin: 0 0 var(--sp-16) 0; }
.solar-img img { width: 100%; border-radius: var(--r-m); border: 1px solid var(--navy-05); }

/* FAQ con bloque Detalles nativo */
.faq .faq-item.wp-block-details {
  border: none; border-bottom: 1px solid var(--navy-05);
  border-radius: 0; background: transparent; padding: 0;
}
.faq .faq-item.wp-block-details summary {
  padding: 20px 0; font-weight: 500; color: var(--navy-80);
  cursor: pointer; list-style: none; position: relative; padding-right: 32px;
}
.faq .faq-item.wp-block-details summary::-webkit-details-marker { display: none; }
.faq .faq-item.wp-block-details summary::after {
  content: "+"; position: absolute; right: 0; top: 18px;
  font-size: 1.25rem; color: var(--navy-80); transition: transform .2s;
}
.faq .faq-item.wp-block-details[open] summary::after { content: "−"; }
.faq .faq-item.wp-block-details p { color: var(--navy-60); padding-bottom: 20px; font-size: .9375rem; }

/* Tarjetas de gases como grupo */
.wp-block-group.gas-card {
  border: 1px solid var(--navy-05); border-radius: var(--r-m);
  padding: var(--sp-32) var(--sp-24); background: #fff;
}

/* Contacto como bloque */
.wp-block-group.info-card {
  border: 1px solid var(--navy-05); border-radius: var(--r-m);
  padding: var(--sp-32); background: #fff; margin-bottom: var(--sp-24);
}

/* Hero alignwide centrado aunque no haya contenedor */
.lj-content > .lj-hero { margin-left: auto; margin-right: auto; }

@media (max-width: 768px) {
  :root { --g-padding: 16px; }
  .lj-hero.wp-block-cover { min-height: 440px; padding: 16px; }
  .lj-hero .hero-panel { backdrop-filter: blur(20px); }
  .main-nav ul {
    display: none; flex-direction: column;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--white);
    box-shadow: 0 1px 0 0 var(--navy-05), var(--shadow-m);
    padding: var(--sp-16); gap: var(--sp-4); z-index: 99;
  }
  .main-nav ul.open { display: flex; }
  .main-nav a { padding: 12px; }
  .hamburger { display: flex; }
  .hero-bg { height: 420px; }
  .hero-panel { position: relative; left: 0; right: 0; bottom: 0; margin-top: -60px; backdrop-filter: blur(20px); }
  .hero-title { font-size: 1.875rem; line-height: 2.25rem; }
  .section { padding: var(--sp-48) 0; }
  .panel { padding: var(--sp-48) 0; }
  .section-title, .split-text h2, .fin-text h2 { font-size: 1.625rem; line-height: 2.125rem; }
  .cards-grid-4, .gases-grid, .almacenes-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: var(--sp-32); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .slide img { height: 280px; }
  .slide-btn-prev { left: var(--sp-12); }
  .slide-btn-next { right: var(--sp-12); }
}