/*
Theme Name: IZUEL
Theme URI: https://izuel.es
Author: PIPM Altahoja Solutions, S.L.
Author URI: https://izuel.es
Description: Tema a medida de IZUEL — rediseño visual 2026. Lenguaje editorial técnico: Archivo + IBM Plex Mono, retícula de filetes finos y acento naranja. Sucede al tema «AltaHoja Solutions», del que hereda SEO, cumplimiento RGPD y la API de administración del MCP.
Version: 2.3.16-alpha
Requires at least: 6.1
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: altahoja
Tags: blog, portfolio, one-column, custom-menu, custom-logo, editor-style, translation-ready
*/

/* ==========================================================================
   FUENTES AUTOALOJADAS
   Van aquí y no en un `assets/fonts.css` aparte a propósito: eran dos hojas
   encadenadas (style.css dependía de fonts.css), o sea dos peticiones
   bloqueantes del render en serie. Lighthouse estimaba 840 ms de ahorro.

   RGPD: servidas desde nuestro dominio, sin llamadas a fonts.googleapis.com ni
   a fonts.gstatic.com, que exponen la IP del visitante a Google antes de que
   pueda consentir nada.

   Archivo va VARIABLE con dos ejes, `wght` (400-700) y `wdth` (62-125%): el eje
   de anchura es lo que da voz a los titulares, y pesa menos que los cuatro
   cortes estáticos que sustituye (176 KB frente a 270 KB).

   OJO: las rutas son relativas a este fichero, que está en la raíz del tema.
   Regenerar según el README.
   ========================================================================== */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(assets/fonts/archivo-var-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(assets/fonts/archivo-var-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Base visual heredada del prototipo verificado en `rediseno-2026/`. */

:root {
  /* Tinta y superficies */
  --ink:        oklch(0.19 0.012 60);
  --ink-70:     oklch(0.40 0.01 60);
  --ink-60:     oklch(0.45 0.01 60);
  --ink-55:     oklch(0.48 0.01 60);
  --ink-50:     oklch(0.52 0.01 60);
  --ink-45:     oklch(0.55 0.01 60);
  /* L=0.56 y no 0.58: el aviso legal del bloque de contacto va a 12.5px y con
     0.58 daba 4.29 sobre blanco, por debajo del 4.5 de la AA. Ahora 4.67. */
  --ink-40:     oklch(0.56 0.01 60);
  --paper:      #ffffff;
  --surface:    oklch(0.985 0.003 60);
  --surface-2:  oklch(0.975 0.004 60);

  /* Líneas */
  --line:       oklch(0.90 0.005 60);
  --line-soft:  oklch(0.92 0.004 60);
  --line-field: oklch(0.88 0.005 60);
  --line-input: oklch(0.85 0.005 60);

  /* Acento.
     L=0.58 y no 0.60: con 0.60 (#e62e1e) el blanco sobre el botón daba 4.40 y
     el acento sobre superficie 4.22, ambos por debajo del 4.5 que exige la AA
     de WCAG para texto normal —lo detectó Lighthouse—. Bajar un 2% de
     luminosidad los sube a 4.77 y 4.58 sin que el color cambie a la vista. */
  --accent:      oklch(0.58 0.22 30);
  --accent-dark: oklch(0.48 0.19 30);
  --accent-lift: oklch(0.72 0.20 30); /* sobre fondo oscuro */

  /* Sobre fondo oscuro */
  --on-dark:      oklch(0.88 0.005 60);
  --on-dark-mute: oklch(0.75 0.01 60);
  --on-dark-soft: oklch(0.72 0.01 60);
  --on-dark-dim:  oklch(0.62 0.01 60);

  --font-sans: Archivo, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ejes de anchura de Archivo variable. El display va expandido —una grotesca
     ancha lee como señalética e ingeniería, que es lo que vende el estudio— y
     el énfasis se comprime, de modo que resaltar una palabra es un cambio de
     voz y no solo de color. Solo es posible con fuente variable. */
  --wdth-display: 118%;
  --wdth-text: 100%;
  --wdth-emphasis: 78%;

  /* Movimiento. Antes había tres duraciones (.16/.18/.2s) haciendo el mismo
     trabajo. `--ease-out` es para entradas: la curva nativa `ease` es
     demasiado floja para movimiento deliberado, pero sigue siendo la correcta
     para cambios de color, que es donde se queda. */
  --ease-out:  cubic-bezier(0.23, 1, 0.32, 1);
  --dur-hover: 180ms;
  --dur-move:  200ms;
  /* Las entradas al hacer scroll piden más recorrido que un hover: 200 ms
     en un desplazamiento de 18 px se lee como un parpadeo, no como una
     entrada. 520 ms es lo que tarda en percibirse como movimiento sin que
     el contenido se haga esperar. */
  --dur-reveal: 520ms;

  --shell: 1280px;
  --gutter: clamp(20px, 4vw, 32px);
  --section-y: clamp(56px, 8vw, 88px);
}

* { box-sizing: border-box; }

/* Cualquier `display` de clase gana al display:none del atributo [hidden] del
   navegador. Como el enrutado y el formulario se apoyan en [hidden], hay que
   devolverle la prioridad o los bloques ocultos se siguen viendo. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }
input, select, textarea, button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }

/* Foco visible y coherente en todo el sitio. El mockup no definía ninguno. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-dark :where(a, button):focus-visible { outline-color: var(--accent-lift); }

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  color: #fff;
}

/* Etiqueta monoespaciada recurrente (eyebrows, numerales, metadatos) */
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* ------------------------------------------------- ENTRADAS AL SCROLL --- */

/*
 * Dos clases para todo el sitio:
 *
 *   .reveal        un elemento que sube al entrar en pantalla.
 *   .reveal-group  un contenedor cuyos hijos DIRECTOS suben escalonados.
 *
 * Todo cuelga de `html.has-reveal`, que pone un script en línea en el
 * `<head>` (ver header.php). Es deliberado y es la parte importante: si el
 * JavaScript no llega, la clase no se pone y **nada se oculta**. El patrón
 * habitual —`opacity: 0` en el CSS y confiar en que el JS lo revele— deja la
 * página en blanco cuando el script falla, y una web que vende ingeniería no
 * se puede permitir eso.
 *
 * Ese mismo script no pone la clase si el visitante pide movimiento
 * reducido, así que la consulta de medios de más abajo es un segundo cinturón
 * para el caso de que la preferencia cambie con la página ya abierta.
 *
 * NO PONER ESTAS CLASES EN NADA POR ENCIMA DEL PLIEGUE — ni en `.hero`, ni en
 * `.page-hero`, ni en `.svc-hero`. Se probó y costó rendimiento: un elemento
 * con `opacity: 0` no cuenta como pintado, así que el LCP se va a esperar a
 * que main.js (que carga en el pie) lo revele. Con el héroe de la portada
 * dentro, el LCP pasó de ~2 s a 2,9 s y el rendimiento de 96 a 93, con
 * `Render Delay: 2196 ms` señalando exactamente a `.hero__lede`.
 *
 * Estas entradas son para lo que aparece AL BAJAR. Lo que ya está en pantalla
 * al llegar no necesita presentarse.
 */
html.has-reveal .reveal,
html.has-reveal .reveal-group > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  /* El escalonado lo escribe el observador como variable, no como clase:
     así el retardo es un dato y no hay que inventar .delay-1, .delay-2… */
  transition-delay: var(--reveal-delay, 0ms);
}

html.has-reveal .reveal.is-in,
html.has-reveal .reveal-group > .is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.has-reveal .reveal,
  html.has-reveal .reveal-group > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------- HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink);
  flex: none;
}
.brand:hover { color: var(--ink); }
.brand__name { font-size: 19px; font-weight: 700; letter-spacing: 0.14em; }
.brand__place {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-50);
  text-transform: uppercase;
}

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav__link {
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.site-nav__link:hover { color: var(--ink); border-bottom-color: var(--accent); }
.site-nav__link[aria-current="page"] { border-bottom-color: var(--accent); }
/* Selector de idioma: el otro idioma, en su propia lengua (inc/i18n.php). */
.site-nav__lang {
  padding: 5px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-70);
  border: 1px solid var(--line);
  transition: border-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.site-nav__lang:hover { color: var(--ink); border-color: var(--ink); }
.site-nav__lang-long { display: none; }

/* Botón de menú móvil: no existía en el mockup (era solo escritorio). */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle__bars {
  display: grid;
  gap: 3px;
  width: 15px;
}
.nav-toggle__bars i {
  display: block;
  height: 1.5px;
  background: currentColor;
}

/* ---------------------------------------------------------------- BOTONES */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 16px 26px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  text-align: center;
}
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dark); color: #fff; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--accent); color: #fff; }
.btn--outline { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--surface-2); color: var(--ink); }
.btn--sm { padding: 11px 18px; font-size: 13.5px; }
.btn--lg { padding: 18px 34px; font-size: 16px; }
.btn--block { width: 100%; }

