/* ============================================================
   Dr Electro — drelectro.org.pe
   "El consultorio de tus electrodomésticos" · Lima Norte
   Hoja de estilos compartida
   ============================================================ */
:root{
  --azul:#0C71C3;--azul-osc:#103e8a;--azul-noche:#0b2447;
  --salud:#12b76a;--salud-osc:#087443;
  --alerta:#f79009;
  --tinta:#1f2733;--gris:#5b6472;--gris-cl:#f3f7fb;--linea:#e4ebf3;
  --wa:#25d366;--blanco:#fff;
  --radio:14px;--sombra:0 6px 22px rgba(16,62,138,.09);--sombra-fte:0 14px 36px rgba(16,62,138,.16);
  --max:1120px;--fuente:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fuente);color:var(--tinta);line-height:1.65;background:var(--blanco);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
.contenedor{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.seccion{padding:60px 0}
.seccion--gris{background:var(--gris-cl)}
h1,h2,h3{line-height:1.18;color:var(--azul-noche);font-weight:800}
h2.titulo{font-size:clamp(1.5rem,3.4vw,2.15rem);text-align:center;margin-bottom:8px}
.subtitulo{text-align:center;color:var(--gris);max-width:640px;margin:0 auto 38px;font-size:1.02rem}
.center{text-align:center}.kw{color:var(--azul)}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;border:none;cursor:pointer;
  padding:14px 24px;border-radius:999px;font-size:1rem;transition:.18s transform,.18s box-shadow;line-height:1}
.btn:hover{transform:translateY(-2px)}
.btn--tel{background:var(--azul);color:#fff;box-shadow:0 8px 20px rgba(12,113,195,.32)}
.btn--wa{background:var(--wa);color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.32)}
.btn--salud{background:var(--salud);color:#fff;box-shadow:0 8px 20px rgba(18,183,106,.32)}
.btn--fantasma{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)}
.btn svg{width:20px;height:20px;fill:currentColor;flex:none}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 20px;max-width:var(--max);margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.26rem;color:var(--azul-noche)}
.logo__marca{color:var(--azul)}
.logo__chip{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--azul),var(--azul-osc));color:#fff}
.logo__chip svg{width:24px;height:24px;fill:#fff}
.logo small{display:block;font-size:.62rem;font-weight:600;color:var(--gris);letter-spacing:.5px;margin-top:-2px}
.header__acc{display:flex;align-items:center;gap:10px}
.header__tel{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--azul-osc);white-space:nowrap}
.header__tel svg{width:18px;height:18px;fill:var(--azul)}
@media(max-width:640px){.header__tel span{display:none}}

