/* ═══════════════════════════════════════════════════════════════
   CONTACTO — partials/contacto.php y partials/contacto-form.php

   Dos bloques, y en este orden a propósito:

     1. El titular y la rejilla de datos. Quien ya sabe a quién escribir
        no debería tener que llenar un formulario para hacerlo: el
        correo, el teléfono y el WhatsApp están arriba, a la vista.
     2. El formulario, para quien no sabe por dónde empezar.

   Poner el formulario primero invierte eso y obliga a bajar a quien
   solo venía a copiar una dirección.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Solo colores NUEVOS. Los del tema —--bg, --tinta, --acento— salen
     de base.css y no se tocan desde aquí: repintarlos en una hoja de
     página es cómo el nav acaba de un color distinto en cada sección,
     que es el problema del que venía este sitio. */
  /* El MISMO gris de las píldoras de la FAQ, y por la misma razón: los
     dos primeros intentos (#f1efec aquí, --card2 allí) llevaban
     amarillo dentro y sobre una superficie grande se leían tostados.
     Sale de --gris, en base.css, para que no vuelvan a separarse.

     Y es la misma pareja que usa la FAQ —gris de fondo, blanco
     encima—: allí la píldora es gris y el círculo blanco; aquí el
     panel es gris y los campos blancos. */
  --cf-panel:  var(--gris);
  --cf-campo:  #ffffff;
  --cf-figura: #ece8f4;   /* el fondo de la figura, lila muy lavado */

  /* EL FORMULARIO NO USA --acento. El naranja del sitio, extendido a un
     botón grande y a los bordes de cinco campos, se comía la sección
     entera: en el resto de las páginas es un toque —un enlace, una
     palabra— y aquí pasaba a ser el color dominante. Va en grises, que
     además es lo que hace que un formulario parezca de estudio y no de
     promoción. El acento sigue vivo en el resto del sitio. */
  --cf-boton:    #26221f;   /* el gris más oscuro, casi la tinta */
  --cf-boton-on: #4a443f;   /* al pasar por encima, un punto más claro */
  --cf-foco:     #9a938c;   /* el borde del campo enfocado */
  --cf-foco-halo: rgba(38, 34, 31, .10);

  /* El rojo y el verde SÍ se quedan: no son decoración. Un error en
     gris no se distingue de una instrucción, que es justo lo que un
     mensaje de error no puede permitirse. */
  --cf-mal:    #c0432c;
  --cf-bien:   #2c6e52;
}


/* ═══════════════════════════════════════════════════════════════
   1. El titular y la rejilla
   ═══════════════════════════════════════════════════════════════ */

.ct {
  background: var(--bg);
  padding: clamp(80px, 14vh, 170px) var(--hd-pad) clamp(40px, 6vh, 80px);
}

.ct-dentro {
  max-width: var(--ancho-max);
  margin: 0 auto;
}

/* El titular ocupa la fila entera y no una columna: a este tamaño,
   metido en media pantalla, saldrían renglones de una palabra. */
.ct-titular {
  font-size: clamp(52px, 11vw, 168px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .92;
  color: var(--tinta-alta);
  margin-bottom: clamp(48px, 11vh, 150px);
}

.ct-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 90px);
  align-items: start;
}

/* El párrafo va grande y en peso medio: no es texto de relleno, es la
   frase que decide si alguien sigue leyendo. A tamaño de párrafo
   normal quedaría por debajo de los rótulos de la rejilla, que están
   en mayúsculas y pesan visualmente más de lo que miden. */