/* Realimentación de pulsación. No había ninguna regla :active en toda la
   hoja: en escritorio el hover disimulaba, pero en táctil —donde no hay
   hover— tocar el botón principal del sitio no producía ningún acuse, solo
   el resalte gris genérico del navegador. */
.btn,
.chip,
.filter-pill,
.form__submit,
.ah-cookie__btn,
.nav-toggle,
.site-footer__cookies {
  transition: background-color var(--dur-hover) ease,
              color var(--dur-hover) ease,
              border-color var(--dur-hover) ease,
              transform 160ms var(--ease-out);
}
.btn:active,
.chip:active,
.filter-pill:active,
.form__submit:active,
.ah-cookie__btn:active,
.nav-toggle:active,
.site-footer__cookies:active { transform: scale(0.97); }

/* Las tarjetas son superficies grandes: 0.97 en un bloque de 400px se ve
   exagerado. */
.hub-card,
.caso-entry { transition: background-color var(--dur-hover) ease, transform 160ms var(--ease-out); }
.hub-card:active,
.caso-entry:active { transform: scale(0.99); }

@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .chip:active,
  .filter-pill:active,
  .form__submit:active,
  .ah-cookie__btn:active,
  .nav-toggle:active,
  .site-footer__cookies:active,
  .hub-card:active,
  .caso-entry:active { transform: none; }
}

/* Enlace-acción en línea («Ver el servicio →») */
.link-cta {
  align-self: flex-start;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent);
}
.link-cta:hover { color: var(--accent-dark); }
.link-cta .arrow { display: inline-block; transition: transform var(--dur-move) ease; }
/* Solo con ratón: en táctil, tocar dispara un hover falso y la flecha se
   queda desplazada hasta que tocas en otro sitio. */
@media (hover: hover) and (pointer: fine) {
  .link-cta:hover .arrow { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .link-cta .arrow { transition: none; }
}

/* --------------------------------------------------------- ENCABEZADOS */
.section { border-bottom: 1px solid var(--line); }
.section--flush { border-bottom: 0; }
.section__body { padding-block: var(--section-y); }

.section-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.section-head .mono { padding-top: 10px; }
.section-head__title {
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  max-width: 22ch;
  text-wrap: balance;
}

/* ------------------------------------------------------------------ HERO */
.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: stretch;
}
.hero__main {
  padding: clamp(56px, 8vw, 96px) clamp(0px, 4vw, 56px) clamp(52px, 7vw, 88px) 0;
  border-right: 1px solid var(--line);
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.hero__dot { width: 7px; height: 7px; background: var(--accent); flex: none; }
.hero__title {
  /* Sin `text-wrap: balance`: el <br> ya fija el corte y el balanceo partía
     «Equipos preparados.» en dos líneas, rompiendo la composición del diseño. */
  font-size: clamp(38px, 5.1vw, 66px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.hero__title em { font-style: normal; color: var(--accent); }
.hero__lede {
  margin-top: 28px;
  max-width: 52ch;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--ink-70);
  text-wrap: pretty;
}
.hero__actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero__note {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-50);
}

.hero__proof[hidden] { display: none; }
.hero__proof a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-50);
  text-underline-offset: 3px;
}
.hero__proof a:hover { text-decoration-color: var(--accent); }

.hero__aside {
  padding: clamp(0px, 8vw, 96px) 0 clamp(52px, 7vw, 88px) clamp(0px, 4vw, 56px);
  display: flex;
  align-items: flex-start;
}
.hero__ia { margin-top: 14px; font-size: 12px; letter-spacing: 0.04em; }
.hero__ia a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-50); text-underline-offset: 3px; display: inline-block; padding-block: 6px; }
.hero__ia a:hover { text-decoration-color: var(--accent); }

/* Tarjeta «Diagnóstico gratuito» */
.card {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.card__head h2 { font: inherit; letter-spacing: inherit; text-transform: inherit; }
.card__head strong { color: var(--accent); font-weight: 500; }
.card__foot { padding: 18px; }
.card__foot p {
  margin-top: 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-45);
}
.card__foot .card__hint { margin-top: 4px; text-wrap: balance; }

.steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.steps li {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.steps .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  padding-top: 2px;
  flex: none;
}
.steps h3 { font-size: 15px; font-weight: 600; }
.steps p { font-size: 13.5px; color: var(--ink-55); line-height: 1.5; }

/* --------------------------------------------------------------- LOGOS */
.logos {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.logos__inner {
  padding-block: 22px;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}
.logos__label { flex: none; }
.logos__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos__track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: izuel-marquee 32s linear infinite;
}
.logos__track:hover { animation-play-state: paused; }
/* La pone main.js cuando la sección sale de pantalla. Misma especificidad que
   la regla de arriba y mismo valor, así que no compiten: pausan las dos y la
   marquesina sólo corre cuando se está viendo y no hay ratón encima. */
.logos__track.is-paused { animation-play-state: paused; }
.logos__track span {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-60);
  white-space: nowrap;
}
@keyframes izuel-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* El mockup animaba sin condición; aquí se detiene si se pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; }
  .logos__viewport { overflow-x: auto; }
}

