/*
 * Global Stylesheet for SeguroLaboral.es
 *
 * Este archivo define el aspecto moderno y relajado de todo el sitio. Para
 * atraer a un público joven y digital, se ha actualizado la paleta de
 * colores a tonos azules profundos y verdes océano combinados con un acento
 * cálido. También se integra la tipografía "Poppins" de Google Fonts para
 * un aspecto limpio y contemporáneo. Las media queries garantizan un
 * comportamiento responsive impecable en móviles y ordenadores.
 */

/* Importar tipografía moderna desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* CSS reset and box sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

/* Colour palette variables */
:root {
  /* Paleta actualizada basada en el logotipo: azul profundo, verde océano y un acento cálido */
  --primary-color: #003b73;    /* azul marino intenso */
  --secondary-color: #008e8d;  /* verde azulado */
  --accent-color: #f29a2e;     /* naranja cálido para botones y detalles */
  --dark-color: #022d4e;       /* azul noche para títulos */
  --light-gray: #f7f9fc;
  --mid-gray: #e9edf2;
  --text-color: #2c3e50;
  --text-light: #5d6d7e;
}

/* Utility classes */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.pt-2 { padding-top: 2rem; }
.pb-2 { padding-bottom: 2rem; }
.btn {
  display: inline-block;
  background-color: var(--primary-color);
  color: #fff;
  padding: 0.7rem 1.4rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn:hover,
.btn:focus {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
}
.btn.secondary {
  background-color: var(--secondary-color);
}
.btn.secondary:hover {
  background-color: var(--primary-color);
  transform: translateY(-2px);
}

/* Header and Navigation */
header {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}
header .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Increase header height slightly to accommodate a larger logo */
  height: 72px;
  padding: 0 1rem;
}
header .logo {
  /* Logo se muestra como contenedor flexible para alojar la imagen SVG */
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Ajuste de tamaño del logotipo */
header .logo img {
  /* Increase the logo height for better visibility; width scales proportionally */
  height: 56px;
  width: auto;
}
nav ul {
  list-style: none;
  display: flex;
  /* Evitamos que el menú se divida en dos líneas en resoluciones medias
     manteniendo todos los elementos en una sola fila. Para resoluciones
     pequeñas, el menú se oculta y se activa el menú móvil. */
  flex-wrap: nowrap;
  /* Reducimos ligeramente el espaciado entre elementos para ahorrar ancho */
  gap: 1rem;
}
nav a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 0;
  transition: color 0.2s ease;
}
nav a:hover,
nav a:focus {
  color: var(--primary-color);
}

/* Mobile menu toggle (hamburger icon) */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  height: 3px;
  background-color: var(--text-color);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Transform the hamburger into a cross when menu is open */
header.open .menu-toggle span:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}
header.open .menu-toggle span:nth-child(2) {
  opacity: 0;
}
header.open .menu-toggle span:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}

/* Hero section */
.hero {
  position: relative;
  height: 60vh;
  min-height: 400px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Ajustamos el degradado del héroe para mejorar el contraste de texto.
     Aumentamos la opacidad del negro para cumplir el contraste mínimo recomendado (4.5:1). */
  background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.6)), url('assets/hero-bg-modern.png');
  background-size: cover;
  background-position: center;
}
.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.hero p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 1.5rem;
  color: #e3eaf0;
}

/* Oferta: beneficios */
.offer-benefits .benefits-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}
.offer-benefits .benefit-item {
  flex: 1 1 280px;
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  text-align: center;
}
.offer-benefits .benefit-item h3 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--dark-color);
}
.offer-benefits .benefit-item p {
  color: var(--text-light);
  font-size: 0.9rem;
}

/* Oferta: testimonios */
.offer-testimonials {
  background-color: var(--light-gray);
  padding: 4rem 0;
}
.offer-testimonials .testimonials-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}
.offer-testimonials .testimonial {
  flex: 1 1 300px;
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  position: relative;
}
.offer-testimonials .testimonial p {
  font-style: italic;
  margin-bottom: 1rem;
}
.offer-testimonials .testimonial span {
  font-size: 0.85rem;
  color: var(--text-light);
}

