/* ============================================================
   home.css — reglas propias de la portada (10/08/2026).
   Se enlaza SOLO desde /, despues de ez-design-system-v2.purged.css.
   No define utilidades globales: todo esta bajo .ez-home-page /
   .ez-resolvemos / .ez-mid-cta__steps, componentes nuevos de esta
   pagina o de la reformulacion de las rutas rapidas y el contacto.
   ============================================================ */

/* --- Rutas rapidas: enlace discreto a la landing de Maldonado ---
   Ya no es una de las tres vias de entrada (esa oferta general vive
   en /servicios/), pero sigue accesible para quien la busca. */
.ez-services-grid__aside {
  margin: var(--sp-4) auto 0;
  max-width: 46rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--gray-600);
}

.ez-services-grid__aside a {
  color: var(--navy);
  font-weight: 600;
}

/* --- Que resolvemos: bloque editorial, no otra grilla de tarjetas ---
   Tres grupos con letra + parrafo (para quien / que resuelve / que
   recibe) + lista compacta. Presupuesto: no pasar ~700px de alto en
   escritorio, asi que el padding y los margenes van mas ajustados que
   el resto de las secciones (sp-10, no sp-12). */
.ez-resolvemos {
  background: var(--white);
  padding: var(--sp-10) 0;
}

.ez-resolvemos__inner {
  width: min(var(--max-w), calc(100% - var(--side) * 2));
  margin-inline: auto;
  text-align: center;
}

.ez-resolvemos__inner > h2 {
  max-width: 42rem;
  margin: 0 auto var(--sp-8);
}

.ez-resolvemos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
  text-align: left;
}

.ez-resolvemos__group {
  border-top: 2px solid var(--gold-soft);
  padding-top: var(--sp-4);
}

.ez-resolvemos__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  color: var(--navy);
  font: 700 0.78rem/1 var(--font-body);
  margin-bottom: var(--sp-3);
}

.ez-resolvemos__group h3 {
  margin: 0 0 var(--sp-2);
}

.ez-resolvemos__group p {
  color: var(--gray-600);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 var(--sp-4);
}

.ez-resolvemos__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ez-resolvemos__items li {
  position: relative;
  padding-left: var(--sp-4);
  font-size: 0.86rem;
  color: var(--gray-800);
}

.ez-resolvemos__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.ez-resolvemos__cta {
  margin-top: 0;
}

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

/* ============================================================
   RITMO DE FONDOS DE LA PORTADA (11/08/2026)
   ------------------------------------------------------------
   Medido seccion por seccion, el problema era UNO solo: "Que resolvemos" y
   "Nosotros" eran las dos blancas y se leian como un unico bloque de 1153px.
   El resto de la secuencia ya alternaba bien, asi que se tocan DOS fondos, no
   ocho — no hace falta repintar la pagina para resolver una costura.

     1 Heroe              #091e38  navy      (sin tocar)
     2 Franja confianza   #ffffff  blanco    (sin tocar)
     3 Por donde empezar  #f7f9fc  frio      (sin tocar)
     4 Que resolvemos     #ffffff  blanco    (sin tocar)
     5 Nosotros           #fbfaf7  marfil    <-- CAMBIA (era blanco)
     6 Alcance            #082746  navy      (sin tocar)
     7 Resenas            #ffffff  blanco    <-- CAMBIA (era marfil)
     8 Contacto           #f7f9fc  frio      (sin tocar)

   Cinco valores en total: navy, blanco, frio, marfil y el dorado de acento.
   Los dos tonos nuevos ya existian en la hoja del sistema (#fbfaf7 lo traia
   .ez-google-reviews), asi que no entra ningun color ajeno a la paleta.
   ============================================================ */

/* Marfil calido: separa "Nosotros" de "Que resolvemos" sin romper la calma. */
.ez-home-page .ez-story {
  background: #fbfaf7;
  border-top: 1px solid rgba(205, 213, 224, 0.55);
}

