/* ============================================================
   /servicios/ — CSS propio y exclusivo de esta pagina.
   No toca ez-design-system-v2. Todo scoped bajo
   .ez-services-page.ez-servicios-studio (selector raiz real del
   <main> de esta pagina).
   ------------------------------------------------------------
   Calibracion (agosto 2026, 4ta pasada). La estructura estaba
   aprobada — hero, confianza, 8 servicios, proceso, CTA, nota —
   pero desalineada. Lo que se corrige, medido en 1440px:

     - El proceso usaba un contenedor propio de 1220px mientras el
       resto de la pagina usa 1200: sobresalia 10px por lado.
     - La cabecera de servicios tenia TRES ejes: eyebrow a la
       izquierda, H2 y regla dorada centrados (heredado de
       `.ez-services h2` del sistema), parrafo a la izquierda.
     - Los numeros 01-08 de las tarjetas sugerian un orden que los
       servicios no tienen. Se eliminan (HTML y CSS).
     - Los numeros 01-03 del proceso repetian un recurso ya
       descartado en Home. Pasan a nodos dorados sin texto; el <ol>
       se conserva por semantica.
     - El cierre del proceso media 631px porque `p { max-width:
       65ch }` del sistema lo topaba. Ahora ocupa el contenedor.
     - La franja de confianza estaba en 106px contra los 169 del
       componente canonico: los overrides de padding, min-height y
       tamano de cifra que la achicaban quedaron eliminados.
     - Tarjetas blancas sobre seccion blanca (la venia pisando
       `.ez-servicios-studio .ez-services { background: white }`
       del sistema). La seccion pasa a off-white.
   ============================================================ */

/* --- Hero. No se recompone en esta pasada; solo conserva la
   anulacion del min-height:550px del sistema, que es deliberado
   alla (alinea el hero de las 4 paginas "tipo menu") y aca se
   descarta a proposito para el hero compacto de /servicios/. --- */
.ez-services-page.ez-servicios-studio .ez-page-hero {
  padding: var(--sp-8) 0;
  min-height: 0;
}
.ez-services-page.ez-servicios-studio .ez-page-hero__inner h1 {
  max-width: 32ch;
}

/* ============================================================
   Franja de confianza — componente canonico, sin recortes
   ------------------------------------------------------------
   La version anterior la bajaba a 106px pisando padding (24px),
   min-height (auto) y el cuerpo de la cifra (1.15rem). Todo eso se
   fue: el componente compartido ya da los 169px de Home, Sobre el
   estudio y Ubicaciones (40 + 88 + 40 + 1px de borde). Lo unico
   que queda aca es pasar de 4 a 3 columnas.
   ============================================================ */
.ez-services-page.ez-servicios-studio .ez-pricing-trust__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Movil: tres columnas de 1/3 de 358px no entran. Pasan a tres
   filas compactas con divisores horizontales — sin chips, sin
   tarjetas, y sin el min-height de 7.2rem que las estiraria a 345px. */
@media (max-width: 700px) {
  .ez-services-page.ez-servicios-studio .ez-pricing-trust {
    padding-block: var(--sp-5);
  }
  .ez-services-page.ez-servicios-studio .ez-pricing-trust__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .ez-services-page.ez-servicios-studio .ez-pricing-trust__list > li {
    min-height: 0;
    padding: var(--sp-2) 0;
    border-left: 0;
  }
  .ez-services-page.ez-servicios-studio .ez-pricing-trust__list > li + li {
    border-top: 1px solid var(--gray-100);
  }
  .ez-services-page.ez-servicios-studio .ez-pricing-trust__list strong {
    font-size: 1.25rem;
    margin-bottom: var(--sp-1, 0.25rem);
  }
  /* La regla dorada bajo la cifra deja de ser un separador util
     cuando ya hay divisores entre filas. */
  .ez-services-page.ez-servicios-studio .ez-pricing-trust__list strong::after {
    display: none;
  }
}

/* ============================================================
   Servicios — cabecera y ocho tarjetas
   ============================================================ */

.ez-services-page.ez-servicios-studio .ez-services {
  /* Rompe la secuencia cromatica hero navy > confianza blanca >
     servicios off-white > proceso navy > cierre blanco. El sistema
     pone `background: var(--white)` para esta pagina; sin esto las
     tarjetas blancas quedan sobre blanco. */
  background: var(--off-white);
  /* 3.5rem literal: la escala salta de --sp-12 a --sp-16, no hay --sp-14. */
  padding: var(--sp-12) 0 3.5rem;
}

/* --- Cabecera: UN solo eje, a la izquierda ---
   `.ez-services h2` del sistema centra el titulo y su regla dorada
   (`margin: var(--sp-4) auto 0`). Hay que nombrar los tres. --- */
.ez-services-page.ez-servicios-studio .ez-services-intro {
  max-width: 660px;
  margin-inline: 0;
  margin-bottom: var(--sp-8);
  text-align: left;
}
.ez-services-page.ez-servicios-studio .ez-services-intro h2 {
  margin: 0 0 var(--sp-3);
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  text-align: left;
}
.ez-services-page.ez-servicios-studio .ez-services-intro h2::after {
  margin-left: 0;
  margin-right: 0;
}
.ez-services-page.ez-servicios-studio .ez-services-intro p {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: left;
}

