/* =====================================================================
   LINALCA INFORMÁTICA — Sitio corporativo
   Misma tipografía, tamaños y tonos del sitio Apple de Linalca.
   Sin efecto vidrio: superficies de color fijo con texturas sutiles.
   Resaltados en gris grafito corporativo (nunca negro).
   ---------------------------------------------------------------------
   1. Variables          8. Tarjetas y rejillas     15. Casos y galería
   2. Base               9. Dividido                16. Blog y artículo
   3. Utilidades        10. Cifras y pasos          17. Eventos y legal
   4. Botones           11. Comparativa             18. Cierre (CTA)
   5. Cabecera          12. Pestañas                19. Contacto y sedes
   6. Hero              13. Logos y chips           20. Pie de página
   7. Secciones         14. Sectores                21. Animaciones / responsive
   ===================================================================== */

/* Tipografías: Source Sans Pro (textos) y Century Gothic (títulos).
   Si el equipo no tiene Century Gothic (fuente con licencia) se usa Jost (OFL), geométrica similar. */
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 400; font-display: swap; src: local("Source Sans Pro"), local("SourceSansPro-Regular"), url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: italic; font-weight: 400; font-display: swap; src: local("Source Sans Pro Italic"), local("SourceSansPro-It"), url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 600; font-display: swap; src: local("Source Sans Pro SemiBold"), local("SourceSansPro-Semibold"), url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 700; font-display: swap; src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Linalca Titulos"; font-style: normal; font-weight: 700; font-display: swap; src: local("Century Gothic Bold"), local("CenturyGothic-Bold"), url("../fonts/jost-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Linalca Titulos"; font-style: normal; font-weight: 600; font-display: swap; src: local("Century Gothic Bold"), local("CenturyGothic-Bold"), url("../fonts/jost-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Linalca Titulos"; font-style: normal; font-weight: 400 500; font-display: swap; src: local("Century Gothic"), local("CenturyGothic"), url("../fonts/jost-latin-500-normal.woff2") format("woff2"); }

/* 1. VARIABLES ------------------------------------------------------- */
:root {
  /* Marca Linalca */
  --azul:        #0068B3;
  --azul-medio:  #007AC1;
  --azul-claro:  #4594E1;
  --azul-apple:  #0071E3;
  --azul-cielo:  #2997FF;
  --azul-hielo:  #9FD0FF;
  --rojo:        #F00B19;
  --verde-wa:    #25D366;

  /* Gris corporativo (resaltados) */
  --grafito:     #6B6B6A;
  --grafito-2:   #777776;
  --grafito-3:   #5F5F5E;

  /* Texto */
  --tinta:       #1A1A1A;
  --texto:       #282828;
  --texto-suave: #666666;
  --texto-claro: rgba(255, 255, 255, .8);

  /* Superficies */
  --fondo:       #FFFFFF;
  --gris:        #F5F5F7;
  --gris-2:      #EDEDF0;
  --linea:       rgba(0, 0, 0, .08);
  --linea-2:     rgba(0, 0, 0, .12);

  /* Texturas */
  --textura-puntos: radial-gradient(rgba(107, 107, 106, .10) 1px, transparent 1.2px);
  --textura-lineas: repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 14px);
  --textura-reticula:
      linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);

  /* Sombras */
  --sombra-1: 0 1px 2px rgba(20, 30, 45, .05), 0 8px 24px -12px rgba(20, 30, 45, .14);
  --sombra-2: 0 2px 4px rgba(20, 30, 45, .05), 0 24px 48px -20px rgba(20, 30, 45, .24);

  /* Forma */
  --radio-xl: 30px;
  --radio-lg: 22px;
  --radio-md: 16px;
  --radio-sm: 14px;
  --pastilla: 999px;

  --fuente: "Source Sans Pro", "Source Sans 3", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-titulos: "Linalca Titulos", "Century Gothic", "CenturyGothic", "Avenir Next", "Segoe UI", sans-serif;
  --ancho: 1320px;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --seccion-pad: clamp(56px, 6vw, 96px);

  color-scheme: light;
}

/* 2. BASE ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--azul); text-decoration: none; transition: color .2s; }
a:hover { color: var(--azul-apple); }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { color: var(--tinta); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid rgba(0, 113, 227, .45); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(0, 113, 227, .18); }

/* 3. UTILIDADES ------------------------------------------------------ */
.contenedor { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }
main { display: block; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--azul); color: #fff; }
.saltar:focus { top: 12px; color: #fff; }
.ico { width: 20px; height: 20px; flex-shrink: 0; }
.ico--mini { width: 13px; height: 13px; opacity: .6; }
.ico--atras { transform: rotate(180deg); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .92rem; font-weight: 600; line-height: 1.4;
  color: var(--azul-apple); margin-bottom: 12px;
}
.eyebrow--marca::before {
  content: ""; width: 28px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--azul) 0 70%, var(--rojo) 70%);
}
.eyebrow--claro { color: var(--azul-hielo); }

.titulo-seccion { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
.intro { font-size: 1.05rem; line-height: 1.7; color: var(--texto-suave); }

.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.acciones--centro { justify-content: center; margin-top: clamp(32px, 4vw, 48px); }

.vinetas { display: grid; gap: 10px; margin-top: 18px; }
.vinetas li { display: flex; gap: 10px; align-items: flex-start; }
.vinetas .ico { width: 20px; height: 20px; padding: 3px; margin-top: 2px; border-radius: 50%; color: #fff; background: var(--azul); }
.vinetas--sm { gap: 8px; margin-top: 14px; font-size: .92rem; }
.vinetas--sm .ico { width: 18px; height: 18px; }
.vinetas--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }

/* 4. BOTONES --------------------------------------------------------- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: var(--pastilla);
  font-weight: 500; font-size: .96rem; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .3s var(--curva), box-shadow .3s var(--curva), background-color .3s, color .3s, border-color .3s;
}
.btn .ico { width: 18px; height: 18px; transition: transform .3s var(--curva); }
.btn:hover .ico:last-child:not(:first-child) { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn--primario {
  color: #fff;
  background: linear-gradient(180deg, #2B8CF0 0%, var(--azul-apple) 55%, #0062C6 100%);
  border-color: rgba(255, 255, 255, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 20px -12px rgba(0, 113, 227, .7);
}
.btn--primario:hover { color: #fff; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 16px 30px -12px rgba(0, 104, 179, .75); }
.btn--secundario { color: var(--azul); background: #fff; border-color: rgba(0, 104, 179, .28); }
.btn--secundario:hover { color: var(--azul-apple); border-color: var(--azul-apple); transform: translateY(-2px); box-shadow: var(--sombra-1); }
.btn--claro { color: var(--grafito); background: #fff; border-color: #fff; }
.btn--claro:hover { color: var(--azul); transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .35); }
.btn--texto { min-height: 0; padding: 0; color: var(--azul); border-radius: 0; }
.btn--texto:hover { color: var(--azul-apple); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: .88rem; }
.btn--grande { min-height: 54px; padding: 0 30px; font-size: 1rem; }

/* 5. CABECERA -------------------------------------------------------- */
.barra { position: sticky; top: 0; z-index: 100; background: #fff; }
.barra::before { /* franja corporativa superior */
  content: ""; display: block; height: 4px;
  background: linear-gradient(90deg, var(--azul) 0 62%, var(--azul-medio) 62% 84%, var(--rojo) 84%);
}
.barra__utilidad {
  position: relative; overflow: hidden;
  background: var(--grafito) var(--textura-lineas);
  color: var(--texto-claro); font-size: .82rem;
  max-height: 44px; transition: max-height .35s var(--curva), opacity .25s;
}
.barra__utilidad-fila { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.barra__datos, .barra__rapidos { display: flex; align-items: center; gap: 22px; }
.barra__utilidad a { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .86); white-space: nowrap; }
.barra__utilidad a:hover { color: #fff; }
.barra__utilidad .ico { width: 15px; height: 15px; color: var(--azul-hielo); }
.barra__rapidos a + a { position: relative; }
.barra__rapidos a + a::before { content: ""; position: absolute; left: -12px; top: 50%; width: 1px; height: 14px; transform: translateY(-50%); background: rgba(255, 255, 255, .25); }

.barra__nav { border-bottom: 1px solid var(--linea); background: #fff; transition: box-shadow .3s; }
.barra.es-compacta .barra__utilidad { max-height: 0; opacity: 0; }
.barra.es-compacta .barra__nav { box-shadow: 0 10px 30px -18px rgba(20, 30, 45, .35); }
.barra__fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.barra__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.barra__logo-img { height: 46px; width: auto; }
.barra__toggle { display: none; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: var(--grafito); border: 1px solid var(--linea-2); }
.barra__toggle .t-cerrar { display: none; }
.barra__toggle[aria-expanded="true"] .t-abrir { display: none; }
.barra__toggle[aria-expanded="true"] .t-cerrar { display: grid; }
.barra__toggle span { display: grid; }

.barra__menu { display: flex; align-items: center; gap: 18px; }
.menu { display: flex; align-items: center; gap: 2px; }
.menu__item { position: relative; }
.menu__enlace {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 12px;
  font-size: .93rem; font-weight: 500; color: var(--texto); white-space: nowrap;
  transition: color .2s, background-color .2s;
}
.menu__enlace .ico--flecha { width: 15px; height: 15px; transition: transform .3s var(--curva); }
.menu__enlace:hover, .menu__item.es-abierto > .menu__enlace { color: var(--azul); background: var(--gris); }
.menu__item.es-abierto > .menu__enlace .ico--flecha { transform: rotate(180deg); }
.menu__item.es-activo > .menu__enlace { color: var(--azul); }
.menu__item.es-activo > .menu__enlace::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--azul);
}
.submenu {
  position: absolute; top: calc(100% + 10px); left: 50%; min-width: 330px;
  padding: 10px; border-radius: var(--radio-md);
  background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-2);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity .25s, transform .3s var(--curva), visibility .25s;
}
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.submenu::after { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--azul); }
.menu__item.es-abierto .submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.submenu__enlace { display: grid; gap: 1px; padding: 11px 14px; border-radius: 12px; color: var(--texto); }
.submenu__enlace strong { display: inline-flex; align-items: center; gap: 6px; font-size: .93rem; font-weight: 500; color: var(--tinta); }
.submenu__enlace span { font-size: .8rem; color: var(--texto-suave); }
.submenu__enlace:hover, .submenu__enlace.es-actual { background: var(--gris); }
.submenu__enlace:hover strong, .submenu__enlace.es-actual strong { color: var(--azul); }

