/* =====================================================================
   Inteligencia Energía · Capa de diseño v7.0
   Se carga DESPUÉS de styles.css y de los <style> de cada página.
   Movimiento: solo transform/opacity, curvas fuertes, <300 ms en UI,
   hover solo con ratón y respeto a prefers-reduced-motion.
   ===================================================================== */
:root{
  --ease-ui: cubic-bezier(.23,1,.32,1);
  --ease-move: cubic-bezier(.77,0,.175,1);
  --franja: linear-gradient(90deg,
    var(--ie-green-500) 0 33.33%, var(--ie-amber-500) 33.33% 41.66%, var(--ie-coral-500) 41.66% 58.33%,
    var(--ie-amber-500) 58.33% 75%, var(--ie-coral-500) 75% 91.66%, var(--ie-amber-500) 91.66% 100%);
  --franja-ticks: repeating-linear-gradient(90deg, transparent 0 calc(100%/24 - 3px), var(--gray-50) calc(100%/24 - 3px) calc(100%/24));
  --v7-shadow: 0 1px 2px rgba(2,33,63,.05), 0 24px 48px -28px rgba(2,33,63,.38);
}

/* ---------- Continuidad entre páginas (View Transitions entre documentos) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration: 240ms; animation-timing-function: var(--ease-ui); }
::view-transition-group(*){ animation-duration: 440ms; animation-timing-function: var(--ease-move); }
.site-header{ view-transition-name: v7-header; }
.v7-mbar{ view-transition-name: v7-mbar; }
.site-footer{ view-transition-name: v7-footer; }
.door-particulares{ view-transition-name: area-particulares; }
.door-autonomos{ view-transition-name: area-autonomos; }
.door-empresas{ view-transition-name: area-empresas; }
.door-inmobiliarias{ view-transition-name: area-inmobiliarias; }
.door-fincas{ view-transition-name: area-fincas; }
.particulares-body:not(.diag-body):not(.hlz-page) .particulares-hero{ view-transition-name: area-particulares; }
.autonomos-hero{ view-transition-name: area-autonomos; }
.empresas-hero{ view-transition-name: area-empresas; }
.gsi-body:not(.gaf-body) .gsi-hero{ view-transition-name: area-inmobiliarias; }
.gaf-body .gsi-hero{ view-transition-name: area-fincas; }
/* las guías comparten clase de hero: solo la página principal de cada área recibe el nombre */
.v7-guide .particulares-hero, .v7-guide .gsi-hero{ view-transition-name: none !important; }

/* ---------- Cabecera ---------- */
/* v6.8 ponía overflow-x:hidden en html y body: el body pasaba a ser contenedor de scroll
   y la cabecera dejaba de quedarse fija. «clip» evita igual el scroll horizontal sin romper el sticky. */
@supports (overflow: clip){ html, body{ overflow-x: clip; } }
/* con la cabecera fija: los saltos a anclas no quedan tapados y los sticky se colocan debajo */
html{ scroll-padding-top: 84px; }
.mejora-cta-card{ top: 5.5rem; }
/* con la cabecera fija, el menú móvil abierto se desplaza por dentro si no cabe */
.mobile-menu.is-open{ max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain; }
.site-header{ transition: background-color 200ms ease, box-shadow 200ms ease; }
.site-header.v7-scrolled{ box-shadow: 0 6px 24px -18px rgba(2,33,63,.45); }
.nav-list > li > a:not(.nav-cta){ position: relative; }
.nav-list > li > a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px;
  background: var(--ie-amber-500); transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--ease-ui);
}
@media (hover:hover) and (pointer:fine){ .nav-list > li:hover > a:not(.nav-cta)::after{ transform: scaleX(1); } }
.nav-list > li > a[aria-current]:not(.nav-cta)::after{ transform: scaleX(1); }
.nav-dropdown{ transform-origin: top center; transition: opacity 180ms var(--ease-ui), transform 220ms var(--ease-ui), visibility 180ms; }
.nav-cta{ border-radius: 12px; transition: transform 160ms var(--ease-ui), background-color 160ms ease; }
.nav-cta:hover{ transform: none; }
.nav-cta:active{ transform: scale(.97); }
/* punto «en directo»: alineado con el texto, sin pisarlo */
.nav-live-link{ display: inline-flex !important; align-items: center; gap: .4rem; }
.nav-live-link > .nav-live-dot{ position: static !important; margin: 0 !important; top: auto !important; right: auto !important; }

