/* ============================================================
   sobre-estudio.css — reglas propias de /sobre-estudio/ (10/08/2026).
   Se enlaza SOLO desde /sobre-estudio/, despues de
   ez-design-system-v2.purged.css. Todo scoped bajo
   .ez-about-page.ez-about-studio: no define utilidades globales,
   no toca Home.

   Resenas de Google: Home no tiene ninguna regla propia de resenas
   (home.css no las menciona); su aspecto sale entero de la base sin
   flavor de pagina. La capa .ez-about-page.ez-about-studio SI la
   deforma (jerarquia 1.5fr/1fr, colores bronce, cabecera en grilla,
   regla dorada sobre .inner). Como no hay nada que "extraer" de
   home.css, la solucion es neutralizar aca esas reglas para volver
   al mismo resultado que ya se ve en Home — un archivo compartido
   nuevo solo agregaria una request mas sin necesidad (bajaba
   Performance 96->95 y LCP 2,6s->2,7s en Lighthouse local; medido y
   descartado). */

/* --- Perfiles: enlace "Ver perfil completo" ---------------------
   Fuera de la lista de datos (no cuenta como uno de los tres datos
   breves): es su propio renglon al pie de cada tarjeta. */
.ez-about-page.ez-about-studio .ez-team-card__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--sp-4);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ez-about-page.ez-about-studio .ez-team-card__link:hover,
.ez-about-page.ez-about-studio .ez-team-card__link:focus-visible {
  color: var(--bronce, #7d6229);
}

/* --- Equipo: cabecera en un solo bloque -------------------------
   El sistema convierte .ez-team__inner en una grilla a dos columnas
   (titulo | bajada) a partir de 901px. Esta pagina ya no tiene
   bajada aca -la historia vive en el hero-, asi que vuelve a un
   bloque simple: eyebrow, H2, asiento de equipo. */
.ez-about-page.ez-about-studio .ez-team__inner {
  display: block;
  text-align: left;
}
.ez-about-page.ez-about-studio .ez-team__inner > .ez-eyebrow--dark {
  margin-bottom: var(--sp-3);
}
.ez-about-page.ez-about-studio .ez-team__inner > h2 {
  margin: 0 0 var(--sp-8);
}
.ez-about-page.ez-about-studio .ez-team__inner > .ez-team-grid {
  margin-top: 0;
}

/* --- Equipo: dos tarjetas horizontales apiladas ------------------
   El sistema tenia un "asiento a dos columnas" (subgrid, retratos de
   380px, credenciales enfrentadas): dos perfiles uno al lado del otro
   se leen como maqueta editorial, no como presentacion terminada.
   Vuelve a la idea original: una tarjeta completa por profesional,
   apiladas, foto a la izquierda e informacion a la derecha. */
.ez-about-page.ez-about-studio .ez-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: none;
  row-gap: var(--sp-7);
  max-width: none;
}

@media (min-width: 641px) {
  .ez-about-page.ez-about-studio .ez-team-card {
    display: grid;
    grid-row: auto;
    grid-template-rows: auto;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: var(--sp-10);
    align-items: start;
    padding: var(--sp-8);
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-top: 3px solid var(--gold);
    border-radius: 8px;
    box-shadow: none;
  }
  .ez-about-page.ez-about-studio .ez-team-card:first-child,
  .ez-about-page.ez-about-studio .ez-team-card:last-child {
    padding: var(--sp-8);
    border-left: 0;
    /* Cancela el zoom/encuadre por foto que tenia sentido con un
       retrato de 380px dominante; a este tamano el recorte estandar
       alcanza para las dos fotos por igual. */
    --retrato-zoom: 1;
    --retrato-y: 25%;
  }
  .ez-about-page.ez-about-studio .ez-team-card:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(200, 169, 104, 0.5);
  }
  .ez-about-page.ez-about-studio .ez-team-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .ez-about-page.ez-about-studio .ez-team-card__photo {
    width: 220px;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
  }
  /* La bio quedaba en 62ch (~550px) dentro de una columna de contenido
     de ~875px: el parrafo terminaba a mitad de tarjeta con un hueco
     vacio a la derecha. La columna ya viene acotada por el ancho
     general de la pagina (--max-w, 1200-1440px) via .ez-team__inner,
     asi que liberar la bio aca no genera renglones absurdos en
     monitores grandes — el limite real sigue siendo el de la pagina,
     no uno propio del parrafo. */
  .ez-about-page.ez-about-studio .ez-team-card__bio,
  .ez-about-page.ez-about-studio .ez-team-card__body > p {
    width: 100%;
    max-width: none;
    margin: 0 0 var(--sp-4);
  }
  .ez-about-page.ez-about-studio .ez-team-card__details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-6);
    margin-top: auto;
  }
}

