/* IGI, Ingeniería y Gestión Integral — hoja única de estilos.
   Consolidación de styles.css (base) + industrial.css (evolución industrial).
   El orden importa: la segunda parte sobrescribe a la primera. */

/* ============ 1. Base ============ */
/* === IGI — Estilo base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --azul: #2563EB;
  --gris-oscuro: #4B5563;
  --gris-claro: #F3F4F6;
  --blanco: #FFFFFF;
  --negro: #111827;
  --fuente: 'Inter', system-ui, -apple-system, Arial, sans-serif;
  --max-w: 1200px;
  --nav-h: 72px;
}

html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--fuente); color: var(--gris-oscuro); background: var(--blanco); line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: var(--azul); text-decoration: none; transition: color .2s; }
a:hover { color: #1d4ed8; }

/* === Tipografía === */
h1 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 700; line-height: 1.2; color: var(--negro); margin-bottom: 1rem; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 700; line-height: 1.3; color: var(--negro); margin-bottom: .75rem; }
h3 { font-size: 1.25rem; font-weight: 600; color: var(--negro); margin-bottom: .5rem; }
h4 { font-size: 1.1rem; font-weight: 600; color: var(--negro); }
p { margin-bottom: 1rem; }
.text-lead { font-size: 1.125rem; color: var(--gris-oscuro); line-height: 1.7; }

/* === Layout === */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }
.section { padding: 5rem 0; }
.section-alt { background: var(--gris-claro); }

/* === Navegación === */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h); background: var(--blanco);
  border-bottom: 1px solid #e5e7eb; display: flex; align-items: center;
}
.navbar .container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav-logo { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.5rem; color: var(--gris-oscuro); }
.nav-logo svg { height: 40px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links > li { position: relative; }
.nav-links a { font-weight: 500; font-size: .9375rem; color: var(--gris-oscuro); padding: .25rem 0; transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--azul); }

/* Submenú */
.dropdown-menu {
  position: absolute; top: 100%; left: 0; min-width: 240px;
  background: var(--blanco); border: 1px solid #e5e7eb; border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,.1); padding: .5rem 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.nav-links li:hover > .dropdown-menu,
.nav-links li:focus-within > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu a { display: block; padding: .6rem 1.25rem; font-size: .9rem; }
.dropdown-menu a::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); margin-right: .5rem; vertical-align: middle; }
.dropdown-menu li:last-child a { border-radius: 0 0 8px 8px; }

/* Hamburger */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: .5rem; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--gris-oscuro); margin: 5px 0; transition: .3s; }

/* === Hero === */
.hero {
  min-height: 90vh; display: flex; align-items: center;
  padding: calc(var(--nav-h) + 2rem) 0 4rem;
  background: linear-gradient(135deg, var(--gris-claro) 0%, var(--blanco) 100%);
}
.hero-content { max-width: 640px; }
.hero p { font-size: 1.125rem; margin-bottom: 2rem; }

