/*
 * Asesorías EMS - Hoja de estilos principal
 * Este archivo define los estilos para todas las páginas del sitio.
 * Contiene una paleta de colores corporativa en tonos azules y un diseño limpio y profesional.
 */

/* Importamos la fuente Montserrat desde Google Fonts */
:root {
  --primary-color: #003366;      /* azul oscuro corporativo */
  --secondary-color: #00509e;    /* azul medio para acentos */
  --accent-color: #00a5cf;       /* azul celeste para énfasis */
  --light-color: #f9f9f9;        /* fondo claro */
  --dark-color: #021f40;         /* fondo oscuro opcional */
  --text-color: #333333;         /* color del texto principal */
}

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--light-color);
  color: var(--text-color);
  line-height: 1.6;
}

/* Navegación */
header {
  background-color: var(--primary-color);
  color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 1100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 10%;
}
header .logo {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  text-decoration: none;
}
header nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}
header nav ul li a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease-in-out;
}
header nav ul li a:hover {
  color: var(--accent-color);
}

/* Sección hero genérica para todas las páginas */
.hero {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  height: 75vh;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 10%;
}
.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
.hero p {
  font-size: 1.2rem;
  max-width: 700px;
  margin-bottom: 2rem;
}
.hero .btn {
  background-color: var(--accent-color);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s ease-in-out;
}
.hero .btn:hover {
  background-color: var(--secondary-color);
}

/* Métricas */
.metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: #ffffff;
  padding: 3rem 10%;
}
.metric {
  flex: 1 1 200px;
  text-align: center;
  padding: 1rem;
}
.metric h3 {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}
.metric p {
  font-size: 1rem;
  color: var(--text-color);
}

/* Servicios */
.services-overview {
  padding: 4rem 10%;
  background-color: var(--light-color);
  text-align: center;
}
.services-overview h2 {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 2rem;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.service-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.service-card img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 1rem;
}
.service-card h3 {
  font-size: 1.4rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}
.service-card p {
  font-size: 0.95rem;
  color: var(--text-color);
  flex-grow: 1;
  margin-bottom: 1rem;
}
.service-card a {
  color: var(--secondary-color);
  text-decoration: none;
  font-weight: 600;
}
.service-card a:hover {
  text-decoration: underline;
}

