/* tuendo · sitio público (vista previa web.tuendoapp.com) · línea visual Marino
   Fuente del diseño: Lote 11 v1.1 (MKT-01) · https://claude.ai/artifact/8wzT2CzuG65EYh86fXm3rz */
:root{
  --tu-primario:#182346; --tu-cobrar:#0E0D15; --tu-enlace:#3D5387; --tu-activo:#EEF0F7;
  --tu-texto:#262B3A; --tu-titulo:#151824; --tu-suave:#525B75; --tu-borde:#DDE0E8; --tu-linea:#EDEEF3;
  --tu-fondo:#FFFFFF; --tu-fondo2:#F5F6F9; --tu-ok:#0B6B53; --tu-ok-bg:#ECFBF6; --tu-aviso:#8C6203; --tu-aviso-bg:#FFF8EB;
  --tu-error:#A3262E; --tu-error-bg:#FFF4F4; --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--tu-texto);background:var(--tu-fondo);line-height:1.45}
a{color:var(--tu-enlace)}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5A628C}
.muted{color:var(--tu-suave)}
.chip{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:99px;background:var(--tu-activo);color:var(--tu-primario)}
.code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--tu-fondo2);border:1px solid var(--tu-linea);border-radius:8px;padding:4px 8px;color:var(--tu-primario);word-break:break-all}