/* ------------------------------------------------------------ SERVICIOS */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
}
.service {
  padding: 32px 28px 28px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.service:first-child { padding-left: 0; }
.service:last-child { padding-right: 0; border-right: 0; }
.service__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.service__title {
  font-size: clamp(21px, 2.2vw, 25px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: balance;
}
.service__desc { font-size: 15px; line-height: 1.6; color: var(--ink-60); }
/* Ficha de servicio: alcance → compromiso de entrega.
   El plazo cerrado es el argumento que separa al estudio de una agencia, así
   que se trata como cifra declarada (tinta, peso medio, cifras tabulares) y no
   como el gris de 12px en el que estaba antes, que lo dejaba en letra pequeña. */
.service__spec { margin-top: 4px; }
.service__spec__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.service__spec__head span:last-child { color: var(--accent); }
.service__spec__list { display: flex; flex-direction: column; }
.service__spec__list > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}
.service__spec__list dt { font-size: 14px; color: var(--ink-70); }
.service__spec__list dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.service .link-cta { margin-top: auto; padding-top: 14px; }

/* ---------------------------------------------------------------- STATS */
.stats {
  background: var(--ink);
  color: #fff;
}
.stats__grid {
  padding-block: clamp(44px, 6vw, 64px);
  display: grid;
  /* --stats-n lo pone la plantilla: la banda solo pinta las cifras rellenas. */
  grid-template-columns: repeat(var(--stats-n, 4), 1fr);
  gap: 32px;
}
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat__num {
  font-size: clamp(38px, 4.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stat__num--accent { color: var(--accent-lift); }
.stat__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

/* ---------------------------------------------------------------- CASOS */
.cases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.cases--home { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.case {
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.case__shot {
  aspect-ratio: 16 / 10;
  background-image: repeating-linear-gradient(135deg, oklch(0.94 0.004 60) 0 10px, var(--surface-2) 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* La imagen llena la tarjeta. Sin esto conservaba su alto natural (470px),
   rompía la proporción 16/10 y quedaba descentrada dentro del relleno: se veía
   al asignar las imágenes destacadas de los casos, porque hasta entonces este
   hueco iba vacío. */
.case__shot .cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.case__shot span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: oklch(0.50 0.01 60);
  background: var(--paper);
  padding: 7px 12px;
  border: 1px solid var(--line);
  text-align: center;
}
.case__body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.case__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.case__title {
  font-size: clamp(20px, 2.1vw, 23px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: balance;
}
.case__figures {
  display: flex;
  gap: 28px;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--line-soft);
}
.case__figures dt {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-50);
  order: 2;
}
.case__figures dd {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  order: 1;
}
.case__figures > div { display: flex; flex-direction: column; }

/* -------------------------------------------------------------- PROCESO */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.process__step {
  background: var(--paper);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.process__step .num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.process__step h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.process__step p { font-size: 14.5px; line-height: 1.55; color: var(--ink-60); }

.quotes {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.quote { border-left: 2px solid var(--accent); padding-left: 20px; }
/* La cita dentro de su caso: más pequeña que el bloque de citas. */
.quote--case { margin-top: 20px; }
.quote--case p { font-size: 15px; line-height: 1.5; letter-spacing: 0; }
.quote--case figcaption { margin-top: 8px; font-size: 12.5px; color: var(--ink-50); }
.quote p {
  font-size: clamp(18px, 2vw, 20px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.quote footer {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-50);
}

/* ------------------------------------------------------------- CTA FINAL */
.cta-band {
  padding-block: var(--section-y);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
}
.cta-band__title {
  font-size: clamp(32px, 4.4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  max-width: 18ch;
  text-wrap: balance;
}
.cta-band p {
  margin-top: 18px;
  font-size: clamp(16px, 1.7vw, 18px);
  color: var(--ink-60);
  max-width: 48ch;
  line-height: 1.55;
}
.cta-band__actions { display: flex; flex-direction: column; gap: 12px; }

.cta-inline {
  padding-block: clamp(48px, 6vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-inline h2 {
  font-size: clamp(26px, 3.6vw, 38px);
  letter-spacing: -0.03em;
  font-weight: 600;
  max-width: 20ch;
  text-wrap: balance;
}

/* ------------------------------------------------------ PÁGINA SERVICIO */
.svc-hero {
  padding-block: clamp(52px, 7vw, 80px) clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: end;
}
.svc-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 26px;
}
.svc-hero__title {
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
}
.svc-hero p {
  margin-top: 24px;
  max-width: 54ch;
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.6;
  color: var(--ink-70);
  text-wrap: pretty;
}
/* Tabla de plazos de la página de servicio: aquí el compromiso ES el contenido
   principal de la columna, así que pesa más que en la ficha de la portada. */
.price-list { display: flex; flex-direction: column; }
.price-list__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.price-list__head span:last-child { color: var(--accent); }
.price-list__items {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink);
}
.price-list__items > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.price-list__items dt { font-size: 15.5px; font-weight: 500; }
.price-list__items dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.price-list__note {
  margin-top: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-55);
  max-width: 42ch;
}
.price-list .btn { margin-top: 22px; }

.deliverables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.deliverable {
  background: var(--paper);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.deliverable .num { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.deliverable h3 { font-size: 18px; font-weight: 600; }
.deliverable p { font-size: 14.5px; line-height: 1.55; color: var(--ink-60); }

.faq { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.faq__item {
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 32px;
}
.faq__item h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.faq__item p { font-size: 15.5px; line-height: 1.6; color: var(--ink-60); text-wrap: pretty; }

/* ------------------------------------------------------ PÁGINA CONTACTO */
.contact {
  padding-block: clamp(48px, 6vw, 72px) clamp(64px, 8vw, 96px);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(36px, 5vw, 64px);
}
.contact__title {
  font-size: clamp(38px, 5vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.contact__lede { margin-top: 20px; }
.contact__lede p,
.contact__lede:not(:has(p)) {
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 40ch;
  text-wrap: pretty;
}
.channels {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink);
}
.channels li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.channels a,
.channels .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.channels a:hover { color: var(--accent); }
.channels .kind {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-50);
  flex: none;
}
.legal-note {
  margin-top: 28px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-40);
  max-width: 44ch;
}

.form-card { border: 1px solid var(--line); }
.form-card__head {
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* El formulario lo pinta Contact Form 7, no el tema: la clase `.form` se le
   pone al <form> con `html_class` en el shortcode. Una sola columna a
   propósito — es `.form__row` quien empareja campos cuando hace falta, que es
   como está escrito el formulario en el editor de CF7. */
.form {
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--wide { grid-column: 1 / -1; }

/* CF7 pasa el contenido por wpautop y envuelve cada campo en un <p>, que se
   comería el flex y metería márgenes. Se le devuelve el papel de contenedor. */
.field > p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wpcf7-form-control-wrap { display: block; }
/* CF7 emite size="40" / cols="40", que fijan un ancho intrínseco. */
.form input,
.form select,
.form textarea { width: 100%; }

/* Los campos llevan <label> a secas, no .field__label. */
.field > p > label,
.field__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select {
  border: 0;
  border-bottom: 1px solid var(--line-input);
  background: transparent;
  padding: 10px 0;
  font-size: 16px;
  transition: border-color var(--dur-hover) ease;
}
/* El <select> nativo trae su propio cromado; se le quita y se le pone la
   flecha del tema para que no rompa la línea del resto de campos. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  cursor: pointer;
  padding-right: 24px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-50) 50%),
                    linear-gradient(135deg, var(--ink-50) 50%, transparent 50%);
  background-position: calc(100% - 12px) calc(50% + 2px), calc(100% - 7px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field input:focus,
.field select:focus { border-bottom-color: var(--accent); }
.field textarea {
  border: 1px solid var(--line-field);
  background: transparent;
  padding: 12px;
  font-size: 16px;
  resize: vertical;
  transition: border-color var(--dur-hover) ease;
}
.field textarea:focus { border-color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line-field);
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-60);
  cursor: pointer;
}
.consent input { margin-top: 3px; accent-color: var(--accent); flex: none; }
/* El enlace a la política de privacidad vive dentro de un texto: sin subrayado
   solo se distingue por el color (contraste 1,56:1 con el texto), que no basta. */
.consent a,
.wpcf7-list-item-label a { text-decoration: underline; text-underline-offset: 2px; }

/* El botón lo emite CF7 como <input type="submit"> con class:form__submit; no
   puede llevar las clases .btn del tema, así que se le da aquí el mismo
   tratamiento que a .btn--accent. */
.form__submit {
  grid-column: 1 / -1;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 17px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur-hover) ease;
}
.form__submit:hover { background: var(--accent-dark); }
.form__submit:disabled {
  /* CF7 lo deshabilita el segundo escaso que tarda Turnstile en resolver. Se
     dejó sin cambio de color a propósito: con opacidad parecía roto, y el
     cambio a gris no llegaba a aplicarse de forma fiable. El cursor basta. */
  cursor: progress;
}
.form__fineprint {
  grid-column: 1 / -1;
  margin-top: -6px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-45);
}

.form-sent {
  padding: clamp(40px, 6vw, 64px) 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.form-sent__dot { width: 10px; height: 10px; background: var(--accent); }
.form-sent h2 { font-size: clamp(23px, 2.6vw, 28px); letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; }
.form-sent p { font-size: 16px; color: var(--ink-60); }

/* --------------------------------------------------------------- FOOTER */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--ink);
  color: #fff;
}
.site-footer__top {
  padding-block: clamp(40px, 5vw, 56px) 28px;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}
.site-footer__brand .brand__name { color: #fff; }
.site-footer__brand p {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--on-dark-mute);
  max-width: 34ch;
}
.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__col h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}
.site-footer__col a { font-size: 14.5px; color: var(--on-dark); }
.site-footer__col a:hover { color: var(--accent-lift); }
.site-footer__bottom {
  padding-bottom: 40px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--on-dark-dim);
}

/* ==========================================================================
   Responsive — el mockup no traía ningún breakpoint.
   ========================================================================== */

@media (max-width: 1024px) {
  .section-head { grid-template-columns: 1fr; gap: 14px; }
  .section-head .mono { padding-top: 0; }
  /* Una sola columna, no dos: son tres tarjetas y en dos columnas la tercera
     queda siempre huérfana con un hueco al lado. */
  .services { grid-template-columns: 1fr; }
  .service {
    padding: 30px 0;
    border-right: 0;
    border-top: 1px solid var(--line);
  }
  .service:first-child { border-top: 0; padding-top: 30px; }
  .service__title, .service__desc { max-width: 34ch; }
  /* A todo el ancho, la cifra se alejaba tanto de su línea que costaba
     emparejarlas. Se acota la tabla para que sigan leyéndose como un par. */
  .service__spec { max-width: 46ch; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .process { grid-template-columns: repeat(2, 1fr); }
  .deliverables { grid-template-columns: repeat(2, 1fr); }
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Servicios en tablet y portátil pequeño (681–1024 px): apilados en una sola
   columna dejaban más de la mitad del ancho vacío durante ~1.300 px. En dos
   columnas la tercera ficha quedaba huérfana, así que cada ficha se reparte a
   lo ancho: descripción a la izquierda, tabla de plazos a la derecha. Por
   debajo de 681 px vuelve a apilarse. */
@media (min-width: 681px) and (max-width: 1024px) {
  .service {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 6vw, 64px);
    row-gap: 14px;
    align-content: start;
  }
  .service > * { grid-column: 1; }
  .service__title, .service__desc { max-width: 36ch; }
  .service__spec {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
    max-width: none;
    margin-top: 0;
  }
  .service .link-cta { margin-top: 0; padding-top: 6px; }
}

@media (max-width: 860px) {
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav__link {
    padding: 14px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .site-nav__link[aria-current="page"] { color: var(--accent); }
  .site-nav__lang {
    padding: 14px 0;
    font-family: inherit;
    font-size: 16px;
    letter-spacing: 0;
    color: var(--ink);
    border: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .site-nav__lang-short { display: none; }
  .site-nav__lang-long { display: inline; }
  .site-nav .btn { margin-top: 16px; }
  .nav-toggle { display: inline-flex; }
  .site-header__inner { position: relative; }

  .hero { grid-template-columns: 1fr; }
  .hero__main {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: clamp(44px, 8vw, 64px) 0 clamp(36px, 6vw, 48px);
  }
  .hero__aside { padding: clamp(36px, 6vw, 48px) 0; }

  .cases { grid-template-columns: 1fr; gap: 24px; }
  .quotes { grid-template-columns: 1fr; gap: 24px; }
  .cta-band { grid-template-columns: 1fr; gap: 28px; }
  .cta-band__actions { flex-direction: row; flex-wrap: wrap; }
  .svc-hero { grid-template-columns: 1fr; align-items: start; }
  .faq__item { grid-template-columns: 1fr; gap: 10px; }
  .contact { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .service { padding-block: 28px; }
  .service__title, .service__desc { max-width: none; }
  .process { grid-template-columns: 1fr; }
  .deliverables { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; padding: 20px; }
  .form__row { grid-template-columns: 1fr; }
  /* El chat flotante ya no tapa los enlaces legales al final de la página. */
  .site-footer { padding-bottom: 64px; }
  .site-footer__top { grid-template-columns: 1fr; }
  .logos__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .logos__viewport { width: 100%; }
  .cta-band__actions .btn { flex: 1 1 100%; }
  .stat__num { font-size: 40px; }
}

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

/* ==========================================================================
   A partir de aquí: lo que WordPress necesita y el mockup no cubría.
   Blog, artículo, páginas legales, 404, banner de cookies, Contact Form 7 y
   bloques nativos del editor — todo en el mismo lenguaje visual.
   ========================================================================== */

/* ------------------------------------------------------------- UTILIDADES */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.page-hero {
  padding-block: clamp(48px, 6vw, 72px) clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.page-hero__title {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
  max-width: 20ch;
}

/* Hubs: el H1 se centra para alinearse con el contenido de debajo, que también
   va centrado. `max-width: 20ch` sigue vigente, así que hace falta el
   `margin-inline: auto` además del `text-align`: sin él el bloque seguiría
   pegado a la izquierda aunque su texto estuviera centrado dentro. */
.page-hero--center { text-align: center; }
.page-hero--center .page-hero__title,
.page-hero--center .page-hero__lede { margin-inline: auto; }
.page-hero__lede {
  margin-top: 20px;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 56ch;
  text-wrap: pretty;
}

/* Miga de pan */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 22px;
}
.crumb a { color: var(--ink-50); }
.crumb a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ BLOG */
.blog-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: 28px;
  border-bottom: 1px solid var(--line);
}
.blog-filters__label { margin-right: 12px; }
.filter-pill {
  background: var(--paper);
  border: 1px solid var(--line-field);
  color: var(--ink);
  border-radius: 2px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.filter-pill:hover { border-color: var(--ink); }
.filter-pill[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.filter-pill .count { font-family: var(--font-mono); font-size: 10px; opacity: .7; }

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
  padding-block: clamp(40px, 5vw, 56px);
}
.post-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--ink);
}
.post-card:hover { color: var(--ink); }
.post-card__cover {
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  background-image: repeating-linear-gradient(135deg, oklch(0.94 0.004 60) 0 10px, var(--surface-2) 10px 20px);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.post-card__cover .cover-img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.post-card__cat {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
}
.post-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.post-card__title {
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 600;
  text-wrap: balance;
}
.post-card:hover .post-card__title { color: var(--accent-dark); }
.post-card__excerpt { font-size: 14.5px; line-height: 1.55; color: var(--ink-60); text-wrap: pretty; }
.post-card__more {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.blog-empty {
  padding: 48px 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* Paginación nativa de WordPress */
.pagination {
  padding-block: 8px clamp(48px, 6vw, 72px);
}
.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.pagination .page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.pagination .page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.pagination .page-numbers.dots { border-color: transparent; }

/* -------------------------------------------------------------- ARTÍCULO */
.article { padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 88px); }
.article__head { max-width: 760px; margin-inline: auto; }
.article__cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.article__title {
  margin-top: 18px;
  font-size: clamp(32px, 4.8vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
}
.article__lede {
  margin-top: 22px;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.55;
  color: var(--ink-70);
  text-wrap: pretty;
}
.article__meta {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.article__cover {
  max-width: 1080px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  border: 1px solid var(--line);
}
.article__cover img { width: 100%; height: auto; }

.article__body {
  max-width: 680px;
  margin: clamp(36px, 4vw, 56px) auto 0;
}
/* Ese margen superior es para cuando .article__body sigue a la cabecera de un
   artículo (single.php, page-caso.php). Dentro de .section__body —que ya aporta
   su propio padding-block— se sumaban y dejaban 144px de blanco muerto entre el
   filete del título y el primer párrafo. */
.section__body > .article__body { margin-top: 0; }

/* Hubs (/servicios/, /sectores/, /casos/): el contenido mezcla prosa con
   listados de fichas. La prosa conserva su medida de lectura y se centra; las
   rejillas y tablas usan todo el ancho disponible, porque dentro de la columna
   de 680px las fichas de caso salían en dos columnas de ~280px y los títulos
   partían en tres líneas. */
.article__body--hub { max-width: none; }
.article__body--hub > * { max-width: 680px; margin-inline: auto; }
.article__body--hub > .casos-grid,
.article__body--hub > .wp-block-table,
.article__body--hub > figure { max-width: none; }
.article__body > * + * { margin-top: 24px; }
.article__body p,
.article__body li {
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--ink-70);
  text-wrap: pretty;
}
.article__body strong { color: var(--ink); font-weight: 600; }
.article__body a {
  color: var(--accent-dark);
  border-bottom: 1px solid currentColor;
}
.article__body a:hover { color: var(--ink); }
.article__body h2 {
  margin-top: 52px;
  font-size: clamp(24px, 2.8vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 600;
  scroll-margin-top: 90px;
  text-wrap: balance;
}
.article__body h3 {
  margin-top: 38px;
  font-size: 21px;
  letter-spacing: -0.015em;
  font-weight: 600;
  scroll-margin-top: 90px;
}
.article__body ul,
.article__body ol { padding-left: 22px; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body li + li { margin-top: 8px; }
.article__body li::marker { color: var(--accent); }
.article__body blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 22px;
  margin-block: 32px;
}
.article__body blockquote p {
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.article__body img { border: 1px solid var(--line); }
.article__body figure { margin-block: 36px; }
.article__body figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-50);
}
.article__body pre {
  background: var(--ink);
  color: var(--on-dark);
  padding: 20px 24px;
  font: 13.5px/1.6 var(--font-mono);
  overflow-x: auto;
}
.article__body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 1px 5px;
}
.article__body pre code { background: none; border: 0; padding: 0; }
.article__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.article__body th,
.article__body td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.article__body th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-50);
}
/* Los bloques anchos del editor no deben desbordar la columna de lectura. */
.article__body .alignwide,
.article__body .alignfull {
  max-width: 100%;
  margin-inline: 0;
}
.article__body .wp-block-table { overflow-x: auto; }

.article__share {
  max-width: 680px;
  margin: clamp(40px, 5vw, 56px) auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.article__share > span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.article__share__links { display: flex; flex-wrap: wrap; gap: 8px; }
.article__share__links a {
  border: 1px solid var(--line-field);
  border-radius: 2px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.article__share__links a:hover { border-color: var(--ink); color: var(--ink); }

.related { border-top: 1px solid var(--line); background: var(--surface); }
.related__body { padding-block: clamp(48px, 6vw, 72px); }
.related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.related__head h2 {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.025em;
  font-weight: 600;
}

/* -------------------------------------------------------------- LEGALES */
.legal { padding-block: clamp(48px, 6vw, 80px); }
.legal__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.legal__aside { position: sticky; top: 90px; }
.legal__aside h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 16px;
}
.legal__aside ul { display: grid; gap: 2px; }
.legal__aside a {
  display: block;
  padding: 9px 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-60);
  border-bottom: 1px solid var(--line-soft);
}
.legal__aside a:hover { color: var(--ink); }
.legal__aside a[aria-current="page"] { color: var(--accent-dark); }
.legal__main { max-width: 70ch; }
.legal__main > * + * { margin-top: 18px; }
.legal__main h2 {
  margin-top: 44px;
  font-size: 24px;
  letter-spacing: -0.02em;
  font-weight: 600;
  scroll-margin-top: 90px;
}
.legal__main h3 { margin-top: 28px; font-size: 18px; font-weight: 600; }
.legal__main p,
.legal__main li { font-size: 16px; line-height: 1.68; color: var(--ink-70); text-wrap: pretty; }
.legal__main ul, .legal__main ol { padding-left: 22px; }
.legal__main ul { list-style: disc; }
.legal__main ol { list-style: decimal; }
.legal__main li + li { margin-top: 6px; }
.legal__main a { color: var(--accent-dark); border-bottom: 1px solid currentColor; }
.legal__main a:hover { color: var(--ink); }
.legal__main table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  font-size: 14.5px;
}
.legal__main th, .legal__main td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal__main th {
  width: 38%;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-50);
}
.legal__meta {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--ink-50);
}

/* ------------------------------------------------------------------- 404 */
.error404 { padding-block: clamp(64px, 10vw, 128px); text-align: center; }
.error404__code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.error404__title {
  margin-top: 18px;
  font-size: clamp(36px, 6vw, 64px);
  letter-spacing: -0.035em;
  font-weight: 600;
}
.error404 p { margin-top: 18px; font-size: 18px; color: var(--ink-60); }
.error404 .btn { margin-top: 34px; }

/* ------------------------------------------------- CONTACT FORM 7 ------ */
/* CF7 pinta su propio marcado dentro de .form; se alinea con los campos. */
.wpcf7 form .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px solid var(--line-field);
  border-left: 2px solid var(--accent);
  padding: 14px 16px;
  font-size: 14.5px;
}
.wpcf7 form.sent .wpcf7-response-output { border-left-color: oklch(0.60 0.15 150); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-left-color: var(--accent-dark); }
.wpcf7-not-valid-tip {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--accent-dark);
}
.wpcf7-spinner { margin-left: 10px; }
.form__consent { grid-column: 1 / -1; }
.form__consent .wpcf7-list-item { margin: 0; }
.form__consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-60);
  cursor: pointer;
}
.form__consent input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.form__legal {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-40);
}
.form__legal a { color: var(--ink-50); border-bottom: 1px solid currentColor; }
.form__legal a:hover { color: var(--accent-dark); }
/* Asterisco de campo obligatorio (decorativo: CF7 ya marca aria-required). */
.form__req { margin-left: 2px; color: var(--accent-dark); }
/* Qué pasa después de enviar: tranquiliza en el momento de más riesgo. */
.form__next {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-60);
  text-wrap: pretty;
}
/* Los botones de la portada bajan a la sección de contacto: que la cabecera
   fija no la tape. */
