/* ==========================================================================
   ESTRATEGIAS WASKIN — Hoja de estilos principal
   Paleta de marca: Navy #1D3351  ·  Azul #5A85BE
   Tipografía: Sora (titulos) + Inter (cuerpo)
   ========================================================================== */

/* ---------- 1. Tokens de diseño ---------- */
:root {
  /* Marca */
  --navy:         #1D3351;   /* primario */
  --navy-deep:    #142440;   /* fondos oscuros / footer */
  --navy-deeper:  #0E1B2E;
  --navy-soft:    #294A73;    /* navy mas claro para degradados */
  --navy-700:     #24416A;

  --blue:         #5A85BE;   /* acento de marca */
  --blue-bright:  #4D7ABA;
  --blue-ink:     #2F5E9E;   /* azul para texto/links (AA en blanco) */
  --blue-light:   #8FB4DF;
  --blue-100:     #DCE7F4;
  --blue-50:      #EEF3FA;

  /* Neutros frios */
  --ink:          #16233B;   /* titulos */
  --body:         #515E76;   /* cuerpo */
  --muted:        #6E7B92;   /* secundario */
  --line:         #E3E9F1;   /* bordes */
  --line-soft:    #EDF1F7;
  --bg:           #FFFFFF;
  --bg-alt:       #F5F8FC;   /* seccion alterna */
  --bg-tint:      #EEF3FA;

  /* Tipografia */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.15rem, 1.5rem + 2.9vw, 3.15rem);
  --fs-h1:   clamp(2.1rem, 1.3rem + 3.2vw, 3.05rem);
  --fs-h2:   clamp(1.7rem, 1.2rem + 2.1vw, 2.45rem);
  --fs-h3:   clamp(1.22rem, 1.05rem + 0.7vw, 1.45rem);
  --fs-lead: clamp(1.06rem, 1rem + 0.4vw, 1.22rem);
  --fs-body: 1.0625rem;
  --fs-sm:   0.9rem;
  --fs-xs:   0.795rem;

  /* Espaciado */
  --section-y: clamp(4.25rem, 3rem + 5vw, 7rem);
  --container: 1200px;
  --gutter:    clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);

  /* Radios (escala: inputs/botones 10px · chips pill · cards 18px · media 22px) */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 30px;
  --r-pill: 999px;

  /* Sombras (tintadas a navy) */
  --sh-xs: 0 1px 2px rgba(29,51,81,.06);
  --sh-sm: 0 2px 6px rgba(29,51,81,.07), 0 1px 2px rgba(29,51,81,.05);
  --sh-md: 0 8px 24px rgba(29,51,81,.09), 0 2px 6px rgba(29,51,81,.05);
  --sh-lg: 0 22px 48px rgba(29,51,81,.13), 0 8px 18px rgba(29,51,81,.07);
  --sh-blue: 0 18px 38px rgba(90,133,190,.30);

  /* Movimiento (curvas fuertes, filosofía Emil Kowalski) */
  --ease: cubic-bezier(.16, 1, .3, 1);          /* ease-out fuerte: entradas y UI */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1); /* movimiento/morphing en pantalla */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);  /* curva tipo iOS para el menú */
  --t-press: .1s;   /* feedback de pulsado: rápido */
  --t-fast: .15s;
  --t: .24s;        /* interacciones de UI bajo 300ms */
  --t-slow: .5s;

  --header-h: 74px;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
img { border-radius: inherit; }
a { color: var(--blue-ink); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--navy); }
ul, ol { list-style: none; padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
p { text-wrap: pretty; }

/* ---------- 3. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-wide { max-width: 1320px; }
.section { padding-block: var(--section-y); }
.section-alt { background: var(--bg-alt); }
.section-navy { background: var(--navy); color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-ink);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--blue);
  border-radius: 2px;
}
.section-navy .eyebrow { color: var(--blue-light); }
.section-navy .eyebrow::before { background: var(--blue-light); }

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: .85rem; }
.section-head p { margin-top: 1rem; font-size: var(--fs-lead); color: var(--body); }
.section-navy .section-head p { color: #c6d2e4; }

.lead { font-size: var(--fs-lead); color: var(--body); }
.text-balance { text-wrap: balance; }

/* ---------- 4. Botones ---------- */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bg);
  border-radius: var(--r-sm);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
              background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-md); color: var(--btn-fg); }
