/* ============================================================
   ATLA — contacto.css
   Solo lo específico de Contacto. La estructura común vive en base.css
   ============================================================ */

/* ---------- Hero ---------- */
/* Más bajo que el del Home: acá el protagonista es el formulario,
   no la portada. Usa el mismo azul profundo de la cabecera del Home. */
.hero-contacto {
  position: relative;
  isolation: isolate;
  /* Mismo recurso que el hero del Home: sangra bajo la cabecera. */
  margin-top: calc(var(--header-h) * -1);
  min-height: clamp(420px, 68svh, 620px);
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--sp-4));
  padding-bottom: var(--sp-6);
  background:
    radial-gradient(80% 60% at 50% 12%, rgba(120, 141, 182, 0.26) 0%, transparent 64%),
    linear-gradient(168deg, #1B2A47 0%, #0D1526 60%, #080D18 100%);
  color: var(--ink-on-dark);
  text-align: center;
}

.hero-contacto .label { color: var(--ink-muted-on-dark); }

.hero-contacto__title {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  /* Hereda `--lh-display` de la piel: la didona de Contabilidad necesita mas
     aire que la grotesca del Home, y acá la familia cambia con la URL. */
  line-height: var(--lh-display);
  max-width: 16ch;
  margin-inline: auto;
  color: var(--ink-on-dark);
}

.hero-contacto__lead {
  max-width: 52ch;
  margin: var(--sp-3) auto 0;
  color: var(--ink-muted-on-dark);
}

/* ---------- Formulario ---------- */
.form-section { padding-block: clamp(3.5rem, 8vw, var(--sp-7)); }

.form-wrap { max-width: 660px; margin-inline: auto; }

.form-head { text-align: center; margin-bottom: var(--sp-5); }
.form-head h2 { font-size: var(--fs-h2); margin-top: var(--sp-2); }

.form-grid { display: grid; gap: var(--sp-4); }

.form-pareja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

/* Campos con filete, no con caja: mismo lenguaje que el resto del sitio.
   El foco NO se resuelve solo con el subrayado — el anillo de :focus-visible
   de base.css sigue activo, que es lo que ve quien navega con teclado. */
.campo { display: grid; gap: 0.4rem; }

.campo label {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.campo label .req { color: var(--burgundy); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.65rem 0;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  transition: border-color var(--dur) var(--ease);
}

.campo input::placeholder,
.campo textarea::placeholder { color: color-mix(in srgb, var(--ink-muted) 62%, transparent); }

.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-bottom-color: color-mix(in srgb, var(--ink) 45%, transparent); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-bottom-color: var(--ink); }

.campo textarea { min-height: 150px; resize: vertical; line-height: 1.7; }

/* Flecha propia para el desplegable */
.campo select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
                    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 9px) calc(50% + 1px), calc(100% - 4px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Estado de error */
.campo.is-error input,
.campo.is-error select,
.campo.is-error textarea { border-bottom-color: var(--burgundy); }

.campo__error {
  font-size: var(--fs-small);
  color: var(--burgundy);
  min-height: 0;
}
.campo:not(.is-error) .campo__error { display: none; }

/* Resumen de errores: recibe el foco tras un envío fallido con varios fallos */
.form-resumen {
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--burgundy);
  background: color-mix(in srgb, var(--burgundy) 7%, transparent);
  font-size: var(--fs-small);
}
.form-resumen[hidden] { display: none; }
.form-resumen ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.form-resumen a { color: var(--burgundy); text-decoration: underline; }