.ct-nota {
  max-width: 22ch;
  font-size: clamp(20px, 2.5vw, 38px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.24;
  color: var(--tinta-alta);
}

.ct-rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4.5vh, 56px) clamp(24px, 3.5vw, 60px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ct-rotulo {
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  margin-bottom: clamp(8px, 1.2vh, 14px);
}

.ct-lineas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ct-dato {
  display: inline-block;
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.45;
  color: var(--tinta-alta);
  text-decoration: none;
  /* Un correo largo en una columna estrecha se sale de la caja. Que
     parta por donde pueda antes que romper la rejilla. */
  overflow-wrap: anywhere;
}

/* El subrayado se dibuja aquí y no con text-decoration para poder
   separarlo del texto y encenderlo solo al acercarse; el del navegador
   va pegado a las letras y siempre visible. */
.ct-dato.es-enlace {
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .3s ease, border-color .3s ease;
}
.ct-dato.es-enlace:hover {
  color: var(--acento);
  border-bottom-color: var(--acento);
}


/* ═══════════════════════════════════════════════════════════════
   2. El formulario
   ═══════════════════════════════════════════════════════════════ */

.cf {
  background: var(--bg);
  padding: clamp(40px, 7vh, 90px) var(--hd-pad) clamp(70px, 12vh, 150px);

  /* Las dos mitades entran de lado (.reveal-izda y .reveal-dcha), y
     hasta que reveal.js las marca visibles arrancan desplazadas 64px.
     En escritorio no se nota porque sobra sitio; en el móvil la caja
     del formulario ya ocupa el ancho entero, así que esos 64px salían
     de la pantalla y aparecía una barra horizontal: la página se movía
     de lado y el texto se cortaba por la derecha.

     clip y no hidden: hidden en un solo eje obliga al otro a valer
     'auto', lo que convierte la sección en un contenedor de scroll y
     rompe cualquier position:sticky que se ponga dentro más adelante.
     clip recorta sin crear nada de eso. */
  overflow-x: clip;
}

.cf-dentro {
  max-width: var(--ancho-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 3.5vw, 64px);

  /* stretch, no start. Con 'start' cada columna medía lo suyo: la foto
     lo que le diera su aspect-ratio y la caja de campos lo que ocupara
     el formulario. Empezaban juntas arriba y terminaban a alturas
     distintas — se veía como un descuadre y lo era.

     Con stretch las dos ocupan el alto de la fila, y quien manda ese
     alto es la caja de campos, que es la que tiene contenido de verdad.
     La foto se estira hasta el mismo sitio. */
  align-items: stretch;
}

/* La columna izquierda reparte ese alto entre la foto y su párrafo: el
   párrafo ocupa lo que necesite y la foto se queda con TODO lo que
   sobre. Eso es lo que hace que su borde de abajo caiga exactamente
   donde el de la caja de al lado. */
.cf-lado {
  display: flex;
  flex-direction: column;
}


/* ── La figura ─────────────────────────────────────────────────── */
/* ESTE BLOQUE ESTABA HECHO PARA UNA ILUSTRACIÓN RECORTADA y ahora lleva
   una FOTOGRAFÍA. Cambió lo que sobraba de lo primero:

     padding        la ilustración flotaba dentro de un marco de hasta
                    64px. Una foto va a sangre; con relleno se ve como
                    una foto pegada encima de un rectángulo lila.
     contain→cover  contain la encajaba entera dejando franjas a los
                    lados. cover llena la caja y recorta lo que sobre,
                    que es lo que hace una foto.
     drop-shadow    despegaba la figura del fondo. Sobre una foto
                    rectangular no despega nada: solo emborrona el borde.

   El degradado se queda: es lo que se ve mientras la foto baja, y con
   loading="lazy" ese instante existe de verdad. Un hueco en blanco ahí
   parpadearía en cada carga. */
.cf-figura {
  /* CRECE HASTA LLENAR LA COLUMNA, y por eso ya no lleva aspect-ratio.
     Antes era 1/1 —cuadrada— y ese era el origen del descuadre: un
     cuadrado mide lo que mida el ancho de su columna, y no tiene por
     qué coincidir con lo que mide el formulario de al lado.

     Ahora el alto se lo da el formulario y la foto lo llena. Como va
     con object-fit: cover, le da igual la proporción que le toque.

     El min-height es el suelo: si algún día el formulario se acorta
     —menos campos, otra página que use este partial— la foto no puede
     quedarse en una tira. Por debajo de esa medida deja de estirarse y
     empuja ella. */
  flex: 1 1 auto;
  min-height: clamp(320px, 32vw, 560px);
  border-radius: clamp(20px, 2.2vw, 34px);
  background:
    radial-gradient(120% 100% at 30% 10%, #f6f4fb 0%, var(--cf-figura) 60%, #e2ddef 100%);
  overflow: hidden;
}

/* display: contents — el <picture> desaparece del diseño y el <img>
   pasa a ser hijo directo de su contenedor, que es lo que las reglas de
   abajo dan por hecho. Es la convención de este sitio; la estableció
   .pf-obra picture en css/portfolio.css. Aquí había tres líneas
   —display:block, width y height— haciendo lo mismo peor. */
.cf-figura picture { display: contents; }

.cf-figura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La caja es alta en escritorio y 16/9 en móvil, y la foto es 4:3: en
     los dos casos sobra por algún lado. Recortando desde el centro, la
     mesa y las cuatro personas se quedan siempre dentro. */
  object-position: center;

  /* ── EL MOVIMIENTO ──────────────────────────────────────────────
     Un Ken Burns: la foto se acerca muy despacio y deriva un poco,
     como una cámara que no termina de quedarse quieta. Es lo que
     convierte una fotografía fija en una imagen viva sin pedirle nada
     al visitante y sin una línea de JavaScript.

     LAS TRES DECISIONES QUE LO HACEN DISCRETO:

     24s. Un Ken Burns rápido marea y llama la atención sobre sí mismo;
     a este ritmo el movimiento no se ve mirándolo de frente, se nota
     al volver la vista y encontrar el encuadre cambiado.

     alternate. Va y vuelve, en vez de saltar al principio al terminar.
     Sin esto habría un tirón cada 24 segundos, que es exactamente lo
     que se ve y lo que no se perdona.

     Empieza en 1.06 y no en 1. Es lo que da margen para desplazarse:
     al 6% de acercamiento sobra un 3% por cada lado, y la deriva no
     llega ni a la mitad de eso. Arrancando en 1 exacto, el primer
     desplazamiento asomaría el borde del archivo. */
  animation: cf-deriva 24s ease-in-out infinite alternate;

  /* Le avisa al navegador de que esto se va a mover, para que le dé su
     propia capa y no repinte la caja entera en cada fotograma. */
  will-change: transform;
}

@keyframes cf-deriva {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.4%, -1.1%, 0); }
}

