/* ============================================================
   contacto.css — el layout de /contacto/ (10/08/2026).
   Se enlaza SOLO desde /contacto/, despues de
   ez-design-system-v2.purged.css.

   POR QUE EXISTE ESTE ARCHIVO. La pagina tenia cinco generaciones
   de reglas apiladas dentro del CSS grande, escritas en momentos
   distintos y peleandose por especificidad en vez de por orden:

     gen 1  .ez-contact-page .ez-contact__inner > .ez-form   (0,3,0)
     gen 2  main.ez-contact-page section.ez-contact > ...    (0,4,2)
     gen 3  .ez-contacto-studio .ez-contact__inner           (0,2,0)
     gen 4  main.ez-contacto-studio section.ez-contact > ... (0,4,2)
     gen 5  el mismo selector otra vez, mas abajo

   La ultima palabra la tenia `grid-template-columns: minmax(0, 1fr)`
   de la gen 4/5, que dejaba formulario y directorio APILADOS en
   escritorio. Medido a 1440x900: pagina de 3.805px, bloque de
   contacto de 1.739px y la guia de canales repitiendo abajo lo que
   el hero y el directorio ya decian.

   EN VEZ DE UNA SEXTA CAPA, se borraron del CSS grande las 251
   reglas cuyos selectores eran TODOS exclusivos de esta pagina
   (.ez-contact-page, .ez-contacto-studio, .ez-channels-*,
   .ez-channel-guide, .ez-contacto-pasos y las clases muertas
   .ez-contact-form-card / .ez-contact-channel-card /
   .ez-contact-process). Quedaron en el CSS grande solo seis reglas
   que comparte con /ubicaciones/, /sobre-estudio/, /honorarios/ y
   /metodo/; estan nombradas mas abajo, una por una, donde hace
   falta corregirlas.

   Nada de aca toca Home ni su formulario: todo cuelga de
   .ez-contact-page.

   EL GESTO. Una sola composicion: el formulario ocupa la columna
   ancha porque es lo unico que la pagina pide hacer, y el contacto
   directo va al lado como texto editorial, sin caja. Dos tarjetas
   enfrentadas se leen como dos opciones que compiten; una tarjeta
   y una columna de datos se leen como una accion y su respaldo.
   ============================================================ */

/* --- Eje de la pagina ---------------------------------------
   Lo hereda del sitio (--max-w). El bloque principal ademas se
   topa en 1240px: mas ancho que eso, el formulario se estira y la
   columna de datos queda con medio metro de aire al lado. */
main.ez-contact-page {
  --max-w: clamp(1200px, 78vw, 1440px);
  --ez-contacto-eje: min(var(--max-w), 1240px, calc(100% - var(--side) * 2));
  --ez-contacto-linea: rgba(205, 213, 224, 0.85);
}

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

/* --- 1. HERO ------------------------------------------------
   El componente de sitio le pone min-height:550px para que la
   franja arranque en el mismo pixel en las paginas del menu. Aca
   se releva: con 550px el formulario no entraba en la primera
   pantalla de 900px, que es lo unico que esta pagina tiene que
   lograr. Queda en su altura natural, ~400px. */
.ez-contact-page .ez-page-hero {
  min-height: 0;
  padding-block: clamp(3.5rem, 4.5vw, 4.5rem);
}
.ez-contact-page .ez-page-hero__inner {
  max-width: 820px;
}
.ez-contact-page .ez-page-hero .ez-eyebrow {
  margin-bottom: var(--sp-4);
}
/* 26ch en vez de los 20ch del componente: con 20 el titulo cortaba
   en cuatro renglones y partia "Te responde un contador" al medio. */
.ez-contact-page .ez-page-hero__inner h1 {
  max-width: 26ch;
  margin-bottom: var(--sp-3);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  line-height: 1.2;
}
.ez-contact-page .ez-page-hero__sub {
  max-width: 62ch;
}
.ez-contact-page .ez-page-hero__actions {
  margin-top: var(--sp-5);
}
.ez-contact-page .ez-page-hero__trust {
  margin-top: var(--sp-3);
}

/* El CTA primario de un hero navy es DORADO en todo el sitio: la misma
   regla existe para .ez-local-service-page, .ez-pricing-page,
   .ez-location-page y .ez-blog-page, y existia para .ez-contact-page hasta
   que la barrida de reglas exclusivas de esta pagina se la llevo. Sin ella
   el boton volvia al azul del componente (#0b2c4d sobre navy): la accion
   principal de la pagina, casi sin contraste contra su propio fondo.

   Sin sombra: el `box-shadow: 0 14px 30px` que traen las copias viejas de
   esta regla ya no se ve en ninguna de las paginas rediseniadas -medido en
   Home y /sobre-estudio/: `box-shadow: none`-, asi que replicarlo aca seria
   copiar el codigo, no el resultado. */
