/* HostPanel — identidad: blanco + escala de celestes/azules.
   Señal visual propia: la "línea de horizonte" — un degradé celeste fino
   que corona cada tarjeta y sección, evocando el cielo austral. */
:root{
  --azul-900:#0b3b6e; --azul-700:#134e8f; --azul-500:#1e6fd9;
  --celeste-400:#4da3ff; --celeste-200:#bfdcff; --celeste-100:#e6f2ff; --celeste-50:#f4faff;
  --tinta:#1c2b3a; --gris:#5d7189; --borde:#d8e8fb; --ok:#16a34a; --error:#dc2626;
  --radio:14px; --sombra:0 6px 24px rgba(19,78,143,.10);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;color:var(--tinta);background:#fff;line-height:1.55}
a{color:var(--azul-500)} img{max-width:100%}
.horizonte{height:5px;background:linear-gradient(90deg,var(--azul-900),var(--azul-500) 45%,var(--celeste-400) 80%,var(--celeste-200))}
.contenedor{max-width:1120px;margin:0 auto;padding:0 22px}

header.topo{position:sticky;top:0;background:#fffffff2;backdrop-filter:blur(8px);border-bottom:1px solid var(--borde);z-index:50}
.topo .contenedor{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:inline-flex;align-items:center;gap:9px;font-size:1.35rem;font-weight:800;color:var(--azul-900);text-decoration:none;letter-spacing:-.02em}
.logo img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 3px 7px rgba(19,78,143,.18))}
.logo b{color:var(--celeste-400)}
nav.principal a{color:var(--tinta);text-decoration:none;margin-left:26px;font-size:.95rem}
nav.principal a:hover{color:var(--azul-500)}

.hero{background:linear-gradient(180deg,var(--celeste-50),#fff 70%);padding:72px 0 40px;text-align:center}
.hero h1{font-size:clamp(1.9rem,4.5vw,3.1rem);color:var(--azul-900);margin:.2em 0;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--azul-500)}
.hero p{color:var(--gris);max-width:620px;margin:0 auto 26px;font-size:1.08rem}
.hero-comercial{padding-bottom:54px}.eyebrow{display:inline-block;color:var(--azul-500);font-size:.76rem;font-weight:800;letter-spacing:.12em;margin-bottom:8px}.hero-acciones{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.seccion{padding-top:70px;padding-bottom:70px}.titulo-seccion{text-align:center;max-width:720px;margin:auto}.titulo-seccion h2,.video-copy h2,.cta-final h2{color:var(--azul-900);font-size:clamp(1.6rem,3vw,2.25rem);margin:4px 0 10px}.titulo-seccion p,.video-copy p,.cta-final p{color:var(--gris)}
.hero-contenedor{display:grid;grid-template-columns:minmax(235px,340px) minmax(0,1fr);align-items:center;gap:28px;text-align:left;min-height:440px}
.hero-mascota{align-self:end;height:450px;display:flex;align-items:flex-end;justify-content:center;position:relative}
.hero-mascota::after{content:"";position:absolute;z-index:0;bottom:12px;width:78%;height:32px;background:rgba(19,78,143,.17);filter:blur(16px);border-radius:50%}
.hero-mascota img{position:relative;z-index:1;width:auto;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 20px rgba(8,40,75,.18))}
.hero-copy{position:relative;z-index:2;padding:24px 0}
.hero-copy p{max-width:680px;margin:0 0 26px}
.hero-copy .hero-acciones{justify-content:flex-start}

.btn{display:inline-block;background:var(--azul-500);color:#fff;border:none;cursor:pointer;
     padding:13px 30px;border-radius:10px;font-weight:700;font-size:1rem;text-decoration:none;transition:.15s}
.btn:hover{background:var(--azul-700)} .btn:disabled{background:var(--celeste-200);cursor:wait}
.btn.suave{background:var(--celeste-100);color:var(--azul-700)} .btn.suave:hover{background:var(--celeste-200)}
.btn.chico{padding:8px 16px;font-size:.85rem;border-radius:8px}

.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;padding:34px 0 0}
.plan{border:1px solid var(--borde);border-radius:var(--radio);background:#fff;box-shadow:var(--sombra);
      overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .15s}
