/*
Theme Name: Soft Control
Theme URI: https://www.soft-control.net
Author: Soft Control Informática
Description: Tema a medida para Soft Control Informática. Diseño "Soft Structuralism" claro con azul y magenta de marca, tipografías autoalojadas, bento asimétrico, burbujas ambientales y microinteracciones suaves.
Version: 4.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: soft-control
*/

/* ==========================================================================
   1. Fuentes autoalojadas (variables, subset latin)
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/outfit-latin.woff2") format("woff2");
}

/* ==========================================================================
   2. Tokens
   --------------------------------------------------------------------------
   Un acento principal azul con magenta de marca racionado. Tema claro, bloqueado para toda la
   página; el único bloque oscuro es el cierre (CTA + pie), una vez.
   Sistema de radios documentado: interactivo = píldora (999px),
   contenedor exterior 26px, interior anidado 18px, chips 10px.
   ========================================================================== */

:root {
  /* Paleta extraída de la identidad real (logo de pera: dos azules + magenta) */
  --paper: #ffffff;
  --paper-2: #f1f5f9;
  --ink: #0f1c2a;
  --body-c: #41505f;
  --muted: #5d6c7b;
  --line: #e3e9ef;

  --accent: #1566c4;
  --accent-deep: #0f4f9c;
  --magenta: #cf2277;
  --tint: #e9f1fb;
  --tint-m: #fce9f3;

  --dark: #0a1624;
  --dark-2: #10233a;
  --on-dark: #c4d3e3;
  --on-dark-muted: #8ba1b8;

  --r-pill: 999px;
  --r-outer: 26px;
  --r-inner: 18px;
  --r-chip: 10px;

  --shadow-soft: 0 24px 70px -24px rgba(10, 22, 36, 0.16);
  --shadow-float: 0 40px 110px -30px rgba(10, 22, 36, 0.22);

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --sans: "Outfit", "Segoe UI", system-ui, sans-serif;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  --container: 1200px;
  --sec: clamp(64px, 7vw, 92px);
  --sec-compact: clamp(42px, 4.5vw, 62px);
}

/* ==========================================================================
   3. Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--body-c);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

a:hover {
  color: var(--accent-deep);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  color: var(--ink);
  margin: 0 0 0.45em;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.45rem, 4.8vw, 3.8rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3vw, 2.45rem); font-weight: 800; }
h3 { font-size: 1.22rem; line-height: 1.25; }
h4 { font-size: 1.05rem; line-height: 1.35; }

h1 em, h2 em {
  font-style: italic;
  font-weight: 800;
  color: var(--magenta);
  line-height: 1.12;
  padding-bottom: 0.06em;
}

p { margin: 0 0 1.15em; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 36px);
}

.section {
  padding: var(--sec) 0;
}

/* La última sección no duplica un gran vacío con el margen del cierre. */
.site-main > section:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
}

.site-main > article:last-of-type,
.site-main > div:not(.ambient-bubbles):last-of-type {
  margin-bottom: 0;
}

.site-main > section:last-of-type > .container > :last-child,
.site-main > article:last-of-type > .container > :last-child,
.site-main > div:not(.ambient-bubbles):last-of-type > .container > :last-child {
  margin-bottom: 0;
}

.section--tint {
  background: #fff;
}

.site-main {
  background-color: #fff;
}

.site-main > section {
  background-color: transparent;
}

/* Los degradados ambientales de los laterales se mantienen mediante
   .site-main::before y .site-main::after, sin crear franjas horizontales. */

.lead {
  font-size: clamp(1.04rem, 1.35vw, 1.17rem);
  font-weight: 300;
  color: var(--body-c);
  max-width: 56ch;
}

/* Cabecera de sección: alineada a la izquierda, sin split-header */
.sec-head {
  max-width: 640px;
  margin-bottom: clamp(34px, 4.5vw, 54px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--tint);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  margin-bottom: 18px;
}

/* ==========================================================================
   4. Botones (píldora, icono anidado en su propio círculo)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  padding: 8px 8px 8px 26px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.5s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.5s var(--ease);
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.98);
}

.btn__orb {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.5s var(--ease);
}

.btn:hover .btn__orb {
  transform: translate(2px, -1px) scale(1.05);
}

.btn--solid {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-soft);
}

.btn--solid:hover {
  background: #172a3d;
  color: var(--paper);
  transform: translateY(-2px);
}

.btn--solid .btn__orb {
  background: rgba(255, 255, 255, 0.14);
  color: var(--paper);
}

.btn--accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 18px 40px -14px rgba(21, 102, 196, 0.5);
}

.btn--accent:hover {
  background: var(--accent-deep);
  color: #fff;
  transform: translateY(-2px);
}

.btn--accent .btn__orb {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.btn--line {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  padding: 8px 8px 8px 26px;
}

.btn--line:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.btn--line .btn__orb {
  background: var(--paper-2);
  color: var(--ink);
}

.btn--light {
  background: var(--paper);
  color: var(--ink);
}

.btn--light:hover {
  background: #fff;
  color: var(--ink);
  transform: translateY(-2px);
}

.btn--light .btn__orb {
  background: var(--tint);
  color: var(--accent);
}

/* Variante sin orbe para acciones secundarias pequeñas */
.btn--plain {
  padding: 14px 26px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--ink);
}

.text-link svg {
  transition: transform 0.4s var(--ease);
}

.text-link:hover {
  color: var(--accent);
}

.text-link:hover svg {
  transform: translateX(3px);
}

/* ==========================================================================
   5. Navegación flotante (island)
   ========================================================================== */

.site-header {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
}

.site-header__inner {
  pointer-events: auto;
  max-width: calc(var(--container) - 40px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px 10px 22px;
  border-radius: var(--r-pill);
  background: rgba(251, 251, 249, 0.82);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(10, 22, 36, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 40px -18px rgba(10, 22, 36, 0.25);
  transition: box-shadow 0.5s var(--ease), background 0.5s var(--ease);
}

@media (max-width: 1240px) {
  .site-header__inner { margin: 0 16px; }
}

.site-header.is-scrolled .site-header__inner {
  background: rgba(251, 251, 249, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 16px 50px -18px rgba(10, 22, 36, 0.35);
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  line-height: 1;
  flex: 0 0 auto;
}

.brand:hover { color: var(--ink); }

/* Un único logo, siempre centrado. El archivo puede ser vertical, cuadrado o
   panorámico: nunca deforma ni modifica la altura de la cabecera. */
.brand--header {
  width: 92px;
  min-width: 92px;
  height: 52px;
}

.brand__symbol-slot {
  width: 68px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.brand__logo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}

.brand--footer {
  justify-content: flex-start;
  width: fit-content;
  margin-bottom: 16px;
}

.brand__symbol-slot--footer {
  width: 150px;
  height: 104px;
  justify-content: flex-start;
}

.brand__symbol-slot--footer .brand__logo {
  object-position: left center;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  display: block;
  padding: 9px 14px;
  font-size: 0.94rem;
  font-weight: 450;
  color: var(--body-c);
  border-radius: var(--r-pill);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.main-nav a:hover {
  color: var(--ink);
  background: rgba(10, 22, 36, 0.05);
}

.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
  color: var(--accent);
  font-weight: 600;
}


/* Área de clientes: desplegable con los dos portales. */
.main-nav .menu-item-area-clientes {
  position: relative;
  overflow: visible;
}

.clients-menu-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  color: var(--body-c);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 450;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.clients-menu-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.35s var(--ease);
}

.clients-menu-toggle:hover,
.clients-menu-toggle:focus-visible,
.menu-item-area-clientes.is-open > .clients-menu-toggle {
  color: var(--ink);
  background: rgba(10, 22, 36, 0.05);
}

.menu-item-area-clientes.is-open > .clients-menu-toggle::after,
.menu-item-area-clientes:focus-within > .clients-menu-toggle::after {
  transform: translateY(2px) rotate(225deg);
}

.main-nav .clients-submenu {
  position: absolute;
  top: calc(100% - 2px);
  right: 0;
  z-index: 30;
  width: 286px;
  display: grid;
  gap: 4px;
  padding: 14px 10px 10px;
  margin: 0;
  border: 1px solid rgba(10, 22, 36, 0.08);
  border-radius: 18px;
  background: rgba(251, 251, 249, 0.97);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 22px 48px -24px rgba(10, 22, 36, 0.42);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.25s var(--ease), transform 0.35s var(--ease), visibility 0s 0.35s;
}

.main-nav .menu-item-area-clientes:hover > .clients-submenu,
.main-nav .menu-item-area-clientes:focus-within > .clients-submenu,
.main-nav .menu-item-area-clientes.is-open > .clients-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.25s var(--ease), transform 0.35s var(--ease);
}

.main-nav .clients-submenu li {
  width: 100%;
}

.main-nav .clients-submenu a {
  width: 100%;
  padding: 11px 13px;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.35;
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-cta .btn {
  font-size: 0.92rem;
  padding: 6px 6px 6px 20px;
}

.header-cta .btn__orb {
  width: 34px;
  height: 34px;
}

/* Hamburguesa que muta a X */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  background: var(--ink);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle i {
  position: absolute;
  left: 13px;
  right: 13px;
  height: 1.8px;
  border-radius: 2px;
  background: var(--paper);
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}

.nav-toggle i:nth-child(1) { top: 17px; }
.nav-toggle i:nth-child(2) { top: 25px; }

.nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Overlay móvil a pantalla completa con revelado escalonado */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(251, 251, 249, 0.9);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  display: grid;
  align-content: center;
  padding: 90px clamp(28px, 8vw, 60px) 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s 0.5s;
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--ease);
}