/* Hero */
.hero{position:relative;color:#fff;overflow:hidden;background:radial-gradient(1100px 460px at 82% -20%,#1e5fb0 0,transparent 60%),linear-gradient(135deg,var(--azul-noche),var(--azul-osc))}
.hero__in{padding:56px 20px 52px;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hero__badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);padding:7px 15px;border-radius:999px;font-size:.85rem;font-weight:600;margin-bottom:16px}
.hero__badge b{color:#8fe0b6}
.hero h1{color:#fff;font-size:clamp(1.8rem,4.4vw,2.85rem);margin-bottom:14px}
.hero h1 em{font-style:normal;color:#8fd0ff}
.hero p{color:#d9e6f6;font-size:1.06rem;margin-bottom:24px;max-width:520px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__stage{display:grid;place-items:center}
@media(max-width:840px){.hero__in{grid-template-columns:1fr;gap:22px}.hero__stage{order:-1}}

/* Mascota (personaje SVG) */
.mascota{width:min(320px,80vw);height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.25))}
.humo{animation:subir 3s ease-in-out infinite}
.humo2{animation:subir 3s ease-in-out .8s infinite}
@keyframes subir{0%{opacity:.15;transform:translateY(4px)}50%{opacity:.75;transform:translateY(-6px)}100%{opacity:.15;transform:translateY(4px)}}
.tiembla{animation:tiembla 0.4s ease-in-out infinite}
@keyframes tiembla{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}

/* Franja confianza */
.trust{background:var(--salud);color:#fff}
.trust__in{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;padding:14px 20px;max-width:var(--max);margin:0 auto}
.trust__it{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.94rem}
.trust__it svg{width:20px;height:20px;fill:#fff;flex:none}

/* ===== AUTODIAGNÓSTICO ===== */
.dx{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--linea);border-radius:20px;box-shadow:var(--sombra-fte);overflow:hidden}
.dx__top{background:linear-gradient(135deg,var(--azul),var(--azul-osc));color:#fff;padding:20px 24px;display:flex;align-items:center;gap:14px}
.dx__top svg{width:34px;height:34px;fill:#fff;flex:none}
.dx__top h3{color:#fff;font-size:1.18rem;margin-bottom:2px}
.dx__top p{color:#cfe0f5;font-size:.9rem}
.dx__body{padding:24px}
.dx__paso{font-size:.82rem;font-weight:700;color:var(--azul);text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px}
.dx__pregunta{font-size:1.2rem;font-weight:800;color:var(--azul-noche);margin-bottom:18px}
.dx__ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.dx__op{display:flex;align-items:center;gap:11px;text-align:left;background:#fff;border:1.5px solid var(--linea);border-radius:12px;padding:14px 16px;
  font-size:.97rem;font-weight:600;color:var(--tinta);cursor:pointer;transition:.15s}
.dx__op:hover{border-color:var(--azul);background:#f2f8ff;transform:translateY(-2px)}
.dx__op .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#e8f2ff;flex:none}
.dx__op .ic svg{width:22px;height:22px;fill:var(--azul-osc)}
.dx__op--si .ic{background:#e6f7ef}.dx__op--si .ic svg{fill:var(--salud-osc)}
.dx__op--no .ic{background:#fdeede}.dx__op--no .ic svg{fill:var(--alerta)}
.dx__result{text-align:center;padding:6px}
.dx__result .cara{width:120px;margin:0 auto 8px}
.dx__tag{display:inline-block;background:#e6f7ef;color:var(--salud-osc);font-weight:700;font-size:.82rem;padding:5px 14px;border-radius:999px;margin-bottom:12px}
.dx__result h4{font-size:1.28rem;color:var(--azul-noche);margin-bottom:10px}
.dx__result p{color:var(--gris);max-width:520px;margin:0 auto 20px}
.dx__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.dx__reset{background:none;border:none;color:var(--azul);font-weight:700;cursor:pointer;margin-top:16px;font-size:.92rem}
.dx__reset:hover{text-decoration:underline}
.dx__crumbs{font-size:.84rem;color:var(--gris);margin-bottom:14px}

/* Grid tarjetas */
.grid{display:grid;gap:18px}
.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid--3,.grid--4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:22px;box-shadow:var(--sombra);transition:.18s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sombra-fte)}
.card__ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:13px;background:#e8f2ff}
.card__ic svg{width:26px;height:26px;fill:none;stroke:var(--azul-osc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.04rem;margin-bottom:6px}.card p{color:var(--gris);font-size:.94rem}

/* Pasos */
.pasos{counter-reset:paso;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:820px){.pasos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.pasos{grid-template-columns:1fr}}
.paso{position:relative;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:24px 20px 20px;box-shadow:var(--sombra)}
.paso::before{counter-increment:paso;content:counter(paso);position:absolute;top:-16px;left:20px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--salud),var(--salud-osc))}
.paso h3{font-size:1.02rem;margin:10px 0 5px}.paso p{color:var(--gris);font-size:.92rem}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.chip{background:#fff;border:1px solid var(--linea);border-radius:999px;padding:8px 16px;font-size:.9rem;font-weight:600;color:var(--azul-osc);box-shadow:var(--sombra)}
.chip--soft{background:var(--gris-cl);box-shadow:none}
.chip--zona{background:#eef6ff;border-color:#d3e6ff;color:var(--azul-osc)}

/* Lima Norte destacado */
.zona{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
@media(max-width:760px){.zona{grid-template-columns:1fr}}
.zona__box{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:26px;box-shadow:var(--sombra)}
.zona h2{text-align:left;font-size:1.6rem;margin-bottom:10px}
.zona p{color:var(--gris);margin-bottom:16px}

/* FAQ */
.faq{max-width:800px;margin:0 auto;display:grid;gap:12px}
.faq__it{background:#fff;border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.faq__q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:17px 20px;font-size:1.01rem;font-weight:700;color:var(--azul-noche);display:flex;justify-content:space-between;gap:14px;align-items:center;font-family:inherit}
.faq__q svg{width:20px;height:20px;fill:var(--azul);flex:none;transition:.25s}
.faq__it[open] .faq__q svg{transform:rotate(45deg)}
.faq__a{padding:0 20px 17px;color:var(--gris);font-size:.96rem}

/* CTA final */
.ctafin{background:linear-gradient(135deg,var(--azul-noche),var(--azul-osc));color:#fff;text-align:center}
.ctafin h2{color:#fff;font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:10px}
.ctafin p{color:#d9e6f6;max-width:540px;margin:0 auto 24px}
.ctafin .hero__cta{justify-content:center}

/* Footer */
.footer{background:var(--azul-noche);color:#c2d2e8;padding:42px 0 24px;font-size:.93rem}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
@media(max-width:760px){.footer__grid{grid-template-columns:1fr;gap:20px}}
.footer h4{color:#fff;font-size:1rem;margin-bottom:11px}.footer a:hover{color:#fff}
.footer__li{display:flex;gap:9px;align-items:center;margin-bottom:8px}
.footer__li svg{width:17px;height:17px;fill:#8fd0ff;flex:none}
.footer__logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.18rem;color:#fff;margin-bottom:10px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:16px;text-align:center;font-size:.84rem;color:#89a0c0}

/* Prosa */
.prosa{max-width:800px;margin:0 auto;color:#37414f}
.prosa p{margin-bottom:15px}.prosa h2{text-align:left;font-size:1.5rem;margin:6px 0 12px}

/* WhatsApp flotante */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.5);animation:pulso 2.4s infinite}
.wa-float svg{width:32px;height:32px;fill:#fff}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* Migas de pan (breadcrumb) — dentro del hero azul */
.breadcrumb{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:.85rem;margin-bottom:16px;color:#b9cded}
.breadcrumb a{color:#8fd0ff;font-weight:600}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb__sep{color:#5f7fb0;font-weight:700}
.breadcrumb__cur{color:#dbe7f7}

/* Botón volver arriba */
.top{position:fixed;right:18px;bottom:84px;z-index:59;width:46px;height:46px;border-radius:50%;background:var(--azul-osc);border:none;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px rgba(11,36,71,.38);opacity:0;visibility:hidden;transform:translateY(12px);transition:.25s}
.top.on{opacity:1;visibility:visible;transform:none}
.top svg{width:22px;height:22px;fill:#fff}

/* Ajustes móvil */
@media(max-width:560px){
  .logo{font-size:1.1rem}
  .logo small{display:none}
  .logo__chip{width:36px;height:36px}
  .header__in{padding:10px 14px;gap:8px}
  .btn{padding:12px 18px;font-size:.94rem}
  .seccion{padding:44px 0}
  .contenedor{padding:0 16px}
  .dx__body{padding:18px}
  .dx__pregunta{font-size:1.06rem}
  .hero__in{padding:40px 16px 40px}
  .wa-float{width:52px;height:52px;right:14px;bottom:14px}
  .top{right:14px;bottom:76px;width:42px;height:42px}
}