.btn:active { transform: scale(.97); transition-duration: var(--t-press); }

.btn-primary { --btn-bg: var(--navy); --btn-fg: #fff; }
.btn-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }

.btn-accent { --btn-bg: var(--blue-ink); --btn-fg: #fff; }
.btn-accent:hover { background: #275089; border-color: #275089; box-shadow: var(--sh-blue); }

.btn-outline {
  --btn-fg: var(--navy);
  background: transparent;
  border-color: var(--line);
  color: var(--navy);
}
.btn-outline:hover { border-color: var(--navy); background: var(--navy); color: #fff; }

/* Botones sobre fondo navy */
.on-navy .btn-primary, .btn-on-dark {
  --btn-bg: #fff; --btn-fg: var(--navy);
}
.on-navy .btn-primary:hover, .btn-on-dark:hover { background: var(--blue-50); border-color: var(--blue-50); color: var(--navy); }
.on-navy .btn-outline, .btn-ghost-light {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.32);
}
.on-navy .btn-outline:hover, .btn-ghost-light:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.btn-text {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--blue-ink);
  padding: .2rem 0;
}
.btn-text svg { width: 1.05em; height: 1.05em; transition: transform var(--t) var(--ease); }
.btn-text:hover { color: var(--navy); }
.btn-text:hover svg { transform: translateX(4px); }

/* ---------- 5. Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(29,51,81,.06);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: 38px; width: auto; }
.nav-links {
  display: flex; align-items: center; gap: .35rem;
  margin-left: auto;
}
.nav-links a {
  position: relative;
  padding: .55rem .85rem;
  font-weight: 500; font-size: .96rem;
  color: var(--navy);
  border-radius: var(--r-xs);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .32rem;
  height: 2px; background: var(--blue); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease);
}
.nav-links a:hover { color: var(--blue-ink); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--blue-ink); }
.nav-cta { display: inline-flex; align-items: center; gap: .75rem; margin-left: .6rem; }
.nav-links .mobile-cta { display: none; } /* solo visible dentro del menú móvil */

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border-radius: var(--r-xs);
  align-items: center; justify-content: center;
  color: var(--navy);
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle { transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.nav-toggle:hover { background: var(--blue-50); }
.nav-toggle:active { transform: scale(.92); transition-duration: var(--t-press); }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 600px at 85% -5%, rgba(90,133,190,.28), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 55%, var(--navy-deeper) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero::before { /* sutil marca de flecha ascendente */
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='560' viewBox='0 0 760 560'%3E%3Cpath d='M40 430 L210 250 L330 360 L560 110' fill='none' stroke='%235A85BE' stroke-opacity='0.10' stroke-width='46' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M470 110 L600 90 L580 220' fill='none' stroke='%235A85BE' stroke-opacity='0.10' stroke-width='46' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -60px top -40px;
  background-size: 620px auto;
  z-index: -1;
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(3.5rem, 3rem + 5vw, 6rem);
  min-height: calc(100dvh - var(--header-h));
}
.hero-copy { max-width: 38rem; }
.hero .eyebrow { color: var(--blue-light); }
.hero h1 {
  color: #fff;
  font-size: var(--fs-hero);
  margin-top: 1.1rem;
  letter-spacing: -0.03em;
}
.hero h1 .accent { color: var(--blue-light); }
.hero-sub {
  margin-top: 1.4rem;
  font-size: var(--fs-lead);
  color: #cdd9ea;
  max-width: 34rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.1rem; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.2rem;
  margin-top: 2.6rem; padding-top: 1.7rem;
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero-trust div { display: flex; flex-direction: column; }
.hero-trust .num {
  font-family: var(--font-display); font-weight: 700; font-size: 1.7rem;
  color: #fff; letter-spacing: -.02em;
}
.hero-trust .lbl { font-size: var(--fs-xs); color: #9fb0c8; letter-spacing: .02em; }

.hero-visual { position: relative; }
.hero-visual .frame {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  border: 1px solid rgba(255,255,255,.12);
  aspect-ratio: 4 / 3.4;
}
.hero-visual .frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-card {
  position: absolute; left: -26px; bottom: 28px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 1rem 1.15rem;
  display: flex; align-items: center; gap: .85rem;
  max-width: 17rem;
}
.hero-card .ic {
  flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-ink);
}
.hero-card .ic svg { width: 24px; height: 24px; }
.hero-card .t { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1rem; line-height: 1.2; }
.hero-card .d { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- 7. Marca de divisiones / chips ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em;
  color: var(--blue-ink); background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-pill);
}

/* ---------- 8. "Somos" / intro ---------- */
.intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.intro-points { display: grid; gap: 1.1rem; margin-top: 1.8rem; }
.intro-point { display: flex; gap: .9rem; align-items: flex-start; }
.intro-point .ic {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-ink);
  border: 1px solid var(--blue-100);
}
.intro-point .ic svg { width: 22px; height: 22px; }
.intro-point h4 { font-family: var(--font-display); font-size: 1.04rem; color: var(--ink); margin-bottom: .15rem; }
.intro-point p { font-size: var(--fs-sm); color: var(--body); margin: 0; }

.media-stack { position: relative; }
.media-stack .main {
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg);
  aspect-ratio: 4 / 4.6;
}
.media-stack .main img { width: 100%; height: 100%; object-fit: cover; }
.media-badge {
  position: absolute; right: -18px; top: 30px;
  background: var(--navy); color: #fff;
  border-radius: var(--r-lg); padding: 1.1rem 1.25rem;
  box-shadow: var(--sh-lg); text-align: center; min-width: 8.5rem;
}
.media-badge .n { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--blue-light); }
.media-badge .l { font-size: var(--fs-xs); color: #c6d2e4; margin-top: .35rem; display: block; }

/* ---------- 9. Servicios (cards) ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2vw, 1.6rem);
}
.svc-card {
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--blue-100); }
.svc-card .thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.svc-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.svc-card:hover .thumb img { transform: scale(1.06); }
.svc-card .num {
  position: absolute; top: 14px; left: 14px;
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(20,36,64,.86); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  backdrop-filter: blur(4px);
}
.svc-card .body { padding: 1.5rem 1.5rem 1.65rem; display: flex; flex-direction: column; flex: 1; }
.svc-card h3 { color: var(--ink); }
.svc-card p { margin-top: .6rem; font-size: var(--fs-sm); color: var(--body); }
.svc-card ul { margin-top: 1rem; display: grid; gap: .5rem; }
.svc-card li { position: relative; padding-left: 1.5rem; font-size: var(--fs-sm); color: var(--body); }
.svc-card li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 3px var(--blue-50);
}
.svc-card .foot { margin-top: auto; padding-top: 1.3rem; }

/* Icono-chip generico para divisiones */
.svc-ic {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--navy), var(--navy-soft));
  color: #fff; box-shadow: var(--sh-sm);
}
.svc-ic svg { width: 27px; height: 27px; }

