/* ===== Páginas interiores en el mismo estilo claro que la portada ===== */
body.claro { background: #EEF0F3; color: var(--tinta); }
body.claro h1, body.claro h2, body.claro h3 { font-family: var(--ui); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; font-variation-settings: normal; color: var(--tinta); }
body.claro .t0 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); }
body.claro .t1 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
body.claro .sobre, body.claro .sobre--claro { color: var(--teal); font-weight: 700; }
body.claro .lead, body.claro .lead--claro { color: var(--gris); }
body.claro .enlace, body.claro .enlace--claro { color: var(--tinta); }
body.claro .migas { color: var(--gris); }

/* cabecera flotante: pastilla blanca */
body.claro .cab__pill { background: rgba(255,255,255,.75); border-color: rgba(22,26,34,.08); box-shadow: 0 10px 40px -24px rgba(0,0,0,.35); }
body.claro .cab--pegada .cab__pill { background: rgba(255,255,255,.92); }
body.claro .logo, body.claro .logo__word { color: var(--tinta); }
body.claro .nav > a { color: var(--tinta); }
body.claro .nav > a:hover { background: rgba(22,26,34,.06); }
body.claro .nav > a[aria-current] { background: rgba(22,26,34,.08); color: var(--tinta); }
body.claro .nav__lang { color: var(--gris); opacity: 1; }
body.claro .burger span { background: var(--tinta); }
body.claro .btn--acento { background: var(--teal); color: #fff; }
body.claro .btn--acento:hover { background: var(--tinta); color: #fff; }
body.claro .btn--fantasma { background: transparent; border-color: rgba(22,26,34,.25); color: var(--tinta); }
body.claro .card--empresa .btn--fantasma, body.claro .card--cta .btn--fantasma { border-color: rgba(255,255,255,.35); color: #fff; }

/* tarjetas: todas claras salvo las de empresa (foto) y la de llamada a la acción */
body.claro .card--claro { background: #fff; }
body.claro .card--slate, body.claro .card--petroleo, body.claro .card--teal { background: #fff; color: var(--tinta); }
body.claro .card--slate { background: linear-gradient(170deg, #fff, #F3F5F8); }
body.claro .card--teal { background: radial-gradient(900px 500px at 90% 0%, rgba(31,138,158,.14), transparent 60%), #fff; }
body.claro .card--petroleo { background: radial-gradient(900px 500px at 10% 100%, rgba(31,138,158,.16), transparent 60%), #F6F8FA; }
body.claro .card--cta { background: radial-gradient(700px 400px at 50% 110%, color-mix(in srgb, var(--c, var(--teal-claro)) 55%, transparent), transparent 70%), linear-gradient(170deg, #1B2233, #0E1119); }
body.claro .card--cta h2, body.claro .card--cta .t0, body.claro .card--cta .t1 { color: #fff; }
body.claro .card--cta .lead { color: rgba(255,255,255,.74); }
body.claro .card--cta .btn--acento { background: var(--acento); color: #1A1400; }
body.claro .card--empresa h1, body.claro .card--empresa h2, body.claro .card--empresa h3, body.claro .card--empresa .t0 { color: #fff; }
body.claro .card--empresa .lead { color: rgba(255,255,255,.78); }
body.claro .card--empresa .migas { color: rgba(255,255,255,.65); }
body.claro .card--empresa .btn--acento { background: #fff; color: var(--tinta); }
body.claro .card--empresa .btn--acento:hover { background: var(--tinta); color: #fff; }

/* bloques que estaban sobre fondo oscuro */
body.claro .compara__col--antes { background: rgba(22,26,34,.05); color: rgba(22,26,34,.6); }
body.claro .compara__col--antes h3 { color: var(--gris); }
body.claro .compara__col--antes li { border-color: rgba(22,26,34,.08); }
body.claro .compara__col--ahora { background: linear-gradient(160deg, rgba(31,138,158,.14), rgba(31,138,158,.04)); border-color: rgba(31,138,158,.3); color: var(--tinta); }
body.claro .compara__col--ahora h3, body.claro .compara__col--ahora li::before { color: var(--teal); }
body.claro .compara__col--ahora li { border-color: rgba(31,138,158,.15); }
body.claro .puntos li { background: #F6F8FA; box-shadow: none; }
body.claro .card--claro .puntos li { background: #F3F5F8; }
body.claro .puntos--rejilla li { background: #fff; border: 1px solid rgba(22,26,34,.08); box-shadow: 0 14px 40px -26px rgba(11,47,56,.25); }
body.claro .puntos--rejilla h3, body.claro .puntos h3 { color: var(--tinta); }
body.claro .puntos--rejilla p, body.claro .puntos p { color: var(--gris); }
body.claro .puntos__n, body.claro .puntos--rejilla .puntos__n { color: var(--teal); }
body.claro .soluciones li { background: #fff; border: 1px solid rgba(22,26,34,.08); box-shadow: 0 14px 40px -26px rgba(11,47,56,.25); }
body.claro .soluciones li:hover { background: #fff; }
body.claro .soluciones h3, body.claro .soluciones h2 { color: var(--tinta); }
body.claro .soluciones p { color: var(--gris); }
body.claro .soluciones__n { color: var(--teal); }
body.claro .soluciones__quien { color: var(--gris); }
body.claro .soluciones--lista li { background: #fff; }
body.claro .pasos__linea { background: rgba(22,26,34,.1); }
body.claro .pasos__linea::after { background: linear-gradient(90deg, var(--teal), var(--teal-claro)); }
body.claro .pasos__n { color: var(--teal); }
body.claro .pasos h3 { color: var(--tinta); }
body.claro .pasos p { color: var(--gris); }
body.claro .sectores li { background: #F3F5F8; }
body.claro .sectores li:hover { background: var(--tinta); color: #fff; }
body.claro .servicios li { background: #F6F8FA; }
body.claro .otra { background: #fff; border-color: rgba(22,26,34,.08); color: var(--tinta); box-shadow: 0 14px 40px -26px rgba(11,47,56,.25); }
body.claro .otra:hover { background: #fff; transform: translateY(-4px); }
body.claro .otra span { color: var(--gris); }
body.claro .contacto__lado { color: var(--tinta); }
body.claro .contacto__lado dt { color: var(--gris); }
body.claro .contacto__lado a { color: var(--teal); }
body.claro .tarjeta { box-shadow: 0 30px 60px -36px rgba(11,47,56,.35); border: 1px solid rgba(22,26,34,.06); }
body.claro .chip--claro { color: #fff; }
body.claro .card--claro .chips .chip, body.claro .card--teal .chips .chip { background: color-mix(in srgb, var(--c, var(--teal)) 12%, #fff); }

/* pie claro */
body.claro .pie { color: var(--gris); }
body.claro .pie__col h4 { color: var(--tinta); }
body.claro .pie__col a, body.claro .pie__marca p { color: var(--gris); }
body.claro .pie__col a:hover { color: var(--tinta); }
body.claro .pie__bajo { border-color: rgba(22,26,34,.1); color: var(--gris); }
body.claro .pie .logo__mark path { stroke: var(--teal); }
body.claro .pie .btn--acento { background: var(--teal); color: #fff; }

/* menú móvil claro */
@media (max-width: 900px) {
  body.claro .nav { background: #fff; border-color: rgba(22,26,34,.08); box-shadow: 0 30px 60px -30px rgba(0,0,0,.4); }
}

/* botones antiguos → estilo pastilla */
body.claro .btn { font-family: var(--ui); }
body.claro .btn--grande { padding: .95rem 1.7rem; }
body.claro .lead { font-size: clamp(.98rem, 1.15vw, 1.1rem); }