/* contacto.css - El apartado CONTACT (15-08-2026).

   Alicia quito su correo de la web -un correo a la vista se llena de
   spam- y en su lugar va este formulario, para que se le pueda escribir
   sin enseñar la direccion.

   DISEÑO: solo el formulario, centrado en la pantalla, y nada mas
   (peticion de Juan: "solo vamos a poner en el centro un formulario,
   que solo se vean esas mismas barras con esos mismos asuntos"). Ni
   titulo ni texto de presentacion: el apartado ya se llama CONTACT en
   el menu.
   Los campos son BARRAS: sin recuadro, solo una linea fina debajo, del
   mismo gris claro que el resto de separadores de la web (la rayita del
   titulo de los reportajes, el subrayado de los apartados del CV...).
   Al escribir en uno, su linea se pone negra: es el unico "adorno". */

#contacto {
  /* Igual que About: cabe en una pantalla, sin desplazar la pagina. El
     margen de arriba deja pasar los dos iconos de la barra. */
  padding-top: var(--nav);
  min-height: 100vh;
  min-height: 100dvh;
}
/* EL CENTRADO VA EN ".active", NO EN "#contacto" A SECAS (v6.5). Este
   es un fallo que se colo en la v6.3 y hay que tener cuidado de no
   repetirlo: las secciones se esconden con "section { display: none }"
   y solo se enseña la activa. Un "display" puesto en "#contacto"
   -selector de ID- GANA a esa regla por ser mas concreto, asi que el
   formulario se quedaba visible SIEMPRE, colgando debajo del mosaico
   de la portada. Y como ademas iba antes que los textos legales en la
   pagina, al pulsar "privacy policy" se llegaba al sitio pero la
   pantalla se quedaba enseñando el formulario, y habia que bajar a
   mano hasta el texto (los tres avisos de Juan, 15-08-2026, eran este
   mismo fallo).
   Poniendolo en "#contacto.active" solo manda cuando la seccion esta
   de verdad abierta. */
#contacto.active {
  display: flex;
  align-items: center;      /* centrado tambien en vertical */
  justify-content: center;
}

.contacto-wrap {
  width: 100%;
  max-width: 460px;
  padding: 0 var(--pad) 60px;
}

/* ---- LOS CAMPOS ---- */

.campo { margin-bottom: 30px; }

/* El nombre del campo, encima de su barra. Pequeño y en mayusculas,
   como los titulos de apartado del CV: es la misma familia de
   "etiquetas" de la web. */
.campo-etiqueta {
  display: block;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 8px;
}

.campo-control {
  display: block;
  width: 100%;
  /* Hereda la tipografia del sitio: los campos de formulario NO la
     heredan solos, cada navegador les pone la suya si no se le dice */
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  color: var(--negro);
  background: none;
  border: none;
  border-bottom: 1px solid var(--gris-claro);
  border-radius: 0;         /* Safari de iPhone redondea los campos solo */
  padding: 6px 0;
  transition: border-color .25s ease;
  -webkit-appearance: none; /* fuera el estilo propio de iOS */
          appearance: none;
}
/* Al escribir, su linea se oscurece. Sin "outline" del navegador:
   la propia linea negra ya dice donde estas escribiendo. */
.campo-control:focus {
  outline: none;
  border-bottom-color: var(--negro);
}
.campo-area {
  /* SIN TIRADOR (peticion de Alicia, 24-08-2026: "¿se pueden quitar las
     3 lineas que aparecen en la esquina inferior derecha?"). Era el
     agarre para estirar el campo, que el navegador dibuja solo cuando
     se permite redimensionar; en una pagina tan sobria cantaba.
     No se pierde nada: el campo se desplaza por dentro segun se
     escribe, asi que se puede escribir todo lo que haga falta. */
  resize: none;
  min-height: 90px;
  line-height: 1.6;
}

/* Un campo mal rellenado (lo marca controller.js al enviar, no el
   navegador: asi el aviso sale en su sitio y no en un globo del
   sistema) */