/* 6. HERO ------------------------------------------------------------ */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 6vw, 96px) 0 clamp(56px, 6vw, 96px); background: var(--gris); }
.hero__fondo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(0, 113, 227, .10), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(107, 107, 106, .08), transparent 70%),
    var(--textura-puntos);
  background-size: auto, auto, 22px 22px;
}
.hero__fondo::after { /* línea de acento inferior */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linea);
}
.hero__escenario { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.hero__titulo { font-size: clamp(2.2rem, 4.4vw, 3.7rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; margin: 8px 0 20px; }
.hero__parrafo { font-size: 1.12rem; line-height: 1.7; color: var(--texto-suave); max-width: 620px; }
.hero__parrafo + .hero__parrafo { margin-top: 12px; }
.hero__puntos { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; font-size: .92rem; font-weight: 500; color: var(--texto); }
.hero__puntos li { display: inline-flex; align-items: center; gap: 8px; }
.hero__puntos .ico { width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: #fff; background: var(--azul); }

.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .84rem; color: var(--texto-suave); }
.migas a { color: var(--texto-suave); }
.migas a:hover { color: var(--azul); }
.migas span[aria-hidden] { opacity: .5; }
.migas > span:last-child { color: var(--texto); font-weight: 500; }

.hero__media { position: relative; margin: 0; }
.hero__marco {
  position: absolute; inset: 18px -18px -18px 18px; border-radius: var(--radio-xl);
  background: var(--grafito) var(--textura-lineas); z-index: 0;
}
.hero__marco::after { content: ""; position: absolute; left: 28px; bottom: 22px; width: 64px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--azul-cielo) 0 65%, var(--rojo) 65%); }
.hero__img {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radio-xl); background: var(--gris-2); box-shadow: var(--sombra-2);
}
.hero__sello {
  position: absolute; z-index: 2; left: -22px; bottom: 34px;
  display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 16px;
  border-radius: var(--radio-md); background: #fff; box-shadow: var(--sombra-2); border: 1px solid var(--linea);
}
.hero__sello strong { font-size: 2.2rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--azul); }
.hero__sello span { font-size: .85rem; line-height: 1.3; color: var(--texto); max-width: 120px; font-weight: 500; }

.hero__cifras {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(40px, 5vw, 72px); border-radius: var(--radio-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-1);
}
.hero__cifra { padding: 22px 26px; }
.hero__cifra + .hero__cifra { border-left: 1px solid var(--linea); }
.hero__cifra dt { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; color: var(--azul); }
.hero__cifra dd { font-size: .88rem; line-height: 1.45; color: var(--texto-suave); margin-top: 4px; }

.hero--portada { padding-top: clamp(56px, 7vw, 112px); }
.hero--centrado .hero__escenario { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.hero--centrado .hero__texto { max-width: 880px; }
.hero--centrado .migas, .hero--centrado .acciones { justify-content: center; }
.hero--centrado .hero__parrafo { margin-inline: auto; }
.hero--centrado .eyebrow--marca::before { display: none; }

/* 7. SECCIONES ------------------------------------------------------- */
.seccion { position: relative; padding: var(--seccion-pad) 0; }
.seccion--claro { background: #fff; }
.seccion--gris { background: var(--gris); }
.seccion--gris::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--textura-puntos); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .2));
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .2));
}
.seccion--gris > .contenedor, .seccion--grafito > .contenedor { position: relative; }
.seccion--grafito { background: var(--grafito); color: var(--texto-claro); overflow: hidden; }
.seccion__textura {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 80% at 100% 0%, rgba(41, 151, 255, .20), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(255, 255, 255, .06), transparent 70%),
    var(--textura-reticula);
  background-size: auto, auto, 44px 44px, 44px 44px;
}
.seccion--grafito::after { content: ""; position: absolute; left: 0; top: 0; width: 140px; height: 4px; background: linear-gradient(90deg, var(--azul-cielo) 0 70%, var(--rojo) 70%); }
.seccion--grafito h2, .seccion--grafito h3, .seccion--grafito strong, .seccion--grafito dt { color: #fff; }
.seccion--grafito .eyebrow { color: var(--azul-hielo); }
.seccion--grafito .intro, .seccion--grafito p { color: var(--texto-claro); }
/* Secciones consecutivas del mismo tono: separador sutil */
.seccion--claro + .seccion--claro .contenedor,
.seccion--gris + .seccion--gris .contenedor { border-top: 1px solid var(--linea); padding-top: var(--seccion-pad); }
.seccion--claro + .seccion--claro, .seccion--gris + .seccion--gris { padding-top: 0; }

.encabezado { display: grid; gap: 14px 64px; margin-bottom: clamp(36px, 4vw, 56px); }
.encabezado--dividido { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; }
.encabezado--dividido .titulo-seccion { max-width: 720px; }
.encabezado--dividido .intro { max-width: 520px; }
.encabezado--centro { text-align: center; justify-items: center; }
.encabezado--centro .encabezado__titulo { max-width: 860px; }
.encabezado--centro .intro { max-width: 760px; margin-inline: auto; }
.encabezado__lateral .intro + .intro { margin-top: 10px; }
.encabezado__titulo .eyebrow { margin-bottom: 12px; }

/* Bloque de marca (inicio) */
.seccion--marca { padding: var(--seccion-pad) 0; background: #fff; }
.marca {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(32px, 5vw, 72px);
  padding: clamp(32px, 5vw, 72px); border-radius: var(--radio-xl);
  background: var(--grafito); color: var(--texto-claro);
}
.marca::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 90% at 100% 0%, rgba(41, 151, 255, .22), transparent 70%), var(--textura-reticula); background-size: auto, 44px 44px, 44px 44px; }
.marca::after { content: ""; position: absolute; left: clamp(32px, 5vw, 72px); top: 0; width: 120px; height: 4px; background: linear-gradient(90deg, var(--azul-cielo) 0 70%, var(--rojo) 70%); }
.marca > * { position: relative; }
.marca .eyebrow { color: var(--azul-hielo); }
.marca__titulo { color: #fff; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -.035em; line-height: 1.08; }
.marca__lema { margin-top: 16px; font-size: 1.05rem; font-weight: 500; color: #fff; }
.marca__parrafo { font-size: 1.05rem; line-height: 1.7; }
.marca__parrafo + .marca__parrafo { margin-top: 12px; }
.marca__cuerpo { align-self: end; }
.marca .btn--secundario { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.marca .btn--secundario:hover { background: #fff; color: var(--texto); }
.marca__cifras { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 28px; margin-top: 8px; }
.marca__cifra + .marca__cifra { border-left: 1px solid rgba(255, 255, 255, .16); padding-left: 24px; }
.marca__cifra dt { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; color: #fff; }
.marca__cifra dd { font-size: .9rem; color: var(--texto-claro); }
.marca__sellos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.marca__sellos li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pastilla); font-size: .85rem; font-weight: 500; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); }
.marca__sellos .ico { width: 16px; height: 16px; color: var(--azul-hielo); }

/* 8. TARJETAS Y REJILLAS -------------------------------------------- */
.rejilla { display: grid; gap: clamp(16px, 2vw, 24px); }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.tarjeta {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radio-lg); background: #fff; border: 1px solid var(--linea);
  transition: transform .4s var(--curva), box-shadow .4s var(--curva), border-color .3s;
}
.seccion--claro .tarjeta { background: var(--gris); border-color: transparent; }
.tarjeta::after { /* acento superior al pasar el cursor */
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--azul) 0 80%, var(--rojo) 80%); transition: width .5s var(--curva);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.seccion--claro .tarjeta:hover { background: #fff; border-color: var(--linea); }
.tarjeta:hover::after { width: 100%; }
.tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1; padding: clamp(24px, 2.4vw, 32px); }
.tarjeta__icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; margin-bottom: 20px; color: #fff; background: var(--grafito) var(--textura-lineas); }
.tarjeta__icono .ico { width: 24px; height: 24px; }
.tarjeta__num { font-size: 2.4rem; font-weight: 700; letter-spacing: -.05em; line-height: 1; margin-bottom: 18px; color: transparent; -webkit-text-stroke: 1.5px var(--azul); }
.tarjeta__etiqueta { font-size: .85rem; font-weight: 600; color: var(--azul-apple); margin-bottom: 6px; }
.tarjeta__titulo { font-size: 1.18rem; line-height: 1.3; margin: 4px 0 8px; transition: color .3s; }
.tarjeta:hover .tarjeta__titulo { color: var(--azul); }
.tarjeta__texto { font-size: .95rem; color: var(--texto-suave); }
.tarjeta__texto + .tarjeta__texto { margin-top: 10px; }
.tarjeta__enlace { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 20px; font-size: .92rem; font-weight: 500; color: var(--azul); }
.tarjeta__enlace .ico { width: 17px; height: 17px; transition: transform .3s var(--curva); }
.tarjeta__enlace:hover .ico { transform: translateX(3px); }
.tarjeta__enlace::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.tarjeta--foto .tarjeta__foto { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gris-2); }
.tarjeta--foto .tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
.tarjeta--foto:hover .tarjeta__foto img { transform: scale(1.05); }