#contacto { scroll-margin-top: 80px; }

/* --------------------------------------------- BANNER DE COOKIES ------- */
.ah-cookie {
  position: fixed;
  left: 50%;
  bottom: clamp(12px, 2vw, 24px);
  /* env(): que no quede bajo el indicador de inicio del iPhone. */
  bottom: max(clamp(12px, 2vw, 24px), env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(8px);
  width: min(1100px, calc(100vw - 32px));
  z-index: 200;
  background: var(--ink);
  color: #fff;
  border: 1px solid oklch(0.30 0.012 60);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.ah-cookie.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }
.ah-cookie__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 32px);
  flex-wrap: wrap;
}
.ah-cookie__body { flex: 1 1 380px; min-width: 0; }
.ah-cookie__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--on-dark); }
.ah-cookie__text a { color: var(--accent-lift); border-bottom: 1px solid currentColor; }
.ah-cookie__prefs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid oklch(0.32 0.012 60);
}
.ah-cookie__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--on-dark);
  cursor: pointer;
}
.ah-cookie__opt em { color: var(--on-dark-dim); font-style: normal; }
.ah-cookie__opt input { width: 16px; height: 16px; accent-color: var(--accent); }
.ah-cookie__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ah-cookie__btn {
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.ah-cookie__btn--primary { background: var(--accent); color: #fff; }
.ah-cookie__btn--primary:hover { background: #fff; color: var(--ink); }
.ah-cookie__btn--ghost { background: transparent; color: #fff; border-color: oklch(0.42 0.012 60); }
.ah-cookie__btn--ghost:hover { border-color: #fff; }
@media (max-width: 720px) {
  .ah-cookie__inner { flex-direction: column; align-items: stretch; }
  .ah-cookie__actions .ah-cookie__btn { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ah-cookie { transition: none; }
}

/* --------------------------------------------------- RESPONSIVE (WP) --- */
@media (max-width: 1024px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .legal__grid { grid-template-columns: 1fr; }
  .legal__aside { position: static; }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
  .article__body p, .article__body li { font-size: 16.5px; }
}

/* Enlace «Configurar cookies» del pie: es una acción, va como <button>. */
.site-footer__cookies {
  margin-top: 6px;
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14.5px;
  color: var(--on-dark-dim);
  cursor: pointer;
  text-align: left;
  transition: color var(--dur-hover) ease;
}
.site-footer__cookies:hover { color: var(--accent-lift); }

/* ==========================================================================
   VOZ TIPOGRÁFICA
   Los titulares usan el eje `wdth` de Archivo variable. Antes el único
   «momento» tipográfico de la página era que <em> cambiaba de color: misma
   familia, mismo peso, misma anchura. Ahora el énfasis se comprime de verdad.
   ========================================================================== */

.hero__title,
.section-head__title,
.svc-hero__title,
.contact__title,
.cta-band__title,
.article__title,
.page-hero__title,
.error404__title,
.stat__num {
  font-stretch: var(--wdth-display);
}

/* La palabra resaltada cambia de anchura, no solo de color. */
.hero__title em,
.section-head__title em,
.contact__title em,
.cta-band__title em,
.article__title em,
.page-hero__title em,
.svc-hero__title em {
  font-style: normal;
  font-stretch: var(--wdth-emphasis);
  color: var(--accent);
  letter-spacing: -0.01em;
}

/* En pantallas estrechas el expandido roba demasiado ancho: se relaja. */
@media (max-width: 640px) {
  :root { --wdth-display: 104%; --wdth-emphasis: 84%; }
}

/* ==========================================================================
   FIRMA — PRUEBA EN VIVO
   El estudio vende webs medidas, así que la página se mide a sí misma. Es el
   único bloque donde la monoespaciada deja de ser una etiqueta diminuta y pasa
   a ser un cuadro de instrumentos: es la lectura de un aparato, no un titular.
   Toda la audacia de la página se gasta aquí; el resto se mantiene callado.
   ========================================================================== */
.proof {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--surface);
}
.proof__body { padding-block: clamp(48px, 6vw, 76px); }
.proof__intro { max-width: 62ch; }
.proof__label { color: var(--accent); margin-bottom: 16px; }
.proof__desc {
  margin-top: 18px;
  font-size: clamp(15.5px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--ink-60);
  text-wrap: pretty;
}

.proof__grid {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  /* Una columna por métrica presente: si el navegador no mide el LCP quedan
     dos, no tres con un hueco gris en medio. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.proof__metric {
  background: var(--paper);
  padding: clamp(22px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.proof__metric dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 5.5vw, 62px);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.proof__unit {
  font-size: 0.34em;
  letter-spacing: 0.06em;
  color: var(--ink-45);
}
.proof__metric dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* La cifra de LCP se colorea contra el umbral de Core Web Vitals. Solo esa:
   si se colorean las tres, el color deja de significar nada. */
.proof[data-lcp="good"] [data-metric="lcp"] dd { color: oklch(0.52 0.15 150); }
.proof[data-lcp="ok"]   [data-metric="lcp"] dd { color: oklch(0.62 0.14 75); }
.proof[data-lcp="poor"] [data-metric="lcp"] dd { color: var(--accent-dark); }

.proof__note {
  margin-top: 22px;
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-45);
}

@media (max-width: 720px) {
  .proof__grid { grid-auto-flow: row; grid-template-columns: 1fr; }
  .proof__metric { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; }
  .proof__metric dd { font-size: 34px; }
}

/* --- Piezas que CF7 inserta dentro del <form> y son hijas de la rejilla --- */

/* Contenedor de los <input type="hidden"> de CF7 (_wpcf7*). Como hijo de la
   rejilla dejaría una fila vacía. Los campos ocultos se envían igual. */
.form .hidden-fields-container { display: none; }

/* Turnstile (Cloudflare) — mide ~300x65 y va tras el consentimiento, justo
   antes de enviar. Se separa un poco del texto del consentimiento. */
.form .wpcf7-turnstile { min-height: 65px; margin-top: 4px; }

/* La etiqueta de la casilla de consentimiento no lleva el tratamiento de
   rótulo monoespaciado de los demás campos: es una frase que se lee. */
.form__consent .wpcf7-list-item { margin: 0; }
.form__consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-60);
  cursor: pointer;
  font-family: var(--font-sans);
  letter-spacing: normal;
  text-transform: none;
}
.form__consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--accent);
}

/* El aviso de error por campo, justo debajo del control. */
.wpcf7-not-valid-tip { margin-top: 6px; }
.field input.wpcf7-not-valid,
.field textarea.wpcf7-not-valid { border-color: var(--accent-dark); }

/* ==========================================================================
   PÁGINAS DE SERVICIO — acordeón de preguntas frecuentes
   Lo emite altahoja_service_faq_html() (inc/services.php) con <details>, que
   ya trae el comportamiento nativo: sin JS y accesible por teclado.
   ========================================================================== */
.svc-faq { margin-top: clamp(40px, 5vw, 64px); }
.svc-faq > h2 {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.025em;
  font-weight: 600;
  font-stretch: var(--wdth-display);
  margin-bottom: 8px;
}
.svc-faq__item { border-bottom: 1px solid var(--line); }
.svc-faq__item:first-of-type { border-top: 1px solid var(--ink); }
.svc-faq__item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 20px 44px 20px 0;
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.svc-faq__item summary::-webkit-details-marker { display: none; }
/* Signo +/− dibujado con dos filetes: gira al abrir, sin fuente de iconos. */
.svc-faq__item summary::before,
.svc-faq__item summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--accent);
  transition: transform var(--dur-move) ease;
}
.svc-faq__item summary::after { transform: rotate(90deg); }
.svc-faq__item[open] summary::after { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
  .svc-faq__item summary::before,
  .svc-faq__item summary::after { transition: none; }
}
.svc-faq__a { padding: 0 44px 22px 0; }
.svc-faq__a p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-70);
  max-width: 68ch;
  text-wrap: pretty;
}