/* Oferta: formulario de registro */
.offer-form {
  padding: 4rem 0;
}
.offer-form .lead-form {
  max-width: 700px;
  margin: 0 auto;
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.offer-form .lead-form .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.offer-form .lead-form input,
.offer-form .lead-form select {
  flex: 1 1 250px;
  padding: 0.8rem;
  border: 1px solid var(--mid-gray);
  border-radius: 4px;
  font-size: 0.9rem;
}
.offer-form .lead-form button {
  padding: 0.8rem 2rem;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .offer-benefits .benefits-grid,
  .offer-testimonials .testimonials-grid {
    flex-direction: column;
    gap: 1.5rem;
  }
  .offer-form .lead-form .form-row {
    flex-direction: column;
  }
}

/* Sections */
section {
  padding: 4rem 0;
}
section:nth-child(even) {
  background-color: var(--light-gray);
}
.section-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
  color: var(--dark-color);
}
.section-subtitle {
  max-width: 650px;
  margin: 0 auto 2rem;
  color: var(--text-light);
  text-align: center;
}

/* Features grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.feature-item {
  background-color: #fff;
  border-radius: 6px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}
.feature-item:hover {
  transform: translateY(-5px);
}
.feature-item img {
  width: 60px;
  height: 60px;
  margin-bottom: 1rem;
}
.feature-item h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}
.feature-item p {
  color: var(--text-light);
}

/* Plans table */
.plans-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.plans-table th,
.plans-table td {
  border: 1px solid var(--mid-gray);
  padding: 1rem;
  text-align: center;
}
.plans-table th {
  background-color: var(--primary-color);
  color: #fff;
}
.plans-table td.plan-name {
  font-weight: 600;
  background-color: var(--mid-gray);
}
.plans-table tr:nth-child(even) td {
  background-color: #fff;
}
.plan-cta {
  margin-top: 0.5rem;
}

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  counter-reset: step;
}
.step {
  background-color: #fff;
  border-radius: 6px;
  padding: 2rem;
  position: relative;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: var(--primary-color);
  color: #fff;
  border-radius: 50%;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  text-align: center;
}
.step h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: var(--primary-color);
}
.step p {
  color: var(--text-light);
  font-size: 0.95rem;
}

/* Success stories */
.case-card {
  background-color: #fff;
  border-radius: 6px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.case-card h3 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}
.case-card strong {
  color: var(--dark-color);
}

/* Accordion for FAQ */
.accordion {
  border: 1px solid var(--mid-gray);
  border-radius: 6px;
  overflow: hidden;
}
.accordion-item + .accordion-item {
  border-top: 1px solid var(--mid-gray);
}
.accordion-header {
  background-color: #fff;
  cursor: pointer;
  padding: 1rem;
  font-weight: 600;
  position: relative;
}
.accordion-header::after {
  content: '+';
  position: absolute;
  right: 1rem;
  transition: transform 0.3s;
}
.accordion-header.active::after {
  transform: rotate(45deg);
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: #fff;
  padding: 0 1rem;
}
.accordion-content p {
  padding: 1rem 0;
  color: var(--text-light);
}

/* Contact form */
.contact-form {
  background-color: #fff;
  padding: 2rem;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  max-width: 600px;
  margin: 0 auto;
}
.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--mid-gray);
  border-radius: 4px;
  font-size: 1rem;
}
.contact-form button {
  width: 100%;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  padding: 0.75rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.contact-form button:hover {
  background-color: var(--secondary-color);
}

/* Blog cards */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.blog-card {
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  transform: translateY(-5px);
}
.blog-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.blog-card .blog-content {
  padding: 1rem;
  flex: 1;
}
.blog-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}
.blog-card p {
  color: var(--text-light);
  font-size: 0.95rem;
}
.blog-card a {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--secondary-color);
  text-decoration: none;
  font-weight: 600;
}
.blog-card a:hover {
  text-decoration: underline;
}

/* Newsletter / lead magnet */
.newsletter {
  background-color: var(--mid-gray);
  padding: 3rem 0;
}
.newsletter h2 {
  color: var(--dark-color);
  margin-bottom: 0.5rem;
}
.newsletter p {
  color: var(--text-light);
  margin-bottom: 1.5rem;
}
.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: 500px;
  margin: 0 auto;
}
.newsletter-form input[type="email"] {
  flex: 1 1 220px;
  padding: 0.7rem;
  border: 1px solid var(--mid-gray);
  border-radius: 4px;
  font-size: 1rem;
}
.newsletter-form button {
  flex: 0 0 auto;
  padding: 0.7rem 1rem;
}

