/* ==========================================================================
   Grupo Aserpaz — Capa editorial
   Rompe la rejilla de plantilla: solapamientos, tipografía de cartel,
   ilustración vectorial, rejilla bento y transiciones entre secciones.
   Se carga después de components.css, así que puede pisar lo que necesite.
   ========================================================================== */

/* ---------- Nuevos tokens de esta capa ---------- */
:root {
  --az-ghost: rgba(18, 80, 140, 0.07);        /* números fantasma sobre claro */
  --az-ghost-dark: rgba(255, 255, 255, 0.06); /* sobre oscuro */
  --az-blob: 58% 42% 47% 53% / 42% 48% 52% 58%;
  --az-fs-mega: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem);
  --az-fs-ghost: clamp(6rem, 3rem + 12vw, 13rem);
}

/* ==========================================================================
   1. PIEZAS GRÁFICAS
   ========================================================================== */

/* Skyline: se ancla al fondo de la sección que lo contiene.
   Siempre en segundo plano: es textura, no protagonista. */
.az-art-skyline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%; height: auto;
  max-height: 240px;
  color: currentColor;
  opacity: .13;
  pointer-events: none;
  z-index: 0;
}
.az-hero .az-art-skyline { max-height: 220px; opacity: .12; }

/* Retícula de plano */
.az-art-blueprint {
  position: absolute;
  width: min(52vw, 620px); height: auto;
  pointer-events: none;
  color: var(--az-blue-500);
  opacity: .07;
  z-index: 0;
}

/* Arco divisor entre secciones */
.az-art-arc {
  position: absolute; left: 0; right: 0;
  width: 100%; height: clamp(48px, 6vw, 96px);
  display: block;
  pointer-events: none;
  z-index: 2;
}
.az-art-arc--bottom { bottom: -1px; }
.az-art-arc--top { top: -1px; }

/* Trazo de rotulador bajo una palabra (SVG como fondo, no como nodo) */
/* inline-block + nowrap: así el trazo cubre exactamente la palabra y no se
   parte en dos líneas dejando la raya suelta entre renglones. */
.az-marked { position: relative; display: inline-block; white-space: nowrap; }
.az-marked::after {
  content: "";
  position: absolute;
  left: -1.5%; right: -1.5%; bottom: -.13em;
  height: .28em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 17.5c34-5.2 78-8.4 128-9.1 44-.6 92 1.4 166 6.2-46 3.4-96 5.1-150 5.1-40 0-84-1-132-2.9 32-3.2 76-5.1 132-5.7 46-.5 96 .5 150 3.1' fill='none' stroke='%23E09B22' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
/* Sobre el degradado del hero el trazo se atenúa un poco */
.az-hero .az-marked::after { opacity: .9; }

/* Sello circular girado */
.az-stamp {
  position: relative;
  display: grid; place-items: center;
  width: 104px; height: 104px;
  flex: 0 0 auto;
  color: var(--az-accent-500);
  transform: rotate(-9deg);
  font-family: var(--az-font-head);
  text-align: center;
}
.az-stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.az-stamp__top,
.az-stamp__under {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1; opacity: .9;
}
.az-stamp__top { margin-bottom: 2px; }
.az-stamp__big {
  font-size: 2rem; font-weight: var(--az-fw-bold);
  line-height: 1; letter-spacing: -.03em;
}
.az-stamp__under { margin-top: 2px; }

/* Ilustración isométrica */
.az-art-iso {
  width: min(100%, 420px); height: auto;
  color: currentColor;
}

/* Número fantasma de fondo */
.az-ghost-num {
  position: absolute;
  font-family: var(--az-font-head);
  font-size: var(--az-fs-ghost);
  font-weight: var(--az-fw-bold);
  line-height: .72;
  letter-spacing: -.05em;
  color: var(--az-ghost);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.az-section--dark .az-ghost-num { color: var(--az-ghost-dark); }

/* Etiqueta vertical de sección */
.az-vlabel {
  position: absolute;
  top: var(--az-section-y);
  /* Se coloca en el margen exterior del contenedor, nunca sobre el texto. */
  left: calc(50% - var(--az-container) / 2 - 58px);
  writing-mode: vertical-rl;
  font-family: var(--az-font-head);
  font-size: var(--az-fs-xs);
  font-weight: var(--az-fw-semibold);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--az-gray-300);
  pointer-events: none;
}
.az-section--dark .az-vlabel { color: rgba(255,255,255,.22); }
@media (max-width: 1720px) { .az-vlabel { display: none; } }

/* ==========================================================================
   2. HERO REDISEÑADO
   ========================================================================== */
.az-hero {
  padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem) clamp(4.5rem, 3rem + 4vw, 6.5rem);
  isolation: isolate;
}
.az-hero__inner {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  align-items: center;
  position: relative;
  z-index: 3;
}
.az-hero__body { padding-top: clamp(0rem, 1vw, 1.5rem); }