.plan:hover{transform:translateY(-4px)}
.plan .cuerpo{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.plan h3{margin:0;color:var(--azul-900);font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase}
.plan .desc{color:var(--gris);font-size:.88rem;min-height:2.6em}
.seo-precio{background:linear-gradient(135deg,var(--azul-900),var(--azul-500));color:#fff;border-radius:10px;padding:11px 14px;margin:14px 0 17px}.seo-precio small{display:block;font-size:.66rem;letter-spacing:.08em;opacity:.84}.seo-precio b{display:block;font-size:1.18rem}.precio-etiqueta{font-size:.7rem;color:var(--azul-700);font-weight:800;letter-spacing:.08em}.precio-anual{color:var(--gris)}.gratis{background:#ecfdf5;color:#087a44;border:1px solid #bbf7d0;border-radius:8px;text-align:center;font-size:.78rem;font-weight:800;padding:8px;margin:15px 0 4px}.microcopy{text-align:center;color:var(--gris);font-size:.7rem;margin-top:8px}
.plan .precio{font-size:2rem;font-weight:800;color:var(--azul-700);margin:6px 0 2px}
.plan .precio small{font-size:.85rem;color:var(--gris);font-weight:400}
.plan ul{list-style:none;padding:0;margin:16px 0 22px;font-size:.9rem;color:var(--tinta)}
.plan li{padding:6px 0;border-top:1px dashed var(--celeste-100)}
.plan li::before{content:"✔";color:var(--ok);margin-right:9px;font-size:.8rem}
.plan .btn{margin-top:auto;text-align:center}
.plan.destacado{border-color:var(--celeste-400)}
.plan.destacado .cinta{position:absolute;top:14px;right:-32px;transform:rotate(38deg);
  background:var(--azul-500);color:#fff;font-size:.68rem;font-weight:700;padding:4px 38px;letter-spacing:.06em}
.franja{background:var(--celeste-50)}.funciones{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}.funciones article{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:22px;box-shadow:0 3px 14px rgba(19,78,143,.06)}.funciones article>span{font-size:1.5rem}.funciones h3{color:var(--azul-900);margin:8px 0 5px}.funciones p{color:var(--gris);font-size:.88rem;margin:0}.nota-honesta{background:#fff;border-left:4px solid var(--azul-500);border-radius:8px;padding:18px 20px;margin-top:22px;color:var(--gris)}.nota-honesta b{color:var(--azul-900)}.video-seccion{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:40px 50px}.video-copy ul{padding-left:20px;color:var(--tinta)}.video-copy li{margin:8px 0}.video-marco{background:var(--azul-900);padding:10px;border-radius:18px;box-shadow:0 18px 50px rgba(11,59,110,.2)}.video-marco video{display:block;width:100%;aspect-ratio:16/9;background:#071d34;border-radius:10px}.video-beneficios{grid-column:1/-1;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:17px 20px;color:#087a44;font-weight:800}.video-beneficios span{white-space:nowrap}.cta-final{background:linear-gradient(135deg,var(--azul-900),#092a4d);padding:48px 0}.cta-final .contenedor{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-final h2,.cta-final p{color:#fff}.cta-final p{opacity:.8;margin-bottom:0}

.pasos{display:flex;gap:0;margin:30px 0 26px;counter-reset:p}
.pasos span{flex:1;text-align:center;font-size:.85rem;color:var(--gris);padding:10px 4px;border-bottom:3px solid var(--celeste-100);counter-increment:p}
.pasos span::before{content:counter(p);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--celeste-100);color:var(--azul-700);font-weight:700;margin-right:8px}
.pasos span.activo{color:var(--azul-900);font-weight:700;border-color:var(--azul-500)}
.pasos span.activo::before{background:var(--azul-500);color:#fff}

form.tarjeta,.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);padding:30px;max-width:640px;margin:0 auto 60px}
label{display:block;font-size:.85rem;font-weight:600;color:var(--azul-900);margin:14px 0 5px}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--borde);border-radius:9px;font-size:.95rem;background:var(--celeste-50)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--celeste-400);background:#fff}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--error);outline:2px solid #fecaca;background:#fff7f7}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.aviso{padding:12px 16px;border-radius:9px;font-size:.9rem;margin:14px 0}
.aviso.error{background:#fef2f2;color:var(--error);border:1px solid #fecaca}
.aviso.ok{background:#f0fdf4;color:var(--ok);border:1px solid #bbf7d0}
.aviso.info{background:var(--celeste-100);color:var(--azul-700)}

table.datos{width:100%;border-collapse:collapse;font-size:.87rem}
table.datos th{background:var(--celeste-100);color:var(--azul-900);text-align:left;padding:10px 12px}
table.datos td{padding:9px 12px;border-bottom:1px solid var(--celeste-100)}
.pill{display:inline-block;padding:3px 11px;border-radius:99px;font-size:.72rem;font-weight:700}
.pill.activo{background:#dcfce7;color:var(--ok)} .pill.pendiente_pago{background:#fef9c3;color:#a16207}
.pill.fallido,.pill.rechazado{background:#fee2e2;color:var(--error)}
.pill.pagado,.pill.aprovisionando{background:var(--celeste-100);color:var(--azul-700)}
.pill.abierto{background:#fef9c3;color:#a16207} .pill.esperando_cliente{background:var(--celeste-100);color:var(--azul-700)}
.pill.resuelto,.pill.cerrado{background:#dcfce7;color:var(--ok)}

footer{background:var(--azul-900);color:var(--celeste-200);padding:38px 0;margin-top:40px;font-size:.85rem}
footer .contenedor{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px}
.detener-audio{position:fixed;left:20px;bottom:20px;z-index:100;width:52px;height:52px;border:2px solid #fff;border-radius:50%;background:var(--azul-900);color:#fff;font-size:1.45rem;line-height:1;box-shadow:0 8px 24px rgba(7,29,52,.32);cursor:pointer}
.detener-audio:hover,.detener-audio:focus-visible{background:var(--azul-700);outline:3px solid var(--celeste-200);outline-offset:2px}
.detener-audio:disabled{opacity:.7;cursor:default}
@media(max-width:800px){.funciones{grid-template-columns:1fr 1fr}.video-seccion{grid-template-columns:1fr}.principal a:not(.btn){display:none}.hero-contenedor{grid-template-columns:210px minmax(0,1fr);gap:18px}.hero-mascota{height:360px}.hero-copy h1 br{display:none}}
@media(max-width:640px){.fila,.funciones{grid-template-columns:1fr}.pasos span{font-size:.72rem}.cta-final .contenedor{align-items:flex-start;flex-direction:column}.seccion{padding-top:50px;padding-bottom:50px}.logo{font-size:1.05rem;gap:7px}.logo img{width:32px;height:32px}.hero{padding-top:30px}.hero-contenedor{display:flex;flex-direction:column;gap:0;text-align:center;min-height:0}.hero-mascota{order:2;height:285px;width:100%;margin:18px 0 -40px}.hero-copy{order:1;padding:0}.hero-copy p{margin-left:auto;margin-right:auto}.hero-copy .hero-acciones{justify-content:center}}