/* Oculta visualmente el elemento pero lo mantiene accesible para tecnologías asistivas. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Footer */
footer {
  background-color: var(--dark-color);
  color: #fff;
  padding: 2rem 1rem;
}
footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 1.5rem;
}
footer h4 {
  margin-bottom: 0.5rem;
  color: #fff;
}
footer ul {
  list-style: none;
}
footer li {
  margin-bottom: 0.5rem;
}
footer a {
  color: #cde4f2;
  text-decoration: none;
  font-size: 0.95rem;
}
footer a:hover {
  color: #fff;
  text-decoration: underline;
}
footer .social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
footer .social-icons a {
  color: #cde4f2;
  font-size: 1.5rem;
}

/*
 * Make all images fluid by default. Without this rule some pictures might
 * overflow their containers on narrow devices and appear distorted. Allowing
 * the browser to calculate the height automatically preserves the original
 * aspect ratio and prevents stretching.  This applies universally to
 * illustrative assets, blog thumbnails and logos.
 */
img {
  max-width: 100%;
  height: auto;
}

/*
 * Extra-small screens (phones). These overrides enhance the layout for
 * devices under 480px wide. We remove fixed hero heights, tighten
 * container margins and collapse multi‑column grids into single columns to
 * maximise legibility. Font sizes are slightly reduced to prevent line
 * breaks on small displays.
 */
@media (max-width: 480px) {
  /* Let the hero section grow naturally with its content instead of
     enforcing a viewport‑relative height. This avoids huge empty areas on
     very small screens. */
  .hero {
    height: auto;
    min-height: unset;
    padding: 3rem 0;
  }
  .hero h1 {
    font-size: 1.8rem;
  }
  .hero p {
    font-size: 0.9rem;
  }
  /* Slightly widen the page wrapper and reduce horizontal padding to give
     content more breathing room. */
  .container {
    width: 95%;
    padding: 0.5rem;
  }
  /* Collapse multi‑column grids into a single column on very narrow
     viewports. */
  .features-grid,
  .steps,
  .blog-grid,
  footer .footer-grid {
    grid-template-columns: 1fr;
  }
  /* Reduce the base size of section titles to fit better on small
     screens. */
  .section-title {
    font-size: 1.6rem;
  }
}

/* Floating chat widget */
.chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: var(--primary-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease;
}
.chat-widget:hover {
  background-color: var(--secondary-color);
}

/* Icon inside chat widget */
.chat-widget i {
  font-size: 1.5rem;
}

