/* ============================================================
   contador-punta-del-este.css — reglas propias de
   /contador-punta-del-este/ (11/08/2026).

   Se enlaza SOLO desde esa pagina, despues de
   ez-design-system-v2.purged.css. Todo scoped bajo
   .ez-pde-page.

   POR QUE SE FUERON .ez-local-service-page Y
   .ez-location-seo-page. Esas dos clases vestian la pagina con la
   grilla de .ez-service-card: trece tarjetas blancas con sombra,
   una por parrafo, mas la alternancia mecanica de fondos por
   nth-of-type. Medido el 11/08 sobre el build: 6.248px a 1440,
   10.022px a 390, 26 sombras, 109 blancos tactiles y un renglon
   de 963px. La intencion de esta URL —alguien que busca un
   contador que atienda su zona— no necesita un catalogo: necesita
   cuatro areas, tres perfiles, donde es la atencion presencial y
   el primer paso.

   El vocabulario .ez-ed-* es el mismo de /honorarios/,
   /contabilidad-maldonado/ y /contador-software-exportacion-uruguay/:
   se repite archivo por archivo porque el encargo pide una hoja
   aislada por pagina y prohibe sumar capas al CSS compartido.

   DOS EJES Y NO TRES. 1200px para breadcrumb, hero, secciones y
   CTA; 1120px para la franja de confianza, que es el ancho que le
   da el componente compartido. El tercer eje que traen las paginas
   hermanas es el CTA final, que hereda `max-width: 700px` de
   .ez-mid-cta__inner: aca se anula, como pide el encargo.

   No se usa .ez-reveal: pone opacity 0 y solo la devuelve el JS.
   El contenido de esta pagina tiene que leerse aunque el JS falle,
   y con .ez-reveal las capturas de control salian en blanco.
   ============================================================ */

.ez-pde-page {
  --ez-cool: #f7fafc;
  --ez-pale: #eaf1f6;
  --ez-rule: #cdd5e0;
  /* Dorado para TEXTO sobre fondo claro. El --gold del sistema
     (#c8a968) da 2,17:1 contra blanco: sirve para un filete, no
     para una palabra. Este valor da 5,0:1 sobre el azul niebla de
     la banda del recorrido, que es donde se usa. */
  --ez-gold-ink: #7d6229;
}

/* ------------------------------------------------------------
   FOCO VISIBLE
   ------------------------------------------------------------
   Mismo arreglo ya aprobado en /honorarios/ y
   /contabilidad-maldonado/. El aro dorado del sistema da 2,17:1
   contra el blanco de la pagina y WCAG 1.4.11 pide 3:1 para un
   indicador no textual. Navy (12:1) con halo dorado, invertido
   sobre el hero navy. Es una regla de pagina; el aro global no se
   toca desde aca. axe no lo ve: el contraste del foco no esta
   entre sus reglas. */
.ez-pde-page :focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(200, 169, 104, 0.45);
}

.ez-pde-page .ez-page-hero :focus-visible {
  outline-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35);
}

/* ------------------------------------------------------------
   HERO — escala compacta
   ------------------------------------------------------------
   Patron interno/transaccional, no portada institucional: se
   llega aca desde una busqueda y la primera pantalla tiene que
   resolver "esto es lo que necesito" mas la accion.

   min-height: 0 rompe a proposito los 550px que el sistema le fija
   a .ez-page-hero para que la franja de confianza arranque en el
   mismo pixel en todas las paginas del menu. Esta no es una pagina
   del menu. Es la misma decision ya tomada en /honorarios/ (372px),
   /contador-software-exportacion-uruguay/ (372px) y
   /contabilidad-maldonado/ (372px), y el encargo prohibe tocar el
   CSS compartido. Si algun dia se prefiere la coincidencia, se
   borra esta linea y vuelven los 550px.

   Baja el AIRE, no la tipografia: el H1 conserva su clamp y la
   bajada su cuerpo. */
.ez-pde-page .ez-page-hero {
  min-height: 0;
  padding: var(--sp-16) 0;
}