.nav-overlay ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.nav-overlay li {
  overflow: hidden;
}

.nav-overlay li a {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.7rem, 6.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 6px 0;
  transform: translateY(110%);
  transition: transform 0.7s var(--ease);
}

.nav-overlay.is-open li a {
  transform: translateY(0);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.nav-overlay__foot {
  margin-top: 40px;
  display: grid;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--muted);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease) 0.35s, transform 0.6s var(--ease) 0.35s;
}

.nav-overlay.is-open .nav-overlay__foot {
  opacity: 1;
  transform: none;
}

@media (max-width: 1020px) {
  .nav-overlay .menu-item-area-clientes {
    overflow: visible;
  }

  .nav-overlay .clients-menu-toggle {
    width: 100%;
    justify-content: flex-start;
    padding: 6px 0;
    border-radius: 0;
    font-family: var(--display);
    font-size: clamp(1.7rem, 6.5vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
  }

  .nav-overlay .clients-menu-toggle:hover,
  .nav-overlay .clients-menu-toggle:focus-visible,
  .nav-overlay .menu-item-area-clientes.is-open > .clients-menu-toggle {
    background: transparent;
    color: var(--accent);
  }

  .nav-overlay .clients-submenu {
    position: static;
    display: none;
    width: auto;
    padding: 6px 0 8px 18px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .nav-overlay .menu-item-area-clientes.is-open > .clients-submenu {
    display: grid;
    gap: 2px;
  }

  .nav-overlay .clients-submenu li {
    overflow: visible;
  }

  .nav-overlay .clients-submenu a,
  .nav-overlay.is-open .clients-submenu a {
    padding: 7px 0;
    font-family: var(--sans);
    font-size: 1.03rem;
    font-weight: 500;
    color: var(--body-c);
    transform: none;
    transition: color 0.3s var(--ease);
  }

  .nav-overlay .clients-submenu a:hover {
    color: var(--accent);
  }
}

@media (max-width: 1020px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
}

@media (min-width: 1021px) {
  .nav-overlay { display: none; }
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
  position: relative;
  padding: clamp(126px, 13vw, 168px) 0 clamp(54px, 6.5vw, 82px);
}

.hero__grid { position: relative; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(38px, 5vw, 68px);
  align-items: center;
}

.hero .lead {
  margin: 22px 0 30px;
}

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
}

/* Marco "double-bezel": lámina exterior + núcleo interior concéntrico */
.frame {
  background: rgba(10, 22, 36, 0.045);
  border: 1px solid rgba(10, 22, 36, 0.07);
  border-radius: var(--r-outer);
  padding: 8px;
  box-shadow: var(--shadow-float);
}

.frame__core {
  border-radius: var(--r-inner);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* Los huecos mantienen su forma. La fotografía se recorta por los bordes,
   pero nunca se estira ni altera el tamaño de la sección. */
.media-slot {
  width: 100%;
}

.media-slot--portrait {
  aspect-ratio: 4 / 5;
}

.media-slot--landscape {
  aspect-ratio: 4 / 3;
}

.media-slot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Duotono: foto en grises + velo azul multiplicado */
.duo img {
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(21, 102, 196, 0.32), rgba(10, 22, 36, 0.5));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Fotografía de marca a todo color (sin duotono) */
.full-color img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.figure-caption {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--muted);
  padding-left: 6px;
}

/* Franja de cifras bajo el hero */
.figures {
  position: relative;
  border: 0;
  padding: clamp(26px, 3vw, 36px) 0;
}

.figures::before,
.figures::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(var(--container), calc(100% - 72px));
  height: 1px;
  background: var(--line);
  transform: translateX(-50%);
  pointer-events: none;
}

.figures::before { top: 0; }
.figures::after { bottom: 0; }

@media (max-width: 760px) {
  .figures::before,
  .figures::after {
    width: calc(100% - 40px);
  }
}

.figures__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.figure strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}

.figure span {
  font-size: 0.92rem;
  color: var(--muted);
}

@media (max-width: 760px) {
  .figures__row { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
}

/* ==========================================================================
   7. Bento asimétrico
   ========================================================================== */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.cell {
  border-radius: var(--r-outer);
  border: 1px solid var(--line);
  background: #fff;
  padding: clamp(24px, 2.5vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

a.cell { color: var(--body-c); }

a.cell:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
}

.cell p {
  margin: 0;
  font-size: 0.97rem;
}

.cell h3 { margin: 0; }

.cell__icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--accent);
  margin-bottom: 8px;
}

.cell__go {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
}

a.cell:hover .cell__go { color: var(--accent); }

.cell--6 { grid-column: span 6; }
.cell--5 { grid-column: span 5; }
.cell--7 { grid-column: span 7; }
.cell--4 { grid-column: span 4; }
.cell--8 { grid-column: span 8; }
.cell--12 { grid-column: span 12; }

/* Celda protagonista con foto */
.cell--hero {
  grid-row: span 2;
  background: var(--dark-2);
  border: none;
  color: var(--on-dark);
  overflow: hidden;
  min-height: 420px;
  justify-content: flex-end;
}

.cell--hero .cell__media {
  position: absolute;
  inset: 0;
}

.cell--hero .cell__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.9);
}

.cell--hero .cell__media.is-color img {
  filter: none;
}

.cell--hero .cell__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 22, 36, 0.12) 20%, rgba(10, 22, 36, 0.88) 78%);
}

.cell--hero > *:not(.cell__media) { position: relative; }