/* Media queries */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  /* Navigation becomes mobile-friendly */
  nav ul {
    display: none;
    flex-direction: column;
    list-style: none;
  }
  /* Full‑screen mobile menu overlay when header is open */
  header.open nav ul {
    display: flex;
    position: fixed;
    /*
     * The overlay should begin directly below the sticky header.  The
     * header height was increased from 64px to 72px to better
     * accommodate the logo.  Updating the offset here ensures the
     * menu does not overlap the header on mobile devices.
     */
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 999;
    padding: 1.5rem 1rem;
    gap: 1rem;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  header.open nav ul li a {
    font-size: 1.25rem;
    padding: 0.5rem 0;
  }
  .menu-toggle {
    display: flex;
  }
  /* Adjust nav container alignment on mobile */
  header .nav-container {
    height: auto;
    flex-direction: row;
    align-items: center;
  }
  /* Limit logo size on mobile for better proportions */
  .logo img {
    max-width: 140px;
    height: auto;
  }
  .plans-table {
    font-size: 0.85rem;
  }

  /*
   * Rediseño completo de la versión móvil basándonos en la estructura de
   * escritorio.  Para pantallas de hasta 768 px organizamos los
   * formularios y el contenido en columnas únicas, reducimos tamaños de
   * fuente y eliminamos alturas fijas para que todo fluya de manera
   * natural.  Estos estilos complementan las reglas ya presentes para
   * garantizar una experiencia óptima en móviles.
   */
  .landing-hero {
    height: auto;
    min-height: unset;
    padding: 3rem 0;
  }
  .landing-hero h1 {
    font-size: 2.2rem;
  }
  .landing-hero p {
    font-size: 1rem;
  }
  /* Ajustar la lista de beneficios del héroe para móviles; ya se
     establece flex-direction: column en otra media query, aquí se
     asegura que ocupe todo el ancho disponible */
  .hero-benefits {
    width: 100%;
  }
  /* Colocar los campos del formulario de registro en columna para evitar
     desbordamientos horizontales.  También se eliminan los tamaños
     mínimos de flex para que se ajusten al contenedor. */
  .signup-form {
    flex-direction: column;
    align-items: stretch;
  }
  .signup-form input,
  .signup-form button {
    /* Do not allow form controls to grow vertically on mobile. When
       flex-grow is left enabled the inputs stretch to fill the
       available height, resulting in excessively tall fields. Use
       flex:none so height is determined by content and padding.
       The width remains 100% to span the container. */
    flex: none;
    width: 100%;
  }
  .signup-form input {
    flex: none;
    width: 100%;
  }
  /* Provide spacing between stacked form controls */
  .signup-form input:not(:last-child),
  .signup-form button:not(:last-child) {
    margin-bottom: 0.5rem;
  }
  /* Homogeneizar el aspecto de las tarjetas de planes y otros
     componentes: ocupar todo el ancho y espaciar mediante margen
     inferior */
  .pack-card,
  .beneficio-item,
  .paso-item,
  .testimonio-item {
    max-width: 100%;
    width: 100%;
    margin-bottom: 1.5rem;
  }
  /* Ajustes adicionales en secciones para mejorar el espaciado */
  .planes-section,
  .beneficios-section,
  .como-section,
  .testimonios-section,
  .cta-section,
  .faq-section {
    padding: 2.5rem 0;
  }
  /* Reordenar elementos en la sección de escudos (empleado.html) */
  .escudos-grid {
    flex-direction: column;
    gap: 2rem;
  }
  .escudo-item {
    max-width: 100%;
    width: 100%;
    text-align: center;
  }
  /* Footer se apila en columna y centra sus elementos */
  .footer-grid {
    flex-direction: column;
    align-items: center;
  }
  .footer-grid > div {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
  }

  /* When the mobile menu is open, prevent the rest of the page from
     scrolling.  The JavaScript adds a .menu-open class on the body to
     indicate that the overlay is active.  Using overflow: hidden here
     ensures that users cannot scroll the underlying content when the
     menu covers the page. */
  body.menu-open {
    overflow: hidden;
  }

  /*
   * Ocultar elementos de la cabecera (logo y selector de audiencia) cuando
   * el menú móvil está desplegado.  Esto evita que el logo y el botón
   * sigan visibles encima del panel de navegación, que era la causa de
   * la superposición observada en la captura de pantalla.
   */
  header.open .logo,
  header.open .audience-toggle {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   Custom enhancements following the UI/UX audit
   ------------------------------------------------------------------------- */
/* Button for client access placed next to the navigation menu. It inherits
   the existing button styling but uses the secondary colour by default. */
/* Estilo del botón de acceso a clientes dentro del menú de navegación. Al estar
   integrado como un elemento de la lista, no necesita un margen lateral
   adicional. */
.btn-nav {
  display: inline-block;
  background-color: var(--secondary-color);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn-nav:hover,
.btn-nav:focus {
  background-color: var(--primary-color);
  transform: translateY(-2px);
}

/* Margen superior adicional para los botones de llamada a la acción en los
   artículos del blog. Así se separan del párrafo anterior y mejora la
   legibilidad. */
article a.btn {
  /* Añadimos espacio antes de las llamadas a la acción en artículos para que
     respiren respecto al texto anterior. */
  margin-top: 1.5rem;
  display: inline-block;
}

/* Hero benefit list used on the homepage to highlight key advantages */
/* Hero benefit list used on the homepage to highlight key advantages */
.hero-benefits {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.hero-benefits li {
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: #e3eaf0;
  position: relative;
  padding-left: 1.4rem;
}
/* Add a check mark before each benefit item */
.hero-benefits li::before {
  /* Use a single escaped unicode check mark. Two backslashes produce the literal \2714 in CSS; one backslash correctly inserts the character. */
  content: '\2714';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-color);
  font-weight: 700;
}

/*
 * Mobile adjustments for the hero benefits list.  On narrow screens
 * it is clearer to stack the list vertically rather than attempting
 * to squeeze all items onto a single row.  The items align to the
 * left and keep their check marks.  Font sizes are reduced slightly
 * to improve legibility on small devices.
 */
@media (max-width: 768px) {
  .hero-benefits {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .hero-benefits li {
    font-size: 0.9rem;
  }
}

/* Indicator for required form fields */
.required {
  color: var(--accent-color);
  margin-left: 0.25rem;
  font-weight: 700;
}

/* Ensure a minimum base font size for paragraphs and forms to improve legibility */
body {
  font-size: 16px;
}

/* ================================================================
   Landing Page Specific Styles
   Estas reglas amplían el diseño base para la nueva landing page
   de una sola sección. Se utilizan contenedores flexibles y
   tarjetas para presentar planes, beneficios y pasos de forma
   organizada y responsiva.
================================================================ */

/* Encabezado de la landing */
.landing-header {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Ajustes para el menú de navegación en la landing */
.landing-header nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.landing-header nav a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 0;
  transition: color 0.2s ease;
}
.landing-header nav a:hover,
.landing-header nav a:focus {
  color: var(--primary-color);
}

/* Estilo para el botón destacado en la navegación de la landing */
.landing-header .btn-nav {
  background-color: var(--accent-color);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin-left: 1rem;
}
.landing-header .btn-nav:hover,
.landing-header .btn-nav:focus {
  background-color: var(--primary-color);
  color: #fff;
}

/* Héroe de la landing */
/*
 * Héroe de la landing
 *
 * El enfoque mobile‑first prioriza una altura automática para que el
 * contenido determine el tamaño del héroe en pantallas pequeñas.  Se
 * establece una altura mínima para garantizar presencia visual en
 * sobremesa sin forzar espacios vacíos en móvil.  La superposición
 * utiliza un degradado ligero para mejorar la legibilidad del texto.
 */
.landing-hero {
  height: auto;
  min-height: 320px;
  padding: 3rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.1)), url('assets/hero-bg-modern.png');
  background-size: cover;
  background-position: center;
}
.landing-hero h1 {
  font-size: 2.8rem;
  margin-bottom: 0.8rem;
}
.landing-hero p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 1.5rem;
  color: #e3eaf0;
}

/* Formulario de registro en hero y CTA final */
.signup-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.signup-form input {
  flex: 1 1 200px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--mid-gray);
  border-radius: 4px;
  font-size: 1rem;
}
.signup-form button {
  flex: 1 1 auto;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  border-radius: 4px;
}