/* Resenas en blanco: el marfil quedaba pegado al navy del bloque de alcance y
   ademas repetia el tono de "Nosotros". Se cambia SOLO el fondo exterior y
   solo en la portada: `.ez-google-reviews` es el componente compartido con
   /sobre-estudio/, que lo conserva en marfil. Bordes, tipografia y copy de las
   resenas quedan intactos. */
.ez-home-page .ez-google-reviews {
  background: #ffffff;
}

/* --- Metodo (ez-mid-cta--alcance): composicion editorial a dos columnas ---
   El proceso completo de seis pasos vive en /metodo/; aca van solo las tres
   decisiones que definen el alcance. Fondo navy heredado de .ez-mid-cta, por
   eso el texto va en blanco/translucido.

   POR QUE EL BLOQUE SE VEIA ANGOSTO (medido el 11/08/2026 a 1440px). El
   contenedor NO era el problema: `.ez-home-studio .ez-mid-cta__inner` ya le
   daba 1200px. Lo que encerraba el contenido eran los hijos, cada uno con su
   propio tope y centrado automatico:

     h2      max-width: 18ch  -> 352px reales, con 424px de margen a cada lado
     pasos   max-width: 560px -> 320px muertos a cada lado
     seccion text-align: center + actions justify-content: center

   Por eso el titulo caia en tres lineas apretadas y los pasos vivian en un
   tercio de la pantalla con 481px de alto total. Se corrige levantando esos
   topes, no agregando una capa nueva encima: este bloque REEMPLAZA al anterior.

   Movil primero. El DOM va titulo -> pasos -> botones, que es exactamente el
   orden de lectura en movil; la grilla de escritorio reubica los botones a la
   izquierda. Reordenar con grid no rompe el recorrido por teclado porque la
   lista de pasos no contiene ningun elemento focuseable. */
.ez-home-page .ez-mid-cta--alcance {
  padding-block: var(--sp-8);
}

.ez-home-page .ez-mid-cta__inner.ez-alcance {
  width: min(1240px, 100%);
  max-width: none;
  margin-inline: auto;
  padding-inline: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--sp-6);
  text-align: left;
}

/* El tope de 18ch es el que partia el titulo en una columna estrecha. */
.ez-home-page .ez-mid-cta__inner.ez-alcance > h2 {
  max-width: none;
  margin: 0;
  text-align: left;
  text-wrap: balance;
}

/* --- Tres filas editoriales: etiqueta + descripcion ---
   Reemplaza a los badges 01/02/03 (circulo de 30px con fondo dorado al 28% y
   `counter(decimal-leading-zero)`). Esas reglas se BORRARON, no se taparon: no
   queda ningun counter, ningun border-radius y ningun ::before en el bloque.
   La numeracion sobrevive donde importa —el `<ol>`— y desaparece de la
   pantalla, que es lo que hacia que el bloque pareciera un onboarding. */
.ez-mid-cta__inner.ez-alcance .ez-alcance__pasos {
  list-style: none;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ez-mid-cta__inner.ez-alcance .ez-alcance__pasos li {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Dorado del sistema sobre el navy del bloque: 6,7:1 medido, sobra para el
   4,5:1 que pide texto normal a este cuerpo. */
.ez-alcance__etiqueta {
  color: var(--gold);
  font: 700 0.74rem/1.5 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ez-alcance__detalle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.5;
}

/* Botones: pegados al titulo, nunca centrados bajo la lista. */
.ez-mid-cta__inner.ez-alcance .ez-mid-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--sp-4);
  margin: 0;
}

.ez-mid-cta__inner.ez-alcance .ez-mid-cta__actions .ez-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 360px;
  min-height: 48px;
}