.campo-control.mal { border-bottom-color: #c0392b; }

/* LA TRAMPA PARA ROBOTS: invisible para las personas pero SIN
   "display:none" ni "visibility:hidden", que es lo primero que miran
   los programas de spam para saltarsela. Se saca de la pantalla. */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---- EL BOTON ---- */

/* Sin recuadro, sin fondo y SIN FLECHA: solo la palabra, en
   mayusculas. Nacio con la tipografia del menu y una flechita al lado
   (peticion de Juan, 15-08-2026) y Alicia lo dejo el 24-08 en solo la
   palabra, con la tipografia del "PHOTOGRAPHY" de la portada. */
.contacto-enviar {
  /* "display:flex" (bloque) en vez de "inline-flex": asi el boton no
     ocupa todo el ancho pero SI es un bloque propio, y "margin-left:auto"
     puede empujarlo al lado contrario dentro del formulario (peticion de
     Alicia, 21-08-2026: "poner el send al otro lado, a la derecha, en el
     opuesto de donde esta"). Con inline-flex ese margen no tiene efecto:
     un elemento en linea no se desplaza dentro de su propio renglon. */
  display: flex;
  align-items: center;
  margin-top: 4px;
  margin-left: auto;
  padding: 0;
  /* LA TIPOGRAFIA DEL "PHOTOGRAPHY" DE LA PORTADA (peticion de Alicia,
     24-08-2026), no la del menu que llevaba antes: la de palo del
     sitio, en mayusculas y con su mismo interletraje. Ver
     .marca-subtitulo en trabajos.css. */
  font-family: var(--sans);
  /* SIN NEGRITA. La llevo tres dias: se le puso el 25-08-2026 porque
     "el SEND no se ve nitido", y Alicia la retira el 28 -"quitamos las
     negritas a SEND manteniendo todo lo demas; en la version movil ese
     SEND se ve perfecto, sin negrita"-. Se queda el resto tal cual:
     tipografia de palo, mayusculas, 13px y su interletraje. */
  text-transform: uppercase;
  /* TAMAÑO CONTENIDO (v6.8): en su dia crecia con la pantalla y se
     convertia en lo mas grande del formulario ("muy grande, desentona
     mucho", Juan). Estos 13px son ademas los del "PHOTOGRAPHY" que
     Alicia puso de referencia. */
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--negro);
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity .25s ease;
  -webkit-appearance: none;
          appearance: none;
}
/* Se aclara al pasar el raton, como los demas mandos de la web. Solo
   con raton de verdad: en tactil el ":hover" se queda pegado tras tocar
   (mismo motivo que en .nav-icon, ver nav.css). */
@media (hover: hover) and (pointer: fine) {
  .contacto-enviar:hover { opacity: .55; }
}
.contacto-enviar:focus-visible { outline: 1px solid var(--negro); outline-offset: 4px; }
/* Mientras se esta enviando: apagado y sin poder pulsar otra vez */
.contacto-enviar[disabled] { opacity: .4; cursor: default; }

/* ---- EL AVISO DE "ENVIADO" / "NO SE HA PODIDO" ---- */

