/* ============================================================
   REDCONAR — Sub-páginas de unidad  ·  estilos
   Extiende styles.css (mismos tokens, header, footer y botones)
   ============================================================ */

/* ---------- HEADER sobre hero oscuro ---------- */
/* arriba del todo: logo blanco+cyan + nav claro (el hero es azul oscuro) */
.header.on-dark .brand .rc-logo{color:var(--paper);}
.header.on-dark .nav a{color:var(--paper); opacity:.9;}
.header.on-dark .nav a::after{background:var(--ice);}
/* al scrollear, el header se vuelve claro: logo bicolor + nav oscuro */
.header.on-dark.scrolled .brand .rc-logo{color:var(--ink);}
.header.on-dark.scrolled .nav a{color:var(--ink); opacity:.85;}
.header.on-dark.scrolled .nav a::after{background:var(--cyan);}

/* logo como imagen (blanco sobre hero oscuro, oscuro al scrollear) — mismo tamaño que la home */
.header.on-dark .brand .logo-dark,
.header.on-dark .brand .logo-light{height:68px; width:auto; display:block;}
.header.on-dark .brand .logo-dark{display:none;}
.header.on-dark.scrolled .brand .logo-light{display:none;}
.header.on-dark.scrolled .brand .logo-dark{display:block;}
.footer-brand .logo-white{height:45px; width:auto; display:block;}
@media (max-width:1180px){
  .header.on-dark .brand .logo-dark,
  .header.on-dark .brand .logo-light{height:52px;}
}
@media (max-width:480px){
  .header.on-dark .brand .logo-dark,
  .header.on-dark .brand .logo-light{height:46px;}
}


/* ---------- TEMA POR UNIDAD (acentos del brandbook) ----------
   El acento es siempre highlight/secundario, nunca el fondo principal.
   Defaults = paleta de marca; cada clase de unidad sólo cambia variables. */