/* ==========================================================================
   HUBS (/servicios/, /sectores/, /casos/) — índice de páginas hijas
   ========================================================================== */
.hub-grid {
  display: grid;
  /* auto-fit y no auto-fill: con 3 tarjetas, auto-fill dejaba una cuarta
     columna vacía a la derecha. auto-fit colapsa las que sobran. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.hub-card {
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.hub-card:hover { background: var(--surface); color: var(--ink); }
.hub-card__shot {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.hub-card__shot .cover-img { width: 100%; height: 100%; object-fit: cover; }
.hub-card__body {
  padding: clamp(22px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.hub-card__title {
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: balance;
}
.hub-card:hover .hub-card__title { color: var(--accent-dark); }
.hub-card__excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-60);
  text-wrap: pretty;
}
.hub-card__more {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.hub-card__more .arrow { display: inline-block; transition: transform var(--dur-move) ease; }
@media (hover: hover) and (pointer: fine) {
  .hub-card:hover .hub-card__more .arrow { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hub-card__more .arrow { transition: none; }
}

/* ==========================================================================
   CASOS DE ÉXITO — bloques dentro del contenido
   El contenido publicado de /casos/* usa estas clases (ficha técnica, antes /
   después, pilares, checklist, nota y gauges de PageSpeed). Venían del tema
   anterior; aquí se reescriben con los tokens nuevos: filete fino en vez de
   tarjeta redondeada, y la monoespaciada solo donde hay datos.
   ========================================================================== */

/* Ficha técnica */
.caso-spec {
  border-top: 1px solid var(--ink);
  margin: 0 0 40px;
  padding-top: 18px;
}
.caso-spec dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 24px;
  margin: 0;
}
.caso-spec dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
  align-self: baseline;
}
.caso-spec dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

