/* ============================================================
   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;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.86) 60%, rgba(0, 0, 0, 0.8) 100%);
}

/* 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: var(--flow-lg);
  padding: var(--flow-lg);
  border-radius: var(--radio);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 8, 7, 0.62);
  backdrop-filter: blur(18px) saturate(130%);
}

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

.form__intro h2 { font-size: clamp(1.5rem, 2.4vw, 2.4rem); }

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

.form {
  display: flex;
  align-items: stretch;
  gap: var(--flow-lg);
}

.form__grupo {
  flex: none;
  width: min(30ch, 22vw);
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  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 {
  width: min(44ch, 31vw);
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-md);
}

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

.form__cierre {
  flex: none;
  width: min(24ch, 17vw);
  display: grid;
  align-content: center;
  gap: var(--space-sm);
}

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

.campo { display: grid; gap: 5px; }

.campo label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
}

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

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem var(--space-sm);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--tinta);
  font-family: var(--texto-font);
  font-size: 0.92rem;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.campo textarea { min-height: 96px; resize: vertical; line-height: 1.4; }

.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.07);
}

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

/* --- Errores --- */
.campo__error {
  font-size: 0.74rem;
  color: var(--error);
}

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

.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 h2 { font-size: clamp(1.5rem, 2.5vw, 2.6rem); }
.directo__intro .pill { justify-self: start; }

.canales {
  flex: none;
  width: min(46vw, 620px);
  list-style: none;
  display: grid;
  gap: var(--space-md);
}

.canal a {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  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: translateX(4px); }

.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;
}

.sedes-cierre__intro h2 { font-size: clamp(1.5rem, 2.5vw, 2.6rem); }

.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) {
  .ficha-form { padding: var(--flow-md); gap: var(--flow-md); }
  .form { gap: var(--flow-md); }
  .form__intro { width: min(23ch, 18vw); gap: var(--space-sm); }
  .form__intro h2 { font-size: clamp(1.3rem, 2.1vw, 1.9rem); }
  .form__intro .lead { font-size: 0.88rem; }
  .form__grupo { gap: var(--space-xs); }
  .campo input, .campo select { min-height: 40px; padding-block: 0.4rem; }
  .campo textarea { min-height: 72px; }
  .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; }

/* max-width: 100% de base.css recortaba el 116% y dejaba una franja
   sin fotografía en el borde derecho del panel. */
.directo__media img, .sedes-cierre__media img {
  max-width: none;
  width: 116%;
  height: 100%;
  margin-left: -8%;
  object-fit: cover;
  filter: grayscale(0.5) contrast(1.06) brightness(0.4);
}

.directo__velo, .sedes-cierre__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(var(--velo) / 0.94) 0%, rgb(var(--velo) / 0.86) 44%, rgb(var(--velo) / 0.68) 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) {
  .directo__media img, .sedes-cierre__media img { width: 100%; margin-left: 0; }
  .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%);
  }
}