/* ==========================================================================
   AGIL PRO — Red de Productores de Seguros
   CSS limpio (vanilla), recreado a partir del sitio original WordPress+Elementor
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES (paleta y tipografia extraidas del Kit Global de Elementor
      -- elementor-kit-7 / post-7.css -- del sitio original)
   -------------------------------------------------------------------------- */
:root {
  /* Colores de marca (Elementor Global Kit) */
  --color-primary: #29900D;      /* verde principal */
  --color-primary-hover: #03b800;/* verde hover (usado en links del menu original) */
  --color-secondary: #00507C;    /* azul secundario (titulo hero, boton hero) */
  --color-accent: #61CE70;       /* verde claro de acento */
  --color-text: #7A7A7A;         /* gris texto de parrafo */
  --color-heading: #192a3d;      /* azul muy oscuro para titulos */
  --color-white: #FFFFFF;
  --color-bg-alt: #f2f5f7;       /* fondo gris muy claro para secciones alternas */
  --color-border: #e1e8ed;

  /* Tipografia (Roboto / Roboto Slab, self-hosted via Elementor en el original) */
  --font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-secondary: 'Roboto Slab', Georgia, serif;

  /* Espaciado */
  --container-max: 1290px;
  --container-padding: 20px;
  --section-spacing: 90px;
  --section-spacing-mobile: 50px;

  /* Otros */
  --radius: 2px;
  --shadow-soft: 0px 10px 50px 0px rgba(0, 0, 0, 0.1);
  --transition: 0.3s ease;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-heading);
  margin: 0 0 20px;
}

h1 { font-size: clamp(28px, 4vw, 46px); }
h2 { font-size: clamp(24px, 3.2vw, 36px); }
h4 { font-size: 22px; }
h5 { font-size: 15px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }

p { margin: 0 0 16px; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section { padding: var(--section-spacing) 0; }

@media (max-width: 767px) {
  .section { padding: var(--section-spacing-mobile) 0; }
}

.btn-agilpro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background-color: var(--color-secondary);
  color: var(--color-white);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity var(--transition);
}

.btn-agilpro:hover { opacity: 0.85; }

/* --------------------------------------------------------------------------
   3. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 90px;
}

.site-logo img { max-height: 60px; width: auto; }

.main-nav ul { display: flex; gap: 32px; }

.main-nav a {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-primary-hover);
  transition: color var(--transition);
}

.main-nav a:hover,
.main-nav a[aria-current="page"] { color: var(--color-primary); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 26px;
  height: 2px;
  background-color: var(--color-heading);
}

@media (max-width: 767px) {
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: 78vw;
    max-width: 320px;
    height: 100vh;
    background-color: var(--color-heading);
    padding: 90px 30px 30px;
    transform: translateX(100%);
    transition: transform var(--transition);
  }

  .main-nav.is-open { transform: translateX(0); }

  .main-nav ul { flex-direction: column; gap: 24px; }

  .main-nav a { color: var(--color-white); font-size: 16px; }

  .nav-toggle { display: flex; }
}

/* --------------------------------------------------------------------------
   4. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* padding y position replican el original (post-10.css): sin overlay,
     cover anclado arriba-a-la-izquierda — por eso en mobile se ve casi
     blanco (solo se asoma el borde de la cuña verde) y en desktop aparece
     completa con la foto */
  padding: 250px 15px;
  background-image: url('../img/hero-bg.png'); /* fallback si el navegador no soporta webp */
  background-size: cover;
  background-position: 0% 0%;
  background-repeat: no-repeat;
}

/* WebP para navegadores que lo soportan (todos los modernos): -93% de peso vs el PNG original */
@supports (background-image: url('data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==')) {
  .hero { background-image: url('../img/hero-bg.webp'); }
}

.hero-content h1:first-child { color: var(--color-secondary); }

.hero-content .hero-subtitle {
  max-width: 640px;
  margin: 0 0 20px;
  line-height: 1.3;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 400;
  color: var(--color-text);
  text-transform: none;
}

/* --------------------------------------------------------------------------
   5. QUIENES SOMOS
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .about { grid-template-columns: 1fr 1fr; gap: 60px; }
}

.about-media img { border-radius: var(--radius); }

/* --------------------------------------------------------------------------
   6. RED DE BENEFICIOS (feed image + counters)
   -------------------------------------------------------------------------- */
.benefits { background-color: var(--color-bg-alt); }

.benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .benefits-grid { grid-template-columns: 1fr 1fr; gap: 60px; }
}

.benefits-media img { border-radius: var(--radius); max-width: 420px; margin: 0 auto; }

