/* =========================
   Fuentes corporativas
   ========================= */

/* Coloca tus archivos .ttf/.otf con estos nombres en /assets/fonts/
   - Orion-Esparanto-Dika.ttf
   - Orion-Esparanto-Normala.ttf
   - Orion-Esparanto-Kursiva.ttf
   - Orion-Esparanto-DikaKursiva.ttf
   - DINNextLTPro-Regular.ttf
   - DINNextLTPro-Italic.ttf
   - DINNextLTPro-Light.ttf
*/

@font-face {
  font-family: "Orion Esparanto Dika";
  src: url("/assets/fonts/Orion-Esparanto-Dika.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Orion Esparanto Normala";
  src: url("/assets/fonts/Orion-Esparanto-Normala.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Orion Esparanto Kursiva";
  src: url("/assets/fonts/Orion-Esparanto-Kursiva.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Orion Esparanto Dika Kursiva";
  src: url("/assets/fonts/Orion-Esparanto-DikaKursiva.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DIN Next LT Pro";
  src: url("/assets/fonts/DINNextLTPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Next LT Pro";
  src: url("/assets/fonts/DINNextLTPro-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DIN Next LT Pro";
  src: url("/assets/fonts/DINNextLTPro-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Variables de color
   ========================= */
:root{
  --azul-oscuro:#20388A;
  --azul-claro:#1760A9;
  --gris-oscuro:#677072;
  --gris-claro:#DEDEDE;
  --white:#ffffff;
  --text:#1a1a1a;
  --verde:#25D366;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* Tipografía base: DIN Next LT Pro para párrafos */
body{
  font-family:"DIN Next LT Pro", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
}

/* Titulares: Orion Esparanto Dika */
h1,h2,h3,h4,h5,h6,.heading{
  font-family:"Orion Esparanto Dika", "DIN Next LT Pro", Arial, sans-serif;
  letter-spacing:.3px;
}

/* Subtítulos destacados */
.subtitle, .sub, blockquote cite{
  font-family:"Orion Esparanto Normala", "DIN Next LT Pro", Arial, sans-serif;
}
.subtitle-italic{
  font-family:"Orion Esparanto Kursiva", "DIN Next LT Pro", Arial, sans-serif;
  font-style:italic;
}
.subtitle-bold-italic{
  font-family:"Orion Esparanto Dika Kursiva", "DIN Next LT Pro", Arial, sans-serif;
  font-style:italic;
}

/* ========== Layout y componentes ========== */

.container{width:min(1150px,92%);margin-inline:auto}

.site-header{
  position:sticky;top:0;z-index:999;
  background:linear-gradient(90deg,var(--azul-oscuro),var(--azul-claro));
  color:var(--white);
  box-shadow:0 6px 18px rgba(0,0,0,.1);
}
.header-inner{
  display: flex; /* <-- Propiedad añadida */
  align-items: center;
  justify-content: space-between;
  padding: .9rem 0;
}
.brand .logo{font-family:"Orion Esparanto Dika", "DIN Next LT Pro", sans-serif;font-weight:800;letter-spacing:.5px;font-size:1.4rem}
.brand .logo span{color:#fff}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{color:#fff;text-decoration:none;padding:.5rem .6rem;border-radius:.5rem}
.nav a:hover{background:rgba(255,255,255,.12)}

.menu-toggle{display:none;background:transparent;border:0;color:#fff;font-size:1.6rem;cursor:pointer}

.dropdown{position:relative}
.dropbtn{background:transparent;border:0;color:#fff;cursor:pointer;padding:.5rem .6rem;border-radius:.5rem}
.dropbtn:hover{background:rgba(255,255,255,.12)}
.dropdown-content{
  display:none;position:absolute;top:110%;left:0;background:var(--white);min-width:240px;
  border-radius:.7rem;box-shadow:0 10px 30px rgba(0,0,0,.15);overflow:hidden
}
.dropdown-content a{color:#0f172a;display:block;padding:.8rem 1rem}
.dropdown-content a:hover{background:#f6f6f6}
.dropdown:hover .dropdown-content{display:block}

.btn{display:inline-block;text-decoration:none;border-radius:.8rem;padding:.75rem 1rem;font-weight:600}
.btn-cta{background:var(--verde);color:#fff}
.btn-primary{background:var(--azul-claro);color:#fff}
.btn-outline{border:2px solid var(--white);color:var(--white);background:transparent}

.hero{
  background:
    url('/assets/img/1.-Home-Banner-Principal.png') center/cover no-repeat;
  padding:clamp(3rem,7vw,6rem) 0;
  color:#0b1026;
}
.hero .grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2rem;
  align-items:center;
}
.hero h1{font-weight:800;font-size:clamp(2rem,5vw,3rem);margin:0 0 .7rem;color:var(--white)}
.hero p.lead{font-size:1.05rem;color:rgb(250, 250, 250);max-width:60ch}
.hero .card{background:#fff;border-radius:1rem;padding:1.25rem;box-shadow:0 10px 25px rgba(0,0,0,.08)}

.section{padding:clamp(2rem,6vw,3.5rem) 0}
.section h2{font-weight:800;color:var(--azul-oscuro);margin-top:0}
.section .sub{color:var(--gris-oscuro);margin-top:-.4rem}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.feature{background:#fff;border:1px solid var(--gris-claro);border-radius:1rem;padding:1rem;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.feature h3{margin-top:.2rem;color:var(--azul-claro)}

.process{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.step{background:#fff;border:1px solid var(--gris-claro);border-radius:1rem;padding:1rem}
.step .num{background:var(--azul-oscuro);color:#fff;display:inline-block;padding:.25rem .6rem;border-radius:.5rem;margin-bottom:.5rem}

.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}

.kv{background:linear-gradient(120deg,rgba(23,96,169,.08),rgba(222,222,222,.5));border:1px solid var(--gris-claro);border-radius:1rem;padding:1rem}

.grid-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;align-items:center}
.grid-logos img{width:100%;filter:grayscale(100%);opacity:.85;transition:.2s}
.grid-logos img:hover{filter:none;opacity:1}

.faq{max-width:900px;margin-inline:auto}
.faq-item{border-bottom:1px solid var(--gris-claro);padding:1rem 0}
.faq-item summary{cursor:pointer;font-weight:600;color:var(--azul-oscuro)}
.faq-item p{margin:.5rem 0 0}

.site-footer{background:#0f172a;color:#e5e7eb;padding:2rem 0;margin-top:2rem}
.site-footer h4{margin:0 0 .6rem}
.site-footer a{color:#e5e7eb}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.copy{margin-top:1.2rem;text-align:center;color:#94a3b8}

.whatsapp-float{
  position:fixed;right:20px;bottom:20px;background:#25D366;border-radius:50%;width:56px;height:56px;
  display:grid;place-items:center;box-shadow:0 10px 25px rgba(0,0,0,.25);z-index:9999
}
.whatsapp-float svg{width:26px;height:26px;fill:white}

.page-hero{
  background:linear-gradient(90deg,rgba(32,56,138,.08),rgba(23,96,169,.08));
  padding:2.2rem 0;
  border-bottom:1px solid var(--gris-claro)
}
.page-hero h1{color:#ffffff;margin:0}
.page-hero p{margin:.4rem 0 0;color:var(--gris-oscuro)}

.responsive-img{width:100%;height:auto;border-radius:1rem}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}

blockquote.testimonial{background:#fff;border-left:6px solid var(--azul-claro);margin:0;padding:1rem;border-radius:.5rem;box-shadow:0 4px 16px rgba(0,0,0,.05)}

.notice{background:#FFF8E1;border:1px solid #FFECB3;padding:1rem;border-radius:.8rem;color:#8a6d3b}

/* Logo en el header */
.logo-img{height:45px;display:block}

/* Banner específico de Clientes */
.clientes-hero{
  background:
    linear-gradient(90deg, rgba(32,56,138,.08), rgba(23,96,169,.08)),
    url('/assets/img/3.-Banner-Clientes.png') center/cover no-repeat;
      padding:clamp(3rem,7vw,6rem) 0;
  color:#ffffff;
}
.contacto{
  background:
    linear-gradient(90deg, rgba(32,56,138,.08), rgba(23,96,169,.08)),
    url('/assets/img/5.-Banner-Contacto.png') center/cover no-repeat;
       padding:clamp(3rem,7vw,6rem) 0;
  color:#ffffff;
}
.faqbanner{
  background:
    linear-gradient(90deg, rgba(32,56,138,.08), rgba(23,96,169,.08)),
    url('/assets/img/4.-Banner-Faq.png') center/cover no-repeat;
       padding:clamp(3rem,7vw,6rem) 0;
  color:#ffffff;
}
.historia{
  background:
    linear-gradient(90deg, rgba(32,56,138,.08), rgba(23,96,169,.08)),
    url('/assets/img/historia\ banner.jpeg') center/cover no-repeat;
       padding:clamp(3rem,7vw,6rem) 0;
  color:#ffffff;
}
.mision{
  background:
    linear-gradient(90deg, rgba(32,56,138,.08), rgba(23,96,169,.08)),
    url('/assets/img/mision\ banner.jpeg') center/cover no-repeat;
       padding:clamp(3rem,7vw,6rem) 0;
  color:#ffffff;
}
.equipo{
  background:
    linear-gradient(90deg, rgba(32,56,138,.08), rgba(23,96,169,.08)),
    url('/assets/img/nuestro\ equipo\ banner.jpeg') center/cover no-repeat;
       padding:clamp(3rem,7vw,6rem) 0;
  color:#ffffff;
}

/* ========================================================== */
/* INICIO ARREGLO: Estilos para la sección "Por qué LabelsPro" */
/* (Movidos aquí, fuera de la media query, para que sean la base) */
/* ========================================================== */

.labels-pro-section {
  display: flex; /* Activa Flexbox para poner los hijos lado a lado (escritorio) */
  align-items: center; /* Centra el contenido verticalmente */
  gap: 25px; /* Espacio entre la columna de texto y la de imagen */
  
  /* --- Peticiones del usuario --- */
  background-color: #004a99; /* 1. Fondo color azul */
  color: #ffffff; /* 2. Textos blancos */
  /* ------------------------------ */
  
  font-family: Arial, sans-serif;
  padding: 30px;
  border-radius: 8px; /* Bordes redondeados como en la imagen original */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Sombra suave */
  overflow: hidden; /* Asegura que nada se salga */
}

/* Columna de texto */
.labels-pro-section .text-content {
  flex: 1; /* Ocupa el espacio disponible (aprox. 50%) */
  min-width: 300px; /* Ancho mínimo para que no se comprima demasiado */
  padding-left: 20px; /* ARREGLO: Añade margen izquierdo al texto */
}

/* Columna de imagen (a la derecha) */
.labels-pro-section .image-content {
  flex: 1; /* Ocupa el espacio disponible (aprox. 50%) */
}

/* Estilos para el título */
.labels-pro-section h2 {
  font-size: 26px;
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: bold;
  color: #ffffff; /* ARREGLO: Cambia el título a color blanco */
}

/* Estilos para la lista */
.labels-pro-section ul {
  list-style-type: none; /* Quita los puntos de la lista */
  padding-left: 0;
  margin: 0;
}

.labels-pro-section li {
  margin-bottom: 12px;
  line-height: 1.5; /* Espacio entre líneas para mejor lectura */
  font-size: 16px;
}

/* Estilos para la imagen */
.labels-pro-section .image-content img {
  width: 75%; /* ARREGLO: Se achica la imagen (de 80% a 75%) */
  height: auto; /* Mantiene la proporción */
  border-radius: 6px; /* Bordes redondeados para la imagen */
  display: block; /* Elimina espacios extra debajo de la imagen */
  margin-inline: auto; /* ARREGLO: Centra la imagen al achicarla */
}

/* ========================================================== */
/* FIN ARREGLO "Por qué LabelsPro"                             */
/* ========================================================== */


@media (max-width: 980px){
  .hero .grid,.features,.process,.cards-2,.grid-2,.grid-3{grid-template-columns:1fr}
  .grid-logos{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .dropdown:hover .dropdown-content{display:none}
  .menu-toggle{display:block}
  .nav{
    position:fixed;inset:60px 0 auto 0;background:#0f172a;
    flex-direction:column;gap:.2rem;padding:1rem;display:none;
    z-index: 990; /* <-- ARREGLO: Añadido z-index para que se ponga sobre el contenido */
  }
  .nav.show{display:flex}
  .nav a,.dropbtn{width:100%;text-align:left}
  .dropdown{width:100%}
  .dropdown-content{position:static;box-shadow:none;border-radius:0;display:none;background:transparent}
  .dropdown.open .dropdown-content{display:block}
  .dropdown-content a{color:#fff}
  
  @media(max-width:980px){.logo-img{height:32px}}

  /* --- ARREGLO: Estilos para "Por qué LabelsPro" en MÓVIL --- */
  .labels-pro-section {
    flex-direction: column; /* Apila los elementos verticalmente */
    padding: 25px 20px; /* Ajusta el padding para móvil */
    gap: 20px;
  }
  
  .labels-pro-section .text-content {
    min-width: 100%; /* Ocupa todo el ancho */
  }
  
  .labels-pro-section h2 {
    font-size: 24px; /* Título un poco más pequeño en móvil */
  }
  /* --- FIN ARREGLO MÓVIL --- */
}