.cell--hero h3 {
  color: #fff;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

.cell--hero p { color: var(--on-dark); font-size: 1.02rem; max-width: 46ch; }

.cell--tint {
  background: var(--tint);
  border-color: transparent;
}

.cell--accent {
  background: var(--accent);
  border: none;
  color: #d3e5fa;
}

.cell--accent h3 { color: #fff; }
.cell--accent p { color: #d3e5fa; }
.cell--accent .cell__go { color: #fff; }
.cell--accent .cell__icon { background: rgba(255, 255, 255, 0.16); color: #fff; }

@media (max-width: 980px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .cell--4, .cell--5, .cell--6, .cell--7, .cell--8 { grid-column: span 1; }
  .cell--12, .cell--hero { grid-column: span 2; }
  .cell--hero { min-height: 380px; }
}

@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .cell--12, .cell--hero, .cell--4, .cell--5, .cell--6, .cell--7, .cell--8 { grid-column: span 1; }
}

/* ==========================================================================
   8. Split editorial
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5.5vw, 68px);
  align-items: center;
}

.split--narrow-media { grid-template-columns: 1.1fr 0.9fr; }

@media (max-width: 900px) {
  .split, .split--narrow-media { grid-template-columns: 1fr; }
}

/* Lista editorial sin tarjetas */
.feature-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
}

.feature-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
}

.feature-list .fl-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--accent);
}

.feature-list h4 { margin: 0 0 3px; }

.feature-list p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  .feature-list { grid-template-columns: 1fr; }
}

/* Item numerado en prosa (pasos sin chips "01/02/03") */
.flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  counter-reset: none;
}

.flow div h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}

.flow div p {
  margin: 0;
  font-size: 0.96rem;
}

@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   9. Tablas y precios
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-outer);
  background: #fff;
}

table.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
  min-width: 560px;
}

.sc-table th {
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 18px 26px;
  border-bottom: 1px solid var(--line);
}

.sc-table td {
  padding: 20px 26px;
  color: var(--body-c);
  vertical-align: top;
}

.sc-table tbody tr + tr td { border-top: 1px solid var(--line); }

.sc-table td strong { color: var(--ink); font-weight: 600; }

.sc-table .amount {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--accent);
  white-space: nowrap;
  letter-spacing: -0.02em;
}

/* Tarjeta de precio destacada */
.price-card {
  border-radius: var(--r-outer);
  border: 1px solid var(--line);
  background: #fff;
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price-card .amount {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.price-card .amount small {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}

.price-card h3 { font-size: 1.12rem; margin: 0; }
.price-card p { margin: 0; font-size: 0.94rem; }

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 940px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .price-grid { grid-template-columns: 1fr; } }

/* Lista compacta agrupada (sin hairline en cada fila) */
.compact-list {
  columns: 2;
  column-gap: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compact-list li {
  break-inside: avoid;
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  font-size: 0.98rem;
}

.compact-list li strong { color: var(--ink); font-weight: 600; }

.compact-list li .mark { color: var(--accent); flex-shrink: 0; transform: translateY(2px); }

@media (max-width: 700px) { .compact-list { columns: 1; } }

/* ==========================================================================
   10. Bloque oscuro de cierre (único cambio de tema, una vez por página)
   ========================================================================== */

.closing {
  background: var(--dark);
  color: var(--on-dark);
  border-radius: 0;
  margin-top: clamp(26px, 2.6vw, 38px);
}

.closing--compact {
  margin-top: clamp(26px, 2.6vw, 38px);
}

.closing__cta {
  padding: clamp(62px, 6.5vw, 88px) 0 clamp(48px, 5vw, 68px);
  text-align: left;
}

.closing__cta h2 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.15rem);
  max-width: 15ch;
}

.closing__cta .lead {
  color: var(--on-dark);
  margin-bottom: 32px;
}

.closing__cta .phone {
  font-weight: 500;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* ==========================================================================
   11. Pie (vive dentro del bloque oscuro)
   ========================================================================== */

.site-footer {
  padding: 0 0 36px;
  font-size: 0.95rem;
  color: var(--on-dark-muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(30px, 4vw, 44px);
  padding: clamp(46px, 5vw, 58px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grid--compact {
  border-top: 0;
  padding-top: clamp(50px, 5.5vw, 72px);
}

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer .brand { color: #fff; }
.site-footer .brand:hover { color: #fff; }

.site-footer h4 {
  font-family: var(--sans);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.site-footer a { color: var(--on-dark-muted); }
.site-footer a:hover { color: #fff; }

.footer-note {
  margin-top: 24px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--on-dark-muted);
  max-width: 40ch;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 8px 0 28px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 7px 15px 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: var(--on-dark-muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.88rem;
  font-weight: 500;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}

.footer-social a:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.075);
  transform: translateY(-2px);
}

.footer-social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

.footer-social__icon--facebook { background: #1877f2; font-size: 1rem; }
.footer-social__icon--whatsapp { background: #25d366; font-size: 0.74rem; }
.footer-social__icon--linkedin { background: #0a66c2; font-size: 0.72rem; }
.footer-social__icon--instagram {
  background: radial-gradient(circle at 30% 110%, #ffd600 0 18%, #ff7a00 28%, #ff0169 52%, #d300c5 72%, #7638fa 100%);
}

.footer-social__icon--instagram svg {
  display: block;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
}

.footer-bottom ul {
  display: flex;
  gap: 22px;
}

/* ==========================================================================
   12. Formularios
   ========================================================================== */

.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-outer);
  box-shadow: var(--shadow-soft);
  padding: clamp(26px, 3vw, 38px);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field { display: flex; flex-direction: column; gap: 8px; }

.form-field--full { grid-column: 1 / -1; }

.form-field label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  width: 100%;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(21, 102, 196, 0.13);
  background: #fff;
}

.form-notice {
  border-radius: 14px;
  padding: 15px 19px;
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 22px;
}

.form-notice--ok { background: var(--tint); color: var(--accent-deep); }
.form-notice--error { background: #fdecec; color: #a53d3d; }

@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.section--contact {
  padding-bottom: 0;
}

.contact-aside { display: grid; gap: 14px; align-content: start; }

.contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--r-inner);
  padding: 18px 20px;
}

.contact-item .ci-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--accent);
  flex-shrink: 0;
}

.contact-item h4 { margin: 0 0 3px; }
.contact-item p { margin: 0; font-size: 0.94rem; }


.contact-item--address {
  align-items: flex-start;
}

.address-link {
  display: inline-grid;
  gap: 7px;
  color: var(--body-c);
  line-height: 1.5;
}

.address-link > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 0.83rem;
  font-weight: 600;
}

.address-link:hover {
  color: var(--ink);
}

.address-link:hover > span {
  color: var(--accent-deep);
}

/* ==========================================================================
   13. Blog
   ========================================================================== */

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }

.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-outer);
  overflow: hidden;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
}

.post-card__thumb {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
}

.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.post-card:hover .post-card__thumb img {
  transform: scale(1.04);
}

.post-card__body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.post-card__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--muted);
}

.post-card__meta .cat {
  color: var(--accent);
  font-weight: 600;
}

.post-card h3 { font-size: 1.15rem; margin: 0; }

.post-card h3 a { color: var(--ink); }
.post-card h3 a:hover { color: var(--accent); }

.post-card p { margin: 0; font-size: 0.94rem; flex: 1; }

/* Entrada individual */
.entry { max-width: 740px; margin: 0 auto; }

.entry-header { margin-bottom: 44px; }

.entry-content { font-size: 1.1rem; }

.entry-content h2 { margin-top: 1.6em; font-size: 1.7rem; }
.entry-content h3 { margin-top: 1.4em; }
.entry-content img { border-radius: var(--r-inner); }

.entry-content blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.6em 0;
  padding: 0.3em 0 0.3em 1.5em;
  color: var(--ink);
  font-weight: 450;
}

/* Cabecera de página interior */
.page-hero {
  padding: clamp(126px, 13vw, 170px) 0 clamp(32px, 4vw, 50px);
}

.page-hero .sec-head { margin-bottom: 0; max-width: 760px; }

/* Píldoras de categorías del blog */
.cat-pills-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
}

.cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 auto;
}

.cat-pills__arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 24px -18px rgba(10, 22, 36, 0.35);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), opacity 0.25s var(--ease), border-color 0.25s var(--ease);
  flex: 0 0 auto;
}

