/* =========================================================
   styles.css — Base común + temas claros (Accountax y JMC)
   ========================================================= */

/* =========================
   Variables base (CLARO por defecto)
   ========================= */
:root{
  /* Paleta clara base compartida */
  --bg:#f6f8fb;          /* fondo general */
  --bg-alt:#ffffff;      /* secciones alternas / hero */
  --card:#ffffff;        /* tarjetas */
  --text:#0f2e3d;        /* texto principal (azul petróleo) */
  --muted:#5b6f7a;       /* texto secundario */
  --primary:#3667d6;     /* primario base (se sobreescribe en temas) */
  --primary-2:#6f95ff;   /* primario claro / hover */
  --ring:#2e4fa6;        /* foco inputs */
  --border:#e1ebf2;      /* bordes suaves */
  --accent:#f2f7fb;      /* superficies sutiles (chips/badges) */

  --ok:#1f9d6a;
  --warn:#ffb020;

  --radius:16px;         /* radios globales */
  --space:16px;          /* espaciado base */
  --shadow:0 10px 25px rgba(15,46,61,.08);

  /* Header y footer */
  --header-bg: rgba(255,255,255,.80);
  --footer-bg: #f3f7fa;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
}

/* =========================
   Contenedores y layout
   ========================= */
.container{width:min(1120px,92%);margin:0 auto}
.section{padding:3rem 0;border-bottom:1px solid var(--border)}
.section.alt{background:linear-gradient(180deg,#ffffff,var(--bg))}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
@media (max-width: 980px){ .two-col{grid-template-columns:1fr} }

/* =========================
   Header / Navegación
   ========================= */
.header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(180%) blur(8px);
  background:var(--header-bg);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.brand{display:flex;gap:.6rem;align-items:center;color:var(--text);text-decoration:none;font-weight:700}
.brand-logo{height:40px;width:auto;border-radius:6px}
.brand-text{letter-spacing:.3px}
.menu{display:flex;gap:1rem;align-items:center}
.menu a{color:var(--text);text-decoration:none;padding:.4rem .6rem;border-radius:.5rem}
.menu a:hover{background:#eaf3f7}
.menu-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);padding:.4rem .6rem;border-radius:.5rem}

/* Menú responsive */
@media (max-width: 980px){
  .menu{display:none}
  .menu.open{
    display:flex;flex-direction:column;position:absolute;top:56px;right:4%;
    background:var(--card);padding:1rem;border:1px solid var(--border);border-radius:.8rem;
    box-shadow:0 10px 24px rgba(15,46,61,.08)
  }
  .menu-toggle{display:inline-block}
}

/* =========================
   Hero / Intro
   ========================= */
.hero{padding:4rem 0 3rem;border-bottom:1px solid var(--border)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
@media (max-width: 980px){ .hero-grid{grid-template-columns:1fr} }
.hero h1{font-size:2.2rem;line-height:1.2;margin:.5rem 0 1rem}
.hero p{color:var(--muted);max-width:55ch}
.hero-photo img{width:100%;border-radius:1rem;box-shadow:var(--shadow);border:1px solid var(--border)}
.hero-photo .photo-placeholder{
  display:grid;place-items:center;background:#f3f6fb;border:1px dashed #cfe0ea;
  color:#3b6da0;height:280px;border-radius:1rem;font-weight:700;letter-spacing:.06em
}

/* =========================
   Botones, chips, badges
   ========================= */
.cta-row{display:flex;gap:.6rem;margin:1rem 0;flex-wrap:wrap}
.btn-primary,.btn-secondary{
  display:inline-block;padding:.7rem 1rem;border-radius:.7rem;text-decoration:none;border:1px solid var(--border);
  transition:filter .15s ease, transform .02s ease-in-out;
}
.btn-primary{background:linear-gradient(180deg,var(--primary),var(--primary-2));color:#fff;border:0}
.btn-primary:hover{filter:brightness(1.06); transform:translateY(-1px)}
.btn-secondary{background:var(--accent);color:var(--text)}
.chip{display:inline-block;background:var(--accent);border:1px solid var(--border);padding:.5rem .7rem;border-radius:999px;color:var(--text);text-decoration:none;margin:.2rem}

.badges{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem;padding-left:0}
.badges li{list-style:none;background:var(--accent);border:1px solid var(--border);padding:.35rem .6rem;border-radius:999px;font-size:.85rem;color:#2a5560}

/* =========================
   Cards y rejillas
   ========================= */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}
@media (max-width:1100px){ .cards{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 980px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 520px){ .cards{grid-template-columns:1fr} }

.card{
  background:var(--card);border:1px solid var(--border);padding:1rem;border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.card h3{margin:.2rem 0 .4rem}
.card p{color:var(--muted)}
.card ul,.bullets{padding-left:1.1rem;margin:.6rem 0 0}

/* =========================
   Listas con check / pasos
   ========================= */
.ticks{padding-left:1.2rem}
.ticks li{margin:.3rem 0}

/* =========================
   KPIs / confianza
   ========================= */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.kpi{background:var(--card);border:1px solid var(--border);padding:1rem;border-radius:var(--radius);text-align:center}
.kpi .num{font-size:1.8rem;font-weight:700;color:var(--ok);display:block}

.brands{display:flex;gap:1rem;flex-wrap:wrap;opacity:.95;margin-top:1rem}
.trust{display:grid;grid-template-columns:2fr 1fr;gap:1rem}
@media (max-width: 980px){ .trust{grid-template-columns:1fr} }
.testimonials blockquote{background:var(--card);border:1px solid var(--border);padding:1rem;border-radius:var(--radius);margin:0}
.testimonials cite{display:block;color:var(--muted);margin-top:.5rem}
.seals{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.seal{background:var(--accent);border:1px solid var(--border);padding:.8rem;border-radius:.8rem;text-align:center}

/* =========================
   Formularios / inputs
   ========================= */
.form{background:var(--card);border:1px solid var(--border);padding:1rem;border-radius:var(--radius)}
label{display:grid;gap:.3rem;margin-bottom:.8rem}
input,textarea{
  background:#fff;border:1px solid var(--border);color:var(--text);
  padding:.7rem;border-radius:.6rem
}
input:focus,textarea:focus{outline:2px solid var(--ring)}

/* =========================
   Contacto
   ========================= */
.contact-grid{display:grid;gap:1rem;grid-template-columns:1.2fr .8fr}
@media (max-width: 980px){ .contact-grid{grid-template-columns:1fr} }
.contact-list{list-style:none;padding-left:0;margin:.6rem 0 0}
.contact-list li{margin:.35rem 0}
.contact-list span{display:inline-block;min-width:170px;color:var(--muted)}

/* =========================
   Pie de página
   ========================= */
.footer{padding:2rem 0;background:var(--footer-bg);border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:1rem}
@media (max-width: 980px){ .footer-grid{grid-template-columns:1fr 1fr} }
.copy{text-align:center;color:var(--muted);padding-top:1rem;border-top:1px solid var(--border);margin-top:1rem}

/* =========================================================
   TEMAS (ambos CLAROS)
   ========================================================= */

/* ---------- Accountax (azules) ---------- */
.theme-accountax{
  --primary:#2b5bd3;     /* azul corporativo */
  --primary-2:#5d86ff;   /* azul claro para hover/degradado */
  --ring:#274ab2;
  --header-bg: rgba(255,255,255,.80);
  --footer-bg:#f3f7fa;
}
.hero-accountax{
  background:
    radial-gradient(900px 300px at 110% -10%, rgba(93,134,255,.18), transparent),
    radial-gradient(1100px 360px at -10% -20%, rgba(43,91,211,.12), transparent),
    linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
}

/* ---------- JMC (teal del logo) ---------- */
.theme-jmc{
  --primary:#1f6e79;     /* teal profundo (ajustable con hex exacto del logo) */
  --primary-2:#6fb7c1;   /* teal claro */
  --ring:#19545c;
  --header-bg: rgba(255,255,255,.86);
  --footer-bg:#f3f7fa;
}
.hero-jmc{
  background:
    radial-gradient(900px 300px at 110% -10%, rgba(111,183,193,.18), transparent),
    radial-gradient(1100px 360px at -10% -20%, rgba(31,110,121,.12), transparent),
    linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
}

/* =========================================================
   Overrides alta especificidad (por si queda CSS oscuro viejo)
   ========================================================= */
body.theme-jmc, body.theme-accountax{
  background:linear-gradient(180deg, #ffffff 0%, var(--bg) 100%) !important;
  color:var(--text) !important;
}
body.theme-jmc .header, body.theme-accountax .header{
  background:var(--header-bg) !important;
  border-bottom:1px solid var(--border) !important;
}
body.theme-jmc .footer, body.theme-accountax .footer{
  background:var(--footer-bg) !important;
  border-top:1px solid var(--border) !important;
}
body.theme-jmc .card, body.theme-accountax .card{
  background:var(--card) !important;
  border-color:var(--border) !important;
  box-shadow:var(--shadow) !important;
}
body.theme-jmc .menu a, body.theme-accountax .menu a{
  color:var(--text) !important;
}
body.theme-jmc .menu a:hover, body.theme-accountax .menu a:hover{
  background:#eaf3f7 !important;
}
/* Hero claro por tema */
body.theme-jmc .hero.hero-jmc{
  background:
    radial-gradient(900px 300px at 110% -10%, rgba(111,183,193,.18), transparent),
    radial-gradient(1100px 360px at -10% -20%, rgba(31,110,121,.12), transparent),
    linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%) !important;
}
body.theme-accountax .hero.hero-accountax{
  background:
    radial-gradient(900px 300px at 110% -10%, rgba(93,134,255,.18), transparent),
    radial-gradient(1100px 360px at -10% -20%, rgba(43,91,211,.12), transparent),
    linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%) !important;
}
/* Inputs en claro */
body.theme-jmc input, body.theme-jmc textarea,
body.theme-accountax input, body.theme-accountax textarea{
  background:#fff !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
}
/* Accesibilidad */
:focus-visible{outline:2px solid var(--ring); outline-offset:2px}