/* === Botones === */
.btn {
  display: inline-block; padding: .75rem 1.75rem; border-radius: 6px;
  font-weight: 600; font-size: .9375rem; border: none; cursor: pointer;
  transition: background .2s, transform .1s; text-align: center;
}
.btn-primary { background: var(--azul); color: var(--blanco); }
.btn-primary:hover { background: #1d4ed8; color: var(--blanco); }
.btn-outline { border: 2px solid var(--azul); color: var(--azul); background: transparent; }
.btn-outline:hover { background: var(--azul); color: var(--blanco); }

/* === Cards de servicios === */
.services-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem;
  margin-top: 2rem;
}
.service-card {
  background: var(--blanco); border-radius: 10px; padding: 2rem;
  border: 1px solid #e5e7eb; transition: box-shadow .2s, transform .2s;
}
.service-card:hover { box-shadow: 0 8px 30px rgba(37,99,235,.08); transform: translateY(-2px); }
.service-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--gris-claro); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.service-icon svg { width: 24px; height: 24px; stroke: var(--azul); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { margin-bottom: .5rem; }
.service-card p { font-size: .9375rem; margin-bottom: 1.25rem; }
.service-card .btn-sm { font-size: .875rem; font-weight: 600; }

/* === Secciones internas de servicios === */
.service-hero {
  padding: calc(var(--nav-h) + 4rem) 0 3rem;
  background: var(--gris-claro);
}
.service-hero h1 { margin-bottom: .5rem; }
.breadcrumb { font-size: .875rem; color: var(--gris-oscuro); margin-bottom: 1rem; }
.breadcrumb a { color: var(--azul); }

.service-body { padding: 4rem 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.feature-list { list-style: none; padding: 0; }
.feature-list li {
  padding: .75rem 0; border-bottom: 1px solid #e5e7eb;
  font-size: .9375rem; display: flex; align-items: start; gap: .5rem;
}
.feature-list li::before { content: '✓'; color: var(--azul); font-weight: 700; flex-shrink: 0; }

/* === About === */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.values-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.value-card { background: var(--blanco); border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; }
.value-card h4 { margin-bottom: .25rem; }
.value-card p { font-size: .875rem; margin: 0; }

/* === Contacto === */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-weight: 500; font-size: .875rem; margin-bottom: .35rem; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: .75rem 1rem; border: 1px solid #d1d5db; border-radius: 6px;
  font-family: var(--fuente); font-size: .9375rem; transition: border-color .2s;
  background: var(--blanco);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: none; outline: 2px solid var(--azul); outline-offset: 2px;
}
.form-group textarea { resize: vertical; min-height: 120px; }
.contact-info { background: var(--gris-claro); border-radius: 10px; padding: 2rem; }
.contact-item { display: flex; align-items: start; gap: 1rem; margin-bottom: 1.5rem; }
.contact-item svg { width: 20px; height: 20px; stroke: var(--azul); fill: none; stroke-width: 1.5; flex-shrink: 0; margin-top: 2px; }
.contact-item p { margin: 0; font-size: .9375rem; }

/* === CTA Banner === */
.cta-banner {
  background: var(--gris-oscuro); color: var(--blanco);
  border-radius: 12px; padding: 3rem; text-align: center; margin-top: 3rem;
}
.cta-banner h2 { color: var(--blanco); }
.cta-banner p { color: #d1d5db; max-width: 500px; margin: 0 auto 1.5rem; }
.cta-banner .btn-primary { background: var(--azul); }

/* === Footer === */
.footer { background: var(--gris-oscuro); color: #d1d5db; padding: 3rem 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.footer h4 { color: var(--blanco); font-size: .9375rem; margin-bottom: .75rem; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: .4rem; }
.footer a { color: #9ca3af; font-size: .875rem; }
.footer a:hover { color: var(--blanco); }
.footer-bottom { border-top: 1px solid #6b7280; padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: #9ca3af; }
.footer-bottom a { color: #9ca3af; }

/* === Logo en nav === */
.nav-logo img { height: 36px; width: auto; }
.nav-logo-text { font-weight: 700; font-size: 1.25rem; color: var(--gris-oscuro); }

/* === FAQ === */
.faq-section { padding: 5rem 0; }
.faq-list { max-width: 800px; margin: 2rem auto 0; }
.faq-item { border-bottom: 1px solid #e5e7eb; }
.faq-question {
  width: 100%; background: none; border: none; padding: 1.25rem 0;
  font-family: var(--fuente); font-size: 1.0625rem; font-weight: 600;
  color: var(--negro); text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  transition: color .2s;
}
.faq-question:hover { color: var(--azul); }
.faq-question::after { content: '+'; font-size: 1.5rem; font-weight: 300; color: var(--azul); transition: transform .3s; flex-shrink: 0; margin-left: 1rem; }
.faq-item.open .faq-question::after { content: '−'; }
.faq-answer { max-height: 0; overflow: hidden; transition: none; }
.faq-item.open .faq-answer { max-height: 500px; padding-bottom: 1.25rem; }
.faq-answer p { font-size: .9375rem; color: var(--gris-oscuro); line-height: 1.7; }

/* === Cookie Banner === */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--gris-oscuro); color: #d1d5db; padding: 1.5rem 2rem;
  display: none; box-shadow: 0 -4px 20px rgba(0,0,0,.2);
}
.cookie-banner.show { display: block; }
.cookie-content { max-width: var(--max-w); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.cookie-content p { font-size: .875rem; margin: 0; flex: 1; min-width: 300px; }
.cookie-content p a { color: var(--azul); }
.cookie-buttons { display: flex; gap: .75rem; flex-shrink: 0; }
.cookie-btn { padding: .6rem 1.25rem; border-radius: 6px; font-size: .875rem; font-weight: 600; cursor: pointer; border: none; font-family: var(--fuente); }
.cookie-accept { background: var(--azul); color: var(--blanco); }
.cookie-accept:hover { background: #1d4ed8; color: var(--blanco); }
.cookie-settings { background: transparent; color: #d1d5db; border: 1px solid #6b7280; }
.cookie-settings:hover { border-color: var(--blanco); color: var(--blanco); }

/* === Privacidad checkbox === */
.privacy-check { display: flex; align-items: start; gap: .5rem; margin-bottom: 1.25rem; }
.privacy-check input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--azul); flex-shrink: 0; }
.privacy-check label { font-size: .8125rem; color: var(--gris-oscuro); line-height: 1.5; }
.privacy-check label a { color: var(--azul); text-decoration: underline; }

/* === Botón flotante de WhatsApp === */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 190;
  display: inline-flex; align-items: center; gap: .6rem;
  height: 56px; padding: 0 1.25rem 0 1rem; border-radius: 999px;
  background: #25D366; color: #fff; font-weight: 600; font-size: .9375rem;
  box-shadow: 0 6px 22px rgba(0,0,0,.22);
  /* Sin transición en 'bottom': la posición debe cambiar de forma determinista
     cuando aparece el banner de cookies. */
  transition: transform .2s, background .2s;
}
.wa-float:hover { background: #1EBE5A; color: #fff; transform: translateY(-2px); }
.wa-float svg { width: 26px; height: 26px; fill: currentColor; flex-shrink: 0; }
.wa-float-label { white-space: nowrap; }


/* === Blog === */
.blog-hero {
  padding: calc(var(--nav-h) + 4rem) 0 3rem;
  background: linear-gradient(135deg, var(--gris-oscuro) 0%, #374151 100%);
  color: var(--blanco);
}
.blog-hero h1 { color: var(--blanco); margin-bottom: .5rem; }
.blog-hero .text-lead { color: #d1d5db; max-width: 620px; }
.blog-section { padding: 4rem 0; }

.blog-featured-card {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  background: var(--blanco); border: 1px solid #e5e7eb; border-radius: 12px;
  overflow: hidden; margin-bottom: 3rem;
  transition: box-shadow .2s, transform .2s;
}
.blog-featured-card:hover { box-shadow: 0 12px 40px rgba(37,99,235,.10); transform: translateY(-3px); }
.blog-featured-visual { position: relative; min-height: 340px; background: var(--gris-claro); }
.blog-featured-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.blog-featured-body { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.blog-featured-body h2 { font-size: 1.6rem; margin-bottom: .75rem; }
.blog-featured-body p { font-size: .9375rem; color: var(--gris-oscuro); }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.blog-card {
  background: var(--blanco); border: 1px solid #e5e7eb; border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.blog-card:hover { box-shadow: 0 10px 34px rgba(37,99,235,.10); transform: translateY(-4px); }
.blog-card-img { aspect-ratio: 16/9; background: var(--gris-claro); overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.blog-card-date {
  text-transform: uppercase; letter-spacing: .08em; font-size: .7rem;
  font-weight: 600; color: var(--azul); margin-bottom: .5rem;
}
.blog-card-body h3 { font-size: 1.0625rem; margin-bottom: .5rem; line-height: 1.35; }
.blog-card-body p { font-size: .875rem; color: var(--gris-oscuro); margin-bottom: 1rem; flex-grow: 1; }
.blog-card-more { font-size: .875rem; font-weight: 600; color: var(--azul); }
.blog-card-more::after { content: ' →'; }

/* Artículo */
.article-page { max-width: 760px; margin: 0 auto; padding: 4rem 0; }
.article-meta {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; color: var(--azul); margin-bottom: 1rem;
}
.article-page h1 { font-size: clamp(1.75rem, 4vw, 2.4rem); }
.article-subtitle { font-size: 1.125rem; color: var(--gris-oscuro); line-height: 1.7; margin-bottom: 2rem; }
.article-hero-img { width: 100%; border-radius: 10px; margin-bottom: 2.5rem; aspect-ratio: 16/9; object-fit: cover; }
.article-content h2 { font-size: 1.4rem; margin: 2.25rem 0 .75rem; }
.article-content h3 { font-size: 1.125rem; margin: 1.75rem 0 .5rem; }
.article-content p { font-size: 1rem; line-height: 1.8; }
.article-content ul, .article-content ol { margin: 0 0 1.25rem 1.25rem; }
.article-content li { font-size: 1rem; line-height: 1.75; margin-bottom: .4rem; }
.article-content blockquote {
  border-left: 3px solid var(--azul); background: var(--gris-claro);
  padding: 1rem 1.5rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0;
  font-size: .9375rem; color: var(--gris-oscuro);
}
.article-content strong { color: var(--negro); }
.article-source { font-size: .8125rem; color: #6b7280; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid #e5e7eb; }
.article-cta {
  background: linear-gradient(135deg, var(--gris-oscuro) 0%, #374151 100%);
  border-radius: 12px; padding: 2.5rem; text-align: center; margin-top: 3rem;
}
.article-cta h3 { color: var(--blanco); font-size: 1.3rem; }
.article-cta p { color: #d1d5db; max-width: 480px; margin: .5rem auto 1.5rem; font-size: .9375rem; }
.article-back { display: inline-block; font-size: .875rem; font-weight: 600; margin-top: 2rem; }


@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
    background: var(--blanco); flex-direction: column; padding: 2rem;
    gap: 1.25rem; transform: translateX(100%); transition: transform .3s;
    overflow-y: auto;
  }
  .nav-links.open { transform: translateX(0); }
  .dropdown-menu {
    position: static; box-shadow: none; border: none; padding-left: 1rem;
    opacity: 1; visibility: visible; transform: none; display: none;
  }
  .nav-links li:hover .dropdown-menu,
  .nav-links li:focus-within .dropdown-menu { display: block; }
  .two-col, .about-grid, .contact-grid, .footer-grid { grid-template-columns: 1fr; }
  .blog-featured-card { grid-template-columns: 1fr; }
  .blog-featured-visual { min-height: 220px; }
  .blog-featured-body { padding: 1.75rem; }
  .blog-grid { grid-template-columns: 1fr; }
  .article-page { padding: 2.5rem 0; }
  /* WhatsApp: solo icono en móvil, para no tapar contenido */
  .wa-float { right: 16px; bottom: 16px; width: 56px; height: 56px; padding: 0; justify-content: center; }
  .wa-float-label { display: none; }
  .hero { min-height: 70vh; }
  .section { padding: 3rem 0; }
  .cta-banner { padding: 2rem 1.5rem; }
}


/* ============ 2. Evolución industrial ============ */
/* IGI: evolución industrial con Taste Skill. Inter y paleta de marca conservados. */
@font-face{font-family:Inter;src:url('../fonts/Inter-Regular.woff2') format('woff2'),url('../fonts/Inter-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/Inter-Medium.woff2') format('woff2'),url('../fonts/Inter-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/Inter-SemiBold.woff2') format('woff2'),url('../fonts/Inter-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/Inter-Bold.woff2') format('woff2'),url('../fonts/Inter-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{
  color-scheme:light;
  --azul:#2563eb;--azul-hover:#1d4ed8;--gris-oscuro:#4b5563;--gris-claro:#f3f4f6;
  --negro:#20252d;--grafito:#242b34;--linea:#d9dde3;--control-sutil:#5f6975;
  --max-w:1320px;--nav-h:80px;--ease-out:cubic-bezier(.23,1,.32,1);--carousel-duration:400ms;
}
html{scroll-padding-top:calc(var(--nav-h) + 24px);scrollbar-color:var(--azul) var(--gris-claro)}
body{line-height:1.7}body.menu-open{overflow:hidden}
::selection{background:var(--azul);color:white}
:focus-visible{outline:3px solid var(--azul);outline-offset:5px}
input,textarea{caret-color:var(--azul)}
button:disabled,.btn:disabled{opacity:.55;cursor:not-allowed}
h1,h2,h3,h4{text-wrap:balance}
h1{font-size:clamp(2.5rem,4.2vw,3.8rem);line-height:1.08;letter-spacing:-.04em;margin-bottom:24px}
h2{font-size:clamp(1.9rem,3vw,2.75rem);line-height:1.15;letter-spacing:-.035em;margin-bottom:16px}
h3{font-size:1.4rem;line-height:1.3;letter-spacing:-.02em;margin-bottom:12px}
.container{padding-inline:48px}
.section{padding-block:88px}
.skip-link{position:fixed;top:8px;left:16px;z-index:400;padding:12px 20px;background:white;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Navegación compacta. */
.navbar{border-bottom:1px solid var(--linea)}
.navbar .container{gap:32px}
.nav-logo{flex-shrink:0}.nav-logo img{height:54px;width:auto}
.nav-links{gap:30px}
.nav-links>li>a{display:block;padding-block:14px;font-size:.875rem;color:var(--negro)}
.nav-links>li>a.active{color:var(--azul)}
.nav-links>li:last-child>a{padding:10px 22px;background:var(--azul);color:white;border-radius:2px}
.nav-links>li:last-child>a:hover{background:var(--azul-hover)}
.nav-links>li:last-child>a.active{box-shadow:inset 0 -3px 0 white}
.dropdown-menu{border:1px solid var(--linea);border-radius:2px;box-shadow:0 12px 30px #20252d14;padding:12px 0}
.dropdown-menu a::before{display:none}.dropdown-menu a:hover{background:var(--gris-claro)}
.nav-toggle{border:1px solid var(--linea);border-radius:2px;padding:10px;background:white}
/* Fotografía y tipografía comparten una única superficie clara. */
.hero{position:relative;margin-top:var(--nav-h);min-height:0;display:block;padding:0;background:var(--gris-claro);color:var(--negro);overflow:hidden}
.hero-content{position:relative;z-index:1;width:49%;max-width:none;padding-right:48px;min-width:0}
.hero h1,.hero-slide h2{color:var(--negro);font-size:clamp(2.75rem,4.2vw,3.8rem);line-height:1.08;letter-spacing:-.04em;margin-bottom:24px}
.hero h1 span,.hero-slide h2 span{display:block}
.hero p{color:var(--gris-oscuro);max-width:450px;margin-bottom:32px;font-size:1rem}
.hero .hero-kicker{color:var(--azul);font-size:.875rem;font-weight:500;margin-bottom:24px}
.hero>.container,.hero-slide>.container{position:relative;min-height:552px;display:flex;align-items:flex-start;padding-top:88px;padding-bottom:112px}
.hero-visual{position:absolute;left:51%;top:0;right:0;bottom:0;margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;background:var(--gris-claro)}
.hero-visual img{width:100%;height:100%;min-height:0;object-fit:cover;object-position:50% center}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:1px solid transparent;border-radius:2px;font-size:.875rem;line-height:1.5;transition:background .18s ease,color .18s ease}
.btn:active{transform:translateY(1px)}
.btn-outline{border-color:var(--azul)}
.hero .btn-outline{border:0;padding-inline:0;color:var(--negro);background:none;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--linea)}
.hero .btn-outline:hover{color:var(--azul);text-decoration-color:var(--azul);background:none}
.hero-slides{display:grid;width:100%}
.hero-slide{grid-area:1/1;position:relative;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--carousel-duration) var(--ease-out),visibility 0s var(--carousel-duration)}
.hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.hero-carousel.is-keyboard-navigation .hero-slide{transition:none}
.hero-slide .hero-visual{touch-action:pan-y}
.hero.hero-carousel>.hero-carousel-controls{position:absolute;inset:auto 0 32px;z-index:2;width:100%;min-height:0;padding-block:0;display:flex;pointer-events:none}
.hero.hero-carousel>.hero-carousel-controls[hidden]{display:none}
.hero-control-group{display:flex;align-items:center;gap:4px;pointer-events:auto}
.hero-control{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--control-sutil);cursor:pointer;transition:color .18s ease}
.hero-control svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hero-pagination{display:flex;gap:0}
.hero-pagination button{display:flex;align-items:center;justify-content:center;width:32px;height:44px;background:none;border:0;cursor:pointer}
.hero-pagination button::after{content:'';width:6px;height:6px;border:1px solid var(--control-sutil);border-radius:50%;background:transparent;transition:background .18s ease,border-color .18s ease}
.hero-pagination button[aria-pressed=true]::after{background:var(--azul);border-color:var(--azul)}
.hero-control:focus-visible,.hero-pagination button:focus-visible{outline-offset:2px}
@media(hover:hover) and (pointer:fine){.hero-control:hover{color:var(--azul)}.hero-pagination button:hover::after{border-color:var(--azul)}}
/* Atajos a especialidades: navegación funcional, sin banda decorativa. */
.system-strip{background:var(--azul)}
.system-strip .container{display:grid;grid-template-columns:repeat(4,1fr)}
.system-strip a{display:flex;align-items:center;justify-content:space-between;min-height:76px;color:#fff;padding:20px 24px;font-size:.875rem;font-weight:500;border-right:1px solid rgba(255,255,255,.22)}
.system-strip a:first-child{border-left:1px solid rgba(255,255,255,.22)}
.system-strip a:hover{color:#fff;background:rgba(255,255,255,.14)}
.system-strip a:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.arrow-icon{width:20px;height:20px;fill:none;stroke:var(--azul);stroke-width:1.6;flex-shrink:0}
/* Dentro de la franja azul la flecha va en blanco: el azul sobre azul no se ve. */
.system-strip .arrow-icon{stroke:#fff}
/* Especialidades abiertas: cuatro imágenes, dos columnas, sin cajas elevadas. */
.section-heading{display:block;margin-bottom:40px;max-width:680px}
.section-heading p{margin:0;max-width:640px}
.services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px;margin-top:32px}
.service-card{padding:24px 0;border:0;border-bottom:1px solid var(--linea);border-radius:0;background:transparent;transition:none}
.service-card:hover{box-shadow:none;transform:none}
.service-row{display:flex;flex-direction:column;align-items:stretch;padding:0 0 24px;gap:20px}
.service-photo{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
.service-row .service-icon{display:none}
.service-row h2,.service-row h3{font-size:1.5rem;line-height:1.3;letter-spacing:-.025em;margin-bottom:10px}
.service-row p{max-width:560px;margin:0;font-size:.9375rem}
.service-row>.btn{align-self:flex-start;margin-top:auto}
.service-icon{background:none;border-radius:0;width:30px;height:30px;margin-bottom:16px}
.service-icon svg{width:30px;height:30px}
.service-card .btn{padding:0;min-height:44px;background:transparent;border:0;color:var(--azul);justify-content:flex-start}
.service-card .btn:hover{color:var(--azul-hover);text-decoration:underline;text-underline-offset:4px}
/* La ayuda se lee como una sola sección, con acordeón de ancho contenido. */
.faq-layout{display:block;max-width:920px;margin-inline:auto}
.faq-layout>div:first-child{max-width:620px;margin-bottom:36px}
.faq-list{width:100%;max-width:none;margin:0}
.faq-item{border-color:var(--linea)}.faq-item:first-child{border-top:1px solid var(--linea)}
.faq-question{padding:24px 0;font-size:1rem}
.faq-answer{max-height:none;padding-bottom:24px;transition:none}
.faq-answer[hidden]{display:none}.faq-answer p{margin:0;max-width:780px}
/* Una llamada a la acción integrada en el mismo tema. */
.cta-section{background:white;padding-block:64px}
.cta-banner{margin:0;background:var(--gris-claro);padding:48px;border:0;border-left:3px solid var(--azul);border-radius:0;display:grid;grid-template-columns:1fr auto;column-gap:40px;align-items:center;text-align:left;color:var(--negro)}
.cta-banner h2{color:var(--negro);font-size:clamp(1.75rem,2.6vw,2.5rem);max-width:760px}
.cta-banner p{color:var(--gris-oscuro);margin:0;max-width:640px;grid-column:1}
.cta-banner>.btn{grid-column:2;grid-row:1/3;background:var(--azul);color:white;white-space:nowrap}
.cta-banner>.btn:hover{background:var(--azul-hover);color:white}
/* Cabeceras internas y fotografías de cada especialidad. */
.service-hero,.blog-hero{background:var(--gris-claro);padding:calc(var(--nav-h) + 56px) 0 56px;color:var(--negro);border-bottom:1px solid var(--linea)}
.service-hero h1,.blog-hero h1{color:var(--negro);max-width:900px}
.service-hero .text-lead,.blog-hero .text-lead{color:var(--gris-oscuro);max-width:760px;margin-bottom:0}
.breadcrumb{font-size:.8125rem;color:var(--gris-oscuro);margin-bottom:28px}
.breadcrumb a{color:var(--gris-oscuro);text-decoration:underline;text-underline-offset:3px}
.specialty-hero{position:relative;padding-block:0;margin-top:var(--nav-h);overflow:hidden}
.specialty-hero>.container{display:grid;grid-template-columns:1fr 1fr;min-height:400px;align-items:center;gap:72px;padding-block:56px}
.specialty-hero .specialty-intro{min-width:0}
.specialty-hero h1{font-size:clamp(2.4rem,3.8vw,3.5rem)}
.specialty-hero .text-lead{font-size:1rem;max-width:520px}
.specialty-visual{margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;align-self:stretch;min-width:0}
.specialty-visual img{width:100%;height:100%;min-height:0;object-fit:cover;aspect-ratio:16/9}
.service-body,.blog-section{padding-block:72px}
.two-col,.about-grid,.contact-grid{grid-template-columns:1.15fr 1fr;gap:72px;align-items:start}
.feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin-top:24px}
.feature-list li{padding:0;gap:10px;border:0;line-height:1.6}
.values-grid{grid-template-columns:1fr;gap:0;margin-top:20px}
.value-card{padding:20px 0;border:0;border-top:1px solid var(--linea);border-radius:0;background:none}
.value-card h4{margin-bottom:8px}
.contact-info{padding:40px;border-radius:0;border-top:3px solid var(--azul)}
.contact-item{gap:18px;margin-bottom:28px}
.contact-item p{overflow-wrap:anywhere}
.form-group{margin-bottom:22px}
.form-group label{color:var(--negro);font-weight:600;margin-bottom:8px}
.form-group input,.form-group select,.form-group textarea{font-size:1rem;border-color:#858e9b;border-radius:2px;padding:13px 15px;color:var(--negro)}
.form-group input::placeholder,.form-group textarea::placeholder{color:#5f6975}
.form-group textarea{min-height:160px}
.privacy-check{gap:12px;margin-bottom:24px}
.blog-featured-card{grid-template-columns:1.2fr 1fr;background:var(--gris-claro);border:0;border-radius:0;margin-bottom:56px;transition:none}
.blog-featured-card:hover{transform:none;box-shadow:none}
.blog-featured-visual{min-height:340px}
.blog-featured-body{padding:40px}
.blog-featured-body h2{font-size:2rem}
.blog-grid{gap:40px 28px}
.blog-card{border:0;border-bottom:1px solid var(--linea);border-radius:0;transition:none}
.blog-card:hover{transform:none;box-shadow:none}
.blog-card-img{aspect-ratio:16/10}
.blog-card-body{padding:24px 0}
.blog-card-date{font-size:.75rem;letter-spacing:0;text-transform:none;font-weight:500;margin-bottom:12px}
.blog-card-body h3{font-size:1.25rem}
.blog-card:hover h3,.blog-featured-card:hover h2{color:var(--azul)}
.article-page{padding-block:56px}
.article-detail .blog-hero h1{font-size:clamp(2rem,3.3vw,3rem);max-width:1100px}
.article-page h1{font-size:clamp(2rem,4vw,3.25rem)}
.article-hero-img{border-radius:0}
.article-content h2{font-size:1.75rem;margin:44px 0 16px}
.article-content blockquote{border-left-width:2px;border-radius:0}
.article-source{overflow-wrap:anywhere}
.article-cta{background:var(--gris-claro);border-left:3px solid var(--azul);border-radius:0;text-align:left;color:var(--negro)}
.article-cta h3{color:var(--negro)}.article-cta p{color:var(--gris-oscuro);margin-inline:0}
/* La marca vuelve a cerrar la página, sin cambiar su logo. */
.footer{background:var(--gris-claro);color:var(--gris-oscuro);padding:64px 0 28px;border-top:1px solid var(--linea)}
.footer-grid{gap:48px;margin-bottom:48px}
.footer-logo{display:block;margin-bottom:20px;width:max-content}
.footer-logo img{height:64px;width:auto}
.footer h2,.footer h4{font-size:.875rem;line-height:1.4;letter-spacing:0;color:var(--negro);margin-bottom:20px}
.footer li{margin-bottom:10px}
.footer a,.footer-bottom,.footer-bottom a{color:var(--gris-oscuro)}
.footer a:hover{color:var(--azul)}
.footer-bottom{flex-wrap:wrap;gap:16px;border-color:var(--linea);padding-top:24px}
.footer-cta{display:none}
.footer-cta p{font-size:1rem;font-weight:600;color:var(--negro);margin-bottom:12px;text-wrap:balance}
.footer-cta .btn-primary{width:100%;color:white}
.footer-cta .btn-primary:hover{color:white}
.cookie-banner{background:white;color:var(--gris-oscuro);border-top:1px solid var(--linea);padding:24px 48px;box-shadow:0 -6px 24px #20252d0a}
.cookie-content{gap:32px;flex-wrap:nowrap}
.cookie-content p{min-width:0;font-size:.8125rem}
.cookie-content p a{color:var(--azul);text-decoration:underline}
.cookie-btn{min-height:44px;border-radius:2px;font-size:.8125rem}
.cookie-settings{color:var(--negro);border-color:#858e9b}
.cookie-settings:hover{color:var(--azul);border-color:var(--azul)}
.wa-float{background:#166c3b;border-radius:4px;height:52px;font-size:.8125rem;box-shadow:0 8px 22px #20252d16}
.wa-float:hover{background:#11552e;transform:none}
@media(max-width:1100px){
  .container{padding-inline:32px}.nav-links{gap:22px}.hero-content{padding-right:32px}
  .hero-actions{flex-direction:column;align-items:flex-start;gap:8px}
  .hero>.container,.hero-slide>.container{min-height:552px;padding-top:72px}
  .two-col,.about-grid,.contact-grid{gap:48px}.footer-grid{gap:28px}.system-strip a{padding-inline:16px}
  .services-grid{gap:36px 32px}.specialty-hero>.container{gap:40px}
}
@media(max-width:1024px){
  .footer-cta{display:block;max-width:360px;margin:32px auto 0;padding-bottom:var(--cookie-banner-height,0px);text-align:center}
}
@media(max-width:820px){
  :root{--nav-h:76px}.container{padding-inline:24px}.nav-logo img{height:50px}.nav-toggle{display:block}
  .nav-links{display:none;position:fixed;inset:var(--nav-h) 0 0;background:white;overflow-y:auto;flex-direction:column;align-items:stretch;gap:0;padding:24px;transform:none;transition:none}
  .nav-links.open{display:flex}.nav-links>li>a{font-size:1.1rem;padding-block:15px}.nav-links>li:last-child{margin-top:20px}.nav-links>li:last-child>a{text-align:center}
  .dropdown-menu{display:block;position:static;width:100%;opacity:1;visibility:visible;box-shadow:none;border:0;transform:none;padding:0 0 12px 12px}.dropdown-menu a{padding:9px 0}
  .hero{display:flex;flex-direction:column}.hero-slide{display:flex;flex-direction:column}
  .hero>.container,.hero-slide>.container{min-height:360px;width:100%;padding-top:44px;padding-bottom:36px;display:flex;align-items:flex-start;flex:1 0 auto}
  .hero-content{width:100%;padding:0}.hero h1,.hero-slide h2{font-size:clamp(2.4rem,7vw,3.5rem);max-width:630px}
  .hero .hero-kicker{margin-bottom:20px}.hero p{max-width:520px;margin-bottom:24px}
  .hero-actions{flex-direction:row;align-items:center;gap:20px}
  .hero-visual,.hero-slide .hero-visual{position:relative;inset:auto;order:2;flex:none;height:340px;width:100%}
  .hero-visual img{object-position:center}
  .hero.hero-carousel>.hero-carousel-controls{position:static;order:1;padding-block:10px;justify-content:flex-start}
  .system-strip .container{grid-template-columns:1fr 1fr}.system-strip a{min-height:64px;border-bottom:1px solid rgba(255,255,255,.22);padding-inline:12px}.system-strip a:nth-child(3){border-left:1px solid rgba(255,255,255,.22)}
  .system-strip a:nth-child(n+3){border-bottom:0}
  .section{padding-block:60px}.section-heading{margin-bottom:32px}.services-grid{gap:32px 24px}
  .service-row h2,.service-row h3{font-size:1.3rem}.service-row p{font-size:.875rem}.service-photo{aspect-ratio:16/10}
  .faq-layout,.two-col,.about-grid,.contact-grid{grid-template-columns:1fr;gap:32px}
  .cta-banner{padding:32px;grid-template-columns:1fr;gap:16px}.cta-banner>.btn{grid-column:1;grid-row:auto;justify-self:start}.cta-section{padding-block:44px}
  .service-hero,.blog-hero{padding:calc(var(--nav-h) + 40px) 0 40px}
  .specialty-hero{padding:0}.specialty-hero>.container{grid-template-columns:1fr;min-height:0;gap:32px;padding-block:36px}
  .specialty-visual img{max-height:340px}.specialty-hero h1{font-size:clamp(2.3rem,6vw,3.25rem)}
  .service-body,.blog-section{padding-block:52px}
  .blog-featured-card{grid-template-columns:1fr}.blog-featured-visual{min-height:280px}.blog-featured-body{padding:32px}.blog-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}.footer-grid>div:first-child{grid-column:1/-1;max-width:520px}
  .cookie-banner{padding:20px 24px}.cookie-content{flex-wrap:wrap;gap:16px}.cookie-content p{flex-basis:100%}.wa-float{right:16px;height:48px;width:48px;padding:0;justify-content:center}.wa-float-label{display:none}
}
@media(max-width:520px){
  .hero h1,.hero-slide h2{font-size:clamp(2.1rem,9.5vw,2.75rem)}
  .hero>.container,.hero-slide>.container{min-height:352px;padding-top:36px;padding-bottom:24px}
  .hero p{font-size:.9375rem}.hero .hero-kicker{font-size:.8125rem}
  .hero-actions{flex-direction:column;align-items:stretch;gap:4px}.hero .btn-outline{min-height:44px}
  .hero-visual,.hero-slide .hero-visual{height:250px}
  .system-strip .container{padding-inline:12px}.system-strip a{font-size:.75rem;gap:10px}.system-strip .arrow-icon{width:18px}
  .services-grid{grid-template-columns:1fr;gap:32px}.service-row{gap:16px;padding-bottom:20px}.service-photo{aspect-ratio:16/9}
  .service-row h2,.service-row h3{font-size:1.4rem}.service-row p{font-size:.9375rem}
  .faq-layout>div:first-child{margin-bottom:28px}.faq-question{font-size:.9375rem;padding-block:20px}
  .feature-list{grid-template-columns:1fr;gap:16px}
  .contact-info,.cta-banner,.article-cta{padding:24px}.blog-grid{grid-template-columns:1fr}.blog-featured-body{padding:24px}.blog-featured-body h2{font-size:1.65rem}.blog-featured-visual{min-height:220px}.article-page{padding-block:40px}.article-meta{overflow-wrap:anywhere}
  .footer{padding-top:44px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px;margin-bottom:40px}.footer-grid>div:first-child{grid-column:1/-1}.footer-grid>div:last-child{grid-column:1/-1}
  .footer-cta{padding-bottom:calc(64px + var(--cookie-banner-height,0px))}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* ============ 3. Formulario de contacto: honeypot y estado ============ */
/* Honeypot antispam: fuera de pantalla, pero presente en el DOM para los bots. */
.hp-campo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-status{
  margin-top:16px;padding:14px 16px;border-radius:2px;
  border-left:3px solid var(--azul);background:var(--gris-claro);
  color:var(--negro);font-size:.875rem;line-height:1.55;
}
.form-status[data-estado="ok"]{border-left-color:#166c3b;background:#eef7f1}
.form-status[data-estado="error"]{border-left-color:#b91c1c;background:#fdf0f0}
.form-status[hidden]{display:none}
.btn[aria-busy="true"]{opacity:.7;cursor:progress}

/* ============ 4. Transición entre páginas: fundido al navegar ============ */
/* Entrada: la clase "pagina-entra" va escrita en el <html> de cada página, así
   el fundido arranca antes del primer pintado (sin parpadeo) y sin depender de
   JavaScript. Usa animation y no transition a propósito: animation sin
   fill-mode se limpia sola al terminar, de modo que si el JS nunca corre la
   página igual queda visible, y además no pisa el fundido de salida. */
@keyframes paginaEntra { from { opacity: 0 } to { opacity: 1 } }
html.pagina-entra body { animation: paginaEntra .3s ease }

/* Salida: la añade site.js al hacer clic en un enlace interno del sitio. */
html.pagina-fuera body { opacity: 0; transition: opacity .17s ease }

@media (prefers-reduced-motion: reduce) {
  html.pagina-entra body { animation: none }
  html.pagina-fuera body { opacity: 1; transition: none }
}

/* ============ 5. Entrada del header al cargar la página ============ */
/* El header cae desde arriba y se asienta. Sin fill-mode a propósito: al
   terminar, la animación se limpia sola y no deja un transform pegado al
   elemento; en un header fijo ese transform crearía un contexto de apilado
   (y de contención para el menú móvil, que también es fijo) sin necesidad.
   Los usuarios con prefers-reduced-motion quedan cubiertos por la regla
   global que anula animaciones y transiciones. */
@keyframes navEntra {
  from { transform: translateY(-100%); opacity: 0 }
  to   { transform: translateY(0);     opacity: 1 }
}
.navbar { animation: navEntra .5s cubic-bezier(.34,1.12,.64,1) }

/* ============ 6. Desplazamiento de la imagen al entrar cada diapositiva ============ */
/* La imagen entra corrida hacia la derecha y se desplaza hacia la izquierda hasta
   su sitio. El scale inicial la agranda lo justo para que el desplazamiento no deje
   un borde vacío a la izquierda: con 6% de desplazamiento hace falta al menos
   (1+0,12)/2 = 6% de escala por lado, así que 1.14 va con margen. El overflow
   recorta lo que sobresale.
   La animación cuelga de .is-active, así que se reinicia cada vez que la
   diapositiva vuelve a activarse, sin tocar el JavaScript del carrusel. */
.hero-visual { overflow: hidden }
@keyframes heroImagenEntra {
  from { transform: translateX(6%) scale(1.14) }
  to   { transform: translateX(0)  scale(1) }
}
.hero-slide.is-active .hero-visual img { animation: heroImagenEntra .9s var(--ease-out) }

/* ============ 7. Entrada de la franja de especialidades ============ */
/* Los cuatro ítems suben y aparecen uno tras otro, de izquierda a derecha.
   fill-mode 'backwards' (no 'both') a propósito: aplica el estado inicial durante
   el retardo de cada ítem, que es lo que produce el escalonado, pero al terminar
   suelta la animación y no deja un transform pegado al enlace. */
@keyframes franjaEntra {
  from { opacity: 0; transform: translateY(14px) }
  to   { opacity: 1; transform: translateY(0) }
}
.system-strip a { animation: franjaEntra .5s var(--ease-out) backwards }
.system-strip a:nth-child(1) { animation-delay: .06s }
.system-strip a:nth-child(2) { animation-delay: .12s }
.system-strip a:nth-child(3) { animation-delay: .18s }
.system-strip a:nth-child(4) { animation-delay: .24s }

/* ============ 8. Movimiento sutil del botón de WhatsApp ============ */
/* Un latido lento y leve para que el botón no quede inerte: descansa la mayor
   parte del ciclo y da un pulso breve de 4,5% de escala. Deliberadamente suave;
   el objetivo es que se note vivo, no que persiga al visitante.
   No interfiere con nada: el botón se posiciona con 'bottom' desde JavaScript
   (no con transform), así que el latido no pelea con el reposicionamiento por el
   banner de cookies, y el :hover del botón solo cambia de color. */
@keyframes waLatido {
  0%, 60%, 100% { transform: scale(1) }
  80%           { transform: scale(1.045) }
}
.wa-float { animation: waLatido 3.6s ease-in-out infinite }

/* ============ 9. Movimiento de las imágenes al pasar el cursor ============ */
/* Las fotos de los cards (servicios y blog) se acercan levemente al pasar el
   cursor. Los cards habían quedado sin ninguna reacción tras el rediseño, así que
   esto además devuelve la señal de que son clicables.
   Va dentro de @media (hover:hover) and (pointer:fine) para que en pantallas
   táctiles no quede un zoom pegado tras el toque, y se dispara también con
   :focus-within para que quien navega con teclado reciba la misma señal.
   El recorte lo hace el contenedor (overflow:hidden), no la imagen. */
@media (hover: hover) and (pointer: fine) {
  .blog-card-img img,
  .service-photo { transition: transform .55s var(--ease-out) }

  .blog-card:hover .blog-card-img img,
  .blog-card:focus-within .blog-card-img img,
  .service-card:hover .service-photo,
  .service-card:focus-within .service-photo { transform: scale(1.055) }

  /* el <picture> es el que recorta: sin esto la imagen ampliada se sale del card */
  .service-card picture { display: block; overflow: hidden }
}

/* ============ 10. Placa perforada animada ============ */
/* En las zonas de superficie del sitio (banner de llamada, pie y franja de
   especialidades) corre una reticula de puntos finos, como una plancha
   perforada, que deriva muy despacio en diagonal. Las zonas de contenido quedan
   limpias; la textura marca las superficies.
   Va en un pseudo-elemento con z-index:-1 y la zona como contexto de apilado
   (isolation:isolate): queda por ENCIMA del fondo de la zona y por DEBAJO de su
   contenido, sin tocar el HTML ni el z-index de los hijos.
   Sin archivos ni data URI: son degradados de CSS. Ese fue un motivo de peso
   para elegirla — un data URI mal codificado hace que el navegador descarte la
   declaracion y el fondo caiga a 'none' en silencio, y eso ya costo dos rondas
   de depuracion.
   Se anima con transform y no con background-position: el navegador lo resuelve
   en la capa de composicion y no repinta la banda. La baldosa mide 18px, asi que
   con desplazarla una baldosa (18px) el bucle encaja sin costura; por eso el
   pseudo-elemento solo necesita 24px de margen a cada lado, no los 520px que
   pedia el recorrido de las ondas.
   Los puntos van en AZUL OSCURO sobre la franja azul, no en blanco: el blanco
   sobre #2563EB ya arranca en 5,17:1 y cualquier punto claro le come margen
   hasta incumplir el minimo AA. Un punto oscuro hace lo contrario, sube el
   contraste del texto blanco que cae encima.
   La regla global de prefers-reduced-motion apaga el movimiento: la reticula
   queda dibujada y quieta. */
.cta-banner, .footer, .system-strip { position: relative; isolation: isolate; overflow: hidden }

.cta-banner::before,
.footer::before,
.system-strip::before {
  content: ''; position: absolute; z-index: -1;
  inset: -24px; pointer-events: none;
  background-repeat: repeat;
  background-size: 18px 18px;
  animation: placaDeriva 24s linear infinite;
}

/* Sobre las superficies claras (#F3F4F6): azul de marca. */
.cta-banner::before,
.footer::before {
  background-image: radial-gradient(circle, rgba(37, 99, 235, .2) 1px, transparent 1.35px);
}

/* Sobre la franja azul (#2563EB): azul oscuro, que se ve y ademas protege el
   contraste del texto blanco. */
.system-strip::before {
  background-image: radial-gradient(circle, rgba(30, 58, 138, .38) 1px, transparent 1.35px);
}

@keyframes placaDeriva {
  from { transform: translate3d(0, 0, 0) }
  to   { transform: translate3d(18px, 18px, 0) }
}

/* ============ 11. Pequeña transparencia del header ============ */
/* Al bajar por el sitio, la barra deja ver tenuemente lo que pasa por debajo.
   El fondo translúcido y el desenfoque van en un pseudo-elemento con z-index:-1,
   y NO en el propio .navbar: backdrop-filter convierte al elemento en bloque
   contenedor de sus descendientes position:fixed, y el menú móvil es justamente
   un .nav-links fixed dentro del header. Aplicado al header, el menú quedaría
   anclado al header en vez de a la ventana. En el pseudo-elemento el desenfoque
   sí actúa (difumina lo que tiene detrás) sin tocar el posicionamiento de nadie.
   El borde inferior se traslada al pseudo-elemento: con z-index:-1 se pinta por
   encima del fondo del header, así que un borde en el header quedaría apagado
   bajo el blanco translúcido.
   Sobre la transparencia: al 88% el peor caso posible (contenido negro puro
   debajo) deja el fondo del header en #E0E0E0, y el texto del menú (#20252D)
   mantiene 11,6:1. No hay riesgo de perder legibilidad.
   Sin backdrop-filter (navegadores viejos) queda solo el fondo translúcido,
   que ya es legible por sí mismo: degradación correcta. */
.navbar { background: transparent; border-bottom: none; isolation: isolate }

.navbar::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid var(--linea);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ============ 12. Sombra azul bajo el header ============ */
/* En el color de marca (--azul, #2563EB) y proyectada hacia abajo, para que la
   barra se lea como una capa que flota sobre el contenido al desplazarse.
   Va con spread negativo (-12px): sin el, el desenfoque se abre tambien hacia
   los lados y hacia arriba, y la barra queda con un halo que la ensucia por
   detras en vez de una sombra debajo. El desplazamiento vertical positivo mas
   el spread negativo concentran la sombra donde debe verse.
   box-shadow no convierte al elemento en bloque contenedor de sus hijos
   position:fixed (a diferencia de filter o backdrop-filter), asi que el menu
   movil, que es un .nav-links fixed dentro del header, sigue anclado a la
   ventana. Por eso la sombra va en el header y no hizo falta moverla al
   pseudo-elemento, como si ocurrio con la transparencia. */
.navbar { box-shadow: 0 10px 28px -12px rgba(37, 99, 235, .6); }

/* ============ 13. CTA fija al pie en móvil ============ */
/* En móvil (<=820px, el mismo corte donde el menú pasa a hamburguesa) el botón
   de WhatsApp deja de ser la burbuja flotante y se convierte en una barra CTA
   pegada al borde inferior, de ancho completo: pasa a ser el llamado a la acción
   del sitio en vez de un elemento que compite con el contenido.
   No hay estructura HTML nueva: es el mismo <a> re-estilado. El texto de la
   barra va en un span propio (.wa-float-cta) para no tocar el "WhatsApp" que
   sigue leyéndose en la píldora de escritorio.
   El pie reserva el alto de la barra para que su último contenido no quede
   debajo, y --cookie-banner-height la levanta cuando el banner de cookies está
   visible (la misma convención que ya usaba la burbuja).
   Se va el latido: escalar una barra de ancho completo marea. */
:root { --cta-bar-h: 58px; }

.wa-float-cta { display: none; }   /* el texto de la barra solo existe en móvil */

@media (max-width: 820px) {
  .wa-float {
    left: 0; right: 0; width: auto;
    bottom: var(--cookie-banner-height, 0px);
    height: calc(var(--cta-bar-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 1rem; padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: 0; justify-content: center; gap: .7rem;
    font-size: 1rem; animation: none;
    box-shadow: 0 -6px 20px rgba(32, 37, 45, .18);
  }
  .wa-float:hover { transform: none }
  .wa-float-label { display: none }
  .wa-float-cta { display: inline }
  .footer {
    padding-bottom: calc(var(--cta-bar-h) + env(safe-area-inset-bottom, 0px)
                         + var(--cookie-banner-height, 0px));
  }
  .footer-cta { padding-bottom: 0 }   /* el pie ya reserva el alto de la barra */
}

/* ============ 14. Trama de circuito en el hero ============ */
/* En la zona de texto del hero corre una trama de circuito impreso muy tenue:
   pistas horizontales con codos a 45 grados, terminales cortas que rematan en un
   pad y vias en los quiebres. Todo en azul de marca al 5% (los pads un poco mas,
   al 9%) sobre el gris claro.
   Va en un pseudo-elemento del .hero, no solo del bloque de texto: el texto
   ocupa la mitad izquierda y la imagen se superpone desde el 51%, asi que
   aplicandola al hero completo aparece unicamente en la zona de texto y sin
   dejar un borde vertical duro contra la imagen. La imagen, al estar
   posicionada despues y sin z-index propio, la tapa.
   La baldosa mide 160x120 y esta dibujada para envolver sin costura: cada pista
   entra y sale a la misma altura, asi que al repetirse a los lados empalma
   consigo misma. Las terminales cortas no tocan el borde, de modo que no
   necesitan coincidir con nada.
   El avance del bucle es de una baldosa completa (160 px) en horizontal: al
   desplazar exactamente ese ancho el mosaico vuelve a coincidir consigo mismo.
   Por eso el pseudo-elemento necesita 180 px de margen a los lados.
   Es un data URI y va con codificacion COMPLETA (quote(svg, safe='')): con un
   '<' o un espacio sin codificar el navegador descarta la declaracion entera y
   el fondo cae a 'none' en silencio. */
.hero { isolation: isolate; }

.hero::before {
  content: ''; position: absolute; z-index: -1; inset: 0 -180px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27120%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%232563EB%27%20stroke-opacity%3D%27.05%27%20stroke-width%3D%271%27%20stroke-linecap%3D%27square%27%20stroke-linejoin%3D%27miter%27%3E%3Cpath%20d%3D%27M0%2012%20H20%20L26%206%20H38%20L44%2012%20H160%27%2F%3E%3Cpath%20d%3D%27M0%2036%20H90%20L96%2042%20H108%20L114%2036%20H160%27%2F%3E%3Cpath%20d%3D%27M0%2060%20H50%20L56%2054%20H68%20L74%2060%20H160%27%2F%3E%3Cpath%20d%3D%27M0%2084%20H110%20L116%2090%20H128%20L134%2084%20H160%27%2F%3E%3Cpath%20d%3D%27M0%20108%20H70%20L76%20102%20H88%20L94%20108%20H160%27%2F%3E%3Cpath%20d%3D%27M30%2036%20V22%27%2F%3E%3Cpath%20d%3D%27M100%2060%20V44%27%2F%3E%3Cpath%20d%3D%27M140%2084%20V66%27%2F%3E%3Cpath%20d%3D%27M20%20108%20V98%27%2F%3E%3Cpath%20d%3D%27M70%2060%20L78%2068%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%232563EB%27%3E%3Ccircle%20cx%3D%2744%27%20cy%3D%2712%27%20r%3D%271.1%27%20fill-opacity%3D%27.07%27%2F%3E%3Ccircle%20cx%3D%27114%27%20cy%3D%2736%27%20r%3D%271.1%27%20fill-opacity%3D%27.07%27%2F%3E%3Ccircle%20cx%3D%2774%27%20cy%3D%2760%27%20r%3D%271.1%27%20fill-opacity%3D%27.07%27%2F%3E%3Ccircle%20cx%3D%27134%27%20cy%3D%2784%27%20r%3D%271.1%27%20fill-opacity%3D%27.07%27%2F%3E%3Ccircle%20cx%3D%2794%27%20cy%3D%27108%27%20r%3D%271.1%27%20fill-opacity%3D%27.07%27%2F%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%2720%27%20r%3D%272%27%20fill-opacity%3D%27.09%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%2742%27%20r%3D%272%27%20fill-opacity%3D%27.09%27%2F%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%2764%27%20r%3D%272%27%20fill-opacity%3D%27.09%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2796%27%20r%3D%272%27%20fill-opacity%3D%27.09%27%2F%3E%3Ccircle%20cx%3D%2780%27%20cy%3D%2770%27%20r%3D%272%27%20fill-opacity%3D%27.09%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 160px 120px;
  background-repeat: repeat;
  animation: heroCircuitoFlujo 80s linear infinite;
}

@keyframes heroCircuitoFlujo {
  from { transform: translate3d(0, 0, 0) }
  to   { transform: translate3d(160px, 0, 0) }
}

/* ============================================================
   13. Nuestros clientes
   Los logos se unificaron al azul de marca (#2563EB) horneando el
   color en el archivo y conservando el canal alfa original, para que
   la silueta quede limpia. No se usa filtro CSS: el logo de Lo Prado
   es blanco y un filtro de gris no lo salvaria, en cambio pasar su
   alfa a azul si. Los archivos originales a color quedan intactos en
   la carpeta Marca/ del cliente.
   ============================================================ */
.clientes h2,
.clientes .text-lead { text-align: center; }
.clientes .text-lead { max-width: 44rem; margin-left: auto; margin-right: auto; }
.clientes-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3.5rem 5rem;
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
}
.clientes-grid img {
  display: block;
  height: auto;
  width: auto;
  max-height: 92px;
  max-width: 130px;   /* tope de ancho: un logotipo de letras grandes pesa mas
                         que un emblema compacto a la misma altura, y sin tope
                         se come la fila */
  opacity: .9;
}
@media (max-width: 640px) {
  /* Dos por fila: con cuatro logos el flex dejaba tres arriba y uno abajo,
     que se lee como un accidente. En escritorio la fila sigue siendo flex. */
  .clientes-grid { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; gap: 2.5rem 2rem; }
  .clientes-grid img { max-height: 64px; max-width: 92px; }
}

/* ============ Proveedor de Mercado Público ============ */
/* Es una credencial, no un cliente: va fuera de la grilla, con su propia
   leyenda, y en los colores originales del logotipo oficial. Recolorearlo
   como los logos de clientes seria alterar una marca de terceros. */
.proveedor-estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  margin: 2.75rem auto 0;
}
.proveedor-estado p {
  margin: 0;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4B5563;
}
.proveedor-estado img { display: block; width: auto; height: 54px; max-width: 100%; }
@media (max-width: 640px) {
  .proveedor-estado { margin-top: 2rem; }
  .proveedor-estado img { height: 40px; }
}

/* ============ Redes sociales del pie ============ */
/* Los tres enlaces del pie van solo con su icono: la direccion no se muestra.
   Heredan el color del pie (gris oscuro sobre gris claro) y pasan al azul de
   marca al pasar el mouse o al enfocar, igual que el resto de los enlaces.
   La caja es de 40x40 px para que el area tactil cumpla el minimo de 24 px de
   WCAG 2.5.8 con holgura; con el trazo de 21 px queda un colchon de ~9,5 px por
   lado, asi que el bloque lleva un margen izquierdo negativo para que el borde
   visible del primer icono quede alineado con el texto de arriba. */
.social { display: flex; gap: 4px; margin: 20px 0 0 -10px; }
.social a { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; color: var(--gris-oscuro);
  text-decoration: none; transition: color .15s ease, background-color .15s ease; }
.social a:hover { color: var(--azul); background-color: rgba(37, 99, 235, .08); }
.social a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.social svg { width: 21px; height: 21px; fill: currentColor; display: block; }

@media (prefers-reduced-motion: reduce) { .social a { transition: none; } }