.ez-contact-page .ez-page-hero .ez-btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #061d36;
}
.ez-contact-page .ez-page-hero .ez-btn--primary:hover {
  background: #d6ba78;
  border-color: #d6ba78;
  color: #061d36;
}

/* --- 2. FRANJA DE CONFIANZA ---------------------------------
   Es el componente del sitio, sin retoques. La version anterior de
   este archivo le bajaba el relleno a 20px, le sacaba el alto
   minimo de la celda (88px), encogia la cifra de 27,2 a 23,2px y le
   cambiaba el color del divisor: la franja quedaba en 99px contra
   los 169 de Home, /sobre-estudio/ y /ubicaciones/, y al navegar
   entre paginas del menu se veia el salto. Medido a 1440 el
   10/08/2026.

   Aca quedan SOLO las dos diferencias que el contenido obliga:
   son tres datos y no cuatro, y el eje es el de esta pagina. Todo
   lo demas -relleno, alto de celda, cifra, regla dorada, etiqueta,
   divisores, fondo, borde inferior- lo pone el componente. */
.ez-contact-page .ez-pricing-trust {
  background: var(--white);
}
.ez-contact-page .ez-pricing-trust__inner {
  width: min(var(--max-w), calc(100% - var(--side) * 2));
}
.ez-contact-page .ez-pricing-trust__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --- 3. BLOQUE PRINCIPAL ------------------------------------
   Formulario a la izquierda, contacto directo a la derecha,
   aviso de seguridad cruzando abajo. Es la unica grilla de la
   pagina: no hay secciones despues. */
.ez-contact-page .ez-contact {
  background: var(--off-white);
  padding-block: clamp(3.5rem, 4vw, 3.75rem);
  padding-inline: 0;
}
.ez-contact-page .ez-contact__inner {
  width: var(--ez-contacto-eje);
  max-width: none;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
  column-gap: clamp(3rem, 3.6vw, 4rem);
  row-gap: clamp(1.75rem, 2.4vw, 2.25rem);
  align-items: start;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* --- 4. COLUMNA IZQUIERDA: EL FORMULARIO --------------------
   La caja se la queda el formulario, que es la unidad
   interactiva. Fondo blanco y una linea dorada arriba; sin
   sombra, como en las cinco paginas ya cerradas. */
.ez-contact-page .ez-contact__form {
  background: var(--white);
  border: 1px solid var(--ez-contacto-linea);
  border-top: 2px solid var(--gold);
  border-radius: 2px;
  box-shadow: none;
  padding: clamp(1.75rem, 2.2vw, 2rem);
}
.ez-contact-page .ez-contact__form > h3 {
  margin: 0 0 var(--sp-5);
  font-size: 1.15rem;
  color: var(--navy);
}

/* El <form> lleva la clase .ez-form, que en la base ES una tarjeta
   (fondo, borde, radio, relleno, sombra). Aca la tarjeta la pone el
   envoltorio, asi que el form vuelve a ser un contenedor pelado.
   Esto es lo que antes se intentaba distinguir con `:has(form)` y
   `.ez-form + .ez-form`: las dos columnas usaban la misma clase y
   cada generacion de reglas peleaba por cual era la caja. */
.ez-contact-page form.ez-form {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Grilla de campos: Nombre|Empresa, Tipo de consulta|Email,
   Telefono|Mensaje. Mismo orden de DOM y de tabulado. */
.ez-contact-page .ez-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-4);
  row-gap: var(--sp-3);
}
.ez-contact-page .ez-form__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ez-contact-page .ez-form__field label {
  margin-bottom: var(--sp-1);
  font-size: 0.83rem;
}
.ez-contact-page .ez-form input,
.ez-contact-page .ez-form select {
  min-height: 48px;
  border-radius: 2px;
  margin: 0;
}
.ez-contact-page .ez-form textarea {
  min-height: 104px;
  border-radius: 2px;
  resize: vertical;
  margin: 0;
}
.ez-contact-page .ez-form__consent {
  margin-top: var(--sp-4);
}
.ez-contact-page .ez-form__bottom {
  margin-top: var(--sp-4);
}
/* El componente estira el boton al 100%. En escritorio no: un boton
   de 780px de ancho no se lee como una accion. En telefono si. */
.ez-contact-page .ez-form__submit {
  width: clamp(280px, 40%, 320px);
  min-height: 50px;
}
.ez-contact-page .form-feedback {
  border-radius: 2px;
  box-shadow: none;
}