/* Antes / después */
.caso-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 32px 0 8px;
}
.caso-ba__card {
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--paper);
}
.caso-ba__card > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.caso-ba__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border: 1px solid currentColor;
  flex: none;
}
.caso-ba__tag--before { color: var(--ink-50); }
.caso-ba__tag--after { color: var(--accent-dark); }
.caso-ba__shot {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-50);
  background: repeating-linear-gradient(135deg, oklch(0.94 0.004 60) 0 10px, var(--surface-2) 10px 20px);
}
.caso-ba__shot img { width: 100%; height: 100%; object-fit: cover; }
.caso-ba__shot small { display: block; margin-top: 8px; opacity: .7; font-size: 10px; }
.caso-ba__card figcaption {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-60);
}

/* Pilares */
.caso-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 32px 0 8px;
}
.caso-pillars--4 { grid-template-columns: repeat(4, 1fr); }
.caso-pillar { background: var(--paper); padding: 26px; }
.caso-pillar .ix {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 12px;
}
.caso-pillar h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.caso-pillar p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-60); }

/* Checklist técnico */
.caso-checks {
  border: 1px solid var(--line);
  padding: 28px 30px;
  margin: 32px 0 8px;
  background: var(--surface);
}
.caso-checks ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
  padding: 0;
  margin: 0;
}
.caso-checks li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  color: var(--ink-70);
}
/* Marca de verificación dibujada con dos filetes: sin fuente de iconos. */
.caso-checks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.caso-checks code,
.caso-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 1px 5px;
}