.ez-mid-cta__inner.ez-alcance .ez-mid-cta__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- Tablet: dos columnas 42/58 con gap reducido --- */
@media (min-width: 768px) {
  .ez-home-page .ez-mid-cta--alcance {
    padding-block: clamp(56px, 5.5vw, 80px);
  }

  .ez-home-page .ez-mid-cta__inner.ez-alcance {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    column-gap: clamp(36px, 4vw, 52px);
    align-items: center;
  }

  .ez-home-page .ez-mid-cta__inner.ez-alcance > h2 {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .ez-mid-cta__inner.ez-alcance .ez-mid-cta__actions {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-5);
  }

  .ez-mid-cta__inner.ez-alcance .ez-mid-cta__actions .ez-btn {
    width: auto;
    max-width: none;
  }

  /* Linea vertical tenue: separa las dos columnas sin dibujar una tarjeta.
     Solo existe a partir de 768px, con la grilla de dos columnas. */
  .ez-mid-cta__inner.ez-alcance .ez-alcance__pasos {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    padding-left: clamp(22px, 2.2vw, 34px);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* En movil la etiqueta va ARRIBA de la descripcion, no al costado: con 320px
   una columna fija de 108px dejaba el texto en dos palabras por renglon. */
@media (max-width: 767px) {
  .ez-mid-cta__inner.ez-alcance .ez-alcance__pasos li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    align-items: start;
  }
}

/* --- Escritorio: 38/62, el reparto de la maqueta --- */
@media (min-width: 1024px) {
  .ez-home-page .ez-mid-cta__inner.ez-alcance {
    grid-template-columns: minmax(0, 39fr) minmax(0, 61fr);
    column-gap: clamp(56px, 5vw, 76px);
  }
}

/* --- Formulario "Contanos tu consulta" (SOLO Home) ------------------------
   Medido el 11/08/2026 a 1440x900: la tarjeta media 1006px de alto porque los
   nueve controles iban apilados en una sola columna, con 20px de margen sobre
   cada etiqueta y un textarea de 130px. No entraba en pantalla ni de cerca.

   Se compacta con una grilla de dos columnas + ritmo vertical mas corto. No se
   toca ni un campo, ni el endpoint, ni una validacion: el formulario de
   /contacto/ es otro y NO se comparte nada con el (hay agentes en las dos
   paginas; extraer estilos comunes ahora seria pisarse).

   EL CORTE ES POR ANCHO REAL DE LA TARJETA, no por ancho de ventana: la
   tarjeta vive en la columna derecha de la seccion de contacto, asi que a
   1440px de ventana su interior son ~528px, no 1440. Por eso va container
   query: si algun dia la seccion cambia de proporciones, el formulario se
   reacomoda solo en vez de quedar con dos columnas de 180px. */
.ez-home-page .ez-home-form-card {
  container-type: inline-size;
  container-name: formhome;
  padding: 28px;
}

/* Encabezado: mismo texto, menos aire. */
.ez-home-page .ez-home-form-card > h3 {
  margin-bottom: 0.35rem;
}

.ez-home-page .ez-home-form-card__intro {
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0 0 10px;
  padding-bottom: 10px;
}

/* La orientacion pasa de caja alta a nota horizontal: conserva el acento
   dorado y el texto completo, pero en una o dos lineas. */
.ez-home-page .ez-home-form-card form .ez-form__help {
  margin: 0;
  padding: 12px 14px;
  font-size: 0.83rem;
  line-height: 1.35;
}

/* La grilla. En una columna por defecto; dos cuando la tarjeta da el ancho. */
.ez-home-page .ez-home-form-card > form.ez-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 12px;
  align-items: start;
}

.ez-home-page .ez-home-form-card .ez-form__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* El margen de 20px sobre cada etiqueta era la mitad del alto sobrante. */
.ez-home-page .ez-home-form-card .ez-form__field label {
  margin: 0 0 5px;
  font-size: 0.85rem;
  line-height: 1.3;
}

.ez-home-page .ez-home-form-card .ez-form__field input,
.ez-home-page .ez-home-form-card .ez-form__field textarea {
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  margin: 0;
}

/* 96px en escritorio; el redimensionado vertical se conserva. */
.ez-home-page .ez-home-form-card .ez-form__field textarea {
  height: 110px;
  min-height: 110px;
  resize: vertical;
}