/* La nota de honorarios: nota al pie del boton, no otra caja. */
.ez-contact-page .ez-contact__form-note {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--ez-contacto-linea);
  max-width: none;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--gray-600);
}
.ez-contact-page .ez-contact__form-note strong {
  color: var(--navy);
}

/* --- 5. COLUMNA DERECHA: CONTACTO DIRECTO -------------------
   Editorial: sin fondo, sin borde alrededor, sin sombra. Solo una
   linea dorada corta bajo el titulo para emparejarla con la linea
   superior de la tarjeta de al lado. */
.ez-contact-page .ez-contact__aside > h3 {
  font-size: 1.05rem;
  color: var(--navy);
}
/* :first-child y no `> h3` a secas: el titulo de "Que pasa despues" tambien
   es un h3 hijo directo, y `.ez-contact-page .ez-contact__aside > h3` (0,2,1)
   le ganaba a su propia regla (0,2,0) por especificidad. Medido: el margen
   superior de 32px quedaba en 0 y la linea divisoria caia pegada a los
   botones. */
.ez-contact-page .ez-contact__aside > h3:first-child {
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--ez-contacto-linea);
}

.ez-contact-page .ez-channels-list {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Bloque con sangria, NO grilla ni flex: cada renglon mezcla texto suelto
   con un enlace (`Horario: <a>...</a>`), y en un contenedor de grilla el
   texto suelto se vuelve un item anonimo aparte del enlace. Medido: los dos
   renglones con texto + enlace ocupaban tres filas cada uno, 107px en vez de
   28, y la columna entera pasaba de 176 a 313px. El icono va absoluto en la
   sangria y el texto fluye como un parrafo, que es lo que es. */
.ez-contact-page .ez-channels-list__item {
  display: block;
  position: relative;
  padding-left: 32px;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--gray-600);
}
/* width/height explicitos: el SVG no tiene dimension intrinseca. */
.ez-contact-page .ez-channels-list__icon {
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  color: var(--gold);
}
/* La regla compartida "production polish" (CSS grande) convierte este
   enlace en inline-flex de 46px de alto. Sirve para un boton, no para
   un telefono en medio de una frase: rompe el renglon y estira la
   fila. Se vuelve al patron que usa la miga en todo el sitio, que da
   los 24px que pide WCAG 2.5.8 AA sin sacar el texto del flujo. */
.ez-contact-page .ez-channels-list__link {
  display: inline-block;
  align-items: normal;
  justify-content: normal;
  min-height: 24px;
  padding-block: 3px;
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ez-contact-page .ez-channels-list__link:hover,
.ez-contact-page .ez-channels-list__link:focus-visible {
  color: var(--bronce, #7d6229);
}

.ez-contact-page .ez-channels-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
/* Los dos botones entran en un renglon dentro de la columna angosta: con el
   relleno del componente (1,5rem por lado) median 216 + 151 + 12 = 379px
   contra 359 de columna y se apilaban, 58px de alto de mas por un renglon
   que no hacia falta. */
.ez-contact-page .ez-channels-actions .ez-btn {
  border-radius: 2px;
  min-height: 46px;
  padding-inline: 1rem;
  font-size: 0.9rem;
}

/* "Que pasa despues": tres pasos, dentro de esta misma columna. Sin
   tarjeta, sin circulos, sin acordeon. La cifra en dorado es una
   secuencia, no tres insignias. */
.ez-contact-page .ez-contact__aside > h3.ez-contact__pasos-titulo {
  margin: var(--sp-8) 0 var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ez-contacto-linea);
}
.ez-contact-page .ez-contact__pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.ez-contact-page .ez-contact__pasos > li {
  counter-increment: paso;
  position: relative;
  padding-left: var(--sp-7);
  margin-bottom: var(--sp-4);
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--gray-600);
  max-width: none;
}
.ez-contact-page .ez-contact__pasos > li:last-child {
  margin-bottom: 0;
}
.ez-contact-page .ez-contact__pasos > li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.ez-contact-page .ez-contact__pasos > li strong {
  color: var(--navy);
}

/* --- 6. "CUIDA TUS DATOS" -----------------------------------
   Una sola vez en la pagina, cruzando las dos columnas. Titulo a
   la izquierda, texto a la derecha, una linea dorada arriba y
   nada mas: es una advertencia, no una tarjeta. */
.ez-contact-page .ez-contact__safety {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: var(--sp-6);
  align-items: start;
  padding-block: var(--sp-5);
  border-top: 2px solid var(--gold);
  background: none;
  box-shadow: none;
}
.ez-contact-page .ez-contact__safety-title {
  margin: 0;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.98rem;
}
.ez-contact-page .ez-contact__safety-text {
  margin: 0;
  max-width: 78ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gray-600);
}