/* Titular a tamaño cartel, con la última línea desplazada */
.az-hero h1 {
  font-size: var(--az-fs-mega);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin-bottom: var(--az-space-6);
  text-wrap: balance;
}
.az-hero h1 { max-width: 26ch; }
.az-hero h1 em { color: #fff; }

/* La entradilla se separa con una regla fina, no con más espacio */
.az-hero__lead {
  position: relative;
  padding-left: var(--az-space-5);
  border-left: 2px solid var(--az-accent-500);
  max-width: 46ch;
}

/* Fila de confianza: sello + cifras */
.az-hero__trust {
  align-items: center;
  gap: var(--az-space-7);
  border-top: 0;
  padding-top: 0;
  margin-top: var(--az-space-9);
}
.az-hero__trust-item { position: relative; padding-left: var(--az-space-5); }
.az-hero__trust-item::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: rgba(255,255,255,.22);
}
.az-hero__trust-item strong { font-size: 2.1rem; letter-spacing: -.03em; }

/* --------------------------------------------------------------------------
   Columna ilustrada del hero (sustituye al formulario)
   -------------------------------------------------------------------------- */
.az-hero__art {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem) 0;
}
.az-hero__art .az-art-iso {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  color: rgba(255, 255, 255, .78);
  filter: drop-shadow(0 18px 40px rgba(3, 22, 48, .45));
}
/* Halo cálido detrás del edificio: da profundidad sin cajas */
.az-hero__art-glow {
  position: absolute;
  z-index: 1;
  width: 78%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
    rgba(224, 155, 34, .34) 0%,
    rgba(224, 155, 34, .12) 42%,
    transparent 70%);
  filter: blur(6px);
}
/* Etiquetas flotantes: refuerzan el mensaje sin pedir datos */
.az-hero__chip {
  position: absolute;
  z-index: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: var(--az-navy-900);
  font-family: var(--az-font-head);
  font-weight: 600;
  font-size: var(--az-fs-xs);
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(3, 22, 48, .3);
}
/* El sello se apoya en la esquina de la ilustración */
.az-hero__art .az-stamp {
  position: absolute;
  z-index: 3;
  top: 2%; left: 1%;
  color: rgba(255, 255, 255, .55);
  transform: rotate(-11deg);
}
.az-hero__art .az-stamp__big { color: var(--az-accent-500); }
.az-hero__art .az-stamp__top,
.az-hero__art .az-stamp__under { color: rgba(255, 255, 255, .8); }

.az-hero__chip svg { color: var(--az-accent-600); flex: none; }
.az-hero__chip--a { top: 4%; right: -1%; }
.az-hero__chip--b { bottom: 6%; left: -4%; }