/* --- La grilla usa el ancho del contenedor, no uno propio ---
   Antes tenia `width: min(1220px, 100%)`, un segundo tope que no
   hacia falta y que desalineaba en viewports anchos. --- */
.ez-services-page.ez-servicios-studio .ez-service-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Todas las filas iguales: los titulos caen en la misma
     coordenada vertical y las 8 tarjetas miden lo mismo, tambien
     apiladas en movil (ahi cada tarjeta es su propia fila). */
  grid-auto-rows: 1fr;
  gap: var(--sp-5);
  width: 100%;
}

.ez-services-page.ez-servicios-studio .ez-service-tile {
  background: var(--white);
  border: 1px solid rgba(205, 213, 224, 0.8);
  border-top: 2px solid var(--gold);
  border-radius: 3px;
  box-shadow: none;
  padding: var(--sp-6);
  /* Contenido arriba, no centrado: la distancia entre la linea
     dorada y el titulo tiene que ser identica en las ocho. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.ez-services-page.ez-servicios-studio .ez-service-tile h3 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display, "Newsreader", serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}
.ez-services-page.ez-servicios-studio .ez-service-tile p {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.5;
}
/* Enlace de las tres fichas que tienen pagina propia: contabilidad mensual,
   residencia fiscal y software y exportacion. Las otras cinco no la tienen y
   se quedan sin enlace a proposito: un destino inventado seria relleno.

   NO se reusa `.ez-service-card__link` del sistema compartido, que es el de la
   portada: declara `font-weight: 700` y esta pagina esta medida con CERO pesos
   arriba de 600, que es regla del sistema (arriba de 600 el navegador falsea
   el trazo). Se copia su gesto —navy con flecha dorada— con el peso correcto.

   `min-height: 24px` por el mismo motivo que el enlace del titulo en el indice
   del blog: el blanco tactil de una linea de texto de 0,9rem queda en 21px y
   la pagina esta medida con 0 blancos bajo 24px en los 14 anchos. */
.ez-services-page.ez-servicios-studio .ez-service-tile__link {
  display: inline-block;
  margin-top: var(--sp-3);
  min-height: 24px;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.ez-services-page.ez-servicios-studio .ez-service-tile__link::after {
  content: " \2192";
  color: var(--ez-gold-ink, #7d6229);
}

@media (max-width: 1024px) {
  .ez-services-page.ez-servicios-studio .ez-service-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Dos columnas solo mientras cada tarjeta conserve ~330px utiles.
   Por debajo, una sola. */
@media (max-width: 720px) {
  .ez-services-page.ez-servicios-studio .ez-service-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Apiladas, la tarjeta mas larga usa 3 renglones de texto y con 24px de
     relleno las ocho quedaban en 151px. Con 20px caen dentro del objetivo
     sin tocar el cuerpo tipografico. */
  .ez-services-page.ez-servicios-studio .ez-service-tile {
    padding: var(--sp-5);
  }
}

/* ============================================================
   Proceso — franja navy a todo el ancho, nodos sin numeros
   ============================================================ */

/* Paleta propia de la seccion. Estaba en el mismo navy del footer y se leia
   como un segundo pie de pagina, cortando el recorrido antes del CTA. Pasa a
   un azul claro que la separa del footer (12,43:1 entre ambos) sin salirse de
   la familia fria del sitio. Contrastes sobre #eaf1f6, medidos: titulo 11,89:1,
   titulo de paso 12,43:1, descripcion 6,32:1, eyebrow 4,75:1 —
   los cuatro pasan AA. La linea y los puntos son decoracion, no
   portan informacion por si solos. */
.ez-services-page.ez-servicios-studio .ez-process {
  --proc-fondo: #eaf1f6;
  --proc-titulo: #082f55;
  --proc-paso: #0b2c4d;
  --proc-texto: #405a70;
  --proc-eyebrow: #526d83;
  --proc-linea: #b8cad8;
  --proc-punto: #c8a968;

  background: var(--proc-fondo);
  padding-block: 56px;
}
/* MISMO contenedor que el resto de la pagina. Se usa `--max-w` (no
   un valor fijo) para que coincida con `.ez-services__inner`,
   `.ez-mid-cta__inner` y la nota en TODOS los viewports, no solo
   en 1440: esa variable vale clamp(1200px, 78vw, 1440px) en esta
   pagina y un 1200px hardcodeado se separaria arriba de 1538px. */
.ez-services-page.ez-servicios-studio .ez-process__inner {
  width: min(var(--max-w), calc(100% - var(--side) * 2));
  max-width: none;
  margin-inline: auto;
}

/* --- Cabecera del proceso: centrada, con regla dorada --- */
.ez-services-page.ez-servicios-studio .ez-process__head {
  margin-bottom: 28px;
  text-align: center;
}
.ez-services-page.ez-servicios-studio .ez-process__head .ez-method-process__label {
  color: var(--proc-eyebrow);
  opacity: 1;
  margin-inline: auto;
  margin-bottom: var(--sp-3);
}
.ez-services-page.ez-servicios-studio .ez-process__head h2 {
  margin: 0;
  color: var(--proc-titulo);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  line-height: 1.3;
  text-align: center;
}
.ez-services-page.ez-servicios-studio .ez-process__head h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--proc-punto);
  margin: var(--sp-3) auto 0;
}

.ez-services-page.ez-servicios-studio .ez-process__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* UNA linea continua, no un borde por paso. Arranca y termina en el
   centro de la primera y la ultima columna —no en el borde del
   contenedor— para que nazca y muera en un nodo:
   centro de columna = (ancho - 2 huecos) / 6. */
.ez-services-page.ez-servicios-studio .ez-process__steps::before {
  content: "";
  position: absolute;
  top: 3px;
  left: calc((100% - 2 * var(--sp-6)) / 6);
  right: calc((100% - 2 * var(--sp-6)) / 6);
  height: 1px;
  background: var(--proc-linea);
  z-index: 0;
}
.ez-services-page.ez-servicios-studio .ez-process__step {
  position: relative;
  padding-top: 22px;
  text-align: center;
}
/* El nodo: un punto dorado de 7px centrado sobre la columna. Sin
   texto adentro, sin fondo navy recortando la linea, sin circulo
   grande. Reemplaza a `.ez-process__num`, que ya no existe. */
.ez-services-page.ez-servicios-studio .ez-process__step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--proc-punto);
}
.ez-services-page.ez-servicios-studio .ez-process__step h3 {
  color: var(--proc-paso);
  font-size: 1rem;
  margin: 0 0 var(--sp-2);
}
.ez-services-page.ez-servicios-studio .ez-process__step p {
  color: var(--proc-texto);
  font-size: 0.96rem;
  line-height: 1.5;
  margin: 0;
  /* Medida de lectura corta: la columna mide 384px y sin tope el renglon se
     estiraba hasta el borde. Centrado, necesita `margin-inline: auto`. */
  max-width: 34ch;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .ez-services-page.ez-servicios-studio .ez-process {
    padding-block: 44px;
  }
  /* Movil: la linea horizontal desaparece y en su lugar queda UNA vertical
     fina a la izquierda que enhebra los tres puntos dorados. */
  .ez-services-page.ez-servicios-studio .ez-process__steps {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 26px;
  }
  .ez-services-page.ez-servicios-studio .ez-process__steps::before {
    top: 7px;
    bottom: 7px;
    left: 3px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .ez-services-page.ez-servicios-studio .ez-process__step {
    padding-top: 0;
    padding-left: var(--sp-7);
    text-align: left;
  }
  .ez-services-page.ez-servicios-studio .ez-process__step::before {
    top: 7px;
    left: 0;
    transform: none;
  }
  /* Apilado no hay columna que centrar: el texto arranca en el mismo eje que
     su titulo y el tope de 34ch deja de aplicar. */
  .ez-services-page.ez-servicios-studio .ez-process__step p {
    max-width: none;
    margin-inline: 0;
  }
}

/* ============================================================
   CTA final — ultima seccion antes del footer
   ------------------------------------------------------------
   La nota de alcance que iba debajo ("Informacion general...") se
   elimino del HTML de esta pagina. Con ella se fueron sus reglas
   propias, que quedaban muertas: `.ez-scope-note` y
   `.ez-scope-note .ez-article-disclaimer`. Las reglas GLOBALES de
   esas dos clases NO se tocan: las siguen usando otras cinco
   paginas (home, las dos landings locales, la de Maldonado y la
   version en ingles).
   ============================================================ */
/* El fondo va aca y no con el modificador `ez-cta-light--white` del sistema:
   esa clase existe en el fuente pero NO en el CSS servido — purgecss la borra
   por no estar usada en ningun HTML, asi que ponerla en el marcado no pinta
   nada (verificado enumerando las hojas de estilo cargadas). */
.ez-services-page.ez-servicios-studio .ez-cta-light {
  background: var(--white);
  /* Arriba se conserva el aire aprobado del CTA. Abajo sube de 32 a 40px:
     ahora es lo ultimo antes del navy del footer y con 32 el cierre quedaba
     pegado, pero sin llegar a una franja blanca de relleno. */
  padding: var(--sp-8) 0 var(--sp-10);
}
/* El contenedor real es `.ez-mid-cta__inner`: no hay `.ez-mid-cta`
   a secas en este HTML, por eso la regla de margen del sistema
   nunca le pegaba a este parrafo. */
.ez-services-page.ez-servicios-studio .ez-mid-cta__inner p {
  margin-bottom: var(--sp-6);
}

/* --- Movil: el h1 y el h2 de cierre vienen a tamano fijo (3.2rem /
   2rem, no fluido) y caian a 3 renglones en 390px. --- */
@media (max-width: 640px) {
  .ez-services-page.ez-servicios-studio .ez-page-hero h1 {
    font-size: 1.9rem;
  }
  .ez-services-page.ez-servicios-studio .ez-cta-light h2 {
    font-size: 1.6rem;
  }
}