/* --- Movil: cabecera compacta, no un retrato gigante -------------
   Foto de ~96px al lado del nombre y el rol; bio, datos y enlace
   pasan a una columna debajo. La ficha se reconoce como una unidad
   desde el primer renglon, no como foto + texto largo. */
@media (max-width: 640px) {
  .ez-about-page.ez-about-studio .ez-team-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-areas:
      "foto nombre"
      "foto rol"
      "bio bio"
      "datos datos"
      "enlace enlace";
    column-gap: var(--sp-4);
    row-gap: var(--sp-2);
    padding: var(--sp-5);
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-top: 3px solid var(--gold);
    border-radius: 8px;
    box-shadow: none;
  }
  .ez-about-page.ez-about-studio .ez-team-card__body {
    display: contents;
  }
  .ez-about-page.ez-about-studio .ez-team-card__photo {
    grid-area: foto;
    width: 96px;
    height: 96px;
    aspect-ratio: 1 / 1;
    min-height: 0;
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
    align-self: start;
  }
  .ez-about-page.ez-about-studio .ez-team-card__name {
    grid-area: nombre;
    align-self: end;
    margin: 0;
  }
  .ez-about-page.ez-about-studio .ez-team-card__role {
    grid-area: rol;
    align-self: start;
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
    min-height: 0;
  }
  .ez-about-page.ez-about-studio .ez-team-card__bio {
    grid-area: bio;
    margin: var(--sp-2) 0 0;
    width: 100%;
    max-width: none;
  }
  .ez-about-page.ez-about-studio .ez-team-card__details {
    grid-area: datos;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
  }
  .ez-about-page.ez-about-studio .ez-team-card__link {
    grid-area: enlace;
    margin-top: var(--sp-1);
  }
}

/* Minimo movil 16px para la bio; los datos secundarios ya cumplen 14px. */
@media (max-width: 640px) {
  .ez-about-page.ez-about-studio .ez-team-card__bio {
    font-size: 1rem;
    line-height: 1.6;
  }
  .ez-about-page.ez-about-studio .ez-team-card__details {
    font-size: 0.88rem;
  }
}

/* ============================================================
   Resenas de Google — el MISMO componente que la portada
   ------------------------------------------------------------
   El HTML de esta seccion ya era identico al de Home. Lo que las
   separaba era CSS: el design system global tiene una "ley de
   /sobre-estudio/" (bloque .ez-about-page / .ez-about-studio) que
   reescribe esta seccion como pieza editorial —encabezado a dos
   columnas sobre un eje, resenias sin caja, regla gris en lugar de
   tarjeta, estrellas en bronce—. Esa ley no se puede editar desde
   aca: el .purged.css es generado.

   Asi que cada regla de este bloque hace UNA de dos cosas: cancela
   una declaracion de esa ley, o repite una declaracion que en Home
   viene de `.ez-home-page` y que aca no llega. Los valores no se
   eligieron: se leyeron de la portada renderizada.

   Medido el 11/08/2026 con:
     node scripts/comparar-componente.mjs resenas home sobre-estudio
   Antes: 15 diferencias. Objetivo y estado: 0.
   ============================================================ */

/* Fondo blanco, como la portada. La seccion venia en marfil (#fbfaf7,
   el valor de base del componente); Home lo pasa a blanco con
   `.ez-home-page .ez-google-reviews`. Bordes y relleno son los de
   base y ya coincidian. */
.ez-about-page.ez-about-studio .ez-google-reviews {
  background: #ffffff;
  border-top: 1px solid rgba(200, 169, 104, 0.35);
  border-bottom: 1px solid rgba(205, 213, 224, 0.9);
  padding: var(--sp-12) 0;
}

/* La ley le pone a todo `.inner` de la pagina una regla de seccion
   arriba (border-top + padding-top) y un ancho propio. Home no la
   tiene: el contenedor es solo ancho y centrado. */