@media (max-width: 1180px) {
  .az-hero__chip { font-size: 11px; padding: .5rem .8rem; }
  .az-hero__chip--a { right: 0; }
  .az-hero__chip--b { left: 0; }
}
@media (max-width: 980px) {
  /* En móvil la ilustración es un remate, no la protagonista */
  .az-hero__art { padding-top: var(--az-space-8); gap: var(--az-space-4); justify-items: center; }
  .az-hero__art .az-art-iso { width: min(78%, 300px); }
  .az-hero__chip { position: static; }
  .az-hero__art-glow { width: 60%; }
  .az-hero__art .az-stamp { position: static; transform: none; }
}
@media (max-width: 620px) {
  .az-hero__chip--b { display: none; }
}

/* Isométrico compacto de la banda de CTA */
.az-art-iso--sm { width: min(100%, 230px); }

/* Tarjeta del formulario: sale del flujo y se gira un pelo */
.az-hero__card {
  position: relative;
  margin-top: clamp(0rem, 2vw, 2.5rem);
  border-radius: var(--az-radius-lg);
  border-top-right-radius: 0;
}
.az-hero__card::after {
  /* Marca de esquina en ámbar */
  content: ""; position: absolute; top: 0; right: 0;
  width: 34px; height: 34px;
  background: var(--az-accent-500);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.az-hero__card h2 { padding-right: 40px; font-size: var(--az-fs-h4); }
.az-hero__card > p { font-size: var(--az-fs-xs); }
/* La columna es estrecha: los pares de campos se apilan para que las
   etiquetas no partan en dos líneas. */
.az-hero__card .az-form__row,
.az-hero__card .wpcf7 .az-form__row { grid-template-columns: 1fr; }
.az-hero__card .az-field label,
.az-hero__card .wpcf7 label { font-size: 11px; }
.az-hero__card .az-form,
.az-hero__card .wpcf7-form { gap: var(--az-space-3); }
.az-hero__card textarea,
.az-hero__card .wpcf7-textarea { min-height: 84px; }
.az-hero__card :is(input, select, textarea) { padding: .6rem .8rem; }
.az-hero__card .az-form__consent { font-size: 11px; line-height: 1.45; }

@media (max-width: 980px) {
  .az-hero__inner { grid-template-columns: 1fr; }
  .az-hero h1 { max-width: none; }
}

/* ==========================================================================
   3. CIFRAS SOLAPANDO EL HERO
   ========================================================================== */
.az-statsband {
  position: relative;
  z-index: 5;
  /* Negativo mayor que el padding inferior del hero: así la tarjeta pisa
     el degradado en lugar de quedar debajo. */
  margin-top: clamp(-6.5rem, -5vw, -4rem);
  padding-top: 0;
  padding-bottom: 0;
}
@media (max-width: 980px) {
  .az-statsband { margin-top: -3rem; }
}
.az-stats {
  border-radius: var(--az-radius-lg);
  box-shadow: var(--az-shadow-lg);
  border: 1px solid var(--az-gray-100);
  overflow: hidden;
  position: relative;
  padding: clamp(1.5rem, 2vw, 2.25rem) clamp(1rem, 2vw, 2rem);
}
.az-stats::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--az-blue-600), var(--az-accent-500));
}
.az-stat__value {
  font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4rem);
  letter-spacing: -.045em;
}
.az-stat__value sup { top: -.55em; }
.az-stat__label { font-size: 11px; letter-spacing: .12em; }

/* ==========================================================================
   4. SERVICIOS EN BENTO
   ========================================================================== */
.az-bento {
  display: grid;
  gap: var(--az-space-4);
  grid-template-columns: repeat(6, 1fr);
}
/* Destacada: 3 columnas y doble alto */
.az-bento > .az-card:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.az-bento > .az-card:nth-child(2) { grid-column: span 3; }
.az-bento > .az-card:nth-child(3) { grid-column: span 3; }
.az-bento > .az-card:nth-child(4) { grid-column: span 2; }
.az-bento > .az-card:nth-child(5) { grid-column: span 2; }
.az-bento > .az-card:nth-child(6) { grid-column: span 2; }

