/* =========================================================================
   LIMASOL SRL — Hoja de estilos global
   Metodología: BEM. Mobile-first. Sin frameworks ni dependencias externas.
   Todas las decisiones de color/tipografía/espaciado viven en :root para
   poder editarlas desde un único bloque (ver punto 12 del brief / README).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. VARIABLES DE DISEÑO (custom properties)
   ------------------------------------------------------------------------- */
:root{
  /* Verde institucional — #12AD5B es el color de marca (logos, iconos,
     franjas decorativas). Sobre blanco NO cumple AA para texto (2.94:1),
     por eso el tono 700 (#0C7A40, 5.42:1) es el que se usa para texto y
     para fondos sólidos que llevan texto blanco encima. */
  --color-green-100:#E6F7EE;
  --color-green-500:#12AD5B; /* marca / decorativo, no usar como texto sobre blanco */
  --color-green-700:#0C7A40; /* AA: 5.42:1 sobre blanco — texto y fondos con texto blanco */
  --color-green-900:#095C30;

  /* Azul institucional — cumple AA de sobra (8.59:1 sobre blanco), se usa tal cual */
  --color-blue-100:#E8ECFB;
  --color-blue-500:#0A3EBE;
  --color-blue-700:#082F91;
  --color-blue-900:#062266;

  /* Rojo — solo para botones de acción principal y estados de error.
     #E8534A no cumple AA sobre blanco (3.64:1); el tono 700 (#C0392B,
     5.44:1) es el que se usa como fondo de botón con texto blanco. */
  --color-red-100:#FBEAE8;
  --color-red-500:#E8534A; /* decorativo / iconografía, no como fondo de botón con texto pequeño */
  --color-red-700:#C0392B; /* AA: 5.44:1 sobre blanco — botones con texto blanco */
  --color-red-900:#96281D;

  /* Verde lima — únicamente fondos y detalles. Prohibido como color de texto
     (1.17:1 sobre blanco, ilegible). */
  --color-lime-100:#F6FFE4;
  --color-lime-500:#CDFD81;
  --color-lime-700:#A9D95E;

  --color-white:#FFFFFF;
  --color-gray-50:#F7F9F8;
  --color-gray-100:#EEF2F0;
  --color-gray-300:#D7DEDA;
  --color-gray-600:#5B655F;
  --color-ink:#1A1A1A;

  /* Roles semánticos (lo que de verdad se usa en los componentes) */
  --color-bg:            var(--color-white);
  --color-bg-alt:        var(--color-gray-50);
  --color-text:          var(--color-ink);
  --color-text-muted:    var(--color-gray-600);
  --color-brand:         var(--color-green-500);
  --color-brand-text:    var(--color-green-700);
  --color-link:          var(--color-blue-500);
  --color-link-hover:    var(--color-blue-700);
  --color-cta-bg:        var(--color-red-700);
  --color-cta-bg-hover:  var(--color-red-900);
  --color-cta-text:      var(--color-white);
  --color-border:        var(--color-gray-300);
  --color-focus:         var(--color-blue-500);

  /* Tipografía — system font stack, sin CDN ni fuentes externas */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;

  --fs-sm:   clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --fs-base: clamp(1rem, 0.95rem + 0.2vw, 1.08rem);
  --fs-lg:   clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --fs-xl:   clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  --fs-2xl:  clamp(1.75rem, 1.4rem + 1.4vw, 2.6rem);
  --fs-3xl:  clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);

  --lh-tight: 1.2;
  --lh-base: 1.6;

  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.8rem;
  --space-5: 2.6rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 3px rgba(26,26,26,0.10);
  --shadow-md: 0 6px 24px rgba(26,26,26,0.12);

  --container-max: 1240px;
  --transition-base: 180ms ease;
}