.ez-pde-page .ez-page-hero__inner {
  max-width: none;
  text-align: left;
}

.ez-pde-page .ez-page-hero .ez-eyebrow {
  text-align: left;
  margin-bottom: var(--sp-5);
}

.ez-pde-page .ez-page-hero .ez-eyebrow::after {
  margin: var(--sp-3) 0 0;
}

/* 28ch: el H1 lleva "Punta del Este" entero y con 26ch caia en
   tres renglones en escritorio. A 28ch entra en dos. */
.ez-pde-page .ez-page-hero h1 {
  margin-inline: 0;
  margin-bottom: 0;
  max-width: 28ch;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.14;
}

.ez-pde-page .ez-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-6) var(--sp-10);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.ez-pde-page .ez-page-hero__sub {
  margin: 0;
  max-width: 58ch;
  text-align: left;
}

.ez-pde-page .ez-page-hero__actions {
  margin: 0;
  justify-content: flex-start;
}

/* Boton principal sobre fondo oscuro: dorado con texto azul
   profundo. En navy sobre navy el boton principal queda a 1,3:1
   del fondo. La sombra se saca: la direccion no lleva sombras. */
.ez-pde-page .ez-page-hero .ez-btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #061d36;
  box-shadow: none;
}

.ez-pde-page .ez-page-hero .ez-btn--primary:hover {
  background: #d6ba78;
  border-color: #d6ba78;
  color: #061d36;
}

@media (max-width: 900px) {
  .ez-pde-page .ez-hero-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--sp-6);
  }
}

/* ------------------------------------------------------------
   FRANJA DE CONFIANZA — tres datos
   ------------------------------------------------------------
   El sistema la arma en cuatro columnas. Aca son tres, que es el
   patron aprobado, y los tres son rotulos cortos ("Desde 1993",
   "CCEAU", "La Barra + online"), no cifras de display: se les baja
   el cuerpo y se les da tratamiento de etiqueta. Asi "CCEAU" no
   compite en tamano con un numero.

   Ninguna estrella, ninguna resena, ningun numero de oficinas y
   ningun plazo de respuesta: un plazo publicado es una obligacion
   y no corresponde ponerlo como insignia. */
.ez-pde-page .ez-pricing-trust {
  background: var(--white);
  padding: var(--sp-8) 0;
}

.ez-pde-page .ez-pricing-trust__list {
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}

.ez-pde-page .ez-pricing-trust__list strong {
  font: 600 0.82rem/1.3 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.ez-pde-page .ez-pricing-trust__list strong::after {
  margin-top: var(--sp-3);
}

/* El componente pide --gray-500, que no existe en el sistema: la
   declaracion se descarta entera y en silencio, y el texto hereda
   el gris del body. Se fija el token real. */
.ez-pde-page .ez-pricing-trust__list span {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* En telefono, TRES RENGLONES enteros y no dos columnas mas una
   huerfana. min-height: 0 es la linea que hace el trabajo: el
   componente compartido le pone 7,2rem de alto minimo a cada dato,
   que con tres frases apiladas son 40px de aire muerto por
   renglon. */
@media (max-width: 768px) {
  .ez-pde-page .ez-pricing-trust {
    padding: var(--sp-5) 0;
  }
  .ez-pde-page .ez-pricing-trust__list {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: left;
  }
  .ez-pde-page .ez-pricing-trust__list > li {
    min-height: 0;
    padding: var(--sp-3) 0;
    border-left: 0;
    border-top: 1px solid var(--gray-100);
  }
  .ez-pde-page .ez-pricing-trust__list > li:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .ez-pde-page .ez-pricing-trust__list > li:last-child {
    padding-bottom: 0;
  }
  .ez-pde-page .ez-pricing-trust__list strong {
    margin-bottom: var(--sp-1);
    font-size: 0.75rem;
  }
  .ez-pde-page .ez-pricing-trust__list strong::after {
    display: none;
  }
  .ez-pde-page .ez-pricing-trust__list span {
    font-size: 0.9rem;
  }
}

/* ------------------------------------------------------------
   SECCION EDITORIAL — carcasa comun
   ------------------------------------------------------------
   Los fondos van agrupados con intencion y no en damero:
   blanco (areas) · niebla (perfiles) · blanco (atencion) ·
   frio (cuando) · blanco (recorrido) · frio (preguntas) ·
   blanco (CTA). Dos superficies frias seguidas nunca, pero
   tampoco un cambio en cada seccion. */
.ez-pde-page .ez-ed {
  padding: var(--sp-12) 0;
}

.ez-pde-page .ez-ed--white { background: var(--white); }
.ez-pde-page .ez-ed--cool  { background: var(--ez-cool); }
.ez-pde-page .ez-ed--pale  { background: var(--ez-pale); }

.ez-pde-page .ez-ed__inner {
  width: min(var(--max-w), calc(100% - var(--side) * 2));
  margin-inline: auto;
}

.ez-pde-page .ez-ed__head {
  max-width: 74ch;
  margin-bottom: var(--sp-7);
}

.ez-pde-page .ez-ed__head h2 {
  color: var(--navy);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  line-height: 1.18;
  margin: 0;
}

/* UNA sola linea decorativa por encabezado, y es esta. */
.ez-pde-page .ez-ed__head h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold);
  border-radius: var(--r-pill);
  margin: var(--sp-4) 0 0;
}

