/* Contact form (2026-09-24), a letter. Under the WhatsApp and phone buttons of the final block on
   the home, /precios/ and /sobre-mi/, always shown since 2026-09-25 (Alex: no toggle, a heading and
   the fields); open on /contacto/. «Cuéntame más» is still a disclosure with the carta gesture.
   Fields sit on the same square grid as the calendar: no radius, 2 px sillar border, rojo when
   focused or wrong. Errors are text next to the field with a small square, never colour alone. */
.formulario [hidden], .form-aviso:not(:target) { display: none !important; }
/* the honeypot is not rendered: an off-screen field is still focusable, and Chrome autofilled it */
.form-trampa { display: none !important; }
.formulario { max-width: 640px; }
.form-nota { max-width: 52ch; margin: 0 0 1.1em; }
.form-campos { display: grid; gap: 14px 20px; margin: 0; }
.campo { margin: 0; }
.campo label { display: block; font-family: var(--display); font-weight: 600; font-size: 0.9375rem; line-height: 1.3; margin-bottom: 5px; }
.campo input, .campo textarea, .campo select {
  display: block; width: 100%; margin: 0; padding: 0.65em 0.8em;
  font: inherit; line-height: 1.4; color: var(--tinta); background: var(--blanco);
  border: 2px solid var(--sillar); border-radius: 0; appearance: none;
  transition: border-color 160ms ease-out;
}
.campo textarea { resize: vertical; min-height: 6.5em; }
.campo select { padding-right: 2.4em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23A8192A' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9em center; }
.campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible { outline-offset: 0; border-color: var(--rojo); }
.campo [aria-invalid="true"] { border-color: var(--rojo); }
.campo-err { position: relative; display: block; margin-top: 5px; padding-left: 18px; font-size: 0.9375rem; line-height: 1.4; color: var(--rojo); }
.campo-err::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 9px; height: 9px; background: var(--rojo); }
/* the consent line: box and text on one line, the error under both */
.campo-check { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; align-items: start; margin-top: 16px; max-width: 60ch; }
.campo-check input { width: 22px; height: 22px; margin: 2px 0 0; padding: 0; accent-color: var(--rojo); appearance: auto; }
.campo-check label { font-family: var(--body); font-weight: 400; font-size: 0.9375rem; margin: 0; }
.campo-check .campo-err { grid-column: 2; }
.form-envio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
.formulario button.btn { border: 0; cursor: pointer; }
.formulario button.btn:disabled { background: var(--sillar); color: var(--tinta); cursor: wait; transform: none; }
.form-estado { margin: 16px 0 0; padding: 12px 16px; max-width: 60ch; border-left: 4px solid var(--rojo); background: var(--estuco); }
.form-estado a { font-weight: 600; }
.form-fallo { border-left-color: var(--tinta); }
.form-aviso { margin: 0 0 1em; padding: 12px 16px; border-left: 4px solid var(--rojo); background: var(--blanco); }
@media (min-width: 720px) {
  .form-campos { grid-template-columns: 1fr 1fr; }
  .campo-ancho { grid-column: 1 / -1; }
}

/* the optional part: same gesture, one level in */
.formulario .desp-mas { margin-top: 14px; max-width: none; }
.formulario .desp-mas > .form-campos { margin-top: 12px; }

/* carta: an envelope whose flap lifts. The marker of the letter in the final block and of «cuéntame más».
   The body is ::before and carries the pocket's V inside; the flap is ::after, the same V from
   corner to corner. Closed, the two V coincide. Open, the flap flips on the centre line of the top
   border (origin 1 px down) into a peak joined to both corners, and the pocket's V stays inside:
   an open envelope, not a roof over an empty box. The body never moves: the generic [open] rule
   in secciones.css rotates ::before, so the open state pins it. --carta-pt + half a line centres the
   13 px icon on the first text line; browsers without `lh` keep the em guess. */
.desp[data-anim="carta"] > summary { --carta-pt: 4px; }
.desp[data-anim="carta"] > summary::before,
.desp[data-anim="carta"] > summary::after { top: calc(0.5em + 1px); top: calc(var(--carta-pt) + 0.5lh - 6.5px); width: 18px; }
.desp[data-anim="carta"] > summary::before,
.desp[data-anim="carta"][open]:not(.cerrando) > summary::before {
  height: 13px; border: 2px solid var(--rojo); transform: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='8' viewBox='0 0 18 8'%3E%3Cpath fill='none' stroke='%23A8192A' stroke-width='2' d='M1 1l8 6 8-6'/%3E%3C/svg%3E") border-box 0 0 / 18px 8px no-repeat;
}
.desp[data-anim="carta"] > summary::after {
  display: block; height: 8px; transform-origin: 50% 1px; transform: perspective(40px) rotateX(0deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='8' viewBox='0 0 18 8'%3E%3Cpath fill='none' stroke='%23A8192A' stroke-width='2' stroke-linecap='square' d='M1 1l8 6 8-6'/%3E%3C/svg%3E") 0 0 / 18px 8px no-repeat;
}
.desp[data-anim="carta"][open]:not(.cerrando) > summary::after { transform: perspective(40px) rotateX(180deg); }

/* the letter in the final block (a plain block with a heading since 2026-09-25): under the buttons on phones; from 1000 px the block splits in
   two columns and the letter sits on the right, beside the heading, so the box never shows a half
   page of fields with the other half empty */
.contacto-caja .desp-carta { margin-top: 18px; max-width: none; border-top: 1px solid var(--sillar); padding-top: 14px; }
/* the letter's heading (since 2026-09-25, Alex: always shown, no toggle). No envelope here: the
   envelope marks what opens («cuéntame más»), and a heading that looks clickable but is not misleads */
.carta-titulo { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.0625rem; line-height: 1.6; letter-spacing: 0; color: var(--tinta); }
.contacto-caja .desp-carta > .formulario { margin-top: 14px; }
@media (min-width: 1000px) {
  .contacto-caja { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; column-gap: 48px; align-items: start; }
  .contacto-caja > * { grid-column: 1; }
  .contacto-caja .desp-carta { grid-column: 2; grid-row: 1 / span 4; display: flex; flex-direction: column; justify-content: center; margin-top: 0; padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--sillar); align-self: stretch; }
  .contacto-caja .formulario { max-width: none; }
}

/* /contacto/: channels on the left, the open form on the right */
.contacto-pagina { display: grid; gap: 28px 48px; padding: 24px 0 var(--section); align-items: start; }
.contacto-pagina h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); margin-bottom: 0.3em; }
.contacto-pagina .lead { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); max-width: 48ch; }
.canales { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 18px; }
.canales li { display: grid; gap: 4px; justify-items: start; }
.canales li span { font-size: 0.9375rem; }
.contacto-form { background: var(--blanco); border-top: 5px solid var(--rojo); padding: clamp(20px, 3vw, 36px); }
.contacto-form h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); margin-bottom: 0.4em; }
.contacto-form .formulario { max-width: none; }
@media (min-width: 900px) {
  .contacto-pagina { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .contacto-pagina .contacto-canales { position: sticky; top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .campo input, .campo textarea, .campo select { transition: none; }
}