@media (max-width: 900px) {
  .az-bento { grid-template-columns: repeat(2, 1fr); }
  .az-bento > .az-card:nth-child(n) { grid-column: span 2; grid-row: auto; }
}

/* La tarjeta destacada respira más y lleva la ilustración */
.az-card--featured {
  justify-content: flex-end;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  overflow: hidden;
  position: relative;
  border-top-right-radius: 0;
}
.az-card--featured h3 { font-size: var(--az-fs-h3); max-width: 22ch; }
.az-card--featured p { max-width: 34ch; }
.az-card--featured .az-art-skyline { max-height: 150px; color: #fff; opacity: .18; }
.az-card--featured::before {
  content: ""; position: absolute; top: 0; right: 0;
  width: 54px; height: 54px;
  background: var(--az-accent-500);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  z-index: 1;
}
.az-card--featured .az-card__icon { position: relative; z-index: 2; }

/* Iconos con forma orgánica en vez de cuadrado redondeado */
.az-card__icon {
  border-radius: var(--az-blob);
  width: 60px; height: 60px;
  transition: background var(--az-dur) var(--az-ease),
              color var(--az-dur) var(--az-ease),
              border-radius var(--az-dur-slow) var(--az-ease);
}
.az-card:hover .az-card__icon { border-radius: 50% 50% 46% 54% / 54% 46% 54% 46%; }

/* Numeración discreta en la esquina de cada tarjeta */
.az-card { counter-increment: az-card; }
.az-bento { counter-reset: az-card; }
.az-bento > .az-card::before {
  content: counter(az-card, decimal-leading-zero);
  position: absolute; top: var(--az-space-5); right: var(--az-space-5);
  font-family: var(--az-font-head);
  font-size: var(--az-fs-xs);
  font-weight: var(--az-fw-semibold);
  letter-spacing: .1em;
  color: var(--az-gray-300);
}
.az-bento > .az-card--featured::before { content: none; }

/* ==========================================================================
   5. VENTAJAS CON NÚMEROS FANTASMA
   ========================================================================== */
.az-section--dark { position: relative; overflow: hidden; }
.az-feature {
  position: relative;
  padding: var(--az-space-6) var(--az-space-5);
  border-radius: var(--az-radius-md);
  overflow: hidden;
}
.az-feature .az-feature__num {
  position: absolute;
  top: -.18em; right: -.02em;
  width: auto; height: auto;
  display: block;
  background: none;
  border-radius: 0;
  font-size: 5.2rem;
  font-weight: var(--az-fw-bold);
  color: var(--az-ghost-dark);
  letter-spacing: -.05em;
  line-height: 1;
  pointer-events: none;
}
.az-section:not(.az-section--dark) .az-feature .az-feature__num { color: var(--az-ghost); }
.az-feature > div { position: relative; z-index: 1; }
.az-feature h3 { padding-right: 2.5rem; }
.az-feature::after {
  content: ""; position: absolute; left: var(--az-space-5); bottom: 0;
  width: 34px; height: 2px;
  background: var(--az-accent-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--az-dur-slow) var(--az-ease-out);
}
.az-feature:hover::after { transform: scaleX(1); }

/* ==========================================================================
   6. PROCESO COMO LÍNEA TEMPORAL
   ========================================================================== */
.az-steps { position: relative; gap: var(--az-space-7); }
.az-step { padding-top: var(--az-space-8); }
.az-step::before {
  /* El número pasa a ser un nodo del recorrido */
  top: 0; left: 0;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  font-size: var(--az-fs-sm);
  color: var(--az-blue-700);
  background: var(--az-blue-100);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--az-white);
  z-index: 2;
}
.az-step::after {
  top: 22px; left: 46px; right: -24px;
  border-top: 2px dotted var(--az-blue-200);
}
.az-step:hover::before { background: var(--az-accent-500); color: var(--az-navy-950); }
.az-step h3 { margin-top: var(--az-space-5); }