/* ---------- 10. Diferenciadores (feature list, layout alterno) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem) clamp(2rem, 4vw, 3.5rem);
}
.feature {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  padding-bottom: 1.6rem; border-bottom: 1px solid var(--line);
}
.feature:last-child, .feature:nth-last-child(2):nth-child(odd) { }
.feature .ic {
  width: 48px; height: 48px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-ink);
  border: 1px solid var(--blue-100);
}
.feature .ic svg { width: 25px; height: 25px; }
.feature h3 { font-size: 1.12rem; color: var(--ink); }
.feature p { margin-top: .4rem; font-size: var(--fs-sm); color: var(--body); }

/* ---------- 11. Proceso (timeline horizontal) ---------- */
.process { position: relative; }
.process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, 2.5vw, 2rem);
  counter-reset: step;
}
.step { position: relative; }
.step .top { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.step .dot {
  flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  color: #fff; background: linear-gradient(150deg, var(--navy), var(--navy-soft));
  box-shadow: var(--sh-md); position: relative; z-index: 1;
}
.step .line { flex: 1; height: 2px; background: var(--line); position: relative; }
.step:last-child .line { display: none; }
.step h3 { font-size: 1.1rem; color: var(--ink); }
.step p { margin-top: .45rem; font-size: var(--fs-sm); color: var(--body); }

/* ---------- 12. Mision / Vision / Valores ---------- */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.5vw, 1.8rem); }
.mv-card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.4rem);
  position: relative; overflow: hidden;
}
.mv-card.dark { background: var(--navy); color: #fff; border-color: transparent; }
.mv-card .ic {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-ink); margin-bottom: 1.2rem;
}
.mv-card.dark .ic { background: rgba(143,180,223,.16); color: var(--blue-light); }
.mv-card .ic svg { width: 28px; height: 28px; }
.mv-card h3 { font-size: var(--fs-h3); color: var(--ink); }
.mv-card.dark h3 { color: #fff; }
.mv-card p { margin-top: .85rem; color: var(--body); }
.mv-card.dark p { color: #c6d2e4; }

.values-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1rem, 2vw, 1.5rem);
}
/* 3 por fila (5 valores -> 3 + 2 centrados; 6 -> 3 + 3). Nunca una sola huérfana. */
.values-grid > * { flex: 0 1 calc(33.333% - 1.1rem); }
@media (max-width: 820px) {
  .values-grid > * { flex: 1 1 100%; max-width: 460px; }
}
.value {
  padding: 1.6rem 1.5rem; border-radius: var(--r-lg);
  background: var(--bg-alt); border: 1px solid var(--line-soft);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.section-alt .value { background: var(--bg); }
.value:hover { transform: translateY(-4px); box-shadow: var(--sh-md); background: var(--bg); }
.value .ic {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--navy), var(--navy-soft)); color: #fff;
  margin-bottom: 1.05rem;
}
.value .ic svg { width: 24px; height: 24px; }
.value h3 { font-size: 1.1rem; color: var(--ink); }
.value p { margin-top: .5rem; font-size: var(--fs-sm); color: var(--body); }