.benefits-eyebrow {
  color: var(--color-primary);
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.counters {
  display: flex;
  gap: 50px;
  margin-top: 30px;
}

.counter-item { text-align: left; }

.counter-number {
  display: flex;
  align-items: baseline;
  font-size: 56px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1;
}

.counter-item h3 { margin: 10px 0 0; font-size: 16px; color: var(--color-text); font-weight: 500; }

/* --- entrance animation: slideInLeft (confirmed via data-settings) --- */
.js-animate {
  visibility: hidden;
}

.js-animate.is-visible {
  visibility: visible;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.js-animate.slideInLeft.is-visible { animation-name: slideInLeft; }

@keyframes slideInLeft {
  from { transform: translate3d(-100%, 0, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); }
}

/* --- entrance animation: fadeInUp (confirmada via data-settings) --- */
.js-animate.fadeInUp.is-visible { animation-name: fadeInUp; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to { opacity: 1; transform: none; }
}

/* --- entrance animation: fadeInDown (confirmada via data-settings, Nosotros/Contacto) --- */
.js-animate.fadeInDown.is-visible { animation-name: fadeInDown; }

@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   7. COMPANIAS (Bootstrap Carousel de tarjetas — ver seccion 17 para el
      detalle del carrusel; Bootstrap se carga solo en index.html)
   -------------------------------------------------------------------------- */
.companies { text-align: center; background-color: var(--color-bg-alt); }

.companies h2 {
  /* color y tamaño replican el original: elementor-heading-title.elementor-size-xxl
     con color: var(--e-global-color-primary) (verde), font-size 59px en desktop */
  color: var(--color-primary);
  font-size: clamp(28px, 5vw, 59px);
  margin-bottom: 50px;
}

/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
.footer-divider {
  background-color: var(--color-primary);
  padding: 60px 0;
}

/* animated-slow original (2s) para la franja decorativa */
.footer-divider.js-animate.is-visible { animation-duration: 2s; }

.site-footer {
  background-color: var(--color-heading);
  color: rgba(255, 255, 255, 0.75);
  padding: 70px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 50px;
}

@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
}

.footer-brand img { max-width: 220px; margin-bottom: 16px; filter: brightness(0) invert(1); }

.footer-brand p { color: rgba(255, 255, 255, 0.6); margin-bottom: 4px; }

.social-icons { display: flex; gap: 14px; margin-top: 20px; }

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  transition: transform var(--transition), background-color var(--transition);
}

/* --- hover animation: elementor-animation-grow (confirmed via class in original HTML) --- */
.social-icons a:hover,
.social-icons a:focus {
  transform: scale(1.1);
  background-color: var(--color-primary);
}

.social-icons svg { width: 18px; height: 18px; fill: currentColor; }

.footer-heading {
  color: var(--color-white);
  font-size: 16px;
  margin-bottom: 18px;
}

.footer-contact li { margin-bottom: 10px; color: rgba(255, 255, 255, 0.7); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------------
   9. WHATSAPP FLOAT (reemplazo simple del plugin JoinChat)
   -------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 200;
  transition: transform var(--transition);
}

.whatsapp-float:hover { transform: scale(1.08); }

.whatsapp-float svg { width: 28px; height: 28px; fill: var(--color-white); }

/* --------------------------------------------------------------------------
   10. PAGE BANNER (imagen ancha de encabezado — usada en Contacto)
   -------------------------------------------------------------------------- */
.page-banner img {
  width: 100%;
  display: block;
}

/* --------------------------------------------------------------------------
   11. SUMATE A LA RED (bloque compartido por Nosotros y Contacto:
       columna de texto + logo con fadeInDown, columna de formulario con
       fadeInUp — el grid de 2 columnas lo resuelve Bootstrap row/col-md-6)
   -------------------------------------------------------------------------- */
.join-section { background-color: var(--color-bg-alt); }

.join-eyebrow {
  color: var(--color-primary);
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.join-logo { max-width: 260px; margin-top: 24px; }

/* --------------------------------------------------------------------------
   12. FORMULARIO DE CONTACTO ("Súmate a nuestra Red")
   -------------------------------------------------------------------------- */
.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  background-color: var(--color-white);
  padding: 32px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 560px) {
  .contact-form .form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}

.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 6px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--color-heading);
  background-color: var(--color-white);
  transition: border-color var(--transition);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
}

.form-field textarea { resize: vertical; min-height: 110px; }

/* honeypot anti-spam: oculto para personas, visible para bots */
.form-field.is-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form .btn-agilpro {
  border: none;
  width: 100%;
}

.form-status {
  font-size: 14px;
  min-height: 20px;
}