.ez-home-page .ez-home-form-card .ez-form__consent {
  gap: 10px;
  margin-top: 2px;
}

/* El consentimiento no se toca: cuerpo (0,82rem), interlineado y color vienen
   del sistema con !important y ahi se quedan — es texto legal, no se achica
   para ganar altura. La casilla mide 24px, el minimo de WCAG 2.5.8 AA, y su
   etiqueta asociada es el area de clic grande. Aca solo se saca el margen
   inferior que empujaba al boton. */
.ez-home-page .ez-home-form-card .ez-form__consent label {
  margin: 0;
}

.ez-home-page .ez-home-form-card form .ez-form__bottom {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  gap: var(--sp-3);
}

.ez-home-page .ez-home-form-card .ez-form__submit {
  min-height: 48px;
}

/* Dos columnas a partir de 500px de ancho INTERIOR de la tarjeta. El umbral
   orientativo del encargo eran ~620px, pero la columna del formulario en la
   seccion de contacto de Home mide 584px: exigir 620 dejaria la portada en una
   sola columna para siempre. 500px reparte dos campos de ~254px, que alcanzan
   para nombre, empresa, email y telefono sin recortar etiqueta ni placeholder. */
@container formhome (min-width: 500px) {
  .ez-home-page .ez-home-form-card > form.ez-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* La nota, el mensaje, el consentimiento, el boton y el feedback cruzan las
     dos columnas. La nota TAMBIEN: si ocupa una sola celda corre un lugar a
     todos los campos y "Nombre" termina arriba a la derecha. */
  .ez-home-page .ez-home-form-card form .ez-form__help,
  .ez-home-page .ez-home-form-card .ez-form__field--ancho,
  .ez-home-page .ez-home-form-card .ez-form__consent,
  .ez-home-page .ez-home-form-card form .ez-form__bottom,
  .ez-home-page .ez-home-form-card .form-feedback {
    grid-column: 1 / -1;
  }

  .ez-home-page .ez-home-form-card .ez-form__field textarea {
    height: 88px;
    min-height: 88px;
  }

  /* El boton deja de ocupar el ancho entero y se alinea con el borde derecho
     de la grilla, que es donde termina la ultima columna. */
  .ez-home-page .ez-home-form-card form .ez-form__bottom {
    align-items: flex-end;
  }

  .ez-home-page .ez-home-form-card .ez-form__submit {
    width: clamp(260px, 58%, 340px);
  }
}

/* --- Seccion de contacto de la portada ------------------------------------
   Dos columnas de altura NATURAL: presentacion + datos a la izquierda,
   formulario a la derecha. Sin mapa (se fue a /ubicaciones/).

   LA CAUSA DEL VACIO BLANCO DEBAJO DEL BOTON, medida el 11/08/2026 a 1440x900:
   la tarjeta media 741px para 573px de contenido — 140px de blanco. No era del
   formulario: `.ez-contact__inner` es grid con `align-items: stretch`
   declarado explicito en el sistema, y la columna del mapa sumaba
   `height: 100%` + `align-self: stretch`. Entre las dos estiraban la tarjeta
   hasta igualar la altura del mapa. Sacado el mapa, ademas se alinean las dos
   columnas al inicio para que ninguna vuelva a arrastrar a la otra. */
/* 64px es el piso del rango pedido (64-80). Se elige el piso a proposito: el
   objetivo de "seccion de 600-720px" y el de "padding 64-80" no se pueden
   cumplir a la vez — la tarjeta mide 631px, asi que con el padding minimo la
   seccion no puede bajar de 759px. Se respeta el rango declarado y se deja el
   numero real anotado en la entrega en vez de recortar el padding en silencio. */
.ez-home-page .ez-contact {
  padding-block: clamp(48px, 4.5vw, 64px);
  padding-inline: var(--sp-8);
}

.ez-home-studio .ez-contact__inner {
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(40px, 4.4vw, 64px);
  align-items: start;
}

/* La tarjeta recupera su altura natural: termina donde termina su padding. */
.ez-home-studio .ez-home-form-card {
  align-self: start;
  height: auto;
  min-height: 0;
}