/* ==========================================================================
   7. BANDA MARQUESINA
   ========================================================================== */
.az-marquee {
  position: relative;
  overflow: hidden;
  background: var(--az-navy-900);
  color: rgba(255,255,255,.55);
  padding-block: var(--az-space-4);
  border-block: 1px solid rgba(255,255,255,.08);
}
.az-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--az-space-7);
  animation: az-slide 38s linear infinite;
}
.az-marquee span {
  display: inline-flex; align-items: center; gap: var(--az-space-4);
  font-family: var(--az-font-head);
  font-size: var(--az-fs-sm);
  font-weight: var(--az-fw-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.az-marquee span::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--az-accent-500);
}
@keyframes az-slide { to { transform: translateX(-50%); } }
.az-marquee:hover .az-marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .az-marquee__track { animation: none; }
}

/* ==========================================================================
   8. DOBLE CTA CON MÁS CARÁCTER
   ========================================================================== */
.az-split__panel { overflow: hidden; }
.az-split__panel--dark { border-bottom-left-radius: 0; }
.az-split__panel--light { border-bottom-right-radius: 0; }
.az-split__panel .az-card__icon { border-radius: var(--az-blob); }
.az-split__panel--dark .az-art-skyline { max-height: 130px; color: #fff; opacity: .16; }

/* ==========================================================================
   9. FAQ NUMERADAS
   ========================================================================== */
.az-faq { counter-reset: az-faq; border-top: 0; }
.az-faq__item { counter-increment: az-faq; border-bottom-color: var(--az-gray-200); }
.az-faq__q { gap: var(--az-space-5); padding-block: var(--az-space-6); }
.az-faq__q > span:first-child { display: flex; gap: var(--az-space-4); align-items: baseline; }
.az-faq__q > span:first-child::before {
  content: counter(az-faq, decimal-leading-zero);
  font-size: var(--az-fs-xs);
  font-weight: var(--az-fw-semibold);
  letter-spacing: .1em;
  color: var(--az-accent-600);
  flex: 0 0 auto;
}
.az-faq__a p { padding-left: calc(var(--az-space-4) + 22px); }

/* ==========================================================================
   10. BANDA CTA CON ILUSTRACIÓN
   ========================================================================== */
.az-cta-band {
  text-align: left;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--az-space-7);
  align-items: center;
  overflow: hidden;
}
.az-cta-band p { margin-inline: 0; max-width: 44ch; }
.az-cta-band .az-btn-row { justify-content: flex-start; }
.az-cta-band__art { justify-self: center; color: rgba(255,255,255,.5); }
@media (max-width: 860px) {
  .az-cta-band { grid-template-columns: 1fr; text-align: center; }
  .az-cta-band p { margin-inline: auto; }
  .az-cta-band .az-btn-row { justify-content: center; }
  .az-cta-band__art { display: none; }
}

/* ==========================================================================
   11. OFICINAS COMO FICHAS NUMERADAS
   ========================================================================== */
.az-office {
  position: relative;
  border-left-width: 0;
  border-top: 3px solid var(--az-blue-500);
  border-radius: 0 0 var(--az-radius-md) var(--az-radius-md);
  padding-top: var(--az-space-6);
}
.az-office:hover { border-top-color: var(--az-accent-500); border-left-color: var(--az-gray-100); }
.az-office h3 { display: flex; align-items: center; gap: var(--az-space-3); }
.az-office h3::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--az-accent-500);
  flex: 0 0 auto;
}

/* ==========================================================================
   12. CABECERA DE SECCIÓN EDITORIAL
   ========================================================================== */
.az-section-head { position: relative; z-index: 1; }
.az-section-head h2 { max-width: 24ch; }
.az-section-head--split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  max-width: none;
}
.az-section-head--split h2 { margin-bottom: 0; }
.az-section-head--split p { padding-bottom: 6px; }
@media (max-width: 860px) {
  .az-section-head--split { grid-template-columns: 1fr; align-items: start; }
}