/* ---------- Botones: un único sistema y respuesta al pulsar ---------- */
.btn{ border-radius: 12px; min-height: 48px; transition: transform 160ms var(--ease-ui), background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.btn:hover{ transform: none; }
.btn:active{ transform: scale(.97); }
.btn-wa{ font-weight: 600; }
@media (hover:hover) and (pointer:fine){
  .btn-wa:hover{ box-shadow: 0 10px 26px -12px rgba(37,211,102,.75); }
  .btn-primary:hover{ box-shadow: 0 12px 28px -14px rgba(4,44,83,.55); }
}

/* ---------- Etiquetas (eyebrow): sin mayúsculas forzadas, con la franja ---------- */
.eyebrow{
  display: inline-flex; align-items: center; gap: .6rem;
  text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 500;
}
.eyebrow::before{ content:""; flex: none; width: 34px; height: 6px; border-radius: 2px; background: var(--franja); }
/* El resto de etiquetas de sección e insignias del sitio, también en texto normal
   (las micro-etiquetas de datos de tablas, panel y calculadoras siguen en mayúsculas). */
:is(.eyebrow, .eyebrow-light, .autonomos-eyebrow, .cinmo-eyebrow, .cinmo-comerc-eyebrow, .colab-eyebrow, .gsi-eyebrow, .gsi-tag,
    .gsi-diff-tag, .qmc-eyebrow, .reunion-eyebrow, .mejora-cta-eyebrow, .mejora-hero-badge, .diag-alternative-eyebrow,
    .diag-power-eyebrow, .diag-result-eyebrow, .diag-savings-eyebrow, .diag-solar-tip-eyebrow, .ex-eyebrow,
    .empresas-seo-badge, .particulares-badge, .door-badge, .colab-path-tag, .cinmo-comision-tag, .autonomos-tarifa-tag,
    .diag-tariff-tag, .unique-badge, .precio-luz-consultor-badge, .legal-toc h4, .empresas-quickfacts h3, .seo-quickfacts h3){
  text-transform: none !important; letter-spacing: 0 !important;
}
:is(.autonomos-eyebrow, .cinmo-eyebrow, .cinmo-comerc-eyebrow, .colab-eyebrow, .gsi-eyebrow, .qmc-eyebrow, .reunion-eyebrow,
    .mejora-cta-eyebrow, .mejora-hero-badge, .empresas-seo-badge, .particulares-badge, .diag-result-eyebrow, .ex-eyebrow){
  font-size: .84rem !important; font-weight: 600;
}
.footer-col h4, .nav-dropdown .dropdown-section, .mobile-menu .submenu-list .submenu-section{ text-transform: none !important; letter-spacing: 0 !important; font-size: .82rem; }

/* ---------- Franja horaria bajo cada cabecera de página ---------- */
:is(.home-hero, .particulares-hero, .empresas-seo-hero, .empresas-hero, .legal-hero, .gsi-hero, .cinmo-hero,
    .colab-hero, .contacto-hero, .diag-hero, .svc-hero, .panel-emp-hero, .precio-luz-hero, .qmc-hero,
    .mejora-hero, .reunion-hero, .autonomos-hero, .tdj-hero){
  border-bottom: 6px solid transparent;
  border-image: var(--franja) 1;
}

/* Cabeceras de inmobiliarias y fincas: relleno proporcional (antes 160 px fijos; en móvil los botones caían bajo el pliegue) */
.gsi-hero{ padding: clamp(2.5rem, 7vw, 6.5rem) 0 clamp(3rem, 7vw, 6rem); }

/* ---------- Aparición al llegar a pantalla (sustituye la animación al cargar) ---------- */
/* .v7-js lo pone un script en <head>; v7.js añade .v7-ok al arrancar.
   Si v7.js no llegara a cargar, la animación de seguridad lo muestra todo a los 3 s. */
.v7-js .fade-up, .v7-js .v7-rv{
  opacity: 0; transform: translateY(16px);
  transition: opacity 520ms ease, transform 640ms var(--ease-ui);
  animation: none;
}
.v7-js:not(.v7-ok) .fade-up, .v7-js:not(.v7-ok) .v7-rv{ animation: v7-failsafe 1ms 3s forwards; }
.v7-js .fade-up.v7-in, .v7-js .v7-rv.v7-in{ opacity: 1; transform: none; }
@keyframes v7-failsafe{ to{ opacity: 1; transform: none; } }
/* En la cabecera el contenido se ve desde el primer pintado (LCP): solo se desplaza */
.v7-js :is(.home-hero, .particulares-hero, .empresas-seo-hero, .empresas-hero, .legal-hero, .gsi-hero, .cinmo-hero,
    .colab-hero, .contacto-hero, .diag-hero, .svc-hero, .panel-emp-hero, .precio-luz-hero, .qmc-hero,
    .mejora-hero, .reunion-hero, .autonomos-hero, .tdj-hero) .fade-up{
  opacity: 1; transform: none; animation: v7-rise 700ms var(--ease-ui) both; transition: none;
}
@keyframes v7-rise{ from{ transform: translateY(14px); } }

/* ---------- Puertas de la portada: rejilla con jerarquía ---------- */
.doors-vertical{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.doors-vertical .door-empresas{ grid-column: 1 / -1; }
/* en tarjetas de media anchura el dibujo queda de fondo, sin competir con el título */
.doors-vertical .door:not(.door-empresas) .door-decor{ opacity: .28; width: 46%; max-width: 220px; height: auto; }
.doors-vertical .door:not(.door-empresas) h2, .doors-vertical .door:not(.door-empresas) p{ position: relative; z-index: 1; }
.door{ border-radius: 24px; min-height: 0; transition: transform 260ms var(--ease-ui), box-shadow 260ms var(--ease-ui); }
.door:hover{ transform: none; }
@media (hover:hover) and (pointer:fine){
  .door:hover{ transform: translateY(-4px); box-shadow: 0 28px 56px -32px rgba(2,33,63,.55); }
  .door:hover .door-cta-arrow{ transform: translateX(4px); }
  .door:hover .door-decor{ transform: scale(1.06) rotate(-2deg); }
}
.door:active{ transform: scale(.985); }
.door-decor{ transition: transform 600ms var(--ease-ui); }
.door-cta-arrow{ transition: transform 220ms var(--ease-ui); }
.door-badge{ border-radius: 999px; text-transform: none; letter-spacing: 0; font-size: .8rem; }
.door-fincas{ background: linear-gradient(140deg, #412402 0%, #854F0B 100%); color: var(--white); }
.door-fincas .door-badge{ background: rgba(255,255,255,.14); color: var(--ie-amber-300); }
.door-fincas .door-badge .dot{ background: var(--ie-amber-300); }
.door-fincas p, .door-fincas .door-features li{ color: rgba(255,255,255,.86); }
.door-fincas h2 em{ color: var(--ie-amber-300); }
.door-fincas .door-cta{ color: var(--white); border-top-color: rgba(255,255,255,.18); }
.door-fincas .door-cta-arrow{ background: rgba(255,255,255,.14); color: var(--white); }
.door-fincas .door-features li::before{ background: var(--ie-amber-300); }
@media (max-width: 860px){ .doors-vertical{ grid-template-columns: 1fr; } }

/* ---------- Portada: hero con embudo ---------- */
.home-hero.v7-home{ text-align: left; padding: clamp(2.75rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden; isolation: isolate; }
.home-hero.v7-home::before{
  content:""; position:absolute; z-index:-1; right:-18%; top:-35%; width:min(70vw, 900px); aspect-ratio:1; border-radius:50%;
  background: radial-gradient(closest-side, rgba(239,159,39,.20), rgba(239,159,39,0) 70%),
              radial-gradient(closest-side at 30% 70%, rgba(24,95,165,.15), rgba(24,95,165,0) 70%);
  animation: v7-drift 22s var(--ease-move) infinite alternate;
}
@keyframes v7-drift{ to{ transform: translate3d(-6%, 8%, 0) scale(1.1); } }
.v7-home .v7-hero-grid{ display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.v7-home h1{ margin-inline: 0; max-width: 15ch; text-align: left; }
.v7-home .v7-lead{ margin: 1.25rem 0 0; max-width: 48ch; text-align: left; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--gray-700); }
.v7-home .eyebrow{ margin-bottom: 1.25rem; }
.v7-badges{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; padding: 0; list-style: none; }
.v7-badges li{ font-size: .85rem; font-weight: 500; padding: .38rem .8rem; border-radius: 999px; background: var(--white); border: 1px solid var(--gray-200); color: var(--ie-navy-800); }
.v7-word{ display: inline-block; }
.v7-js .v7-split .v7-word{ transform: translateY(.3em); filter: blur(5px); transition: transform 700ms var(--ease-ui), filter 600ms var(--ease-ui); }
.v7-ready .v7-split .v7-word{ transform: none; filter: none; }
.v7-rule{ height: 12px; border-radius: 3px; margin-top: clamp(2.5rem, 5vw, 4rem); background: var(--franja-ticks), var(--franja); transform-origin: left; }
.v7-js .v7-rule{ transform: scaleX(0); transition: transform 1200ms var(--ease-ui) 300ms; }
.v7-ready .v7-rule{ transform: scaleX(1); }
.v7-facts{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--gray-200); border-radius: 20px; overflow: hidden; margin-top: clamp(2rem, 4vw, 3rem); }
.v7-fact{ background: var(--white); padding: 1.4rem 1.5rem; text-align: left; }
.v7-fact b{ display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.03em; color: var(--ie-navy-800); font-variant-numeric: tabular-nums; }
.v7-fact span{ font-size: .875rem; color: var(--gray-700); }

/* Embudo por pasos */
.v7-funnel{ background: var(--white); border: 1px solid var(--gray-200); border-radius: 24px; padding: 1.25rem; box-shadow: var(--v7-shadow); text-align: left; }
.v7-f-top{ display: flex; align-items: center; gap: .75rem; min-height: 34px; }
.v7-f-back{ border: 0; background: var(--ie-blue-50); color: var(--ie-navy-800); width: 34px; height: 34px; border-radius: 10px; cursor: pointer; display: none; font-size: 1rem; transition: transform 160ms var(--ease-ui); }
.v7-f-back:active{ transform: scale(.94); }
.v7-f-back.on{ display: inline-block; }
.v7-f-q{ font-family: var(--font-display); font-size: 1.4rem; line-height: 1.15; letter-spacing: -.01em; flex: 1; margin: 0; color: var(--ie-navy-900); }
.v7-f-n{ font-size: .8rem; color: var(--gray-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v7-f-prog{ height: 4px; border-radius: 4px; background: var(--gray-200); overflow: hidden; margin: .75rem 0 1rem; }
.v7-f-prog i{ display: block; height: 100%; background: var(--franja); transform-origin: left; transform: scaleX(.33); transition: transform 360ms var(--ease-ui); }
.v7-f-step{ display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.v7-f-step > .v7-opt:last-child:nth-child(odd){ grid-column: 1 / -1; }
.v7-f-step.enter{ animation: v7-step-in 280ms var(--ease-ui) both; }
.v7-f-step.back{ animation: v7-step-back 280ms var(--ease-ui) both; }
@keyframes v7-step-in{ from{ opacity: 0; transform: translateX(20px); } }
@keyframes v7-step-back{ from{ opacity: 0; transform: translateX(-20px); } }
.v7-opt{ display: flex; align-items: center; gap: .75rem; text-align: left; padding: .75rem .85rem; border-radius: 14px; border: 1px solid var(--gray-200); background: var(--gray-50); color: var(--ie-navy-900); cursor: pointer; min-height: 64px; font: inherit; transition: transform 160ms var(--ease-ui), border-color 160ms ease, background-color 160ms ease; }
.v7-opt:active{ transform: scale(.97); }
@media (hover:hover) and (pointer:fine){ .v7-opt:hover{ border-color: var(--c); background: var(--white); } }
.v7-opt i{ flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--c-bg); color: var(--c); }
.v7-opt i svg{ width: 20px; height: 20px; }
.v7-opt b{ display: block; font-weight: 500; font-size: .95rem; line-height: 1.25; }
.v7-opt small{ display: block; font-size: .78rem; color: var(--gray-700); line-height: 1.3; }
.v7-f-done{ display: grid; gap: .75rem; }
.v7-f-sum{ background: var(--ie-blue-50); border-radius: 14px; padding: .85rem 1rem; font-size: .95rem; color: var(--ie-navy-800); }
.v7-f-row{ display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.v7-f-alt{ font-size: .875rem; color: var(--ie-navy-700); text-decoration: underline; text-underline-offset: 3px; }
.v7-f-foot{ margin: .9rem 0 0; font-size: .8rem; color: var(--gray-700); }
@media (max-width: 960px){ .v7-home .v7-hero-grid{ grid-template-columns: 1fr; } .v7-facts{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){
  .v7-f-step{ grid-template-columns: 1fr; } .v7-opt{ min-height: 56px; } .v7-f-q{ font-size: 1.25rem; }
  /* en móvil el embudo sube a la primera pantalla; las credenciales ya aparecen en las cifras */
  .v7-badges{ display: none; }
  .v7-home .v7-lead{ font-size: 1rem; }
}

/* Banda del lema */
.slogan-band::before{ height: 6px; background: var(--franja); }

/* ---------- Tarjetas genéricas: profundidad consistente ---------- */
:is(.service-card, .why-card, .profile-card, .step-card, .gsi-card, .feature-card){ transition: transform 240ms var(--ease-ui), box-shadow 240ms var(--ease-ui); }
@media (hover:none){ :is(.service-card, .why-card, .profile-card, .step-card, .gsi-card, .feature-card, .card):hover{ transform: none !important; } }

/* ---------- Pie ---------- */
.site-footer{ border-top: 6px solid transparent; border-image: var(--franja) 1; }
.footer-logo img{ filter: brightness(0) invert(1); opacity: .95; height: 38px; width: auto; }
.footer-col h4{ margin-top: 1.75rem; }
.footer-col h4:first-child{ margin-top: 0; }
.footer-col ul + h4{ margin-top: 1.75rem; }
.footer-col a{ transition: color 150ms ease; }

/* ---------- Barra fija móvil: WhatsApp + llamar ---------- */
.v7-mbar{ display: none; }
@media (max-width: 767px){
  .v7-mbar{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: .6rem;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--gray-200);
    transform: translateY(110%); transition: transform 320ms var(--ease-ui);
  }
  .v7-mbar.on{ transform: none; }
  .v7-mbar a{ flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; border-radius: 12px; font-weight: 600; font-size: .95rem; text-decoration: none; transition: transform 160ms var(--ease-ui); }
  .v7-mbar a:active{ transform: scale(.97); }
  .v7-mbar svg{ width: 19px; height: 19px; flex: none; }
  .v7-mbar .v7-mbar-wa{ background: var(--wa-green); color: #063B1E; }
  .v7-mbar .v7-mbar-tel{ box-shadow: inset 0 0 0 1.5px var(--ie-navy-800); color: var(--ie-navy-800); }
  body.v7-has-mbar{ padding-bottom: 76px; }
  body.v7-has-mbar .ie-cb-toggle{ bottom: 88px !important; }
}

/* ---------- Accesibilidad ---------- */
:focus-visible{ outline: 3px solid var(--ie-amber-500); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation: none !important; }
  .v7-js .fade-up, .v7-js .v7-rv, .v7-js .v7-split .v7-word, .v7-js .v7-rule{ opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; }
  .home-hero.v7-home::before{ animation: none; }
  .v7-f-step.enter, .v7-f-step.back{ animation: none; }
  .door, .door-decor, .door-cta-arrow, .btn, .v7-opt, .v7-mbar{ transition: none !important; }
}