.ez-pde-page .ez-ed__head p {
  margin: var(--sp-5) 0 0;
  max-width: 72ch;
  color: var(--gray-600);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* ------------------------------------------------------------
   QUE NECESITAS RESOLVER — cuatro columnas editoriales
   ------------------------------------------------------------
   Cuatro areas, sin caja ni sombra: filete dorado arriba y el
   texto debajo. A 1440 cada columna mide ~270px, muy por debajo
   del tope de renglon. Dos columnas en tablet, una en telefono. */
.ez-pde-page .ez-ed-quad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-8);
  align-items: start;
}

.ez-pde-page .ez-ed-quad > * {
  padding-top: var(--sp-5);
  border-top: 2px solid var(--gold);
}

.ez-pde-page .ez-ed-quad h3 {
  margin: 0 0 var(--sp-3);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
}

.ez-pde-page .ez-ed-quad p {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.98rem;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .ez-pde-page .ez-ed-quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-7) var(--sp-8);
  }
}

@media (max-width: 600px) {
  .ez-pde-page .ez-ed-quad {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

/* ------------------------------------------------------------
   PARA QUIENES — tres columnas en una sola banda
   ------------------------------------------------------------
   Una banda de azul niebla, no tres tarjetas. Lo que separa un
   perfil del siguiente son dos divisores finos de 1px, y el unico
   acento dorado de la banda es el borde izquierdo de 3px.

   Las tres columnas son items de grid con `align-items: stretch`
   por defecto, asi que miden lo mismo: los divisores arrancan y
   terminan a la misma altura sin altura fija de por medio. */
.ez-pde-page .ez-ed-perfiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--ez-pale);
  border-left: 3px solid var(--gold);
  padding: var(--sp-8) 0;
  margin: 0;
  list-style: none;
}

.ez-pde-page .ez-ed-perfiles > li {
  padding: 0 var(--sp-8);
}

.ez-pde-page .ez-ed-perfiles > li + li {
  border-left: 1px solid var(--ez-rule);
}

.ez-pde-page .ez-ed-perfiles h3 {
  margin: 0 0 var(--sp-3);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
}