.cat-pills__arrow:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -18px rgba(10, 22, 36, 0.45);
}

.cat-pills__arrow:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.cat-pills a {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--body-c);
  background: #fff;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}

.cat-pills a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.cat-pills a.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Paginación */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 56px;
}

.pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--body-c);
  background: #fff;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.pagination .page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.pagination a.page-numbers:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ==========================================================================
   14. Animación de entrada (pesada, con blur, bezier propio)
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .nav-overlay li a { transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.15s !important; }
}

/* ==========================================================================
   14a. Burbujas de marca (los puntos del logo, danzando)
   --------------------------------------------------------------------------
   Eco de los puntos de la pera del logo: círculos sólidos en los tres
   colores de marca que flotan suavemente. Solo transform/opacity, se
   detienen con prefers-reduced-motion.
   ========================================================================== */

.has-bubbles {
  position: relative;
  overflow: hidden;
}

.bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.has-bubbles > .container,
.hero .container {
  position: relative;
  z-index: 1;
}

.bubbles i {
  position: absolute;
  border-radius: 50%;
  opacity: var(--o, 0.85);
  animation: sc-float var(--d, 9s) ease-in-out var(--delay, 0s) infinite alternate;
  will-change: transform;
}

.bubbles .b-navy { background: #1f4a6e; }
.bubbles .b-blue { background: #2077c8; }
.bubbles .b-magenta { background: #cf2277; }

@keyframes sc-float {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(var(--dx, 12px), var(--dy, -30px)) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .bubbles i { animation: none; }
}

@media (max-width: 700px) {
  .bubbles i { display: none; }
  .bubbles i:nth-child(-n + 3) { display: block; }
}

/* ==========================================================================
   14b. Marquee de la suite (máximo uno por página)
   ========================================================================== */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  background: #fff;
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: sc-marquee 36s linear infinite;
}

.marquee span {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Los tres colores del logo, en ciclo: tinta azulada, azul, magenta */
.marquee span:nth-of-type(3n + 1) { color: var(--ink); }
.marquee span:nth-of-type(3n + 2) { color: var(--accent); }
.marquee span:nth-of-type(3n) { color: var(--magenta); }

.marquee img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  object-position: center;
  flex: 0 0 30px;
}

@keyframes sc-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ==========================================================================
   14c. Manifiesto (declaración tipográfica a lo grande)
   ========================================================================== */

.statement {
  font-family: var(--display);
  font-size: clamp(2.1rem, 5.6vw, 4.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 21ch;
  text-wrap: balance;
  margin: 0;
}

.statement em {
  font-style: italic;
  color: var(--magenta);
}

.statement-foot {
  margin-top: 36px;
  max-width: 52ch;
}

/* ========================================================================== 
   14d. Proyecto destacado
   ========================================================================== */

.project-case-section {
  padding-top: clamp(44px, 6vw, 72px);
  padding-bottom: clamp(44px, 6vw, 72px);
}

.applications-latest-project {
  padding-top: 0;
}

.project-case {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid rgba(21, 102, 196, 0.13);
  border-radius: var(--r-outer);
  background:
    radial-gradient(circle at 92% 8%, rgba(207, 34, 119, 0.11), transparent 29%),
    linear-gradient(135deg, #ffffff 0%, rgba(225, 238, 252, 0.88) 100%);
  box-shadow: 0 28px 70px -52px rgba(15, 79, 156, 0.62);
}

.project-case::after {
  content: "";
  position: absolute;
  right: -54px;
  bottom: -72px;
  width: 190px;
  height: 190px;
  border: 34px solid rgba(21, 102, 196, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.project-case__intro,
.project-case__features {
  position: relative;
  z-index: 1;
}

.project-case__intro h2 {
  max-width: 16ch;
}

.project-case__intro .lead {
  margin-bottom: 28px;
}

.project-case__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.project-case__feature {
  min-height: 150px;
  padding: 22px;
  border: 1px solid rgba(10, 22, 36, 0.08);
  border-radius: calc(var(--r-inner) + 2px);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}

.project-case__feature:hover {
  transform: translateY(-4px);
  border-color: rgba(21, 102, 196, 0.2);
  box-shadow: 0 18px 38px -30px rgba(15, 79, 156, 0.7);
}

.project-case__icon {
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--accent);
  background: var(--tint);
}

.project-case__feature h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
}

.project-case__feature p {
  margin: 0;
  color: var(--muted);
  font-size: 0.91rem;
  line-height: 1.55;
}

@media (max-width: 940px) {
  .project-case {
    grid-template-columns: 1fr;
  }

  .project-case__intro h2 {
    max-width: 22ch;
  }
}

@media (max-width: 620px) {
  .project-case {
    padding: 26px 20px;
  }

  .project-case__features {
    grid-template-columns: 1fr;
  }

  .project-case__feature {
    min-height: 0;
  }
}


/* ========================================================================== 
   14e. Inteligencia artificial
   ========================================================================== */

.ai-feature-section {
  padding-bottom: clamp(44px, 6vw, 72px);
}

.ai-showcase {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(34px, 5vw, 70px);
  align-items: center;
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid rgba(207, 34, 119, 0.14);
  border-radius: var(--r-outer);
  background:
    radial-gradient(circle at 6% 92%, rgba(21, 102, 196, 0.12), transparent 30%),
    radial-gradient(circle at 94% 8%, rgba(207, 34, 119, 0.13), transparent 30%),
    #fff;
  box-shadow: 0 28px 70px -54px rgba(10, 22, 36, 0.55);
}

.ai-showcase__intro,
.ai-showcase__features {
  position: relative;
  z-index: 1;
}

.ai-showcase__title-row {
  display: block;
}

.ai-showcase__title-row h2 {
  max-width: 18ch;
  margin: 0;
}


.ai-showcase__intro .lead {
  margin: 24px 0 18px;
}

.ai-showcase__more {
  display: inline-flex;
  margin: 0;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  color: var(--accent-deep);
  background: var(--tint);
  font-size: 0.9rem;
  font-weight: 600;
}

.ai-showcase__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ai-showcase__feature {
  min-height: 158px;
  padding: 22px;
  border: 1px solid rgba(10, 22, 36, 0.08);
  border-radius: calc(var(--r-inner) + 2px);
  background: rgba(255, 255, 255, 0.82);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}

.ai-showcase__feature:hover {
  transform: translateY(-4px);
  border-color: rgba(207, 34, 119, 0.2);
  box-shadow: 0 18px 38px -30px rgba(207, 34, 119, 0.58);
}

.ai-showcase__feature > span {
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--accent);
  background: var(--tint);
}

.ai-showcase__feature h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
}

.ai-showcase__feature p {
  margin: 0;
  color: var(--muted);
  font-size: 0.91rem;
  line-height: 1.5;
}

@media (max-width: 940px) {
  .ai-showcase {
    grid-template-columns: 1fr;
  }

  .ai-showcase__title-row h2 {
    max-width: 22ch;
  }
}

@media (max-width: 620px) {
  .ai-showcase {
    padding: 26px 20px;
  }

  .ai-showcase__features {
    grid-template-columns: 1fr;
  }

  .ai-showcase__feature {
    min-height: 0;
  }

  .ai-showcase__title-row {
    display: block;
  }

}

/* ==========================================================================
   14d. Franja de logos institucionales (solo logos, sin etiquetas)
   ========================================================================== */

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 5vw, 72px);
  padding: 30px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.logo-strip img {
  width: clamp(130px, 18vw, 230px);
  height: 58px;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
}

/* ==========================================================================
   15. Utilidades y WordPress
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  border-radius: var(--r-pill);
}

.skip-link:focus {
  left: 12px;
  color: var(--paper);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.text-center { text-align: center; }
.mt-40 { margin-top: 40px; }
.mt-64 { margin-top: 64px; }

.wp-block-image img { border-radius: var(--r-inner); }


/* ==========================================================================
   16. Capa ambiental y microinteracciones (v2.1)
   ========================================================================== */

.site-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #fff;
  background-image:
    radial-gradient(circle at 104% 15%, rgba(32, 119, 200, 0.10) 0, rgba(32, 119, 200, 0.045) 20%, transparent 39%),
    radial-gradient(circle at -8% 36%, rgba(207, 34, 119, 0.095) 0, rgba(207, 34, 119, 0.04) 21%, transparent 40%),
    radial-gradient(circle at 106% 57%, rgba(31, 74, 110, 0.09) 0, rgba(31, 74, 110, 0.035) 20%, transparent 38%),
    radial-gradient(circle at -7% 77%, rgba(32, 119, 200, 0.085) 0, rgba(32, 119, 200, 0.032) 19%, transparent 37%),
    radial-gradient(circle at 105% 92%, rgba(207, 34, 119, 0.07) 0, rgba(207, 34, 119, 0.025) 18%, transparent 35%);
  background-repeat: no-repeat;
}