.cf-nota {
  margin-top: clamp(18px, 2.6vh, 30px);
  max-width: 40ch;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--tinta-alta);
}


/* ── La caja de campos ─────────────────────────────────────────── */
.cf-caja {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.3vh, 16px);
  padding: clamp(20px, 2.6vw, 40px);
  border-radius: clamp(20px, 2.2vw, 34px);
  background: var(--cf-panel);
}

.cf-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(10px, 1.2vw, 16px); }
.cf-fila-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cf-campo { min-width: 0; }

.cf-input {
  width: 100%;
  /* font: inherit y no una familia escrita: un <input> no hereda la
     tipografía del sitio por su cuenta, y sin esto los campos salen en
     la fuente del sistema y el formulario parece de otra página. */
  font: inherit;
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--tinta-alta);
  background: var(--cf-campo);
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: clamp(14px, 1.5vw, 19px) clamp(18px, 1.8vw, 26px);
  transition: border-color .25s ease, box-shadow .25s ease;
}

.cf-input::placeholder { color: var(--dim); }

.cf-input:focus {
  outline: none;   /* lo sustituye el borde de abajo, que se ve mejor sobre la píldora */
  border-color: var(--cf-foco);
  box-shadow: 0 0 0 4px var(--cf-foco-halo);
}

.cf-input.es-malo { border-color: var(--cf-mal); }
.cf-input.es-malo:focus { box-shadow: 0 0 0 4px rgba(192, 67, 44, .14); }