/* Casos: primero lo que el trabajo técnico significa para el negocio, en
   claro, para quien decide la compra. La lista técnica se queda entera, pero
   plegada en un <details> justo debajo (nativo: sin JS y con teclado). */
.caso-plain {
  border: 1px solid var(--line);
  padding: 28px 30px;
  margin: 32px 0 0;
  background: var(--surface);
}
.caso-plain ul {
  list-style: none;
  display: grid;
  gap: 16px;
  padding: 0;
  margin: 0;
}
.caso-plain li {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-70);
}
.caso-plain li strong { color: var(--ink); }
/* Mismo titular que el recuadro de Lighthouse, sin el margen de los h3 del
   cuerpo, que dejaba ~60 px vacíos arriba y pegaba la lista al título. */
.caso-plain h3 { margin: 0 0 18px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }

details.caso-checks { padding: 0; margin-top: 12px; }
details.caso-checks summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 18px 64px 18px 30px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-70);
}
details.caso-checks summary::-webkit-details-marker { display: none; }
details.caso-checks summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Signo +/− como en las FAQ de servicio. */
details.caso-checks summary::before,
details.caso-checks summary::after {
  content: "";
  position: absolute;
  right: 30px;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--accent);
  transition: transform var(--dur-move) ease;
}
details.caso-checks summary::after { transform: rotate(90deg); }
details.caso-checks[open] summary::after { transform: rotate(0deg); }
details.caso-checks ul { padding: 4px 30px 28px; }
@media (prefers-reduced-motion: reduce) {
  details.caso-checks summary::before,
  details.caso-checks summary::after { transition: none; }
}

/* Nota destacada */
.caso-note {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 20px;
  margin: 32px 0;
}
.caso-note p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-70); }
.caso-note strong { color: var(--ink); }

/* Bloque editorial y enlace a caso relacionado */
.caso-editorial { border-top: 1px solid var(--line); padding-top: 24px; margin: 32px 0; }
.caso-editorial .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.caso-editorial h3 { margin: 10px 0 8px; font-size: 20px; font-weight: 600; }
.caso-editorial p { margin: 0; color: var(--ink-60); }

.caso-related {
  display: block;
  border: 1px solid var(--line);
  padding: 22px 24px;
  margin: 32px 0;
  color: var(--ink);
  transition: background-color var(--dur-hover) ease;
}
.caso-related:hover { background: var(--surface); color: var(--ink); }
.caso-related .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.caso-related h4 { margin: 8px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.caso-related .arrow { display: inline-block; transition: transform var(--dur-move) ease; }
@media (hover: hover) and (pointer: fine) {
  .caso-related:hover .arrow { transform: translateX(4px); }
}

/* ---- Gauges de PageSpeed / Lighthouse ---- */
.caso-psi {
  border: 1px solid var(--line);
  padding: 28px 30px;
  margin: 32px 0;
  background: var(--surface);
}
.caso-psi__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.caso-psi__head h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.caso-psi__src {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-50);
}
.caso-psi__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.caso-psi__grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.caso-psi .caso-psi__foot {
  margin: 20px auto 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-55);
  max-width: 70ch;
}