/* -------------------------------------------------------------------------
   2. RESET LIGERO
   ------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-base);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:var(--color-text);
  background:var(--color-bg);
}
img,picture,svg,video{ max-width:100%; display:block; }
h1,h2,h3,h4,p,figure{ margin:0 0 var(--space-3) 0; }
h1,h2,h3,h4{ line-height:var(--lh-tight); font-weight:700; color:var(--color-text); }
h1{ font-size:var(--fs-3xl); }
h2{ font-size:var(--fs-2xl); }
h3{ font-size:var(--fs-xl); }
h4{ font-size:var(--fs-lg); }
a{ color:var(--color-link); text-decoration-thickness:2px; text-underline-offset:2px; }
a:hover{ color:var(--color-link-hover); }
ul,ol{ padding-left:1.2em; }
button{ font-family:inherit; }

/* Foco visible en todo elemento interactivo — accesibilidad WCAG 2.1 AA */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--color-focus);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* Enlace "saltar al contenido" */
.saltar-al-contenido{
  position:absolute; left:-9999px; top:0;
  background:var(--color-green-700); color:#fff;
  padding:var(--space-2) var(--space-3);
  z-index:1000; border-radius:0 0 var(--radius-sm) 0;
}
.saltar-al-contenido:focus{ left:0; }

/* Utilidad para ocultar visualmente pero dejar accesible a lectores de pantalla */
.u-solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* -------------------------------------------------------------------------
   3. LAYOUT BASE
   ------------------------------------------------------------------------- */
.contenedor{
  width:100%; max-width:var(--container-max);
  margin-inline:auto; padding-inline:var(--space-3);
}
@media (min-width:768px){ .contenedor{ padding-inline:var(--space-4); } }

.seccion{ padding-block:var(--space-6); }
.seccion--alt{ background:var(--color-bg-alt); }
.seccion__titulo{ text-align:center; max-width:56ch; margin-inline:auto var(--space-5); }
.seccion__titulo p{ color:var(--color-text-muted); }