/* ── El desplegable de servicio ────────────────────────────────────
   Es un <select> de verdad, así que hay que quitarle la apariencia del
   sistema para que sea la misma píldora que los otros campos. La
   flecha se dibuja con un SVG de fondo porque la del navegador se va
   con appearance:none y no hay forma de estilarla. */
.cf-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;

  /* El SVG va incrustado y no en un archivo aparte: son 200 bytes, y
     un archivo más es una petición más para dibujar una flechita. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1714' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right clamp(16px, 1.6vw, 22px) center;
  background-size: 17px 17px;

  /* Sitio para la flecha: sin esto, una opción larga se le mete debajo. */
  padding-right: clamp(42px, 4vw, 54px);
}

/* Mientras no se elija nada, el <option> vacío deja el select en
   :invalid, y de ahí cuelga el gris de marcador de posición — el mismo
   que ::placeholder da a los demás campos. En cuanto se elige algo
   deja de ser :invalid y el texto pasa a tinta normal, solo. */
.cf-select:invalid { color: var(--dim); }

/* La lista desplegada la pinta el sistema y hereda el color de arriba:
   sin esto, en Windows las opciones salían grises sobre blanco. */
.cf-select option { color: var(--tinta-alta); }

.cf-area {
  border-radius: clamp(16px, 1.6vw, 24px);
  min-height: clamp(150px, 22vh, 240px);
  /* Solo a lo alto: a lo ancho se sale de la rejilla y descoloca la
     columna de la figura. */
  resize: vertical;
  line-height: 1.55;
}

/* El hueco del error solo existe cuando hay error: reservarlo siempre
   deja cuatro huecos vacíos entre campos y descuadra la caja. */
.cf-error {
  font-size: 13px;
  line-height: 1.4;
  color: var(--cf-mal);
}
.cf-error:empty { display: none; }


/* ── El pie: la suma y el botón ────────────────────────────────── */
.cf-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(6px, 1vh, 12px);
}

.cf-enviar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: inherit;
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 600;
  color: #fff;
  background: var(--cf-boton);
  border: none;
  border-radius: 999px;
  padding: clamp(14px, 1.5vw, 19px) clamp(28px, 2.8vw, 40px);
  cursor: pointer;
  transition: background .25s ease, transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
.cf-enviar:hover:not(:disabled) { background: var(--cf-boton-on); transform: translateY(-2px); }
.cf-enviar:disabled { opacity: .55; cursor: default; }

.cf-punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* Mientras espera, el punto late. Es la única señal de que algo está
   pasando en el segundo que tarda el servidor. */
.cf-enviar[aria-busy="true"] .cf-punto { animation: cf-late 1s ease-in-out infinite; }
@keyframes cf-late { 50% { opacity: .25; transform: scale(.7); } }