body.rc-type{
  --accent:      var(--cyan);    /* acento sobre fondo claro (íconos, eyebrows, pasos) */
  --accent-grad: var(--royal);   /* 2º stop del disco de paso numerado */
  --accent-hi:   #5cc6ec;        /* acento legible sobre fondo oscuro (hero, banda IA) */
  --hero-a: #0F112A;             /* gradiente hero / panel oscuro — stop superior */
  --hero-b: #01339F;             /* gradiente hero / panel oscuro — stop inferior */
  --halo:   rgba(46,162,218,.45);/* halo del hero */
  --cta-bg: var(--royal);        /* banda CTA */
}
/* Consorcios — Indian Blue #041162 */
body.t-consorcios{ --accent:#041162; --accent-grad:#123299; --accent-hi:#6BB0DD;
  --hero-a:#041162; --hero-b:#123299; --halo:rgba(83,160,213,.40); --cta-bg:#041162; }
/* Alquileres — Gypsy (coral) #C96D60 */
body.t-alquileres{ --accent:#BC5D50; --accent-grad:#C96D60; --accent-hi:#E5A093;
  --hero-a:#0F112A; --hero-b:#3A2230; --halo:rgba(201,109,96,.38); --cta-bg:var(--royal); }
/* Proveedores — Dark Plum #38143B */
body.t-proveedores{ --accent:#38143B; --accent-grad:#6E2A6E; --accent-hi:#CDA3D1;
  --hero-a:#38143B; --hero-b:#0F112A; --halo:rgba(199,155,203,.34); --cta-bg:#38143B; }
/* Sueldos — Turquoise #5CC7AC */
body.t-sueldos{ --accent:#1F9E86; --accent-grad:#0E6973; --accent-hi:#7FD9C4;
  --hero-a:#0F112A; --hero-b:#0E5A56; --halo:rgba(92,199,172,.40); --cta-bg:var(--royal); }
/* Capacitaciones — Campus / Atomic #324857 */
body.t-capacitaciones{ --accent:#324857; --accent-grad:#1F3340; --accent-hi:#9CC0D0;
  --hero-a:#1B2B36; --hero-b:#0F112A; --halo:rgba(156,192,208,.32); --cta-bg:#324857; }
/* Club Redconar — naranja del sistema #E87722 */
body.t-club{ --accent:#B45309; --accent-grad:#E87722; --accent-hi:#F3B27A;
  --hero-a:#2E1A08; --hero-b:#0F112A; --halo:rgba(232,119,34,.34); --cta-bg:#B45309; }
/* Gestoría — el brandbook no define color de módulo: queda en marca por defecto. */


/* ---------- HERO de unidad ---------- */
.u-hero{position:relative; overflow:hidden; color:var(--paper); padding:158px 0 92px;
  background:linear-gradient(160deg,var(--hero-a) 28%,var(--hero-b) 130%);}
.u-hero .wrap{position:relative; z-index:2; max-width:var(--maxw);}
.u-halo{position:absolute; right:-260px; top:-180px; width:780px; height:780px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side, var(--halo), transparent 70%);}
.u-breadcrumb{display:flex; align-items:center; gap:8px; font-size:14px; opacity:.78; margin-bottom:20px;}
.u-breadcrumb a{color:var(--ice);}
.u-breadcrumb a:hover{text-decoration:underline;}
.u-breadcrumb .material-symbols-rounded{font-size:16px; opacity:.6;}
.u-hero .eyebrow{color:var(--ice);}
.u-hero h1{font-size:58px; line-height:1.05; font-weight:700; letter-spacing:-.025em; max-width:880px; margin-top:14px;}
.u-hero h1 .hl{color:var(--accent-hi);}
.u-sub{font-size:22px; opacity:.92; margin-top:20px; max-width:700px;}
.u-hero .hero-cta{display:flex; gap:16px; margin-top:32px; flex-wrap:wrap;}
.u-chips{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px;}
.u-chip{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--r-btn);
  background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); font-size:15px;}
.u-chip strong{font-family:var(--font-display); font-weight:600;}
.u-chip .material-symbols-rounded{font-size:20px; color:var(--accent-hi);}

/* ---------- secciones genéricas ---------- */
.u-sec{padding:96px 0; position:relative; overflow:hidden;}
.u-sec-head{max-width:840px; margin:0 auto 52px; text-align:center;}
.u-sec-head .eyebrow{color:var(--accent);}
.u-sec-head h2{font-size:40px; line-height:1.1; font-weight:600; margin-top:12px;}
.u-sec-head p{font-size:20px; opacity:.72; margin-top:14px;}

/* ---------- dos columnas de beneficios ---------- */
.u-cols{display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:1000px; margin:0 auto;}
.u-panel{background:var(--white); border-radius:var(--r-lg); padding:36px 32px; color:var(--ink);
  box-shadow:var(--sh-card); border:1px solid rgba(15,17,42,.06);}
.u-panel.dark{background:linear-gradient(160deg,var(--hero-a) 30%,var(--hero-b) 130%); color:var(--paper); border:none;}
.u-panel h3{font-family:var(--font-sans); font-stretch:var(--sw); font-weight:700; font-size:22px; letter-spacing:0; margin-bottom:4px;}
.u-panel .u-panel-sub{font-size:16px; opacity:.7; margin-bottom:24px;}
.u-panel.dark .u-panel-sub{opacity:.82;}
.u-list{display:flex; flex-direction:column; gap:18px;}
.u-item{display:flex; gap:12px;}
.u-item .material-symbols-rounded{font-size:22px; color:var(--accent); flex:none; margin-top:1px;}
.u-panel.dark .u-item .material-symbols-rounded{color:var(--accent-hi);}
.u-item .t{font-weight:600; font-size:17px; line-height:1.3;}
.u-item .d{font-size:15px; opacity:.7; line-height:1.45; margin-top:3px;}
.u-panel.dark .u-item .d{opacity:.82;}

/* ---------- grilla de 3 features ---------- */
.u-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1060px; margin:0 auto;}
.u-grid.two{grid-template-columns:repeat(2,1fr); max-width:760px;}
.u-feat{background:var(--white); border-radius:16px; padding:32px 28px; box-shadow:var(--sh-card);
  border:1px solid rgba(15,17,42,.06); transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.u-feat:hover{transform:translateY(-6px); box-shadow:0 18px 36px rgba(15,17,42,.12);}
.u-feat .material-symbols-rounded{font-size:32px; color:var(--accent);}
.u-feat h3{font-size:20px; font-weight:700; font-family:var(--font-sans); font-stretch:var(--sw); letter-spacing:0; margin:14px 0 8px;}
.u-feat p{font-size:16px; opacity:.7; line-height:1.5;}

/* ---------- pasos numerados ---------- */
.u-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1000px; margin:0 auto; position:relative;}
.u-steps::before{content:""; position:absolute; top:23px; left:16%; right:16%; height:2px; z-index:0;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 50%, transparent), transparent);}
.u-step{position:relative; z-index:1; text-align:center; background:var(--white); border-radius:16px; padding:44px 26px 30px;
  box-shadow:var(--sh-card); border:1px solid rgba(15,17,42,.06);}
