/* ============================================================
   Sitio público de Odex — institucional/comercial, deliberadamente distinto
   del panel interno (style.css) y del chat oscuro del Vendedor Online
   (vendedor_online.css): acá la audiencia es un paciente potencial, así que
   el tono es claro, cálido y confiable en vez de "producto tech". Contenido
   institucional adaptado de odex.com.py (texto e imágenes reales, ver
   assets/sitio_publico/) más secciones conectadas en vivo a la base
   (clínicas, planes) donde el sistema ya tiene ese dato real.

   Paleta: tomada TAL CUAL del sitio institucional real (no inventada) — se
   leyeron las variables CSS que el tema WordPress "Dantal" de odex.com.py
   define en su propio <style> inline: --accent-color/--button-bg-color:
   #ff8e1d (naranja), --accent-color-hover/--global-txt-color/
   --header-bg-overlay-color: #142349 (azul marino), --header-menu-txt-
   color-first/--footer-txt-color: #636a6c (gris). El footer del sitio real
   usa fondo claro (#ecf2fe); acá se lo dejó oscuro con el mismo azul marino
   de marca en su lugar (mejor contraste/cierre visual en una página larga),
   una decisión de diseño, no un color inventado.
   ============================================================ */
:root{
  --sp-ink:#142349;
  --sp-ink-soft:#636a6c;
  --sp-muted:#8991A0;
  --sp-brand:#ff8e1d;
  --sp-brand-dark:#142349;
  --sp-accent:#ff8e1d;
  --sp-accent-soft:#FFEEDC;
  --sp-cream:#F7F8FB;
  --sp-line:#E4E7EE;
  --sp-surface:#FFFFFF;
  --sp-radius:16px;
  --sp-radius-lg:24px;
  --sp-shadow:0 10px 34px rgba(20,35,73,.10);
  --sp-shadow-sm:0 2px 10px rgba(20,35,73,.06);
  --sp-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.sp-body{margin:0;font-family:var(--sp-font);color:var(--sp-ink);background:var(--sp-cream);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;}
.sp-body *{box-sizing:border-box;}
/* :not(.sp-btn) para que esta regla no le gane en especificidad a .sp-btn-primary/.sp-btn-accent/
   .sp-btn-outline (bug real encontrado: ".sp-body a" con dos selectores pesa más que una sola clase,
   así que el color de los botones quedaba invisible al heredar el color de texto de la página). */
.sp-body a:not(.sp-btn){color:inherit;}
.sp-body img{max-width:100%;display:block;}
.sp-container{width:100%;max-width:1160px;margin:0 auto;padding:0 24px;}

/* ---------- Header ---------- */
.sp-header{position:sticky;top:0;z-index:40;background:rgba(251,250,246,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--sp-line);}
.sp-header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;max-width:1160px;margin:0 auto;}
.sp-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--sp-brand-dark);}
.sp-logo img{height:40px;width:auto;}
.sp-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.sp-nav a{text-decoration:none;color:var(--sp-ink-soft);font-weight:600;font-size:13.5px;padding:9px 13px;border-radius:20px;transition:background .15s,color .15s;}
.sp-nav a:hover{background:var(--sp-accent-soft);color:var(--sp-brand-dark);}
.sp-nav a.activa{background:var(--sp-brand);color:#fff;}
.sp-header-cta{display:flex;gap:8px;align-items:center;flex-shrink:0;}
.sp-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:24px;font-weight:700;font-size:13.5px;text-decoration:none;border:1.5px solid transparent;transition:transform .12s,box-shadow .15s,background .15s;white-space:nowrap;cursor:pointer;}
/* Botón primario: naranja de marca, con el mismo gris de hover que usan los botones en odex.com.py (--button-bg-color-hover: #636a6c). */
.sp-btn-primary{background:var(--sp-brand);color:#fff;box-shadow:var(--sp-shadow-sm);}
.sp-btn-primary:hover{background:#636a6c;transform:translateY(-1px);}
.sp-btn-outline{background:#fff;color:var(--sp-brand-dark);border-color:var(--sp-line);}
.sp-btn-outline:hover{border-color:var(--sp-brand);color:var(--sp-brand);}
/* Variante para las llamadas a "hablar con la IA": mismo azul marino de marca en vez del naranja de
   los botones de venta directa, para distinguirlas sin salirse de la paleta real de Odex. */
.sp-btn-accent{background:var(--sp-brand-dark);color:#fff;}
.sp-btn-accent:hover{transform:translateY(-1px);box-shadow:var(--sp-shadow-sm);background:#1c3466;}
.sp-nav-toggle{display:none;background:none;border:1px solid var(--sp-line);border-radius:10px;width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer;}

/* ---------- Hero ---------- */
.sp-hero{padding:64px 0 40px;position:relative;overflow:hidden;}
.sp-hero-bg{position:absolute;right:-8%;top:-10%;width:60%;max-width:640px;opacity:.55;pointer-events:none;z-index:0;}
.sp-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.sp-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--sp-accent-soft);color:var(--sp-brand-dark);font-weight:700;font-size:12px;letter-spacing:.03em;padding:7px 14px;border-radius:20px;margin-bottom:18px;}
.sp-hero h1{font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-1.2px;line-height:1.08;margin:0 0 18px;color:var(--sp-brand-dark);}
.sp-hero p{font-size:16.5px;color:var(--sp-ink-soft);max-width:480px;margin:0 0 26px;}
.sp-hero-ctas{display:flex;gap:12px;flex-wrap:wrap;}
.sp-hero-img{border-radius:var(--sp-radius-lg);overflow:hidden;box-shadow:var(--sp-shadow);position:relative;}
.sp-hero-img img{width:100%;height:420px;object-fit:cover;}
.sp-hero-badge{position:absolute;left:-16px;bottom:-16px;background:#fff;border-radius:16px;box-shadow:var(--sp-shadow);padding:14px 18px;display:flex;align-items:center;gap:10px;}
.sp-hero-badge strong{font-size:20px;color:var(--sp-brand);}
.sp-hero-badge span{font-size:11.5px;color:var(--sp-muted);}

/* ---------- Stats bar ---------- */
.sp-stats{background:var(--sp-brand-dark);color:#fff;padding:26px 0;}
.sp-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;text-align:center;}
.sp-stats-grid strong{display:block;font-size:26px;font-weight:800;color:var(--sp-accent);}
.sp-stats-grid span{font-size:12px;color:#AEBBDD;text-transform:uppercase;letter-spacing:.05em;}

/* ---------- Secciones generales ---------- */
.sp-section{padding:64px 0;}
.sp-section-cream{background:#fff;}
.sp-section-header{max-width:640px;margin:0 auto 40px;text-align:center;}
.sp-section-header h2{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.6px;margin:0 0 10px;color:var(--sp-brand-dark);}
.sp-section-header p{color:var(--sp-ink-soft);margin:0;}

/* ---------- Grillas / tarjetas ---------- */
.sp-grid{display:grid;gap:22px;}
.sp-grid-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.sp-grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.sp-card{background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:26px 22px;box-shadow:var(--sp-shadow-sm);transition:transform .15s,box-shadow .15s;}
.sp-card:hover{transform:translateY(-3px);box-shadow:var(--sp-shadow);}
.sp-card-icono{width:52px;height:52px;border-radius:14px;background:var(--sp-accent-soft);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.sp-card-icono img{width:30px;height:30px;object-fit:contain;}
.sp-card h3{font-size:16px;margin:0 0 8px;font-weight:700;}
.sp-card p{font-size:13.5px;color:var(--sp-ink-soft);margin:0;}

/* ---------- Equipo / testimonios ---------- */
.sp-persona{text-align:center;}
.sp-persona img{width:112px;height:112px;border-radius:50%;object-fit:cover;margin:0 auto 14px;border:3px solid #fff;box-shadow:var(--sp-shadow-sm);}
.sp-persona strong{display:block;font-size:14.5px;}
.sp-persona span{font-size:12.5px;color:var(--sp-muted);}

.sp-testimonio{background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:22px;box-shadow:var(--sp-shadow-sm);display:flex;gap:14px;align-items:flex-start;}
.sp-testimonio img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.sp-testimonio .sp-estrellas{color:#E3A21A;font-size:13px;margin-bottom:4px;}
.sp-testimonio p{margin:6px 0 8px;font-size:13.5px;color:var(--sp-ink-soft);font-style:italic;}
.sp-testimonio strong{font-size:13px;}
.sp-testimonio small{color:var(--sp-muted);}

/* ---------- Planes (conectado en vivo a la tabla planes) ---------- */
.sp-plan{background:#fff;border:1.5px solid var(--sp-line);border-radius:var(--sp-radius);padding:28px 24px;text-align:center;box-shadow:var(--sp-shadow-sm);}
.sp-plan strong.sp-plan-nombre{display:block;font-size:17px;margin-bottom:10px;}
.sp-plan .sp-plan-precio{font-size:30px;font-weight:800;color:var(--sp-brand);margin-bottom:4px;}
.sp-plan .sp-plan-precio small{font-size:12px;font-weight:500;color:var(--sp-muted);}
.sp-plan ul{list-style:none;padding:0;margin:16px 0 20px;text-align:left;font-size:13px;color:var(--sp-ink-soft);}
.sp-plan li{padding:6px 0;border-bottom:1px solid var(--sp-line);display:flex;justify-content:space-between;gap:8px;}
.sp-plan li:last-child{border-bottom:none;}

/* ---------- Clínicas (conectado en vivo a la tabla clinicas) ---------- */
.sp-clinica{background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:22px;box-shadow:var(--sp-shadow-sm);}
.sp-clinica h3{margin:0 0 10px;font-size:15.5px;display:flex;align-items:center;gap:8px;}
.sp-clinica p{margin:4px 0;font-size:13px;color:var(--sp-ink-soft);}
.sp-clinica a{color:var(--sp-brand);font-weight:700;font-size:12.5px;text-decoration:none;}
.sp-clinica a:hover{text-decoration:underline;}

/* ---------- CTA banda final ---------- */
.sp-cta-banda{background:linear-gradient(120deg,var(--sp-brand),var(--sp-brand-dark));color:#fff;border-radius:var(--sp-radius-lg);padding:44px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.sp-cta-banda h2{margin:0 0 6px;font-size:24px;font-weight:800;}
.sp-cta-banda p{margin:0;color:#C9D3EA;font-size:14px;}

/* ---------- En construcción ---------- */
.sp-construccion{text-align:center;padding:70px 20px;}
.sp-construccion-icono{width:88px;height:88px;margin:0 auto 20px;border-radius:50%;background:var(--sp-accent-soft);display:flex;align-items:center;justify-content:center;color:var(--sp-brand);}
.sp-construccion h1{font-size:26px;margin:0 0 10px;}
.sp-construccion p{color:var(--sp-ink-soft);max-width:460px;margin:0 auto 26px;}

/* ---------- Portal / asegurados ---------- */
.sp-portal-pasos{counter-reset:paso;}
.sp-portal-paso{display:flex;gap:16px;margin-bottom:18px;}
.sp-portal-paso .sp-portal-num{counter-increment:paso;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--sp-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;}
.sp-portal-paso .sp-portal-num::before{content:counter(paso);}
.sp-portal-paso div strong{display:block;font-size:14.5px;margin-bottom:3px;}
.sp-portal-paso div span{font-size:13px;color:var(--sp-ink-soft);}

/* ---------- Footer ---------- */
.sp-footer{background:var(--sp-brand-dark);color:#C9D3EA;padding:50px 0 24px;margin-top:40px;}
.sp-footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;margin-bottom:34px;}
.sp-footer h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px;}
.sp-footer a{color:#C9D3EA;text-decoration:none;font-size:13.5px;display:block;margin-bottom:9px;}
.sp-footer a:hover{color:var(--sp-brand);}
.sp-footer-brand{font-weight:800;font-size:19px;color:#fff;margin-bottom:10px;}
.sp-footer-brand span{color:var(--sp-accent);}
.sp-footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#8C9BC2;}

/* El botón flotante propio (.sp-flotante) se reemplazó por el widget embebido de la Asesora Virtual
   (assets/css/asesora_widget.css, #asesora-abrir/.as-panel) — ver sitio/includes/chat_widget.php. */

/* ---------- Formulario de afiliación ---------- */
.sp-form-section{background:linear-gradient(135deg,#fff 0%,#fff8f1 100%);}
.sp-form-wrap{display:block;max-width:760px;margin:0 auto;}
.sp-form-intro{text-align:center;padding:12px 20px 30px;}.sp-form-intro h1{font-size:clamp(34px,5vw,50px);line-height:1.08;color:var(--sp-brand-dark);margin:12px 0 16px;}.sp-form-intro p{color:var(--sp-ink-soft);font-size:17px;line-height:1.65;max-width:650px;margin:0 auto;}.sp-form-benefits{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}.sp-form-benefits span{background:#fff;border:1px solid var(--sp-line);border-radius:999px;padding:8px 13px;color:var(--sp-brand-dark);font-size:12.5px;font-weight:700}
.sp-form-kicker{display:inline-block;color:var(--sp-accent);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;}
.sp-form-card{max-width:680px;margin:0 auto;background:#fff;border:1px solid var(--sp-line);border-radius:22px;padding:36px;box-shadow:0 18px 55px rgba(20,35,73,.11);}.sp-form-card h2{text-align:center;margin:0 0 28px;color:var(--sp-brand-dark);font-size:24px;}
.sp-field{display:block;font-size:13px;font-weight:700;color:var(--sp-brand-dark);margin-bottom:18px;}.sp-field input,.sp-field select,.sp-field textarea{display:block;width:100%;box-sizing:border-box;margin-top:7px;padding:12px 13px;border:1px solid var(--sp-line);border-radius:10px;background:#fff;color:var(--sp-ink);font:inherit;outline:none;}.sp-field input:focus,.sp-field select:focus,.sp-field textarea:focus{border-color:var(--sp-accent);box-shadow:0 0 0 3px rgba(255,132,30,.12);}.sp-field textarea{resize:vertical;}
.sp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}.sp-check{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--sp-ink-soft);margin:8px 0 20px;}.sp-check input{margin-top:3px;accent-color:var(--sp-accent);}.sp-submit{width:100%;justify-content:center;border:0;font-size:15px;padding:13px 20px;}.sp-form-errors{background:#fff1ef;border:1px solid #efb8b0;color:#9c2f24;border-radius:10px;padding:11px 14px;margin-bottom:18px;font-size:13px;}.sp-form-errors p{margin:4px 0;}.sp-form-exito{text-align:center;padding:38px 12px;}.sp-success-icon{width:72px;height:72px;margin:0 auto 22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ecfaf4;color:#20956d;font-size:38px;font-weight:800;box-shadow:0 0 0 9px rgba(32,149,109,.08)}.sp-form-exito strong{display:block;color:var(--sp-brand-dark);font-size:30px;}.sp-form-exito p{color:var(--sp-ink-soft);font-size:16px;line-height:1.6;max-width:500px;margin:14px auto 26px;}.sp-honeypot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

@media(max-width:900px){
  .sp-hero-inner{grid-template-columns:1fr;}
  .sp-hero-img img{height:300px;}
  .sp-footer-grid{grid-template-columns:1fr 1fr;}
  .sp-form-wrap{grid-template-columns:1fr;gap:18px;}.sp-form-intro{padding:10px 0;}
}
@media(max-width:760px){
  .sp-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:10px;border-bottom:1px solid var(--sp-line);box-shadow:var(--sp-shadow);}
  .sp-nav.sp-nav-abierto{display:flex;}
  .sp-nav a{padding:12px 14px;}
  .sp-nav-toggle{display:flex;}
  .sp-footer-grid{grid-template-columns:1fr;}
  .sp-form-grid{grid-template-columns:1fr;}.sp-form-card{padding:22px;}
}