/* ==========================================================================
   AUGURA TECH — DESIGN TOKENS
   Single source of truth for color, type, spacing and motion primitives.
   Do not hardcode these values anywhere else in the codebase.
   ========================================================================== */

:root {
  /* Color */
  --at-navy: #10446b;
  --at-navy-deep: #0b3350;
  --at-navy-darker: #082840;
  --at-gold: #f1bd29;
  --at-gold-dark: #c79a1c;
  --at-grey: #919191;
  --at-grey-soft: #6f7680;
  --at-bg-light: #f7f8f9;
  --at-bg-grey: #eef0f2;
  --at-border: #e4e7ea;
  --at-white: #ffffff;

  /* Typography */
  --at-font-display: 'Montserrat', sans-serif;
  --at-font-body: 'Open Sans', sans-serif;

  /* Layout */
  --at-content-max: 1240px;
  --at-wrap-px: 40px;
  --at-wrap-px-tablet: 28px;
  --at-wrap-px-mobile: 22px;

  /* Motion */
  --at-ease: cubic-bezier(.22, .68, 0, 1);
  --at-duration-fast: .3s;
  --at-duration-base: .4s;
  --at-duration-slow: .8s;
}
/* ==========================================================================
   AUGURA TECH — BASE
   Resets and bare element defaults. No component-specific rules here.
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--at-font-body);
  color: var(--at-navy);
  background: var(--at-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
/* Iconos subidos vía Media Library (augura_item_icon()) sustituyen el SVG
   preestablecido dentro del mismo contenedor circular/redondeado — se
   dimensionan en proporción al contenedor (~45%, igual que los SVG de
   iconos.php) en vez de al tamaño real de la miniatura de WordPress. */
.augura-icon-img { width: 45%; height: 45%; object-fit: contain; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; }
button { border: none; background: none; cursor: pointer; }
ul { list-style: none; }

section { position: relative; }

.wrap {
  max-width: var(--at-content-max);
  margin: 0 auto;
  padding: 0 var(--at-wrap-px);
}

/* .has-container — mismos breakpoints que .container de Bootstrap (ver
   assets/css/bootstrap-grid.min.css), pero declarados aquí directamente
   para que el toggle "Contenedor" de core/group (gutenberg-group-extend.js)
   se vea igual en el lienzo del editor y en el front. El filtro render_block
   que añade la clase "container" solo corre en el front (renderizado PHP),
   así que confiar solo en esa clase deja el editor sin ningún cambio visual
   y parece que el toggle "no hace nada". */
.has-container {
  --bs-gutter-x: 1.5rem;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px)  { .has-container { max-width: 540px; } }
@media (min-width: 768px)  { .has-container { max-width: 720px; } }
@media (min-width: 992px)  { .has-container { max-width: 960px; } }
@media (min-width: 1200px) { .has-container { max-width: 1140px; } }
@media (min-width: 1400px) { .has-container { max-width: 1320px; } }

/* Section furniture shared by every page */
.eyebrow {
  font-family: var(--at-font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--at-gold);
  margin-bottom: 18px;
  display: block;
}
.eyebrow.navy { color: var(--at-navy); }
.eyebrow.on-light { color: var(--at-gold-dark); }

.section-head { max-width: 640px; margin-bottom: 64px; }
.section-head h2 {
  font-family: var(--at-font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  color: var(--at-navy);
  letter-spacing: -.01em;
}
/* .activity usa el mismo estilo de párrafo que .hero-desc en el diseño original
   (más grosor, interlineado más corto) — se aplica aquí por bloque padre en vez
   de meter una clase extra en el párrafo del InnerBlocks. */
.activity .section-head p:not(.eyebrow) { font-size: 1.05rem; font-weight: 600; line-height: 1.4; }

.section-head p:not(.eyebrow) {
  margin-top: 18px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--at-navy);
}

/* Accessibility: keep a visible focus outline everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--at-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   RESPONSIVE — shared gutter + section-head rhythm
   Additive breakpoints layered on top of the existing 980px / 640px rules
   found across the codebase. Nothing below overrides an existing rule; it
   only fills the gaps between them (Laptop / Tablet Portrait / Small Mobile).
   ========================================================================== */

/* Tablet (both landscape and portrait): slightly tighter gutter than desktop,
   using the token that already existed for this purpose but was unused. */
@media (max-width: 900px) {
  .wrap { padding: 0 var(--at-wrap-px-tablet); }
  .section-head { margin-bottom: 48px; }
}

/* Small mobile: tighten the section-head rhythm a touch further so eyebrow +
   heading + intro paragraph don't eat too much of a short viewport. */
@media (max-width: 480px) {
  .section-head { margin-bottom: 36px; }
  .section-head p:not(.eyebrow) { font-size: .95rem; }
  .eyebrow { margin-bottom: 14px; }
}
/* ==========================================================================
   AUGURA TECH — COMPONENTS
   Reusable UI patterns shared across every page. One definition per pattern;
   pages must not redeclare these rules locally.
   ========================================================================== */

/* ---------------- Header / hamburger navigation (site-wide) ---------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 300;
  padding: 26px 0;
  transition: background var(--at-duration-base) var(--at-ease),
              padding var(--at-duration-base) var(--at-ease),
              box-shadow var(--at-duration-base) var(--at-ease);
}
.site-header.is-scrolled {
  padding: 14px 0;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px rgba(16, 68, 107, .08);
}
/* Con el menú móvil abierto, la cabecera pierde su fondo blanco (incluso si
   is-scrolled sigue aplicado) para que la capa oscura del overlay se vea
   por completo — logo y burger ya cambian a blanco vía JS (syncLogo) para
   leerse sobre ese fondo oscuro, así que el propio fondo blanco no puede
   quedar por encima tapándolo. */
.site-header.menu-open {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; }

.logo {
  display: flex; align-items: center;
  transition: opacity var(--at-duration-fast) var(--at-ease);
}
.logo:hover { opacity: .85; }
.logo-lockup { height: 42px; width: auto; display: block; }
.site-header.menu-open .logo { color: #fff; }

/* Pages whose hero sits directly under a transparent header (Soluciones,
   Babilonia, Alejandría): logo + burger must read white until the header
   picks up its solid background on scroll, otherwise they're illegible
   against the dark hero. */
.site-header.hero-dark:not(.is-scrolled):not(.menu-open) .burger span { background: #fff; }

.burger {
  width: 46px; height: 46px;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px;
  position: relative; z-index: 210;
}
.burger span {
  display: block; height: 2px; background: var(--at-navy); border-radius: 2px;
  transition: width var(--at-duration-fast) var(--at-ease),
              transform var(--at-duration-fast) var(--at-ease),
              background var(--at-duration-fast) var(--at-ease);
}
.burger span:nth-child(1) { width: 26px; }
.burger span:nth-child(2) { width: 19px; }
.burger span:nth-child(3) { width: 26px; }
.burger:hover span { width: 26px; }
.burger.is-open span { background: #fff; }
.burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); width: 26px; }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); width: 26px; }

.nav-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--at-navy-darker);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 110px 24px 60px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--at-ease), visibility .5s var(--at-ease);
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }
.nav-lang-switch {
  margin-top: 36px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--at-font-display); font-size: .8rem; font-weight: 700; letter-spacing: .08em;
}
.nav-lang-switch a { color: rgba(255, 255, 255, .5); transition: color var(--at-duration-fast) var(--at-ease); }
.nav-lang-switch a:hover, .nav-lang-switch a.is-active { color: var(--at-gold); }
.nav-lang-sep { color: rgba(255, 255, 255, .25); }
.nav-overlay ul { text-align: center; }
.nav-overlay li { overflow: hidden; }
.nav-overlay a {
  display: block; padding: 14px 0;
  font-family: var(--at-font-display);
  font-weight: 700; font-size: 2.2rem; text-transform: uppercase; letter-spacing: .02em;
  color: rgba(255, 255, 255, .6);
  transition: color var(--at-duration-fast) var(--at-ease), transform .5s var(--at-ease);
  transform: translateY(30px);
}
.nav-overlay.is-open a { transform: translateY(0); }
.nav-overlay a:hover, .nav-overlay a.is-current { color: var(--at-gold); }