.psi-gauge { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.psi-gauge__dial { position: relative; width: 96px; height: 96px; }
.psi-gauge__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.psi-gauge__track,
.psi-gauge__bar { fill: none; stroke-width: 8; }
.psi-gauge__track { stroke: var(--line); }
.psi-gauge__bar {
  stroke: var(--ink-50);
  stroke-linecap: round;
  stroke-dasharray: 301.6;      /* 2·π·r con r=48 */
  stroke-dashoffset: 301.6;     /* arranca vacío; lo anima el JS */
  transition: stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1);
}
.psi-gauge.is-good .psi-gauge__bar { stroke: oklch(0.62 0.16 150); }
.psi-gauge.is-avg  .psi-gauge__bar { stroke: oklch(0.70 0.15 75); }
.psi-gauge.is-poor .psi-gauge__bar { stroke: var(--accent); }
.psi-gauge__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.psi-gauge.is-good .psi-gauge__num { color: oklch(0.52 0.15 150); }
.psi-gauge.is-avg  .psi-gauge__num { color: oklch(0.58 0.14 75); }
.psi-gauge.is-poor .psi-gauge__num { color: var(--accent-dark); }
.psi-gauge__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-50);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .psi-gauge__bar { transition: none; }
  .caso-related .arrow { transition: none; }
}

@media (max-width: 860px) {
  .caso-ba { grid-template-columns: 1fr; }
  .caso-pillars,
  .caso-pillars--4 { grid-template-columns: 1fr 1fr; }
  .caso-psi__grid,
  .caso-psi__grid.cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .caso-pillars,
  .caso-pillars--4 { grid-template-columns: 1fr; }
  .caso-checks ul { grid-template-columns: 1fr; }
  .caso-checks { padding: 24px 20px; }
  .caso-psi { padding: 24px 20px; }
  .caso-plain { padding: 24px 20px; }
  details.caso-checks summary { padding: 16px 52px 16px 20px; }
  details.caso-checks summary::before,
  details.caso-checks summary::after { right: 20px; }
  details.caso-checks ul { padding: 4px 20px 24px; }
}

/* En móvil, «IZUEL · Estepona · Costa del Sol» más el botón de menú no caben en
   375px y empujaban el botón fuera de la cabecera. La ubicación ya está en el
   pie y en la sección de contacto: aquí sobra. */
@media (max-width: 560px) {
  .site-header__inner { gap: 16px; }
  .brand__place { display: none; }
}

/* Los hijos de una rejilla o un flex tienen `min-width: auto`, así que no bajan
   de su contenido mínimo y pueden ensanchar la columna por encima del
   contenedor. Produce unos pocos píxeles de desbordamiento horizontal en móvil,
   suficientes para que aparezca la barra. Esta es la guarda estándar. */
.contact > *,
.hero > *,
.svc-hero > *,
.cta-band > *,
.section-head > *,
.case__body > *,
.related__head > * { min-width: 0; }

/* Tablas anchas (p. ej. la de cookies: 5 columnas) — hacen scroll en su propia
   caja en vez de ensanchar la página. Sin esto, en móvil la tabla forzaba la
   columna de la rejilla a 549px y arrastraba consigo la barra lateral y el
   resto del documento. El <figure class="wp-block-table"> lo pone WordPress
   solo, así que no hay que tocar el contenido. */
.wp-block-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wp-block-table > table { min-width: 32rem; }

/* Y la guarda de contenido mínimo también en la rejilla de las legales. */
.legal__grid > * { min-width: 0; }

/* ==========================================================================
   LISTADO DE CASOS DENTRO DEL CONTENIDO (/casos/)
   La página trae su propia rejilla escrita a mano, con las capturas reales.
   Se reescribe con los tokens nuevos: filete fino, sin sombra ni radio.
   ========================================================================== */
.casos-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 8px 0;
}
.caso-entry {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
  padding: clamp(24px, 3vw, 32px);
  background: var(--paper);
  color: var(--ink);
}
.caso-entry:hover { background: var(--surface); color: var(--ink); }
.caso-entry > * { min-width: 0; }
.caso-entry__text h2 {
  margin: 0 0 12px;
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  font-stretch: var(--wdth-display);
  text-wrap: balance;
}
.caso-entry:hover .caso-entry__text h2 { color: var(--accent-dark); }
.caso-entry__text p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-60);
  text-wrap: pretty;
}
.caso-entry__text a { color: var(--accent-dark); font-weight: 600; }
.caso-entry__media {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.caso-entry__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 551;
  object-fit: cover;
  object-position: top;
}
@media (max-width: 760px) {
  .caso-entry { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------------------------------------------------------------- CHAT IA */
/* Widget de assets/chat.js. El botón queda por debajo del banner de cookies
   (z-index 200) pero desplazado por encima de él con --izc-offset; el panel,
   por encima de todo. */
.izc-boton {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + var(--izc-offset, 0px));
  z-index: 150;
  padding: 14px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.izc-boton[hidden] { display: none; }
/* Compacto en móvil: a 375 px el botón de 200×46 px tapaba tablas y texto. */
@media (max-width: 760px) {
  .izc-boton { padding: 10px 14px; font-size: 13px; }
}
/* Se aparta mientras taparía el botón «Enviar» de un formulario, y se queda en
   espera hasta que el visitante ha pasado la primera pantalla (chat.js). Sin
   transform ni desplazamiento: así no cambia el rectángulo que se mide. */
.izc-boton.izc-aparte,
.izc-boton.izc-espera {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear .18s;
}
@media (prefers-reduced-motion: reduce) {
  .izc-boton.izc-aparte,
  .izc-boton.izc-espera { transition: none; }
}

.izc-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 210;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 32px));
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}
.izc-panel[hidden] { display: none; }

.izc-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.izc-titulo { flex: 1; margin: 0; font-size: 15px; font-weight: 700; }
.izc-accion {
  background: none;
  border: 0;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.izc-accion:hover { color: var(--accent-dark); }
.izc-cerrar { font-size: 22px; line-height: 1; }

.izc-registro {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.izc-msg { max-width: 88%; padding: 10px 12px; font-size: 15px; line-height: 1.45; }
.izc-msg p { margin: 0; }
.izc-msg p + p, .izc-msg ul + p, .izc-msg p + ul { margin-top: 8px; }
.izc-msg ul { margin: 0; padding-left: 18px; }
.izc-msg a { color: inherit; text-decoration: underline; }
.izc-msg--agente { align-self: flex-start; background: var(--surface); border: 1px solid var(--line-soft); }
.izc-msg--visitante { align-self: flex-end; background: var(--ink); color: #fff; white-space: pre-wrap; }
.izc-msg--escribiendo { color: var(--ink); font-style: italic; }
.izc-msg--error { align-self: stretch; max-width: none; border-left: 3px solid var(--accent); background: var(--surface); }

.izc-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.izc-sugerencias[hidden] { display: none; }
.izc-sugerencia {
  border: 1px solid var(--line-input);
  background: var(--paper);
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.izc-sugerencia:hover { border-color: var(--ink); }

.izc-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}
.izc-caja {
  grid-column: 1 / -1;
  width: 100%;
  resize: none;
  border: 1px solid var(--line-input);
  padding: 10px;
  font: inherit;
  font-size: 16px; /* 16px: iOS no hace zoom al enfocar */
}
.izc-contador { align-self: center; font-size: 12px; color: var(--ink); opacity: .75; }
.izc-enviar { padding: 10px 18px; }
.izc-turnstile:empty { display: none; }
.izc-turnstile { padding: 0 14px; }
.izc-aviso { margin: 0; padding: 8px 14px 12px; font-size: 12px; line-height: 1.4; color: var(--ink); opacity: .75; }

@media (max-width: 640px) {
  .izc-panel { inset: 0; width: auto; height: auto; border: 0; box-shadow: none; }
}