/* ============================================================
   luzgasia — p-contacto.css (contacto v2 "Editorial del dato")
   Depende de tokens.css + publica.css. Prefijo lzc- (contacto).
   Página corta y QUIETA a propósito: el único movimiento son los
   reveals de las filas (lz-revela, en publica.css) y las micro-
   interacciones de flecha con la firma --ease-gota.
   ============================================================ */

/* =================== CABECERA EDITORIAL =================== */

.lzc-cabecera {
  display: grid;
  gap: var(--esp-5);
  margin-bottom: var(--esp-8);
}
@media (min-width: 64rem) {
  /* Asimetría editorial: el titular manda a la izquierda y el subtítulo
     se sienta en su línea de base, desplazado a la derecha. */
  .lzc-cabecera {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--esp-10);
    align-items: end;
  }
  .lzc-cabecera > .lz-etiqueta { grid-column: 1 / -1; }
  .lzc-intro { padding-block-end: 0.55rem; }
}

/* Corte de línea deliberado: la segunda línea entra sangrada. */
.lzc-titulo { display: grid; }
.lzc-titulo span:nth-child(2) { margin-inline-start: clamp(1.5rem, 7vw, 6.5rem); }

/* =================== CANALES (filas editoriales) =================== */

/* La lista con regla de publica.css, estirada: el padding vive en la fila
   (así TODA la superficie de la fila es clicable en los canales-enlace). */
.lzc-canales > li { padding: 0; display: block; }

.lzc-canal {
  display: grid;
  grid-template-areas:
    "num flecha"
    "termino flecha"
    "cuerpo flecha";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem var(--esp-5);
  align-items: start;
  padding: clamp(1.5rem, 4vw, 2.4rem) clamp(0.5rem, 1.5vw, 1rem);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-v2-2) var(--ease-salida-v2);
}
@media (min-width: 48rem) {
  .lzc-canal {
    grid-template-areas: "num termino cuerpo flecha";
    grid-template-columns: 3.5rem minmax(0, 5fr) minmax(0, 6fr) auto;
    column-gap: var(--esp-5);
    align-items: center;
  }
}

/* Solo los canales que SON enlace reaccionan (afordanza honesta). */
a.lzc-canal:hover,
a.lzc-canal:focus-visible { background: var(--lz-papel-2); }
a.lzc-canal:focus-visible {
  outline: 2px solid var(--c-foco);
  outline-offset: 3px;
  border-radius: var(--radius-vivo);
}

/* Índice numérico: mismo gesto editorial que el resto de la web v2. */
.lzc-canal__num {
  grid-area: num;
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--c-amarillo-500);
  font-variant-numeric: tabular-nums;
}

/* Término grande en Space Grotesk: la fila ES tipografía, no tarjeta. */
.lzc-canal__termino {
  grid-area: termino;
  margin: 0;
  font-family: var(--fuente-marca);
  font-weight: 600;
  font-size: var(--fs-display-3);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.lzc-canal__cuerpo { grid-area: cuerpo; display: grid; gap: 0.35rem; }
.lzc-canal__texto {
  font-size: var(--texto-s);
  line-height: var(--interlineado-texto);
  color: var(--lz-tinta-suave);
  max-width: 34rem;
  text-wrap: pretty;
}

/* El dato accionable (la dirección de email) va subrayado dentro de la fila. */
.lzc-canal__dato {
  font-family: var(--fuente-marca);
  font-weight: 600;
  font-size: var(--texto-s);
  color: var(--lz-tinta);
  text-decoration: underline;
  text-decoration-color: var(--lz-linea);
  text-underline-offset: 0.25em;
  overflow-wrap: anywhere;
  transition: text-decoration-color var(--dur-v2-1) ease;
}
a.lzc-canal:hover .lzc-canal__dato,
a.lzc-canal:focus-visible .lzc-canal__dato { text-decoration-color: currentColor; }
/* Variante microcopy (compromiso-cero): informa, no es un "enlace". */
.lzc-canal__dato--quieto { text-decoration: none; color: var(--lz-tinta-suave); font-weight: 500; }

/* Flecha: reutiliza lz-flecha (transición con --ease-gota en publica.css)
   dentro de una placa con la esquina viva de la gota, que se AFILA al
   interactuar — la misma firma que los botones v2. */
.lzc-canal__flecha {
  grid-area: flecha;
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border: 1.5px solid var(--lz-tinta);
  border-radius: var(--radius-gota-s);
  color: var(--lz-tinta);
  transition: border-radius var(--dur-v2-2) var(--ease-salida-v2),
              background-color var(--dur-v2-2) var(--ease-salida-v2);
}
.lzc-canal__flecha svg { width: 1.35rem; height: 1.35rem; }
a.lzc-canal:hover .lzc-canal__flecha,
a.lzc-canal:focus-visible .lzc-canal__flecha { border-radius: var(--radius-vivo); }
a.lzc-canal:hover .lzc-canal__flecha svg,
a.lzc-canal:focus-visible .lzc-canal__flecha svg { translate: 4px 0; }

/* Canal destacado (/analizar): el ÚNICO uso del ámbar de la página — es el
   CTA primario. La conversión vive en el funnel, no en el email. */
.lzc-canal--analiza .lzc-canal__flecha {
  background: var(--c-amarillo-500);
  border-color: var(--c-amarillo-500);
  color: var(--c-marino-950);
  box-shadow: var(--sombra-2);
}
a.lzc-canal--analiza:hover .lzc-canal__flecha,
a.lzc-canal--analiza:focus-visible .lzc-canal__flecha { box-shadow: var(--sombra-3); }

/* WhatsApp sin número real: fila atenuada con estado, sin fingir enlace. */
.lzc-canal--pronto .lzc-canal__termino { color: var(--lz-tinta-suave); }
.lzc-canal__estado {
  grid-area: flecha;
  align-self: center;
  justify-self: end;
  font-family: var(--fuente-marca);
  font-size: var(--fs-etiqueta);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--lz-tinta-suave);
  border: 1px solid var(--lz-linea);
  border-radius: var(--radius-gota-s);
  padding: 0.4rem 0.75rem;
  white-space: nowrap;
}

