/* ------------------------------------------------------------------ */
/* CONTACTO — una sola pantalla: mensaje a la izquierda, formulario a  */
/* la derecha. Superficie liquid glass del sistema (misma gramática    */
/* que el header): cápsula translúcida, borde iluminado, acento violeta*/
/* ------------------------------------------------------------------ */
.contact-page { --contact-line: rgba(255,255,255,.14); --contact-soft: rgba(255,255,255,.07); --contact-muted: #b7b3c2; --contact-faint: #807b8c; }
.contact-page main { overflow-x: clip; }
.contact-shell { width: min(var(--container-wide),calc(100% - (var(--gutter) * 2))); margin-inline: auto; }
#formulario { scroll-margin-top: calc(var(--header-height,5rem) + 1rem); }

/* Esta página es corta: las capas decorativas globales (body::before/::after,
   main::before/::after) están dimensionadas en vh pensando en páginas largas
   y aquí sobrepasan el contenido real, dejando scroll vacío bajo el footer.
   Se reducen solo en esta página para que nunca excedan el alto del contenido. */
body.contact-page::before { height: 100vh !important; }
body.contact-page::after { height: 115vh !important; }
body.contact-page main::before { top: 16vh !important; height: 22vh !important; }
body.contact-page main::after { top: 40vh !important; height: 30vh !important; }

/* El reveal es global: styles.css sección 16. */

/* Layout ---------------------------------------------------------- */
.contact-main { padding: clamp(3rem,7vw,6rem) 0 clamp(4rem,9vw,7rem); }
.contact-layout { display: grid; grid-template-columns: minmax(0,.82fr) minmax(26rem,1.18fr); gap: clamp(2.5rem,6vw,6rem); align-items: start; }

/* Columna izquierda ----------------------------------------------- */
.contact-intro { position: sticky; top: 7.5rem; min-width: 0; }
.contact-kicker { color: var(--violet-bright); font: 700 .68rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.contact-intro h1 { max-width: 9ch; margin-top: 1.1rem; font-size: clamp(2.9rem,5.6vw,5rem); letter-spacing: -.04em; line-height: .94; text-wrap: balance; }
.contact-intro__lead { max-width: 34rem; margin-top: 1.5rem; color: var(--contact-muted); font-size: clamp(1rem,1.3vw,1.12rem); line-height: 1.7; }

.contact-channels { margin-top: clamp(2rem,4vw,2.8rem); border-top: 1px solid var(--contact-line); }
.contact-channels li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1rem; padding: .95rem 0; border-bottom: 1px solid var(--contact-soft); }
.contact-channels dt,.contact-channels__label { color: var(--contact-faint); font: 500 .68rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.contact-channels__value { color: var(--text); font: 500 .98rem/1.4 var(--font-display); letter-spacing: -.02em; }
.contact-channels a.contact-channels__value { text-decoration: underline; text-decoration-color: rgba(168,85,255,.5); text-underline-offset: 4px; transition: text-decoration-color var(--dur-1) var(--ease); }
.contact-channels a.contact-channels__value:hover { text-decoration-color: var(--violet-bright); }

/* Tarjeta de formulario ------------------------------------------- */
.contact-card { position: relative; min-width: 0; overflow: hidden; padding: clamp(1.5rem,2.8vw,2.4rem); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-lg,20px); background: linear-gradient(118deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 30%,rgba(132,18,241,.09) 74%,rgba(255,255,255,.05)),rgba(12,10,19,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.05),0 2rem 5rem -3rem rgba(0,0,0,.9); backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%); }
.contact-card::after { position: absolute; top: 0; left: 12%; width: 46%; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); content: ""; pointer-events: none; }
.contact-card h2 { color: var(--text); font: 500 clamp(1.3rem,2vw,1.7rem)/1.1 var(--font-display); letter-spacing: -.035em; }
.contact-card__help { margin-top: .6rem; color: var(--contact-muted); font-size: .9rem; line-height: 1.6; }

.contact-form { margin-top: 1.9rem; }
.contact-form__status { min-height: 0; color: #f5d9ff; font-size: .88rem; }
.contact-form__status:not(:empty) { margin-bottom: 1.1rem; padding: .75rem .95rem; border: 1px solid rgba(168,85,255,.38); background: rgba(132,18,241,.09); }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.contact-fields > .contact-field--full { grid-column: 1 / -1; }
.field-label { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; color: var(--text); font: 500 .85rem/1.3 var(--font-display); }
.field-label span { color: var(--contact-faint); font: 400 .7rem/1.3 var(--font-body); }
.contact-form input:not([type="checkbox"]),.contact-form textarea,.contact-form select { width: 100%; min-height: 3rem; padding: .85rem .95rem; border: 1px solid var(--contact-line); border-radius: var(--r-sm); background: rgba(255,255,255,.03); color: var(--text); font: 400 .95rem/1.5 var(--font-body); transition: border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease); }
.contact-form textarea { min-height: 8.5rem; resize: vertical; }
.contact-form select { appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%); background-position: calc(100% - 1.2rem) 50%,calc(100% - .9rem) 50%; background-size: .32rem .32rem,.32rem .32rem; background-repeat: no-repeat; }
.contact-form option { background: var(--bg-2); }
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus { outline: none; border-color: var(--violet-bright); background-color: rgba(132,18,241,.07); box-shadow: 0 0 0 .22rem rgba(132,18,241,.12); }
.contact-form [aria-invalid="true"] { border-color: #eca8ff !important; }
.field-help,.field-error { margin-top: .55rem; color: var(--contact-faint); font-size: .78rem; line-height: 1.5; }
.field-error { color: #efc1ff; }
.privacy-check { display: flex; align-items: flex-start; gap: .55rem; min-height: 2.75rem; margin-top: 1.5rem; color: var(--contact-muted); font-size: .87rem; line-height: 1.5; cursor: pointer; }
.privacy-check input { width: 1rem; height: 1rem; margin-top: .18rem; accent-color: var(--violet); }
.privacy-check a { color: var(--text); text-decoration: underline; text-decoration-color: var(--violet); text-underline-offset: 3px; }
.contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; margin-top: 1.6rem; }
.contact-form [data-submit] { min-width: 11rem; }
.contact-form [data-submit][disabled] { cursor: wait; opacity: .72; }
.contact-form__note { margin-top: 1.1rem; color: var(--contact-faint); font-size: .8rem; line-height: 1.55; }

/* Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 2.75rem; }
  .contact-intro { position: static; }
  .contact-intro h1 { max-width: 12ch; }
}
@media (max-width: 560px) {
  .contact-page { width: 100%; max-width: 100%; }
  .contact-page .site-header { width: 100%; padding-inline: 1rem; }
  .contact-page .site-header__inner { position: relative; width: 100%; max-width: none; min-width: 0; padding-right: 4rem; }
  .contact-page .menu-toggle { display: inline-flex !important; position: absolute; top: 50%; right: .45rem; transform: translateY(-50%); }
  .contact-shell { width: min(var(--container-wide),calc(100% - 2.5rem)); }
  .contact-intro h1 { font-size: clamp(2.4rem,10vw,3.4rem); }
  .contact-card { padding: 1.25rem 1.1rem; }
  .contact-fields { grid-template-columns: 1fr; }
  .contact-form__actions .btn { flex: 1 1 auto; }
}