/* ---------------- Halo button (v3.0) ---------------- */
.halo-btn {
  display: inline-flex; align-items: center; gap: 16px;
  background: transparent;
  font-family: var(--at-font-display);
  font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--at-navy);
  transition: color var(--at-duration-fast) var(--at-ease);
}
.halo-btn .disc {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--at-gold);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 10px 22px -6px rgba(241, 189, 41, .55), 0 2px 8px rgba(16, 68, 107, .12);
  animation: at-float-disc 3.6s ease-in-out infinite;
  transition: transform .35s var(--at-ease), box-shadow .35s var(--at-ease);
}
.halo-btn .disc svg { color: var(--at-navy); }
.halo-btn:hover .disc { transform: scale(1.08); box-shadow: 0 14px 28px -6px rgba(241, 189, 41, .65), 0 2px 8px rgba(16, 68, 107, .16); }
.halo-btn.outline .disc { background: transparent; border: 1.6px solid var(--at-navy); box-shadow: none; }
.halo-btn.outline .disc svg { color: var(--at-navy); }
.halo-btn.on-dark { color: #fff; }
.halo-btn.on-dark .disc {
  background: var(--at-gold);
  box-shadow: 0 0 32px 6px rgba(241, 189, 41, .45), 0 0 60px 14px rgba(241, 189, 41, .22);
}
.halo-btn.on-dark:hover .disc {
  box-shadow: 0 0 36px 8px rgba(241, 189, 41, .55), 0 0 70px 18px rgba(241, 189, 41, .28);
}
.halo-btn.on-dark.outline .disc { background: transparent; border: 1.6px solid rgba(255, 255, 255, .55); box-shadow: none; }
.halo-btn.on-dark.outline .disc svg { color: #fff; }

.halo-submit {
  display: inline-flex; align-items: center; gap: 16px;
  background: var(--at-navy);
  color: #fff;
  border-radius: 999px;
  padding: 8px 8px 8px 26px;
  font-family: var(--at-font-display);
  font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  transition: background var(--at-duration-fast) var(--at-ease);
}
.halo-submit .disc { background: var(--at-gold); animation: at-float-disc 3.6s ease-in-out infinite; }
.halo-submit .disc svg { color: var(--at-navy); }
.halo-submit:hover { background: var(--at-navy-deep); }

/* ---------------- Icon card (used in "activity"-style grids) ---------------- */
.icon-card {
  border: 1px solid var(--at-border);
  border-radius: 14px;
  padding: 38px 32px;
  transition: transform var(--at-duration-base) var(--at-ease),
              box-shadow var(--at-duration-base) var(--at-ease),
              border-color var(--at-duration-base) var(--at-ease);
}
.icon-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -18px rgba(16, 68, 107, .18);
  border-color: transparent;
}
.icon-ring {
  width: 60px; height: 60px; border-radius: 50%;
  border: 1.6px solid var(--at-gold);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 26px;
}
.icon-ring svg { width: 26px; height: 26px; color: var(--at-navy); }
.icon-card h3 {
  font-family: var(--at-font-display);
  font-weight: 700; font-size: 1.18rem;
  color: var(--at-navy);
  margin-bottom: 14px;
}
.icon-card p { font-size: .94rem; line-height: 1.65; color: var(--at-navy); }

/* Dark variant, e.g. on the Soluciones grid */
.solution-card { background: var(--at-navy-deep); padding: 44px 40px; transition: background var(--at-duration-base) var(--at-ease); }
.solution-card:hover { background: rgba(255, 255, 255, .03); }
.solution-card .icon-ring { border-color: var(--at-gold); margin-bottom: 24px; }
.solution-card .icon-ring svg { color: #fff; }
.solution-card h3 { font-family: var(--at-font-display); font-weight: 700; font-size: 1.2rem; margin-bottom: 12px; }
.solution-card p { font-size: .92rem; line-height: 1.65; color: rgba(255, 255, 255, .68); max-width: 340px; }

/* ---------------- Stat block ---------------- */
.stat-block { position: relative; }
.stat-block:not(:first-child)::before {
  content: '';
  position: absolute;
  left: -20px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--at-border);
}
.stat-block .num {
  font-family: var(--at-font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: var(--at-navy);
  line-height: 1;
}
.stat-block .concept { margin-top: 14px; font-size: .92rem; color: var(--at-grey-soft); line-height: 1.5; }

/* ---------------- Contact form ---------------- */
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.contact-form .rgpd-notice, .contact-form .checkbox-field { grid-column: 1 / -1; }
.field label {
  font-family: var(--at-font-display);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--at-navy);
}
.field input, .field textarea {
  width: 100%;
  border: none; border-bottom: 1.6px solid #c9cdd1;
  background: transparent;
  padding: 10px 2px;
  font-size: .98rem;
  color: var(--at-navy);
  font-family: var(--at-font-body);
  transition: border-color var(--at-duration-fast) var(--at-ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--at-gold); }
.field textarea { resize: vertical; min-height: 90px; }
.form-actions {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 36px; flex-wrap: wrap;
  margin-top: 12px;
}
.form-msg { font-size: .86rem; color: var(--at-navy); display: none; }
.form-msg.is-visible { display: block; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--at-navy-darker); color: #fff; padding: 60px 0 30px; }
.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  flex-wrap: wrap; gap: 20px;
}
.footer-group { display: flex; align-items: center; gap: 16px; }
.footer-group .logo-lockup { height: 52px; }
.footer-tagline { font-size: .82rem; color: rgba(255, 255, 255, .55); }
.footer-grant-flag { display: flex; align-items: center; flex-shrink: 0; opacity: .82; transition: opacity var(--at-duration-fast) var(--at-ease); }
.footer-grant-flag:hover { opacity: 1; }
.footer-grant-flag svg { height: 34px; width: auto; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 26px; flex-wrap: wrap; gap: 16px;
}
.footer-links { display: flex; gap: 26px; font-size: .85rem; color: rgba(255, 255, 255, .7); list-style: none; margin: 0; padding: 0; }
.footer-links a:hover { color: var(--at-gold); }
.socials { display: flex; gap: 16px; }
.socials a {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 15px;
  transition: background var(--at-duration-fast) var(--at-ease), transform var(--at-duration-fast) var(--at-ease);
}
.socials a:hover { background: var(--at-gold); color: var(--at-navy); transform: translateY(-2px); }

/* ---------------- Tag pill (sector badges, tech tags) ---------------- */
.tag-pill {
  display: inline-block;
  font-family: var(--at-font-display);
  font-size: .65rem; font-weight: 600;
  color: var(--at-grey-soft);
  background: #f0f4f8;
  padding: 4px 10px;
  border-radius: 999px;
}
.tag-pill.sector {
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--at-navy);
  background: rgba(16, 68, 107, .08);
  padding: 5px 12px;
}

/* ---------------- Filter tabs (pill button group) ---------------- */
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-tab {
  font-family: var(--at-font-display);
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--at-navy);
  border: 1.5px solid #c5cbd1;
  cursor: pointer;
  transition: all var(--at-duration-fast) var(--at-ease);
}
.filter-tab.is-active { background: var(--at-navy); color: #fff; border-color: var(--at-navy); }

/* ---------------- Case card ---------------- */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; grid-auto-rows: 1fr; }
.case-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  cursor: pointer;
  border: 1px solid var(--at-border);
  transition: transform var(--at-duration-base) var(--at-ease),
              box-shadow var(--at-duration-base) var(--at-ease),
              border-color var(--at-duration-base) var(--at-ease);
}
.case-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -18px rgba(16, 68, 107, .14); border-color: transparent; }
.case-card.is-featured:hover { background: var(--at-navy-darker); box-shadow: 0 28px 56px -18px rgba(8, 40, 64, .4); }
.case-card-head { padding: 32px 32px 0; }
.case-card-tags { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.case-card-tags .case-label { font-family: var(--at-font-display); font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--at-grey); }
.case-card-media {
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: 10px;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  margin-bottom: 28px;
}
.case-card-body { padding: 0 32px 32px; flex: 1; display: flex; flex-direction: column; }
.case-card-body h3 { font-family: var(--at-font-display); font-weight: 700; font-size: 1rem; color: var(--at-navy); margin-bottom: 12px; line-height: 1.4; }
.case-card-body p { font-size: .85rem; line-height: 1.65; color: var(--at-navy); margin-bottom: 20px; flex: 1; }
.case-card-tech { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.case-card-foot { padding-top: 16px; border-top: 1px solid var(--at-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.case-card-foot .highlight { font-family: var(--at-font-display); font-weight: 700; font-size: .8rem; color: var(--at-navy); }
.case-card.is-featured .case-card-foot .highlight { color: var(--at-gold); }
.case-card-open {
  font-family: var(--at-font-display); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--at-grey); display: flex; align-items: center; gap: 6px;
  white-space: nowrap; flex-shrink: 0;
  transition: color var(--at-duration-fast) var(--at-ease);
  background: none; border: none; padding: 0; cursor: pointer;
}
.case-card-open:hover { color: var(--at-navy); }

/* ---------------- Case study modal ---------------- */
.modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 400;
  background: rgba(8, 40, 64, .88);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  padding: 60px var(--at-wrap-px);
}
.modal-overlay.is-open { display: block; }
.modal-panel { max-width: 860px; margin: 0 auto; background: #fff; border-radius: 20px; overflow: hidden; animation: at-slide-up .4s var(--at-ease); }
.modal-header { padding: 44px 52px 36px; border-bottom: 1px solid var(--at-border); display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.modal-header h2 { font-family: var(--at-font-display); font-weight: 700; font-size: 1.4rem; color: var(--at-navy); line-height: 1.3; max-width: 640px; }
.modal-close {
  width: 40px; height: 40px; border-radius: 50%;
  background: #f0f4f8; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 4px;
  transition: background var(--at-duration-fast) var(--at-ease);
}
.modal-close:hover { background: #e2e8ee; }
.modal-body { padding: 48px 52px; }
.modal-body h3 { font-family: var(--at-font-display); font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--at-gold); margin-bottom: 16px; }
.modal-body .modal-block + h3 { margin-top: 36px; }
.modal-solution-item { padding: 20px 24px; background: #f8f9fb; border-radius: 10px; border-left: 3px solid var(--at-gold); }
.modal-solution-item + .modal-solution-item { margin-top: 16px; }
.modal-solution-item .t { font-family: var(--at-font-display); font-weight: 700; font-size: .85rem; color: var(--at-navy); margin-bottom: 6px; }
.modal-solution-item .d { font-size: .88rem; line-height: 1.65; color: var(--at-navy); }
.modal-impact-grid { display: grid; gap: 16px; }
.modal-impact-item { padding: 20px 24px; background: var(--at-navy-darker); border-radius: 10px; }
.modal-impact-item .t { font-family: var(--at-font-display); font-weight: 700; font-size: .85rem; color: var(--at-gold); margin-bottom: 6px; }
.modal-impact-item .d { font-size: .88rem; line-height: 1.65; color: rgba(255, 255, 255, .65); }
.modal-tech-row { padding: 24px 52px 44px; display: flex; gap: 8px; flex-wrap: wrap; }

@keyframes at-slide-up { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 980px) {
  .case-grid { grid-template-columns: 1fr !important; }
}


/* ---------------- Info card (contact channels, etc.) ---------------- */
.info-card {
  border: 1.5px solid var(--at-border);
  border-radius: 12px;
  padding: 24px 20px;
  transition: border-color .25s var(--at-ease), box-shadow .25s var(--at-ease);
}
.info-card:hover { border-color: var(--at-navy); box-shadow: 0 8px 24px -8px rgba(16, 68, 107, .1); }
.info-card .label { font-family: var(--at-font-display); font-weight: 700; font-size: .9rem; color: var(--at-navy); margin-bottom: 8px; }
.info-card .hint { font-family: var(--at-font-display); font-size: .8rem; color: var(--at-grey-soft); margin-bottom: 6px; }
.info-card a { font-family: var(--at-font-display); font-size: .8rem; color: var(--at-navy); transition: opacity var(--at-duration-fast) var(--at-ease); word-break: break-word; }
.info-card a:hover { opacity: .7; }
.info-card p { font-family: var(--at-font-display); font-size: .9rem; color: var(--at-navy); line-height: 1.7; }
.info-card .phone { display: inline-block; margin-top: 8px; font-family: var(--at-font-display); font-size: .9rem; font-weight: 700; color: var(--at-gold); }

/* ---------------- RGPD / consent notice ---------------- */
.rgpd-notice {
  background: #f8f9fb; border-radius: 8px; padding: 16px 18px;
  font-size: .75rem; line-height: 1.6; color: var(--at-grey-soft);
}
.rgpd-notice strong { color: var(--at-navy); }
.rgpd-notice a { color: var(--at-gold); }

.checkbox-field { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.checkbox-field input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--at-navy); flex-shrink: 0; }
.checkbox-field span { font-size: .8rem; line-height: 1.5; color: var(--at-grey-soft); }
.checkbox-field a { color: var(--at-gold); }


/* ---------------- Underline tabs (Insights/Noticias filter) ---------------- */
.underline-tabs { display: flex; gap: 0; border-bottom: 1.5px solid var(--at-border); }
.underline-tab {
  padding: 12px 20px;
  font-family: var(--at-font-display);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; border: none; background: none;
  border-bottom: 2px solid transparent;
  color: var(--at-grey-soft);
  margin-bottom: -1.5px;
  transition: color var(--at-duration-fast) var(--at-ease), border-color var(--at-duration-fast) var(--at-ease);
}
.underline-tab.is-active { color: var(--at-navy); border-bottom-color: var(--at-gold); }

/* ---------------- Post card (Insights / Noticias / Post detail listings) ---------------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.post-card { display: flex; flex-direction: column; cursor: pointer; text-decoration: none; }
.post-card-img { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 20px; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--at-ease); }
.post-card-img:hover img { transform: scale(1.04); }
.post-card .cat-label { font-family: var(--at-font-display); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--at-gold); margin-bottom: 8px; display: block; }
.post-card .post-date { font-family: var(--at-font-display); font-size: .78rem; color: var(--at-grey-soft); margin-bottom: 10px; display: block; }
.post-card h3 { font-family: var(--at-font-display); font-weight: 700; font-size: 1rem; color: var(--at-navy); line-height: 1.45; transition: color var(--at-duration-fast) var(--at-ease); }
.post-card:hover h3 { color: var(--at-gold-dark); }

@media (max-width: 980px) {
  .post-grid { grid-template-columns: 1fr !important; }
}


/* ---------------- Article prose (blog/post body) ---------------- */
.article-prose { max-width: 780px; margin: 0 auto; }
.article-prose p { font-size: 1rem; line-height: 1.85; color: var(--at-navy); margin-bottom: 20px; }
.article-prose h2 { font-family: var(--at-font-display); font-weight: 700; font-size: 1.3rem; color: var(--at-navy); margin: 36px 0 14px; }
.article-prose ul { margin: 0 0 20px 0; display: flex; flex-direction: column; gap: 10px; }
.article-prose li { position: relative; padding-left: 18px; font-size: 1rem; line-height: 1.7; color: var(--at-navy); }
.article-prose li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--at-gold); }

/* ---------------- Article header ---------------- */
.article-eyebrow { display: inline-block; font-family: var(--at-font-display); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--at-gold); margin-bottom: 14px; }
.article-header h1 { font-family: var(--at-font-display); font-weight: 800; font-size: clamp(1.9rem, 3.8vw, 3rem); color: var(--at-navy); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 16px; max-width: 900px; }
.article-meta { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
.article-meta span { font-family: var(--at-font-display); font-size: .82rem; color: var(--at-grey-soft); }
.article-meta .divider { width: 1px; height: 14px; background: #dde1e5; }
.article-hero-image { margin-bottom: 60px; }
.article-hero-image img { width: 100%; display: block; max-height: 560px; object-fit: cover; }

/* ---------------- Sticky social rail ---------------- */
.social-rail { display: flex; flex-direction: column; gap: 12px; }
.social-rail a {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--at-navy);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 15px;
  transition: background var(--at-duration-fast) var(--at-ease);
}
.social-rail a:hover { background: var(--at-gold); }

/* ---------------- Related posts ---------------- */
.related-posts { padding: 80px 0 110px; background: var(--at-bg-grey); }
.related-posts h2 { font-family: var(--at-font-display); font-weight: 700; font-size: 1.3rem; color: var(--at-navy); margin-bottom: 36px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.related-card { display: flex; flex-direction: column; text-decoration: none; }
.related-card-img { aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 16px; }
.related-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--at-ease); }
.related-card:hover .related-card-img img { transform: scale(1.05); }
.related-card .related-date { font-family: var(--at-font-display); font-size: .7rem; color: var(--at-grey-soft); margin-bottom: 8px; }
.related-title { font-family: var(--at-font-display); font-weight: 700; font-size: .92rem; color: var(--at-navy); line-height: 1.4; transition: color var(--at-duration-fast) var(--at-ease); }
.related-card:hover .related-title { color: var(--at-gold); }

