/* ===========================================================
   Grupo SWC – Design System "Trust & Authority"
   Navy premium + azul corporativo. Enterprise tech consultancy.
   =========================================================== */

:root {
  /* Marca */
  --primario: #1A73E8;
  --secundario: #0D47A1;
  --acento: #00BCD4;
  --azul-medio: #1565C0;

  /* Base navy (Trust & Authority) */
  --ink-900: #0A1628;
  --ink-800: #0F1E36;
  --ink-700: #14294a;
  --ink-600: #1e3a64;

  /* Neutros */
  --texto: #0B1B33;
  --texto-sec: #51607a;
  --texto-mute: #8190a8;
  --linea: #e4e9f2;
  --fondo: #F6F9FE;
  --fondo-alt: #EEF3FB;
  --blanco: #FFFFFF;
  --success: #16A34A;
  --warning: #F59E0B;

  /* Gradientes */
  --grad-azul: linear-gradient(135deg, #1A73E8 0%, #0D47A1 100%);
  --grad-cyan: linear-gradient(135deg, #1A73E8 0%, #00BCD4 100%);
  --grad-ink: linear-gradient(160deg, #0F1E36 0%, #0A1628 60%, #0D47A1 140%);

  /* Sombras */
  --sh-sm: 0 1px 2px rgba(11,27,51,.06), 0 1px 3px rgba(11,27,51,.05);
  --sh-md: 0 6px 18px rgba(11,27,51,.07), 0 2px 6px rgba(11,27,51,.05);
  --sh-lg: 0 18px 40px rgba(11,27,51,.10), 0 6px 14px rgba(11,27,51,.06);
  --sh-glow: 0 16px 48px rgba(26,115,232,.28);

  /* Sistema */
  --radio: 14px;
  --radio-sm: 10px;
  --navbar-h: 76px;
  --maxw: 1200px;
  /* Curvas de animación. --ease queda como alias de --ease-out para no
     romper las reglas que ya lo usaban. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease: var(--ease-out);
}

* { box-sizing: border-box; }

/* ---------- Superficies del navegador ----------
   Seleccion, foco, barra de desplazamiento y cifras: partes que el navegador
   pinta por defecto y que no pertenecen a ningun sistema de diseno. */
::selection { background: rgba(26,115,232,.22); color: var(--ink-900); }
.bg-ink ::selection, .hero ::selection, .page-header ::selection,
.quote-banner ::selection, .cta-box ::selection { background: rgba(127,182,255,.32); color: #fff; }

:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :focus-visible, .bg-ink :focus-visible, .page-header :focus-visible,
.quote-banner :focus-visible, .cta-box :focus-visible, .swc-footer :focus-visible {
  outline-color: #9fc4ff;
}

html { scrollbar-color: var(--linea) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #ccd6e6; border-radius: 8px;
  border: 3px solid var(--blanco); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #aebccf; background-clip: padding-box; }

/* Enlaces dentro de texto: el subrayado no debe cortar las descendentes. */
p a, li a { text-underline-offset: .18em; text-decoration-thickness: .08em; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* La barra es fija: sin esto el destino de un enlace #ancla queda debajo. */
  scroll-padding-top: calc(var(--navbar-h) + 16px); }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--texto);
  margin: 0;
  padding-top: var(--navbar-h);
  line-height: 1.65;
  background: var(--blanco);
  overflow-x: hidden;
}

h1,h2,h3,h4 {
  color: var(--texto); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 .5em;
  font-weight: 800; text-wrap: balance;
}
/* El maximo baja de 4.2 a 3.5rem: a 67px la palabra "acompanamiento" ocupaba
   casi la columna entera y forzaba seis lineas en el titular de portada. */
h1 { font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.5rem); font-weight: 900; letter-spacing: -.045em; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); font-weight: 900; letter-spacing: -.04em; }
h3 { font-size: 1.3rem; }
p { color: var(--texto-sec); margin: 0 0 1rem; max-width: 72ch; }
a { color: var(--primario); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--secundario); }
img { max-width: 100%; }
/* La etiqueta sobre el titular se ha retirado del sitio: no aportaba
   informacion y restaba fuerza al encabezado, que ahora la lleva entera.
   La clase queda neutralizada por si alguna vista la referencia. */
.eyebrow { display: none; }

.container-swc { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; width: 100%; }
section { padding: 96px 0; position: relative; }
@media (max-width: 768px){ section { padding: 64px 0; } }

.bg-claro { background: var(--fondo); }
.bg-alt { background: var(--fondo-alt); }
.bg-blanco { background: var(--blanco); }
.bg-ink { background: var(--grad-ink); color: #dce6f5; }
.bg-ink h1,.bg-ink h2,.bg-ink h3 { color: #fff; }
.bg-ink p { color: #aebfd9; }
/* El enfasis del titular es de peso y color solido, no de degradado: el
   degradado sobre texto baja el contraste y difumina la forma de la letra. */
.text-grad { color: var(--acento); }

/* ---------- Botones ---------- */
.btn-swc, .btn-ghost, .btn-dark {
  display: inline-flex; align-items: center; gap: 10px;
  border: none; border-radius: 10px; cursor: pointer;
  padding: 15px 28px; font-size: .92rem; font-weight: 700; font-family: inherit;
  letter-spacing: .01em; position: relative; white-space: nowrap;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out),
              background-color 160ms ease, color 160ms ease;
}
.btn-swc { background: var(--grad-azul); color: #fff; box-shadow: var(--sh-glow); }
.btn-swc:hover { color: #fff; box-shadow: 0 22px 56px rgba(26,115,232,.38); }
/* El pulsado es feedback real: :active tambien dispara en tactil, no se limita. */
.btn-swc:active, .btn-ghost:active, .btn-dark:active, .btn-linea:active { transform: scale(0.97); }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: #fff; color: var(--secundario); }
.btn-dark { background: var(--ink-900); color: #fff; }
.btn-dark:hover { background: var(--secundario); color: #fff; }
.btn-swc i, .btn-ghost i { transition: transform .25s var(--ease); }
.btn-swc:hover i, .btn-ghost:hover i { transform: translateX(4px); }

/* ---------- Navbar ---------- */
.swc-navbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--navbar-h);
  background: rgba(255,255,255,.72); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent; z-index: 1000;
  transition: background-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out),
              border-bottom-color 250ms var(--ease-out);
}
.swc-navbar.scrolled { box-shadow: 0 6px 26px rgba(11,27,51,.09); border-bottom-color: var(--linea); background: rgba(255,255,255,.92); }
.swc-navbar .container-swc { display: flex; align-items: center; justify-content: space-between; height: 100%; }
/* El logotipo es una imagen con simbolo y texto: no lleva tipografia. Las
   medidas van tambien en el atributo para que no salte el maquetado
   mientras carga. */
.swc-logo { display: flex; align-items: center; }
.swc-logo img { height: 46px; width: auto; display: block; }
/* En movil la barra es mas estrecha y comparte sitio con el boton de menu. */
@media (max-width: 480px) { .swc-logo img { height: 38px; } }
.swc-menu { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.swc-menu > li { position: relative; }
.swc-menu > li > a { display: flex; align-items: center; gap: 6px; color: var(--texto); font-weight: 600; font-size: .95rem; padding: 10px 16px; border-radius: 9px; transition: color 140ms ease, background-color 140ms ease; }
.swc-menu > li > a:hover, .swc-menu > li > a.active { color: var(--primario); background: var(--fondo-alt); }
.swc-submenu {
  position: absolute; top: calc(100% + 10px); left: 0; background: #fff;
  box-shadow: var(--sh-lg); border: 1px solid var(--linea); border-radius: var(--radio);
  min-width: 390px; padding: 10px; list-style: none; margin: 0;
  /* Escala desde la esquina del enlace que lo abre, no desde la nada. */
  transform-origin: top left;
  opacity: 0; visibility: hidden; transform: scale(0.96);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 200ms;
}
.swc-menu li:hover .swc-submenu { opacity: 1; visibility: visible; transform: scale(1); }
.swc-submenu a { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radio-sm); color: var(--texto); font-weight: 600; font-size: .92rem; }
.swc-submenu a small { display: block; font-weight: 400; color: var(--texto-mute); font-size: .8rem; }
.swc-submenu a:hover { background: var(--fondo-alt); color: var(--primario); }
.swc-submenu a .ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: var(--fondo-alt); display: grid; place-items: center; color: var(--primario); }
/* Una linea de servicio con varios servicios los cuelga debajo. La sangria
   nace del icono de la linea (34px + 12px de hueco) para que se lea como
   dependencia, no como otro nivel de menu. */
.swc-submenu .sub-linea + .sub-linea { margin-top: 2px; }
.swc-subservicios { list-style: none; margin: 0 0 6px; padding: 0 0 0 46px; }
.swc-subservicios a { display: flex; align-items: center; gap: 9px; padding: 7px 12px; font-weight: 500; font-size: .86rem; color: var(--texto-sec); }
.swc-subservicios a i { font-size: .72rem; color: var(--texto-mute); width: 14px; text-align: center; transition: color 140ms ease; }
.swc-subservicios a:hover { background: var(--fondo-alt); color: var(--primario); }
.swc-subservicios a:hover i { color: var(--primario); }
/* Salida al listado completo, separada del resto por una linea. */
.swc-submenu .sub-todos { margin-top: 8px; border-top: 1px solid var(--linea); padding-top: 8px; }
.swc-submenu .sub-todos a { justify-content: center; gap: 8px; font-size: .86rem; color: var(--primario); }
.swc-submenu .sub-todos a i { font-size: .72rem; transition: transform 160ms var(--ease-out); }
.swc-submenu .sub-todos a:hover i { transform: translateX(3px); }
.swc-nav-cta { display: flex; align-items: center; gap: 14px; }
.swc-social-mini { display: flex; gap: 8px; }
.swc-social-mini a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--fondo-alt); color: var(--secundario); font-size: 1.05rem; }
.swc-social-mini a:hover { background: var(--grad-azul); color: #fff; }
.swc-burger { display: none; width: 44px; height: 44px; border-radius: 10px; font-size: 1.3rem; background: var(--fondo-alt); border: none; cursor: pointer; color: var(--ink-900); }

/* ---------- Hero ---------- */
.hero { background: var(--grad-ink); color: #fff; padding: 130px 0 110px; overflow: hidden; position: relative; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 50% at 85% 15%, rgba(0,188,212,.22), transparent 60%),
    radial-gradient(45% 45% at 12% 85%, rgba(26,115,232,.30), transparent 60%);
  pointer-events: none;
}
.hero .container-swc { position: relative; z-index: 2; }
/* La columna del titular pesa mas que la del panel: el h1 es la pieza que
   tiene que respirar, y el panel de indicadores se compone bien mas estrecho. */
.hero-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 52px; align-items: center; }
.hero h1 { color: #fff; }
.hero h1 .text-grad { color: #6fd6ff; }
.hero p.lead { color: #b9cae6; font-size: 1.12rem; max-width: 58ch; }
.hero-lista { list-style: none; padding: 0; margin: 26px 0 32px; display: grid; gap: 12px; }
.hero-lista li { display: flex; align-items: center; gap: 12px; color: #e3ecfb; font-weight: 600; }
.hero-lista li .chk { width: 26px; height: 26px; border-radius: 50%; background: rgba(0,188,212,.18); color: #29e0ff; display: grid; place-items: center; font-size: .75rem; flex-shrink: 0; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-visual { position: relative; }
.hero-visual img { width: 100%; border-radius: 20px; box-shadow: 0 40px 80px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.1); }
/* ---------- Panel de indicadores de portada ----------
   Se gestionan desde Admin -> Indicadores y se muestran todos los activos, asi
   que el panel debe servir para dos o para seis. Se apila en columna: las
   posiciones absolutas del diseno anterior solo funcionaban con exactamente
   dos y del tercero en adelante se solapaban. */
.hero-indicadores {
  display: grid; gap: 12px; align-content: center;
  border: 1px solid rgba(255,255,255,.14); border-radius: 20px;
  padding: clamp(20px, 2.6vw, 30px);
  background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
}
/* Si algun dia hay fotografia de portada, el panel se coloca debajo. */
.hero-visual img + .hero-indicadores { margin-top: 18px; }

.hero-badge {
  background: rgba(255,255,255,.94); color: var(--ink-900);
  border-radius: 14px; padding: 13px 17px;
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
}
.hero-badge .n {
  font-size: 1.75rem; font-weight: 900; line-height: 1; letter-spacing: -.045em;
  color: var(--secundario); font-variant-numeric: tabular-nums; white-space: nowrap;
  /* Reserva minima para que las etiquetas de las distintas filas empiecen a la
     misma altura; un valor mas largo simplemente desplaza la suya. */
  min-width: 4.6ch;
}
.hero-badge small { color: var(--texto-sec); font-size: .84rem; font-weight: 600; line-height: 1.3; }

/* A partir de cinco el panel se alargaria de mas y desequilibraria el hero:
   pasa a dos columnas en pantallas anchas. */
@media (min-width: 993px) {
  .hero-indicadores:has(.hero-badge:nth-child(5)) { grid-template-columns: 1fr 1fr; }
}

/* ---------- Stats band ---------- */
.stats-band { background: #fff; border: 1px solid var(--linea); border-radius: 20px; box-shadow: var(--sh-lg); padding: 14px 8px; margin-top: -56px; position: relative; z-index: 5; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat { text-align: center; padding: 22px 16px; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: var(--linea); }
.stat .num {
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.9rem); font-weight: 900; letter-spacing: -.045em;
  color: var(--secundario); line-height: 1; font-variant-numeric: tabular-nums;
}
.stat .lbl { color: var(--texto-sec); font-weight: 600; font-size: .9rem; margin-top: 6px; }
/* Las mismas metricas sobre fondo oscuro (Acerca de). Estaba escrito con
   estilos en linea dentro de la vista, que impedian compartir el marcado. */
.bg-ink .stat .num {
  background: linear-gradient(120deg, #7fb6ff, #00e5ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bg-ink .stat .lbl { color: #aebfd9; }
/* El separador claro no se veia sobre el fondo oscuro. */
.bg-ink .stat + .stat::before { background: rgba(255,255,255,.16); }

/* ---------- Section heading ---------- */
.section-head { max-width: 46rem; margin: 0 auto 56px; text-align: center; }
.section-head p { max-width: 58ch; margin-left: auto; margin-right: auto; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head p { font-size: 1.08rem; }

/* ---------- Grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

/* ---------- Service card ---------- */
.card-servicio {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 30px; position: relative; overflow: hidden;
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out),
              border-color 250ms var(--ease-out);
  display: flex; flex-direction: column; height: 100%;
}
.card-servicio:hover { box-shadow: var(--sh-lg); border-color: transparent; }
.card-servicio .ic { width: 58px; height: 58px; border-radius: 16px; background: var(--fondo-alt); color: var(--primario); display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 22px;
  transition: transform 250ms var(--ease-out), background 250ms var(--ease-out),
              color 250ms var(--ease-out), box-shadow 250ms var(--ease-out); }
.card-servicio:hover .ic { background: var(--grad-azul); color: #fff; box-shadow: var(--sh-glow); }
.card-servicio h3 { margin-bottom: 10px; }
.card-servicio p { font-size: .98rem; }
.card-servicio .enlace { margin-top: auto; padding-top: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.card-servicio .enlace i { transition: transform .25s var(--ease); }
.card-servicio:hover .enlace i { transform: translateX(5px); }
.card-servicio .num-bg { position: absolute; top: -16px; right: 8px; font-size: 6rem; font-weight: 900; color: var(--fondo-alt); z-index: 0; line-height: 1; }
.card-servicio > * { position: relative; z-index: 1; }

/* ---------- SWC acronym ---------- */
/* ---------- El metodo SWC ----------
   Filas, no tarjetas. La inicial funciona como pieza estructural a escala de
   display y ancla cada fila; el texto cuelga de ella. Asi la seccion lee como
   un manifiesto y no como tres contenedores identicos. */
.swc-acronimo { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.swc-card {
  /* La columna sigue al tamano de la letra: una capital de Inter Black ocupa
     unos 0.72em, asi que la reserva se calcula a partir del mismo valor y la
     inicial nunca invade el texto. */
  --swc-letra: clamp(4.5rem, 2rem + 8vw, 9rem);
  display: grid; grid-template-columns: calc(var(--swc-letra) * .78) 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: start; padding: clamp(32px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--linea);
}
.swc-card .letra {
  font-size: var(--swc-letra); font-weight: 900; line-height: .78;
  letter-spacing: -.06em; color: var(--primario); margin: 0;
}
.swc-card .swc-texto { padding-top: clamp(4px, 1vw, 14px); }
.swc-card h3 { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.1rem); font-weight: 900; letter-spacing: -.035em; margin-bottom: .35em; }
.swc-card p { font-size: 1.05rem; max-width: 60ch; margin: 0; }

@media (max-width: 640px) {
  .swc-card { grid-template-columns: 1fr; gap: 8px; }
  .swc-card .letra { line-height: .9; }
}

/* ---------- Quote banner ---------- */
.quote-banner { background: var(--grad-ink); color: #fff; text-align: center; overflow: hidden; }
.quote-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 0%, rgba(0,188,212,.18), transparent 60%); }
.quote-banner .container-swc { position: relative; z-index: 1; }
.quote-banner .qmark { display: none; }
.quote-banner blockquote {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); font-weight: 900; margin: 0 auto;
  max-width: 20ch; color: #fff; letter-spacing: -.04em; line-height: 1.06;
  text-wrap: balance;
}

/* ---------- Equipo ---------- */
.equipo-card { display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: center; background: #fff; border: 1px solid var(--linea); border-radius: 20px; padding: 16px; box-shadow: var(--sh-md); }
.equipo-card .foto { border-radius: 16px; overflow: hidden; aspect-ratio: 1; }
.equipo-card .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.equipo-card .foto.inicial {
  display: grid; place-items: center; background: var(--grad-ink); color: #fff;
  font-size: clamp(4rem, 2rem + 6vw, 7rem); font-weight: 900; letter-spacing: -.06em;
  line-height: 1; user-select: none;
}
.equipo-card .cargo { display: inline-block; background: var(--fondo-alt); color: var(--primario); font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; padding: 6px 14px; border-radius: 30px; margin-bottom: 14px; }
.equipo-card .links a { width: 40px; height: 40px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--fondo-alt); color: var(--secundario); }
.equipo-card .links a:hover { background: var(--grad-azul); color: #fff; }

/* ---------- Testimonios ---------- */
.testi-track { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.card-testimonio { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 32px; box-shadow: var(--sh-sm); position: relative;
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out); }
.card-testimonio:hover { box-shadow: var(--sh-lg); }
.card-testimonio .estrellas { color: var(--warning); margin-bottom: 14px; font-size: .95rem; }
.card-testimonio .quote { color: var(--texto); font-size: 1.02rem; line-height: 1.7; margin-bottom: 22px; }
.card-testimonio .autor { display: flex; align-items: center; gap: 14px; }
.card-testimonio .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--grad-azul); color: #fff; display: grid; place-items: center; font-weight: 800; }
.card-testimonio .autor strong { display: block; color: var(--texto); }
.card-testimonio .autor span { color: var(--texto-mute); font-size: .88rem; }

/* ---------- Logos confianza ---------- */
.logos-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 48px; }
.logos-row span { font-weight: 800; font-size: 1.3rem; color: var(--texto-sec); letter-spacing: -.02em; transition: color .25s var(--ease); }
.logos-row span:hover { color: var(--secundario); }

/* ---------- CTA final / Newsletter ---------- */
.cta-box { background: var(--grad-ink); border-radius: 28px; padding: 64px; text-align: center; position: relative; overflow: hidden; color: #fff; }
.cta-box::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 80% 10%, rgba(0,188,212,.22), transparent 55%), radial-gradient(50% 80% at 15% 90%, rgba(26,115,232,.28), transparent 55%); }
.cta-box > * { position: relative; z-index: 1; }
.cta-box h2 { color: #fff; }
.newsletter-inline { display: flex; gap: 12px; max-width: 520px; margin: 26px auto 0; }
.newsletter-inline input { flex: 1; padding: 15px 18px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; border-radius: 11px; font-family: inherit; font-size: 1rem; }
.newsletter-inline input::placeholder { color: #9fb2d4; }
.newsletter-inline input:focus { outline: none; border-color: var(--acento); background: rgba(255,255,255,.16); }

/* ---------- Page header ---------- */
.page-header { background: var(--grad-ink); color: #fff; padding: 120px 0 80px; text-align: center; overflow: hidden; }
.page-header::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 60% at 50% 0%, rgba(0,188,212,.2), transparent 60%); }
.page-header .container-swc { position: relative; z-index: 1; }
.page-header h1 { color: #fff; }
.page-header p { color: #aebfd9; max-width: 600px; margin: 0 auto; }
.breadcrumb-swc { display: flex; gap: 8px; justify-content: center; color: #8da3c7; font-size: .88rem; margin-top: 16px; }
.breadcrumb-swc a { color: #b9cae6; }

/* ---------- FAQ ---------- */
.faq-item { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 14px; overflow: hidden; transition: box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.faq-item.abierto { box-shadow: var(--sh-md); border-color: rgba(26,115,232,.3); }
.faq-pregunta { width: 100%; text-align: left; background: none; border: none; padding: 22px 26px; font-weight: 700; font-size: 1.05rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--texto); }
.faq-pregunta i { color: var(--primario); transition: transform 200ms var(--ease-out); flex-shrink: 0; }
.faq-item.abierto .faq-pregunta i { transform: rotate(180deg); }
.faq-respuesta { max-height: 0; overflow: hidden; transition: max-height 200ms var(--ease-out); }
.faq-respuesta p { padding: 0 26px 24px; margin: 0; }

/* ---------- Formularios ---------- */
.swc-form { display: grid; gap: 18px; }
.swc-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.swc-form label { font-weight: 700; font-size: .85rem; color: var(--texto); margin-bottom: 7px; display: block; }
.swc-form input, .swc-form textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 11px;
  font-family: inherit; font-size: 1rem; background: var(--fondo); color: var(--texto);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.swc-form input:focus, .swc-form textarea:focus { outline: none; border-color: var(--primario); background: #fff; box-shadow: 0 0 0 4px rgba(26,115,232,.12); }

/* ---------- Contacto info ---------- */
.contacto-card { background: #fff; border: 1px solid var(--linea); border-radius: 20px; padding: 36px; box-shadow: var(--sh-md); }
.info-line { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.info-line:last-child { border-bottom: none; }
.info-line .ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--fondo-alt); color: var(--primario); display: grid; place-items: center; font-size: 1.1rem; }
.info-line strong { display: block; color: var(--texto); }
.info-line span, .info-line a { color: var(--texto-sec); }
.mapa-embed iframe { width: 100%; height: 300px; border: 0; border-radius: 16px; }

/* ---------- Toast ---------- */
.swc-toast {
  padding: 14px 18px; border-radius: 11px; margin-top: 6px; display: none; font-weight: 600;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), display 200ms allow-discrete;
}
/* El toast aparece al recibir la clase; @starting-style le da el estado de partida.
   Se usa transicion (no keyframes) porque el usuario puede reenviar el formulario
   varias veces seguidas: asi se reencamina desde el valor actual. */
@starting-style {
  .swc-toast.ok, .swc-toast.err { opacity: 0; transform: translateY(-6px); }
}
.swc-toast.ok { background: rgba(22,163,74,.1); color: var(--success); display: block; }
.swc-toast.err { background: rgba(220,38,38,.1); color: #DC2626; display: block; }

/* ---------- Footer ---------- */
.swc-footer { background: var(--ink-900); color: #92a4c4; padding: 72px 0 28px; position: relative; }
.swc-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(26,115,232,.5), transparent); }
.footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.4fr; gap: 40px; }
/* Sin esto, la regla global p{color} gana a la herencia del pie y deja el
   texto gris oscuro sobre navy (2.85:1). Se tinta desde el propio azul. */
.swc-footer p { color: #a8bad6; }
.swc-footer h4 { color: #fff; margin-bottom: 18px; font-size: 1rem; }
.swc-footer .swc-logo { margin-bottom: 18px; }
.swc-footer .swc-logo img { height: 56px; }
.swc-footer a { color: #92a4c4; display: inline-block; padding: 5px 0; }
.swc-footer a:hover { color: #fff; }
.footer-social { display: flex; gap: 10px; margin-top: 8px; }
.footer-social a { width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,.06); display: grid; place-items: center; color: #cdd9ee; font-size: 1.1rem; padding: 0; }
.footer-social a:hover { background: var(--grad-azul); color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .88rem; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a { display: inline; padding: 0; }

/* ---------- Error page ---------- */
.error-page { text-align: center; padding: 120px 0; background: var(--grad-ink); color: #fff; min-height: 70vh; display: grid; place-items: center; }
.error-page .codigo {
  font-size: clamp(6rem, 4rem + 8vw, 11rem); font-weight: 900; line-height: 1;
  letter-spacing: -.05em; color: #7fb6ff; font-variant-numeric: tabular-nums;
}
.error-page h1 { color: #fff; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-badge { animation: none; }
  * { scroll-behavior: auto; }
}

/* ---------- Casos de éxito ---------- */
.casos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.caso-card {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: hidden; display: flex; flex-direction: column; height: 100%;
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out),
              border-color 250ms var(--ease-out);
}
.caso-card:hover { box-shadow: var(--sh-lg); border-color: transparent; }
/* Sin fotografia: la evidencia de un caso son sus cifras, no una imagen de
   archivo. El sector encabeza la ficha y las metricas la cierran. */
.caso-card .sector {
  display: inline-block; align-self: flex-start; background: var(--fondo-alt); color: var(--secundario);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 6px 12px; border-radius: 30px; margin-bottom: 18px;
}
.caso-card .body { padding: 30px; display: flex; flex-direction: column; flex: 1; }
.caso-card .cliente { color: var(--texto-mute); font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.caso-card h3 { font-size: 1.35rem; font-weight: 900; letter-spacing: -.03em; margin-bottom: 10px; }
.caso-card .body > p { font-size: .97rem; }

/* ---------- Casos en pagina propia: filas editoriales ----------
   Misma gramatica que el metodo SWC: filas separadas por linea, sin
   contenedores. La columna de cifras es el ancla visual. */
.caso-fila {
  display: grid; grid-template-columns: 1fr minmax(0, 320px); gap: clamp(28px, 5vw, 72px);
  align-items: start; padding: clamp(36px, 5vw, 64px) 0; border-bottom: 1px solid var(--linea);
}
.caso-fila:first-child { border-top: 1px solid var(--linea); }
.caso-fila .meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  color: var(--texto-sec); font-size: .85rem; font-weight: 600; margin-bottom: 14px;
}
.caso-fila .meta .sector {
  background: var(--fondo-alt); color: var(--secundario); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding: 5px 11px; border-radius: 30px;
}
.caso-fila h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); margin-bottom: .45em; }
.caso-fila p { font-size: 1.06rem; max-width: 58ch; margin: 0; }
.caso-cifras { display: grid; gap: 22px; }
.caso-cifras .m { display: grid; gap: 2px; }
.caso-cifras .v {
  font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.2rem); font-weight: 900; line-height: .95;
  letter-spacing: -.05em; color: var(--secundario); font-variant-numeric: tabular-nums;
}
.caso-cifras .e { font-size: .88rem; font-weight: 600; color: var(--texto-sec); }

@media (max-width: 860px) {
  .caso-fila { grid-template-columns: 1fr; }
  .caso-cifras { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
  .caso-cifras { grid-template-columns: repeat(2, 1fr); }
}
.caso-metricas { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--linea); }
.caso-metricas .m { text-align: center; }
.caso-metricas .m .v {
  font-size: 1.6rem; font-weight: 900; letter-spacing: -.045em; color: var(--secundario);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.caso-metricas .m .e { font-size: .72rem; color: var(--texto-sec); font-weight: 600; line-height: 1.25; }

/* ---------- Página de resultado (confirmación / baja) ---------- */
.resultado-box { max-width: 620px; margin: 0 auto; text-align: center; padding: 40px 0; }
.resultado-icono {
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  margin: 0 auto 28px; font-size: 2.2rem;
}
.resultado-icono.ok { background: rgba(22,163,74,.12); color: var(--success); }
.resultado-icono.err { background: rgba(220,38,38,.1); color: #DC2626; }
.resultado-box h1 { font-size: 2rem; margin-bottom: 14px; }
.resultado-box p { color: var(--texto-sec); }
.resultado-acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ---------- Consentimiento en formularios ---------- */
.swc-consent { display: flex; gap: 11px; align-items: flex-start; }
.swc-consent input[type="checkbox"] {
  width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--primario); cursor: pointer;
}
.swc-consent label { font-weight: 400; font-size: .84rem; line-height: 1.55; color: var(--texto-sec); margin: 0; cursor: pointer; }
.swc-consent label a { font-weight: 600; text-decoration: underline; }
.swc-consent.compacto label { font-size: .78rem; color: #aebfd9; }
.swc-consent.compacto label a { color: #fff; }

/* La ficha de caracteristica muestra una inicial cuando el paso pertenece al
   metodo ARQUITECTO, en lugar de un icono. */
.card-servicio .ic.ic-letra {
  font-size: 1.9rem; font-weight: 900; letter-spacing: -.05em; line-height: 1;
}

/* ---------- Descarga del ebook ----------
   La portada se compone con tipografia, no con una imagen: no hay mockup del
   libro y uno generico restaria mas de lo que aporta. */
.ebook-bloque {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 24px;
  padding: clamp(28px, 4vw, 52px); box-shadow: var(--sh-md);
}
.ebook-portada {
  display: grid; align-content: space-between; gap: 18px; aspect-ratio: 3 / 4;
  background: var(--grad-ink); border-radius: 16px; color: #fff;
  padding: clamp(22px, 3vw, 34px); box-shadow: var(--sh-lg);
}
.ebook-marca {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #7fb6ff;
}
.ebook-titulo {
  font-size: clamp(1.3rem, .9rem + 1.4vw, 2rem); font-weight: 900; line-height: 1.08;
  letter-spacing: -.035em; text-wrap: balance;
}
.ebook-autor { font-size: .82rem; font-weight: 600; color: #aebfd9; }
.ebook-texto h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); }
.ebook-form { margin-top: 22px; }
.ebook-form .btn-swc { width: 100%; }

@media (max-width: 860px) {
  .ebook-bloque { grid-template-columns: 1fr; }
  .ebook-portada { aspect-ratio: 16 / 9; }
}

/* ---------- Lineas de servicio ----------
   La pagina de servicios se organiza en dos bloques (Arquitectura Empresarial
   y Consultoria IT). El numero ordena la lectura sin competir con el titular. */
.linea-cabecera {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3vw, 36px);
  align-items: start; padding-bottom: 8px;
}
.linea-num {
  font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.4rem); font-weight: 900; line-height: .8;
  letter-spacing: -.06em; color: var(--linea); font-variant-numeric: tabular-nums;
}
.linea-cabecera h2 { margin-bottom: .25em; }
.linea-claim {
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); color: var(--texto);
  font-weight: 600; max-width: 46ch; margin: 0;
}
.linea-cuerpo {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px);
  align-items: start; margin-top: clamp(28px, 4vw, 44px);
}
.linea-texto { font-size: 1.06rem; max-width: 62ch; margin: 0; }
/* Lista de comprobacion de las paginas de servicio. Dos columnas cuando hay
   sitio: seis puntos en una sola columna dejan la pagina muy larga. */
.lista-check { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; color: var(--texto-sec); font-size: 1rem; line-height: 1.55; }
.faq-salida { text-align: center; margin: 32px 0 0; color: var(--texto-sec); }
.faq-salida a { font-weight: 700; }

.lista-check li .chk { width: 26px; height: 26px; border-radius: 50%; background: rgba(26,115,232,.12); color: var(--primario); display: grid; place-items: center; font-size: .72rem; flex-shrink: 0; margin-top: 2px; }
/* Aclaracion al pie de una seccion. Antes se pintaba como un elemento mas y
   caia en la columna de al lado, o se convertia en una tarjeta suelta. */
/* El importe de una tarjeta de plan o de pack: se separa del texto y se ancla
   abajo, para que todas las tarjetas de una fila lo alineen aunque su
   descripcion tenga distinta longitud. */
.card-servicio .precio {
  margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--linea);
  color: var(--secundario); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em;
}
.card-servicio { display: flex; flex-direction: column; }
/* En una lista, el importe va detras del texto, destacado. */
.precio-linea { color: var(--secundario); font-weight: 800; white-space: nowrap; }
.precio-linea::before { content: " · "; color: var(--texto-mute); font-weight: 400; }

.seccion-nota {
  max-width: 900px; margin: 34px auto 0; padding-top: 20px;
  border-top: 1px solid var(--linea);
  display: flex; gap: 12px; align-items: flex-start;
  color: var(--texto-mute); font-size: .94rem; line-height: 1.6;
}
.seccion-nota i { color: var(--primario); margin-top: 4px; flex-shrink: 0; }
/* Varias aclaraciones seguidas son el mismo bloque: solo la primera lleva la
   linea de separacion. */
.seccion-nota + .seccion-nota { margin-top: 10px; padding-top: 0; border-top: none; }
@media (max-width: 720px) { .lista-check { grid-template-columns: 1fr; } }

.linea-beneficios { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.linea-beneficios li {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  color: var(--texto); font-weight: 600; font-size: .98rem;
}
@media (max-width: 860px) { .linea-cuerpo { grid-template-columns: 1fr; } }

/* ---------- El metodo ARQUITECTO ----------
   Misma gramatica que el metodo SWC de la portada: la inicial a escala de
   display ancla cada paso. Aqui son diez, asi que van en dos columnas. */
.metodo-pasos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 72px);
  border-top: 1px solid var(--linea);
}
.metodo-paso {
  --metodo-letra: clamp(2.6rem, 1.4rem + 2.6vw, 4rem);
  display: grid; grid-template-columns: calc(var(--metodo-letra) * .82) 1fr;
  gap: clamp(16px, 2vw, 28px); align-items: start;
  padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--linea);
}
.metodo-paso .letra {
  font-size: var(--metodo-letra); font-weight: 900; line-height: .8;
  letter-spacing: -.06em; color: var(--primario);
}
.metodo-paso h3 { font-size: 1.15rem; font-weight: 900; letter-spacing: -.025em; margin-bottom: .3em; }
.metodo-paso p { font-size: .97rem; margin: 0; max-width: 44ch; }

@media (max-width: 860px) {
  .metodo-pasos { grid-template-columns: 1fr; }
}

/* ---------- Botón de línea (fondo claro) ---------- */
.btn-linea {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 10px; cursor: pointer; background: #fff; color: var(--secundario);
  border: 1.5px solid var(--linea); padding: 13px 24px; font-size: .92rem; font-weight: 700;
  font-family: inherit;
  transition: transform 160ms var(--ease-out), border-color 160ms ease,
              color 160ms ease, background-color 160ms ease;
}
.btn-linea:hover { border-color: var(--primario); color: var(--primario); background: var(--fondo); }

/* ---------- Documentos legales ---------- */
.legal-doc { max-width: 860px; margin: 0 auto; }
.legal-doc h2 {
  font-size: 1.35rem; margin: 44px 0 14px; padding-top: 26px; border-top: 1px solid var(--linea);
}
.legal-doc h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal-doc h3 { font-size: 1.06rem; margin: 28px 0 10px; color: var(--secundario); }
.legal-doc p { color: var(--texto-sec); }
.legal-doc ul { color: var(--texto-sec); padding-left: 22px; margin: 12px 0; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc code {
  background: var(--fondo-alt); border-radius: 5px; padding: 2px 7px;
  font-size: .86em; color: var(--secundario); font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
}
.legal-datos { list-style: none; padding: 22px 24px; background: var(--fondo); border-radius: var(--radio); border: 1px solid var(--linea); }
.legal-datos li { margin-bottom: 10px; }
.legal-datos li:last-child { margin-bottom: 0; }

.legal-tabla { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .9rem; display: block; overflow-x: auto; }
.legal-tabla th, .legal-tabla td { border: 1px solid var(--linea); padding: 12px 14px; text-align: left; vertical-align: top; }
.legal-tabla th { background: var(--fondo-alt); font-weight: 700; font-size: .84rem; color: var(--texto); }
.legal-tabla td { color: var(--texto-sec); }

.legal-aviso {
  display: flex; gap: 14px; align-items: flex-start; margin-bottom: 32px;
  background: rgba(245,158,11,.09); border: 1px solid rgba(245,158,11,.32);
  border-radius: var(--radio); padding: 18px 20px; color: var(--texto-sec); font-size: .93rem;
}
.legal-aviso i { color: var(--warning); font-size: 1.15rem; margin-top: 2px; }
.legal-fecha { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--linea); color: var(--texto-mute); font-size: .88rem; }

/* ---------- Banner de cookies ---------- */
.cookie-banner {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%);
  width: min(960px, calc(100vw - 32px)); z-index: 9000;
  background: #fff; border: 1px solid var(--linea); border-radius: 18px;
  box-shadow: var(--sh-lg); padding: 24px 28px;
  display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center;
  transition: transform 400ms var(--ease-drawer), opacity 300ms var(--ease-out); opacity: 0;
}
.cookie-banner.visible { transform: translate(-50%, 0); opacity: 1; }
.cookie-banner h2 { font-size: 1.05rem; margin: 0 0 6px; }
.cookie-banner p { font-size: .9rem; color: var(--texto-sec); margin: 0; }
.cookie-banner p a { font-weight: 600; text-decoration: underline; }
.cookie-acciones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cookie-acciones .btn-swc, .cookie-acciones .btn-linea { padding: 12px 22px; font-size: .88rem; }
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}
@media (max-width: 768px) {
  .cookie-banner { grid-template-columns: 1fr; padding: 22px; bottom: 12px; }
  .cookie-acciones { justify-content: stretch; }
  .cookie-acciones > * { flex: 1; justify-content: center; }
}

/* ---------- Movimiento en hover (solo puntero fino) ----------
   En táctil, un toque dispara :hover y el elemento se queda "levantado"
   hasta que tocas otra cosa. Todo el movimiento por hover vive aquí; los
   cambios de color y sombra siguen aplicándose en cualquier dispositivo. */
@media (hover: hover) and (pointer: fine) {
  /* :not(:active) para que el pulsado gane al hover: si no, este bloque va
     despues en el fichero y anularia el scale(0.97) al presionar. */
  .btn-swc:hover:not(:active), .btn-ghost:hover:not(:active),
  .btn-dark:hover:not(:active) { transform: translateY(-3px); }
  .btn-swc:hover i, .btn-ghost:hover i { transform: translateX(4px); }

  .swc-social-mini a:hover, .footer-social a:hover { transform: translateY(-2px); }

  .card-servicio:hover { transform: translateY(-8px); }
    .card-servicio:hover .ic { transform: rotate(-6deg) scale(1.05); }
  .card-servicio:hover .enlace i { transform: translateX(5px); }

  .swc-card:hover { transform: translateY(-6px); }
  .card-testimonio:hover { transform: translateY(-6px); }

  .caso-card:hover { transform: translateY(-8px); }
  .caso-card:hover .img img { transform: scale(1.06); }
}

/* ---------- Movimiento reducido ----------
   No se apaga todo: se conservan color, opacidad y sombra, que ayudan a
   entender qué está pasando. Se elimina el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  .btn-swc:hover, .btn-ghost:hover, .btn-dark:hover,
  .btn-swc:active, .btn-ghost:active, .btn-dark:active, .btn-linea:active,
  .swc-social-mini a:hover, .footer-social a:hover,
  .card-servicio:hover, .card-servicio:hover .ic,
  .swc-card:hover, .card-testimonio:hover,
  .caso-card:hover, .caso-card:hover .img img {
    transform: none;
  }
  .btn-swc:hover i, .btn-ghost:hover i, .card-servicio:hover .enlace i { transform: none; }
  .swc-submenu .sub-todos a:hover i { transform: none; }

  .swc-submenu { transform: none; }
  .swc-menu li:hover .swc-submenu { transform: none; }

  .swc-toast { transform: none; }
  .cookie-banner { transition: opacity 200ms var(--ease-out); transform: translate(-50%, 0); }
  .swc-menu { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .hero-grid, .grid-2 { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .grid-3, .swc-acronimo, .testi-track, .casos-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(3)::before, .stat:nth-child(2)::before { display: none; }
  .equipo-card { grid-template-columns: 1fr; text-align: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .swc-burger { display: grid; place-items: center; }
  .swc-nav-cta .btn-swc, .swc-social-mini { display: none; }
  .swc-menu {
    position: fixed; top: var(--navbar-h); right: 0; flex-direction: column; align-items: stretch;
    background: #fff; width: min(82vw,320px); height: calc(100dvh - var(--navbar-h)); padding: 20px;
    gap: 4px; box-shadow: -10px 0 40px rgba(11,27,51,.18); transform: translateX(105%); transition: transform 350ms var(--ease-drawer); overflow-y: auto;
  }
  .swc-menu.open { transform: translateX(0); }
  .swc-submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; min-width: auto; padding: 4px 0 4px 12px; }
  .swc-submenu a { padding: 9px 10px; }
  .swc-submenu a .ic { width: 28px; height: 28px; font-size: .8rem; }
  .swc-subservicios { padding-left: 22px; }
  .swc-submenu .sub-todos a { justify-content: flex-start; }
  .cta-box { padding: 40px 24px; }
  .newsletter-inline { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
}