/* ==========================================================================
   MP Travel Services — Contacto
   --------------------------------------------------------------------------
   El formulario de cotización con su desplegable de destinos hecho a mano, la
   ficha de datos y el cierre de la página.

   Solo la carga `contacto.html`. Ojo: `.datos` y `.dato` NO están acá sino en
   `paginas.css`, porque el reglamento y la política de datos también los usan.

   Los tokens, el vidrio y los botones vienen de `base.css`.
   ========================================================================== */

/* ==========================================================================
   CONTACTO
   ========================================================================== */
/* La ficha de datos y el formulario eran dos paneles de vidrio, uno al lado
   del otro. Ahora son dos bloques de página apoyados en una regla de latón con
   el rombo encima: la misma receta de las tarjetas, de los pilares de Nosotros
   y de los apartados legales. Sin caja, el aire entre columnas alcanza para
   separarlos y el texto se alinea con el resto de la página. */
/* Sin `margin-inline:auto` ni ancho máximo a propósito: `.cta` es una celda
   de la rejilla de `.contacto-lado`, y un margen automático en una celda deja
   de estirarla y la encoge hasta el ancho de su contenido. Con la caja de
   vidrio no se notaba; sin ella, la ficha quedaba angosta y centrada mientras
   el formulario, encima, ocupaba todo el ancho. */
.cta{
  position:relative;padding:var(--space-4) 0 0;text-align:left;
  border-top:1px solid var(--acento-tenue);
}

.cta::before{
  content:"";position:absolute;top:0;left:0;
  width:7px;height:7px;
  transform:translate(0,-50%) rotate(45deg);
  background:var(--acento);opacity:.8;
  box-shadow:0 0 0 5px var(--bg);
}

.cta > p{margin:0 0 var(--space-5);max-width:38ch;color:var(--text-mut)}

/* Sin caja que centre, los datos se alinean a la izquierda también en
   celular: el rombo y la regla marcan el margen y todo cuelga de ahí. */
.cta .datos{margin-top:var(--space-5);text-align:left}

/* ==========================================================================
   FORMULARIO DE COTIZACIÓN
   ========================================================================== */
/* El único bloque del sitio que sigue encerrado: la cotización es lo que se
   viene a hacer acá, y la caja la separa del resto de la página. Adentro no
   cambia nada —la regla de latón, el rombo y los campos subrayados son los
   mismos—: lo que se agrega es el marco. */
.formulario{
  width:100%;max-width:720px;margin-inline:auto;
  padding:var(--space-6);
}

/* Sin regla ni rombo: el marco de la caja ya separa este bloque del resto de
   la página, y una línea más adentro era una raya de sobra. */
.formulario h2{
  margin:0;font-family:var(--font);font-weight:400;
  font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.01em;
}

.formulario-intro{
  margin:var(--space-2) 0 var(--space-5);
  color:var(--text-mut);font-size:var(--t-apoyo);max-width:52ch;
}

/* Dos columnas en pantalla ancha, una sola en celular */
.campos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0 var(--space-4);
}

.campo{margin:0 0 var(--space-4)}

.campo label{
  display:block;margin-bottom:var(--space-2);
  font-size:var(--t-rotulo);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-soft);
}

/* El campo es un renglón sobre una raya, no una cajita rellena. Es como se
   llena un formulario en papel, y sin fondo ni borde alrededor el formulario
   deja de parecer una pila de casillas. La raya se pone de latón y engorda al
   enfocar: el `box-shadow` es la segunda mitad de esa raya —crecer el borde de
   verdad movería el campo un píxel. */
.campo input,.campo textarea,.campo select{
  width:100%;padding:.6rem 0;
  font-family:var(--font);font-size:1rem;color:var(--text);
  background:transparent;border:0;border-bottom:1px solid var(--hair);border-radius:0;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

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

.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;border-bottom-color:var(--acento);
  box-shadow:0 1px 0 var(--acento);
}

/* Solo se pinta de rojo lo que la persona ya tocó y dejó mal: marcar en rojo
   un formulario recién abierto es hostil. */