@media (max-width: 980px) {
  .related-grid { grid-template-columns: 1fr !important; }
}


/* ---------------- Author block (article byline) ---------------- */
.author-block {
  margin-top: 56px; padding-top: 40px;
  border-top: 1.5px solid var(--at-border);
  display: flex; align-items: center; gap: 24px;
}
.author-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--at-bg-grey);
  flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-name { font-family: var(--at-font-display); font-weight: 700; font-size: .95rem; color: var(--at-navy); margin-bottom: 4px; }
.author-role { font-family: var(--at-font-display); font-size: .82rem; color: var(--at-grey-soft); margin-bottom: 8px; }
.author-contact {
  font-family: var(--at-font-display); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--at-gold);
  border-bottom: 1px solid var(--at-gold);
  padding-bottom: 1px;
  transition: opacity var(--at-duration-fast) var(--at-ease);
}
.author-contact:hover { opacity: .7; }


/* ---------------- Accordion ---------------- */
.accordion-item { border-top: 1px solid #dde1e5; }
.accordion-item:last-child { border-bottom: 1px solid #dde1e5; }
.accordion-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0; background: none; border: none; cursor: pointer; text-align: left; gap: 16px;
}
.accordion-toggle-left { display: flex; align-items: center; gap: 16px; }
.accordion-toggle-left img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.accordion-toggle-label { font-family: var(--at-font-display); font-weight: 600; font-size: 1rem; color: var(--at-navy); }
.accordion-arrow {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid #c5cbd1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform var(--at-duration-fast) var(--at-ease), border-color var(--at-duration-fast) var(--at-ease);
}
.accordion-arrow.is-open { transform: rotate(180deg); border-color: var(--at-navy); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height .4s var(--at-ease); }
.accordion-body p { padding: 0 0 20px 60px; font-size: .9rem; line-height: 1.75; color: var(--at-navy); }

/* ---------------- Video CTA section ---------------- */
.video-cta { padding: 110px 0; background: var(--at-navy); position: relative; overflow: hidden; }
.video-cta video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.video-cta-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(8, 40, 64, .92) 0%, rgba(8, 40, 64, .75) 50%, rgba(8, 40, 64, .6) 100%); z-index: 1; pointer-events: none; }
.video-cta .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 2; }
.video-cta h2 { font-family: var(--at-font-display); font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.6rem); color: #fff; line-height: 1.15; letter-spacing: -.01em; margin-bottom: 24px; }
.video-cta p { font-size: 1rem; line-height: 1.8; color: rgba(255, 255, 255, .6); margin-bottom: 24px; }
.video-cta .halo-btn.on-dark { color: #fff; }

/* ---------------- Mini stat grid (dark, 4-cell) ---------------- */
.mini-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255, 255, 255, .08); border-radius: 16px; overflow: hidden; }
.mini-stat-cell { background: rgba(255, 255, 255, .04); padding: 36px 28px; text-align: center; }
.mini-stat-cell .num { font-family: var(--at-font-display); font-weight: 300; font-size: 3rem; color: #fff; line-height: 1; }
.mini-stat-cell .concept { font-size: .8rem; color: rgba(255, 255, 255, .5); margin-top: 10px; line-height: 1.5; }

@media (max-width: 980px) {
  .video-cta .wrap { grid-template-columns: 1fr; }
}


/* ---------------- Product page: dark hero ---------------- */
.product-hero {
  min-height: 78vh; display: flex; align-items: center;
  position: relative; overflow: hidden;
  background: var(--at-navy-darker);
  padding-top: 72px;
}
.product-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(241, 189, 41, .07) 0%, transparent 70%);
  pointer-events: none;
}
.product-hero .wrap { position: relative; z-index: 2; padding-top: 70px; padding-bottom: 100px; box-sizing: border-box; width: 100%; }
.product-hero-content { max-width: 720px; margin-left: 0; margin-right: auto; }
.product-hero .eyebrow { text-transform: none; }
.product-hero h1 {
  font-family: var(--at-font-display); font-weight: 800;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  color: #fff; line-height: 1.1; letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.product-hero h1 .accent { color: var(--at-gold); }
.product-hero-desc { font-size: 1rem; line-height: 1.75; color: rgba(255, 255, 255, .65); max-width: 580px; margin-bottom: 40px; }

/* ---------------- Bullet list (plain, non-prose) ---------------- */
.bullet-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.bullet-item { display: flex; align-items: flex-start; gap: 14px; }
.bullet-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--at-gold); flex-shrink: 0; margin-top: 8px; }
.bullet-item p { font-size: .95rem; line-height: 1.7; color: var(--at-navy); }