/* Sprite de iconos: los símbolos van inline en el body, ocultos */
.sprite-oculto{ position:absolute; width:0; height:0; overflow:hidden; }
.icono{ width:1.5em; height:1.5em; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.icono--relleno{ fill:currentColor; stroke:none; }

/* -------------------------------------------------------------------------
   4. CABECERA (.cabecera)
   ------------------------------------------------------------------------- */
.cabecera__franja{
  background:var(--color-green-700); color:#fff; font-size:var(--fs-sm);
}
.cabecera__franja .contenedor{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--space-2); padding-block:var(--space-1);
}
.cabecera__contacto{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.cabecera__contacto a{ color:#fff; display:inline-flex; align-items:center; gap:.4em; }
.cabecera__contacto a:hover{ color:var(--color-lime-500); }
.cabecera__redes{ display:flex; gap:var(--space-2); }
.cabecera__redes a{ color:#fff; display:inline-flex; }
.cabecera__redes a:hover{ color:var(--color-lime-500); }

.cabecera__nav{
  background:#fff; border-bottom:1px solid var(--color-border);
  position:sticky; top:0; z-index:100;
}
.cabecera__nav .contenedor{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:var(--space-2); gap:var(--space-3);
}
.cabecera__logo{ display:flex; align-items:center; gap:.6em; font-weight:700;
  color:var(--color-green-700); font-size:var(--fs-lg); line-height:1; }
.cabecera__logo img{ height:42px; width:auto; }

.menu-hamburguesa{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; background:none; border:1px solid var(--color-border);
  border-radius:var(--radius-sm); cursor:pointer; color:var(--color-text);
}
.menu-hamburguesa .icono{ width:1.6em; height:1.6em; }

.menu-principal{
  position:fixed; inset:0 0 0 auto; width:min(320px,86vw); background:#fff;
  box-shadow:var(--shadow-md); padding:var(--space-5) var(--space-4);
  transform:translateX(100%); transition:transform var(--transition-base);
  overflow-y:auto;
}
.menu-principal.esta-abierto{ transform:translateX(0); }
.menu-principal__cerrar{ background:none; border:0; cursor:pointer; margin-bottom:var(--space-4);
  display:inline-flex; align-items:center; gap:.4em; color:var(--color-text); }
.menu-principal__lista{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-1); }
.menu-principal__lista a{
  display:block; padding:var(--space-2) var(--space-1); color:var(--color-text);
  text-decoration:none; font-weight:600; border-radius:var(--radius-sm);
}
.menu-principal__lista a:hover,
.menu-principal__lista a[aria-current="page"]{ color:var(--color-green-700); background:var(--color-green-100); }
.menu-principal__cta{ margin-top:var(--space-4); }

.fondo-menu{
  position:fixed; inset:0; background:rgba(26,26,26,.5); z-index:99;
  opacity:0; pointer-events:none; transition:opacity var(--transition-base);
}
.fondo-menu.esta-visible{ opacity:1; pointer-events:auto; }

@media (min-width:1024px){
  .menu-hamburguesa,.menu-principal__cerrar,.fondo-menu{ display:none; }
  .menu-principal{
    position:static; width:auto; box-shadow:none; padding:0; transform:none;
    background:transparent; overflow:visible;
  }
  .menu-principal__lista{ flex-direction:row; align-items:center; gap:var(--space-3); }
  .menu-principal__lista a{ padding:.4em .2em; }
  .menu-principal__cta{ margin-top:0; }
}

/* -------------------------------------------------------------------------
   5. BOTONES
   ------------------------------------------------------------------------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.85em 1.6em; border-radius:var(--radius-sm); font-weight:700;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  font-size:var(--fs-base); transition:background var(--transition-base), transform var(--transition-base);
  line-height:1.2;
}
.boton:hover{ transform:translateY(-2px); }
.boton--primario{ background:var(--color-cta-bg); color:var(--color-cta-text); }
.boton--primario:hover{ background:var(--color-cta-bg-hover); color:#fff; }
.boton--secundario{ background:transparent; border-color:#fff; color:#fff; }
.boton--secundario:hover{ background:rgba(255,255,255,.15); color:#fff; }
.boton--contorno{ background:transparent; border-color:var(--color-green-700); color:var(--color-green-700); }
.boton--contorno:hover{ background:var(--color-green-100); color:var(--color-green-700); }
.boton--bloque{ width:100%; }

/* -------------------------------------------------------------------------
   6. HERO (Inicio)
   ------------------------------------------------------------------------- */
.hero{ position:relative; color:#fff; }
.hero__media{ position:relative; min-height:62vh; display:flex; align-items:flex-end; }
.hero__media picture,.hero__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.hero__media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(9,29,17,.88) 0%, rgba(9,29,17,.55) 45%, rgba(9,29,17,.15) 100%);
}
.hero__contenido{ position:relative; z-index:2; padding-block:var(--space-6) var(--space-5); }
.hero__kicker{
  display:inline-block; background:var(--color-green-700); color:#fff;
  padding:.3em .9em; border-radius:999px; font-size:var(--fs-sm); font-weight:700;
  margin-bottom:var(--space-3);
}
.hero__titulo{ max-width:18ch; margin-bottom:var(--space-3); }
.hero__texto{ max-width:60ch; font-size:var(--fs-lg); margin-bottom:var(--space-4); }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:var(--space-2); }

/* -------------------------------------------------------------------------
   7. FRANJA DE CONFIANZA
   ------------------------------------------------------------------------- */
