:root{
  --violeta-700:#6D28D9; --violeta-600:#7C3AED; --violeta-500:#8B5CF6; --violeta-400:#A78BFA; --violeta-100:#F3E8FF;
  --negro:#0F172A; --gris-800:#1f2937; --gris-700:#334155; --gris-600:#475569; --gris-400:#94A3B8; --gris-300:#CBD5E1; --gris-100:#F1F5F9;
  --blanco:#fff; --maxw:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--negro); background:var(--blanco)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--maxw); margin-inline:auto; padding:clamp(16px,2.5vw,24px)}

/* ====== Encabezado ====== */
header.banner{
  color:#fff;
  background:
    radial-gradient(1000px 360px at 85% -10%, var(--violeta-400) 0%, transparent 60%),
    radial-gradient(800px 260px at 10% 0%, var(--violeta-500) 0%, transparent 60%),
    linear-gradient(135deg, var(--violeta-700), var(--violeta-500));
}
.hero-v2{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(16px,3vw,36px); align-items:start;
  min-height:36vh;           /* más delgado */
  padding-block:24px;
}
.hero-left{display:flex; flex-direction:column; gap:12px}
.hero-topbar{display:flex; align-items:center; gap:14px}
.logo img{height:72px}       /* más grande */
.institution{display:flex; gap:10px; align-items:center}
.institution img{width:44px; height:44px}   /* más grande */
.institution span{font-size:14px; background:rgba(255,255,255,.12); padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.28)}
.hero-left h1{font-size:clamp(30px,4.6vw,48px); line-height:1.1; margin:4px 0 6px}
.subtitle{font-size:clamp(14px,2.1vw,18px); margin:0 0 18px; color:#F9F9FF}
.badge-apps{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.store-badge{height:52px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.25)); border-radius:12px}
.dev-note{display:inline-block;font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#FFF}

/* Lado derecho */
.hero-aside{
  background:rgba(255,255,255,.08); backdrop-filter:saturate(1.1) blur(6px);
  border:1px solid rgba(255,255,255,.22); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:14px
}
.hero-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.kpi{background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:10px; text-align:center}
.kpi b{display:block; font-size:18px}
.hero-bullets{margin:2px 0 0; padding-left:18px; color:#EEF; line-height:1.5}

/* ====== Secciones y cards ====== */
section{padding-block:clamp(28px,5vw,56px)}
.section-title{font-size:clamp(22px,3.4vw,30px); margin:0 0 10px; color:var(--negro)}
.section-sub{color:var(--gris-600); margin:0 0 24px}

.features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--blanco); border:1px solid var(--gris-300); border-radius:16px; padding:18px; box-shadow:0 6px 20px rgba(17, 24, 39, .06)}
.feat{display:grid; grid-template-columns:auto 1fr; gap:12px}
.feat-icon{width:44px; height:44px; border-radius:10px; display:grid; place-items:center; background:var(--gris-100)}
.feat h3{margin:0; font-size:18px}
.feat p{margin:6px 0 0; color:var(--gris-700); font-size:14px}

/* ====== Violentómetro ====== */
.vio-section{padding-block:clamp(28px,5vw,56px)}
.vio-grid{display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:start}

