/* ============================================================
   ENSO MEDIA — Contacto
   El motor viene de horizontal.css; la píldora y los tokens
   compartidos, de nosotros.css. Aquí sólo el formulario, las
   tarjetas A/B/C, los canales directos y el mini mapa.

   El formulario se lee de izquierda a derecha, en columnas, y no
   de arriba abajo: en una página que se recorre en horizontal, una
   columna de doce campos obligaría a hacer scroll vertical dentro
   de un panel que no baja.
   ============================================================ */

/* ============================================================
   1 · Hero
   ============================================================ */

.co-hero .hero__titulo { max-width: 14ch; }

/* El trazo llega cerrado y con más presencia que en las otras
   páginas: es el final del recorrido. */
.co-hero__trazo {
  position: absolute;
  right: -6vw;
  top: 50%;
  z-index: 2;
  width: min(88vh, 740px);
  height: auto;
  translate: 0 -50%;
  fill: var(--marca);
  opacity: 0.12;
  pointer-events: none;
}

/* ============================================================
   2 · Formulario
   ============================================================ */

/* El panel vive sobre una fotografía en penumbra: sus tokens tienen que
   ser los de "claro sobre oscuro" aunque el sitio esté en tema claro.
   Sin esto, en tema claro el texto salía en tinta negra sobre el velo
   negro y el formulario entero desaparecía. */
.formulario {
  align-items: center;
  --velo: 0 0 0;
  --tinta: var(--blanco);
  --tinta-suave: rgba(255, 255, 255, 0.74);
  --tinta-tenue: rgba(255, 255, 255, 0.62);
  --linea: rgba(255, 255, 255, 0.16);
  --linea-fuerte: rgba(255, 255, 255, 0.34);
  --marca-tinta: var(--marca);
  --fondo: #050505;
  color: var(--blanco);
}

.formulario__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.formulario__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.9) brightness(0.42);
}

.formulario__velo {
  position: absolute;
  /* 2 px de sangrado, no 0: con `inset: 0` el borde del velo y el
     recorte de la foto caen en píxeles distintos al estar el panel
     en una posición fraccionaria, y asoma una línea de foto sin
     velo. El panel recorta, así que el sangrado no se ve. */
  inset: -2px;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.72) 55%, rgba(0, 0, 0, 0.52) 100%),
    radial-gradient(120% 100% at 12% 50%, rgba(0, 0, 0, 0.55), transparent 70%);
}

/* La tarjeta: vidrio sobre la fotografía. El velo de abajo ya hace
   casi todo el trabajo de contraste; esto sólo delimita el terreno
   del formulario para que no flote sobre la nada. */
.ficha-form {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  gap: clamp(2rem, 4vw, 4.5rem);
  width: min(1120px, 88vw);
  margin-inline: auto;
  padding: clamp(1.5rem, 2.4vw, 2.5rem);
  border-radius: var(--radio);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 8, 7, 0.66);
  backdrop-filter: blur(20px) saturate(130%);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}

/* La columna de texto medía 20 vw: el titular caía en cuatro líneas muy
   cortas y era ella la que decidía el alto de la tarjeta, con el
   formulario arriba y medio panel vacío debajo. Ensanchada, y con el
   formulario repartido en filas, las dos columnas terminan a la par. */
.form__intro {
  flex: none;
  width: min(36ch, 27vw);
  display: grid;
  gap: var(--flow-sm);
  align-content: center;
}

/* Un punto por debajo de la escala general: al tamaño de h2, "sobre" se
   quedaba solo en su propia línea. */
.formulario .form__intro .display { font-size: clamp(1.85rem, 2.6vw, 2.35rem); }


.form__nota {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--linea);
  font-size: 0.78rem;
  color: var(--tinta-tenue);
}

/* Antes eran tres columnas lado a lado —intro, datos y el botón en una
   columna propia— y el botón quedaba huérfano a media altura, con un
   cuarto de la tarjeta vacío debajo. Ahora el formulario es una pila:
   la rejilla de campos y, debajo, la línea de envío alineada con ella. */
.form {
  flex: 1;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: var(--flow-md);
}

.form__grupo {
  display: grid;
  align-content: start;
  gap: var(--space-sm) var(--space-md);
  padding: 0;
  border: 0;
}

.form__grupo legend {
  padding: 0 0 var(--space-xs);
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marca-tinta);
}

/* Los seis datos de contacto en dos columnas: en una sola, la columna
   medía 525 px y era la que decidía el alto de todo el panel. */
.form__grupo--contacto {
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-md);
}

/* Los comentarios ocupan el ancho entero: es el campo en el que de
   verdad se escribe, y de paso empareja el alto con la columna de la
   izquierda. */