.u-step .n{position:absolute; top:-23px; left:50%; transform:translateX(-50%);
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--paper);
  background:linear-gradient(135deg,var(--accent),var(--accent-grad));
  box-shadow:0 8px 18px color-mix(in srgb, var(--accent) 42%, transparent); border:3px solid var(--paper);}
.u-step h3{font-size:20px; font-weight:700; font-family:var(--font-sans); font-stretch:var(--sw); letter-spacing:0; margin-bottom:8px;}
.u-step p{font-size:16px; opacity:.7; line-height:1.5;}

/* ---------- banda IA (oscura) ---------- */
.u-ia{background:var(--ink); color:var(--paper);}
.u-ia .u-sec-head h2,.u-ia .u-sec-head p{color:var(--paper);}
.u-ia .u-sec-head .eyebrow{color:var(--accent-hi);}
.u-ia .u-feat{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12); color:var(--paper);}
.u-ia .u-feat p{opacity:.8;}
.u-ia .u-feat .material-symbols-rounded{color:var(--accent-hi);}

/* ---------- incluye / garantías ---------- */
.u-incluye{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1000px; margin:0 auto;}
.u-inc{display:flex; gap:14px; align-items:flex-start; background:var(--white); border-radius:var(--r-md); padding:22px 24px;
  box-shadow:var(--sh-soft); border:1px solid rgba(15,17,42,.06);}
.u-inc .material-symbols-rounded{font-size:26px; color:var(--accent); flex:none;}
.u-inc strong{display:block; font-size:16px; margin-bottom:3px;}
.u-inc span{font-size:14px; opacity:.7; line-height:1.45;}

/* ---------- banda CTA ---------- */
.u-cta{background:var(--cta-bg); color:var(--paper); padding:84px 0; text-align:center;}
.u-cta h2{font-size:40px; font-weight:600; line-height:1.1;}
.u-cta p{font-size:20px; opacity:.92; margin:14px auto 0; max-width:640px;}
.u-cta .ct-btns{display:flex; gap:16px; justify-content:center; margin-top:30px; flex-wrap:wrap;}

/* ---------- otras unidades ---------- */
.u-related{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:8px;}
.u-related a{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:var(--r-btn);
  font-size:15px; font-weight:600; color:var(--ink); background:var(--white);
  box-shadow:var(--sh-soft); border:1px solid rgba(15,17,42,.06); transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
.u-related a:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(15,17,42,.12);}
.u-related a .material-symbols-rounded{font-size:19px; color:var(--accent);}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .u-cols,.u-grid,.u-grid.two,.u-incluye,.u-steps{grid-template-columns:1fr;}
  .u-grid.two{max-width:520px;}
  .u-steps{gap:40px;}
  .u-steps::before{display:none;}
}
@media (max-width:720px){
  .u-hero{padding:128px 0 64px;}
  .u-hero h1{font-size:34px;}
  .u-sub{font-size:19px;}
  .u-sec{padding:72px 0;}
  .u-sec-head h2,.u-cta h2{font-size:30px;}
}