.campo input:user-invalid,.campo textarea:user-invalid{border-bottom-color:#B4232A}

/* Campo marcado como incorrecto tras intentar enviar */
.campo-mal,.campo input.campo-mal,.campo textarea.campo-mal{
  border-bottom-color:#B4232A;box-shadow:0 1px 0 #B4232A;
}

/* Sobre un cuadradito de 18px el filete rojo de arriba no se ve: en las
   casillas el aviso tiene que ser un contorno. */
.campo-marca input.campo-mal{outline:2px solid #B4232A;outline-offset:2px}

/* Contador del mensaje */
.contador{
  display:block;margin-top:var(--space-2);text-align:right;
  font-size:.8rem;color:var(--text-soft);
}

.contador.lleno{color:#B4232A}

/* --------------------------------------------------------------------------
   Desplegable de destinos hecho a mano.

   El <select> del sistema no se puede maquetar —la lista la dibuja el sistema
   operativo—, así que se esconde y el JS pone encima este botón con su lista.
   El <select> sigue existiendo: es el que guarda el valor y el que viaja en
   el envío. Si el JS no corre, `.selector-escondido` nunca se aplica y el
   desplegable de siempre queda a la vista.
   -------------------------------------------------------------------------- */
.selector{position:relative}

.selector-escondido{display:none}

.selector-boton{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  width:100%;padding:.6rem 0;
  font-family:var(--font);font-size:1rem;color:var(--text);text-align:left;
  background:transparent;border:0;border-bottom:1px solid var(--hair);border-radius:0;
  cursor:pointer;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

.selector-boton.vacio{color:var(--text-soft)}

.selector-boton:hover{border-bottom-color:var(--text-soft)}

.selector-boton:focus-visible{
  outline:none;border-bottom-color:var(--acento);box-shadow:0 1px 0 var(--acento);
}

.selector-boton::after{
  content:"";flex:none;width:8px;height:8px;margin-right:2px;
  border-right:1.5px solid var(--text-soft);
  border-bottom:1.5px solid var(--text-soft);
  transform:translateY(-3px) rotate(45deg);
  transition:transform .25s var(--ease-out);
}

.selector-boton[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}

.selector-lista{
  /* Por encima del flotante de WhatsApp (z 60), que si no se le monta encima;
     por debajo del panel lateral de celular (z 75). */
  position:absolute;z-index:70;top:calc(100% + 6px);left:0;right:0;
  max-height:264px;overflow-y:auto;
  margin:0;padding:var(--space-2);list-style:none;
  background:var(--panel);
  border:1px solid var(--hair);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
}

.selector-opcion{
  padding:.6rem .7rem;border-radius:calc(var(--r-md) - 6px);
  font-size:var(--t-apoyo);cursor:pointer;
}

/* `.activa` es el resaltado del teclado; el hover hace lo mismo con el mouse */
.selector-opcion:hover,.selector-opcion.activa{background:var(--glass-2)}

.selector-opcion[aria-selected="true"]{font-weight:700}

/* La primera opción es el "Elegí una opción…": se muestra apagada */
.selector-opcion:first-child{color:var(--text-soft)}

.campo-marca{
  display:flex;align-items:flex-start;gap:var(--space-3);
  margin:0 0 var(--space-5);
}

.campo-marca input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--text)}

.campo-marca label{font-size:.94rem;color:var(--text-mut);line-height:1.5}

/* El asterisco de obligatorio, del mismo latón que el resto de las marcas del
   sitio. En los tres campos de arriba se lee solo porque va pegado a una
   etiqueta corta; acá cierra una frase de dos renglones, así que necesita el
   color para no perderse en el punto final. */
.campo-marca label span{color:var(--acento);font-weight:700}

.campo-marca a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--hair)}

.campo-marca a:hover{border-bottom-color:var(--text)}

/* --- Asistencia al viajero: los planes -------------------------------------
   Las píldoras de planes, con el mismo perfil que las de `asistencia.html`
   pero en la paleta del sitio: acá el formulario es de MP Travel y el color de
   assisto empieza en su propia página.

   El grupo va dentro de un filete de latón, que es lo que en el resto del
   sitio señala "esto es de la casa". Sin caja de color ni vidrio: eso lo
   convertiría en un anuncio metido en el formulario.
   ------------------------------------------------------------------------ */