/* aviso de vista previa */
.preview{background:#151824;color:#fff;font-size:13px}
.preview .wrap{display:flex;gap:12px;align-items:center;min-height:36px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.preview a{color:#9DB3FF}

/* barra */
.nav{border-bottom:1px solid var(--tu-linea);background:#fff;position:sticky;top:0;z-index:5}
.nav .wrap{display:flex;align-items:center;gap:24px;min-height:68px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tu-titulo);font-weight:800;font-size:20px}
.logo span{width:32px;height:32px;border-radius:9px;background:var(--tu-primario);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px}
.nav nav{display:flex;gap:22px;font-size:15px;flex-wrap:wrap}
.nav nav a{color:var(--tu-texto);text-decoration:none}
.nav nav a[aria-current]{color:var(--tu-primario);font-weight:700}
.nav .sp{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;font-weight:700;font-size:15px;text-decoration:none;border:1.5px solid var(--tu-primario);cursor:pointer;font-family:inherit}
.btn-p{background:var(--tu-primario);color:#fff}
.btn-s{background:#fff;color:var(--tu-primario)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}

/* portada */
.hero{padding:56px 0 32px}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.hero h1{margin:14px 0;font-size:clamp(34px,5vw,54px);line-height:1.08;letter-spacing:-.035em;color:var(--tu-titulo)}
.hero p{font-size:19px;color:var(--tu-suave);margin:0 0 22px}
.acts{display:flex;gap:12px;flex-wrap:wrap}
.shot{min-height:340px;border-radius:24px;background:var(--tu-activo);position:relative;overflow:hidden}
.card{background:#fff;border:1px solid var(--tu-linea);border-radius:var(--r)}
.shot .card{position:absolute;padding:16px;box-shadow:0 20px 40px -20px rgba(11,13,20,.35)}
.rubros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:8px 0 0}
.rubros .card{padding:22px}
.band{margin:32px 0;border-radius:20px;background:var(--tu-primario);color:#fff;padding:26px 32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.band .btn-s{border-color:#fff}

/* planes */
.head{text-align:center;padding:44px 0 8px}
.head h1{margin:0 0 8px;font-size:clamp(30px,4.4vw,46px);letter-spacing:-.03em;color:var(--tu-titulo)}
.state{font-size:12px;color:var(--tu-suave);margin-top:8px}
.state.bad{color:var(--tu-aviso);font-weight:600}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;padding:36px 0 0;align-items:stretch}
.plan{border:1px solid var(--tu-borde);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:14px;position:relative;background:#fff}
.plan.hl{border:2px solid var(--tu-primario);box-shadow:0 24px 50px -24px rgba(24,35,70,.45)}
.plan .flag{position:absolute;top:-14px;left:28px;background:var(--tu-primario);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:99px}
.plan h2{margin:0;font-size:24px;color:var(--tu-titulo)}
.price{display:flex;align-items:baseline;gap:6px}
.price strong{font-size:44px;letter-spacing:-.03em;color:var(--tu-titulo)}
.feat{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--tu-linea);display:flex;flex-direction:column;gap:9px;font-size:15px}
.feat li::before{content:"✓";color:var(--tu-ok);font-weight:800;margin-right:8px}
.feat li.no{color:#69718A}
.feat li.no::before{content:"—";color:#B4B9C7}
.ent{margin-top:20px;border:1px solid var(--tu-borde);border-radius:16px;padding:20px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ent div{flex:1;min-width:240px}
.trust{display:flex;justify-content:center;gap:28px;font-size:14px;color:var(--tu-suave);padding:20px 0;flex-wrap:wrap}

/* tabla comparativa */
.tbox{overflow-x:auto;border:1px solid var(--tu-borde);border-radius:16px;margin:24px 0}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:15px}
th,td{padding:12px 18px;text-align:left;border-top:1px solid var(--tu-linea)}
thead th{position:sticky;top:0;background:#fff;border-bottom:2px solid var(--tu-primario);vertical-align:bottom}
td.hl,th.hl{background:#F5F7FC}
tr.grp td{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5A628C;border-top:none;padding-top:20px}
.yes{color:var(--tu-ok);font-weight:800}.nope{color:#B4B9C7}

/* recomendador */
.rec{display:grid;grid-template-columns:1fr 440px;gap:40px;padding:24px 0 48px}
.q{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.q strong{font-size:16px;color:var(--tu-titulo)}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opts label{display:inline-flex}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts span{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:99px;border:1px solid var(--tu-borde);font-size:15px;cursor:pointer}
.opts input:checked+span{border:2px solid var(--tu-primario);background:var(--tu-activo);color:var(--tu-primario);font-weight:600}
.opts input:focus-visible+span{outline:3px solid #9DB3FF}

/* pruebas */
.tests{display:flex;flex-direction:column;gap:12px;padding:24px 0 48px}
.test{padding:18px;display:grid;grid-template-columns:1fr auto;gap:10px 20px}
.test h3{margin:0;font-size:17px;color:var(--tu-titulo)}
.test ol{margin:6px 0 0;padding-left:20px;font-size:14px;color:var(--tu-suave)}
.res{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap}
.res button{min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--tu-borde);background:#fff;font:inherit;font-size:14px;cursor:pointer}
.res button[aria-pressed="true"].ok{background:var(--tu-ok-bg);border-color:var(--tu-ok);color:var(--tu-ok);font-weight:700}
.res button[aria-pressed="true"].ko{background:var(--tu-error-bg);border-color:var(--tu-error);color:var(--tu-error);font-weight:700}
.test textarea{grid-column:1/-1;width:100%;min-height:44px;border:1px solid var(--tu-borde);border-radius:10px;padding:10px;font:inherit;font-size:14px}
.sum{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:14px 18px}

/* MKT-01 v1.1 · D celular: tarjetas que se deslizan y botón fijo (Bloque 0335) */
.dots,.desliza,.fijo{display:none}
.dots span{width:8px;height:8px;border-radius:99px;background:var(--tu-linea)}
.dots span.on{width:22px;background:var(--tu-primario)}

footer{border-top:1px solid var(--tu-linea);margin-top:40px;padding:24px 0;font-size:14px;color:var(--tu-suave)}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap}

@media (max-width:860px){
  .hero .wrap,.rec{grid-template-columns:1fr}
  .shot{min-height:260px}
  .rubros{grid-template-columns:1fr}
  .nav nav{order:3;width:100%;gap:16px;padding-bottom:10px;overflow-x:auto}
  .test{grid-template-columns:1fr}
}
@media (max-width:640px){
  .plans{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:30px 4px 6px;scrollbar-width:none}
  .plans::-webkit-scrollbar{display:none}
  .plan{flex:0 0 86%;scroll-snap-align:center}
  .dots{display:flex;justify-content:center;gap:6px;padding:10px 0 0}
  .desliza{display:block;text-align:center;font-size:14px;margin:8px 0 0}
  .fijo{display:flex;flex-direction:column;align-items:stretch;gap:6px;position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--tu-linea);z-index:20;text-align:center;font-size:12px}
  body[data-planes]{padding-bottom:110px}
}
/* MKT-03 · Salud del sistema (Bloque 0424) */
.servicios{list-style:none;padding:0;margin:18px 0;border:1px solid var(--tu-borde);border-radius:var(--r);overflow:hidden}
.servicio{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:14px 18px;border-bottom:1px solid var(--tu-linea)}
.servicio:last-child{border-bottom:0}
.est{font-weight:700;font-size:14px}
.est-ok{color:var(--tu-ok)}
.est-degraded,.est-maintenance{color:var(--tu-aviso)}
.est-down{color:var(--tu-error)}
.est-sin_datos{color:var(--tu-suave)}
.incidente{background:var(--tu-aviso-bg);color:var(--tu-aviso);border-radius:12px;padding:14px 18px;margin:12px 0}
.logo img{display:block;height:30px;width:auto}
/* MKT-02 · Centro de ayuda público (Lote 22) */
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.enlace-salud{font-size:15px;color:var(--tu-texto)}
.buscar-ayuda{max-width:640px;margin:18px auto 0}
.buscar-ayuda input{width:100%;min-height:52px;border:1px solid var(--tu-borde);border-radius:12px;padding:0 16px;font:inherit;font-size:16px;color:var(--tu-titulo);background:var(--tu-fondo)}
.buscar-ayuda input:focus-visible{outline:3px solid #9DB3FF;outline-offset:1px}
.grupos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:28px 0 0}
.grupo{border:1px solid var(--tu-borde);border-radius:var(--r);padding:18px 20px}
.grupo h2{margin:0 0 8px;font-size:18px;color:var(--tu-titulo)}
.articulos{list-style:none;margin:0;padding:0}
.articulo{border-top:1px solid var(--tu-linea)}
.articulo summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--tu-enlace);font-weight:600;font-size:15px}
.articulo p{margin:0 0 12px;font-size:15px;color:var(--tu-suave)}
.sin-resultados{text-align:center;color:var(--tu-suave);padding:24px 0}
.contacto{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 24px;margin:28px 0 0}
.contacto h2{margin:0 0 4px;font-size:20px;color:var(--tu-titulo)}
@media (max-width:860px){.grupos{grid-template-columns:1fr}}