/* --- Columna izquierda: editorial, sin caja ni sombra --- */
.ez-home-studio .ez-contacto-directo {
  align-self: start;
}

.ez-home-studio .ez-contacto-directo h2 {
  margin: 0 0 var(--sp-4);
}

.ez-contacto-directo__intro {
  color: var(--gray-600);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0 0 var(--sp-6);
  max-width: 46ch;
}

/* Filas de directorio con divisor fino: el mismo patron de /contacto/. */
.ez-contacto-directo__datos {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  border-top: 1px solid rgba(205, 213, 224, 0.9);
}

.ez-contacto-directo__datos li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 11px 0;
  border-bottom: 1px solid rgba(205, 213, 224, 0.9);
  font-size: 0.92rem;
}

.ez-contacto-directo__datos li > span {
  color: var(--gray-600);
}

.ez-contacto-directo__datos li > a,
.ez-contacto-directo__datos li > strong {
  color: var(--navy);
  font-weight: 600;
  text-align: right;
}

.ez-contacto-directo__datos li > a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.ez-contacto-directo__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
}

.ez-contacto-directo__acciones .ez-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

/* Enlace secundario sobre fondo claro: navy, no el blanco del heroe.
   Va con `a.` para ganarle a `.ez-home-studio a:not(.ez-btn)`, que fija
   display:inline-block y min-height:24px para TODOS los enlaces de la portada.
   Ese minimo de 24px es el de WCAG 2.5.8 AA y esta bien para texto corrido,
   pero este enlace no es texto corrido: es la accion secundaria al lado de un
   CTA, asi que se lo lleva a 44px. */
.ez-home-studio a.ez-contacto-directo__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: var(--navy);
  font: 600 0.95rem/1 var(--font-body);
  text-decoration: none;
}

.ez-contacto-directo__link:hover,
.ez-contacto-directo__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Escritorio: la columna izquierda acompana al formulario --------------
   Medido ANTES del ajuste, a 1440x900: la columna terminaba en y=4047 y la
   tarjeta en y=4158 (111px de diferencia), y la base de los CTA quedaba 82px
   por encima de "Enviar consulta", flotando a media altura.

   No se rellena con contenido. Se estira la columna y se anclan las acciones:

     align-self: stretch  pisa el `align-items: start` de la grilla SOLO para
                          este item; la tarjeta conserva su `align-self: start`
                          y su altura natural, no se vuelve a estirar.
     margin-top: auto     empuja la fila de acciones al pie de la columna.

   El padding inferior NO es un numero sacado de la captura: son los 28px que
   devuelve getComputedStyle('.ez-home-form-card').paddingBottom, o sea el
   mismo aire que la tarjeta deja entre "Enviar consulta" y su borde. Con eso
   las dos bases caen al mismo nivel. */
@media (min-width: 981px) {
  .ez-home-studio .ez-contacto-directo {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding-bottom: 28px;
  }

  /* Separacion minima garantizada entre datos y acciones: `margin-top: auto`
     solo reparte el sobrante, no asegura nada cuando no hay sobrante. */
  .ez-home-studio .ez-contacto-directo__datos {
    margin-bottom: var(--sp-8);
  }

  .ez-home-studio .ez-contacto-directo__acciones {
    margin-top: auto;
  }
}

/* Una columna. Hace falta declararlo bajo .ez-home-studio: la regla del
   sistema que colapsa `.ez-contact__inner` a 980px tiene menos especificidad
   que la de dos columnas de arriba y no la alcanzaria. */
@media (max-width: 980px) {
  .ez-home-studio .ez-contact__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .ez-home-page .ez-contact {
    padding-block: var(--sp-8);
    padding-inline: var(--sp-4);
  }

  .ez-contacto-directo__acciones {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
  }

  .ez-contacto-directo__acciones .ez-btn {
    width: 100%;
  }

  .ez-contacto-directo__link {
    justify-content: flex-start;
  }
}