/* Pequeña variante para botones en tarjetas de planes */
.btn.small {
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
}

/* Introducción con imagen */
.intro-section {
  background-color: var(--light-gray);
  padding: 3rem 0;
}
.intro-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}
.intro-text {
  flex: 1 1 50%;
}
.intro-media {
  flex: 1 1 50%;
  text-align: center;
}
.intro-media img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  /* Limit the height of the illustration to prevent it from
     dominating the viewport on large displays. On very wide screens
     images can become overly tall; this cap preserves balance
     between text and imagery. */
  /* Reduce maximum height of the intro illustration so it does not
     dominate the section. On very wide screens this helps maintain a
     balanced layout between text and imagery. */
  max-height: 280px;
}

/* Sección de escudos para la página de empleados */
.escudos-section {
  background-color: var(--mid-gray);
  padding: 3rem 0;
}

.escudos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: stretch;
}

.escudo-item {
  flex: 1 1 280px;
  max-width: 400px;
  background-color: #fff;
  border: 1px solid var(--mid-gray);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.escudo-item img {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
}

.escudo-item h3 {
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.escudo-item p {
  color: var(--text-light);
  flex-grow: 1;
}

/* Sección de preguntas frecuentes */
.faq-section {
  background-color: var(--light-gray);
  padding: 3rem 0;
}
.faq-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--dark-color);
}
.faq-item + .faq-item {
  margin-top: 1.5rem;
}
.faq-item h3 {
  font-size: 1.2rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}
.faq-item p {
  color: var(--text-light);
}

/* Tarjetas de planes */
.pack-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2rem;
}
.pack-card {
  background-color: #fff;
  border: 1px solid var(--mid-gray);
  border-radius: 8px;
  padding: 1.5rem;
  flex: 1 1 280px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  /* Use a flexible column layout so that the call-to-action button
     aligns to the bottom of each card regardless of the amount of
     text in the feature list. This prevents buttons from being
     misaligned across cards. */
  display: flex;
  flex-direction: column;
}
.pack-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.3rem;
  color: var(--primary-color);
}
.pack-card .price {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 0.8rem;
}
.pack-card ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem 0;
  text-align: left;
  line-height: 1.5;
  color: var(--text-light);
}