/* --- 7. Sombras: cero, como en las paginas ya cerradas ------
   Se nombran los selectores en vez de barrer con *: el anillo de
   foco tambien es box-shadow y no se puede tocar. */
.ez-contact-page .ez-btn,
.ez-contact-page .ez-btn--primary,
.ez-contact-page .ez-btn--whatsapp,
.ez-contact-page .ez-btn--outline,
.ez-contact-page .ez-contact__form {
  box-shadow: none;
}
.ez-contact-page .ez-btn:hover,
.ez-contact-page .ez-btn--primary:hover,
.ez-contact-page .ez-btn--whatsapp:hover,
.ez-contact-page .ez-btn--outline:hover {
  box-shadow: none;
}

/* ============================================================
   Anchos intermedios y telefono
   ============================================================ */

/* Por debajo de 1000px las dos columnas no tienen ancho suficiente:
   la de datos baja de 300px y el formulario deja de entrar en dos
   campos por fila. Se apilan. */
@media (max-width: 999px) {
  .ez-contact-page .ez-contact__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .ez-contact-page .ez-contact__aside {
    padding-top: var(--sp-6);
    border-top: 1px solid var(--ez-contacto-linea);
  }
  .ez-contact-page .ez-contact__safety {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }
}

@media (max-width: 767px) {
  /* Los campos, de a uno por fila. El orden de DOM y de tabulado no
     cambia: la grilla ya los tenia en ese orden. */
  .ez-contact-page .ez-form__grid {
    grid-template-columns: 1fr;
  }
  .ez-contact-page .ez-form__submit {
    width: 100%;
  }
  .ez-contact-page .ez-contact__form {
    padding: var(--sp-5);
  }
  /* El <form> no es la tarjeta; la regla compartida del CSS grande
     -"@media (max-width:760px) { .ez-contact-page .ez-form { padding:
     var(--sp-5) } }", que /ubicaciones/ tambien usa- le mete relleno
     igual y anida un segundo margen dentro de la tarjeta. */
  .ez-contact-page form.ez-form {
    padding: 0;
  }
  /* La franja, en tres renglones. El componente pasa a dos columnas por
     dos filas en telefono, que es lo correcto para CUATRO datos; con tres
     deja una celda vacia. Se apila.

     Lo que NO cambia es la tipografia: cifra 27,2px en Newsreader 600 y
     etiqueta 14,4px/1,45, las mismas de Home y /sobre-estudio/. Cambia el
     ARMADO -renglones con divisor horizontal en vez de celdas con divisor
     vertical- porque a un dato por fila la cifra y la etiqueta se leen
     mejor en linea que centradas una sobre otra.

     min-height:0 aca y solo aca: los 115,2px que reserva el componente son
     para que la etiqueta larga de la franja de cuatro datos no mueva la
     pagina cuando llega la webfont, y esa etiqueta ocupa hasta cuatro
     renglones en una celda de 177px. A un dato por fila la mas larga
     -"atencion directa con un contador"- entra en uno solo: la reserva
     dejaba 49px de nada por renglon y la franja subia a 379px, mas alta
     que los 335 del componente con un dato MAS. */
  .ez-contact-page .ez-pricing-trust__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    text-align: left;
  }
  .ez-contact-page .ez-pricing-trust__list > li {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    min-height: 0;
    padding: var(--sp-3) 0;
    border-left: 0;
    border-top: 1px solid var(--gray-100);
  }
  .ez-contact-page .ez-pricing-trust__list > li:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .ez-contact-page .ez-pricing-trust__list > li:last-child {
    padding-bottom: 0;
  }
  /* nowrap solo en la cifra: es corta (105px la mas larga a 27,2px) y
     partirla en dos renglones rompe el renglon entero. La etiqueta si
     puede envolver, y a 320px envuelve. */
  .ez-contact-page .ez-pricing-trust__list strong {
    margin-bottom: 0;
    white-space: nowrap;
  }
  .ez-contact-page .ez-pricing-trust__list strong::after {
    display: none;
  }
  /* Los dos CTA del hero, apilados y a lo ancho. Los controles conservan su
     tamano; lo que se recorta es el aire, que en telefono empuja el
     formulario abajo del pliegue. */
  .ez-contact-page .ez-page-hero {
    padding-block: var(--sp-10);
  }
  .ez-contact-page .ez-page-hero__actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--sp-4);
  }
  .ez-contact-page .ez-page-hero .ez-eyebrow {
    margin-bottom: var(--sp-3);
  }
}