.planes-campo{
  margin:0 0 var(--space-5);
  padding:var(--space-3) var(--space-4) var(--space-4);
  border:1px solid var(--acento-tenue);
  border-radius:var(--r-md);
}

/* El navegador le da al legend un tamaño y un color propios; acá se lo trata
   como el rótulo del grupo, con la misma voz que los demás. */
.planes-campo legend{
  padding:0 var(--space-2);margin-left:calc(var(--space-2) * -1);
  font-size:var(--t-rotulo);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--acento);
}

/* "(opcional)" en minúscula y sin interletraje: es una aclaración, no parte
   del rótulo, y tiene que poder leerse de un vistazo. */
.planes-campo legend span{
  font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--text-soft);
}

.planes-intro{
  margin:0 0 var(--space-3);
  font-size:var(--t-pie);line-height:1.6;color:var(--text-mut);
  text-wrap:pretty;
}

.planes-intro b{color:var(--text)}

.planes-intro a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--acento)}

.planes-intro a:hover{border-bottom-color:var(--text)}

/* El nombre de cada familia. Es lo que separa "para un viaje" de "Expat", que
   son productos distintos y no dos tramos de la misma escalera. */
.planes-familia{
  margin:var(--space-3) 0 var(--space-2);
  font-size:var(--t-rotulo);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-soft);
}

.planes{
  display:flex;flex-wrap:wrap;gap:var(--space-2);
  margin:0;padding:0;list-style:none;
}

/* El radio se esconde de la vista pero NO con `display:none`: así conserva el
   foco y el grupo se sigue recorriendo con las flechas, que es como se recorre
   un grupo de radios. Lo que se ve —y lo que recibe el clic— es la etiqueta. */
