/* La página de contacto: tarjetas de canal (correo, teléfono, WhatsApp, redes, horario) con
   su ícono de línea. La página del sitio viejo era una lista plana de enlaces («Escribenos /
   <hola@emeyeme.cl> / …») sin jerarquía ni apoyo visual; el cliente pidió mejor UI/UX e
   iconos, así que cada canal va en una tarjeta con su ícono, el rótulo y el enlace.

   Las hojas propias se cargan ANTES del bundle del theme, así que los selectores llevan
   `body` (o `body .` cuando aplica) para ganar especificidad (ver `docs/REGLAS.md`, punto 6).
   La marca de la fuente es la grilla `.contacto-canales`.

   La grilla es de dos columnas y cae a una en la banda angosta; las tarjetas heredan el borde
   de la salvia y el fondo de la tarjeta clara del theme (`--bg`, la misma de `--em-blanco`).
   El ícono se hereda con la técnica del resto del sitio: SVG `currentColor` a `1.1em`, como
   los pilares de /nosotros/, y el acento de texto del tema por si hiciera falta. */

.contacto-canales {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block: 2rem;
}

@media (max-width: 960px), (max-aspect-ratio: 1/1) {
  .contacto-canales {
    grid-template-columns: 1fr;
  }
}

.contacto-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.1rem 1.2rem;
  /* El papel de la tarjeta sigue al tema: grafito en el oscuro (la página ya lo es, la separa el
     borde) y el blanco de la paleta en el claro. Antes era siempre blanco, y en el tema oscuro el
     texto de la tarjeta —que es el color de lectura, crema— se perdía sobre el fondo blanco
     (1,1:1). */
  background: var(--bg);
  border: 1px solid rgba(var(--em-salvia-rgb), 0.3);
  border-radius: 4px;
}

:root:root[data-theme="light"] body .contacto .contacto-tarjeta {
  background: var(--em-blanco);
}

body .contacto .icono-linea {
  inline-size: 1.2em;
  block-size: 1.2em;
  flex: none;
  color: var(--em-acento-texto);
}

/* El logotipo relleno en la tarjeta (WhatsApp) va al mismo tamaño que los de línea. */
body .contacto .contacto-tarjeta .icono-marca {
  inline-size: 1.2em;
  block-size: 1.2em;
  flex: none;
  color: var(--em-acento-texto);
}