.confianza{ background:var(--color-green-700); color:#fff; }
.confianza__grid{
  display:grid; gap:var(--space-4); padding-block:var(--space-5);
  grid-template-columns:1fr;
}
@media (min-width:768px){ .confianza__grid{ grid-template-columns:repeat(3,1fr); } }
.confianza__item{ display:flex; gap:var(--space-2); align-items:flex-start; }
.confianza__item .icono{ color:var(--color-lime-500); width:2em; height:2em; }
.confianza__item h3{ font-size:var(--fs-base); margin-bottom:.2em; color:#fff; }
.confianza__item p{ color:rgba(255,255,255,.85); font-size:var(--fs-sm); margin:0; }

/* -------------------------------------------------------------------------
   8. TARJETAS
   ------------------------------------------------------------------------- */
.grid-tarjetas{ display:grid; gap:var(--space-4); grid-template-columns:1fr; }
@media (min-width:640px){ .grid-tarjetas{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid-tarjetas--5{ grid-template-columns:repeat(3,1fr); } }

.tarjeta{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition-base), transform var(--transition-base);
}
.tarjeta:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.tarjeta__media{ aspect-ratio:16/10; overflow:hidden; background:var(--color-gray-100); }
.tarjeta__media img{ width:100%; height:100%; object-fit:cover; }
.tarjeta__cuerpo{ padding:var(--space-3); display:flex; flex-direction:column; gap:var(--space-2); flex:1; }
.tarjeta__icono{ color:var(--color-blue-500); }
.tarjeta__etiquetas{ display:flex; gap:.4em; flex-wrap:wrap; }
.etiqueta{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:.25em .6em; border-radius:999px;
}
.etiqueta--ensayo{ background:var(--color-blue-100); color:var(--color-blue-700); }
.etiqueta--inspeccion{ background:var(--color-lime-100); color:var(--color-green-700); border:1px solid var(--color-green-500); }
.tarjeta__acciones{ margin-top:auto; padding-top:var(--space-2); }

/* -------------------------------------------------------------------------
   9. POLÍTICA DE CALIDAD (bloque destacado)
   ------------------------------------------------------------------------- */
.politica{
  background:var(--color-bg-alt); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-5);
  display:grid; gap:var(--space-4); grid-template-columns:1fr;
}
@media (min-width:768px){ .politica{ grid-template-columns:1.1fr 1fr; align-items:center; } }
.politica__doc{ font-size:var(--fs-sm); color:var(--color-text-muted); }
.politica blockquote{
  margin:0 0 var(--space-3); padding-left:var(--space-3); border-left:4px solid var(--color-green-500);
  font-style:italic;
}
.politica ul{ margin:0 0 var(--space-3); }

/* -------------------------------------------------------------------------
   10. FRANJA CTA FINAL
   ------------------------------------------------------------------------- */
.cta-final{
  background:var(--color-blue-700); color:#fff; border-radius:var(--radius-lg);
  padding:var(--space-5); display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:var(--space-4);
}
.cta-final h2,.cta-final p{ color:#fff; }
.cta-final__acciones{ display:flex; flex-wrap:wrap; gap:var(--space-2); }

/* -------------------------------------------------------------------------
   11. FORMULARIOS
   ------------------------------------------------------------------------- */
.formulario{ display:grid; gap:var(--space-3); }
.campo{ display:flex; flex-direction:column; gap:.35em; }
.campo label{ font-weight:600; font-size:var(--fs-sm); }
.campo .campo__ayuda{ font-size:.8rem; color:var(--color-text-muted); }
.campo input,.campo select,.campo textarea{
  padding:.75em .9em; border:1px solid var(--color-border); border-radius:var(--radius-sm);
  font-family:inherit; font-size:var(--fs-base); background:#fff; color:var(--color-text);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{ border-color:var(--color-blue-500); }
.formulario__fila{ display:grid; gap:var(--space-3); grid-template-columns:1fr; }
@media (min-width:640px){ .formulario__fila{ grid-template-columns:1fr 1fr; } }
.formulario__fieldset{ border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-3); margin:0; }
.formulario__fieldset legend{ font-weight:700; color:var(--color-green-700); padding:0 .4em; }
.campo-check{ display:flex; gap:.6em; align-items:flex-start; font-size:var(--fs-sm); }
.campo-check input{ margin-top:.3em; }
.campo--oculto{ position:absolute; left:-9999px; } /* honeypot antispam */
.formulario__estado{ font-weight:600; }
.formulario__estado[data-tipo="ok"]{ color:var(--color-green-700); }
.formulario__estado[data-tipo="error"]{ color:var(--color-red-700); }

/* -------------------------------------------------------------------------
   12. DIRECTORIO DE CONTACTO / EQUIPO
   ------------------------------------------------------------------------- */
.grid-directorio{ display:grid; gap:var(--space-3); grid-template-columns:1fr; }
@media (min-width:640px){ .grid-directorio{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid-directorio{ grid-template-columns:repeat(3,1fr); } }
.tarjeta-persona{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:var(--space-3); text-align:center;
}
.tarjeta-persona__foto{
  width:96px; height:96px; border-radius:50%; margin:0 auto var(--space-2);
  background:var(--color-gray-100); display:flex; align-items:center; justify-content:center;
  color:var(--color-gray-600); overflow:hidden;
}
.tarjeta-persona h3{ font-size:var(--fs-base); margin-bottom:.1em; }
.tarjeta-persona .cargo{ color:var(--color-text-muted); font-size:var(--fs-sm); margin-bottom:.5em; }

/* -------------------------------------------------------------------------
   13. MAPA (carga diferida)
   ------------------------------------------------------------------------- */
.mapa-estatico{
  position:relative; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--color-border);
  aspect-ratio:16/9; background:var(--color-gray-100); cursor:pointer;
}
.mapa-estatico img{ width:100%; height:100%; object-fit:cover; }
.mapa-estatico__boton{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(9,29,17,.35); color:#fff; border:0; font-weight:700; gap:.5em;
  font-size:var(--fs-base); cursor:pointer;
}
.mapa-estatico iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* -------------------------------------------------------------------------
   14. WHATSAPP FLOTANTE
   ------------------------------------------------------------------------- */
.whatsapp-flotante{
  position:fixed; right:var(--space-3); bottom:var(--space-3); z-index:200;
  background:#1EBE5D; color:#fff; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
  text-decoration:none;
}
.whatsapp-flotante .icono{ width:1.8em; height:1.8em; }
.whatsapp-flotante:hover{ color:#fff; transform:scale(1.06); }
@media print{ .whatsapp-flotante{ display:none; } }

/* -------------------------------------------------------------------------
   15. PIE DE PÁGINA
   ------------------------------------------------------------------------- */
.pie{ background:var(--color-ink); color:var(--color-gray-100); }
.pie a{ color:var(--color-gray-100); }
.pie a:hover{ color:var(--color-lime-500); }
.pie__grid{ display:grid; gap:var(--space-4); padding-block:var(--space-6) var(--space-4); grid-template-columns:1fr; }
@media (min-width:768px){ .pie__grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.pie__marca{ display:flex; align-items:center; gap:.6em; font-weight:700; color:#fff; margin-bottom:var(--space-2); }
.pie__marca img{ height:36px; }
.pie h4{ color:#fff; font-size:var(--fs-base); }
.pie ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5em; font-size:var(--fs-sm); }
.pie__acreditacion{ font-size:.8rem; color:var(--color-gray-300); border-top:1px solid rgba(255,255,255,.15); padding-block:var(--space-3); }
.pie__legales{ border-top:1px solid rgba(255,255,255,.15); padding-block:var(--space-3);
  display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:space-between; font-size:.8rem; color:var(--color-gray-300); }

/* -------------------------------------------------------------------------
   16. MIGAS DE PAN
   ------------------------------------------------------------------------- */
.migas{ font-size:var(--fs-sm); color:var(--color-text-muted); padding-block:var(--space-3); }
.migas ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.4em; padding:0; margin:0; }
.migas li:not(:last-child)::after{ content:"/"; margin-left:.4em; color:var(--color-border); }

/* -------------------------------------------------------------------------
   17. BANNER ANCHO (servicios)
   ------------------------------------------------------------------------- */
.banner-ancho{ position:relative; aspect-ratio:2.1/1; overflow:hidden; border-radius:var(--radius-lg); }
.banner-ancho img{ width:100%; height:100%; object-fit:cover; }
.banner-ancho__texto{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding:var(--space-4); background:linear-gradient(90deg, rgba(9,29,17,.82) 0%, rgba(9,29,17,.15) 75%);
  color:#fff;
}
.banner-ancho__texto h2{ color:#fff; max-width:22ch; }

/* -------------------------------------------------------------------------
   18. AVISO / PLACEHOLDER
   ------------------------------------------------------------------------- */
.aviso-pendiente{
  background:var(--color-lime-100); border:1px dashed var(--color-green-500);
  color:var(--color-green-700); border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-3); font-size:var(--fs-sm); font-weight:600;
}

/* -------------------------------------------------------------------------
   19. PÁGINA 404
   ------------------------------------------------------------------------- */
.pagina-404{ text-align:center; padding-block:var(--space-7); }
.pagina-404__codigo{ font-size:clamp(4rem,10vw,8rem); color:var(--color-green-100); font-weight:800; line-height:1; }

/* -------------------------------------------------------------------------
   20. UTILIDADES GENERALES
   ------------------------------------------------------------------------- */
.texto-centrado{ text-align:center; }
.texto-muted{ color:var(--color-text-muted); }
.espaciador-arriba{ margin-top:var(--space-5); }
.flujo > * + *{ margin-top:var(--space-3); }