/* =================== EXPECTATIVAS HONESTAS =================== */
/* v3 (remodelado 2026-08-07): de bloque con regla a CÁPSULA NAVY con la
   aurora de la casa — el "momento" de la página; cierra el rectángulo sin
   aire muerto bajo las filas de canales. */
.lzc-espera {
  margin-top: var(--esp-10);
  position: relative;
  overflow: clip;
  background: var(--c-marino-950);
  color: var(--c-texto-inverso);
  border-radius: var(--radius-gota);
  padding: clamp(1.8rem, 4vw, 3rem);
  display: grid;
  gap: var(--esp-3);
}
.lzc-espera > :not(.lz-aurora) { position: relative; z-index: 1; }
@media (min-width: 48rem) {
  .lzc-espera {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--esp-8);
  }
  .lzc-espera__titulo { grid-column: 1; grid-row: 1 / span 2; }
  .lzc-espera__linea { grid-column: 2; }
}
.lzc-espera__titulo {
  margin: 0;
  font-family: var(--fuente-marca);
  font-size: var(--fs-etiqueta);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--lg-text-muted);
}
.lzc-espera__linea {
  margin: 0;
  font-size: var(--texto-s);
  line-height: var(--interlineado-texto);
  color: var(--c-texto-inverso-suave);
  max-width: 46rem;
}

/* =================== FORMULARIO DE SOPORTE (2026-08-12) =================== */
/* Va DESPUES de los canales: primero se ofrece resolverlo solo. Sobre papel-2
   para que se lea como una franja propia sin romper la reticula editorial, y
   cerrando rectangulo con la capsula navy que va justo debajo.
   Los campos reusan .campo/.campo__entrada de base.css: no hay motivo para
   tener dos sistemas de formulario en el mismo repo. */
.lzc-escribe {
  margin-top: var(--esp-10);
  background: var(--lz-papel-2);
  border: 1px solid var(--lz-linea);
  border-radius: var(--radius-gota);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
}
.lzc-escribe__titulo {
  margin: 0 0 var(--esp-2);
  font-family: var(--fuente-marca);
  font-size: var(--fs-display-3);
  font-weight: 600;
  color: var(--lz-tinta);
}
.lzc-escribe__intro {
  margin: 0 0 var(--esp-5);
  font-size: var(--texto-s);
  line-height: var(--interlineado-texto);
  color: var(--lz-tinta-suave);
  max-width: 46rem;
}
.lzc-escribe__form { display: grid; gap: var(--esp-4); }
/* Nombre y email comparten fila en cuanto caben: son cortos, y apilados
   estiran el formulario sin ganar nada. */
.lzc-escribe__fila { display: grid; gap: var(--esp-4); align-items: start; }
@media (min-width: 40rem) {
  .lzc-escribe__fila { grid-template-columns: 1fr 1fr; }
}
/* Con el teléfono (2026-08-14) la fila son TRES campos: en tableta el tercero
   ocupa la fila de abajo entera; en escritorio, tres iguales — fila completa,
   sin hueco muerto (regla del recuadro). Va DESPUÉS del bloque de 40rem: a
   misma especificidad gana el último. */
@media (min-width: 40rem) {
  .lzc-escribe__fila--tres > .campo:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 56rem) {
  /* align-items:end = los INPUTS en una línea limpia aunque una etiqueta
     ocupe dos líneas en algún idioma (era el descuadre del teléfono). */
  .lzc-escribe__fila--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .lzc-escribe__fila--tres > .campo:nth-child(3) { grid-column: auto; }
}
.lzc-escribe__area { min-height: 8rem; resize: vertical; font: inherit; }
.lzc-escribe__consent { align-items: flex-start; line-height: 1.5; }
.lzc-escribe__consent input { margin-top: 0.25rem; }
/* En tactil el checkbox nativo se pintaba a 13x13px: ALCANZABLE (el label
   que lo envuelve ya da los ~44px, no es el fallo del §6.70) pero el estado
   marcado/desmarcado apenas se ve bajo el pulgar. Solo crece el dibujo del
   control; en escritorio con raton no cambia nada. */
@media (pointer: coarse) {
  .lzc-escribe__consent input { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.15rem; }
}
.lzc-escribe__boton { justify-self: start; }

.lzc-escribe__aviso {
  margin: 0;
  padding: var(--esp-4);
  border-radius: var(--radio-m);
  font-size: var(--texto-s);
  line-height: var(--interlineado-texto);
  border: 1px solid transparent;
}
/* Color y fondo PROPIOS, no heredados: esta caja vive sobre papel pero la
   pagina alterna secciones navy, y heredar el color la haria desaparecer
   (mismo fallo que tuvo el aviso de cookies, §6.27). */
.lzc-escribe__aviso--ok {
  background: #ffffff;
  border-color: #c8e6d8;
  color: var(--c-marino-900);
}
.lzc-escribe__aviso--error {
  background: #ffffff;
  border-color: #eecdca;
  color: var(--c-marino-900);
}

/* Campo TRAMPA (honeypot): fuera de la vista y fuera del arbol accesible.
   NO se usa display:none — algunos bots lo detectan y saltan justo esos
   campos; asi el campo existe, se puede rellenar y no lo ve nadie. */
.lzc-trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}