.site-main > section,
.site-main > .marquee,
.site-main > article,
.site-main > div:not(.ambient-bubbles) {
  position: relative;
}

.site-main > section > .container,
.site-main > .marquee > *,
.site-main > article > .container,
.site-main > div:not(.ambient-bubbles) > .container {
  position: relative;
  z-index: 3;
}

/* Una sola capa recorre todo el contenido. El header y el footer quedan fuera. */
.ambient-bubbles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.ambient-bubble {
  --px: 0px;
  --py: 0px;
  position: absolute;
  display: block;
  transform: translate3d(var(--px), var(--py), 0);
  transition: transform 0.9s var(--ease);
  will-change: transform;
}

.ambient-bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: var(--o, 0.34);
  background: var(--bubble-color);
  box-shadow:
    inset 8px 9px 15px rgba(255, 255, 255, 0.34),
    inset -9px -11px 18px rgba(7, 22, 39, 0.16),
    0 18px 45px -15px var(--bubble-shadow);
  animation: sc-bubble-drift var(--d, 15s) var(--ease) var(--delay, 0s) infinite alternate;
  will-change: transform;
}

.ambient-bubble::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0) 68%);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: sc-bubble-drift var(--d, 15s) var(--ease) var(--delay, 0s) infinite alternate;
}

.ambient-bubble.b-navy {
  --bubble-color: #1f4a6e;
  --bubble-shadow: rgba(31, 74, 110, 0.42);
}

.ambient-bubble.b-blue {
  --bubble-color: #2077c8;
  --bubble-shadow: rgba(32, 119, 200, 0.42);
}

.ambient-bubble.b-magenta {
  --bubble-color: #cf2277;
  --bubble-shadow: rgba(207, 34, 119, 0.36);
}

@keyframes sc-bubble-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0) scale(0.96); }
  45% { transform: translate3d(10px, -18px, 0) rotate(4deg) scale(1.04); }
  100% { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)) scale(1.1); }
}

/* Las burbujas antiguas ya no se utilizan: evitamos duplicados si queda una
   llamada residual en una plantilla o contenido almacenado. */
.bubbles { display: none !important; }

/* Fondo con profundidad muy leve, visible sobre todo en los espacios amplios. */
.site-main::before,
.site-main::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(46vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.075;
  pointer-events: none;
}

.site-main::before {
  top: 9%;
  right: -24%;
  background: var(--accent);
}

.site-main::after {
  top: 58%;
  left: -27%;
  background: var(--magenta);
}

/* El contenido se mantiene siempre por encima de la decoración. */
.section > .container,
.hero > .container,
.page-hero > .container,
.figures > .container {
  position: relative;
  z-index: 3;
}

/* Titular con un subrayado de marca discreto y orgánico. */
h1 em,
h2 em {
  position: relative;
  display: inline-block;
  z-index: 0;
}

h1 em::after,
h2 em::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 2%;
  right: -2%;
  bottom: 0.08em;
  height: 0.16em;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgba(207, 34, 119, 0.12), rgba(207, 34, 119, 0.34), rgba(21, 102, 196, 0.14));
  transform: rotate(-1.2deg);
}

/* Pequeña señal viva en las etiquetas de sección. */
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 0 0 rgba(207, 34, 119, 0.32);
  animation: sc-pulse-dot 2.8s var(--ease) infinite;
}

@keyframes sc-pulse-dot {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(207, 34, 119, 0); transform: scale(1); }
  30% { box-shadow: 0 0 0 8px rgba(207, 34, 119, 0.12); transform: scale(1.08); }
}

/* Luz localizada que sigue el cursor. */
.surface-glow {
  --spot-x: 50%;
  --spot-y: 50%;
  position: relative;
  isolation: isolate;
}

.surface-glow::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(320px circle at var(--spot-x) var(--spot-y), rgba(255, 255, 255, 0.30), transparent 58%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

.surface-glow:hover::after { opacity: 1; }

.cell--accent.surface-glow::after,
.cell--hero.surface-glow::after {
  background: radial-gradient(360px circle at var(--spot-x) var(--spot-y), rgba(255, 255, 255, 0.17), transparent 60%);
}

/* Hovers con un poco más de personalidad, sin convertir la web en un juego. */
.cell,
.post-card,
.contact-item,
.price-card,
.form-card,
.frame {
  backface-visibility: hidden;
}

.cell__icon,
.fl-icon,
.ci-icon {
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), background 0.45s var(--ease);
}

.cell:hover .cell__icon,
.feature-list li:hover .fl-icon,
.contact-item:hover .ci-icon {
  transform: translateY(-3px) rotate(-3deg) scale(1.05);
  box-shadow: 0 14px 28px -16px rgba(21, 102, 196, 0.55);
}

.frame__core img,
.cell--hero .cell__media img {
  transition: transform 1.1s var(--ease), filter 0.8s var(--ease);
}

.frame:hover .frame__core img,
a.cell--hero:hover .cell__media img {
  transform: scale(1.035);
}

.hero .frame {
  animation: sc-hero-breathe 8s var(--ease) infinite alternate;
}

@keyframes sc-hero-breathe {
  from { transform: translate3d(0, 0, 0) rotate(-0.25deg); }
  to { transform: translate3d(0, -9px, 0) rotate(0.35deg); }
}

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -80%;
  left: -30%;
  width: 28%;
  height: 260%;
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(20deg) translateX(-220%);
  transition: transform 0.8s var(--ease);
}

.btn:hover::before { transform: rotate(20deg) translateX(620%); }

.marquee__track { animation-duration: 42s; }
.marquee:hover .marquee__track { animation-play-state: paused; }

.header-sentinel {
  position: absolute;
  top: 0;
  width: 1px;
  height: 60px;
  pointer-events: none;
}

@media (max-width: 980px) {
  .ambient-bubble { transform: none; }
  .ambient-bubble:nth-child(3n) { display: none; }
  .ambient-bubble { scale: 0.84; }
}