.ez-pde-page .ez-ed-perfiles p {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Apilados, con separador horizontal en vez de vertical. La banda
   conserva su fondo y su unico acento dorado a la izquierda. */
@media (max-width: 900px) {
  .ez-pde-page .ez-ed-perfiles {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .ez-pde-page .ez-ed-perfiles > li {
    padding: var(--sp-6);
  }
  .ez-pde-page .ez-ed-perfiles > li + li {
    border-left: 0;
    border-top: 1px solid var(--ez-rule);
  }
}

/* ------------------------------------------------------------
   ATENCION DESDE LA BARRA — texto y ficha de datos
   ------------------------------------------------------------
   La UNICA caja con borde de toda la pagina, y es la ficha de
   contacto: el dato duro merece un contenedor y el resto no.
   Coincide con la fuente de verdad: una sola sede, en La Barra.
   Punta del Este es zona atendida y se dice explicitamente que
   ahi no hay oficina. */
.ez-pde-page .ez-ed-lugar {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 2px solid var(--gold);
}

.ez-pde-page .ez-ed-lugar h2 {
  margin: 0 0 var(--sp-4);
  color: var(--navy);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.2;
}

.ez-pde-page .ez-ed-lugar p {
  margin: 0;
  max-width: 68ch;
  color: var(--gray-600);
  font-size: 0.98rem;
  line-height: 1.7;
}

.ez-pde-page .ez-ed-lugar p + p {
  margin-top: var(--sp-4);
}

.ez-pde-page .ez-ed-lugar__ficha {
  padding: var(--sp-5) var(--sp-6);
  background: var(--ez-cool);
  border: 1px solid var(--gray-100);
  border-radius: 2px;
}

.ez-pde-page .ez-ed-lugar__datos {
  margin: 0;
}

.ez-pde-page .ez-ed-lugar__ficha dt {
  margin-bottom: var(--sp-2);
  color: var(--gray-400);
  font: 600 0.72rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ez-pde-page .ez-ed-lugar__ficha dd {
  margin: 0 0 var(--sp-4);
  color: var(--gray-600);
  font-size: 0.9rem;
  line-height: 1.6;
}

.ez-pde-page .ez-ed-lugar__datos dd:last-of-type {
  margin-bottom: var(--sp-5);
}

.ez-pde-page .ez-ed-lugar__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Los dos botones de la ficha se leen dentro de una columna de
   ~440px en escritorio: sin `flex: 1` el segundo se parte en dos
   renglones en tablet. Con este minimo entran los dos en linea
   hasta 900px y se apilan enteros debajo. */
.ez-pde-page .ez-ed-lugar__acciones .ez-btn {
  flex: 1 1 175px;
  box-shadow: none;
  justify-content: center;
  text-align: center;
}

@media (max-width: 900px) {
  .ez-pde-page .ez-ed-lugar {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

/* ------------------------------------------------------------
   CUANDO CONVIENE CONSULTAR — matriz de dos por dos
   ------------------------------------------------------------
   Cuatro celdas: el rotulo de la situacion y, debajo, que pasa
   primero. Es una <dl>, asi que la relacion esta en el marcado y
   no solo en la posicion. Sin numeros en circulos, sin iconos y
   sin sombras.

   Se descarto el rotulo a la izquierda con el desarrollo a la
   derecha en cuatro filas: el texto moria a media pagina y dejaba
   un blanco muerto contra el borde derecho que
   check-huecos-visuales marca. */
.ez-pde-page .ez-ed-spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-12);
  row-gap: var(--sp-7);
  margin: 0;
}

.ez-pde-page .ez-ed-spec__row {
  padding-top: var(--sp-5);
  border-top: 2px solid var(--gold);
}

.ez-pde-page .ez-ed-spec dt {
  margin-bottom: var(--sp-3);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.ez-pde-page .ez-ed-spec dd {
  margin: 0;
  max-width: 62ch;
  color: var(--gray-600);
  font-size: 0.98rem;
  line-height: 1.7;
}

@media (max-width: 860px) {
  .ez-pde-page .ez-ed-spec {
    grid-template-columns: 1fr;
    row-gap: var(--sp-6);
  }
}

/* ------------------------------------------------------------
   COMO EMPEZAMOS — un recorrido, no tres tarjetas
   ------------------------------------------------------------
   Tres momentos en una sola linea horizontal, con la etiqueta
   pequena arriba y el titulo serif debajo. Ni capsulas 01/02/03
   ni circulos numerados: el rotulo es el momento, que ademas dice
   algo, y el orden lo da la lectura.

   Un solo acento dorado: el filete superior de 2px que cruza el
   eje entero. Los divisores verticales son grises de 1px. */
.ez-pde-page .ez-ed-ruta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: var(--sp-6);
  border-top: 2px solid var(--gold);
  margin: 0;
  list-style: none;
  counter-reset: none;
}

.ez-pde-page .ez-ed-ruta > li {
  padding-right: var(--sp-8);
}

.ez-pde-page .ez-ed-ruta > li + li {
  padding-left: var(--sp-8);
  border-left: 1px solid var(--ez-rule);
}

/* Dorado oscuro, no el gris: la etiqueta es el momento del
   recorrido y es lo que ordena la lectura de izquierda a derecha.
   --ez-gold-ink da 6,6:1 sobre blanco; el --gold del sistema
   daria 2,17:1 y no llegaria ni al minimo de texto grande. */
.ez-pde-page .ez-ed-ruta__label {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--ez-gold-ink);
  font: 600 0.74rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ez-pde-page .ez-ed-ruta h3 {
  margin: 0 0 var(--sp-3);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.ez-pde-page .ez-ed-ruta p {
  margin: 0;
  max-width: 46ch;
  color: var(--gray-600);
  font-size: 0.98rem;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .ez-pde-page .ez-ed-ruta {
    grid-template-columns: 1fr;
    row-gap: var(--sp-6);
  }
  .ez-pde-page .ez-ed-ruta > li {
    padding-right: 0;
  }
  .ez-pde-page .ez-ed-ruta > li + li {
    padding-left: 0;
    padding-top: var(--sp-6);
    border-left: 0;
    border-top: 1px solid var(--ez-rule);
  }
}

/* ------------------------------------------------------------
   PREGUNTAS — cuatro, visibles, sin acordeon
   ------------------------------------------------------------
   Estaticas y en el DOM desde el primer pixel. No hay <details>
   ni JavaScript de por medio: cuatro preguntas cortas caben
   abiertas en dos por dos sin alargar la pagina, y asi tampoco
   hace falta un FAQPage que las duplique. */
.ez-pde-page .ez-ed-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-12);
  row-gap: var(--sp-7);
}

.ez-pde-page .ez-ed-faq__item {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ez-rule);
}

.ez-pde-page .ez-ed-faq__item h3 {
  margin: 0 0 var(--sp-3);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
}

.ez-pde-page .ez-ed-faq__item p {
  margin: 0;
  max-width: 62ch;
  color: var(--gray-600);
  font-size: 0.98rem;
  line-height: 1.7;
}

@media (max-width: 860px) {
  .ez-pde-page .ez-ed-faq {
    grid-template-columns: 1fr;
    row-gap: var(--sp-6);
  }
}

/* ------------------------------------------------------------
   ENLACES DE TEXTO — blanco tactil de 24px
   ------------------------------------------------------------
   `inline`, no `inline-block`: una caja en linea no se parte entre
   renglones, asi que toma el ancho disponible entero y empuja a la
   linea siguiente lo que venga despues, dejando el punto final
   solo. Con `inline` el enlace se parte como texto y el `padding`
   vertical igual agranda el area util por encima de los 24px. */
.ez-pde-page .ez-ed a:not(.ez-btn) {
  display: inline;
  padding-block: 3px;
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.ez-pde-page .ez-ed a:not(.ez-btn):hover,
.ez-pde-page .ez-ed a:not(.ez-btn):focus-visible {
  text-decoration-color: var(--navy);
}

/* ------------------------------------------------------------
   CTA FINAL
   ------------------------------------------------------------
   Patron editorial aprobado en /honorarios/ y
   /contador-software-exportacion-uruguay/: rotulo plano sin
   capsula, titulo en Newsreader, eje de 1200px, boton dorado
   primario y secundario con borde.

   `max-width: none` sobre .ez-mid-cta__inner es la linea que deja
   la pagina en DOS ejes. El componente compartido lo fija en
   700px, y ese es el tercer eje que miden las paginas hermanas. */
.ez-pde-page .ez-cta-light {
  background: var(--white);
  border-top: 1px solid rgba(205, 213, 224, 0.75);
  padding: var(--sp-12) 0;
}

.ez-pde-page .ez-cta-light .ez-mid-cta__inner {
  width: min(var(--max-w), calc(100% - var(--side) * 2));
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

.ez-pde-page .ez-cta-light .ez-eyebrow {
  display: inline-block;
  margin: 0 auto var(--sp-4);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ez-pde-page .ez-cta-light .ez-eyebrow::after {
  display: none;
}

.ez-pde-page .ez-cta-light h2 {
  margin-inline: auto;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.8vw, 2rem);
  font-weight: 600;
  line-height: 1.14;
  text-align: center;
}

/* 62ch cierra la bajada en dos renglones en escritorio sin tocar
   el cuerpo ni el interlineado. */
.ez-pde-page .ez-cta-light p {
  margin-inline: auto;
  margin-bottom: var(--sp-6);
  max-width: 62ch;
  color: var(--gray-600);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
}

.ez-pde-page .ez-cta-light .ez-mid-cta__actions {
  justify-content: center;
}

.ez-pde-page .ez-cta-light .ez-btn {
  box-shadow: none;
  font-family: var(--font-body);
  font-weight: 600;
}

/* SIN REGLA DE .ez-scope-note. La pagina ya no lleva nota al pie:
   decia en general lo que el cuerpo dice en concreto, y lo decia
   detras del CTA. El disclaimer profesional completo vive en
   /alcance/. Las reglas GLOBALES de .ez-scope-note no se tocaron:
   las siguen usando otras paginas. */

/* ------------------------------------------------------------
   MOVIL
   ------------------------------------------------------------
   El cuerpo baja a 0,94rem con interlinea 1,6 o mas, que es el
   minimo que fija el encargo. Ningun control baja de 44px ni
   ningun enlace de 24px. */
@media (max-width: 640px) {
  .ez-pde-page .ez-ed {
    padding: var(--sp-8) 0;
  }
  .ez-pde-page .ez-ed__head {
    margin-bottom: var(--sp-6);
  }
  .ez-pde-page .ez-ed__head p,
  .ez-pde-page .ez-ed-quad p,
  .ez-pde-page .ez-ed-perfiles p,
  .ez-pde-page .ez-ed-spec dd,
  .ez-pde-page .ez-ed-ruta p,
  .ez-pde-page .ez-ed-faq__item p,
  .ez-pde-page .ez-ed-lugar p {
    font-size: 0.94rem;
    line-height: 1.62;
  }

  /* El hero de telefono es donde estaba el aire. Los 64px de
     relleno arriba y abajo vienen del sistema, pensados para un
     hero centrado de 550px; con la composicion bajada y las
     acciones apiladas dejan la accion principal fuera de la
     primera pantalla en un telefono chico. Se recorta el relleno
     y los saltos internos, no la tipografia. */
  .ez-pde-page .ez-page-hero {
    padding: var(--sp-10) 0;
  }
  .ez-pde-page .ez-page-hero .ez-eyebrow {
    margin-bottom: var(--sp-4);
  }
  .ez-pde-page .ez-hero-row {
    gap: var(--sp-5);
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
  }
  .ez-pde-page .ez-page-hero h1 {
    font-size: clamp(1.6rem, 6.2vw, 2.1rem);
    max-width: none;
  }
  .ez-pde-page .ez-page-hero__sub {
    font-size: 0.98rem;
  }
  .ez-pde-page .ez-page-hero__actions {
    gap: var(--sp-2);
  }
  .ez-pde-page .ez-page-hero__actions .ez-btn,
  .ez-pde-page .ez-ed-lugar__acciones .ez-btn {
    width: 100%;
    max-width: 340px;
  }
  .ez-pde-page .ez-cta-light {
    padding: var(--sp-10) 0;
  }
}