.form-status[data-state="error"] { color: #c0392b; }

/* --------------------------------------------------------------------------
   13. MODAL DE CONFIRMACION DE ENVIO
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(25, 42, 61, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background-color: var(--color-white);
  border-radius: 8px;
  max-width: 420px;
  width: 100%;
  padding: 40px 32px;
  text-align: center;
  transform: translateY(12px);
  transition: transform var(--transition);
}

.modal-overlay.is-open .modal-box { transform: translateY(0); }

.modal-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.modal-icon svg { width: 28px; height: 28px; fill: currentColor; }

.modal-box[data-state="error"] .modal-icon { background-color: #c0392b; }

.modal-box h3 { margin-bottom: 10px; }

.modal-box p { color: var(--color-text); margin-bottom: 24px; }

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  background-color: var(--color-heading);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition);
}

.modal-close:hover { opacity: 0.85; }

/* --------------------------------------------------------------------------
   14. GRILLA DE COMPANIAS (Nosotros — grilla estatica de tarjetas,
       a diferencia del carrusel de Home; columnas via Bootstrap
       row/col-6 col-md-3)
   -------------------------------------------------------------------------- */
.companies-grid img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: opacity var(--transition), filter var(--transition);
}

.companies-grid img:hover { filter: grayscale(0); opacity: 1; }

/* --------------------------------------------------------------------------
   15. MAPA (Contacto)
   -------------------------------------------------------------------------- */
.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.map-embed iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   16. INFO DE CONTACTO (Contacto — grilla de icono + dato;
       columnas via Bootstrap row/col-md-4)
   -------------------------------------------------------------------------- */
.contact-info-grid { text-align: center; }

.contact-info-item .icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.contact-info-item .icon-circle svg { width: 24px; height: 24px; fill: currentColor; }

.contact-info-item h2,
.contact-info-item a {
  font-size: 20px;
  color: var(--color-heading);
}

.contact-info-logo { max-width: 220px; margin: 10px auto 0; }

/* --------------------------------------------------------------------------
   17. CARRUSEL DE COMPANIAS — Bootstrap (solo Home)
       Usa el grid (row/col) y el componente Carousel de Bootstrap para las
       proporciones y breakpoints; estas reglas solo ajustan la piel visual
       (tarjetas grandes, flechas y puntos) para que coincida con la
       referencia. Bootstrap se carga unicamente en index.html.
   -------------------------------------------------------------------------- */
.companies-carousel {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 50px;
}

.company-card {
  background-color: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 42, 67, 0.08);
  padding: 30px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.company-card img {
  max-height: 90px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* flechas: los iconos por defecto de Bootstrap son blancos (pensados para
   fondos oscuros/imagenes); los invertimos y los montamos en un circulo
   blanco para que se vean sobre el fondo claro de la seccion */
.companies-carousel .carousel-control-prev,
.companies-carousel .carousel-control-next {
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  background-color: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(16, 42, 67, 0.15);
  opacity: 1;
}

.companies-carousel .carousel-control-prev { left: -6px; }
.companies-carousel .carousel-control-next { right: -6px; }

.companies-carousel .carousel-control-prev-icon,
.companies-carousel .carousel-control-next-icon {
  width: 16px;
  height: 16px;
  filter: invert(23%) sepia(9%) saturate(1029%) hue-rotate(169deg) brightness(94%) contrast(90%);
}

.companies-carousel .carousel-indicators {
  position: static;
  margin-top: 30px;
}

.companies-carousel .carousel-indicators [data-bs-target] {
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-border);
  opacity: 1;
  margin: 0 5px;
}

.companies-carousel .carousel-indicators .active { background-color: var(--color-primary); }

@media (max-width: 575px) {
  .companies-carousel { padding: 0 40px; }
  .companies-carousel .carousel-control-prev { left: -14px; }
  .companies-carousel .carousel-control-next { right: -14px; }
}

/* --------------------------------------------------------------------------
   18. SEO / ACCESIBILIDAD
   -------------------------------------------------------------------------- */
/* h1 de Nosotros y Contacto: conserva el tamaño visual del h2 original */
.page-title { font-size: clamp(24px, 3.2vw, 36px); }

/* enlace "Saltar al contenido": visible solo al navegar con teclado */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 400;
  padding: 10px 16px;
  background-color: var(--color-heading);
  color: var(--color-white);
  border-radius: var(--radius);
  transition: top var(--transition);
}

.skip-link:focus { top: 12px; }

/* credito del desarrollador en el footer */
.footer-credit {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.footer-credit:hover,
.footer-credit:focus { color: var(--color-accent); }