/* ---------------- Callout box ---------------- */
.callout-box { padding: 20px 24px; border-radius: 12px; border-left: 3px solid var(--at-gold); background: #f8f9fb; margin-top: 8px; }
.callout-box p { font-size: .95rem; line-height: 1.75; color: var(--at-navy); font-weight: 700; }

/* ---------------- Process grid (numbered steps, alternating fills) ---------------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: #dde1e5; border-radius: 20px; overflow: hidden; }
.process-step { padding: 40px 32px; display: flex; flex-direction: column; gap: 20px; background: var(--at-bg-grey); }
.process-step.on-dark { background: var(--at-navy-darker); }
.process-step.on-gold { background: var(--at-gold); }
.process-step.on-white { background: #fff; }
.process-step-top { display: flex; align-items: center; gap: 12px; }
.process-step-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff; }
.process-step-icon svg { width: 20px; height: 20px; }
.process-step.on-dark .process-step-icon { background: rgba(241, 189, 41, .15); }
.process-step.on-gold .process-step-icon { background: rgba(16, 68, 107, .12); }
.process-step.on-dark .process-step-icon svg [stroke]:not([stroke="none"]) { stroke: var(--at-gold); }
.process-step-number { font-family: var(--at-font-display); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--at-gold); }
.process-step.on-gold .process-step-number { color: var(--at-navy-darker); }
.process-step-title { font-family: var(--at-font-display); font-weight: 700; font-size: .95rem; color: var(--at-navy); margin-bottom: 8px; }
.process-step.on-dark .process-step-title { color: #fff; }
.process-step.on-gold .process-step-title { color: var(--at-navy-darker); }
.process-step-text { font-size: .85rem; line-height: 1.6; color: var(--at-navy); }
.process-step.on-dark .process-step-text { color: rgba(255, 255, 255, .6); }
.process-step.on-gold .process-step-text { color: var(--at-navy); }

/* ---------------- Feature/differentiator grid (icon cards, mixed light/dark) ---------------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #dde1e5; border-radius: 20px; overflow: hidden; }
.feature-cell { padding: 40px 32px; background: #fff; transition: background var(--at-duration-fast) var(--at-ease); }
/* Fondo oscuro = simulación del :hover, no una variante de contenido (ver nota
   arriba en .process-step). */
.feature-cell:hover, .feature-cell.on-dark { background: var(--at-navy-darker); }
.feature-cell-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--at-bg-grey); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: background var(--at-duration-fast) var(--at-ease); }
.feature-cell-icon svg { width: 22px; height: 22px; }
.feature-cell:hover .feature-cell-icon, .feature-cell.on-dark .feature-cell-icon { background: rgba(241, 189, 41, .15); }
.feature-cell-icon svg [stroke]:not([stroke="none"]) { transition: stroke var(--at-duration-fast) var(--at-ease); }
.feature-cell:hover .feature-cell-icon svg [stroke]:not([stroke="none"]), .feature-cell.on-dark .feature-cell-icon svg [stroke]:not([stroke="none"]) { stroke: var(--at-gold); }
.feature-cell h3 { font-family: var(--at-font-display); font-weight: 700; font-size: 1rem; color: var(--at-navy); margin-bottom: 12px; transition: color var(--at-duration-fast) var(--at-ease); }
.feature-cell:hover h3, .feature-cell.on-dark h3 { color: #fff; }
.feature-cell p { font-size: .87rem; line-height: 1.7; color: var(--at-navy); transition: color var(--at-duration-fast) var(--at-ease); }
.feature-cell:hover p, .feature-cell.on-dark p { color: rgba(255, 255, 255, .6); }

/* ---------------- Audience grid (simple text cells, mixed light/dark) ---------------- */
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #dde1e5; border-radius: 20px; overflow: hidden; }
.audience-cell { padding: 36px 28px; background: #fff; transition: background var(--at-duration-fast) var(--at-ease); }
/* Fondo oscuro = simulación del :hover, no una variante de contenido (ver nota
   arriba en .process-step). */
.audience-cell:hover, .audience-cell.on-dark { background: var(--at-navy-darker); }
.audience-cell .label { font-family: var(--at-font-display); font-weight: 700; font-size: .95rem; color: var(--at-navy); margin-bottom: 8px; transition: color var(--at-duration-fast) var(--at-ease); }
.audience-cell:hover .label, .audience-cell.on-dark .label { color: var(--at-gold); }
.audience-cell p { font-size: .85rem; line-height: 1.7; color: var(--at-navy); transition: color var(--at-duration-fast) var(--at-ease); }
.audience-cell:hover p, .audience-cell.on-dark p { color: rgba(255, 255, 255, .6); }

/* ---------------- Product screenshot media placeholder ---------------- */
.product-media {
  border-radius: 16px; overflow: hidden;
  background-size: cover; background-position: center;
  aspect-ratio: 4 / 3;
}

/* ---------------- Outline button (secondary CTA) ---------------- */
.outline-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--at-font-display); font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--at-navy);
  border: 1.5px solid var(--at-navy);
  padding: 12px 24px;
  border-radius: 999px;
  transition: background var(--at-duration-fast) var(--at-ease), color var(--at-duration-fast) var(--at-ease);
}
.outline-btn:hover { background: var(--at-navy); color: #fff; }

@media (max-width: 980px) {
  .process-grid { grid-template-columns: 1fr !important; }
  .feature-grid { grid-template-columns: 1fr !important; }
  .audience-grid { grid-template-columns: 1fr !important; }
}


/* ---------------- Flow step list (numbered vertical steps) ---------------- */
.flow-card { background: #fff; border-radius: 16px; padding: 40px 32px; border: 1.5px solid #dde1e5; }
.flow-card-label { font-family: var(--at-font-display); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--at-grey-soft); margin-bottom: 24px; }
.flow-step { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--at-bg-grey); }
.flow-step:last-child { border-bottom: none; }
.flow-step-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--at-bg-grey); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.flow-step-icon svg { width: 14px; height: 14px; }
.flow-step-icon.on-dark { background: var(--at-navy-darker); }
.flow-step-icon.on-gold { background: var(--at-gold); }
.flow-step-icon.on-dark svg [stroke]:not([stroke="none"]) { stroke: #fff; }
.flow-step-icon.on-gold svg [stroke]:not([stroke="none"]) { stroke: var(--at-navy-darker); }
.flow-step span.label { font-family: var(--at-font-display); font-size: .9rem; color: var(--at-navy); }
.flow-step span.label.strong { font-weight: 600; }

/* ---------------- Bordered card grid (feature cards with hover) ---------------- */
.bordered-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bordered-card { padding: 36px 28px; border: 1.5px solid #dde1e5; border-radius: 16px; transition: border-color var(--at-duration-fast) var(--at-ease), box-shadow var(--at-duration-fast) var(--at-ease); }
.bordered-card:hover { border-color: var(--at-navy); box-shadow: 0 16px 40px -12px rgba(16, 68, 107, .1); }
.bordered-card-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--at-bg-grey); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.bordered-card-icon svg { width: 20px; height: 20px; }
.bordered-card h3 { font-family: var(--at-font-display); font-weight: 700; font-size: 1rem; color: var(--at-navy); margin-bottom: 10px; }
.bordered-card p { font-size: .87rem; line-height: 1.7; color: var(--at-navy); }

/* ---------------- Comparison grid (pro/con two-column) ---------------- */
.comparison-section { padding: 110px 0; background: var(--at-navy-darker); }
.comparison-section .section-head h2 { color: #fff; }
.comparison-section .section-head p:not(.eyebrow) { color: rgba(255, 255, 255, .6); margin-top: 16px; max-width: 580px; }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: 16px; overflow: hidden; }
.comparison-col { padding: 28px 32px; background: rgba(255, 255, 255, .05); }
.comparison-col.is-positive { background: rgba(241, 189, 41, .06); border: 1.5px solid rgba(241, 189, 41, .2); }
.comparison-col-label { font-family: var(--at-font-display); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--at-grey-soft); margin-bottom: 24px; }
.comparison-col.is-positive .comparison-col-label { color: var(--at-gold); }
.comparison-row { display: flex; align-items: center; gap: 12px; }
.comparison-row + .comparison-row { margin-top: 14px; }
.comparison-row .mark { flex-shrink: 0; }
.comparison-row .mark.negative { color: #e55; }
.comparison-row .mark.positive { color: var(--at-gold); }
.comparison-row span.text { font-family: var(--at-font-display); font-size: .9rem; color: rgba(255, 255, 255, .5); }
.comparison-col.is-positive .comparison-row span.text { color: rgba(255, 255, 255, .8); }
.comparison-footnote {
  margin-top: 32px; padding: 20px 28px;
  background: rgba(255, 255, 255, .05); border-radius: 10px;
  display: flex; align-items: center; gap: 16px;
}
.comparison-footnote span { font-family: var(--at-font-display); font-size: .85rem; color: rgba(255, 255, 255, .6); }

@media (max-width: 980px) {
  .bordered-card-grid { grid-template-columns: 1fr !important; }
  .comparison-grid { grid-template-columns: 1fr; }
}


/* ---------------- Responsive (pre-existing, preserved as-is) ---------------- */
/* !important: varios bloques (card-grid, stat-grid, audience-grid, case-studies-grid,
   post-filter-grid, step-grid) ponen grid-template-columns como estilo INLINE en
   render.php (para el control "columnas por fila" del editor) — un inline style gana
   siempre sobre una regla externa normal, así que sin !important estos breakpoints
   nunca colapsaban las columnas en tablet/móvil, por muy estrecha que fuera la pantalla. */
@media (max-width: 980px) {
  .card-grid { grid-template-columns: 1fr !important; }
  .stat-grid { grid-template-columns: 1fr !important; gap: 50px; }
  .stat-block:not(:first-child)::before { left: 0; right: 0; top: -25px; bottom: auto; width: auto; height: 1px; }
  .solution-grid { grid-template-columns: 1fr !important; }
  .contact-form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 var(--at-wrap-px-mobile); }
  .form-actions { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ==========================================================================
   RESPONSIVE — additive breakpoints (Laptop / Tablet / Mobile)
   Every rule below targets a gap the existing breakpoints don't cover.
   Existing rules above are untouched.
   ========================================================================== */

/* ---------------- Laptop (1024–1180): two-up before the 980px full stack ---------------- */
/* !important por el mismo motivo que el bloque de arriba: estos grids reciben su
   grid-template-columns como estilo inline desde render.php. */
@media (max-width: 1180px) and (min-width: 981px) {
  .card-grid,
  .process-grid,
  .feature-grid,
  .audience-grid,
  .case-grid,
  .post-grid,
  .related-grid,
  .methodology-grid,
  .bordered-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------------- Tablet landscape / portrait (≤900 / ≤768) ---------------- */
@media (max-width: 900px) {
  .site-header { padding: 20px 0; }
  .site-header.is-scrolled { padding: 12px 0; }
  .logo-lockup { height: 36px; }

  .halo-btn .disc, .halo-submit .disc { width: 40px; height: 40px; }
  .halo-btn, .halo-submit { gap: 12px; }

  .icon-card, .flow-card, .bordered-card { padding: 30px 26px; }
  .process-step, .feature-cell, .audience-cell { padding: 32px 26px; }
  .solution-card { padding: 34px 30px; }

  .modal-overlay { padding: 40px var(--at-wrap-px-tablet); }
  .modal-header { padding: 32px 34px 26px; }
  .modal-body { padding: 34px; }
  .modal-tech-row { padding: 0 34px 34px; }

  .underline-tabs { flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .nav-overlay a { font-size: 1.7rem; padding: 10px 0; }

  .footer-top { justify-content: center; text-align: center; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-links { justify-content: center; flex-wrap: wrap; }

  .comparison-footnote { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------------- Nav overlay: pantallas de poca altura (portátiles anchos
   pero bajos, ~650-800px) — por ANCHO no entran en los breakpoints móviles
   de arriba, así que necesitan su propio ajuste por ALTURA para que la
   lista de ítems (creciente, no siempre son 8) no quede pegada a la
   cabecera arriba ni al borde inferior. */
@media (max-height: 800px) and (min-width: 769px) {
  .nav-overlay { padding: 100px 24px 50px; }
  .nav-overlay a { font-size: 1.7rem; padding: 8px 0; }
}
@media (max-height: 620px) and (min-width: 769px) {
  .nav-overlay { padding: 90px 24px 40px; }
  .nav-overlay a { font-size: 1.4rem; padding: 6px 0; }
}

/* ---------------- Large mobile (≤640, layered on top of the preserved rule) ---------------- */
@media (max-width: 640px) {
  .site-header { padding: 16px 0; }
  .site-header.is-scrolled { padding: 10px 0; }
  .logo-lockup { height: 32px; }
  .burger { width: 40px; height: 40px; }

  .nav-overlay a { font-size: 1.4rem; }

  .halo-btn { font-size: .68rem; gap: 10px; }
  .halo-btn .disc, .halo-submit .disc { width: 36px; height: 36px; }
  .halo-btn .disc svg, .halo-submit .disc svg { width: 12px; height: auto; }
  .halo-submit { padding: 6px 6px 6px 20px; }
  .outline-btn { padding: 11px 20px; font-size: .7rem; }

  .icon-card, .flow-card, .bordered-card { padding: 26px 22px; }
  .icon-ring { width: 50px; height: 50px; margin-bottom: 20px; }
  .process-step, .feature-cell, .audience-cell { padding: 28px 22px; }
  .solution-card { padding: 30px 26px; }

  .case-card-head { padding: 24px 24px 0; }
  .case-card-body { padding: 0 24px 24px; }
  .case-studies-head { align-items: flex-start; }

  .modal-overlay { padding: 24px var(--at-wrap-px-mobile); }
  .modal-panel { border-radius: 14px; }
  .modal-header { padding: 26px 24px 20px; gap: 16px; }
  .modal-header h2 { font-size: 1.12rem; }
  .modal-body { padding: 26px 24px; }
  .modal-tech-row { padding: 0 24px 30px; }
  .modal-close { width: 34px; height: 34px; }

  .filter-tabs { gap: 6px; }
  .filter-tab { padding: 9px 14px; font-size: .66rem; }
  .underline-tab { padding: 10px 14px; font-size: .68rem; }

  .footer-group { flex-direction: column; gap: 10px; }
  .socials { gap: 12px; }

  .sector-tab { padding: 26px 24px; }
  .sector-panel { padding: 36px 26px; }

  .accordion-toggle-label { font-size: .92rem; }
  .accordion-body p { padding-left: 0; padding-top: 4px; }
  .accordion-toggle-left img { width: 36px; height: 36px; }

  .related-posts { padding: 60px 0 80px; }
  .article-meta { flex-wrap: wrap; row-gap: 8px; }
}

/* ---------------- Small mobile (≤480) ---------------- */
@media (max-width: 480px) {
  .halo-btn { gap: 8px; }
  .halo-btn .disc, .halo-submit .disc { width: 32px; height: 32px; }

  .case-card-tags { flex-wrap: wrap; gap: 8px; }
  .case-card-foot { flex-direction: column; align-items: flex-start; gap: 10px; }

  .sector-tab-title { font-size: .88rem; }
  .sector-tab { padding: 22px 20px; }

  .info-card { padding: 20px 18px; }
  .modal-header { flex-direction: column; }
  .modal-close { margin-top: 0; align-self: flex-end; }

  .tc-nav button { width: 36px; height: 36px; }
}

/* ---------------- Product hero / video CTA / comparison — mobile height & padding ---------------- */
@media (max-width: 900px) {
  .product-hero { min-height: auto; }
  .product-hero .wrap { padding-top: 60px; padding-bottom: 70px; }
  .video-cta, .comparison-section { padding: 80px 0; }
}
@media (max-width: 640px) {
  .product-hero .wrap { padding-top: 55px; padding-bottom: 56px; }
  .product-hero-desc { margin-bottom: 32px; }
  .video-cta, .comparison-section { padding: 64px 0; }
  .mini-stat-cell { padding: 28px 20px; }
  .mini-stat-cell .num { font-size: 2.4rem; }
}
/* ==========================================================================
   AUGURA TECH — ANIMATIONS
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--at-duration-slow) var(--at-ease),
              transform var(--at-duration-slow) var(--at-ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* El JS que añade .is-visible a .reveal solo corre en el front (app.js se
   encola en wp_enqueue_scripts, no en el editor) — en el lienzo del editor
   .reveal se quedaba en opacity:0 para siempre, invisible. Solo dentro del
   editor, forzamos que se vea igual que su estado final ya revelado. */
.editor-styles-wrapper .reveal { opacity: 1 !important; transform: none !important; }

/* Tipografía por defecto en el editor para contenido "suelto" (el cuerpo real
   de un post/página, editado con los bloques nativos de párrafo/lista/
   encabezado) — sin esto, el canvas del editor se ve con el texto plano del
   navegador (sin espaciado entre párrafos, listas sin viñetas con estilo),
   muy distinto de cómo se ve luego en el front (p.ej. .article-prose). El
   front-end no se ve afectado: sus selectores (más específicos) siempre
   ganan sobre este valor por defecto del editor. */
.editor-styles-wrapper p { font-size: 1rem; line-height: 1.85; color: var(--at-navy); margin: 0 0 20px; }
.editor-styles-wrapper h2 { font-family: var(--at-font-display); font-weight: 700; color: var(--at-navy); margin: 36px 0 14px; }
.editor-styles-wrapper h3 { font-family: var(--at-font-display); font-weight: 700; color: var(--at-navy); margin: 28px 0 12px; }
.editor-styles-wrapper h4 { font-family: var(--at-font-display); font-weight: 700; color: var(--at-navy); margin: 24px 0 10px; }
.editor-styles-wrapper ul, .editor-styles-wrapper ol { margin: 0 0 20px; padding-left: 22px; }
.editor-styles-wrapper li { font-size: 1rem; line-height: 1.7; color: var(--at-navy); margin-bottom: 8px; }
.editor-styles-wrapper strong { font-weight: 700; }

@keyframes at-float-disc {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
/* ==========================================================================
   ALEJANDRÍA PAGE — layout unique to alejandria.html
   ========================================================================== */

.product-problem { padding: 110px 0; background: #fff; }
/* .product-problem se reutiliza en 2 diseños distintos (AlejandrIA: .wrap >
   .product-problem-copy + .product-problem-notes, 50/50 — BabilonIA: .wrap >
   div + div sin clases, 3fr/1fr). Igual que .product-about, se escopa con
   :has() para que cada página reciba su propia proporción de columnas. */
.product-problem .wrap:has( > .product-problem-notes) { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.product-problem h2 { font-family: var(--at-font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--at-navy); line-height: 1.15; letter-spacing: -.01em; margin-bottom: 24px; }
.product-problem-copy p:not(.eyebrow) { font-size: 1rem; line-height: 1.8; color: var(--at-navy); margin-bottom: 28px; }
.product-problem-notes { display: flex; flex-direction: column; gap: 12px; padding-top: 48px; }
.product-note { padding: 20px 24px; border-radius: 12px; border-left: 3px solid #dde1e5; background: #f8f9fb; }
.product-note.is-highlight { border-left-color: var(--at-gold); background: #fff8e1; }
.product-note p { font-size: .9rem; line-height: 1.7; color: var(--at-navy); }
.product-note.is-highlight p { font-weight: 600; }

.product-about { padding: 110px 0; background: var(--at-bg-grey); }
/* .product-about se reutiliza en 2 diseños distintos (BabilonIA: .wrap >
   .section-head + .product-about-grid — AlejandrIA: .wrap > .product-about-copy
   + flow-card, sin .section-head). El estático original cargaba un CSS por
   página; aquí conviven en una sola hoja, así que la rejilla en .wrap solo se
   activa cuando .wrap tiene el hijo directo .product-about-copy (variante
   AlejandrIA) — si no, .product-about-grid se encarga de su propia rejilla. */
.product-about .wrap:has( > .product-about-copy) { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.product-about h2 { font-family: var(--at-font-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--at-navy); letter-spacing: -.01em; margin-bottom: 24px; }
.product-about-copy p:not(.eyebrow) { font-size: 1rem; line-height: 1.8; color: var(--at-navy); margin-bottom: 20px; }
.product-about-copy p strong { color: var(--at-navy); }

.product-section { padding: 110px 0; }
.product-section.on-white { background: #fff; }
.product-section.on-grey { background: var(--at-bg-grey); }
.product-section .section-head { margin-bottom: 64px; }
.product-section .section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.product-section .section-head p:not(.eyebrow) { font-size: 1rem; color: var(--at-navy); margin-top: 16px; max-width: 580px; }

.product-demo { padding: 110px 0; background: var(--at-bg-grey); }
.product-demo .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.product-demo h2 { font-family: var(--at-font-display); font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.3rem); color: var(--at-navy); margin-bottom: 20px; letter-spacing: -.01em; }
.product-demo-copy p:not(.eyebrow) { font-size: 1rem; line-height: 1.7; color: var(--at-navy); max-width: 380px; }

@media (max-width: 980px) {
  .product-problem .wrap:has( > .product-problem-notes) { grid-template-columns: 1fr; }
  .product-about .wrap:has( > .product-about-copy) { grid-template-columns: 1fr; }
  .product-demo .wrap { grid-template-columns: 1fr; }
}

/* ---------------- Additive responsive refinements ---------------- */
@media (max-width: 900px) {
  .product-problem, .product-about, .product-section, .product-demo { padding: 80px 0; }
  .product-problem-notes { padding-top: 0; }
}
@media (max-width: 640px) {
  .product-problem, .product-about, .product-section, .product-demo { padding: 60px 0; }
  .product-demo .wrap { gap: 40px; }
  .product-note { padding: 16px 18px; }
}
/* ==========================================================================
   ARTICLE DETAIL PAGES — shared layout for post.html / post-insights.html
   ========================================================================== */

.article { padding: 105px 0 80px; position: relative; }
.article-container { max-width: 1240px; margin: 0 auto; padding: 0 var(--at-wrap-px); position: relative; }
.article-back-link {
  display: none; /* preserved from original: back link markup present but hidden */
  align-items: center; gap: 8px;
  font-family: var(--at-font-display); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--at-grey-soft);
  margin-bottom: 36px;
  transition: color var(--at-duration-fast) var(--at-ease);
}
.article-back-link:hover { color: var(--at-navy); }

.article-body-wrap {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 40px;
  align-items: start;
}
.social-rail-slot { position: sticky; top: 130px; align-self: start; }

/* ---------------- Additive responsive refinements ---------------- */
@media (max-width: 900px) {
  .article { padding: 90px 0 60px; }
  .article-hero-image { margin-bottom: 40px; }
  .author-block { margin-top: 40px; padding-top: 28px; }
}
@media (max-width: 768px) {
  .article-body-wrap { grid-template-columns: 1fr; gap: 28px; }
  .social-rail { flex-direction: row; }
  .social-rail-slot { position: static; }
}
@media (max-width: 640px) {
  .article { padding: 80px 0 48px; }
  .article-hero-image { margin-bottom: 28px; }
  .article-meta { margin-bottom: 24px; }
  .author-block { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------------- Legal pages (Compliance / Privacidad / Aviso legal) ----------------
   Título + container por defecto (wp:post-title + wp:post-content), con el
   mismo patrón section+.wrap que el resto del tema. */
.legal-page { padding: 160px 0 140px; min-height: 40vh; background: #fff; }
.legal-page .wrap { max-width: 860px; }
.legal-page h1 { font-family: var(--at-font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); color: var(--at-navy); letter-spacing: -.02em; margin: 0 0 40px; }
.legal-page h2 { font-family: var(--at-font-display); font-weight: 700; font-size: 1.4rem; color: var(--at-navy); margin: 44px 0 16px; }
.legal-page h3 { font-family: var(--at-font-display); font-weight: 700; font-size: 1.15rem; color: var(--at-navy); margin: 32px 0 12px; }
.legal-page p { font-size: 1rem; line-height: 1.85; color: var(--at-navy); margin: 0 0 20px; }
.legal-page ul, .legal-page ol { margin: 0 0 20px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.legal-page li { font-size: 1rem; line-height: 1.7; color: var(--at-navy); }
.legal-page a { color: var(--at-navy); text-decoration: underline; }
.legal-page strong { font-weight: 700; }
.legal-page h2:first-child, .legal-page h3:first-child { margin-top: 0; }
@media (max-width: 640px) {
  .legal-page { padding: 120px 0 100px; }
}

/* ==========================================================================
   BABILONIA PAGE — layout unique to babilonia.html
   ========================================================================== */

.product-problem { padding: 110px 0; background: #fff; }
.product-problem .wrap { display: grid; grid-template-columns: 3fr 1fr; gap: 80px; align-items: center; }
.product-problem h2 { font-family: var(--at-font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--at-navy); line-height: 1.15; letter-spacing: -.01em; margin-bottom: 28px; }
.product-problem > .wrap > div:first-child > p:not(.eyebrow) { font-size: 1rem; line-height: 1.8; color: var(--at-navy); margin-bottom: 20px; }

.product-about { padding: 110px 0; background: var(--at-bg-grey); }
.product-about .section-head { max-width: 760px; margin-bottom: 64px; }
.product-about .section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.product-about .section-head p:not(.eyebrow) { font-size: 1rem; color: var(--at-navy); margin-top: 0; }
.product-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.product-about-grid p { font-size: 1rem; line-height: 1.8; color: var(--at-navy); margin-bottom: 24px; }

.product-section { padding: 110px 0; }
.product-section.on-white { background: #fff; }
.product-section.on-grey { background: var(--at-bg-grey); }
.product-section .section-head { margin-bottom: 64px; }
.product-section .section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

.product-demo { padding: 110px 0; background: var(--at-bg-grey); }
.product-demo .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.product-demo h2 { font-family: var(--at-font-display); font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.3rem); color: var(--at-navy); margin-bottom: 20px; letter-spacing: -.01em; }
.product-demo-copy p:not(.eyebrow) { font-size: 1rem; line-height: 1.7; color: var(--at-navy); max-width: 380px; }

@media (max-width: 980px) {
  .product-problem .wrap { grid-template-columns: 1fr; }
  .product-about-grid { grid-template-columns: 1fr; }
  .product-demo .wrap { grid-template-columns: 1fr; }
}

/* ---------------- Additive responsive refinements ---------------- */
@media (max-width: 900px) {
  .product-problem, .product-about, .product-section, .product-demo { padding: 80px 0; }
  .product-about-grid { gap: 24px; }
}
@media (max-width: 640px) {
  .product-problem, .product-about, .product-section, .product-demo { padding: 60px 0; }
  .product-demo .wrap { gap: 40px; }
}
/* ==========================================================================
   CONÓCENOS PAGE — layout unique to conocenos.html
   ========================================================================== */

.conocenos-hero { display: flex; flex-direction: column; position: relative; overflow: hidden; background: #fff; }
.conocenos-hero-content { max-width: 1240px; margin-left: auto; margin-right: auto; padding: 120px var(--at-wrap-px); position: relative; z-index: 2; width: 100%;
  box-sizing: border-box; }
.conocenos-hero-content .eyebrow { text-transform: none; }
.conocenos-hero-content h1 {
  font-family: var(--at-font-display); font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  color: var(--at-navy); line-height: 1.1; letter-spacing: -.02em;
  text-transform: uppercase;
  max-width: 760px;
  width: 100%;
  margin-left: 0;
  margin-right: auto;
}
.conocenos-hero-content h1 .accent { color: var(--at-gold); }
.conocenos-hero-image { width: 100%; margin-top: 0; }
.conocenos-hero-image img { width: 100%; display: block; object-fit: cover; max-height: 520px; }

.conocenos-intro { padding: 110px 0; background: #fff; }
.conocenos-intro .wrap { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; row-gap: 0; align-items: start; }
.conocenos-intro h2 {
  font-family: var(--at-font-display); font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--at-navy); line-height: 1.15; letter-spacing: -.02em;
}
.conocenos-intro h2 .accent { color: var(--at-gold); }
.conocenos-intro p { font-size: 1rem; line-height: 1.8; color: var(--at-navy); margin-bottom: 24px; }

/* ---------------- Team carousel (coverflow) ---------------- */
.team-carousel { background: #fff; overflow: hidden; position: relative; padding-bottom: 56px; }
.tc-track { position: relative; height: 520px; overflow: visible; }
.tc-slide {
  position: absolute; bottom: 0; left: 50%;
  overflow: hidden; cursor: pointer;
  transition: all .5s var(--at-ease);
}
.tc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-info { position: absolute; top: 40px; left: calc(50% + 192px); z-index: 20; max-width: 240px; }
.tc-info .name { font-family: var(--at-font-display); font-weight: 700; font-size: 1.2rem; color: var(--at-navy); margin-bottom: 4px; line-height: 1.2; }
.tc-info .role { font-family: var(--at-font-display); font-size: 1rem; color: var(--at-navy); margin-bottom: 14px; line-height: 1.4; }
.tc-info a {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--at-font-display); font-size: 1.4em; font-weight: 700; color: var(--at-navy);
  transition: color var(--at-duration-fast) var(--at-ease);
}
.tc-info a:hover { color: var(--at-gold); }
.tc-nav { display: flex; align-items: center; justify-content: center; gap: 16px; padding-top: 24px; }
.tc-nav button {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid rgba(16, 68, 107, .25);
  background: none; color: var(--at-navy); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--at-duration-fast) var(--at-ease), background var(--at-duration-fast) var(--at-ease);
}
.tc-nav button:hover { border-color: var(--at-navy); background: rgba(16, 68, 107, .05); }

/* ---------------- Values ---------------- */
.values { padding: 110px 0; background: var(--at-bg-grey); }
.values .wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
.values h2 { font-family: var(--at-font-display); font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.5rem); color: var(--at-navy); letter-spacing: -.01em; line-height: 1.2; margin-bottom: 24px; }
.values > .wrap > div:first-child p:not(.eyebrow) { font-size: .95rem; line-height: 1.75; color: var(--at-navy); }

@media (max-width: 980px) {
  .conocenos-intro .wrap { grid-template-columns: 1fr; }
  .values .wrap { grid-template-columns: 1fr; }
  .mini-stat-grid { grid-template-columns: 1fr !important; }
}

/* ---------------- Additive responsive refinements ---------------- */
@media (max-width: 900px) {
  .conocenos-hero-content { padding: 90px var(--at-wrap-px-tablet); }
  .conocenos-hero-image { margin-top: 0; }
  .conocenos-intro { padding: 80px 0; }
  .values { padding: 80px 0; }
  .team-carousel { padding-bottom: 40px; }
  .tc-track { height: 400px; }
  .tc-info { top: 20px; }
}
@media (max-width: 768px) {
  /* Coverflow needs a materially smaller stage below tablet-landscape; the
     matching size set lives in js/pages/conocenos.js (COMPACT config) so the
     translateX math and the card box stay in sync. */
  .tc-track { height: 340px; }
  .tc-info {
    position: static;
    max-width: none;
    text-align: center;
    margin-top: 24px;
  }
  .team-carousel { padding-bottom: 24px; }
}
@media (max-width: 640px) {
  .conocenos-hero-content { padding: 76px var(--at-wrap-px-mobile); }
  .conocenos-intro { padding: 60px 0; }
  .values { padding: 60px 0; }
  .tc-track { height: 300px; }
}
@media (max-width: 480px) {
  .tc-track { height: 260px; }
  .tc-info .name { font-size: 1.05rem; }
}
/* ==========================================================================
   CONTACTO PAGE — layout unique to contacto.html
   ========================================================================== */

.contact-hero { padding: 160px 0 80px; background: #fff; }
.contact-hero h1 {
  font-family: var(--at-font-display); font-weight: 800;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  color: var(--at-navy); line-height: 1.05; letter-spacing: -.02em;
  text-transform: uppercase;
}
.contact-hero h1 .accent { color: var(--at-gold); }
.contact-hero .eyebrow { margin-bottom: 16px; }

.contact-main { padding: 0 0 110px; background: #fff; }
.contact-main .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; }
.contact-intro-label {
  font-family: var(--at-font-display); font-size: .82rem; font-weight: 700; color: var(--at-navy);
  margin-bottom: 20px;
}
.contact-channels { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
.contact-office-label { font-family: var(--at-font-display); font-size: .82rem; font-weight: 700; color: var(--at-navy); margin-bottom: 16px; }

.contact-form-column .contact-intro-label { margin-bottom: 28px; }
.contact-form-full { display: flex; flex-direction: column; gap: 22px; }
.contact-form-full input,
.contact-form-full textarea {
  border: none; border-bottom: 1.6px solid #c9cdd1;
  background: transparent;
  padding: 12px 2px;
  font-size: .97rem;
  color: var(--at-navy);
  outline: none;
  transition: border-color var(--at-duration-fast) var(--at-ease);
}
.contact-form-full input:focus,
.contact-form-full textarea:focus { border-bottom-color: var(--at-navy); }
.contact-form-full input::placeholder,
.contact-form-full textarea::placeholder { color: #b0b8c1; }
.contact-form-full textarea { resize: vertical; }

@media (max-width: 980px) {
  .contact-main .wrap { grid-template-columns: 1fr; }
  .contact-channels { grid-template-columns: 1fr; }
}

/* ---------------- Additive responsive refinements ---------------- */
@media (max-width: 900px) {
  .contact-hero { padding: 130px 0 60px; }
  .contact-main { padding: 0 0 80px; }
  .contact-main .wrap { gap: 48px; }
}
@media (max-width: 640px) {
  .contact-hero { padding: 110px 0 48px; }
  .contact-main { padding: 0 0 60px; }
  .contact-channels { gap: 12px; }
}
/* ==========================================================================
   HOME PAGE — layout unique to index.html
   ========================================================================== */

/* ---------------- Hero (video background) ---------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #fff;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-video-overlay {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, .45);
  z-index: 1;
}
.hero .wrap { position: relative; z-index: 2; padding-top: 180px; padding-bottom: 130px; width: 100%;}
.hero-content { 
  max-width: 720px;
  margin-left: 0
  margin-right: auto;
 }
.hero-claim {
  font-family: var(--at-font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.13;
  letter-spacing: -.02em;
  color: var(--at-navy);
  margin-bottom: 28px;
  text-transform: uppercase;
}
.hero-claim .accent { color: var(--at-gold); }
.hero-desc {
  font-size: 1.05rem; font-weight: 600; line-height: 1.4;
  color: var(--at-navy);
  margin-bottom: 40px;
}

/* ---------------- Activity ---------------- */
.activity { padding: 110px 0; background: var(--at-white); }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

/* ---------------- Company (rotating team photo grid) ---------------- */
.company { background: var(--at-bg-grey); padding: 120px 0; }
.company .wrap { display: grid; grid-template-columns: 1fr .9fr; gap: 70px; align-items: center; }
.company-copy h2 {
  font-family: var(--at-font-display); font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  color: var(--at-navy); margin-bottom: 26px; letter-spacing: -.01em;
}
.company-copy p:not(.eyebrow) { font-size: 1rem; line-height: 1.75; color: var(--at-navy); margin-bottom: 20px; max-width: 560px; }
.company-copy .halo-btn { margin-top: 24px; }

.team-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  box-shadow: 0 24px 56px -16px rgba(16, 68, 107, .18);
}
.team-cell { position: relative; overflow: hidden; }
.team-cell img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.team-cell img.is-active { opacity: 1; }

/* ---------------- Figures ---------------- */
.figures { background: var(--at-white); padding: 110px 0 90px; text-align: center; }
.figures .eyebrow { text-align: center; }
.figures .section-head { margin: 0 auto 64px; text-align: center; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 900px; margin: 0 auto; }

/* ---------------- Solutions (dark) ---------------- */
.solutions {
  background: linear-gradient(180deg, var(--at-navy-deep) 0%, var(--at-navy-darker) 100%);
  padding: 130px 0;
  color: #fff;
}
/* El degradado es background-image y pinta por encima de cualquier
   background-color puesto vía el control nativo "Color de fondo" de
   Gutenberg — si el usuario elige un color propio (has-background),
   se quita el degradado para que su elección se vea de verdad. */
.solutions.has-background { background-image: none; }
.solutions .section-head { color: #fff; }
.solutions .section-head h2 { color: #fff; }
.solutions .section-head p:not(.eyebrow) { color: rgba(255, 255, 255, .68); }
.solution-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .12);
  margin-bottom: 56px;
}

/* ---------------- Contact ---------------- */
.contact { background: var(--at-bg-grey); padding: 120px 0; }
.contact .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.contact-copy h2 {
  font-family: var(--at-font-display); font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.3rem);
  color: var(--at-navy); margin-bottom: 20px; letter-spacing: -.01em;
}
.contact-copy p:not(.eyebrow) { font-size: 1rem; line-height: 1.7; color: var(--at-navy); max-width: 400px; }

/* ---------------- Responsive (pre-existing, preserved as-is) ---------------- */
@media (max-width: 980px) {
  .company .wrap { grid-template-columns: 1fr; }
  .company-visual { order: -1; }
  .contact .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero { padding: 150px 0 100px; }
  .hero-claim { font-size: 2rem; }
}

/* ---------------- Additive responsive refinements ---------------- */
@media (max-width: 900px) {
  .activity { padding: 80px 0; }
  .company { padding: 80px 0; }
  .company .wrap { gap: 48px; }
  .figures { padding: 80px 0 60px; }
  .solutions { padding: 90px 0; }
  .contact { padding: 80px 0; }
  .contact .wrap { gap: 48px; }
  .hero .wrap { padding-top: 150px; padding-bottom: 100px; }
}
@media (max-width: 640px) {
  .activity { padding: 64px 0; }
  .company { padding: 64px 0; }
  .figures { padding: 64px 0 40px; }
  .solutions { padding: 70px 0; }
  .contact { padding: 64px 0; }
  .hero-desc { font-size: .95rem; margin-bottom: 32px; }
  .team-photo-grid { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .hero { padding: 130px 0 80px; }
  .hero-claim { font-size: 1.7rem; }
}
/* ==========================================================================
   POST LISTING PAGES — shared layout for insights.html / noticias.html
   ========================================================================== */

.listing-hero { padding: 120px 0 80px; background: #fff; }
.listing-hero h1 {
  font-family: var(--at-font-display); font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4rem);
  color: var(--at-navy); line-height: 1.05; letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: 48px;
}
.listing-hero h1 .accent { color: var(--at-gold); }
.listing-hero .eyebrow { margin-bottom: 16px; }

.listing-grid-section { padding: 0 0 110px; background: #fff; }

/* ---------------- Additive responsive refinements ---------------- */
@media (max-width: 900px) {
  .listing-hero { padding: 100px 0 60px; }
  .listing-hero h1 { margin-bottom: 36px; }
  .listing-grid-section { padding: 0 0 80px; }
  .underline-tabs { flex-wrap: wrap; row-gap: 4px; }
}
@media (max-width: 640px) {
  .listing-hero { padding: 80px 0 48px; }
  .listing-grid-section { padding: 0 0 60px; }
}
/* ==========================================================================
   SOLUCIONES PAGE — layout unique to soluciones.html
   ========================================================================== */

/* ---------------- Hero ---------------- */
.solutions-hero {
  min-height: 78vh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  background-color: var(--at-navy-darker);
  padding-top: 72px;
}
.solutions-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(241, 189, 41, .07) 0%, transparent 70%);
  pointer-events: none;
}
.solutions-hero .wrap { position: relative; z-index: 2; padding-top: 70px; padding-bottom: 70px; display: flex; align-items: center; width: 100%;}
.solutions-hero-content { 
  max-width: 820px;
  margin-left: 0;
  margin-right: auto;}
.solutions-hero .eyebrow { color: var(--at-gold); text-transform: none; }
.solutions-hero h1 {
  font-family: var(--at-font-display); font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  color: #fff; line-height: 1.1; letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.solutions-hero h1 .accent { color: var(--at-gold); }
.solutions-hero-mark {
  position: absolute; right: max(20px, calc((100% - var(--at-content-max)) / 2 + var(--at-wrap-px))); top: 82%; transform: translateY(-50%);
  width: clamp(260px, 28vw, 420px);
  pointer-events: none; z-index: 1;
  opacity: .92;
  filter: drop-shadow(0 0 60px rgba(241, 189, 41, .18)) drop-shadow(0 0 120px rgba(241, 189, 41, .08));
}

/* ---------------- Intro editorial ---------------- */
.solutions-intro { padding: 110px 0; background: #fff; }
/* .wrap aquí es un core/columns nativo (className "wrap") — cada
   .wp-block-column ya separa título/párrafos, sin necesitar reglas de
   colocación en la rejilla por elemento. */
.solutions-intro .wrap { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; row-gap: 0; align-items: center; }
.solutions-intro .wrap > .wp-block-column { margin: 0; }
.solutions-intro h2 {
  font-family: var(--at-font-display); font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--at-navy); line-height: 1.1; letter-spacing: -.02em;
}
.solutions-intro h2 .accent { color: var(--at-gold); }
.solutions-intro p { font-size: 1rem; line-height: 1.8; color: var(--at-navy); margin-bottom: 20px; }

/* ---------------- Methodology (Del Dato al Valor) ---------------- */
.methodology { padding: 110px 0; background: var(--at-bg-grey); }
.methodology .section-head { max-width: 640px; margin-bottom: 72px; }
.methodology-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: #d4d8dc; border-radius: 16px; overflow: hidden;
}
.methodology-step { background: #fff; padding: 44px 36px; }
.methodology-step .step-number { font-family: var(--at-font-display); font-weight: 800; font-size: 3rem; color: var(--at-gold); line-height: 1; margin-bottom: 24px; }
.methodology-step h3 { font-family: var(--at-font-display); font-weight: 700; font-size: 1.05rem; color: var(--at-navy); margin-bottom: 14px; }
.methodology-step p { font-size: .9rem; line-height: 1.7; color: var(--at-navy); }

/* ---------------- Sector expertise tabs ---------------- */
.expertise { padding: 110px 0; background: #fff; }
.sector-panel-wrap {
  display: grid; grid-template-columns: 300px 1fr;
  border-radius: 20px; overflow: hidden;
  border: 1.5px solid var(--at-border);
}
.sector-tabs { background: var(--at-bg-grey); display: flex; flex-direction: column; border-right: 1.5px solid var(--at-border); }
.sector-tab {
  text-align: left; padding: 36px 32px;
  background: transparent;
  border: none; border-bottom: 1.5px solid var(--at-border);
  cursor: pointer;
  transition: background var(--at-duration-fast) var(--at-ease);
}
.sector-tab:last-child { border-bottom: none; }
.sector-tab-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(16, 68, 107, .08); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.sector-tab-icon svg { width: 20px; height: 20px; }
.sector-tab-icon svg [stroke]:not([stroke="none"]) { stroke: var(--at-navy); }
.sector-tab-eyebrow { display:block; font-family: var(--at-font-display); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--at-gold); margin-bottom: 6px; }
.sector-tab-title { display:block;  font-family: var(--at-font-display); font-weight: 700; font-size: .95rem; color: var(--at-navy); line-height: 1.3; }
.sector-tab-bar { width: 24px; height: 2px; background: var(--at-gold); margin-top: 14px; display: none; }

.sector-tab.is-active { background: var(--at-navy); border-bottom-color: rgba(255, 255, 255, .1); }
.sector-tab.is-active .sector-tab-icon { background: rgba(255, 255, 255, .12); }
.sector-tab.is-active .sector-tab-icon svg [stroke]:not([stroke="none"]) { stroke: #fff; }
.sector-tab.is-active .sector-tab-title { color: #fff; }
.sector-tab.is-active .sector-tab-bar { display: block; }

.sector-panels { background: #fff; position: relative; }
.sector-panel { padding: 52px 56px; display: none; }
.sector-panel.is-active { display: block; }
.sector-panel > p { font-size: .95rem; line-height: 1.75; color: var(--at-navy); margin-bottom: 36px; }
.sector-feature-list { display: flex; flex-direction: column; gap: 20px; }
.sector-feature { padding: 20px 24px; border-radius: 12px; border-left: 3px solid var(--at-gold); background: #f8f9fb; }
.sector-feature .t { font-family: var(--at-font-display); font-weight: 700; font-size: .9rem; color: var(--at-navy); margin-bottom: 6px; }
.sector-feature .d { font-size: .87rem; line-height: 1.7; color: var(--at-navy); }

/* ---------------- Case studies ---------------- */
.case-studies { padding: 110px 0; background: var(--at-bg-grey); overflow: visible; }
.case-studies-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 56px; flex-wrap: wrap; }
.case-studies-head h2 { font-family: var(--at-font-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--at-navy); letter-spacing: -.01em; max-width: 520px; line-height: 1.2; }

/* ---------------- Contact (Soluciones variant) ---------------- */
.solutions-contact { padding: 120px 0; background: #fff; }
.solutions-contact .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.solutions-contact h2 { font-family: var(--at-font-display); font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.3rem); color: var(--at-navy); margin-bottom: 20px; letter-spacing: -.01em; }
.solutions-contact-copy p:not(.eyebrow) { font-size: 1rem; line-height: 1.7; color: var(--at-navy); max-width: 380px; }

/* ---------------- Responsive (pre-existing, preserved as-is) ---------------- */
@media (max-width: 980px) {
  .solutions-intro .wrap { grid-template-columns: 1fr; }
  .methodology-grid { grid-template-columns: 1fr !important; }
  .sector-panel-wrap { grid-template-columns: 1fr; }
  .solutions-contact .wrap { grid-template-columns: 1fr; }
}

/* ---------------- Additive responsive refinements ---------------- */
@media (max-width: 900px) {
  .solutions-hero { min-height: auto; }
  .solutions-hero .wrap { padding-top: 130px; padding-bottom: 60px; }
  .solutions-hero-mark { width: clamp(180px, 24vw, 300px); opacity: .5; }
  .solutions-intro, .methodology, .expertise, .case-studies, .solutions-contact { padding: 80px 0; }
  .methodology-step { padding: 34px 28px; }
  .sector-tab-icon { width: 36px; height: 36px; }
}
@media (max-width: 640px) {
  .solutions-hero .wrap { padding-top: 110px; padding-bottom: 48px; }
  .solutions-hero-mark { display: none; }
  .solutions-intro, .methodology, .expertise, .case-studies, .solutions-contact { padding: 60px 0; }
  .methodology-step { padding: 28px 24px; }
  .methodology-step .step-number { font-size: 2.4rem; margin-bottom: 18px; }
  .case-studies-head { gap: 20px; }
  .filter-tabs { width: 100%; }
}

/* === Augura — WP bridge patches (WordPress-generated markup vs estático) === */
.nav-overlay .current-menu-item > a { color: var(--at-gold); }
.wpcf7-response-output { display:none; }
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-mail-sent-ok { display:block; margin-top:1rem; padding:.85rem 1.1rem; border-radius:8px; background:rgba(241,189,41,.12); border:1px solid var(--at-gold); color:var(--at-navy); font-size:.85rem; }
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng,
.wpcf7-spam-blocked { display:block; margin-top:1rem; padding:.85rem 1.1rem; border-radius:8px; background:rgba(200,0,0,.08); border:1px solid rgba(200,0,0,.4); color:#a00; font-size:.85rem; }
.wpcf7-not-valid-tip { font-size: 11px; }
.wp-block-group[data-bg] { }

/* Floating label sobre .field (contact-form / contacto-general): la etiqueta
   real vive dentro del input hasta que se rellena o recibe foco, momento en
   el que sube y se ve como el label estático original (mayúsculas, display
   font). :placeholder-shown necesita un placeholder realmente no-vacío —CF7
   recorta cualquier valor solo-espacios (incluso NBSP/zero-width) a ""— así
   que el placeholder real repite el texto del label y se oculta con color:
   transparent en vez de dejarlo vacío.
   CF7 envuelve cada campo en <span class="wpcf7-form-control-wrap">, así que
   el <input> NUNCA es hermano directo del <label> (el hermano real es ese
   span) — un selector "input + label" no encuentra nada. Se usa :has()/
   :focus-within sobre .field en su lugar, que no dependen de la adyacencia
   exacta en el DOM. */
.field input::placeholder, .field textarea::placeholder { color: transparent; }
.field { position: relative; gap: 0; }
.field label {
  position: absolute;
  left: 2px;
  top: 10px;
  font-family: var(--at-font-body);
  font-size: .98rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(16, 68, 107, .5);
  pointer-events: none;
  transition: top .15s ease, font-size .15s ease, color .15s ease;
}
.field input, .field textarea { padding-top: 18px; padding-bottom: 2px; }
.field:focus-within label,
.field:has(input:not(:placeholder-shown)) label,
.field:has(textarea:not(:placeholder-shown)) label {
  top: -14px;
  font-family: var(--at-font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--at-navy);
}
.field:focus-within label { color: var(--at-gold); }

/* === Augura — Bridge InnerBlocks: Home hero usa clases .hero-claim/.hero-desc en vez
   de selectores por etiqueta; con InnerBlocks el heading/paragraph reales necesitan
   este puente para verse igual sin depender de una clase concreta === */
.hero-content h1, .hero-content h2 {
  font-family: var(--at-font-display); font-weight: 800;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.13;
  letter-spacing: -.02em; color: var(--at-navy); margin-bottom: 28px;
  text-transform: uppercase;
}
.hero-content h1 .accent, .hero-content h2 .accent { color: var(--at-gold); }
.hero-content p { font-size: 1.05rem; font-weight: 600; line-height: 1.4; color: var(--at-navy); margin-bottom: 40px; }

/* Bridge InnerBlocks: .product-hero-desc era una clase específica en <p>, ahora es <p> genérico dentro de .product-hero-content */
.product-hero-content p { font-size: 1rem; line-height: 1.75; color: rgba(255, 255, 255, .65); max-width: 580px; margin-bottom: 40px; }

/* === Augura — Bridge CF7 → diseño original (checkbox-field, halo-submit) === */
.checkbox-field label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; }
.checkbox-field input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--at-navy); flex-shrink: 0; }
.checkbox-field .wpcf7-list-item { margin: 0; }
.checkbox-field .wpcf7-list-item-label { font-size: .8rem; line-height: 1.5; color: var(--at-grey-soft); }
.checkbox-field .wpcf7-list-item-label a { color: var(--at-gold); }

/* halo-submit: CF7 renderiza <input type="submit">, un elemento vacío que no admite
   hijos (no se puede meter el <span class="disc"> real ni su animación) — se simula
   el disco dorado con un radial-gradient (un color plano NO puede tener tamaño/
   posición propios dentro de un background multicapa, por eso el círculo se hace con
   gradiente) para que visualmente sea el mismo botón que .halo-btn/.halo-submit:
   círculo dorado con flecha + texto azul marino, fondo transparente. El brillo se
   hace con filter:drop-shadow (no con una 3ª capa de background) porque un
   background SIEMPRE se recorta a la caja del elemento — con el brillo más grande
   que el botón, se veía cortado en un rectángulo. drop-shadow no se recorta y
   sigue la silueta real (el círculo), no la caja. */
.wpcf7-submit.wpcf7-submit,
input[type="submit"].wpcf7-submit {
  display: inline-flex; align-items: center;
  background-color: transparent;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M1 5.5H13M13 5.5L8.5 1M13 5.5L8.5 10' stroke='%2310446b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    radial-gradient(circle, var(--at-gold) 0 50%, transparent 51%);
  background-repeat: no-repeat, no-repeat;
  background-position: 23px 50%, 0 50%;
  background-size: 14px 11px, 60px 60px;
  filter: drop-shadow(0 8px 16px rgba(241, 189, 41, .45)) drop-shadow(0 0 22px rgba(241, 189, 41, .28));
  animation: at-float-submit-disc 3.6s ease-in-out infinite;
  border: none;
  border-radius: 0;
  min-height: 60px;
  padding: 0 8px 0 76px;
  color: var(--at-navy);
  font-family: var(--at-font-display);
  font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  transition: color var(--at-duration-fast) var(--at-ease), filter var(--at-duration-fast) var(--at-ease);
}
.wpcf7-submit.wpcf7-submit:hover,
input[type="submit"].wpcf7-submit:hover {
  color: var(--at-gold-dark);
  filter: drop-shadow(0 8px 20px rgba(241, 189, 41, .6)) drop-shadow(0 0 26px rgba(241, 189, 41, .34));
}
/* Deshabilitado: CF7 pone disabled=true de forma nativa hasta que se marca la
   casilla de aceptación obligatoria (ver includes/js/index.js del plugin). Sin
   estilo propio, el navegador aplica un atenuado genérico que con nuestro botón
   (hecho de capas de fondo) se veía como un fallo visual en vez de "deshabilitado
   a propósito" — se anula ese atenuado y se sustituye por un estado gris claro,
   deliberado y reconocible.  */
.wpcf7-submit.wpcf7-submit:disabled,
input[type="submit"].wpcf7-submit:disabled {
  opacity: 1;
  cursor: not-allowed;
  color: var(--at-grey-soft);
  animation: none;
  filter: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M1 5.5H13M13 5.5L8.5 1M13 5.5L8.5 10' stroke='%23919191' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    radial-gradient(circle, var(--at-border) 0 50%, transparent 51%);
}
@keyframes at-float-submit-disc {
  0%, 100% { background-position: 23px 50%, 0 50%; }
  50% { background-position: 23px calc(50% - 5px), 0 calc(50% - 5px); }
}

/* Aviso "Development site" de WPML */
.otgs-development-site-front-end { display: none; }