/* ── El aviso del resultado ────────────────────────────────────── */
.cf-aviso {
  margin-top: clamp(8px, 1.2vh, 14px);
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.cf-aviso.es-bueno { color: var(--cf-bien); background: rgba(44, 110, 82, .08); border-color: rgba(44, 110, 82, .22); }
.cf-aviso.es-malo  { color: var(--cf-mal);  background: rgba(192, 67, 44, .07); border-color: rgba(192, 67, 44, .22); }

.cf-alterna {
  margin-top: clamp(8px, 1.2vh, 14px);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
.cf-alterna a {
  color: var(--tinta-alta);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color .25s ease, border-color .25s ease;
}
.cf-alterna a:hover { color: var(--cf-boton); border-bottom-color: var(--cf-boton); }

/* Enviado: la caja se apaga entera. Los campos ya están disabled desde
   el JavaScript; esto es para que se vea que lo están. */
.cf-caja.es-enviado .cf-fila,
.cf-caja.es-enviado .cf-pie { opacity: .4; }


/* ── El campo trampa ───────────────────────────────────────────────
   Fuera de la pantalla, NO con display:none. Un bot medianamente hecho
   se salta lo que está oculto, pero llena todo lo que ve en el HTML;
   quien navega con teclado no llega porque lleva tabindex="-1". */
.cf-trampa {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   La página de resultado sin JavaScript (contact/enviar/)
   ═══════════════════════════════════════════════════════════════ */

.cf-resultado {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--nav-alto) + 120px) var(--pad) 160px;
}
.cf-resultado-titulo {
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  color: var(--tinta-alta);
  margin-bottom: 18px;
}
.cf-resultado-nota {
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta);
  margin-bottom: 24px;
}
.cf-resultado-lista {
  margin: 0 0 28px 20px;
  color: var(--cf-mal);
  font-size: 15px;
  line-height: 1.7;
}
.cf-resultado-volver {
  display: inline-block;
  font-size: 14px; font-weight: 500;
  color: var(--nav-cta-tinta); background: var(--nav-cta-bg);
  padding: 13px 26px; border-radius: 99px; text-decoration: none;
  transition: opacity .18s;
}
.cf-resultado-volver:hover { opacity: .82; }


/* ═══════════════════════════════════════════════════════════════
   Tamaños
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  /* Dos columnas a este ancho dejan el párrafo en renglones de dos
     palabras y la rejilla demasiado estrecha para un correo. Se
     apilan, y la rejilla queda debajo del texto que la presenta. */
  /* minmax(0, 1fr) y no 1fr a secas: un "1fr" pelado vale
     minmax(auto, 1fr), y ese 'auto' impide que la columna baje del
     ancho mínimo de su contenido. Un <textarea> trae 20 columnas de
     ancho intrínseco y un <input> otras tantas, así que la columna se
     niega a encoger y desborda la pantalla en vez de estrecharse. */
  .ct-cuerpo { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vh, 60px); }
  .ct-nota   { max-width: 30ch; }

  /* La figura pierde la mitad de la fila y pasa a ser una banda: a
     ancho completo y cuadrada ocuparía una pantalla entera de alto
     antes de que se vea un solo campo. */
  .cf-dentro { grid-template-columns: minmax(0, 1fr); }
  .cf-nota   { max-width: none; }

  /* AQUÍ VUELVE EL aspect-ratio, y el min-height se apaga.
     Apiladas, la columna izquierda ya no tiene al formulario al lado
     estirándola: si la foto siguiera con flex:1 dentro de una columna
     de alto automático, se quedaría con el alto de su propio contenido
     —que es ella misma— y el navegador entraría en un cálculo circular
     que acaba en una tira de nada. Con una proporción declarada no hay
     nada que resolver. */
  .cf-figura { flex: 0 0 auto; aspect-ratio: 16 / 9; min-height: 0; }
}

@media (max-width: 620px) {
  /* Name y Email uno debajo del otro: a la mitad de una pantalla de
     móvil no cabe una dirección de correo. */
  .cf-fila-2 { grid-template-columns: minmax(0, 1fr); }

  /* El botón a lo ancho: a este tamaño, un botón de su ancho natural
     deja media fila vacía y obliga a apuntar con el pulgar. */
  .cf-pie    { align-items: stretch; }
  .cf-enviar { justify-content: center; }
}

@media (max-width: 480px) {
  .ct-rejilla { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  /* La foto se queda quieta, y en el encuadre de partida —no en el de
     llegada— para que se vea igual que el primer fotograma que habría
     visto todo el mundo. Quien pidió menos movimiento no debería
     encontrarse lo único de la página que no para nunca. */
  .cf-figura img { animation: none; transform: scale(1.06); will-change: auto; }

  .ct-dato.es-enlace, .cf-input, .cf-enviar, .cf-alterna a { transition: none; }
  .cf-enviar:hover:not(:disabled) { transform: none; }
  .cf-enviar[aria-busy="true"] .cf-punto { animation: none; opacity: .4; }
}