@media (max-width: 700px) {
  .ambient-bubble { display: none; }
  .ambient-bubble:nth-child(1),
  .ambient-bubble:nth-child(4),
  .ambient-bubble:nth-child(6),
  .ambient-bubble:nth-child(9),
  .ambient-bubble:nth-child(12),
  .ambient-bubble:nth-child(15) {
    display: block;
    scale: 0.66;
  }

  .site-main::before,
  .site-main::after {
    width: 90vw;
    opacity: 0.08;
    filter: blur(72px);
  }

  .hero .frame { animation-duration: 10s; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-bubble,
  .ambient-bubble::before,
  .ambient-bubble::after,
  .eyebrow::before,
  .hero .frame {
    animation: none !important;
    transform: none !important;
  }

  .btn::before { display: none; }
}

/* Ajuste móvil de la isla de navegación: la CTA permanece dentro del menú
   desplegable y no comprime el logotipo ni expulsa la hamburguesa. */
@media (max-width: 720px) {
  .site-header__inner {
    padding: 8px 9px 8px 16px;
  }

  .header-cta > .btn {
    display: none;
  }

  .brand {
    min-width: 0;
  }

  .nav-toggle {
    display: block;
  }

  .ambient-bubble:nth-child(1) {
    display: none;
  }

  .ambient-bubble:nth-child(2) {
    display: block;
    scale: 0.66;
  }
}

@media (max-width: 720px) {
  .brand--header {
    width: 76px;
    min-width: 76px;
    height: 44px;
  }

  .brand__symbol-slot {
    width: 58px;
    height: 40px;
  }

  .brand__symbol-slot--footer {
    width: 126px;
    height: 88px;
  }

  .logo-strip img {
    width: min(190px, 42vw);
    height: 52px;
  }
}


/* ========================================================================== 
   18. Ritmo responsive global
   ========================================================================== */
@media (max-width: 980px) {
  :root {
    --sec: clamp(56px, 7vw, 74px);
    --sec-compact: clamp(38px, 5vw, 54px);
  }

  .hero {
    padding-top: clamp(116px, 14vw, 146px);
  }

  .page-hero {
    padding-top: clamp(116px, 14vw, 148px);
  }

  .cell--hero {
    min-height: 350px;
  }
}

@media (max-width: 720px) {
  :root {
    --sec: 54px;
    --sec-compact: 38px;
  }

  body {
    line-height: 1.6;
  }

  h1 {
    font-size: clamp(2.15rem, 11vw, 3rem);
  }

  h2 {
    font-size: clamp(1.65rem, 8vw, 2.15rem);
  }

  .hero {
    padding: 108px 0 52px;
  }

  .page-hero {
    padding: 108px 0 34px;
  }

  .hero__grid,
  .split {
    gap: 34px;
  }

  .sec-head {
    margin-bottom: 34px;
  }

  .cell,
  .form-card {
    padding: 22px;
  }

  .closing {
    margin-top: 24px;
  }

  .closing--compact {
    margin-top: 24px;
  }

  .closing__cta {
    padding: 54px 0 44px;
  }

  .footer-grid {
    padding: 44px 0;
  }

  .footer-grid--compact {
    padding-top: 48px;
  }
}


/* ========================================================================== 
   19. Revisión responsive final: tablet y móvil
   ========================================================================== */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

:where(
  .hero__grid,
  .split,
  .bento,
  .project-case,
  .ai-showcase,
  .project-case__features,
  .ai-showcase__features,
  .footer-grid,
  .form-grid,
  .post-grid,
  .figures__row
) > * {
  min-width: 0;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

@media (hover: none), (pointer: coarse) {
  a.cell:hover,
  .post-card:hover,
  .project-case__feature:hover,
  .ai-showcase__feature:hover {
    transform: none;
  }

  .frame:hover .frame__core img,
  a.cell--hero:hover .cell__media img {
    transform: none;
  }
}

/* Tablet vertical y horizontal. */
@media (min-width: 721px) and (max-width: 1020px) {
  .container {
    padding-inline: 26px;
  }

  .site-header {
    top: 10px;
  }

  .site-header__inner {
    margin-inline: 14px;
    padding: 9px 10px 9px 18px;
  }

  .nav-overlay {
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 112px 46px 42px;
  }

  .nav-overlay nav,
  .nav-overlay__foot {
    width: min(100%, 680px);
    margin-inline: auto;
  }

  .hero__grid > :last-child,
  .split > :first-child:has(.frame),
  .split > :last-child:has(.frame) {
    width: min(100%, 720px);
    margin-inline: auto;
  }

  .project-case,
  .ai-showcase {
    gap: 34px;
    padding: 38px;
  }

  .project-case__features,
  .ai-showcase__features {
    gap: 12px;
  }

  .project-case__feature,
  .ai-showcase__feature {
    min-height: 144px;
    padding: 20px;
  }

  .cell--hero {
    min-height: 350px !important;
  }

  .footer-grid {
    column-gap: 54px;
    row-gap: 38px;
  }

  .ambient-bubble {
    display: none;
  }

  .ambient-bubble:nth-child(2),
  .ambient-bubble:nth-child(4),
  .ambient-bubble:nth-child(7),
  .ambient-bubble:nth-child(10) {
    display: block;
    scale: 0.76;
  }
}

/* Móvil. */
@media (max-width: 720px) {
  :root {
    --r-outer: 24px;
    --r-inner: 18px;
  }

  .container {
    padding-inline: 18px;
  }

  .site-header {
    top: 8px;
  }

  .site-header__inner {
    width: auto;
    max-width: none;
    min-height: 60px;
    margin-inline: 10px;
    gap: 8px;
    padding: 7px 8px 7px 14px;
  }

  .brand--header {
    width: 68px;
    min-width: 68px;
    height: 42px;
  }

  .brand__symbol-slot {
    width: 54px;
    height: 38px;
  }

  .nav-toggle {
    width: 42px;
    height: 42px;
  }

  .nav-toggle i {
    left: 12px;
    right: 12px;
  }

  .nav-overlay {
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 88px 20px 30px;
  }

  .nav-overlay nav,
  .nav-overlay__foot {
    width: 100%;
    max-width: 500px;
    margin-inline: auto;
  }

  .nav-overlay ul {
    gap: 1px;
  }

  .nav-overlay li a,
  .nav-overlay .clients-menu-toggle {
    font-size: clamp(1.42rem, 7vw, 1.9rem);
    line-height: 1.12;
    padding-block: 7px;
  }

  .nav-overlay .clients-submenu {
    padding: 3px 0 5px 14px;
  }

  .nav-overlay .clients-submenu a,
  .nav-overlay.is-open .clients-submenu a {
    font-size: 0.97rem;
    line-height: 1.35;
    padding-block: 6px;
  }

  .nav-overlay__foot {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }

  .hero,
  .page-hero {
    padding-top: 96px;
  }

  .hero {
    padding-bottom: 46px;
  }

  .page-hero {
    padding-bottom: 30px;
  }

  h1,
  h2,
  h3,
  p,
  a,
  span {
    overflow-wrap: break-word;
  }

  h1 {
    font-size: clamp(2rem, 10.5vw, 2.75rem);
    line-height: 1.04;
    text-wrap: balance;
  }

  h2 {
    font-size: clamp(1.62rem, 7.8vw, 2.05rem);
    line-height: 1.08;
    text-wrap: balance;
  }

  .lead {
    font-size: 1rem;
    line-height: 1.62;
  }

  .eyebrow {
    max-width: 100%;
    padding: 6px 12px;
    font-size: 0.69rem;
    line-height: 1.35;
    white-space: normal;
  }

  .sec-head {
    margin-bottom: 30px;
  }

  .hero__grid,
  .split,
  .split--narrow-media {
    gap: 28px;
  }

  .hero .lead {
    margin: 18px 0 24px;
  }

  .hero .btn-row,
  .closing__cta .btn-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 10px;
  }

  .hero .btn-row .btn,
  .closing__cta .btn-row .btn {
    width: 100%;
    justify-content: space-between;
  }

  .btn {
    min-height: 50px;
    padding-left: 20px;
    font-size: 0.95rem;
  }

  .btn__orb {
    width: 36px;
    height: 36px;
  }

  .frame {
    padding: 6px;
  }

  .media-slot--portrait {
    aspect-ratio: 4 / 3;
  }

  .media-slot--landscape {
    aspect-ratio: 16 / 10;
  }

  .figure-caption {
    padding-left: 2px;
    font-size: 0.82rem;
  }

  .figures {
    padding-block: 22px;
  }

  .figures__row {
    grid-template-columns: 1fr 1fr;
    gap: 24px 14px;
  }

  .figure strong {
    font-size: 1.85rem;
  }

  .figure span {
    display: block;
    margin-top: 5px;
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .bento {
    gap: 12px;
  }

  .cell,
  .form-card,
  .contact-item,
  .price-card {
    padding: 20px;
  }

  .cell {
    gap: 8px;
  }

  .cell--hero {
    min-height: 300px !important;
  }

  .cell--hero h3 {
    font-size: 1.55rem;
  }

  .cell--hero p {
    font-size: 0.95rem;
  }

  .cell__go {
    padding-top: 13px;
  }

  #control-horario {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .feature-list {
    gap: 18px;
    margin-top: 22px;
  }

  .feature-list li {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
  }

  .feature-list .fl-icon,
  .contact-item .ci-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .feature-list p,
  .contact-item p {
    font-size: 0.9rem;
  }

  .project-case-section,
  .ai-feature-section {
    padding-block: 40px;
  }

  .applications-latest-project {
    padding-top: 0;
  }

  .project-case,
  .ai-showcase {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 24px 18px;
  }

  .project-case__intro h2,
  .ai-showcase__title-row h2 {
    max-width: none;
  }

  .project-case__intro .lead,
  .ai-showcase__intro .lead {
    margin-bottom: 20px;
  }

  .project-case__features,
  .ai-showcase__features {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .project-case__feature,
  .ai-showcase__feature {
    min-height: 0;
    padding: 18px;
  }

  .project-case__icon,
  .ai-showcase__feature > span {
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
  }

  .ai-showcase__more {
    width: fit-content;
    max-width: 100%;
    font-size: 0.84rem;
    line-height: 1.4;
  }

  .logo-strip {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 22px;
    padding-block: 24px;
  }

  .logo-strip img {
    width: min(220px, 78vw);
    height: 58px;
  }

  .post-grid {
    gap: 14px;
  }

  .post-card__body {
    padding: 20px;
  }

  .post-card__meta {
    flex-wrap: wrap;
    gap: 5px 10px;
  }

  .cat-pills-wrap {
    gap: 8px;
    align-items: center;
  }

  .cat-pills__arrow {
    display: inline-flex;
    width: 34px;
    height: 34px;
  }

  .cat-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    margin-inline: 0;
    padding: 0 0 8px;
  }

  .cat-pills::-webkit-scrollbar {
    display: none;
  }

  .cat-pills a {
    flex: 0 0 auto;
    padding: 9px 16px;
    white-space: nowrap;
  }

  .pagination {
    flex-wrap: wrap;
    margin-top: 38px;
  }

  .entry {
    width: 100%;
  }

  .entry-header {
    margin-bottom: 30px;
  }

  .entry-content {
    font-size: 1rem;
  }

  .entry-content h2 {
    font-size: 1.5rem;
  }

  .entry-content blockquote {
    margin-inline: 0;
    padding-left: 1rem;
  }

  .table-wrap {
    margin-inline: -18px;
    padding-inline: 18px;
  }

  table.sc-table {
    min-width: 620px;
  }

  .form-grid {
    gap: 16px;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  textarea {
    min-height: 150px;
  }

  .form-card .btn {
    width: 100%;
    justify-content: space-between;
  }

  .contact-aside {
    gap: 10px;
  }

  .contact-item {
    gap: 12px;
  }

  .address-link {
    word-break: normal;
  }

  .closing {
    border-radius: 0;
  }

  .closing__cta {
    padding: 48px 0 40px;
  }

  .closing__cta h2 {
    max-width: none;
  }

  .closing__cta .lead {
    margin-bottom: 26px;
  }

  .closing__cta .phone {
    margin-top: 4px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 0;
  }

  .footer-grid--compact {
    padding-top: 42px;
  }

  .brand__symbol-slot--footer {
    width: 112px;
    height: 78px;
  }

  .footer-note {
    margin-top: 18px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .footer-bottom ul {
    flex-wrap: wrap;
    gap: 10px 18px;
  }

  .ambient-bubble {
    display: none !important;
  }

  .ambient-bubble:nth-child(2),
  .ambient-bubble:nth-child(6),
  .ambient-bubble:nth-child(9) {
    display: block !important;
    scale: 0.58;
  }

  .site-main::before,
  .site-main::after {
    width: 100vw;
    opacity: 0.065;
    filter: blur(68px);
  }
}

/* Móviles muy estrechos. */
@media (max-width: 390px) {
  .container {
    padding-inline: 15px;
  }

  .site-header__inner {
    margin-inline: 7px;
  }

  h1 {
    font-size: clamp(1.88rem, 10.2vw, 2.45rem);
  }

  .figures__row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .btn {
    white-space: normal;
  }

  .project-case,
  .ai-showcase,
  .cell,
  .form-card,
  .contact-item,
  .price-card {
    padding-inline: 16px;
  }
}


@media (max-width: 768px) {
  .site-footer,
  .site-footer h4,
  .site-footer p,
  .site-footer ul,
  .footer-bottom {
    text-align: center;
  }

  .brand--footer {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  .brand__symbol-slot--footer {
    justify-content: center;
  }

  .brand__symbol-slot--footer .brand__logo {
    object-position: center center;
  }

  .footer-note {
    margin-left: auto;
    margin-right: auto;
  }

  .site-footer ul {
    justify-items: center;
  }

  .footer-bottom {
    align-items: center;
    justify-content: center;
  }

  .footer-bottom ul {
    justify-content: center;
  }
}


/* Separación final entre el contenido y el pie: visible pero contenida. */
@media (max-width: 720px) {
  .closing,
  .closing--compact {
    margin-top: 22px;
  }
}


/* ========================================================================== 
   20. Separación interior antes del footer
   El espacio pertenece al cuerpo de la página, para conservar los degradados
   laterales y evitar una franja blanca independiente entre contenido y pie.
   ========================================================================== */
.site-main > section:last-of-type {
  padding-bottom: clamp(28px, 3vw, 42px);
  margin-bottom: 0;
}

.closing,
.closing--compact {
  margin-top: 0 !important;
}

@media (max-width: 720px) {
  .site-main > section:last-of-type {
    padding-bottom: 24px;
  }
}


/* Footer unido al cuerpo en todas las páginas: sin huecos laterales por esquinas redondeadas. */
.closing,
.closing--compact {
  border-radius: 0 !important;
  width: 100%;
}


@media (max-width: 900px) {
  .site-main {
    background-image:
      radial-gradient(circle at 112% 13%, rgba(32, 119, 200, 0.085) 0, rgba(32, 119, 200, 0.035) 22%, transparent 42%),
      radial-gradient(circle at -18% 38%, rgba(207, 34, 119, 0.08) 0, rgba(207, 34, 119, 0.03) 23%, transparent 43%),
      radial-gradient(circle at 115% 63%, rgba(31, 74, 110, 0.075) 0, rgba(31, 74, 110, 0.028) 21%, transparent 40%),
      radial-gradient(circle at -16% 84%, rgba(32, 119, 200, 0.07) 0, rgba(32, 119, 200, 0.025) 20%, transparent 39%);
  }
}

@media (max-width: 560px) {
  .site-main {
    background-image:
      radial-gradient(circle at 126% 14%, rgba(32, 119, 200, 0.07) 0, rgba(32, 119, 200, 0.025) 24%, transparent 46%),
      radial-gradient(circle at -26% 41%, rgba(207, 34, 119, 0.065) 0, rgba(207, 34, 119, 0.022) 24%, transparent 46%),
      radial-gradient(circle at 128% 70%, rgba(31, 74, 110, 0.06) 0, rgba(31, 74, 110, 0.02) 23%, transparent 44%),
      radial-gradient(circle at -25% 91%, rgba(32, 119, 200, 0.055) 0, rgba(32, 119, 200, 0.018) 22%, transparent 42%);
  }
}


/* ========================================================================== 
   22. Difuminados laterales compactos
   Mantiene el equilibrio rosa/azul sin ocupar grandes zonas del cuerpo.
   ========================================================================== */
.site-main {
  background-image:
    radial-gradient(circle 190px at 98% 15%, rgba(32, 119, 200, 0.145) 0, rgba(32, 119, 200, 0.060) 46%, transparent 100%),
    radial-gradient(circle 175px at 1% 36%, rgba(207, 34, 119, 0.138) 0, rgba(207, 34, 119, 0.056) 47%, transparent 100%),
    radial-gradient(circle 165px at 99% 58%, rgba(31, 74, 110, 0.118) 0, rgba(31, 74, 110, 0.046) 46%, transparent 100%),
    radial-gradient(circle 180px at 1% 79%, rgba(32, 119, 200, 0.125) 0, rgba(32, 119, 200, 0.048) 47%, transparent 100%),
    radial-gradient(circle 150px at 99% 93%, rgba(207, 34, 119, 0.105) 0, rgba(207, 34, 119, 0.038) 46%, transparent 100%);
}

.site-main::before,
.site-main::after {
  width: 240px;
  height: 240px;
  aspect-ratio: auto;
  filter: blur(54px);
  opacity: 0.088;
}

.site-main::before {
  top: 12%;
  right: -145px;
}

.site-main::after {
  top: 61%;
  left: -150px;
}

@media (max-width: 900px) {
  .site-main {
    background-image:
      radial-gradient(circle 145px at 100% 14%, rgba(32, 119, 200, 0.122) 0, rgba(32, 119, 200, 0.046) 46%, transparent 100%),
      radial-gradient(circle 135px at 0% 39%, rgba(207, 34, 119, 0.116) 0, rgba(207, 34, 119, 0.044) 47%, transparent 100%),
      radial-gradient(circle 130px at 100% 65%, rgba(31, 74, 110, 0.098) 0, rgba(31, 74, 110, 0.036) 46%, transparent 100%),
      radial-gradient(circle 140px at 0% 86%, rgba(32, 119, 200, 0.102) 0, rgba(32, 119, 200, 0.038) 47%, transparent 100%);
  }

  .site-main::before,
  .site-main::after {
    width: 180px;
    height: 180px;
    filter: blur(45px);
    opacity: 0.070;
  }

  .site-main::before { right: -120px; }
  .site-main::after { left: -125px; }
}

@media (max-width: 560px) {
  .site-main {
    background-image:
      radial-gradient(circle 105px at 102% 15%, rgba(32, 119, 200, 0.108) 0, rgba(32, 119, 200, 0.038) 47%, transparent 100%),
      radial-gradient(circle 100px at -2% 42%, rgba(207, 34, 119, 0.102) 0, rgba(207, 34, 119, 0.036) 47%, transparent 100%),
      radial-gradient(circle 95px at 102% 71%, rgba(31, 74, 110, 0.086) 0, rgba(31, 74, 110, 0.030) 46%, transparent 100%),
      radial-gradient(circle 100px at -2% 92%, rgba(32, 119, 200, 0.084) 0, rgba(32, 119, 200, 0.030) 47%, transparent 100%);
  }

  .site-main::before,
  .site-main::after {
    width: 130px;
    height: 130px;
    filter: blur(36px);
    opacity: 0.058;
  }

  .site-main::before { right: -95px; }
  .site-main::after { left: -98px; }
}


/* ========================================================================== 
   21. Curva superior definitiva del footer
   ========================================================================== */
.closing,
.closing--compact {
  width: 100%;
  border-radius: clamp(30px, 3vw, 48px) clamp(30px, 3vw, 48px) 0 0 !important;
  overflow: hidden;
  isolation: isolate;
}

@supports (overflow: clip) {
  .closing,
  .closing--compact {
    overflow: clip;
  }
}

@media (max-width: 720px) {
  .closing,
  .closing--compact {
    border-radius: 24px 24px 0 0 !important;
  }
}

@media (max-width: 560px) {
  .footer-social {
    gap: 9px;
    padding-bottom: 24px;
  }

  .footer-social a {
    padding-right: 12px;
    font-size: 0.82rem;
  }
}


/* ========================================================================== 
   21. Carrusel de testimonios
   ========================================================================== */
.testimonials-section {
  padding-top: clamp(70px, 8vw, 110px);
}

.testimonials {
  position: relative;
  border: 1px solid rgba(21, 102, 196, 0.16);
  border-radius: clamp(28px, 4vw, 48px);
  background: linear-gradient(135deg, rgba(231, 241, 253, 0.72), rgba(255, 255, 255, 0.96) 50%, rgba(252, 232, 243, 0.64));
  box-shadow: 0 28px 70px -48px rgba(10, 22, 36, 0.42);
  overflow: hidden;
}

.testimonials__viewport {
  overflow: hidden;
}

.testimonials__track {
  display: flex;
  transition: transform 0.75s var(--ease);
  will-change: transform;
}

.testimonial-slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(34px, 6vw, 82px);
  align-items: stretch;
  padding: clamp(22px, 3vw, 34px);
}

.testimonial-slide__media {
  min-height: 430px;
  border-radius: clamp(22px, 3vw, 36px);
  overflow: hidden;
  background: var(--paper-2);
}

.testimonial-slide__media img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) contrast(1.02);
}

.testimonial-slide__content {
  position: relative;
  align-self: center;
  padding: clamp(34px, 5vw, 72px) clamp(12px, 3vw, 36px) clamp(34px, 5vw, 72px) 0;
}

.testimonial-slide__quote {
  display: block;
  height: 54px;
  font-family: var(--display);
  font-size: clamp(5rem, 9vw, 8rem);
  line-height: 0.8;
  font-weight: 800;
  color: var(--magenta);
  opacity: 0.86;
}

.testimonial-slide blockquote {
  margin: 12px 0 34px;
  max-width: 31ch;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.6vw, 2.35rem);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.testimonial-slide footer {
  display: grid;
  gap: 4px;
}

.testimonial-slide footer strong {
  font-family: var(--display);
  font-size: 1.08rem;
  color: var(--ink);
}

.testimonial-slide footer span {
  color: var(--muted);
  font-size: 0.94rem;
}

.testimonials__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 0 clamp(22px, 3vw, 34px) clamp(22px, 3vw, 34px);
}

