/* ============================================================
   Landings de aliados y domis en tema CLARO (15-oct-2026)
   Marca ÑAM: fondo claro, tinta #1A1A1D, un solo acento rojo.
   Se carga DESPUÉS del <style> de cada página y solo actúa con body.claro:
   convierte las secciones .dark en claras sin tocar su HTML. Las tarjetas
   oscuras (flowcard, cmp, rcol.plat) se quedan como acento de contraste.
   ============================================================ */
body.claro{background:#fff}

/* Secciones que eran oscuras */
.claro .sec.dark{background:#fff;color:var(--ink)}
.claro .sec.dark:first-of-type,.claro .sec.dark.hero{background:linear-gradient(180deg,#FFF3F1 0%,#FFFFFF 78%)}
.claro .sec.dark.alt{background:var(--paper)}
.claro .dark .eyebrow{color:var(--rojo-d)}
.claro .dark .lead,.claro .dark .model-sub,.claro .dark .cap,.claro .dark .stp p{color:var(--gris)}
.claro .dark .lead b,.claro .dark .model-sub b{color:var(--ink)}
.claro .dark .punch em{color:var(--rojo-d)}
.claro .dark h1 span,.claro .dark h2 span{color:var(--rojo)}
.claro .slogan b{color:var(--rojo-d)}
.claro .slogan span,.claro .scrollcue{color:var(--gris)}
.claro .reg-min{color:var(--rojo-d)}

/* Botones del hero */
.claro .hero-reg{background:var(--rojo);color:#fff;box-shadow:0 14px 28px -14px rgba(216,52,41,.7)}
.claro .hero-reg:hover{background:var(--rojo-d)}
.claro .btn-ghost{color:var(--ink);border-color:rgba(26,26,29,.22);background:#fff}
.claro .topnav a{color:var(--gris)}
.claro .topnav a:hover{color:var(--rojo-d)}

/* Chips, píldoras, marquesina */
.claro .pill{background:#fff;border:1px solid var(--linea);color:var(--ink);box-shadow:0 4px 12px rgba(20,20,25,.05)}
.claro .pill .i{color:var(--rojo)}
.claro .chip{background:var(--verde-soft);border-color:#CBE9D5;color:#0E5C2E}
.claro .mq-i{background:#fff;border-color:var(--linea);color:var(--ink);box-shadow:0 4px 12px rgba(20,20,25,.05)}
.claro .dark details.fold summary{background:#fff;border-color:var(--linea);color:var(--gris)}

/* Logo sin sombra roja de pantalla oscura */
.claro .hero-logo{filter:none}

/* Caja de comisión de /aliados/ */
.claro .split.charla{background:#fff;border:1px solid var(--linea);box-shadow:0 18px 40px -24px rgba(20,20,25,.3)}
.claro .split .k{color:var(--rojo-d)}
.claro .charla .charla-p{color:var(--gris)}
.claro .charla .charla-p b{color:var(--ink)}
.claro .charla .charla-n{color:var(--gris)}
.fee{font-size:clamp(44px,8vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--rojo-d);margin:8px 0 8px}
.fee span{font-size:.42em;letter-spacing:-.01em;color:var(--ink);font-weight:700;margin-left:2px}
.feelist{list-style:none;margin:16px 0 4px;padding:0}
.feelist li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;font-size:14px;font-weight:600;color:var(--ink);border-top:1px solid var(--linea)}
.feelist li:first-child{border-top:0}
.feelist .i{color:var(--verde);width:17px;height:17px;margin-top:3px;flex:none}

/* Rejilla de beneficios */
.claro .benefgrid .bg-item{box-shadow:0 6px 16px rgba(20,20,25,.05)}
@media(max-width:560px){.claro .benefgrid{grid-template-columns:minmax(0,1fr)}}

/* Enlace de descarga de la app dentro de la tarjeta de contacto */
.appdl{margin-top:16px;display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border-radius:12px;background:var(--rojo-soft);color:var(--rojo-d);text-decoration:none;font-size:12.5px;font-weight:500;line-height:1.35}
.appdl .i{width:22px;height:22px;flex:none}
.appdl b{display:block;font-size:14px;font-weight:800;color:var(--ink)}
.appdl:hover{background:#F9DCDA}

/* Tarjeta de descarga (negocios / aliados) */
.dlbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:28px;padding:20px 20px;border-radius:18px;background:#fff;border:1px solid var(--linea);box-shadow:0 12px 30px -20px rgba(20,20,25,.3)}
.dlbar p{flex:1 1 220px;font-size:14.5px;font-weight:500;color:var(--gris)}
.dlbar p b{display:block;color:var(--ink);font-size:16px;font-weight:800}
.dlbar .badges{display:flex;gap:12px;flex-wrap:wrap}
.dlbar .badges img{height:44px;width:auto}

/* Tarjeta «así queda un domicilio» (domiciliarios) */
.earn{background:#fff;border:1px solid var(--linea);border-radius:20px;padding:20px 24px 24px;box-shadow:0 24px 50px -26px rgba(20,20,25,.35);max-width:380px;width:100%}
.earn .t{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rojo-d)}
.earn .r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;font-size:14.5px;font-weight:600;color:var(--ink)}
.earn .r+.r{border-top:1px solid var(--linea)}
.earn .r small{display:block;font-size:12px;font-weight:500;color:var(--gris)}
.earn .r b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.earn .r.minus b{color:var(--gris)}
.earn .r.tot{background:var(--verde-soft);margin:8px -24px 0;padding:16px 24px;border-top:0;border-radius:0 0 19px 19px}
.earn .r.tot b{color:#0E5C2E;font-size:24px}
.earn .n{font-size:12px;color:var(--gris);margin-top:12px;line-height:1.4}
.herogrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px;align-items:center}
.herogrid .earn{justify-self:center}
@media(max-width:820px){.herogrid{grid-template-columns:minmax(0,1fr)}.herogrid .earn{justify-self:start}}
.claro .model-sub{color:var(--gris)}
.claro .model-sub b{color:var(--ink)}
.claro .cap{color:var(--gris)}
.claro .hero>.brand{display:none}
.claro #ir-registro{white-space:nowrap}
/* El validador y los lectores de pantalla leen el color de fondo plano: el degradado rojo necesita un color base */
.claro .sec.red{background-color:var(--rojo-d)}

/* ===== Ajustes de contrato de diseño (contraste, objetivos táctiles, lectura) ===== */
.claro .eyebrow,.claro .punch em{color:var(--rojo-d)}
.claro .cmp{color:#EDECEE}
.claro .cmp-row.new .cmp-v{color:#0E5C2E}
.claro .bignum{color:#0E7A38}
.claro .foot .r{color:#F0554A}
.claro .plan .tag{font-size:12px}
.claro>.brand,.claro .brand{display:none}
.claro .foot a,.claro .also,.claro .legalfoot a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.claro .topnav a{display:inline-flex;align-items:center;min-height:44px}
.claro .hp input{width:48px;height:48px;font-size:16px}
.claro .fld .hint,.claro #reg-form>.hint{font-size:12px!important}
.claro .stp h3{font-size:16px;font-weight:800;margin-bottom:4px;letter-spacing:-.02em}
@media(max-width:640px){.claro .stp h3{font-size:15px;margin-bottom:2px}}
.claro .legalbox p,.claro .qa p,.claro .vcard p{max-width:64ch}
.claro #reg-form .hint a,.claro .legalfoot .rs a{display:inline-flex;align-items:center;min-height:44px}
.claro .also{color:#fff}
.claro .foot a{min-width:44px;justify-content:center}
.claro .legalfoot a{min-width:44px}
.claro .topnav a{min-width:44px;justify-content:center}

/* v460: el rediseño claro sumó la caja de comisión (lista de 5) y objetivos
   táctiles de 44 px; en móvil se recupera el alto con espaciado, sin quitar texto
   (tope de la interventoría: aliados ≤6.000 px y domis ≤5.000 px a 390). */
@media(max-width:640px){
  .fee{font-size:40px;margin:4px 0}
  .feelist{margin:10px 0 0}
  .feelist li{padding:5px 0;font-size:13.5px;gap:10px;line-height:1.4}
  .claro .appdl{margin-top:10px;min-height:48px;padding:8px 12px}
  .claro .legalfoot .rs{line-height:1.5}
}

/* Los títulos no esperan a la animación para existir: con opacidad 0 hasta que
   entran en pantalla, un lector o un escaneo veía h1 → h3 (el h2 «invisible»
   y sus h3 sin .rv visibles). Se deslizan igual, pero nunca están transparentes. */
.claro :is(h1,h2).rv{opacity:1}