.vio-thermo{position:relative; display:flex; flex-direction:column; align-items:center; padding-top:8px}
.vio-track{
  position:relative; width:22px; height:280px; border-radius:999px; border:2px solid var(--gris-300);
  background: linear-gradient(to top, #fde68a 0%, #f59e0b 48%, #ef4444 100%);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.15);
}
.vio-indicator{
  position:absolute; left:50%; transform:translate(-50%, calc( -1 * var(--pos)));
  top:calc(100% - var(--pos)); width:28px; height:8px; border-radius:999px;
  background:#fff; border:2px solid rgba(0,0,0,.1); box-shadow:0 2px 6px rgba(0,0,0,.18);
  transition: top .3s ease, transform .3s ease;
}
.vio-bulb{
  width:50px; height:50px; border-radius:50%; margin-top:10px;
  background: radial-gradient(circle at 35% 35%, #fff 12%, #fca5a5 22%, #ef4444 60%);
  border:2px solid var(--gris-300); box-shadow: inset 0 2px 12px rgba(0,0,0,.2);
}

/* Tabs fijos (no cambian tamaño) */
.vio-content{display:grid; grid-template-columns:300px 1fr; gap:16px}
.vio-levels{display:grid; gap:10px}
.vio-step{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; border:1px solid var(--gris-300);
  background:var(--blanco); cursor:pointer; text-align:left; min-height:64px;
  box-shadow:0 0 0 0 rgba(167,139,250,0); transition:box-shadow .2s ease, border-color .2s ease;
}
.vio-step:hover{border-color:var(--violeta-400)}
.vio-step.is-active{box-shadow:0 0 0 3px rgba(167,139,250,.45)}
.vio-step[aria-selected="true"]{font-weight:600}
.vio-step small{display:block; color:var(--gris-600); font-weight:400}
.vio-dot{width:14px; height:14px; border-radius:50%}
.vio-cuidado{background:#f59e0b}
.vio-alerta{background:#f97316}
.vio-peligro{background:#ef4444}

.vio-panels{min-height:180px}
.vio-panel{background:var(--blanco); border:1px solid var(--gris-300); border-radius:14px; padding:14px; box-shadow:0 6px 20px rgba(17,24,39,.06)}
.vio-list{margin:0; padding-left:18px; line-height:1.55}
.vio-actions{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}
.btn-911{display:inline-block; padding:10px 14px; border-radius:999px; background:#ef4444; color:#fff; font-weight:600; border:1px solid rgba(0,0,0,.08); box-shadow:0 4px 12px rgba(239,68,68,.35)}

/* ====== Video ====== */
.video-wrapper{position:relative; width:100%; border-radius:16px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,.12)}
.video-wrapper video{width:100%; height:auto; display:block; background:#000}

/* ====== FAQ ====== */
.faq{display:grid; gap:12px}
.faq details{
  background:var(--blanco);
  border:1px solid var(--gris-300);
  border-radius:14px;
  padding:14px 16px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq summary{
  list-style:none;
  cursor:pointer;
  font-weight:600;
  display:flex; align-items:center; gap:10px;
  outline:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"";
  width:10px; height:10px;
  border:2px solid var(--gris-400);
  border-left:0; border-top:0;
  transform:rotate(-45deg);
  transition:transform .2s ease;
}
.faq details[open] summary::before{transform:rotate(135deg)}
.faq details[open]{border-color:var(--violeta-400); box-shadow:0 0 0 3px rgba(167,139,250,.15)}
.faq .card{margin-top:8px; background:var(--blanco); border:0; box-shadow:none; padding:0}
.faq a{color:var(--violeta-700); text-decoration:underline}
@media (max-width:640px){
  .faq details{padding:12px 14px}
  .faq summary{font-size:16px}
}

/* ====== CTA ====== */
.cta{background:linear-gradient(135deg, var(--violeta-100), #fff); color:var(--gris-800); border:1px solid var(--gris-300);
  border-radius:18px; padding:22px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px}
.cta-text h3{margin:0 0 4px 0}
.cta-sub{margin:0; color:var(--gris-700)}
.cta .store-badge{height:52px}

/* ====== Footer ====== */
footer{background:#0B1020; color:#E5E7EB}
.footer-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:20px; align-items:center}
.footer-grid small{display:block; color:#94A3B8}
.links{list-style:none; padding:0; margin:8px 0 0; display:grid; gap:6px}
.credito{margin-top:10px; font-size:13px; color:#CBD5E1; opacity:.9}

/* ====== Responsivo ====== */
@media (max-width: 980px){
  .hero-v2{grid-template-columns:1fr; min-height:auto; padding-block:22px}
  .features{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .vio-content{grid-template-columns:1fr}
  .vio-grid{grid-template-columns:80px 1fr}
  .vio-track{height:240px}
  .logo img{height:56px}
  .institution img{width:32px; height:32px}
  .institution span{font-size:12px; padding:6px 10px}
}
@media (max-width: 640px){
  .features{grid-template-columns:1fr}
  .vio-grid{grid-template-columns:1fr; gap:14px}
  .vio-thermo{order:-1; flex-direction:row; justify-content:center; gap:14px}
  .vio-track{height:20px; width:260px; border-radius:999px;
    background: linear-gradient(to right, #fde68a 0%, #f59e0b 52%, #ef4444 100%);
  }
  .vio-indicator{
    top:50%; transform:translate(calc(-1 * var(--pos)), -50%); left:calc(var(--pos));
    width:8px; height:28px;
  }
  .vio-bulb{width:36px; height:36px; margin:0}
}

/* Accesibilidad */
:is(a, button, summary):focus{outline:none; box-shadow:0 0 0 3px rgba(167,139,250,.5)}