.testimonials__arrows,
.testimonials__dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.testimonials__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(10, 22, 36, 0.12);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 12px 28px -20px rgba(10, 22, 36, 0.4);
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
}

.testimonials__arrow:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: #fff;
}

.testimonials__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 22, 36, 0.2);
  transition: width 0.4s var(--ease), background 0.4s var(--ease);
}

.testimonials__dot.is-active {
  width: 30px;
  background: var(--accent);
}

@media (max-width: 900px) {
  .testimonial-slide {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .testimonial-slide__media,
  .testimonial-slide__media img {
    min-height: 320px;
    max-height: 420px;
  }

  .testimonial-slide__content {
    padding: 38px 12px 26px;
  }

  .testimonial-slide blockquote {
    max-width: none;
  }
}

@media (max-width: 600px) {
  .testimonials-section {
    padding-top: 54px;
  }

  .testimonial-slide {
    padding: 14px;
  }

  .testimonial-slide__media,
  .testimonial-slide__media img {
    min-height: 230px;
    max-height: 290px;
  }

  .testimonial-slide__content {
    padding: 28px 6px 20px;
  }

  .testimonial-slide__quote {
    height: 38px;
  }

  .testimonial-slide blockquote {
    margin: 8px 0 24px;
    font-size: clamp(1.25rem, 6vw, 1.65rem);
  }

  .testimonials__controls {
    padding: 0 14px 18px;
  }

  .testimonials__arrow {
    width: 40px;
    height: 40px;
  }
}

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