.ez-about-page.ez-about-studio .ez-google-reviews__inner {
  width: min(var(--max-w), calc(100% - var(--side) * 2));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  border-top: 0;
  padding-top: 0;
}

/* El encabezado vuelve a ser un bloque de 760px pegado al margen
   izquierdo, que es como lo renderiza la portada. La ley lo convertia
   en una grilla de dos columnas con el badge a la derecha.
   `display: block` desactiva de paso los `grid-area` que la ley le da
   a cada hijo: sin grilla, no aplican. */
.ez-about-page.ez-about-studio .ez-google-reviews__header {
  display: block;
  text-align: left;
  max-width: 760px;
  margin: 0 0 var(--sp-10);
}

/* Titulo con la escala global (clamp 1,85–2,5rem: 40px a 1440), no
   con la escala reducida de la pagina (31,4px). Peso 600 y
   interlineado 1,14 son los del sistema, iguales en las dos paginas;
   se repiten aca para que la ley no los recupere por especificidad. */
.ez-about-page.ez-about-studio .ez-google-reviews__header h2 {
  text-align: left;
  margin-inline: 0;
  margin-bottom: var(--sp-3);
  max-width: none;
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: normal;
}

/* La regla dorada bajo el titulo vuelve: centrada, 48x3px. La ley la
   corre al eje izquierdo y la afina a 40x2px. */
.ez-about-page.ez-about-studio .ez-google-reviews__header h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--gold);
  border-radius: var(--r-pill);
  margin: var(--sp-4) auto 0;
}

/* Bajada centrada y con la medida de lectura del sistema (65ch). La
   ley la alinea a la izquierda y la recorta a 62ch. */
.ez-about-page.ez-about-studio .ez-google-reviews__header p {
  text-align: left;
  margin-inline: auto;
  max-width: 65ch;
  color: var(--gray-600);
  line-height: 1.7;
}

/* Badge de Google con los valores de base: centrado, borde claro,
   pildora. La ley lo cuadra, lo alinea a la izquierda de su columna
   y le oscurece el borde. */
.ez-about-page.ez-about-studio .ez-google-reviews__header .ez-rating-badge {
  margin: var(--sp-3) 0 var(--sp-1);
  padding: 3px var(--sp-4);
  border: 1px solid var(--gray-100);
  border-radius: 2px;
  box-shadow: none;
  font-weight: 600;
  justify-self: auto;
  align-self: auto;
}

/* Estrellas del badge en el dorado de base. La ley las pasa a bronce
   porque su fondo era papel marfil; sobre blanco, que es el fondo que
   esta seccion tiene ahora, el dorado de base cumple contraste igual
   que en la portada. */
.ez-about-page.ez-about-studio .ez-rating-badge__stars {
  color: #f5b400;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}

/* Dos columnas iguales, con el gap del componente. La ley las hace
   desiguales (1,5fr / 1fr) para el ritmo editorial. */
.ez-about-page.ez-about-studio .ez-google-reviews__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-5);
  row-gap: var(--sp-5);
  max-width: none;
  margin-inline: 0;
}

/* La resenia vuelve a ser tarjeta: fondo propio, borde completo,
   filete dorado arriba y ALTO MINIMO. Ese alto minimo es lo que
   alinea los pies de las dos tarjetas cuando los textos son de
   largo distinto; sin el, cada pie caia donde terminaba su parrafo.
   La ley la deja sin caja, apoyada en una regla gris. */
.ez-about-page.ez-about-studio .ez-google-review {
  background: #ffffff;
  border: 1px solid rgba(205, 213, 224, 0.9);
  border-top: 3px solid var(--gold);
  border-left-width: 1px;
  border-left-color: rgba(205, 213, 224, 0.9);
  border-radius: 2px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  min-height: 245px;
  padding: var(--sp-6);
}

/* La segunda tarjeta no lleva ni el sangrado ni el filete vertical
   que la ley usa para separarlas: ahora son dos tarjetas iguales. */
.ez-about-page.ez-about-studio .ez-google-review:last-child {
  padding-left: var(--sp-6);
  border-left: 1px solid rgba(205, 213, 224, 0.9);
}