/* Testimonios */
.testimonials-section {
  background-color: #ffffff;
  padding: 4rem 10%;
}
.testimonials-section h2 {
  font-size: 2rem;
  color: var(--primary-color);
  text-align: center;
  margin-bottom: 2rem;
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.testimonial-card {
  background-color: var(--light-color);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.testimonial-card p {
  font-size: 0.95rem;
  font-style: italic;
  margin-bottom: 1rem;
}
.testimonial-card .name {
  font-weight: 600;
  color: var(--primary-color);
}
.testimonial-card .rating {
  color: var(--accent-color);
  margin-top: 0.5rem;
}

/* Sección acerca de / nosotros */
.about-section {
  padding: 4rem 10%;
  background-color: var(--light-color);
  text-align: center;
}
.about-section h2 {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
}
.about-section p {
  max-width: 800px;
  margin: 0 auto 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.values-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.values-list li {
  background-color: #ffffff;
  border: 1px solid var(--secondary-color);
  border-radius: 6px;
  padding: 1rem 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
}

/* Página de contacto */
.contact-section {
  padding: 4rem 10%;
  background-color: #ffffff;
}
.contact-section h2 {
  text-align: center;
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 2rem;
}
.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}
.contact-form {
  flex: 1 1 300px;
  background-color: var(--light-color);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}
.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-size: 0.95rem;
}
.contact-form button {
  background-color: var(--secondary-color);
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}
.contact-form button:hover {
  background-color: var(--accent-color);
}
.contact-details {
  flex: 1 1 250px;
  background-color: var(--light-color);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-details p {
  margin-bottom: 0.75rem;
  font-size: 1rem;
}
.contact-details a {
  color: var(--secondary-color);
  text-decoration: none;
}
.contact-details a:hover {
  text-decoration: underline;
}

/* Footer */
footer {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 2rem 10%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
footer p {
  margin-bottom: 0.5rem;
}
footer .social {
  display: flex;
  gap: 1rem;
}
footer .social a {
  color: #ffffff;
  font-size: 1.2rem;
  transition: color 0.2s ease-in-out;
}
footer .social a:hover {
  color: var(--accent-color);
}

/* Responsivo */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  header nav ul {
    gap: 1rem;
  }
  .services-grid {
    gap: 1rem;
  }
  .testimonials-section, .about-section, .contact-section {
    padding: 3rem 5%;
  }
  footer {
    flex-direction: column;
    text-align: center;
  }
  footer .social {
    margin-top: 1rem;
  }
}/* Floating Social Buttons */
.fab-social{
  position: fixed;
  right: 18px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
  z-index: 9999;
  transition: transform .15s ease, opacity .15s ease;
  opacity: .95;
}
.fab-social:hover{ transform: translateY(-2px); opacity: 1; }

.fab-whatsapp{ bottom: 18px; background: #25D366; color: #fff; }
.fab-instagram{ bottom: 82px; background: #111; color: #fff; }

.fab-social svg{ width: 26px; height: 26px; display:block; }

@media (max-width: 420px){
  .fab-social{ right: 12px; width: 50px; height: 50px; }
  .fab-instagram{ bottom: 76px; }
}

/* ====== Mejoras CRO / UX ====== */

/* CTA en navegación */
header nav ul li a.nav-cta{
  background: var(--accent-color);
  color: #ffffff !important;
  padding: .55rem .85rem;
  border-radius: 10px;
  white-space: nowrap;
}
header nav ul li a.nav-cta:hover{
  color: #ffffff !important;
  filter: brightness(1.05);
}

/* Hero: bullets + CTAs dobles */
.hero{
  min-height: 520px;
  height: auto;
}
.hero-bullets{
  list-style: none;
  display: inline-flex;
  flex-direction: column;
  gap: .45rem;
  margin: 0 0 1.6rem 0;
  padding: 0;
  max-width: 760px;
}
.hero-bullets li{
  position: relative;
  padding-left: 1.25rem;
  text-align: left;
}
.hero-bullets li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(255,255,255,.95);
  font-weight: 700;
}
.hero-cta{
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.hero .btn.btn-outline{
  background: transparent;
  border: 2px solid rgba(255,255,255,.7);
}
.hero .btn.btn-outline:hover{
  background: rgba(255,255,255,.14);
}

/* Alert y nota del formulario */
.form-alert{
  background: #fff3cd;
  border: 1px solid #ffe69c;
  color: #664d03;
  padding: .8rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-weight: 600;
}
.form-note{
  margin-top: .75rem;
  font-size: .95rem;
  color: #555;
  line-height: 1.5;
}
.form-note a{
  color: var(--secondary-color);
  font-weight: 700;
  text-decoration: none;
}

/* Footer más informativo (SEO local + confianza) */
footer{
  gap: 1.2rem;
}
.footer-left{
  min-width: 240px;
  max-width: 520px;
}
.footer-brand{
  font-size: 1.05rem;
  margin-bottom: .35rem;
}
.footer-meta{
  opacity: .95;
}
.footer-meta a{
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}
.footer-links{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 180px;
}
.footer-links a{
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  opacity: .95;
}
.footer-links a:hover{
  color: var(--accent-color);
}
.footer-copy{
  width: 100%;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(255,255,255,.2);
  opacity: .95;
}

/* Mascota en Contacto (debajo del horario) */
.mascota-contacto{
  margin-top: 12px;
  text-align: center;
}

.mascota-contacto img{
  max-width: 220px;
  width: 100%;
  height: auto;
  display: inline-block;
}

/* ====== Mobile + Conversion PRO (Overlay Nav + Sticky CTA) ====== */
html, body { overflow-x: hidden; }

/* Evita zoom incómodo en iPhone */
input, select, textarea, button { font-size: 16px; }

/* Overlay (se crea por JS) */
.nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 1090; /* debajo del panel */
}
.nav-overlay.is-visible{
  opacity: 1;
  pointer-events: auto;
}

/* Bloqueo scroll cuando el menú está abierto */
body.nav-locked{
  overflow: hidden;
}

/* Estado activo en menú */
.nav-menu a[aria-current="page"]{
  color: var(--accent-color);
}

/* Botón hamburguesa */
.nav-toggle{
  display: none;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  padding: .62rem .72rem;
  border-radius: 14px;
  cursor: pointer;
  line-height: 0;
}
.nav-toggle:focus{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 2px;
}
.nav-toggle-bar{
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  margin: 4px 0;
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
}

/* Animación a "X" */
.site-nav.nav-open .nav-toggle-bar:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}
.site-nav.nav-open .nav-toggle-bar:nth-child(2){
  opacity: 0;
}
.site-nav.nav-open .nav-toggle-bar:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}

/* ====== Nav responsive (panel lateral) ====== */
@media (max-width: 900px){
  header nav{
    flex-wrap: wrap;
    gap: .75rem;
    padding: .9rem 5%;
  }

  .nav-toggle{ display: inline-flex; align-items:center; justify-content:center; }

  /* Panel lateral */
  header nav ul.nav-menu{
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(86vw, 360px);
    background: var(--primary-color);
    flex-direction: column;
    gap: 0;
    padding: 5.1rem 0 1rem; /* deja aire para header */
    margin: 0;
    transform: translateX(105%);
    transition: transform .26s cubic-bezier(.2,.8,.2,1);
    box-shadow: -14px 0 32px rgba(0,0,0,.35);
    overflow-y: auto;
    z-index: 1100;
  }
  header nav.site-nav.nav-open ul.nav-menu{
    transform: translateX(0);
  }

  header nav ul.nav-menu li{ width: 100%; }
  header nav ul.nav-menu li a{
    display: block;
    padding: .92rem 7%;
  }
  header nav ul.nav-menu li a.nav-cta{
    margin: .4rem 7% .6rem;
    text-align: center;
    display: block;
  }

  /* Oculta FABs en móvil para no chocar con la barra sticky */
  .fab-social{ display: none !important; }

  /* Hero más compacto en móvil */
  .hero{
    height: auto;
    padding: 3.6rem 6% !important;
  }
  .hero h1{ font-size: 2rem; }
  .hero p{ font-size: 1.05rem; }
}

@media (max-width: 420px){
  header .logo img{ height: 34px; }
}

/* ====== Sticky CTA (móvil) - se crea por JS ====== */
.sticky-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 -8px 22px rgba(0,0,0,.10);
  z-index: 900;
  display: none;
}
.sticky-cta .sticky-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: .75rem .9rem calc(.75rem + env(safe-area-inset-bottom));
  display: flex;
  gap: .7rem;
}
.sticky-cta a{
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  border-radius: 14px;
  padding: .88rem .9rem;
  border: 1px solid rgba(0,0,0,.12);
}
.sticky-cta a.sticky-wa{
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}
.sticky-cta a.sticky-quote{
  background: #fff;
  color: var(--secondary-color);
}
body.has-sticky-cta{
  padding-bottom: 84px; /* evita que tape contenido */
}
@media (max-width: 900px){
  .sticky-cta{ display: block; }
}