.contacto-tarjeta h2 {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contacto-tarjeta p {
  font-size: 1rem;
  line-height: 1.45;
}

.contacto-tarjeta a {
  /* El acento de texto del tema: pizarra sobre el blanco en el claro, crema sobre el grafito de la
     tarjeta en el oscuro. La pizarra fija no se veía en el tema oscuro (1,1:1 sobre la tarjeta,
     y sobre la página oscura también). */
  color: var(--em-acento-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.contacto-tarjeta a:hover {
  color: var(--em-acento-texto);
}

/* El horario y la cobertura en formato «atendemos» van juntos: el horario con su icono y
   debajo la nota de cobertura, para no dejar dos tarjetas casi vacías. */
.contacto-horario-icono {
  color: var(--em-acento-texto);
}

/* Las redes bajo las tarjetas, en su propio bloque compacto para que no compitan con el
   grid: ícono grande de conectividad, rótulo y los tres enlaces en línea. */
.contacto-redes {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-block-start: 1.6rem;
  padding-block-start: 1.2rem;
  border-block-start: 1px solid rgba(var(--em-salvia-rgb), 0.25);
}

body .contacto-redes .icono-linea {
  inline-size: 1.4em;
  block-size: 1.4em;
  flex: none;
  color: var(--em-acento-texto);
}

.contacto-redes h2 {
  font-size: 0.85rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Los enlaces de las redes en una fila alineada de una sola línea: antes iban dentro de un
   `<p>` con separadores «·», y al envolver el texto quedaba desalineado respecto al ícono y
   al rótulo. Acá cada enlace es un item, los separa un borde fino y el primer item queda sin
   borde a la izquierda (el aire lo pone el `gap` del bloque). */
.contacto-redes-enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
}

.contacto-redes-enlaces a + a {
  padding-inline-start: 0.9rem;
  border-inline-start: 1px solid rgba(var(--em-salvia-rgb), 0.4);
}

.contacto-redes-enlaces a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  /* El acento de texto del tema, como en las tarjetas: la pizarra fija desaparecía en el tema
     oscuro. */
  color: var(--em-acento-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* El logotipo de cada red va al comienzo del enlace, alineado con el texto. Hereda el color
   del enlace (`currentColor`), así que el hover pasa a naranjo junto con la palabra. */
.contacto-redes-enlaces .icono-marca {
  inline-size: 1.1em;
  block-size: 1.1em;
  flex: none;
}

.contacto-redes-enlaces a:hover {
  color: var(--em-acento-texto);
}

/* En el teléfono el bloque se apila: el ícono y el rótulo arriba, y los enlaces en su propio
   renglón. En una sola fila no cabía —el rótulo se partía en dos renglones, los dos enlaces
   quedaban apilados en una columna angosta al costado y la línea que los separa colgaba al
   principio de cada uno—, y el conjunto se leía descuadrado. Es como lo reportó el cliente: «en
   mobile se descuadran las redes sociales de la parte final de la página». */
@media (max-width: 700px) {
  .contacto-redes {
    flex-wrap: wrap;
    row-gap: 0.7rem;
  }

  .contacto-redes-enlaces {
    flex-basis: 100%;
  }
}

/* El formulario de contacto (maqueta). Sigue el formato de los bloques del sitio: ícono de
   línea, rótulo en mayúscula y una tarjeta clara con los campos. Los campos llevan el borde
   de la salvia y al enfocar pasan al acento, igual que el resto de las líneas del tema. */
.contacto-formulario {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.6rem;
  row-gap: 0.5rem;
  margin-block-start: 1.6rem;
  padding-block-start: 1.2rem;
  border-block-start: 1px solid rgba(var(--em-salvia-rgb), 0.25);
}

/* El ícono y el rótulo, una sola pieza: el ícono a la izquierda y centrado con el rótulo —como
   en el bloque de redes—. Solo arriba se leía como un glifo suelto con el título debajo. Todo lo
   demás del bloque ocupa las dos columnas, así que sigue midiendo lo que la columna de lectura. */
body .contacto-formulario > .icono-linea {
  grid-area: 1 / 1;
}

body .contacto-formulario > h2 {
  grid-area: 1 / 2;
}

body .contacto-formulario > p,
body .contacto-formulario > form,
body .contacto-formulario > .contacto-formulario-enlaces,
body .contacto-formulario > .contacto-formulario-responsable,
body .contacto-formulario > .contacto-formulario-ancla {
  grid-column: 1 / -1;
}

body .contacto-formulario .icono-linea {
  inline-size: 1.4em;
  block-size: 1.4em;
  color: var(--em-acento-texto);
}

.contacto-formulario h2 {
  font-size: 0.85rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.contacto-formulario p {
  font-size: 0.9rem;
  opacity: 0.85;
}

.contacto-formulario form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1rem;
  margin-block-start: 0.8rem;
}

@media (max-width: 640px) {
  .contacto-formulario form {
    grid-template-columns: 1fr;
  }
}

/* Cada campo es una celda que apila su label encima de su control. Antes el label y el input
   eran celdas sueltas de la grilla y se repartían en columnas de a pares, desalineando los
   campos. Con el campo como contenedor (columna interna), la grilla alinea los pares y el
   Motivo y el Mensaje ocupan el ancho completo con `.contacto-campo-ancho`. */
.contacto-campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.contacto-campo-ancho {
  grid-column: 1 / -1;
}

.contacto-formulario label {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* La marca de obligatorio (el asterisco) va en el acento. Se apunta al `aria-hidden` y no a
   cualquier `span` de la etiqueta: la frase del consentimiento también es un `span`, y con la
   regla ancha se pintaba entera del color del acento. */
.contacto-formulario label span[aria-hidden="true"] {
  color: var(--em-acento-texto);
}

/* La casilla del visto bueno queda afuera de esta regla (por el `:not`): el ancho completo y el
   relleno de un campo deforman una casilla, que se dibuja sola. */
.contacto-formulario input:not([type="checkbox"]),
.contacto-formulario select,
.contacto-formulario textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.95rem;
  color: inherit;
  /* El campo sigue al tema, como la tarjeta: grafito en el oscuro con el texto de lectura (crema)
     arriba, blanco en el claro. Antes el blanco fijo hacía que en el oscuro el texto no se leyera
     dentro del campo. */
  background: var(--bg);
  border: 1px solid rgba(var(--em-salvia-rgb), 0.45);
  border-radius: 3px;
}

:root:root[data-theme="light"] body .contacto .contacto-formulario input:not([type="checkbox"]),
:root:root[data-theme="light"] body .contacto .contacto-formulario select,
:root:root[data-theme="light"] body .contacto .contacto-formulario textarea {
  background: var(--em-blanco);
}

.contacto-formulario input:not([type="checkbox"]):focus,
.contacto-formulario select:focus,
.contacto-formulario textarea:focus {
  outline: none;
  border-color: var(--em-acento);
  box-shadow: 0 0 0 1px var(--em-acento);
}

.contacto-formulario button {
  grid-column: 1 / -1;
  /* El botón mide lo suyo y se apoya en el borde izquierdo, como los campos: estirado a las dos
     columnas era una barra naranja de 735 px que se comía el formulario. */
  justify-self: start;
  margin-block-start: 0.4rem;
  padding: 0.7rem 1.6rem;
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* La tinta del texto sobre el acento, como en los botones del resto del sitio: el blanco fijo
     no se leía sobre la crema del acento en el tema oscuro. */
  color: var(--em-tinta);
  background: var(--em-acento);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.contacto-formulario button:hover {
  filter: brightness(1.06);
}

/* La casilla del visto bueno (Ley 21.719). No es un campo más —el ancho completo y el relleno
   deforman una casilla, así que quedó fuera de la regla de los campos— y por eso lleva las suyas.
   El texto va en caja baja, sin la letra espaciada del rótulo y a plena opacidad: es una frase que
   se lee —y es el texto que la ley pide poder mostrar—, no un rótulo. La opacidad importa: la
   regla de los párrafos del bloque los deja en 0,85 y la opacidad arrastra a los hijos, así que el
   enlace a la política de privacidad —que es justamente lo que hay que poder abrir— quedaría
   atenuado (ver `docs/REGLAS.md`, «Ningún texto por debajo del umbral de contraste»).

   La casilla marcada toma el acento de la marca con `accent-color`, que el navegador aplica al
   tilde y al fondo sin que haya que dibujar nada; el foco sigue siendo el del navegador, porque la
   regla de foco de los campos también la deja afuera y ahí el anillo nativo es el que avisa. */
.contacto-consentimiento {
  grid-column: 1 / -1;
}

body .contacto .contacto-consentimiento label {
  /* Dos columnas: la casilla y la frase. `minmax(0, 1fr)` en la segunda para que el texto pueda
     encogerse cuando la banda es angosta; con flex el ítem de texto no baja de su ancho mínimo. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
}

/* La frase es una sola: si el enlace o el resto del texto quedan como ítems sueltos de la
   grilla, cada uno se lleva una columna y la leyenda se parte en tres bloques. */
.contacto-consentimiento-texto {
  display: block;
}

.contacto-consentimiento-texto a {
  color: var(--em-acento-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contacto-formulario input[type="checkbox"] {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  flex: none;
  /* El aire de arriba alinea la casilla con la primera línea del texto. */
  margin: 0.2rem 0 0;
  padding: 0;
  accent-color: var(--em-acento);
}

/* El pie del bloque: el enlace de baja y la línea del responsable. Igual que la casilla, van a
   plena opacidad y el alfa va en el color (`--em-texto-suave`), que no se contagia a los hijos: el
   enlace de adentro conserva su color de enlace, que es el que está medido. */
body .contacto-formulario .contacto-formulario-enlaces,
body .contacto-formulario .contacto-formulario-responsable {
  opacity: 1;
  color: var(--em-texto-suave);
  font-size: 0.85rem;
}

.contacto-formulario-ancla {
  /* El ancla del `action` del formulario (sin backend, se queda en la propia página). */
  position: relative;
  bottom: 4rem;
}

/* --- el aire de los rótulos: quién manda sobre los márgenes ----------------------------- */
/* El tema trae `.post-body h2 { margin: 3em 0 1.4em }` y `.post-body p { margin: … }` para el
   cuerpo de una nota, y su hoja se carga DESPUÉS de ésta: con la misma especificidad (0,1,1)
   ganaba él, así que los `margin: 0` que estas piezas declaran más arriba nunca llegaron a verse.
   Se notaba en tres cosas de /contacto/: el rótulo de cada tarjeta flotaba 57 px bajo su ícono,
   el de «Redes Sociales» quedaba 15 px más abajo que su ícono y sus enlaces —y el bloque crecía
   de 29 a 141 px de alto—, y los párrafos arrastraban 24-27 px de aire abajo, cuando las piezas
   están armadas como columna con `gap` y el aire lo pone el `gap`.

   Acá se declaran los márgenes con `body .contacto` adelante (especificidad (0,2,1)), que gana
   sin tocar el orden de las hojas ni depender de él. Sólo márgenes: las medidas de letra siguen
   siendo las del tema a propósito, para no cambiar de paso el tamaño de los títulos. */
body .contacto .contacto-tarjeta h2,
body .contacto .contacto-redes h2,
body .contacto .contacto-formulario h2,
body .contacto .contacto-tarjeta p,
body .contacto .contacto-formulario p {
  margin: 0;
}