.ez-about-page.ez-about-studio .ez-google-review__stars {
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  margin-bottom: var(--sp-4);
}

/* Cuerpo de la resenia en la tipografia de la portada: sans, 0,97rem,
   interlineado 1,7. La ley lo pasa a serif y agranda la primera
   resenia a 1,28rem para jerarquizarla; aca las dos pesan igual. */
.ez-about-page.ez-about-studio .ez-google-review p,
.ez-about-page.ez-about-studio .ez-google-review:first-child p,
.ez-about-page.ez-about-studio .ez-google-review:last-child p {
  color: var(--gray-600);
  font-family: var(--font-body, inherit);
  flex: 1;
  font-size: 0.97rem;
  line-height: 1.7;
  margin: 0;
  max-width: none;
}

.ez-about-page.ez-about-studio .ez-google-review__footer {
  align-items: center;
  border-top: 1px solid rgba(205, 213, 224, 0.8);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
}

.ez-about-page.ez-about-studio .ez-google-review__author {
  color: var(--navy);
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ez-about-page.ez-about-studio .ez-google-review__meta {
  color: var(--gray-400);
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 0.18rem;
}

.ez-about-page.ez-about-studio .ez-google-review__source {
  color: var(--navy);
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(200, 169, 104, 0.55);
  text-underline-offset: 3px;
  padding-block: 3px;
  min-height: 24px;
}

/* El control "Ver las otras 2 resenas" y su lista, con los valores de
   base: son los mismos que renderiza la portada. */
.ez-about-page.ez-about-studio .ez-resenas-mas {
  margin-top: var(--sp-6);
}

.ez-about-page.ez-about-studio .ez-resenas-mas__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--navy);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid rgba(205, 213, 224, 0.9);
  border-radius: 999px;
  min-height: 24px;
}

.ez-about-page.ez-about-studio .ez-resenas-mas__toggle:hover {
  border-color: var(--navy);
}

.ez-about-page.ez-about-studio .ez-resenas-mas__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}

/* ============================================================
   Movil: los mismos tres cortes que la portada
   ------------------------------------------------------------
   Las reglas de movil del sistema son de baja especificidad
   (.ez-google-review, sin pagina). En Home ganan; aca no, porque
   este bloque tiene que pesar mas que la ley de /sobre-estudio/ y
   ese peso extra tambien le gana a las de movil. Por eso hay que
   repetirlas: no son decisiones nuevas, son las mismas de la
   portada con el selector de esta pagina.

   Los cortes son 768 (aire de seccion), 760 (una columna, tarjetas
   sin alto minimo) y 640 (escala tipografica y relleno chico).
   Estan copiados tal cual del sistema: mover uno solo aca haria
   que las dos paginas se separen en la franja intermedia.
   ============================================================ */
@media (max-width: 768px) {
  .ez-about-page.ez-about-studio .ez-google-reviews {
    padding-block: var(--sp-6);
  }
}

/* La lista escondida baja a una columna antes que la visible: el
   componente corta en 900 y las resenias en 760. Son dos cortes
   distintos en el sistema, no un descuido; copiarlos con un solo
   valor separaba las dos paginas entre 761 y 900px. */
@media (max-width: 900px) {
  .ez-about-page.ez-about-studio .ez-resenas-mas__lista {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ez-about-page.ez-about-studio .ez-google-reviews__list {
    grid-template-columns: 1fr;
  }
  .ez-about-page.ez-about-studio .ez-google-review {
    min-height: 0;
  }
  .ez-about-page.ez-about-studio .ez-google-review__footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .ez-about-page.ez-about-studio .ez-google-reviews__header {
    margin-bottom: var(--sp-7);
  }
  .ez-about-page.ez-about-studio .ez-google-reviews__header h2 {
    font-size: clamp(1.5rem, 6.4vw, 1.95rem);
  }
  .ez-about-page.ez-about-studio .ez-google-review {
    border-top-width: 2px;
    padding: var(--sp-4);
  }
  .ez-about-page.ez-about-studio .ez-google-review:last-child {
    padding-left: var(--sp-4);
  }
  .ez-about-page.ez-about-studio .ez-google-review__stars {
    font-size: 0.95rem;
    margin-bottom: var(--sp-3);
  }
  .ez-about-page.ez-about-studio .ez-google-review__footer {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
  }
}