/* Tarjetas sobre grafito */
.seccion--grafito .tarjeta { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.seccion--grafito .tarjeta:hover { background: rgba(255, 255, 255, .1); }
.seccion--grafito .tarjeta__titulo { color: #fff; }
.seccion--grafito .tarjeta__texto { color: var(--texto-claro); }
.seccion--grafito .tarjeta__icono { background: rgba(255, 255, 255, .1); }
.seccion--grafito .tarjeta__etiqueta { color: var(--azul-hielo); }
.seccion--grafito .tarjeta__enlace { color: var(--azul-hielo); }

/* 9. DIVIDIDO -------------------------------------------------------- */
.dividido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.dividido--img-izq .dividido__media { order: -1; }
.dividido--solo { grid-template-columns: minmax(0, 860px); }
.dividido__texto > p:not([class]) { font-size: 1.05rem; line-height: 1.7; color: var(--texto-suave); margin-top: 16px; }
.dividido__texto .titulo-seccion { margin-bottom: 4px; }
.dividido__subtitulo { font-size: 1.2rem; font-weight: 500; color: var(--texto); margin-top: 12px; }
.dividido__lista-titulo { margin-top: 24px; font-weight: 600; color: var(--tinta); }
.dividido__cierre { margin-top: 18px; font-weight: 500; color: var(--texto); }
.dividido__media { position: relative; margin: 0; }
.dividido__media::before { /* bloque grafito desplazado */
  content: ""; position: absolute; width: 58%; height: 72%; right: -16px; bottom: -16px; border-radius: var(--radio-xl);
  background: var(--grafito) var(--textura-lineas);
}
.dividido--img-izq .dividido__media::before { right: auto; left: -16px; }
.dividido__media img { position: relative; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radio-xl); background: var(--gris-2); box-shadow: var(--sombra-1); }
.dividido__media--contener img { object-fit: contain; background: #fff; padding: 24px; }
.dividido__dato { position: absolute; left: 20px; bottom: 20px; display: grid; padding: 14px 18px; border-radius: var(--radio-md); background: #fff; box-shadow: var(--sombra-2); }
.dividido__dato strong { font-size: 1.8rem; font-weight: 700; color: var(--azul); line-height: 1; }
.dividido__dato span { font-size: .85rem; color: var(--texto); }

/* 10. CIFRAS Y PASOS ------------------------------------------------- */
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-radius: var(--radio-lg); overflow: hidden; background: var(--linea); border: 1px solid var(--linea); }
.cifras--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cifras--10 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cifra { padding: clamp(24px, 2.6vw, 36px); background: #fff; }
.seccion--claro .cifra { background: var(--gris); }
.cifra__valor { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; color: var(--azul); }
.cifra__etiqueta { font-weight: 600; color: var(--tinta); margin-top: 8px; }
.cifra__texto { font-size: .92rem; color: var(--texto-suave); margin-top: 6px; }
.seccion--grafito .cifras { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .14); }
.seccion--grafito .cifra { background: var(--grafito-2); }
.seccion--grafito .cifra:nth-child(even) { background: var(--grafito); }
.seccion--grafito .cifra__valor { color: #fff; }
.seccion--grafito .cifra__etiqueta { color: var(--azul-hielo); }
.seccion--grafito .cifra__texto { color: var(--texto-claro); }

.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); counter-reset: paso; }
.paso { position: relative; padding: clamp(24px, 2.4vw, 32px); border-radius: var(--radio-lg); background: #fff; border: 1px solid var(--linea); }
.seccion--claro .paso { background: var(--gris); border-color: transparent; }
.paso__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; margin-bottom: 20px; font-weight: 600; color: #fff; background: var(--azul); box-shadow: 0 0 0 6px rgba(0, 104, 179, .12); }
.paso:not(:last-child)::after { content: ""; position: absolute; top: calc(clamp(24px, 2.4vw, 32px) + 24px); left: calc(clamp(24px, 2.4vw, 32px) + 60px); right: -12px; height: 2px; background: repeating-linear-gradient(90deg, rgba(0, 104, 179, .35) 0 6px, transparent 6px 12px); }
.paso__titulo { font-size: 1.18rem; margin-bottom: 8px; }
.paso__texto { font-size: .95rem; color: var(--texto-suave); }

/* 11. COMPARATIVA ---------------------------------------------------- */
.comparativa { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 20px; max-width: 1040px; margin-inline: auto; }
.comparativa__col { padding: clamp(28px, 3vw, 44px); border-radius: var(--radio-xl); background: #fff; border: 1px solid var(--linea); }
.seccion--claro .comparativa__col { background: var(--gris); border-color: transparent; }
.comparativa__col--destacada { position: relative; overflow: hidden; background: var(--grafito) !important; color: var(--texto-claro); }
.comparativa__col--destacada::before { content: ""; position: absolute; inset: 0; background: var(--textura-reticula); background-size: 44px 44px; pointer-events: none; }
.comparativa__col--destacada > * { position: relative; }
.comparativa__col--destacada .comparativa__titulo { color: #fff; }
.comparativa__col--destacada .comparativa__etiqueta { color: var(--azul-hielo); }
.comparativa__col--destacada .vinetas .ico { background: var(--azul-cielo); }
.comparativa__etiqueta { font-size: .92rem; font-weight: 600; color: var(--azul-apple); }
.comparativa__titulo { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; margin: 6px 0 4px; }
.comparativa__nota { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); font-weight: 500; color: #fff; }
.comparativa__vs { align-self: center; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; font-weight: 700; color: #fff; background: var(--azul); box-shadow: 0 0 0 8px rgba(0, 104, 179, .12); }

/* 12. PESTAÑAS ------------------------------------------------------- */
.pestanas__lista { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(24px, 3vw, 36px); max-width: 100%; }
.pestanas__boton { background: var(--gris); border: 1px solid var(--linea); }
.seccion--gris .pestanas__boton { background: #fff; }
.pestanas__boton { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--pastilla); font-size: .92rem; font-weight: 500; color: var(--texto-suave); transition: background-color .25s, color .25s, box-shadow .25s; }
.pestanas__boton .ico { width: 18px; height: 18px; }
.pestanas__boton:hover { color: var(--azul); }
.pestanas__boton.es-activa, .pestanas__boton.es-activa:hover { color: #fff; background: var(--azul); border-color: var(--azul); box-shadow: 0 8px 18px -10px rgba(0, 104, 179, .8); }
.pestanas__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(24px, 4vw, 56px); border-radius: var(--radio-xl); background: #fff; border: 1px solid var(--linea); }
.seccion--claro .pestanas__panel { background: var(--gris); border-color: transparent; }
.pestanas__panel[hidden] { display: none; }
.pestanas__panel.es-entrando { animation: entrar .5s var(--curva); }
.pestanas__titulo { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.03em; }
.pestanas__intro { font-size: 1.05rem; color: var(--texto-suave); margin-top: 12px; }
.pestanas__intro + .pestanas__intro { margin-top: 8px; }
.pestanas__marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.pestanas__marcas span { font-size: .85rem; font-weight: 600; color: var(--texto); margin-right: 4px; }
.pestanas__marcas em { font-style: normal; font-size: .85rem; padding: 6px 12px; border-radius: var(--pastilla); background: #fff; border: 1px solid var(--linea-2); color: var(--texto); }
.pestanas__media { margin: 0; }
.pestanas__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio-lg); background: var(--gris-2); }

/* 13. LOGOS Y CHIPS -------------------------------------------------- */
.seccion--franja { padding: 36px 0 !important; border-bottom: 1px solid var(--linea); }
.seccion--franja .contenedor { border-top: 0 !important; padding-top: 0 !important; }
.logos-banda { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logos-banda__pista { display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); width: max-content; animation: desfile 60s linear infinite; }
.logos-banda:hover .logos-banda__pista { animation-play-state: paused; }
.logo-aliado { display: grid; place-items: center; flex-shrink: 0; }
.logos-banda .logo-aliado img { height: 44px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.logos-banda .logo-aliado:hover img { filter: none; opacity: 1; }
.logos-rejilla { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.logos-rejilla .logo-aliado { height: 96px; padding: 18px; border-radius: var(--radio-md); background: #fff; border: 1px solid var(--linea); transition: box-shadow .3s, transform .3s var(--curva); }
.seccion--claro .logos-rejilla .logo-aliado { background: #fff; }
.logos-rejilla .logo-aliado:hover { box-shadow: var(--sombra-1); transform: translateY(-2px); }
.logos-rejilla img { max-height: 56px; max-width: 100%; width: auto; object-fit: contain; }
@keyframes desfile { to { transform: translateX(-50%); } }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.chip { padding: 12px 24px; border-radius: var(--pastilla); font-weight: 600; color: var(--texto); background: #fff; border: 1px solid var(--linea-2); box-shadow: var(--sombra-1); }
.seccion--claro .chip { background: var(--gris); box-shadow: none; }

/* 14. SECTORES ------------------------------------------------------- */
.sectores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.sector { border-radius: var(--radio-md); background: #fff; border: 1px solid var(--linea); overflow: hidden; }
.seccion--claro .sector { background: var(--gris); border-color: transparent; }
.sector summary { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; list-style: none; }
.sector summary::-webkit-details-marker { display: none; }
.sector__icono { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: var(--grafito); }
.sector__icono .ico { width: 20px; height: 20px; }
.sector__nombre { flex: 1; font-weight: 600; color: var(--tinta); }
.sector__total { font-size: .82rem; color: var(--texto-suave); }
.sector__flecha { width: 18px; height: 18px; color: var(--azul); transition: transform .3s var(--curva); }
.sector[open] .sector__flecha { transform: rotate(180deg); }
.sector[open] .sector__icono { background: var(--azul); }
.sector__clientes { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 20px 20px 76px; }
.sector__clientes li { font-size: .8rem; font-weight: 500; padding: 6px 12px; border-radius: var(--pastilla); background: var(--gris); color: var(--texto); }
.seccion--claro .sector__clientes li { background: #fff; }

/* 15. CASOS Y GALERÍA ------------------------------------------------ */
.caso { padding: clamp(24px, 4vw, 56px); border-radius: var(--radio-xl); background: #fff; border: 1px solid var(--linea); }
.seccion--claro .caso { background: var(--gris); border-color: transparent; }
.caso + .caso { margin-top: 24px; }
.caso__cabeza { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.caso__logo img { height: 56px; width: auto; }
.caso__titulo { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; }
.caso__rejilla { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.caso__foto { margin: 0; position: sticky; top: 130px; }
.caso__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio-lg); }
.caso__ficha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-radius: var(--radio-md); overflow: hidden; background: var(--linea); margin-bottom: 24px; }
.caso__ficha div { padding: 14px 16px; background: var(--grafito); }
.caso__ficha dt { font-size: .8rem; color: var(--azul-hielo); font-weight: 500; }
.caso__ficha dd { font-weight: 600; color: #fff; line-height: 1.35; }
.caso__bloque + .caso__bloque { margin-top: 20px; }
.caso__bloque h4 { font-size: 1.05rem; color: var(--azul); margin-bottom: 6px; }
.caso__bloque p { color: var(--texto-suave); }
.caso__bloque p + p { margin-top: 8px; }
.caso__testimonio { display: flex; gap: 16px; margin-top: 32px; padding: 24px 28px; border-radius: var(--radio-lg); background: #fff; border-left: 4px solid var(--azul); box-shadow: var(--sombra-1); }
.caso__testimonio .ico { width: 28px; height: 28px; color: var(--azul); }
.caso__testimonio p { font-size: 1.05rem; font-style: italic; color: var(--texto); }

.galeria { display: grid; gap: clamp(16px, 2vw, 24px); }
.galeria--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galeria--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galeria--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.galeria__item figure { margin: 0; height: 100%; overflow: hidden; border-radius: var(--radio-lg); background: #fff; border: 1px solid var(--linea); transition: box-shadow .3s, transform .4s var(--curva); }
.seccion--claro .galeria__item figure { background: var(--gris); border-color: transparent; }
.galeria__item figure:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.galeria__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galeria__item figcaption { display: grid; gap: 4px; padding: 18px 22px 22px; }
.galeria__item figcaption strong { color: var(--tinta); }
.galeria__item figcaption span { font-size: .92rem; color: var(--texto-suave); }
.galeria--sellos .galeria__item figure { text-align: center; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.galeria--sellos .galeria__item img { aspect-ratio: 1; width: 150px; height: 150px; object-fit: contain; margin: 28px auto 0; padding: 18px; background: #fff; border-radius: 50%; }
.seccion--grafito .galeria__item figcaption strong { color: #fff; }
.seccion--grafito .galeria__item figcaption span { color: var(--texto-claro); }

/* 16. BLOG Y ARTÍCULO ------------------------------------------------ */
.articulo-tarjeta { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radio-lg); background: #fff; border: 1px solid var(--linea); transition: transform .4s var(--curva), box-shadow .4s var(--curva); }
.seccion--claro .articulo-tarjeta { background: var(--gris); border-color: transparent; }
.articulo-tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.articulo-tarjeta__foto { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--gris-2); }
.articulo-tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
.articulo-tarjeta:hover .articulo-tarjeta__foto img { transform: scale(1.05); }
.articulo-tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.articulo-tarjeta__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .8rem; color: var(--texto-suave); }
.articulo-tarjeta__meta .ico { width: 15px; height: 15px; color: var(--azul); }
.articulo-tarjeta__meta span { padding: 2px 10px; border-radius: var(--pastilla); background: rgba(0, 104, 179, .08); color: var(--azul); font-weight: 500; }
.articulo-tarjeta__titulo { font-size: 1.08rem; line-height: 1.35; margin: 10px 0 8px; }
.articulo-tarjeta__titulo a { color: var(--tinta); }
.articulo-tarjeta__titulo a:hover { color: var(--azul); }
.articulo-tarjeta__titulo a::before { content: ""; position: absolute; inset: 0; }
.articulo-tarjeta__resumen { font-size: .92rem; color: var(--texto-suave); }

.articulo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.articulo__foto { margin: 0; position: sticky; top: 130px; }
.articulo__foto img { width: 100%; border-radius: var(--radio-xl); box-shadow: var(--sombra-1); }
.articulo__cuerpo { max-width: 740px; }
.articulo__cuerpo > p { font-size: 1.05rem; line-height: 1.8; color: #3A3A3A; }
.articulo__cuerpo > p + p, .articulo__cuerpo > .vinetas + p { margin-top: 18px; }
.articulo__cuerpo h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -.03em; margin: 36px 0 12px; }
.articulo__cuerpo .vinetas { margin: 18px 0; }
.articulo__volver { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linea); }

/* 17. EVENTOS Y LEGAL ------------------------------------------------ */
.eventos { display: grid; gap: 16px; max-width: 980px; }
.evento { display: grid; grid-template-columns: 124px minmax(0, 1fr); overflow: hidden; border-radius: var(--radio-lg); background: #fff; border: 1px solid var(--linea); }
.seccion--claro .evento { background: var(--gris); border-color: transparent; }
.evento__fecha { display: grid; align-content: center; justify-items: center; padding: 20px; text-align: center; color: #fff; background: var(--grafito) var(--textura-lineas); }
.evento__fecha span { font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.evento__fecha strong { font-size: 1rem; }
.evento__fecha em { font-style: normal; font-size: .82rem; opacity: .75; }
.evento__cuerpo { padding: 24px 28px; }
.evento__titulo { font-size: 1.25rem; margin-bottom: 6px; }
.evento__texto { color: var(--texto-suave); }
.evento__lugar { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .9rem; font-weight: 500; color: var(--texto); }
.evento__lugar .ico { width: 17px; height: 17px; color: var(--azul); }

.legal { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.legal__indice { position: sticky; top: 130px; padding: 24px; border-radius: var(--radio-lg); background: var(--grafito); color: var(--texto-claro); max-height: calc(100vh - 160px); overflow: auto; }
.legal__indice-titulo { font-weight: 600; color: #fff; margin-bottom: 12px; }
.legal__indice ol { display: grid; gap: 4px; counter-reset: idx; }
.legal__indice li { counter-increment: idx; }
.legal__indice a { display: flex; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: .86rem; line-height: 1.4; color: var(--texto-claro); }
.legal__indice a::before { content: counter(idx, decimal-leading-zero); font-weight: 600; color: var(--azul-hielo); }
.legal__indice a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.legal__texto { max-width: 820px; }
.legal:not(:has(.legal__indice)) { grid-template-columns: minmax(0, 860px); justify-content: center; }
.legal__texto h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.025em; margin: 40px 0 12px; padding-top: 24px; border-top: 1px solid var(--linea); }
.legal__texto h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__texto p { color: #3A3A3A; }
.legal__texto p + p { margin-top: 12px; }
.legal__texto ul { display: grid; gap: 8px; margin: 12px 0; }
.legal__texto li { position: relative; padding-left: 22px; color: #3A3A3A; }
.legal__texto li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 2px; background: var(--azul); }

/* 18. CIERRE (CTA) --------------------------------------------------- */
.cierre { padding: 0 0 var(--seccion-pad); background: #fff; }
main > .seccion--gris + .cierre, main > .seccion--grafito + .cierre { padding-top: var(--seccion-pad); }
main > .seccion--claro + .cierre { padding-top: 0; }
main > .hero + .cierre { padding-top: var(--seccion-pad); }
.cierre__panel {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) auto; align-items: end; gap: 28px 48px;
  padding: clamp(36px, 5vw, 72px); border-radius: var(--radio-xl);
  background: var(--grafito); color: var(--texto-claro);
}
.cierre__textura { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 100% at 100% 100%, rgba(41, 151, 255, .28), transparent 70%), var(--textura-reticula); background-size: auto, 44px 44px, 44px 44px; }
.cierre__panel::after { content: ""; position: absolute; left: clamp(36px, 5vw, 72px); top: 0; width: 120px; height: 4px; background: linear-gradient(90deg, var(--azul-cielo) 0 70%, var(--rojo) 70%); }
.cierre__texto, .cierre__acciones { position: relative; }
.cierre__titulo { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.04em; line-height: 1.06; }
.cierre__parrafo { margin-top: 14px; font-size: 1.05rem; max-width: 640px; }
.cierre__acciones { margin-top: 0; }

/* 19. CONTACTO Y SEDES ----------------------------------------------- */
.contacto { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 32px); align-items: stretch; }
.contacto__canales { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 48px); border-radius: var(--radio-xl); background: var(--grafito); color: var(--texto-claro); }
.contacto__textura { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 60% at 0% 100%, rgba(41, 151, 255, .22), transparent 70%), var(--textura-reticula); background-size: auto, 44px 44px, 44px 44px; }
.contacto__canales > * { position: relative; }
.contacto__canales-titulo { color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.035em; line-height: 1.1; }
.contacto__canales-texto { margin-top: 12px; }
.canales { display: grid; gap: 10px; margin-top: 28px; }
.canales li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radio-md); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.canales .ico { width: 40px; height: 40px; padding: 10px; border-radius: 12px; color: #fff; background: var(--azul); }
.canales div { display: grid; min-width: 0; }
.canales span { font-size: .82rem; color: var(--texto-claro); }
.canales a { color: #fff; font-weight: 500; overflow-wrap: anywhere; }
.canales a:hover { color: var(--azul-hielo); }

.contacto__form { padding: clamp(28px, 4vw, 48px); border-radius: var(--radio-xl); background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-1); }
.contacto__titulo { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -.03em; }
.contacto__intro { margin: 8px 0 24px; color: var(--texto-suave); }
.formulario { display: grid; gap: 16px; }
.formulario__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: .88rem; font-weight: 500; color: var(--texto); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--radio-sm);
  background: var(--gris); border: 1px solid transparent; color: var(--texto);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23515150' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--linea-2); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; background-color: #fff; border-color: var(--azul-apple); box-shadow: 0 0 0 4px rgba(0, 113, 227, .12); }
.campo--error input, .campo--error select, .campo--error textarea, .campo [aria-invalid="true"] { border-color: #D93025; background-color: #fff; }
.campo__error { font-size: .82rem; color: #C5221F; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--texto-suave); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--azul); flex-shrink: 0; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario .btn { justify-self: start; }
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; border-radius: var(--radio-md); margin-bottom: 20px; font-size: .95rem; }
.aviso .ico { color: #137333; }
.aviso--ok { background: rgba(52, 168, 83, .12); border: 1px solid rgba(52, 168, 83, .35); color: #0D5323; }
.aviso--error { background: rgba(217, 48, 37, .08); border: 1px solid rgba(217, 48, 37, .3); color: #A50E0E; }

.sede { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: var(--radio-lg); background: #fff; border: 1px solid var(--linea); }
.seccion--claro .sede { background: var(--gris); border-color: transparent; }
.sede__info { display: flex; gap: 16px; align-items: flex-start; }
.sede__info .tarjeta__icono { margin: 0; flex-shrink: 0; }
.sede__mapa { overflow: hidden; border-radius: var(--radio-md); aspect-ratio: 16 / 9; background: var(--gris-2); }
.sede__mapa iframe { width: 100%; height: 100%; border: 0; }
.sede .tarjeta__enlace { padding-top: 0; }
.sede .tarjeta__enlace::before { content: none; }

/* Aviso (franja destacada) */
.aviso-banda { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px clamp(24px, 4vw, 48px); padding: clamp(28px, 4vw, 48px); border-radius: var(--radio-xl); background: #fff; border: 1px solid var(--linea); overflow: hidden; }
.seccion--claro .aviso-banda { background: var(--gris); border-color: transparent; }
.aviso-banda::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--azul) 0 75%, var(--rojo) 75%); }
.aviso-banda__icono { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; color: #fff; background: var(--grafito) var(--textura-lineas); }
.aviso-banda__icono .ico { width: 32px; height: 32px; }
.aviso-banda__titulo { font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.03em; line-height: 1.2; }
.aviso-banda__texto > p:not(.eyebrow) { margin-top: 10px; color: var(--texto-suave); }
.aviso-banda__texto .eyebrow { margin-bottom: 6px; }
.aviso-banda__acciones { margin-top: 0; }
.seccion--grafito .aviso-banda { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.seccion--grafito .aviso-banda__icono { background: var(--azul); }
.seccion--grafito .aviso-banda__titulo { color: #fff; }
.seccion--grafito .aviso-banda__texto > p:not(.eyebrow) { color: var(--texto-claro); }

/* 20. PIE DE PÁGINA -------------------------------------------------- */
.pie { position: relative; overflow: hidden; background: var(--grafito); color: var(--texto-claro); padding-top: clamp(56px, 6vw, 80px); }
.pie::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--azul) 0 62%, var(--azul-medio) 62% 84%, var(--rojo) 84%); }
.pie__textura { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 60% at 100% 0%, rgba(41, 151, 255, .16), transparent 70%), var(--textura-lineas); }
.pie .contenedor { position: relative; }
.pie__superior { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 44px; }
.pie__logo { display: inline-flex; padding: 12px 16px; border-radius: var(--radio-sm); background: #fff; }
.pie__logo img { height: 40px; width: auto; }
.pie__texto { margin: 18px 0 20px; font-size: .92rem; max-width: 380px; }
.pie__contacto { display: grid; gap: 10px; }
.pie__contacto li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; }
.pie__contacto .ico { width: 17px; height: 17px; margin-top: 3px; color: var(--azul-hielo); }
.pie__contacto a { color: var(--texto-claro); }
.pie__contacto a:hover, .pie__contacto strong { color: #fff; }
.pie__titulo { font-size: .95rem; font-weight: 600; color: #fff; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.pie__col ul { display: grid; gap: 9px; }
.pie__col a { font-size: .9rem; color: var(--texto-claro); }
.pie__col a:hover { color: #fff; }
.pie__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 22px 0 26px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .82rem; }
.pie__sellos { display: flex; flex-wrap: wrap; gap: 8px; }
.pie__sellos span { padding: 5px 12px; border-radius: var(--pastilla); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-weight: 500; font-size: .78rem; }
.pie__redes { display: flex; gap: 8px; }
.pie__redes a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); transition: background-color .25s; }
.pie__redes a:hover { background: var(--azul); color: #fff; }
.pie__redes .ico { width: 18px; height: 18px; }

.wa-flotante { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: #fff; background: var(--verde-wa); box-shadow: 0 12px 28px -10px rgba(37, 211, 102, .8); transition: transform .3s var(--curva); }
.wa-flotante:hover { color: #fff; transform: scale(1.08); }
.wa-flotante .ico { width: 28px; height: 28px; }

/* 21. ANIMACIONES ---------------------------------------------------- */
.js .revelar { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--curva), transform .8s var(--curva); }
.js .revelar.es-visible { opacity: 1; transform: none; }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .revelar { opacity: 1; transform: none; }
}

/* 22. MENÚ IGUAL A LINALCA.COM: BUSCADOR Y COMPRA EN LÍNEA ----------- */
.menu__enlace { padding: 10px 9px; font-size: .86rem; }
.barra__menu { gap: 10px; }
.barra__logo-img { height: 42px; }
.barra__acciones { display: flex; align-items: center; gap: 10px; }
.barra__buscar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--grafito); background: var(--gris); transition: background-color .25s, color .25s; }
.barra__buscar:hover, .barra__buscar[aria-expanded="true"] { color: #fff; background: var(--azul); }
.btn--tienda { min-height: 42px; padding: 0 18px; font-size: .88rem; }
.btn--tienda .ico { order: -1; }
.buscador { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--linea); box-shadow: var(--sombra-2); }
.buscador[hidden] { display: none; }
.buscador__caja { padding: 24px 0 28px; }
.buscador__etiqueta { display: block; font-weight: 600; font-size: 1.05rem; color: var(--tinta); margin-bottom: 12px; }
.buscador__fila { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 18px; border-radius: var(--pastilla); background: var(--gris); border: 1px solid transparent; }
.buscador__fila:focus-within { border-color: var(--azul-apple); background: #fff; box-shadow: 0 0 0 4px rgba(0, 113, 227, .12); }
.buscador__fila > .ico { color: var(--azul); }
.buscador__fila input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: transparent; outline: none; font-size: 1rem; }
.buscador__fila input::-webkit-search-cancel-button { display: none; }
.buscador__cerrar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--texto-suave); }
.buscador__cerrar:hover { color: var(--azul); background: #fff; }
.buscador__resultados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin-top: 16px; }
.buscador__resultados a { display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--radio-md); color: var(--texto); }
.buscador__resultados a:hover, .buscador__resultados a:focus { background: var(--gris); outline: none; }
.buscador__resultados strong { color: var(--tinta); font-weight: 600; }
.buscador__resultados span { font-size: .88rem; color: var(--texto-suave); }
.buscador__vacio { grid-column: 1 / -1; color: var(--texto-suave); padding: 8px 16px; }

/* RESPONSIVE --------------------------------------------------------- */
@media (max-width: 1240px) {
  .rejilla--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cifras--10 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .logos-rejilla { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1360px) {
  html { scroll-padding-top: 90px; }
  .barra__toggle { display: grid; }
  .barra__utilidad { display: none; }
  .barra__fila { min-height: 68px; }
  .barra__logo-img { height: 40px; }
  .barra__menu {
    position: fixed; left: 0; right: 0; top: 73px; bottom: 0; z-index: 99;
    display: flex; flex-direction: column; align-items: stretch; gap: 16px;
    padding: 16px 16px 32px; overflow-y: auto; background: #fff; border-top: 1px solid var(--linea);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .3s var(--curva), visibility .25s;
  }
  .barra__menu.es-abierto { opacity: 1; visibility: visible; transform: none; }
  .menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .menu__enlace { width: 100%; justify-content: space-between; padding: 14px; font-size: 1rem; border-radius: 12px; }
  .menu__item.es-activo > .menu__enlace::after { display: none; }
  .menu__item.es-activo > .menu__enlace { background: var(--gris); }
  .submenu { position: static; min-width: 0; transform: none; box-shadow: none; border: 0; padding: 0 0 6px 10px; display: none; opacity: 1; visibility: visible; }
  .submenu::after, .submenu::before { display: none; }
  .menu__item.es-abierto .submenu { display: block; transform: none; }
  .barra__acciones { flex-direction: row-reverse; justify-content: flex-end; }
  .barra__acciones .btn { flex: 1; min-height: 50px; }
  .buscador__resultados { grid-template-columns: 1fr; }
  body.menu-abierto { overflow: hidden; }
}

@media (max-width: 1100px) {

  .hero__escenario, .encabezado--dividido, .dividido, .pestanas__panel, .caso__rejilla, .articulo, .contacto, .legal { grid-template-columns: 1fr; }
  .hero__media { max-width: 680px; }
  .dividido--img-izq .dividido__media { order: 0; }
  .caso__foto, .articulo__foto, .legal__indice { position: static; }
  .legal__indice { max-height: none; }
  .articulo__foto { max-width: 520px; }
  .rejilla--4, .pasos, .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cifras--10 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paso::after { display: none; }
  .hero__cifras, .marca__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__cifra:nth-child(3) { border-left: 0; }
  .hero__cifra:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .marca { grid-template-columns: 1fr; }
  .marca__cifra:nth-child(3) { border-left: 0; padding-left: 0; }
  .marca__cifras { row-gap: 20px; }
  .pie__superior { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie__marca { grid-column: 1 / -1; }
  .logos-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cierre__panel { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .rejilla--2, .rejilla--3, .rejilla--4, .rejilla--5, .pasos, .galeria--2, .galeria--3, .galeria--4, .sectores { grid-template-columns: 1fr; }
  .cifras, .cifras--3 { grid-template-columns: 1fr; }
  .cifras--10 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras--10 .cifra__valor { font-size: 1.8rem; }
  .formulario__fila, .vinetas--2col { grid-template-columns: 1fr; }
  .comparativa { grid-template-columns: 1fr; justify-items: stretch; }
  .comparativa__vs { justify-self: center; }
  .caso__ficha { grid-template-columns: 1fr; }
  .aviso-banda { grid-template-columns: 1fr; }
  .aviso-banda__icono { width: 60px; height: 60px; }
  .pie__superior { grid-template-columns: 1fr 1fr; }
  .logos-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos-rejilla .logo-aliado { height: 80px; padding: 14px; }
  .pestanas__lista { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pestanas__lista::-webkit-scrollbar { display: none; }
  .pestanas__boton { flex-shrink: 0; }
  .hero__sello { left: 12px; bottom: 12px; padding: 10px 14px; }
  .hero__sello strong { font-size: 1.7rem; }
  .hero__marco { inset: 12px -8px -12px 12px; }
  .dividido__media::before { right: -8px; bottom: -10px; }
  .dividido--img-izq .dividido__media::before { left: -8px; }
  .evento { grid-template-columns: 1fr; }
  .evento__fecha { grid-auto-flow: column; justify-content: start; gap: 10px; align-items: baseline; padding: 14px 20px; }
  .evento__fecha span { font-size: 1.6rem; }
  .sector__clientes { padding-left: 20px; }
  .acciones .btn { flex: 1 1 auto; }
  .wa-flotante { width: 52px; height: 52px; right: 14px; bottom: 14px; }
}

@media (max-width: 480px) {
  .hero__cifras, .marca__cifras { grid-template-columns: 1fr; }
  .hero__cifra + .hero__cifra { border-left: 0; border-top: 1px solid var(--linea); }
  .marca__cifra + .marca__cifra { border-left: 0; padding-left: 0; }
  .pie__superior { grid-template-columns: 1fr; }
  .pie__barra { flex-direction: column; align-items: flex-start; }
  .logos-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pantallas grandes (iMac / 4K): se escala todo el sitio de forma proporcional */
@media (min-width: 1680px) {
  :root { --ancho: 1480px; }
  html { font-size: 106.25%; }
}
@media (min-width: 2200px) {
  :root { --ancho: 1680px; }
  html { font-size: 115%; }
}

@media print {
  .barra, .pie, .wa-flotante, .cierre { display: none; }
  .js .revelar { opacity: 1; transform: none; }
}

/* =====================================================================
   23. SIN EFECTOS DE VIDRIO (LIQUID GLASS)
   Colores sólidos: sin brillos, reflejos, degradados luminosos ni
   superficies translúcidas. Se conservan solo texturas lineales sutiles.
   ===================================================================== */
.btn--primario { background: var(--azul); border-color: var(--azul); box-shadow: none; }
.btn--primario::after { content: none; }
.btn--primario:hover { background: #00558F; border-color: #00558F; box-shadow: none; }
.btn--secundario:hover, .btn--claro:hover { box-shadow: none; }
.pestanas__boton.es-activa, .pestanas__boton.es-activa:hover { box-shadow: none; }

/* Fondos: sin halos de luz azul */
.hero__fondo { background: var(--textura-puntos); background-size: 22px 22px; }
.seccion__textura { background: var(--textura-reticula); background-size: 44px 44px, 44px 44px; }
.marca::before { background: var(--textura-reticula); background-size: 44px 44px, 44px 44px; }
.cierre__textura { background: var(--textura-reticula); background-size: 44px 44px, 44px 44px; }
.contacto__textura { background: var(--textura-reticula); background-size: 44px 44px, 44px 44px; }
.pie__textura { background: var(--textura-lineas); }

/* Superficies sobre gris: sólidas, no translúcidas */
.seccion--grafito .tarjeta, .seccion--grafito .aviso-banda, .galeria--sellos .galeria__item figure,
.seccion--grafito .galeria__item figure { background: var(--grafito-2); border-color: var(--grafito-2); }
.seccion--grafito .tarjeta:hover { background: var(--grafito-3); }
.seccion--grafito .tarjeta__icono, .pie__redes a { background: var(--grafito-3); border-color: var(--grafito-3); }
.canales li { background: var(--grafito-2); border-color: var(--grafito-2); }
.marca__sellos li { background: var(--grafito-2); border-color: var(--grafito-2); }
.legal__indice a:hover { background: var(--grafito-2); }
.seccion--grafito .cifras { background: var(--grafito-3); border-color: var(--grafito-3); }

/* Sombras suaves y planas, sin destellos */
.hero__img, .dividido__media img { box-shadow: none; }


/* =====================================================================
   24. SIN CUADROS GRISES: azul Linalca y tonos muy claros
   ===================================================================== */
:root {
  --grafito:   #0068B3;   /* paneles destacados en azul Linalca */
  --grafito-2: #1A78BF;
  --grafito-3: #005A9C;
}
.barra__utilidad, .pie { background: #004677; }
.pie .pie__redes a { background: #0A5A94; border-color: #0A5A94; }
/* Botones dentro de paneles azules: blancos para que se distingan */
.seccion--grafito .btn--primario, .marca .btn--primario, .cierre .btn--primario, .contacto__canales .btn--primario, .comparativa__col--destacada .btn--primario {
  color: var(--azul); background: #fff; border-color: #fff;
}
.seccion--grafito .btn--primario:hover, .marca .btn--primario:hover, .cierre .btn--primario:hover { color: #00558F; background: #EAF3FB; border-color: #EAF3FB; }
.canales .ico { color: var(--azul); background: #fff; }
.seccion--grafito .vinetas .ico, .marca .vinetas .ico, .comparativa__col--destacada .vinetas .ico { color: var(--azul); background: #fff; }
.seccion--grafito .eyebrow, .marca .eyebrow, .cierre .eyebrow, .contacto__canales .eyebrow, .eyebrow--claro { color: #D6E8F7; }
.seccion--grafito .cifra__etiqueta { color: #D6E8F7; }
.caso__ficha dt { color: #D6E8F7; }
/* Iconos sobre fondos claros: celeste muy claro con icono azul */
.tarjeta__icono, .aviso-banda__icono, .sector__icono { color: var(--azul); background: #E6F0F9; }
.sector[open] .sector__icono { color: #fff; background: var(--azul); }
.seccion--grafito .tarjeta__icono { color: #fff; background: var(--grafito-3); }
.seccion--grafito .aviso-banda__icono { color: var(--azul); background: #fff; }
.seccion--claro .galeria--sellos .galeria__item figure, .seccion--gris .galeria--sellos .galeria__item figure { background: #fff; border: 1px solid var(--linea); }
.seccion--claro .galeria--sellos .galeria__item figure { background: #F2F7FC; border-color: transparent; }
.seccion--gris .galeria--sellos .galeria__item img { background: #EEF5FB; }

/* 25. LOGOS DE FABRICANTES (DaaS): grises que toman color al pasar el cursor */
.logos-rejilla--n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1080px; margin-inline: auto; gap: 16px; }
.logos-rejilla--color .logo-aliado { height: 120px; padding: 24px 30px; }
.logos-rejilla--color img { max-height: 60px; filter: grayscale(1); opacity: .55; transition: filter .35s ease, opacity .35s ease, transform .35s var(--curva); }
.logos-rejilla--color .logo-aliado:hover img, .logos-rejilla--color .logo-aliado:focus-within img { filter: grayscale(0); opacity: 1; transform: scale(1.06); }
.logos-rejilla--color .logo-aliado:hover { border-color: rgba(0, 104, 179, .35); }
@media (hover: none) { .logos-rejilla--color img { filter: none; opacity: 1; } }
@media (max-width: 760px) { .logos-rejilla--n8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logos-rejilla--color .logo-aliado { height: 96px; padding: 18px; } }

/* =====================================================================
   26. DISPOSITIVOS 360 IT — distribución de la página original
   ===================================================================== */
/* Portada en collage: imagen central y tarjetas flotantes por categoría */
.hero--collage .hero__media { padding: 48px 56px 40px; }
.hero--collage .hero__marco { display: none; }
.hero--collage .hero__media::before { content: ""; position: absolute; inset: 4% 2%; border-radius: 50%; border: 1px solid rgba(0, 104, 179, .18); box-shadow: 0 0 0 40px rgba(0, 104, 179, .04); }
.hero--collage .hero__img { position: relative; aspect-ratio: 4 / 4.4; max-width: 360px; margin-inline: auto; display: block; border-radius: 120px 28px 28px 28px; box-shadow: 0 30px 60px -30px rgba(0, 40, 80, .45); }
.flotante { position: absolute; z-index: 3; display: grid; width: 118px; padding: 6px; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px -18px rgba(0, 40, 80, .45); transition: transform .35s var(--curva); }
.flotante:hover { transform: translateY(-4px); }
.flotante img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 13px; }
.flotante em { position: absolute; left: 12px; bottom: 12px; padding: 3px 10px; border-radius: var(--pastilla); background: #fff; font-style: normal; font-size: .72rem; font-weight: 600; color: var(--tinta); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .25); }
.flotante--dato { width: 128px; padding: 16px 14px 14px; background: var(--azul); }
.flotante--dato strong { display: block; padding: 10px 0; border-radius: 10px; background: #fff; text-align: center; font-size: 1.15rem; font-weight: 700; color: var(--azul); }
.flotante--dato em { position: static; margin-top: 10px; background: transparent; box-shadow: none; padding: 0; color: #fff; text-align: center; font-size: .72rem; }
.flotante--1 { top: 2%; left: 4%; transform: rotate(-4deg); }
.flotante--2 { top: -2%; right: 18%; }
.flotante--3 { top: 30%; right: -2%; transform: rotate(4deg); }
.flotante--4 { bottom: 14%; left: -1%; transform: rotate(-3deg); }
.flotante--5 { bottom: -2%; right: 6%; }
.flotante--1:hover, .flotante--3:hover, .flotante--4:hover { transform: rotate(0) translateY(-4px); }

/* Tecnología para cada necesidad: tarjetas de imagen con fundido azul */
.tech { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.tech__texto .intro { margin-top: 16px; }
.tech__destacado { margin-top: 26px; padding: 20px 24px; border-left: 4px solid var(--azul); border-radius: 0 14px 14px 0; background: #fff; box-shadow: var(--sombra-1); color: var(--tinta); font-size: .95rem; }
.seccion--claro .tech__destacado { background: #F2F7FC; box-shadow: none; }
.tech__tarjetas { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 230px 230px; gap: 14px; }
.tech__tarjeta { position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; background: #DCE6EF; box-shadow: 0 15px 35px -18px rgba(10, 40, 80, .3); transition: transform .4s ease, box-shadow .4s ease; outline: none; }
.tech__tarjeta--grande { grid-row: span 2; }
.tech__tarjeta img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.tech__tarjeta::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 30, 50, .05) 25%, rgba(10, 30, 50, .72) 100%); transition: opacity .45s ease; }
.tech__tarjeta::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(135deg, rgba(0, 104, 179, .93), rgba(0, 104, 179, .62)); opacity: 0; transition: opacity .45s ease; }
.tech__contenido { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 22px; color: #fff; transition: transform .45s ease; }
.tech__num { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: .75rem; font-weight: 600; color: rgba(255, 255, 255, .85); }
.tech__num::before { content: ""; width: 22px; height: 2px; background: #fff; transition: width .35s ease, background-color .35s ease; }
.tech__tarjeta h3 { color: #fff; font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.2; }
.tech__desc { max-height: 0; overflow: hidden; opacity: 0; margin: 0; font-size: .88rem; color: rgba(255, 255, 255, .92); transform: translateY(10px); transition: max-height .45s ease, margin .45s ease, opacity .35s ease, transform .45s ease; }
.tech__mas { position: absolute; z-index: 4; top: 16px; right: 16px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55); color: #fff; font-size: 1.1rem; line-height: 1; transition: transform .35s ease, background-color .35s ease; }
.tech__tarjeta:hover, .tech__tarjeta:focus-visible { transform: translateY(-6px); box-shadow: 0 28px 60px -24px rgba(10, 40, 80, .45); }
.tech__tarjeta:hover img, .tech__tarjeta:focus-visible img { transform: scale(1.08); }
.tech__tarjeta:hover::after, .tech__tarjeta:focus-visible::after { opacity: 1; }
.tech__tarjeta:hover::before, .tech__tarjeta:focus-visible::before { opacity: .3; }
.tech__tarjeta:hover .tech__num::before, .tech__tarjeta:focus-visible .tech__num::before { width: 40px; background: var(--rojo); }
.tech__tarjeta:hover .tech__desc, .tech__tarjeta:focus-visible .tech__desc { max-height: 120px; margin-top: 10px; opacity: 1; transform: none; }
.tech__tarjeta:hover .tech__mas, .tech__tarjeta:focus-visible .tech__mas { transform: rotate(45deg); background: rgba(255, 255, 255, .15); }

/* Logos de marca por categoría: grises que toman color al pasar el cursor */
.pestanas__logos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pestanas__logos li { display: grid; place-items: center; width: 92px; height: 50px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--linea); transition: border-color .3s, transform .3s var(--curva); }
.pestanas__logos img { max-width: 100%; max-height: 30px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .35s ease, opacity .35s ease; }
.pestanas__logos li:hover { border-color: rgba(0, 104, 179, .4); transform: translateY(-2px); }
.pestanas__logos li:hover img { filter: none; opacity: 1; }

/* La tecnología adecuada: título a la izquierda, filas numeradas a la derecha */
.filas { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.filas__texto .intro { margin-top: 16px; }
.filas__lista { border-top: 1px solid var(--linea-2, rgba(0, 0, 0, .12)); }
.fila { display: grid; grid-template-columns: 76px minmax(0, 1fr) 40px; gap: 18px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--linea-2, rgba(0, 0, 0, .12)); }
.fila__num { font-size: 2.4rem; font-weight: 700; line-height: 1; color: #C9D6E2; transition: color .3s; }
.fila__titulo { font-size: 1.15rem; margin-bottom: 6px; transition: color .3s; }
.fila__texto { color: var(--texto-suave); font-size: .95rem; }
.fila__mas { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linea); color: var(--azul); transition: background-color .3s, color .3s, transform .35s; }
.fila:hover .fila__num, .fila:hover .fila__titulo { color: var(--azul); }
.fila:hover .fila__mas { background: var(--azul); color: #fff; border-color: var(--azul); transform: rotate(90deg); }

@media (hover: none) {
  .tech__tarjeta::after { opacity: .55; }
  .tech__desc { max-height: 120px; margin-top: 8px; opacity: 1; transform: none; }
  .pestanas__logos img { filter: none; opacity: 1; }
}
@media (max-width: 1100px) {
  .tech, .filas { grid-template-columns: 1fr; }
  .hero--collage .hero__media { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .hero--collage .hero__media { padding: 28px 20px 24px; }
  .flotante { width: 84px; padding: 4px; border-radius: 14px; }
  .flotante em { left: 8px; bottom: 8px; font-size: .62rem; padding: 2px 7px; }
  .flotante--dato { width: 96px; padding: 10px; }
  .flotante--3, .flotante--5 { display: none; }
  .tech__tarjetas { grid-template-columns: 1fr; grid-template-rows: none; }
  .tech__tarjeta { height: 240px; }
  .tech__tarjeta--grande { grid-row: auto; height: 300px; }
  .fila { grid-template-columns: 54px minmax(0, 1fr); }
  .fila__num { font-size: 1.8rem; }
  .fila__mas { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tech__tarjeta, .tech__tarjeta img, .flotante { transition: none; } }

/* 27. "La tecnología adecuada…": columna de texto más elegante */
.filas__texto { position: sticky; top: 130px; max-width: 460px; }
.filas__titulo { font-size: clamp(1.75rem, 2.6vw, 2.35rem); font-weight: 600; line-height: 1.18; letter-spacing: -.025em; color: var(--tinta); }
.filas__intro { margin-top: 20px; padding-left: 18px; border-left: 3px solid var(--azul); font-size: 1rem; line-height: 1.75; color: var(--texto-suave); }
.filas__acciones { margin-top: 28px; }
.filas .eyebrow { margin-bottom: 14px; }
@media (max-width: 1100px) { .filas__texto { position: static; max-width: 640px; } }

/* 28. Línea de marca (azul + rojo) solo en los rótulos más relevantes:
   portada de cada página, bloque "¿Qué es Linalca?", asesoría y contacto */
.hero .eyebrow::before, .marca .eyebrow::before, .filas .eyebrow::before, .contacto__canales .eyebrow::before {
  content: ""; display: inline-block; flex-shrink: 0; width: 28px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--azul) 0 70%, var(--rojo) 70%);
}
.hero--centrado .eyebrow--marca::before { display: inline-block; }
.marca .eyebrow::before, .contacto__canales .eyebrow::before { background: linear-gradient(90deg, #fff 0 70%, var(--rojo) 70%); }
.js .revelar .eyebrow::before { width: 0; transition: width .7s var(--curva) .15s; }
.js .revelar.es-visible .eyebrow::before { width: 28px; }
@media (prefers-reduced-motion: reduce) { .js .revelar .eyebrow::before { width: 28px; transition: none; } }

/* 29. Imágenes de encabezado: leve aumento al pasar el cursor */
.hero__img { filter: none; opacity: 1; transition: transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .7s ease; will-change: transform; }
.hero__media:hover .hero__img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .hero__img { transition: none; } .hero__media:hover .hero__img { transform: none; } }


/* =====================================================================
   30. SISTEMA TIPOGRÁFICO UNIFORME
   Títulos en Century Gothic; textos, menús, botones y formularios en Source Sans Pro.
   Escala: H1 3,4 rem · H2 2,5 rem · H3 1,25 rem · texto 1 rem (17 px) · apoyo 1,1 rem · pequeño 0,9 rem
   ===================================================================== */
html { font-size: 106.25%; }               /* 17 px de base */
body { font-family: var(--fuente); font-size: 1rem; line-height: 1.65; }
button, input, select, textarea, .btn, .menu__enlace, .submenu__enlace strong { font-family: var(--fuente); }

h1, h2, h3, h4, .hero__titulo, .titulo-seccion, .marca__titulo, .cierre__titulo, .filas__titulo, .contacto__titulo,
.contacto__canales-titulo, .aviso-banda__titulo, .comparativa__titulo, .pestanas__titulo, .caso__titulo, .tarjeta__titulo,
.paso__titulo, .fila__titulo, .evento__titulo, .articulo-tarjeta__titulo, .pie__titulo, .tech__tarjeta h3,
.cifra__valor, .hero__cifra dt, .marca__cifra dt, .hero__sello strong, .hero__numero strong, .fila__num, .paso__num,
.tarjeta__num, .evento__fecha span, .dividido__dato strong, .comparativa__vs, .buscador__etiqueta {
  font-family: var(--fuente-titulos); letter-spacing: -.01em;
}

/* H1: título de portada (igual en todas las páginas) */
.hero__titulo { font-size: clamp(2.1rem, 3.8vw, 3.4rem); font-weight: 700; line-height: 1.1; margin: 8px 0 20px; }
.hero__parrafo { font-size: 1.12rem; line-height: 1.7; }

/* H2: títulos de sección (todos del mismo tamaño) */
.titulo-seccion, .marca__titulo, .cierre__titulo, .filas__titulo, .contacto__canales-titulo,
.aviso-banda--cita .aviso-banda__titulo { font-size: clamp(1.75rem, 2.7vw, 2.45rem); font-weight: 700; line-height: 1.15; }
/* H2 secundario: títulos dentro de paneles */
.contacto__titulo, .aviso-banda__titulo, .comparativa__titulo, .pestanas__titulo, .caso__titulo { font-size: clamp(1.45rem, 2vw, 1.85rem); font-weight: 700; line-height: 1.2; }

/* H3: tarjetas y elementos de lista */
.tarjeta__titulo, .paso__titulo, .fila__titulo, .evento__titulo, .articulo-tarjeta__titulo, .tech__tarjeta h3,
.sector__nombre, .galeria__item figcaption strong { font-size: 1.22rem; font-weight: 700; line-height: 1.3; }
.pie__titulo { font-size: 1.05rem; font-weight: 700; }

/* Rótulo sobre títulos */
.eyebrow { font-family: var(--fuente); font-size: .95rem; font-weight: 600; letter-spacing: .01em; }

/* Texto de apoyo e intro */
.intro, .marca__parrafo, .cierre__parrafo, .filas__intro, .pestanas__intro, .contacto__canales-texto,
.dividido__texto > p:not([class]), .aviso-banda__texto > p:not(.eyebrow) { font-size: 1.1rem; line-height: 1.7; }

/* Texto de cuerpo */
.tarjeta__texto, .paso__texto, .fila__texto, .evento__texto, .articulo-tarjeta__resumen, .caso__bloque p, .vinetas,
.legal__texto p, .legal__texto li, .contacto__intro, .tech__desc, .galeria__item figcaption span { font-size: 1rem; line-height: 1.65; }
.articulo__cuerpo > p { font-size: 1.12rem; line-height: 1.8; }

/* Texto pequeño y etiquetas */
.tarjeta__etiqueta, .comparativa__etiqueta, .cifra__etiqueta, .migas, .articulo-tarjeta__meta, .sector__total,
.campo label, .check, .canales span, .pie__contacto li, .pie__col a, .pie__barra, .tarjeta__marcas em, .pestanas__marcas em,
.submenu__enlace span, .hero__cifra dd, .marca__cifra dd, .cifra__texto { font-size: .92rem; }
.tarjeta__etiqueta, .comparativa__etiqueta { font-weight: 600; letter-spacing: .01em; }

/* Cifras (mismo tamaño en todo el sitio) */
.cifra__valor, .hero__cifra dt, .marca__cifra dt { font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 700; line-height: 1.05; }
.fila__num, .paso__num { font-weight: 700; }

/* Menú, botones y formularios */
.menu__enlace { font-size: .95rem; font-weight: 600; }
.submenu__enlace strong { font-size: 1rem; font-weight: 600; }
.btn { font-size: 1rem; font-weight: 600; }
.btn--sm, .btn--tienda { font-size: .95rem; }
.campo input, .campo select, .campo textarea { font-size: 1rem; }

@media (min-width: 1680px) { html { font-size: 112.5%; } }
@media (min-width: 2200px) { html { font-size: 121%; } }
@media (max-width: 760px) { html { font-size: 100%; } }

/* 31. Reconocimientos: imágenes en blanco y negro que pasan a color al pasar el cursor (solo esta página) */
.pagina-reconocimientos-linalca .galeria__item img { filter: grayscale(1); transition: filter .6s ease, transform .6s var(--curva); }
.pagina-reconocimientos-linalca .galeria__item figure:hover img,
.pagina-reconocimientos-linalca .galeria__item figure:focus-within img { filter: grayscale(0); }
@media (hover: none) { .pagina-reconocimientos-linalca .galeria__item img { filter: none; } }

/* =====================================================================
   32. TEXTO EN GRIS OSCURO (SIN NEGRO) Y LOGOS DE MARCAS
   ===================================================================== */
:root {
  --tinta: #555659;   /* títulos: gris oscuro */
  --texto: #646568;   /* cuerpo: gris oscuro */
}
body { color: var(--texto); }
h1, h2, h3, h4, h5, h6 { color: var(--tinta); }

/* Logos de marcas en pestañas: pequeños, en gris y a color al pasar el cursor */
.pestanas__logos { list-style: none; padding: 0; }
.pestanas__logos li { width: 96px; height: 52px; }
.pestanas__logos img { max-height: 28px; }
.pestanas__logos li.logo-texto span { font-family: var(--fuente-titulos); font-size: .82rem; font-weight: 600; color: var(--texto-suave); letter-spacing: -.01em; transition: color .35s ease; }
.pestanas__logos li.logo-texto:hover span { color: var(--azul); }

/* =====================================================================
   33. CONTENIDO ESCRITO EN EL EDITOR DE WORDPRESS (entradas nuevas)
   ===================================================================== */
.articulo--wp .articulo__cuerpo ul, .articulo--wp .articulo__cuerpo ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.articulo--wp .articulo__cuerpo ul { list-style: disc; }
.articulo--wp .articulo__cuerpo ol { list-style: decimal; }
.articulo--wp .articulo__cuerpo li { margin-bottom: .4em; }
.articulo--wp .articulo__cuerpo li::marker { color: var(--azul); }
.articulo--wp .articulo__cuerpo img { max-width: 100%; height: auto; border-radius: var(--radio-lg, 16px); }
.articulo--wp .articulo__cuerpo a { text-decoration: underline; text-underline-offset: 3px; }
.articulo--wp .articulo__cuerpo blockquote { margin: 1.4em 0; padding: 14px 22px; border-left: 4px solid var(--azul); background: #F3F8FC; border-radius: 0 12px 12px 0; }
.buscador__resultados--pagina { max-width: 820px; margin: 0 auto; }