/* ---------- 13. CTA band ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band .bg { position: absolute; inset: 0; z-index: -2; }
.cta-band .bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band .scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(14,27,46,.94) 0%, rgba(20,36,64,.86) 55%, rgba(29,51,81,.7) 100%);
}
.cta-inner {
  display: grid; grid-template-columns: 1.4fr auto; align-items: center; gap: 2rem;
  padding-block: clamp(3rem, 5vw, 4.5rem); color: #fff;
}
.cta-inner h2 { color: #fff; }
.cta-inner p { margin-top: .9rem; color: #cdd9ea; font-size: var(--fs-lead); max-width: 44ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ---------- 14. Contacto + Footer ---------- */
.site-footer { background: var(--navy-deep); color: #c6d2e4; position: relative; overflow: hidden; }
.footer-contact {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-block: clamp(3.5rem, 5vw, 5.5rem);
}
.footer-contact::before {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(90,133,190,.22), transparent 65%);
  pointer-events: none;
}
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; position: relative; }
.contact-info .eyebrow { color: var(--blue-light); }
.contact-info h2 { color: #fff; margin-top: .8rem; }
.contact-info > p { margin-top: 1.1rem; color: #c6d2e4; max-width: 42ch; }
.contact-list { margin-top: 2rem; display: grid; gap: 1.15rem; }
.contact-item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-item .ic {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(143,180,223,.14); color: var(--blue-light);
  border: 1px solid rgba(143,180,223,.2);
}
.contact-item .ic svg { width: 23px; height: 23px; }
.contact-item .k { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: #8fa1bd; }
.contact-item a, .contact-item address {
  display: block; color: #fff; font-style: normal; font-weight: 500; font-size: 1.02rem; margin-top: .15rem;
}
.contact-item address { line-height: 1.55; }
.contact-item a:hover { color: var(--blue-light); }
.contact-socials { display: flex; gap: .65rem; margin-top: 2rem; }
.contact-socials a {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255,255,255,.06); color: #c6d2e4; border: 1px solid rgba(255,255,255,.1);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
.contact-socials a:hover { background: var(--blue-ink); color: #fff; transform: translateY(-3px); }
.contact-socials a:active { transform: scale(.94); transition-duration: var(--t-press); }
.contact-socials svg { width: 21px; height: 21px; }

/* Dirección detallada y mapa */
.addr-note { display: block; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.1); font-size: var(--fs-xs); font-weight: 400; color: #8fa1bd; line-height: 1.5; }
.footer-map-wrap { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }
.footer-map {
  position: relative; border-radius: var(--r-xl); overflow: hidden; line-height: 0;
  border: 1px solid rgba(255,255,255,.12); box-shadow: var(--sh-lg);
}
.footer-map #map-waskin { width: 100%; height: clamp(300px, 38vw, 440px); display: block; background: #dfe7f0; z-index: 0; }
.leaflet-container { font-family: var(--font-body); background: #dfe7f0; }
.leaflet-bar a { color: var(--navy); }
.leaflet-popup-content { font-family: var(--font-body); font-size: .9rem; color: var(--ink); line-height: 1.5; }
.leaflet-popup-content strong { color: var(--navy); }
/* Pin de marca (teardrop navy) */
.waskin-marker { background: none; border: 0; }
.waskin-marker .pin {
  display: block; width: 26px; height: 26px;
  background: var(--navy); border: 3px solid #fff;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 0 6px 14px rgba(14,27,46,.45);
}
.map-link {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.15rem;
  color: var(--blue-light); font-weight: 600; font-size: var(--fs-sm);
}
.map-link svg { width: 1.15em; height: 1.15em; }
.map-link svg:last-child { transition: transform var(--t) var(--ease); }
.map-link:hover { color: #fff; }
.map-link:hover svg:last-child { transform: translateX(4px); }

/* Formulario */
.contact-form {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3vw, 2.3rem);
  box-shadow: var(--sh-lg);
}
.form-title { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
.form-note { font-size: var(--fs-sm); color: #aebbd0; margin-top: .3rem; margin-bottom: 1.4rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.field label { font-size: var(--fs-sm); font-weight: 500; color: #dbe3ef; }
.field label .req { color: var(--blue-light); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .8rem .95rem;
  background: rgba(255,255,255,.95);
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: .98rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 118px; }
.field input::placeholder, .field textarea::placeholder { color: #8a96a8; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23515E76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.4rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(90,133,190,.28);
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #e9959a; box-shadow: 0 0 0 4px rgba(214,69,80,.18); }
.field .err { font-size: var(--fs-xs); color: #ffb8bd; min-height: 0; display: none; }
.field.invalid .err { display: block; }
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form-consent { display: flex; flex-direction: row; align-items: flex-start; gap: .65rem; font-size: var(--fs-xs); color: #aebbd0; margin: .2rem 0 1.2rem; }
.form-consent input[type="checkbox"] {
  flex: 0 0 auto; width: 18px; height: 18px; min-width: 18px; margin: .12rem 0 0;
  padding: 0; background: transparent; border: 0; box-shadow: none;
  accent-color: var(--blue); cursor: pointer;
}
.form-consent span { flex: 1 1 auto; }
.form-consent a { color: var(--blue-light); text-decoration: underline; }
.contact-form .btn { width: 100%; }
.form-status { margin-top: 1rem; font-size: var(--fs-sm); border-radius: var(--r-sm); padding: 0; max-height: 0; overflow: hidden; transition: max-height var(--t) var(--ease), padding var(--t) var(--ease); }
.form-status.show { padding: .85rem 1rem; max-height: 200px; }
.form-status.ok { background: rgba(99,179,138,.16); color: #bfe6cd; border: 1px solid rgba(99,179,138,.35); }
.form-status.bad { background: rgba(214,69,80,.16); color: #ffc4c8; border: 1px solid rgba(214,69,80,.35); }

/* Footer base */
.footer-main { padding-block: clamp(2.8rem, 4vw, 3.8rem); }
.footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
.footer-brand img { height: 40px; margin-bottom: 1.1rem; }
.footer-brand p { font-size: var(--fs-sm); color: #9fb0c8; max-width: 34ch; }
.footer-col h4 { font-family: var(--font-display); font-size: .98rem; color: #fff; margin-bottom: 1rem; letter-spacing: .01em; }
.footer-col ul { display: grid; gap: .65rem; }
.footer-col a { color: #b3c0d4; font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--blue-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: #8fa1bd;
}
.footer-bottom a { color: #8fa1bd; }
.footer-bottom a:hover { color: var(--blue-light); }

/* ---------- 15. Banner interno (sub-paginas) ---------- */
.page-hero {
  position: relative; isolation: isolate; color: #fff;
  background:
    radial-gradient(900px 500px at 88% -10%, rgba(90,133,190,.26), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='460' viewBox='0 0 620 460'%3E%3Cpath d='M30 360 L180 210 L280 300 L470 90' fill='none' stroke='%235A85BE' stroke-opacity='0.09' stroke-width='40' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right -40px top; background-size: 520px auto;
}
.page-hero-inner { padding-block: clamp(3.2rem, 4vw + 1rem, 5rem); max-width: 52rem; }
.breadcrumb { display: flex; gap: .5rem; align-items: center; font-size: var(--fs-sm); color: #9fb0c8; margin-bottom: 1.1rem; }
.breadcrumb a { color: #9fb0c8; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb svg { width: 15px; height: 15px; opacity: .6; }
.page-hero h1 { color: #fff; font-size: var(--fs-h1); }
.page-hero p { margin-top: 1.1rem; font-size: var(--fs-lead); color: #cdd9ea; max-width: 46rem; }

/* ---------- 16. Servicio detallado (zig-zag) ---------- */
.svc-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.svc-detail.rev .svc-detail-media { order: 2; }
.svc-detail-media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); aspect-ratio: 5/4; position: relative; }
.svc-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-detail-media .tag {
  position: absolute; left: 18px; bottom: 18px;
  background: rgba(20,36,64,.9); color: #fff; backdrop-filter: blur(4px);
  border-radius: var(--r-pill); padding: .5rem 1.1rem; font-weight: 600; font-size: var(--fs-sm);
}
.svc-detail h2 { margin-top: 1rem; }
.svc-detail .sub { margin-top: 1rem; color: var(--body); font-size: var(--fs-lead); }
.svc-list { margin-top: 1.7rem; display: grid; gap: 1.15rem; }
.svc-list-item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; }
.svc-list-item .ic {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--blue-50); color: var(--blue-ink); border: 1px solid var(--blue-100);
}
.svc-list-item .ic svg { width: 23px; height: 23px; }
.svc-list-item h4 { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.svc-list-item p { margin-top: .25rem; font-size: var(--fs-sm); color: var(--body); }

/* Grid 2x2 alterno para tercera division */
.svc-quad { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.1rem, 2vw, 1.6rem); }
.svc-quad .q {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.section-alt .svc-quad .q { background: var(--bg); }
.svc-quad .q:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--blue-100); }
.svc-quad .ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(150deg, var(--navy), var(--navy-soft)); color: #fff; margin-bottom: 1rem; }
.svc-quad .ic svg { width: 25px; height: 25px; }
.svc-quad h4 { font-family: var(--font-display); font-size: 1.08rem; color: var(--ink); }
.svc-quad p { margin-top: .45rem; font-size: var(--fs-sm); color: var(--body); }

/* ---------- 17. Nosotros: stats / valores extendidos ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.stat .n { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--navy); line-height: 1; letter-spacing: -.02em; }
.section-navy .stat .n { color: var(--blue-light); }
.stat .l { display: block; margin-top: .5rem; font-size: var(--fs-sm); color: var(--muted); }
.section-navy .stat .l { color: #b3c0d4; }

.value-long { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; padding: 1.7rem 0; border-bottom: 1px solid var(--line); }
.value-long:first-child { padding-top: 0; }
.value-long .ic { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-ink); border: 1px solid var(--blue-100); flex-shrink: 0; }
.value-long .ic svg { width: 28px; height: 28px; }
.value-long h3 { font-size: 1.2rem; color: var(--ink); }
.value-long p { margin-top: .5rem; color: var(--body); }

/* ---------- 18. Mobile menu ---------- */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(14,27,46,.5); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
.nav-backdrop.open { opacity: 1; visibility: visible; }

/* ---------- 19. Animaciones de entrada ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- 20. Utilidades ---------- */
.mt-0 { margin-top: 0; }
.center { text-align: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.divider { height: 1px; background: var(--line); border: 0; }
.skip-link {
  position: fixed; left: 12px; top: 12px;
  transform: translateY(-180%);
  background: var(--navy); color: #fff; padding: .7rem 1.2rem; border-radius: var(--r-sm);
  z-index: 200; transition: transform var(--t) var(--ease); box-shadow: var(--sh-md);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .feature-grid { gap: 1.4rem 2.2rem; }
  .footer-cols { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --header-h: 66px; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }

  /* Menu movil */
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; top: var(--header-h); right: 0;
    width: min(86vw, 340px); height: calc(100dvh - var(--header-h));
    background: #fff; padding: 1.4rem; gap: .25rem; z-index: 99;
    box-shadow: -20px 0 50px rgba(14,27,46,.18);
    overflow-y: auto;
    animation: slideIn .3s var(--ease-drawer);
  }
  .nav-links.open a { padding: .95rem 1rem; font-size: 1.05rem; border-radius: var(--r-sm); }
  .nav-links.open a::after { display: none; }
  .nav-links.open a:hover, .nav-links.open a.active { background: var(--blue-50); }
  .nav-links.open .mobile-cta {
    display: inline-flex;
    margin-top: 1rem; background: var(--navy); color: #fff; text-align: center; justify-content: center;
  }
  .nav-links.open .mobile-cta::after { display: none; }
  .nav-links.open .mobile-cta:hover { background: var(--navy-deep); }
  @keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } }

  .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 2.5rem; padding-block: 3rem 3.5rem; }
  .hero-visual { max-width: 30rem; }
  .intro-grid, .mv-grid, .contact-grid, .svc-detail, .about-grid { grid-template-columns: 1fr; }
  .svc-detail.rev .svc-detail-media { order: 0; }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
  .step .line { display: none; }
  .cta-inner { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .media-stack { max-width: 26rem; margin-inline: auto; }
}

/* Tarjetas de servicios (3): 3 columnas o 1, nunca 2+1 huérfana */
@media (max-width: 768px) {
  .svc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .feature-grid, .svc-quad, .form-row, .process-grid, .footer-cols, .stat-row { grid-template-columns: 1fr; }
  .hero-trust { gap: 1.2rem 1.8rem; }
  .hero-card { left: 0; right: 0; margin-inline: auto; bottom: -18px; }
  .hero-visual { margin-bottom: 1.5rem; }
  .media-badge { right: 12px; top: 12px; padding: .85rem 1rem; min-width: 0; }
  .stat-row { gap: 1.3rem; }
  .value-long { grid-template-columns: 1fr; gap: .9rem; }
  .btn { width: 100%; }
  .hero-actions .btn, .cta-actions .btn { flex: 1 1 auto; }
}

/* ---------- 21b. Sin hover pegado en táctil ---------- */
@media (hover: none) {
  .btn:hover, .svc-card:hover, .value:hover, .svc-quad .q:hover,
  .contact-socials a:hover, .mv-card:hover, .nav-toggle:hover { transform: none; box-shadow: none; }
  .svc-card:hover { border-color: var(--line); }
  .svc-card:hover .thumb img { transform: none; }
  .contact-socials a:hover { background: rgba(255,255,255,.06); color: #c6d2e4; }
}

/* ---------- 22. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  /* Se conservan los fades de color/opacidad (ayudan a comprender); se quita el movimiento */
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover, .btn:active, .svc-card:hover, .value:hover, .svc-quad .q:hover,
  .contact-socials a:hover, .contact-socials a:active, .nav-toggle:active,
  .mv-card:hover, .btn-text:hover svg { transform: none !important; }
  .svc-card:hover .thumb img { transform: none !important; }
}

/* ---------- 23. Print ---------- */
@media print {
  .site-header, .nav-toggle, .cta-band, .hero::before { display: none; }
  .hero, .page-hero, .site-footer { background: #fff !important; color: #000 !important; }
}