/* ---------- Acciones ---------- */
.form-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* WhatsApp es la vía principal: es la que el cliente contesta más rápido */
.btn--wa {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--wa:hover { background: transparent; color: var(--ink); }
.btn--wa svg { width: 18px; height: 18px; flex: none; }

.btn--texto {
  min-height: 44px;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}
.btn--texto:hover {
  background: transparent;
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.form-nota { font-size: var(--fs-small); color: var(--ink-muted); }

/* Confirmación tras enviar. No dice "enviado": dice lo que realmente pasó. */
.form-ok {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.form-ok[hidden] { display: none; }
.form-ok strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; }
.form-ok p { font-size: var(--fs-small); color: var(--ink-muted); }

/* ---------- Otras formas de contacto ---------- */
.vias__head { text-align: center; margin-bottom: var(--sp-5); }
.vias__title { font-size: var(--fs-h2); margin-top: var(--sp-2); }

.vias__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.via {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.via:last-child { border-right: 0; }

.via__label {
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.via__dato {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--ink);
}

a.via__dato { transition: color var(--dur-fast) var(--ease); }
a.via__dato:hover { color: var(--burgundy); }
/* Sobre marino el vino no llega a contraste: ahí el hover va en dorado. */
.section--dark a.via__dato:hover { color: var(--accent); }

/* Las cifras van en la monoespaciada: en la serif de titulares el "11" del
   teléfono se lee como dos eles. Es el rol que tiene reservada esa familia. */
.via__dato--num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.via__nota { font-size: var(--fs-small); color: var(--ink-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .form-pareja { grid-template-columns: 1fr; }
  .vias__grid { grid-template-columns: 1fr; }
  .via { border-right: 0; }
  .form-acciones { flex-direction: column; align-items: stretch; }
  .btn--texto { text-align: center; justify-content: center; }
}

/* ============================================================
   LAS CINCO PIELES

   `contacto.html?servicio=...` define `data-desde` en el <html>. Cada piel
   redefine el degradado del hero y el color de su etiqueta — el mismo
   mecanismo con el que cada pagina de servicio cambia de mundo (§4):
   **no se reescribe ningun componente, solo se redefinen roles**.

   Desde el 24/08/2026 tambien cambia la TIPOGRAFIA, por pedido del cliente:
   "si voy a contacto desde consultoria, diseno web, contabilidad,
   automatizacion o marketing sigo teniendo las letras del home, y yo quiero
   que se adapte dependiendo de la seccion desde la que se esta yendo".
   (Antes esta nota decia lo contrario — que el color alcanzaba. Manda el
   cliente, y ademas ahora cada pagina tiene familia propia: llegar a Contacto
   y que la letra cambie de golpe era el corte que el color evitaba.)

   Lo que sigue SIN cambiar es la estructura y los efectos de fondo. El
   trabajo de esta pagina es que el mensaje se envie: cinco heroes animados
   alrededor de un formulario harian que el formulario sea lo menos estable
   del sitio.

   Los colores salen de la pagina de origen: no se invento ninguno.
   ============================================================ */

/* Consultoria — vino sobre negro atintado (§7ter) */
:root[data-desde="consultoria"] .hero-contacto {
  background:
    radial-gradient(80% 60% at 50% 12%, rgba(212, 112, 123, 0.20) 0%, transparent 64%),
    linear-gradient(168deg, #2A1116 0%, #180A0D 60%, #0E0507 100%);
}
:root[data-desde="consultoria"] .hero-contacto .label { color: #D15B64; }

/* Contabilidad — negro y acero, sin un solo tono calido (§7quater) */
:root[data-desde="contabilidad"] .hero-contacto {
  background:
    radial-gradient(80% 60% at 50% 12%, rgba(185, 194, 208, 0.16) 0%, transparent 64%),
    linear-gradient(168deg, #14171C 0%, #0B0D10 60%, #08090B 100%);
}
:root[data-desde="contabilidad"] .hero-contacto .label { color: #B9C2D0; }

/* Marketing — turquesa (§7quinquies) */
:root[data-desde="marketing"] .hero-contacto {
  background:
    radial-gradient(80% 60% at 50% 12%, rgba(168, 220, 208, 0.22) 0%, transparent 64%),
    /* Turquesa OSCURO, no el #17707A de la marca. Marketing es la unica
       pagina clara del sitio, asi que no tiene un hero oscuro de donde
       copiar el valor: usando el turquesa tal cual, la bajada daba 3,50:1 y
       la etiqueta 3,80. #0B363B lo pone en la misma familia de valor que los
       otros cuatro heroes (todos arrancan entre #14 y #2A) y da 6,80 y 8,61. */
    linear-gradient(168deg, #0B363B 0%, #072529 60%, #041A1D 100%);
}
:root[data-desde="marketing"] .hero-contacto .label { color: #A8DCD0; }

/* Diseno Web — marino con el azul electrico (§7sexies) */
:root[data-desde="diseno-web"] .hero-contacto {
  background:
    radial-gradient(80% 60% at 50% 12%, rgba(126, 147, 240, 0.22) 0%, transparent 64%),
    linear-gradient(168deg, #16233D 0%, #0E1424 60%, #090D18 100%);
}
:root[data-desde="diseno-web"] .hero-contacto .label { color: #7E93F0; }

/* Automatizacion — carbon calido y oro (§7nonies) */
:root[data-desde="automatizacion"] .hero-contacto {
  background:
    radial-gradient(80% 60% at 50% 12%, rgba(201, 151, 31, 0.18) 0%, transparent 64%),
    linear-gradient(168deg, #1A1611 0%, #100E0A 60%, #0B0A08 100%);
}
:root[data-desde="automatizacion"] .hero-contacto .label { color: #C9971F; }

/* ------------------------------------------------------------
   "Otras formas" tambien adopta el color.

   La seccion ya vivia de tokens (`--navy-deep` para el fondo y `--accent`
   para la etiqueta), asi que adaptarla es redefinirlos — no se reescribe
   ningun componente. Cada fondo es el tramo medio del hero de su piel, para
   que las dos bandas oscuras de la pagina sean del mismo mundo.
   ------------------------------------------------------------ */
:root[data-desde="consultoria"]   .section--dark { background: #180A0D; --accent: #D15B64; }
:root[data-desde="contabilidad"]  .section--dark { background: #0B0D10; --accent: #B9C2D0; }
:root[data-desde="marketing"]     .section--dark { background: #072529; --accent: #A8DCD0; }
:root[data-desde="diseno-web"]    .section--dark { background: #0E1424; --accent: #7E93F0; }
:root[data-desde="automatizacion"] .section--dark { background: #100E0A; --accent: #C9971F; }

/* ------------------------------------------------------------
   Y la TIPOGRAFIA de la seccion de la que venis (§12.1).

   Son los mismos tokens que cada `.pag-*` declara en su propio CSS, copiados
   acá: no se puede reusar aquellos selectores porque dependen de una clase en
   el <body> que esta pagina no tiene — su piel la decide el parametro de la
   URL, que vive en el <html>.

   ⚠️ Las familias NO se cargan todas: seria pedirle a cada visitante siete
   tipografias para usar una. El script del <head> inyecta el <link> de la
   piel que corresponde, y solo ese. Si el parametro no viene, no se pide nada
   y queda la del Home.

   ⚠️ `--font-cifras: var(--font-display)` se declara acá adentro a proposito:
   asi se resuelve contra el `--font-display` de ESTE bloque. Declarado en
   `:root` se resolveria con el del Home (§6bis, bug 3).
   ------------------------------------------------------------ */
:root[data-desde="consultoria"] {
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --peso-display:  400;
  --track-display: -0.015em;
  --font-cifras:  var(--font-display);
}

:root[data-desde="contabilidad"] {
  --font-display: "Libre Bodoni", Didot, "Bodoni MT", Georgia, serif;
  --peso-display:  500;
  --track-display: -0.005em;
  --lh-display:    1.16;   /* la didona trae ascendentes y descendentes largas */
  --font-cifras:  var(--font-display);
}

:root[data-desde="marketing"] {
  --font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --peso-display:  800;
  --track-display: -0.02em;
  --lh-display:    1.14;
  --font-cifras:  var(--font-display);
}

:root[data-desde="diseno-web"] {
  --font-display: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --peso-display:  500;
  --track-display: -0.04em;   /* la mono viene ancha */
  /* Las cifras de Diseño Web no son su mono: el cero de JetBrains lleva un
     punto adentro y ensucia los números (§7sexies). Van en Inter tabular. */
  --font-cifras:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root[data-desde="automatizacion"] {
  --font-display: "Times New Roman", Tinos, Times, serif;
  --peso-display:  400;
  --track-display: -0.01em;
  --font-cifras:  var(--font-display);
}