.campo--largo { grid-column: 1 / -1; }

.form__grupo--contacto legend { grid-column: 1 / -1; }

.form__cierre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--linea);
}

.form__promesa { font-size: 0.8rem; line-height: 1.4; color: var(--tinta-tenue); }

/* `align-content: start` y no el estirado por defecto: la fila que
   comparten "Servicio requerido" y los comentarios la marcaba el
   textarea, y el select se estiraba hasta 100 px de alto mientras el
   resto medía 44. Eran la misma clase con dos alturas distintas. */
.campo { display: grid; align-content: start; gap: 7px; }

/* Las etiquetas pasan a la tipografía de rótulo del sitio —versalitas
   con tracking, como los eyebrows— en vez de texto corrido menudo. */
.campo label {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.campo label span { color: var(--marca-tinta); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radio-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--tinta);
  font-family: var(--texto-font);
  font-size: 0.95rem;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.07);
}

.campo textarea { min-height: 108px; resize: vertical; line-height: 1.5; }

.campo select {
  appearance: none;
  padding-right: var(--space-2xl);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* El borde de marca al enfocar, como pide el brief. El anillo de foco
   del sitio sigue encima: el color por sí solo no basta para señalar
   dónde está el cursor. */
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--marca);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(235, 219, 0, 0.16);
}

.campo input::placeholder,
.campo textarea::placeholder { color: var(--tinta-tenue); }

/* --- Errores --- */
.campo__error {
  margin-top: 2px;
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--error);
}

.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: var(--error); }

/* El acuse vive junto al botón. Los tonos son semánticos y no usan el
   amarillo de marca: aquí «bien» y «mal» tienen que distinguirse de
   «esto es de Enso». */
.form__aviso[data-tono="bien"] { color: #5fbe8a; }
.form__aviso[data-tono="error"] { color: #ff8b74; }

.form__copiar {
  margin-left: 0.35rem;
  padding: 0.15em 0.5em;
  border-radius: 100px;
  border: 1px solid var(--linea-fuerte);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.92em;
  cursor: pointer;
}

.form__copiar:hover { border-color: var(--marca); color: var(--marca-tinta); }

.form__aviso {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--marca-tinta);
}

.form__aviso:empty { display: none; }

.form__ayuda {
  margin-top: calc(var(--space-xs) * -1);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--tinta-tenue);
}

/* ============================================================
   Tarjetas A / B / C
   ============================================================ */

.form__grupo--tipo { width: min(32ch, 23vw); }

.tipos { display: grid; gap: var(--space-xs); }

.tipo { display: block; cursor: pointer; }

/* El radio real sigue ahí: sin él no hay grupo, ni flechas, ni
   lectura de "1 de 3". Sólo se saca de la vista. */
.tipo input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Fila, no rejilla: con la letra ocupando cuatro filas por span, cada
   tarjeta se inflaba a 203 px y la columna se salía del panel. */
.tipo__caja {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radio-sm);
  border: 1px solid var(--linea-fuerte);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.tipo__texto { display: grid; gap: 1px; }

.tipo__letra {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--marca-tinta);
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--marca-tinta);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.tipo__nombre {
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.1;
  color: var(--tinta);
}

.tipo__dato { font-size: 0.76rem; line-height: 1.35; color: var(--tinta-tenue); }

.tipo:hover .tipo__caja { border-color: var(--marca); }

.tipo input:checked + .tipo__caja {
  border-color: var(--marca);
  background: rgba(235, 219, 0, 0.09);
}

.tipo input:checked + .tipo__caja .tipo__letra {
  background: var(--marca);
  color: var(--sobre-marca);
  border-color: var(--marca);
}

/* El foco del teclado tiene que verse en la tarjeta, no en el radio
   escondido, o no habría forma de saber dónde estás. */
.tipo input:focus-visible + .tipo__caja {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
}

.form__enviar { justify-content: center; text-align: center; }
.form__enviar span { white-space: nowrap; }

/* ============================================================
   3 · Contacto directo
   ============================================================ */

.directo { gap: var(--flow-lg); align-items: center; }

.directo__intro {
  flex: none;
  width: min(28ch, 23vw);
  display: grid;
  gap: var(--flow-sm);
  align-content: center;
}

.directo__intro .pill { justify-self: start; }

/* Cuadrícula de dos por dos, no una columna de cuatro. Lo pide la
   diapositiva 43: apiladas, las cuatro fichas dejaban media pantalla
   vacía a su derecha y obligaban a recorrer una lista para encontrar
   el WhatsApp. */