/* Antetítulo con punto en vez de raya, más discreto */
.az-eyebrow::before { width: 6px; height: 6px; border-radius: 50%; }

/* ==========================================================================
   13. CABECERA DE PÁGINA INTERIOR
   ========================================================================== */
.az-pagehead { padding-bottom: clamp(3.5rem, 3rem + 4vw, 6rem); }
.az-pagehead h1 {
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem);
  letter-spacing: -.035em;
  line-height: 1.02;
  max-width: 22ch;
}
.az-pagehead .az-art-skyline { max-height: 170px; color: #fff; opacity: .11; }

/* ==========================================================================
   14. PIE CON TEXTURA
   ========================================================================== */
.az-footer { position: relative; overflow: hidden; }
.az-footer::before {
  content: ""; position: absolute; top: 0; right: -10%;
  width: 60%; height: 100%;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1px, transparent 0);
  background-size: 22px 22px;
  mask-image: radial-gradient(60% 80% at 80% 20%, #000 20%, transparent 75%);
  pointer-events: none;
}
.az-footer__grid { position: relative; z-index: 1; }
.az-footer__bottom { position: relative; z-index: 1; }

/* ==========================================================================
   15. AJUSTES DE SECCIÓN
   ========================================================================== */
.az-section { overflow: hidden; }
.az-section--arc { padding-bottom: calc(var(--az-section-y) + 3rem); }
.az-section--soft, .az-section--gradient { position: relative; }

/* ==========================================================================
   16. ENVOLTORIOS DE LAS PIEZAS
   ========================================================================== */
.az-arcwrap {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: clamp(48px, 6vw, 96px);
  display: block;
  pointer-events: none;
  z-index: 3;
}
.az-arcwrap .az-art-arc { position: absolute; inset: 0; height: 100%; }

.az-bp { position: absolute; pointer-events: none; z-index: 0; display: block; }
.az-bp--right { top: -10%; right: -6%; }
.az-bp--left  { bottom: -12%; left: -8%; }

/* El contenido siempre por encima de la textura */
.az-section > .az-container { position: relative; z-index: 1; }

/* Cuando la sección lleva arco, el contenido no debe pisarlo */
.az-section--arc > .az-container { padding-bottom: clamp(1rem, 3vw, 2.5rem); }

/* ==========================================================================
   10. PÁGINAS CON SECCIONES (contacto, servicios…)
   Cuando una página monta shortcodes de sección dentro del contenido, hay
   dos contenedores anidados. Aquí se neutraliza el interior para que todo
   quede alineado a la misma columna y sin dobles paddings.
   ========================================================================== */
.az-section--flush { padding-block: clamp(2rem, 4vw, 3.5rem) 0; }
.az-section--flush > .az-container > .az-section { padding-inline: 0; }
.az-section--flush > .az-container > .az-section > .az-container {
  max-width: none;
  padding-inline: 0;
}
/* El primer bloque de texto de la página no necesita doble separación */
.az-section--flush > .az-container > p:first-child { margin-top: 0; }

/* CF7 envuelve cada control en un <span> en línea, así que el width:100%
   del select y del textarea no se resolvía y salían a tamaño intrínseco. */
.wpcf7-form-control-wrap { display: block; }
.wpcf7-form .az-field > .wpcf7-form-control-wrap { width: 100%; }

/* Una tarjeta de formulario a 1120 px deja los campos incómodamente largos:
   se acota y se centra sobre la rejilla de oficinas. */
.az-section--flush .az-el-surface:has(.wpcf7) {
  max-width: 880px;
  margin-inline: auto;
}

/* CF7 mete <p> automáticos dentro de los campos y heredaban el max-width
   de medida de lectura del cuerpo de texto, encogiendo los controles. */
.wpcf7-form p {
  max-width: none;
  margin: 0;
}