/* Mapa embed (Contacto) */
.map-embed{
  margin-top: 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}
.map-embed iframe{
  width: 100%;
  height: 220px;
  border: 0;
  display: block;
}
.map-embed .map-link{
  padding: .65rem .85rem;
  text-align: center;
}
.map-embed .map-link a{
  color: var(--secondary-color);
  font-weight: 700;
  text-decoration: none;
}
.map-embed .map-link a:hover{ text-decoration: underline; }


/* ===== Tools pages (Herramientas / RRHH) ===== */
.hero-tools .hero-content{max-width:1100px;margin:0 auto;padding:0 5%;}
.hero-tools .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;}
.hero-tools .hero-bullets{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-weight:600;}
.hero-tools .hero-bullets span{background:rgba(255,255,255,.14);padding:8px 10px;border-radius:999px;}

.section{padding:60px 0;}
.section-alt{background:#f6f8fb;}
.container{max-width:1100px;margin:0 auto;padding:0 5%;}
.muted{opacity:.82}
.tiny{font-size:.86rem;line-height:1.35}

.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px;}
.tool-card{border-radius:18px;padding:18px;box-shadow:0 12px 30px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.06);}
.tool-card h3{margin:0 0 10px 0;}
.tool-row{display:flex;flex-direction:column;gap:6px;margin:10px 0;}
.tool-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.tool-row input,.tool-row select,.tool-row textarea{padding:12px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.12);font-family:inherit;font-size:16px;}
.tool-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.tool-result{margin-top:12px;padding:12px;border-radius:12px;background:rgba(30,90,137,.08);border:1px solid rgba(30,90,137,.12);}
.embed-card{border-radius:18px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 12px 30px rgba(0,0,0,.06);}
.embed-card iframe{width:100%;height:680px;border:0;background:#fff;}

.link-card{display:block;text-decoration:none;color:inherit;}
.link-pill{display:inline-block;margin-top:10px;font-weight:700;color:#1e5a89;}

.cta-strip{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:18px;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 12px 30px rgba(0,0,0,.06);}
.cta-strip p{margin:6px 0 0 0}

.calendar-list{margin-top:14px;display:grid;gap:10px;}
.calendar-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;background:#fff;border:1px solid rgba(0,0,0,.08);}
.calendar-date{min-width:105px;font-weight:800;color:#1e5a89;}
.calendar-text strong{display:block;margin-bottom:2px;}

@media (max-width: 900px){
  .tool-grid{grid-template-columns:1fr;}
  .tool-cols{grid-template-columns:1fr;}
  .embed-card iframe{height:760px;}
  .cta-strip{flex-direction:column;align-items:flex-start}
}


/* Liquidación preview */
.liq-preview{background:#fff;border:1px dashed rgba(0,0,0,.18);border-radius:14px;padding:14px;min-height:220px}
.liq-preview table{width:100%;border-collapse:collapse;margin-top:10px}
.liq-preview th,.liq-preview td{border-bottom:1px solid rgba(0,0,0,.08);padding:8px 6px;text-align:left;font-size:.95rem}
.liq-preview .right{text-align:right}
.liq-preview .liq-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.liq-preview .liq-head strong{font-size:1.05rem}


/* Calendario oficial SII (sin iframe) */
.calendar-official-box{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px;border:1px solid rgba(0,0,0,.10);border-radius:16px;background:rgba(0,0,0,.02);}
.calendar-icon{font-size:28px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(30,90,137,.10);}
.calendar-official-text{flex:1;}
@media (max-width:768px){.calendar-official-box{flex-direction:column;align-items:flex-start}.calendar-official-box a{width:100%;text-align:center}}