.canales {
  flex: none;
  width: min(46vw, 620px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

/* En cuadrícula la ficha se estira a lo alto de su fila: si no, con
   textos de distinto largo las dos de arriba salían de alturas
   distintas. */
.canal { display: grid; }

.canal a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--flow-sm) var(--flow-md);
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: var(--fondo-3);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.canal a:hover { border-color: var(--marca); transform: translateY(-3px); }

.canal__icono {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linea-fuerte);
  color: var(--tinta);
}

.canal__icono svg { width: 21px; height: 21px; }

/* El verde de WhatsApp es marca ajena y estándar reconocible: es la
   única excepción a la paleta en todo el sitio. */
.canal__icono--wa { border-color: var(--wa); color: var(--wa); }

.canal__cuerpo { display: grid; gap: 2px; }

.canal__cuerpo b {
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--tinta);
}

.canal__dato { font-size: 0.94rem; color: var(--tinta-suave); }
.canal__pista { font-size: 0.78rem; color: var(--tinta-tenue); }

/* ============================================================
   4 · Sedes
   ============================================================ */

.sedes-cierre { gap: var(--flow-lg); align-items: center; }

.sedes-cierre__intro {
  flex: none;
  width: min(28ch, 23vw);
  display: grid;
  gap: var(--flow-sm);
  align-content: center;
  justify-items: start;
}


.mapa--mini { flex: none; width: min(34vw, 440px); }

.ciudades--cierre { flex: none; width: min(26ch, 21vw); }

/* El pie legal no compite con nada: va pegado al borde inferior */
.cierre__legal--solo {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--space-2xl) + 0.6rem);
  z-index: 3;
  font-size: 0.74rem;
  color: var(--tinta-tenue);
}

/* Pantallas bajas: el formulario es lo que más aprieta */
@media (min-width: 900px) and (max-height: 820px) {
  /* El panel reserva 88 px arriba y 112 abajo para el header y el
     navegador de puntos. A 640 px de alto eso deja 440 para una tarjeta
     de 500: se desbordaba por los dos lados. Aquí el reparto se ajusta
     a lo que de verdad ocupan esas dos barras. */
  .formulario { padding-block: 76px 84px; }
  .ficha-form { padding: var(--space-md) var(--space-lg); gap: var(--flow-md); }
  .form { gap: var(--space-md); }
  .form__intro { width: min(30ch, 23vw); gap: var(--space-sm); }
  .formulario .form__intro .display { font-size: clamp(1.5rem, 2.2vw, 1.95rem); }
  .form__intro .lead { font-size: 0.88rem; }

  /* Tres columnas y no dos: con los cinco mensajes de error a la vista,
     la tarjeta a dos columnas medía 645 px dentro de una caja de 520 y
     se metía debajo del header. A tres, los campos cortos ocupan dos
     filas en vez de tres y sobra sitio incluso en el peor caso. */
  .form__grupo--contacto { grid-template-columns: repeat(3, 1fr); }
  .form__grupo { gap: var(--space-2xs) var(--space-sm); }
  .campo { gap: 4px; }
  .campo label { font-size: 0.66rem; letter-spacing: 0.13em; }
  .campo input, .campo select { min-height: 42px; padding-block: 0.45rem; }

  /* A tres columnas la caja del select baja de 180 px y "Elige un
     servicio" se cortaba contra el hueco reservado a la flecha. */
  .campo select { padding-right: var(--space-xl); }
  .campo select { background-position: calc(100% - 16px) calc(50% + 2px), calc(100% - 10px) calc(50% + 2px); }
  .campo textarea { min-height: 50px; }
  .form__cierre { padding-top: var(--space-xs); }
  .tipo__caja { padding: var(--space-xs) var(--space-sm); }
  .tipo__dato { font-size: 0.72rem; }
  .directo__intro, .sedes-cierre__intro { width: min(24ch, 19vw); }
  .canal a { padding: var(--space-sm) var(--space-md); }
  .mapa--mini { width: min(30vw, 370px); }
}

/* ============================================================
   Móvil
   ============================================================ */

@media (max-width: 899px) {
  .co-hero__trazo { right: -28vw; opacity: 0.1; }

  /* En vertical el formulario sí baja: aquí una sola columna es lo
     natural y lo que espera el pulgar. */
  .ficha-form {
    flex-direction: column;
    gap: var(--flow-lg);
    padding: var(--flow-md) var(--space-md);
    margin-top: var(--flow-md);
  }

  .form { flex-direction: column; gap: var(--flow-lg); }

  .form__intro,
  .form__grupo,
  .form__grupo--tipo,
  .directo__intro,
  .canales,
  .sedes-cierre__intro,
  .mapa--mini,
  .ciudades--cierre { width: 100%; max-width: none; }

  /* Una sola columna: en 390 px, dos campos por fila dejan 137 px para
     escribir un correo completo. */
  .form__grupo--contacto { grid-template-columns: 1fr; }

  .campo input,
  .campo select,
  .campo textarea { min-height: 48px; font-size: 16px; }

  .form__enviar { width: 100%; justify-content: center; min-height: 52px; }

  /* --- Canales --- */
  .canales { margin-top: var(--flow-md); gap: var(--space-sm); }
  .canal a { padding: var(--space-md); min-height: 72px; }

  /* --- Sedes --- */
  .mapa--mini { margin-block: var(--flow-md); }
  .ciudades--cierre { margin-top: var(--flow-sm); }

  .cierre__legal--solo {
    position: static;
    margin-top: var(--flow-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--linea);
  }
}