.planes input{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

.planes label{
  display:block;
  padding:var(--space-2) var(--space-4);
  border:1px solid var(--hair);border-radius:var(--r-pill);
  font-size:var(--t-apoyo);font-weight:600;
  white-space:nowrap;cursor:pointer;
  transition:border-color .2s var(--ease-out), background-color .2s var(--ease-out),
             color .2s var(--ease-out);
}

.planes label:hover{border-color:var(--acento);color:var(--text)}

/* Elegido: relleno de tinta. Es el único estado que se lee de lejos, y hace
   falta que se lea —es la respuesta a la pregunta del grupo—. */
.planes input:checked + label{
  background:var(--text);border-color:var(--text);color:#fff;
}

/* El foco se dibuja sobre la etiqueta porque el radio es invisible: sin esto,
   quien va con el teclado no sabe dónde está parado. */
.planes input:focus-visible + label{outline:2px solid var(--acento);outline-offset:3px}

/* --- Lo que cuelga de la píldora de recomendación --------------------------
   Los diez planes y la pregunta de "ya tengo el viaje" solo aparecen cuando
   hay asistencia pedida. Con "Sin asistencia" elegida no hay nada que
   preguntar, y diez píldoras a la vista cargaban el formulario más que todos
   los datos de contacto juntos.

   LO ABRE EL CSS Y NO EL JS. La regla mira si el radio de "Sin asistencia"
   está elegido; si no lo está, el bloque se ve. Con el JavaScript apagado
   funciona igual, que es lo que un formulario tiene que hacer.

   El `@supports` es el que decide el fallo: donde no haya `:has()` no se
   aplica NINGUNA de las dos reglas y los planes quedan siempre a la vista.
   Más cargado, sí; pero visible y elegible. Al revés —esconderlos por defecto
   y no poder abrirlos— serían diez opciones inalcanzables.
   ------------------------------------------------------------------------ */
@supports selector(:has(*)){
  .planes-detalle{display:none}

  .planes-campo:has(#p-ninguno:not(:checked)) .planes-detalle{display:block}
}

/* La primera familia se apoya en las píldoras de arriba, no flota. */
.planes-detalle .planes-familia:first-child{margin-top:var(--space-4)}

/* --- "Solo la asistencia" -------------------------------------------------
   Sangrada y colgando de un filete vertical: se lee como una consecuencia de
   lo de arriba y no como una pregunta nueva que apareció sola.
   ------------------------------------------------------------------------ */
.campo-solo{
  margin:var(--space-4) 0 0;
  padding-left:var(--space-3);
  border-left:2px solid var(--acento-tenue);
}

.campo-solo label{color:var(--text)}

/* El campo trampa: fuera de la vista pero no con display:none, que algunos
   robots detectan y saltean. */
.trampa{
  position:absolute;left:-9999px;width:1px;height:1px;
  overflow:hidden;margin:0;
}

.formulario .btn{width:100%;justify-content:center}

.formulario-aviso{
  margin:var(--space-4) 0 0;padding:var(--space-3) var(--space-4);
  border-radius:var(--r-md);font-size:.95rem;
}

.formulario-aviso.enviando{background:var(--glass-2);color:var(--text-mut)}

.formulario-aviso.bien{background:rgba(28,110,64,.10);color:#1C6E40}

.formulario-aviso.mal{background:rgba(180,35,42,.09);color:#B4232A}

@media (max-width:560px){
  .formulario{padding:var(--space-4)}
}

/* Cierre de la página de Contacto: una sola frase, sin caja */
.cierre{
  max-width:52ch;margin:0;
  color:var(--text-mut);font-size:var(--t-apoyo);text-wrap:pretty;
}

.cierre-enlaces{margin-top:var(--space-3);font-size:.94rem}

.cierre-enlaces a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--hair)}

.cierre-enlaces a:hover{border-bottom-color:var(--text)}

/* --- Base compartida ------------------------------------------------------
   Estas dos sí valen en las dos maquetas: en celular apilan, y en escritorio
   el bloque de abajo las convierte en columnas. */
.contacto-doble{display:grid;gap:var(--space-6)}

.contacto-lado{display:grid;gap:var(--space-6)}

/* --- Escritorio ---------------------------------------------------------
   Por qué el corte va en 960px de ancho y no por tipo de puntero: ver la
   cabecera de base.css. En resumen, es lo que hace que el "Sitio de
   escritorio" del celular reciba también esta maqueta.
   ----------------------------------------------------------------------- */
@media (min-width:960px){
  /* --- Contacto ------------------------------------------------------------
       El formulario y los datos dejan de ir uno debajo del otro. La columna de
       la derecha queda fija mientras se llena el formulario, así el correo y el
       WhatsApp siguen a la vista todo el rato.
       En celular esto no aplica: se apilan en el mismo orden de siempre. */
  .contacto-doble{
      grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
      align-items:start;gap:clamp(32px,3.4vw,56px);
    }
  .contacto-doble .formulario{max-width:none;margin:0;padding:clamp(28px,3vw,56px)}
  /* Sigue siendo `auto-fit`, pero con el mínimo bajado de 240 a 215px. Con
       240 la columna del formulario se quedaba a unos pocos píxeles del corte y
       los cuatro campos caían apilados, que es justo la maqueta de celular. Con
       215 pasan a dos columnas a partir de ~1180px de pantalla, donde cada campo
       mide 232px y `CORREO ELECTRÓNICO *` entra en un renglón. Fijarlas en dos
       no servía: por debajo de eso los campos quedaban de 178px y todas las
       etiquetas se partían en dos líneas.
       `align-items:end` es el seguro: si alguna etiqueta llegara a partirse, los
       campos de esa fila siguen terminando en la misma raya en vez de quedar
       escalonados. */
  .contacto-doble .campos{
      grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
      align-items:end;
    }
  /* El botón a ancho completo tiene sentido en un formulario de 720px; en uno
       de 640 en columna se lee como una barra. */
  .contacto-doble .formulario .btn{width:auto;min-width:240px}
  /* El header es sticky: lo que queda fijo tiene que arrancar por debajo. */
  .contacto-lado{position:sticky;top:calc(var(--alto-header) + var(--space-5))}
  .contacto-lado .cta{margin:0;padding:var(--space-5) 0 0}
  .contacto-lado .cta > p{margin:0 0 var(--space-6);max-width:none}
  .contacto-lado .datos{grid-template-columns:1fr;gap:var(--space-5);margin-top:var(--space-6)}
  /* Solo el margen horizontal: con un `margin:0` se llevaba por delante el
       `margin-top` de `.cierre-enlaces` y los dos párrafos quedaban pegados. */
  .contacto-lado .cierre{max-width:none}
}