.contacto-aviso {
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gris);
  min-height: 1em;          /* reserva su sitio: al aparecer no empuja nada */
}
.contacto-aviso.bien { color: var(--negro); }
.contacto-aviso.mal  { color: #c0392b; }

/* En esta seccion el pie sobra, igual que en About: aqui no hay fotos
   de las que declarar derechos y ademas obligaria a desplazar la
   pagina. */
body:has(#contacto.active) .pie { display: none; }

/* ---- EL CONSENTIMIENTO ---- */

/* Va mas pegado al boton que el resto de campos: son un mismo gesto
   (acepto y envio), no un campo mas que rellenar. */
.campo-acepto { margin-bottom: 22px; }

.acepto {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.55;
  color: var(--gris);
}
/* La casilla de verdad se esconde (cada navegador y cada sistema la
   pinta a su manera, y desentonaba con una web tan sobria), pero SIN
   quitarla: se saca de la vista y se dibuja una propia al lado. Asi
   sigue funcionando el teclado y los lectores de pantalla. */
.acepto input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
/* La casilla dibujada: un cuadradito de la misma linea fina que las
   barras de los campos. */
.acepto-marca {
  flex-shrink: 0;
  width: 14px; height: 14px;
  margin-top: 2px;
  border: 1px solid var(--gris-claro);
  transition: border-color .2s ease, background .2s ease;
  position: relative;
}
/* Marcada: se rellena de negro y aparece la "uve" en blanco, dibujada
   con dos lados de un cuadrado girado (no hace falta ninguna imagen). */
.acepto input:checked + .acepto-marca {
  background: var(--negro);
  border-color: var(--negro);
}
.acepto input:checked + .acepto-marca::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
/* Con el teclado (Tab) se ve donde esta el foco, ya que la casilla de
   verdad es invisible */
.acepto input:focus-visible + .acepto-marca {
  outline: 1px solid var(--negro);
  outline-offset: 2px;
}
/* El enlace a la politica de privacidad, subrayado fino como el resto
   de enlaces de texto de la web */
.acepto-texto a {
  color: var(--negro);
  border-bottom: 1px solid var(--gris-claro);
  transition: border-color .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .acepto-texto a:hover { border-bottom-color: var(--negro); }
}

/* ============================================================
   MOVIL EN HORIZONTAL (23-08-2026). "Cabe en una pantalla" (v6.0)
   funciona en escritorio y en movil vertical, donde sobra alto de
   sobra, pero en un telefono en horizontal la pantalla es tan baja
   que el formulario NO cabia: aviso de Alicia, "¿se puede quitar la
   barra superior blanca para que, a simple golpe de vista, veas todo
   el formulario?".
   LA "BARRA BLANCA" NO ERA SOLO LA BARRA: medido en el movil de
   Alicia (812x375), la barra de arriba mide de verdad 56px de alto
   -ya reducida para este caso, ver body.sin-marca nav en sobre.css-,
   pero #contacto reservaba el "padding-top: var(--nav)" de siempre
   (108px, el de escritorio: en movil horizontal no se redefine la
   variable --nav, solo se encoge la barra por su cuenta). Quedaban
   52px de bache en blanco, ni barra ni formulario, solo hueco muerto.
   Y aun quitando ese bache, el formulario entero (campos + casilla +
   boton) mide bastante mas que lo que sobra en una pantalla de 375px
   de alto: hay que apretar tambien sus propios espacios.
   Mismos dos criterios que en sobre.css para reconocer este caso
   (telefono ancho en horizontal, que por ancho pasaria por escritorio
   sin el segundo criterio). */
@media (max-height: 480px) and (orientation: landscape) {
  /* Empieza justo donde termina la barra (56px, ver arriba), sin
     bache: no hace falta restarle nada de mas porque aqui no hay
     retrato ni nombre con los que alinearse, solo el formulario. */
  #contacto { padding-top: 56px; }

  /* Y SI AUN ASI NO CABE, QUE SE PUEDA LLEGAR AL BOTON (aviso de Juan,
     23-08-2026: "en mi movil, en horizontal, no se ve el boton
     enviar"). Aqui habia DOS problemas, y el segundo es el grave:
       1) La altura util de un movil en horizontal es bastante menor
          que la de la ventana emulada -el navegador se come lo suyo
          con su barra-, asi que lo que cabia en la prueba no tiene por
          que caber en el telefono de verdad. Por eso los espacios de
          abajo se aprietan mas todavia.
       2) La seccion centra su contenido con flex (align-items:center).
          CUANDO EL CONTENIDO NO CABE, ese centrado lo desborda POR LOS
          DOS LADOS y la parte que se sale por arriba NO SE PUEDE
          ALCANZAR desplazandose: el scroll no llega ahi. Es un fallo
          conocido del centrado con flex.
     "safe center" lo resuelve: centra mientras quepa y, en cuanto no
     cabe, se comporta como si estuviera alineado arriba, con lo que
     todo el formulario queda accesible desplazandose. El overflow-y
     es lo que le da ese desplazamiento. */
  #contacto { overflow-y: auto; }
  #contacto.active { align-items: safe center; }

  .contacto-wrap { padding-bottom: 16px; }
  /* Los mismos campos, con menos aire entre ellos: es lo que de
     verdad devuelve el hueco que hacia falta, mas que el bache de la
     barra. */
  .campo { margin-bottom: 8px; }
  .campo-etiqueta { margin-bottom: 2px; font-size: 9px; }
  .campo-control { padding: 2px 0; font-size: 13px; }
  /* El mensaje es el campo mas alto con diferencia (rows=5 en el
     HTML): aqui se recorta a poco mas de una linea. Sigue siendo
     "resize:vertical", asi que quien necesite escribir mas lo puede
     alargar el mismo tirando de la esquina, y en cualquier caso el
     campo se desplaza por dentro segun se escribe. */
  .campo-area { min-height: 26px; line-height: 1.35; }
  .campo-acepto { margin-bottom: 8px; }
  .acepto { font-size: 10.5px; line-height: 1.35; }
  .contacto-enviar { margin-top: 0; font-size: 14px; }
  /* Deja de reservar su renglon en blanco: solo ocupa sitio cuando de
     verdad hay un aviso que enseñar (aqui cada pixel cuenta). */
  .contacto-aviso { margin-top: 6px; min-height: 0; }
}