/* --- Fondo de marca: resplandor y trama --------------------------
   El panel era una plancha lisa. Mismo recurso del mapa y de Nosotros.
   El contenido sube a z-index 2 para quedar por encima. --- */
.directo::before,
.directo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.directo::before { background: radial-gradient(50% 58% at 62% 50%, rgb(243 176 0 / 0.11) 0%, rgb(235 219 0 / 0) 66%); }

.directo::after {
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 30px 30px;
  color: var(--marca);
  opacity: 0.11;
  mask-image: radial-gradient(58% 62% at 62% 50%, #000 0%, transparent 74%);
  -webkit-mask-image: radial-gradient(58% 62% at 62% 50%, #000 0%, transparent 74%);
}

@media (max-width: 899px) {
  .directo::before, .directo::after { display: none; }
}


/* ------------------------------------------------------------
   Contacto directo y Sedes: fotografía a sangre
   Los dos paneles eran planchas. Declaran data-oscuro, así que
   fijan sus tokens y funcionan igual en los dos temas.
   ------------------------------------------------------------ */
.directo, .sedes-cierre {
  --velo: 0 0 0;
  --fondo: #050505;
  --fondo-2: #0d0d0c;
  --fondo-3: #161614;
  --tinta: #ffffff;
  --tinta-suave: rgba(255, 255, 255, 0.74);
  --tinta-tenue: rgba(255, 255, 255, 0.6);
  --linea: rgba(255, 255, 255, 0.16);
  --linea-fuerte: rgba(255, 255, 255, 0.32);
  --marca-tinta: var(--marca);
  background: var(--negro-panel);
  color: var(--blanco);
}

.directo__media, .sedes-cierre__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Igual que en el cierre: negro debajo, por si el recorte deja medio
     píxel al descubierto. */
  background: var(--negro-panel);
}

/* La fotografía mide exactamente su caja. Sobresalía un 116 % con
   `margin-left: -8%`, y al llevar `filter` se pinta en capa aparte: el
   recorte de la capa y el borde del velo redondeaban distinto y asomaba
   una franja de foto sin velar en el borde del panel. */
.directo__media img, .sedes-cierre__media img {
  max-width: none;
  width: 100%;
  height: 100%;
  margin-left: 0;
  object-fit: cover;
  filter: grayscale(0.5) contrast(1.06) brightness(0.4);
}

.directo__velo, .sedes-cierre__velo {
  position: absolute;
  /* 2 px de sangrado, no 0: con `inset: 0` el borde del velo y el
     recorte de la foto caen en píxeles distintos al estar el panel
     en una posición fraccionaria, y asoma una línea de foto sin
     velo. El panel recorta, así que el sangrado no se ve. */
  inset: -2px;
  z-index: 1;
  background:
    /* La fotografía dejó de ir ampliada al quitarle el desbordamiento, así
       que el sujeto se ve entero y compite con las tarjetas: el velo
       cierra un punto más por la derecha. */
    linear-gradient(90deg, rgb(var(--velo) / 0.94) 0%, rgb(var(--velo) / 0.88) 44%, rgb(var(--velo) / 0.8) 100%),
    linear-gradient(0deg, rgb(var(--velo) / 0.62) 0%, rgb(var(--velo) / 0) 50%);
}

/* Sólo el contenido sube de capa. Con un selector genérico sobre todos
   los hijos, el anillo decorativo —que es absoluto— pasaba a ser un
   item más del flex y estiraba el panel de 1440 a 2266 px. */
.directo__intro, .canales,
.sedes-cierre__intro, .sedes-cierre .mapa, .ciudades--cierre {
  position: relative;
  z-index: 2;
}

.sedes-cierre .cierre__anillo { z-index: 2; }

@media (max-width: 899px) {
  /* Ya no hace falta: no sobresale en ningún tamaño. */
  .directo__velo, .sedes-cierre__velo {
    background: linear-gradient(180deg, rgb(var(--velo) / 0.72) 0%, rgb(var(--velo) / 0.94) 26%, rgb(var(--velo) / 0.97) 100%);
  }
}