/* Position the call-to-action inside each plan card at the bottom by
   giving it an automatic top margin. This works in conjunction with
   the flex column layout defined on .pack-card above. */
.pack-card a.btn {
  margin-top: auto;
}
.pack-card li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.4rem;
}
.pack-card li::before {
  /* Mostrar un icono de verificación estándar antes de cada característica.
     De esta manera no dependemos de librerías externas para las marcas
     de lista y garantizamos la alineación de todas las tarjetas. */
  content: '✔';
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-weight: 700;
  color: var(--secondary-color);
}

/* Beneficios */
.beneficios-section {
  background-color: #fff;
  padding: 3rem 0;
}
.beneficios-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2rem;
}
.beneficio-item {
  flex: 1 1 200px;
  text-align: center;
}
.beneficio-item i {
  font-size: 2rem;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
}
.beneficio-item h3 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}
.beneficio-item p {
  font-size: 0.9rem;
  color: var(--text-light);
}

/* Ajuste para imágenes de beneficios */
.beneficio-item img {
  width: 48px;
  height: 48px;
  margin-bottom: 0.5rem;
}

/* Cómo funciona */
.como-section {
  background-color: var(--light-gray);
  padding: 3rem 0;
}
.pasos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2rem;
}
.paso-item {
  flex: 1 1 250px;
  text-align: center;
  background-color: #fff;
  border: 1px solid var(--mid-gray);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.paso-num {
  display: inline-block;
  background-color: var(--secondary-color);
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  margin-bottom: 0.4rem;
}

/* Testimonios */
.testimonios-section {
  background-color: #fff;
  padding: 3rem 0;
}
.testimonios-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2rem;
}
.testimonio-item {
  flex: 1 1 280px;
  background-color: #fff;
  border: 1px solid var(--mid-gray);
  border-radius: 8px;
  padding: 1.2rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  font-style: italic;
}
.testimonio-item strong {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  color: var(--primary-color);
}

/* Sección CTA final */
.cta-section {
  background-color: var(--mid-gray);
  text-align: center;
  padding: 3rem 1rem;
}
.cta-section h2 {
  margin-bottom: 0.5rem;
}
.cta-section p {
  margin-bottom: 1rem;
  color: var(--text-light);
}

/* Footer personalizado para la landing */
.landing-footer {
  background-color: #fff;
  padding: 2rem 0;
  border-top: 1px solid var(--mid-gray);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}
.footer-grid > div {
  flex: 1 1 200px;
}
.footer-grid h4 {
  margin-bottom: 0.5rem;
}
.footer-grid ul {
  list-style: none;
  padding: 0;
}
.footer-grid li {
  margin-bottom: 0.4rem;
}
.footer-grid a {
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-grid a:hover {
  color: var(--primary-color);
}
.social-icons {
  display: flex;
  gap: 0.5rem;
}
.social-icons i {
  font-size: 1.4rem;
  color: var(--primary-color);
  transition: color 0.2s ease;
}
.social-icons a:hover i {
  color: var(--secondary-color);
}

/* Responsive ajustes para la landing */
@media (max-width: 768px) {
  .intro-grid,
  .pack-cards,
  .beneficios-grid,
  .pasos-grid,
  .testimonios-grid,
  .footer-grid {
    flex-direction: column;
    align-items: center;
  }
  .pack-card,
  .beneficio-item,
  .paso-item,
  .testimonio-item {
    max-width: 100%;
  }
}

/*
 * Audience toggle visibility management.
 * On larger screens we display the standalone audience-toggle element
 * (e.g., the “Soy Empresa” or “Soy Empleado” button next to the navigation).
 * On small screens (mobile), we hide that element and instead show a
 * dedicated list item inside the navigation (.audience-mobile).  This
 * ensures the audience selector appears within the mobile menu overlay
 * and does not float awkwardly above the content.
 */
.audience-mobile {
  display: none;
}
@media (max-width: 768px) {
  .audience-toggle {
    display: none;
  }
  .audience-mobile {
    display: block;
    /* Provide some vertical separation between the main navigation links
       and the audience selector when it is displayed inside the mobile
       menu. Without a margin the button can appear squished against
       adjacent links on very small screens. */
    margin-top: 1rem;
  }
  .audience-mobile a {
    display: inline-block;
    background-color: var(--secondary-color);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    width: 100%;
  }
  .audience-mobile a:hover,
  .audience-mobile a:focus {
    background-color: var(--primary-color);
    color: #fff;
  }
}