:root{
  /* Aire de los titulares. 1 = como venía; por debajo de 1 se abren.
     En un solo sitio: hay 7 titulares con tracking distinto, y así se
     ajustan todos a la vez en vez de tocar cada uno a mano. */
  --oxigeno-titulares:.90;
  --navy:#06172f;
  --navy-2:#0a2448;
  --teal:#167a76;
  --cyan:#59d1ca;
  --mint:#bfe7c4;
  --lime:#a8f235;
  --ice:#f4f8f8;
  --paper:#ffffff;
  --text:#071a34;
  --muted:#60718a;
  --border:rgba(6,23,47,.10);
  --shadow:0 28px 80px rgba(6,23,47,.14);
  --shadow-soft:0 16px 46px rgba(6,23,47,.09);
  --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 88% 0%, rgba(89,209,202,.20), transparent 32%),
    radial-gradient(circle at 10% 6%, rgba(168,242,53,.13), transparent 28%),
    linear-gradient(180deg,#fbfdfd 0%,#eef5f5 52%,#fbfdfd 100%);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
img[src*="/icons/"], img[src*="assets/icons"]{width:20px!important;height:20px!important;display:inline-block!important;object-fit:contain!important;flex:0 0 20px!important}
button,input,select,textarea{font:inherit}
body:before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(6,23,47,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(6,23,47,.028) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.28),transparent 72%);
}
.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}
.nav{
  position:sticky;top:14px;z-index:50;width:min(1220px,calc(100% - 24px));margin:14px auto 0;
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 14px 12px 18px;border-radius:999px;
  background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.95);box-shadow:0 18px 50px rgba(6,23,47,.11);backdrop-filter:blur(18px);
}
.brand-logo{height:34px;width:auto;max-width:235px;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:24px;font-size:14px;color:#30435b}
.nav-links a{white-space:nowrap}
.nav-links a:hover{color:var(--teal)}
.nav-actions{display:flex;align-items:center;gap:10px}
.menu{display:none;background:transparent;border:0;color:var(--navy);padding:8px}
.menu span{display:block;width:22px;height:2px;background:currentColor;border-radius:20px;margin:5px 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:14px 20px;
  font-weight:850;line-height:1;cursor:pointer;transition:.2s ease;white-space:nowrap
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--lime);color:var(--navy);box-shadow:0 14px 34px rgba(168,242,53,.28)}
.btn-dark{background:var(--navy);color:#fff;box-shadow:0 14px 34px rgba(6,23,47,.20)}
.btn-ghost{background:rgba(255,255,255,.72);border:1px solid var(--border);color:var(--navy)}
.btn-soft{background:#e8eef0;color:var(--navy)}
.kicker{
  display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.94);
  box-shadow:0 10px 30px rgba(6,23,47,.06);color:var(--teal);font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase
}
.kicker:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 7px rgba(168,242,53,.18)}
.hero{padding:34px 0 70px}
.hero-card{
  position:relative;overflow:hidden;border-radius:44px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow);
  padding:32px;
}
.hero-card:after{
  content:"";position:absolute;right:-130px;top:-130px;width:620px;height:620px;background:url("../assets/brand/recurso-grafico-iluminia.png") center/contain no-repeat;opacity:.13;pointer-events:none
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:32px;align-items:stretch;min-height:640px}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:28px 0 28px 24px}
h1{font-size:clamp(62px,8.4vw,118px);line-height:.88;letter-spacing:calc(-.08em * var(--oxigeno-titulares,1));margin:18px 0;color:var(--navy)}
.lead{font-size:clamp(19px,2vw,25px);line-height:1.33;color:#21364f;max-width:680px;margin:0 0 22px}
.philosophy{
  max-width:690px;margin:0 0 26px;padding:20px 22px;border-radius:22px;background:rgba(255,255,255,.78);border-left:4px solid var(--lime);
  box-shadow:var(--shadow-soft);font-size:17px;line-height:1.48;color:#30455e
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px;max-width:740px}
.hero-path{
  display:grid;gap:8px;padding:18px;border-radius:22px;background:rgba(6,23,47,.055);border:1px solid rgba(6,23,47,.055);transition:.2s ease
}
.hero-path:hover{transform:translateY(-3px);background:rgba(255,255,255,.78);box-shadow:var(--shadow-soft)}
.hero-path strong{font-size:17px;color:var(--navy)}
.hero-path span{font-size:13px;color:var(--muted);line-height:1.35}
.hero-media{
  position:relative;border-radius:34px;overflow:hidden;background:var(--navy);min-height:600px;box-shadow:0 26px 70px rgba(6,23,47,.24)
}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-chips{position:absolute;inset:22px 22px auto;z-index:2;display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start;max-width:78%}
.hero-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(6,23,47,.34);border:1px solid rgba(255,255,255,.30);backdrop-filter:blur(10px);color:#fff;font-size:13px;font-weight:800;letter-spacing:.01em;white-space:nowrap;box-shadow:0 18px 40px rgba(6,23,47,.22);transform:rotate(var(--tilt,0deg))}
.hero-chip:before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.hero-chip--lime:before{background:var(--lime);box-shadow:0 0 0 5px rgba(168,242,53,.22)}
.hero-chip--cyan:before{background:var(--cyan);box-shadow:0 0 0 5px rgba(89,209,202,.22)}
.hero-chip--mint:before{background:var(--mint);box-shadow:0 0 0 5px rgba(191,231,196,.22)}
.media-panel{
  position:absolute;left:22px;right:22px;bottom:22px;display:grid;gap:10px
}
.media-line{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.10);
  color:#fff;border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(12px);font-size:14px
}
.section{padding:94px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:34px}
.section-head h2{font-size:clamp(40px,5vw,70px);line-height:.95;letter-spacing:calc(-.06em * var(--oxigeno-titulares,1));margin:14px 0 0;color:var(--navy);max-width:800px}
.section-head p{max-width:430px;margin:0;color:var(--muted);font-size:18px;line-height:1.48}
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.path-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:32px;background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.95);
  box-shadow:var(--shadow-soft);padding:26px;min-height:470px
}
.path-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:7px;background:var(--accent)}
.path-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.path-icon{width:50px;height:50px;border-radius:16px;background:rgba(6,23,47,.06);display:grid;place-items:center;color:var(--teal)}
.path-title small{display:block;color:#536780;font-weight:850;margin-bottom:6px}
.path-title h3{font-size:34px;line-height:1;letter-spacing:calc(-.045em * var(--oxigeno-titulares,1));margin:0;color:var(--navy)}
.path-card p{font-size:17px;line-height:1.45;color:#536780;margin:0 0 18px}
.path-card ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:9px}
.path-card li{display:flex;align-items:flex-start;gap:9px;color:#314761;line-height:1.35;font-size:15px}
.path-card .btn{margin-top:auto;width:100%}
.photo-band{
  position:relative;overflow:hidden;border-radius:34px;min-height:430px;background:var(--navy);box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;align-items:stretch
}
.photo-band img{width:100%;height:100%;object-fit:cover;opacity:.82}
.photo-copy{padding:42px;display:flex;flex-direction:column;justify-content:center;color:#fff}
.photo-copy h2{font-size:clamp(42px,5.2vw,72px);line-height:.92;letter-spacing:calc(-.06em * var(--oxigeno-titulares,1));margin:16px 0}
.photo-copy p{font-size:18px;line-height:1.48;color:rgba(255,255,255,.75);max-width:550px}
.checks{display:grid;gap:12px;margin-top:22px}
.check{display:flex;align-items:flex-start;gap:10px;color:rgba(255,255,255,.86);line-height:1.4}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{padding:26px;border-radius:28px;background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow-soft)}
.step b{display:inline-flex;width:42px;height:42px;border-radius:999px;background:var(--navy);color:#fff;align-items:center;justify-content:center;margin-bottom:18px}
.step h3{font-size:25px;line-height:1;margin:0 0 10px;letter-spacing:calc(-.04em * var(--oxigeno-titulares,1))}
.step p{color:#536780;line-height:1.45;margin:0;font-size:15px}
.form-wrap{display:grid;grid-template-columns:.86fr 1.14fr;gap:26px;align-items:stretch}
.info-card,.form-card{border-radius:32px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow-soft);padding:30px}
.info-card h2{font-size:clamp(38px,4.4vw,58px);line-height:.95;letter-spacing:calc(-.06em * var(--oxigeno-titulares,1));margin:16px 0;color:var(--navy)}
.info-card p{color:#536780;line-height:1.5;font-size:17px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.field,.textarea{width:100%;border:1px solid #dae6e8;background:#f4f8f8;border-radius:16px;padding:15px 16px;color:#52667b}
.textarea{min-height:112px;resize:vertical}
.upload{border:2px dashed rgba(22,122,118,.26);border-radius:20px;background:#fbfdfd;text-align:center;padding:24px;color:#536780;margin:12px 0;display:grid;place-items:center;gap:8px}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.footer{margin-top:90px;background:var(--navy);color:#fff;padding:54px 0 34px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.footer-logo{height:48px;width:auto;margin-bottom:20px}
.footer h2{font-size:46px;line-height:.95;letter-spacing:calc(-.055em * var(--oxigeno-titulares,1));margin:0 0 14px}
.footer p{color:rgba(255,255,255,.68);line-height:1.48}
.footer-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.footer-card{border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.06);border-radius:20px;padding:18px}
.footer-card strong{display:block;margin-bottom:7px}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.52);font-size:14px}
.page-hero{padding:42px 0 54px}
.page-card{position:relative;overflow:hidden;border-radius:42px;background:linear-gradient(135deg,var(--navy),#07305e);padding:58px;color:#fff;box-shadow:var(--shadow)}
.page-card:after{content:"";position:absolute;right:-140px;top:-140px;width:600px;height:600px;background:url("../assets/brand/recurso-grafico-iluminia.png") center/contain no-repeat;opacity:.16}
.page-card h1{position:relative;z-index:2;color:#fff;max-width:880px}
.page-card p{position:relative;z-index:2;max-width:760px;color:rgba(255,255,255,.76);font-size:21px;line-height:1.42}
/* El contenido solo se oculta si el JS está vivo y va a poder mostrarlo.
   Si el JS tarda, falla o está desactivado, todo se ve desde el primer
   frame: la animación es un adorno, nunca un requisito para leer. */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .62s ease,transform .62s ease}
.js .reveal.show{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}
@media(max-width:1080px){
  .nav-links{display:none;position:absolute;z-index:100;left:0;right:0;top:calc(100% + 12px);padding:18px;border-radius:24px;background:#fff;box-shadow:var(--shadow-soft);border:1px solid #fff;flex-direction:column;align-items:stretch}
  .nav-links.open{display:flex}.menu{display:block}
  .hero-grid,.photo-band,.form-wrap,.footer-grid{grid-template-columns:1fr}
  .hero-media{min-height:430px}
  .paths,.process{grid-template-columns:1fr 1fr}
  .section-head{display:block}.section-head p{margin-top:16px}
}
@media(max-width:720px){
  .container{width:min(var(--container),calc(100% - 24px))}
  .brand-logo{height:28px;max-width:188px}
  .nav-actions .btn{display:none}
  .hero-card{padding:18px;border-radius:30px}
  .hero-copy{padding:10px 2px 0}
  h1{font-size:52px}
  .lead{font-size:18px}
  .hero-paths,.paths,.process,.form-row,.footer-cards{grid-template-columns:1fr}
  .hero-media{min-height:340px;border-radius:26px}
  .media-panel{left:14px;right:14px;bottom:14px}
  .hero-chips{inset:14px 14px auto;max-width:none;width:calc(100% - 28px);gap:8px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .hero-chips::-webkit-scrollbar{display:none}
  .hero-chip{padding:8px 13px;font-size:12px;flex:none}
  .section{padding:72px 0}
  .section-head h2,.photo-copy h2,.info-card h2{font-size:40px}
  .photo-copy{padding:28px}
  .form-actions,.hero-actions{display:grid}
  .btn{width:100%}
  .page-card{padding:30px;border-radius:30px}
  .footer-bottom{display:block}
}

/* Formularios conectados */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.upload{display:block;cursor:pointer}
.upload input[type=file]{display:block;width:100%;margin-top:10px;font:inherit;font-size:14px;color:var(--muted)}
.form-aviso{margin:14px 0 0;font-size:15px;line-height:1.45}
.form-aviso:empty{display:none}
.form-aviso.ok{color:var(--teal);font-weight:600}
.form-aviso.error{color:#b3261e;font-weight:600}
.form-card button[disabled]{opacity:.6;cursor:progress}

/* Página legal: texto corrido, no tarjetas. Ancho de lectura cómodo
   (65-70 caracteres por línea aprox) en vez del ancho completo del
   contenedor, que en pantallas grandes haría las líneas ilegibles. */
.legal-doc{max-width:760px;margin:0 auto;color:var(--text)}
.legal-doc h2{font-size:26px;letter-spacing:-.02em;color:var(--navy);margin:44px 0 14px}
.legal-doc h2:first-of-type{margin-top:0}
.legal-doc p{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 14px}
.legal-doc ul{margin:0 0 14px;padding-left:22px;color:var(--muted);font-size:16px;line-height:1.6}
.legal-doc li{margin-bottom:6px}
.legal-doc a{color:var(--teal);font-weight:700;text-decoration:underline}
.legal-datos{list-style:none;padding:0;background:#fbfdfd;border:1px solid var(--border);border-radius:18px;padding:18px 22px}
.legal-datos strong{color:var(--navy)}
.legal-datos em{opacity:.7;font-style:italic}
.legal-aviso{background:rgba(168,242,53,.14);border:1px solid rgba(22,122,118,.18);border-radius:14px;padding:12px 16px;font-size:14px;color:var(--teal);font-weight:700;margin-bottom:28px}
.legal-fecha{font-size:14px;color:var(--muted);opacity:.7;margin-top:40px}

/* ==========================================================
   HERO A SANGRE COMPLETA CON FOTO REAL — Empresas, Comerciales,
   Red-comercial. Mismo patrón que sitio/particulares/depth.css,
   adaptado a página normal sin motor de scroll: aquí no hace falta
   el truco de position:absolute contra .depth-plane, el <header>
   simplemente no lleva la clase .container, así que ya nace a ancho
   completo — el contenido de texto se reintroduce el .container por
   dentro, para no perder el ancho de lectura.
   ========================================================== */

.hero-foto{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:min(760px,92vh);
  display:flex;
  align-items:center;
  color:#fff;
  margin-top:-14px;
}

.hero-foto__fondo{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-foto__fondo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:60% 30%;
}

.hero-foto__fondo:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(100deg, rgba(6,23,47,.96) 0%, rgba(6,23,47,.88) 34%, rgba(6,23,47,.48) 62%, rgba(6,23,47,.12) 88%),
    linear-gradient(0deg, rgba(6,23,47,.5), transparent 42%);
}

.hero-foto .container{
  position:relative;
  z-index:2;
  padding-top:120px;
  padding-bottom:70px;
}

.hero-foto-copy{
  max-width:640px;
}

.hero-foto-copy__h1{
  color:#fff;
  font-size:clamp(44px,6vw,84px);
}

.kicker--oscuro{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  color:var(--mint);
}
.kicker--oscuro:before{ background:var(--lime); }

.lead--oscuro{ color:rgba(255,255,255,.82); }

.philosophy--oscuro{
  background:rgba(255,255,255,.08);
  border-left-color:var(--lime);
  color:rgba(255,255,255,.86);
  backdrop-filter:blur(6px);
}

.btn-ghost-oscuro{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:14px 20px;
  font-weight:850;background:rgba(255,255,255,.08);color:#fff;
}
.btn-ghost-oscuro:hover{ background:rgba(255,255,255,.16); }

.hero-foto .hero-chips{
  position:relative;
  inset:auto;
  margin-top:26px;
  max-width:none;
}

@media (max-width:720px){
  .hero-foto{ min-height:auto; padding-bottom:20px; }
  .hero-foto .container{ padding-top:110px; }
  .hero-foto-copy__h1{ font-size:clamp(38px,11vw,56px); }
  .hero-foto .hero-chips{
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .hero-foto .hero-chips::-webkit-scrollbar{ display:none; }
}

/* ==========================================================
   BANDAS A SANGRE COMPLETA — Empresas, Comerciales, Red-comercial.
   Mismo lenguaje que las escenas oscuras de Particulares
   (sitio/particulares/depth.css): fondo navy con degradado radial,
   contenido centrado en .container, sin tarjeta ni borde redondeado.
   Antes estas páginas volvían al sistema de tarjetas en cuanto se
   salía del hero — esto extiende el mismo ritmo hasta el final.
   ========================================================== */

.band{ padding:100px 0 }

.band-dark{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#fff;
}
.band-dark:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 12%, rgba(168,242,53,.14), transparent 34%),
    radial-gradient(circle at 90% 88%, rgba(89,209,202,.13), transparent 38%);
}
.band-dark .container{ position:relative; z-index:1 }
.band-dark .kicker{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  color:var(--mint);
}
.band-dark .kicker:before{ background:var(--lime) }
.band-dark .section-head h2{ color:#fff }
.band-dark .section-head p{ color:rgba(255,255,255,.66) }

/* Contenido centrado, de lectura, para las bandas que no son un grid
   (la franja de filosofía entre el checklist y la foto). */
.band-copy{ max-width:760px; margin:0 auto; text-align:center }
.band-copy .kicker{ margin-bottom:16px }
.band-copy h2{
  font-size:clamp(38px,4.8vw,62px);
  line-height:.98;
  letter-spacing:calc(-.05em * var(--oxigeno-titulares,1));
  margin:0 0 16px;
  color:#fff;
}
.band-copy p{ font-size:18px; line-height:1.5; color:rgba(255,255,255,.72); margin:0 0 30px }
.band-copy .checks{
  display:grid;
  gap:12px;
  max-width:520px;
  margin:0 auto;
  text-align:left;
}
.band-copy .check{
  padding:14px 18px;
  border-radius:16px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}

/* Foto a sangre completa con copy superpuesto — mismo patrón que
   .depth-photo en Particulares, sin depender de ningún motor JS. */
.band-photo{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:560px;
  display:flex;
  align-items:flex-end;
  color:#fff;
}
.band-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}
.band-photo:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(100deg, rgba(6,23,47,.92) 0%, rgba(6,23,47,.7) 30%, rgba(6,23,47,.28) 62%, rgba(6,23,47,.08) 88%),
    linear-gradient(0deg, rgba(6,23,47,.6), transparent 46%);
}
.band-photo .container{ padding:60px 0 }
.band-photo .kicker{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  color:var(--mint);
}
.band-photo .kicker:before{ background:var(--lime) }
.band-photo h2{
  font-size:clamp(38px,5vw,62px);
  line-height:.98;
  letter-spacing:calc(-.05em * var(--oxigeno-titulares,1));
  margin:16px 0;
  color:#fff;
  max-width:640px;
}
.band-photo p{ font-size:18px; line-height:1.5; color:rgba(255,255,255,.78); max-width:540px; margin:0 0 22px }
.band-photo .checks{ max-width:460px }
.band-photo .check{ color:rgba(255,255,255,.9) }

/* Los iconos de check son <img src=".svg">, no SVG inline: currentColor
   no hereda el blanco del texto y se quedan negros, casi invisibles
   sobre fondo oscuro. Se fuerzan a blanco con un filtro. */
.band-dark .check img,
.band-copy .check img,
.band-photo .check img{
  filter:brightness(0) invert(1);
}

/* Proceso dentro de una banda oscura: las tarjetas pasan de blancas
   a translúcidas sobre el navy, igual que .process-node en
   Particulares. */
.band-dark .process{ margin-top:6px }
.band-dark .step{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  box-shadow:none;
}
.band-dark .step b{ background:var(--lime); color:var(--navy) }
.band-dark .step h3{ color:#fff }
.band-dark .step p{ color:rgba(255,255,255,.66) }

/* El checklist claro que se queda junto al hero — antes .profile-grid
   no tenía ninguna regla y se veía como texto plano sin tarjeta. */
.info-panel{
  border-radius:32px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:var(--shadow-soft);
  padding:38px;
  max-width:720px;
  margin:0 auto;
}
.info-panel > .kicker{ margin-bottom:14px }
.info-panel h2{
  font-size:clamp(30px,3.6vw,42px);
  line-height:1.02;
  letter-spacing:calc(-.04em * var(--oxigeno-titulares,1));
  margin:0 0 12px;
  color:var(--navy);
}
.info-panel p{ color:var(--muted); line-height:1.5; margin:0 0 20px }
.info-panel ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.info-panel li{ display:flex; align-items:flex-start; gap:10px; color:#30455e; line-height:1.4; font-size:15px }

@media (max-width:900px){
  .band{ padding:64px 0 }
  .band-photo{ min-height:auto }
  .band-copy p, .band-photo p{ font-size:16px }
  .info-panel{ padding:26px }
}

/* ==========================================================
   MARCA NATURGY — solo Comerciales y Red-comercial, donde
   trabajamos como colaboradores suyos. Particulares y Empresas se
   quedan con la identidad propia de Iluminia, sin mezclar.
   Logo extraído directamente del manual oficial de marca de Naturgy
   (Guía básica de estilo y aplicación de marca, V8, feb. 2023) — no
   de agregadores de terceros. 85px/16mm es su tamaño mínimo para la
   versión principal; aquí se usa muy por encima de eso, con espacio
   de separación generoso a cada lado. El texto reutiliza la
   etiqueta que el propio manual de Naturgy usa para este tipo de
   relación ("Empresa colaboradora de Naturgy"), sin añadir ningún
   estatus legal que no esté confirmado por su acuerdo de partner.
   ========================================================== */
.naturgy-band{
  padding:52px 0;
  background:var(--ice);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.naturgy-band__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
  text-align:center;
}
.naturgy-band__logo{
  height:96px;
  width:auto;
  display:block;
}
.naturgy-band__texto{
  font-size:14px;
  font-weight:800;
  letter-spacing:.03em;
  color:var(--muted);
  margin:0;
  text-transform:uppercase;
}
@media (max-width:600px){
  .naturgy-band{ padding:36px 0 }
  /* 85px es el mínimo del manual para la versión principal — no se
     baja de ahí ni siquiera en móvil. */
  .naturgy-band__logo{ height:85px }
}