/* Contact composition: shared header/footer styles remain in case-study.css. */
:root { --contact-error: #ff8d9b; }
.contact-page [hidden] { display: none !important; }
.contact-page .page :is(input, textarea, button, a, [tabindex]):focus-visible {
  outline: 1px solid var(--accent); outline-offset: 5px;
}
.contact-layout {
  width: min(1200px, calc(100% - 96px)); margin: auto;
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 30px;
  letter-spacing: 0;
}
.contact-aside { padding-top: 0; }
/* Header estándar del sitio; su logo no se ve aquí: el símbolo abre la columna izquierda. */
.contact-page .nav-logo { visibility: hidden; }
.contact-symbol { display: block; width: 171.72px; height: 71.55px; margin-bottom: 30.45px; color: var(--accent); }
.contact-symbol svg { display: block; width: 100%; height: 100%; }
.contact-detail-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px; }
.contact-heading { grid-template-columns: minmax(0, 1fr); }
.contact-meta { font: 400 10px/1.6 var(--mono); color: var(--body); padding-top: 12px; }
.contact-aside h1 { font-size: 34px; line-height: 1.4; font-weight: 500; letter-spacing: 0; color: var(--txt); }
.contact-email { display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin-top: 2px; font-size: 34px; line-height: 1.4; color: var(--accent); }
.contact-email svg { flex: none; width: 28px; height: 28px; stroke-width: 1.4; position: relative; top: 3.5px; }   /* centrada con la altura de las minúsculas, no con las mayúsculas */
.contact-email:hover { color: var(--body-strong); }
.contact-intro { margin-top: 19px; font-size: 18px; line-height: 1.75; color: var(--body); }
.contact-direct { margin-top: 82px; align-items: center; }
.contact-direct .contact-meta { padding-top: 0; }
.contact-direct .avatars { margin-top: 0; order: 0; }
.contact-form { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 148.72px; grid-template-rows: auto; column-gap: 30px; }
/* Both panels contribute their height; changing steps cannot move the CTA. */
.form-stage { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr); width: auto; min-width: 0; font: var(--t-mono-tag); }
.step-panel { grid-area: 1 / 1; align-self: start; height: auto; min-width: 0; overflow: visible; padding: 2px 0 0; }
.step-panel[data-step="1"] { display: flex; flex-direction: column; align-self: stretch; }
.contact-page .form-stage .step-panel[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.contact-form fieldset { border: 0; min-width: 0; }
.contact-form legend { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font: var(--t-mono-label); letter-spacing: 0; color: var(--body-strong); }
.required-mark { position: absolute; top: 0; right: 0; font: 400 18px/1 var(--mono); color: var(--accent); }
.optional-note { flex: none; font: 400 9px/1.6 var(--mono); color: var(--muted); }
.service-chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 7px 6px; }
.service-row { display: contents; }
.choice-chip { display: inline-flex; position: relative; }
.choice-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-chip > span { display: inline-flex; min-height: 48px; padding: 13px 12px; border: 1px solid var(--border); border-radius: 4px; align-items: center; justify-content: center; font: var(--t-mono-tag); letter-spacing: 0; color: var(--body-strong); transition: border-color .18s, color .18s, background .18s; white-space: nowrap; }
.choice-chip:hover > span { border-color: var(--body); background: #18231b; }
.choice-chip input:checked + span, .choice-chip[aria-pressed="true"] > span { background: var(--accent); color: var(--bg-d); border-color: var(--accent); }
.choice-chip input:focus-visible + span { outline: 1px solid var(--accent); outline-offset: 3px; }
.service-field { margin-top: auto; padding-bottom: 14px; }
#services-error:empty { min-height: 0; padding-top: 0; }
.service-field.is-invalid .choice-chip > span { border-color: var(--contact-error); }
.field-line { position: relative; display: flex; align-items: center; gap: 10px; min-height: 47px; padding: 4px 10px; border-bottom: 1px solid var(--border); color: var(--body); transition: border-color .18s, background-color .18s; }
.field-line:hover { border-color: var(--body); }
.field-line:focus-within { border-color: var(--accent); color: var(--accent); background: var(--surface-showcase-2); }
.field-line input, .field-line textarea { width: 100%; min-width: 0; font: var(--t-body-m); background: transparent; border: 0; border-radius: 0; color: var(--body-strong); padding: 8px 0; letter-spacing: 0; box-shadow: none; }
.field-line .required-mark { top: 3px; right: 2px; }
.contact-page .page .field-line :is(input, textarea):focus-visible { outline: none; }
.field-line input::placeholder, .field-line textarea::placeholder { color: var(--muted); opacity: 1; }
.field-line input:-webkit-autofill { -webkit-text-fill-color: var(--body-strong); -webkit-box-shadow: 0 0 0 100px var(--bg-d) inset; caret-color: var(--accent); }
.field-line input { flex: 1 1 auto; }
.field-line .optional-note { padding-left: 6px; }
.field-error { color: var(--contact-error); font-size: 12px; line-height: 17px; min-height: 18px; padding-top: 2px; overflow-wrap: anywhere; }
.line-field, .link-row { min-height: 63px; }
.is-invalid > .field-line, .link-row.is-invalid .field-line { border-color: var(--contact-error); }
.is-invalid .required-mark { color: var(--contact-error); }
.field-feedback { position: relative; min-height: 20px; }
.email-suggestion { position: absolute; inset: 0 auto auto 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; font-size: 12px; line-height: 18px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.link-tools { display: flex; align-items: center; gap: 18px; margin-top: -3px; }
.text-action { display: inline-flex; align-items: center; gap: 5px; font: 400 10px/1.6 var(--mono); color: var(--body); }
.text-action:hover, .skip-call:hover { color: var(--accent); }
.text-action:disabled { opacity: .4; }
.text-action svg, .file-details > svg { width: 13px; height: 13px; stroke-width: 1.5; flex: none; }
.attachment-note { margin-left: auto; font: 400 8px/1.5 var(--mono); color: var(--muted); white-space: nowrap; }
.file-details { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--accent); font-size: 11px; }
.file-details > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-button { display: inline-flex; width: 28px; height: 28px; flex: none; align-items: center; justify-content: center; color: var(--body); }
.icon-button svg { width: 16px; height: 16px; stroke-width: 1.5; }
.icon-button:hover { color: var(--accent); }
.icon-button:disabled { opacity: .25; }
/* El brief crece y ocupa el hueco hasta "What do you need?": sin franja vacía irregular debajo. */
.brief-field { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.brief-field .field-line { align-items: flex-start; flex: 1 1 auto; }
.brief-field .field-line textarea { height: 100%; min-height: 57px; }
.service-field { margin-top: 0 !important; }
.brief-field { position: relative; }
.brief-meta { position: absolute; right: 0; bottom: 0; }
.field-line textarea { height: 57px; resize: none; padding-top: 8px; }
.brief-meta { display: flex; justify-content: flex-end; align-items: center; padding-top: 4px; font-size: 9px; line-height: 14px; color: var(--muted); }
#brief-count { white-space: nowrap; font-family: var(--mono); margin-left: 8px; }
.form-bottom { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 20px; min-width: 0; }
.form-bottom-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
#step-caption { font-size: 11px; line-height: 1.8; color: var(--muted); }
.back-step { margin-bottom: 16px; width: max-content; }
.circle-cta { display: grid; place-items: center; width: 148.72px; height: 148.72px; border: 0; border-radius: 50%; padding: 0; flex: none; color: var(--bg-d); }
.circle-cta-inner { display: flex; flex-direction: column; gap: 10.56px; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--accent); border: 1px solid var(--accent); transition: background .22s, color .22s, border-color .22s; }
.circle-cta-inner > span { font: 400 11.44px/21.12px var(--ff-mono); }
.circle-cta-inner svg { width: 24.64px; height: 24.64px; stroke-width: 1.3; }
.circle-cta:hover .circle-cta-inner, .circle-cta:focus-visible .circle-cta-inner { background: var(--lime400); color: var(--bg-d); border-color: var(--lime400); }
.circle-cta:disabled { opacity: .55; }
.circle-cta:disabled .circle-cta-inner { background: var(--accent); color: var(--bg-d); border-color: var(--accent); }
.submit-feedback { font-size: 12px; line-height: 1.6; color: var(--body); max-width: 240px; }
.submit-feedback.is-error { color: var(--contact-error); }
.submit-feedback:not(:empty) { margin-top: 7px; }
.direct-submit { display: inline-flex; width: max-content; gap: 6px; align-items: center; color: var(--accent); font-size: 12px; margin-top: 6px; }
.direct-submit svg { width: 13px; height: 13px; }
.schedule-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 26px; gap: 12px; }
.schedule-heading h2 { font-size: 23px; font-weight: 400; line-height: 1.4; color: var(--body-strong); }
.schedule-heading p { font-size: 11px; color: var(--muted); line-height: 1.7; margin-top: 7px; }
.schedule-heading > span { padding-top: 8px; }
.calendar-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.calendar-heading h3 { font-size: 15px; font-weight: 500; color: var(--body-strong); }
.calendar-heading > div { display: flex; gap: 10px; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.calendar-weekdays { font: 400 10px/24px var(--mono); color: var(--muted); margin-bottom: 5px; }
.calendar-grid { grid-template-rows: repeat(6, 33px); gap: 4px 0; }
.calendar-day { width: 33px; height: 33px; border-radius: 50%; font: 400 12px/1 var(--mono); justify-self: center; color: var(--body-strong); }
.calendar-day:disabled { color: var(--border); }
.calendar-day:not(:disabled):hover { background: #233127; }
.calendar-day[aria-pressed="true"] { background: var(--accent); color: var(--bg-d); }
.calendar-day.is-today { text-decoration: underline; text-underline-offset: 5px; }
.time-field { margin-top: 24px; }
.time-field legend { margin-bottom: 4px; }
.timezone-label { color: var(--muted); font: 400 9px/1.5 var(--mono); margin-bottom: 12px; }
.time-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 72px; }
.time-chip { position: relative; display: flex; }
.time-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.time-chip > span { width: 100%; height: 32px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--border); border-radius: 99px; color: var(--body); font: 400 11px/1 var(--mono); }
.time-chip:hover > span { border-color: var(--body); }
.time-chip input:checked + span { border-color: var(--accent); color: var(--accent); background: #1b2a13; }
.time-chip input:focus-visible + span { outline: 1px solid var(--accent); outline-offset: 3px; }
.time-chip input:disabled + span { color: var(--border); }
.schedule-note { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.schedule-note svg { width: 13px; height: 13px; }
.skip-call { display: flex; align-items: center; gap: 6px; margin-top: 17px; font: 400 10px/1.6 var(--mono); color: var(--body); text-decoration: underline; text-underline-offset: 4px; }
.skip-call svg { width: 13px; height: 13px; }
.skip-call[aria-pressed="true"] { color: var(--accent); }
.contact-page .contact-form .sr-only, .contact-page .contact-honeypot { position: absolute; display: block; width: 1px; height: 1px; overflow: hidden; padding: 0; margin: -1px; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Hasta 1440 el contacto ocupa el ancho del header (--mnav, sin sangrado extra). De 1440 a
   1920 el margen pasa de 120 (el del header) a 272,3 (el del contenido, --m en 1920): el
   bloque se va cerrando hasta el ancho máximo de siempre, con su sangrado. Desde 1920 el
   margen es --m (272,3 en 1920, luego crece 1:1): el bloque se queda con el ancho de 1920,
   centrado (.page no tiene tope de ancho). cqw = ancho de .page (container). */
@media (min-width: 768px) { .contact-layout { width: auto; margin-left: var(--mnav); margin-right: var(--mnav); } }
@media (min-width: 1440px) { .contact-layout { margin-left: min(272.3px, calc(120px + (100cqw - 1440px) * .3172917)); margin-right: min(272.3px, calc(120px + (100cqw - 1440px) * .3172917)); } }
@media (min-width: 1920px) { .contact-layout { margin-left: var(--m); margin-right: var(--m); } }
@media (prefers-reduced-motion: reduce) { .contact-page *, .contact-page *::before, .contact-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
/* Footer del contacto: sin titular ni CTA (la página ya es el CTA). */
.contact-page .foot > .h7, .contact-page .foot > .foot-btn { display: none; }
/* Paso 2: sin "Back to your project" ni el texto de apoyo bajo el formulario. */
.contact-page #back-step, .contact-page #step-caption { display: none !important; }
/* Redes bajo el correo; en el footer ya no van (ni su línea). */
.contact-page .contact-socials { margin: 38px 0 0; gap: 32px; }
.contact-page .foot > .socials, .contact-page .foot > .foot-rule { display: none; }
/* Sin footer. En desktop el contenido cabe en una pantalla y va centrado en vertical; si la
   ventana es más baja, la página scrollea (antes overflow:hidden recortaba el form). */
.contact-page .foot { display: none !important; }
.contact-layout { margin-bottom: 0; }
/* Integrantes: círculos +15% (49 → 56,35) */
.contact-direct .avatar { width: 56.35px; height: 56.35px; }
.contact-direct .avatar + .avatar { margin-left: -14.95px; }
/* La columna izquierda mide lo que su contenido (el email); a su derecha, el mismo hueco
   que entre formulario y CTA (30 px), y el formulario se estira con el espacio sobrante. */
/* Contenido centrado en vertical en el alto que deja el header (la página no scrollea). */
.contact-page .page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.contact-page .nav { flex: none; }
.contact-layout { margin-top: auto !important; margin-bottom: auto !important; padding-block: 24px; box-sizing: border-box; }

/* ==========================================================================
   (2026-10-05) DISEÑO FINAL — contact_desktop / contact_mobile (Claude Design)
   Mismo DOM en todos los anchos; un solo corte de layout en 768 (el del home).
   Desktop = Figma 1440, mobile = Figma 360; entre medias y por encima, las
   reglas del home (--mnav/--m, container queries sobre .page).
   ========================================================================== */
body { margin: 0; }
/* +4px padding vertical en campos; brief solo +4 arriba */
.field-line { padding-top: 8px; padding-bottom: 8px; }
.brief-field .field-line { padding-top: 8px; padding-bottom: 4px; }
/* salto del titular solo en mobile (360: "Let's bring your / ideas to life") */
@media (min-width: 768px) { .contact-aside .br-m { display: none; } }

/* CTA circular = blob animado (contact_*TEST): SVG con forma/degradado animados, giro lento,
   rebote al hover y al pulsar. Tamaño: 180 desktop, 168 mobile. */
.circle-cta { position: relative; background: none; width: 180px !important; height: 180px !important; }
.circle-cta .circle-cta-inner, .circle-cta:hover .circle-cta-inner, .circle-cta:focus-visible .circle-cta-inner, .circle-cta:disabled .circle-cta-inner { position: relative; background: transparent; border-color: transparent; }
.circle-cta-inner > #cta-label { position: relative; z-index: 1; font-weight: 700; font-size: 20px; text-align: center; }
.circle-cta svg.cta-blob { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.cta-blob g { transform-origin: 50px 50px; animation: cta-blob-spin 18s linear infinite; }
.circle-cta:focus-visible .cta-blob { transform: scale(1.05); }   /* solo teclado; con ratón la interacción es la gota que sigue al cursor (goo, como los .btn) */
@keyframes cta-blob-spin { to { transform: rotate(360deg); } }
.circle-cta.cta-quieta .cta-blob g { animation-play-state: paused; }   /* fuera de pantalla (js/contact.js) */
.circle-cta-fluid { position: absolute; inset: 0; pointer-events: none; }
.circle-cta .btn-dot { pointer-events: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 768px) { .circle-cta.goo .circle-cta-fluid { filter: url(#goo); }
  /* (2026-10-19) light: el umbral de alfa del #goo sobre un blob translúcido lo volvía opaco / le recortaba
     el borde. En light el goo (#goo-l) va en el <g>, antes de su máscara de transparencia (ver abajo). */
  :root[data-theme="light"] .circle-cta.goo .circle-cta-fluid { filter: none; }
  :root[data-theme="light"] .circle-cta.goo .cta-blob g { filter: url(#goo-l); } }
.label-fade { animation: label-fade .4s ease both; }
.cta-blob path { transform-origin: 50px 50px; transform-box: view-box; }
.cta-blob path.blob-press { animation: blob-press .9s cubic-bezier(.22,1,.36,1); }
@keyframes label-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes blob-press { 0% { transform: scale(1); } 18% { transform: scale(.9,.93); } 42% { transform: scale(1.05,1.02); } 64% { transform: scale(.98,1.01); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cta-blob g { animation: none; } .cta-blob animate { display: none; } .label-fade, .cta-blob path.blob-press { animation: none; } }

/* (contact_desktop TEST) ≥ 768: titular y correo a 32, símbolo 160, columna izquierda centrada.
   La flecha del correo se queda como estaba. */
@media (min-width: 768px) {
  .contact-aside h1, .contact-aside .contact-email { font-size: 32px; }
  .scheduling-panel { margin-right: 24px; }
  .contact-symbol { width: 160px; height: 66.67px; }
  .contact-aside .contact-direct { margin-top: 24px !important; }
  .contact-layout > .contact-aside { display: flex; flex-direction: column; justify-content: center; }
}
/* Columna izquierda (hero): 32 px más arriba del medio; el formulario no se mueve. */
@media (min-width: 768px) { .contact-aside { position: relative; top: -32px; } }
/* (contact_mobile TEST) < 768: CTA 168, desplazado; logo del header 58 y símbolo 16 más arriba. */
@media (max-width: 767.98px) {
  .circle-cta { width: 168px !important; height: 168px !important; left: 16px; top: -32px !important; }
  .nav-anim-m { width: 58px; height: 24.607px; }
  .contact-symbol { margin-top: -16px; }
}

/* tema claro: los fondos de hover estaban fijados al verde oscuro */
:root[data-theme="light"] .choice-chip:hover > span,
:root[data-theme="light"] .time-chip:hover > span,
:root[data-theme="light"] .calendar-day:not(:disabled):hover { background: rgba(16,25,19,.06); }
:root[data-theme="light"] .field-line input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--bg) inset; }

/* ---- desktop ≥ 768 (contact_desktop, 1440) ---- */
@media (min-width: 768px) {
  .timezone-label,.schedule-note,.skip-call,.schedule-heading p{font-size:14px;line-height:1.5}
  .schedule-note svg,.skip-call svg{width:16px;height:16px}
  .calendar-day,.calendar-weekdays{font-size:13px}
  .time-chip > span{height:auto;min-height:48px;padding-top:13px;padding-bottom:13px;font:var(--t-mono-tag);letter-spacing:0;color:var(--body-strong);transition:border-color .18s,color .18s,background .18s}
  .time-chip:hover > span{border-color:var(--body);background:#18231b}
  .time-chip input:checked + span{background:var(--accent);color:var(--bg-d);border-color:var(--accent)}
  .schedule-heading h2{font-weight:500;line-height:1.4;letter-spacing:0;color:var(--txt)}
  .schedule-heading p{color:var(--body);line-height:1.75}
  .contact-email{align-items:center}
  .contact-email svg{top:0;align-self:center}
  .contact-email{margin-top:-2px;gap:6px}
  .contact-email{gap:4px}
  .contact-email svg{top:4px}
  .schedule-heading h2,.schedule-heading p{font-family:var(--sans)}
  .schedule-heading{justify-content:flex-start}
  .schedule-back{margin:2px 0 0 -6px}
  .schedule-heading p{margin-top:5px}
  .schedule-heading{flex-direction:column;align-items:flex-start;gap:8px}
  .schedule-back{margin:0 0 0 -6px}
  .schedule-heading p{font-size:14px !important}
  .link-tools .text-action,.attachment-note,#deck,.file-details{font-size:12px}
  .text-action svg{width:14px;height:14px}
  .time-chip > span{min-height:40px;padding-top:9px;padding-bottom:9px}
  .calendar-grid{grid-template-rows:none;grid-auto-rows:33px}
  .calendar-grid:has(> :nth-child(36):empty) > :nth-child(n+36){display:none}
  .time-field{margin-top:26px}
  #slot-error{margin-bottom:-4px}
  #skip-call{margin-top:26px}
  .schedule-heading p{margin-top:3px}
  .time-field legend{float:left;width:auto;margin:0 12px 12px 0;line-height:21px}
  .time-field .tz-picker{line-height:21px;margin-bottom:12px}
  #time-slots{clear:both}
  #skip-call{width:max-content;margin-left:auto}
  .time-field legend{color:var(--txt)}
  .tz-picker .timezone-label{margin:0}
  .tz-chev{flex:none;transition:transform .25s}
  .schedule-heading{flex-direction:row;align-items:flex-start;gap:0}
  .schedule-back{margin:2px 0 0 -6px}
  .tz-picker{position:relative;display:block;width:max-content;max-width:100%;cursor:default}
  .tz-btn{display:flex;align-items:center;gap:6px;color:var(--muted);font:inherit;line-height:inherit;padding:0}
  .tz-btn:hover,.tz-btn[aria-expanded="true"]{color:var(--accent)}
  .tz-btn[aria-expanded="true"] .tz-chev{transform:rotate(180deg)}
  .tz-pop{position:absolute;z-index:60;top:calc(100% + 8px);left:0;width:300px;background:#152B1D;border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
  :root[data-theme="light"] .tz-pop{background:#fff}
  .tz-search{display:block;width:100%;box-sizing:border-box;height:36px;padding:0 10px;margin-bottom:6px;background:transparent;border:0;border-bottom:1px solid var(--border);color:var(--body-strong);font:400 13px/1 var(--mono);outline:none}
  .tz-search::placeholder{color:var(--muted)}
  .tz-search:focus{border-color:var(--accent)}
  .tz-list{max-height:216px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border) transparent;margin:0;padding:0;list-style:none;contain:content}
  .tz-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:8px;font:400 13px/18px var(--mono);color:var(--body-strong);cursor:pointer;outline:none}
  .tz-list li em{font-style:normal;color:var(--muted);flex:none}
  .tz-list li:hover,.tz-list li:focus{background:#233127}
  :root[data-theme="light"] .tz-list li:hover,:root[data-theme="light"] .tz-list li:focus{background:#eef4f0}
  .tz-list li[aria-selected="true"]{color:var(--accent)}
  .tz-list li[aria-selected="true"] em{color:var(--accent)}
  .tz-list .tz-empty{color:var(--muted);cursor:default}
  .time-field .tz-picker{display:inline-block;vertical-align:top}
  /* tz dropdown v2 — minimal */
  .tz-pop{width:100%;min-width:0;box-sizing:border-box;top:calc(100% + 10px);padding:4px 0;background:var(--bg);border:1px solid var(--border);border-radius:8px;box-shadow:none}
  :root[data-theme="light"] .tz-pop{background:var(--bg)}
  .tz-search{height:34px;padding:0 12px;margin:0 0 4px;font:400 13px/1 var(--sans);border-bottom:1px solid var(--border)}
  .tz-list{max-height:216px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;margin-right:4px}
  .tz-list::-webkit-scrollbar{width:2px;height:0}
  .tz-list::-webkit-scrollbar-track{background:transparent}
  .tz-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
  .tz-list::-webkit-scrollbar-thumb:hover{background:var(--muted)}
  .tz-list li{min-width:0;gap:8px;padding:7px 10px 7px 12px;border-radius:0;font:400 13px/18px var(--sans);color:var(--body)}
  .tz-list li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tz-list li em{font:400 11px/18px var(--sans);color:var(--muted)}
  .tz-list li:hover,.tz-list li:focus,:root[data-theme="light"] .tz-list li:hover,:root[data-theme="light"] .tz-list li:focus{background:transparent;color:var(--accent)}
  .tz-list li[aria-selected="true"]{color:var(--accent)}
  .time-field legend{display:flex;align-items:center;justify-content:flex-start;gap:6px}
  .time-field legend svg{width:16px;height:16px;stroke-width:1.5;flex:none}
  .calendar-day.is-today{text-decoration-color:var(--accent)}
  .time-field legend{display:flex;float:left}
  .contact-page .page .tz-picker :is(input,button,li):focus,.contact-page .page .tz-picker :is(input,button,li):focus-visible{outline:none}
  .tz-pop{width:300px;max-width:none}
  .tz-search,.tz-list li{font-size:14px}
  .tz-list li em{font-size:12px}
  .contact-direct .contact-meta{font:400 13px/24px var(--mono);letter-spacing:.2px;color:#87918B}
  .contact-direct{grid-template-columns:max-content minmax(0,1fr);column-gap:7px}
  @keyframes mc-av-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
  .contact-direct .avatar{animation:mc-av-in .89s cubic-bezier(.2,.7,.2,1) both;animation-delay:.3s}
  .contact-direct .avatar:nth-child(2){animation-delay:.389s}
  .contact-direct .avatar:nth-child(3){animation-delay:.478s}
  .contact-direct .avatar:nth-child(4){animation-delay:.567s}
  @media (prefers-reduced-motion:reduce){.contact-direct .avatar{animation:none}}
  .contact-intro{margin-top:38px}
  .contact-email svg{width:36.94px;height:36.94px;top:5.51px;margin-left:-2.57px;stroke-width:1.35}
}

/* ---- tablet 768–1279: la columna izquierda (correo a 34 px) no deja sitio al form a su
   lado; se apila encima con la tipografía desktop. El form conserva su CTA a la derecha. ---- */
@media (min-width: 768px) {
  @container (max-width: 1279.9px) {
    .contact-layout { grid-template-columns: minmax(0, 1fr); row-gap: 56px; padding-block: 48px; }
    .contact-direct { margin-top: 48px; }
    .brief-field .field-line textarea { min-height: 104px; }
  }
}

/* ---- mobile < 768 (contact_mobile, 360; fluido hasta 767) ---- */
@media (max-width: 767.98px) {
  .contact-page .page{min-height:0;display:block}
  .contact-layout{width:auto !important;margin:0 var(--m) !important;padding:48px 0 48px !important;grid-template-columns:minmax(0,1fr);gap:32px}
  .contact-symbol{width:96px;height:40px;margin-bottom:24px}
  .contact-detail-row{grid-template-columns:minmax(0,1fr);gap:12px}
  .contact-aside h1{font-size:32px;line-height:1.3}
  .contact-email{width:auto;font-size:17px;line-height:1.5;margin-top:8px;gap:6px}
  .contact-email svg{width:16px;height:16px;top:1px}
  .contact-page .contact-socials{margin:24px 0 0;gap:28px}
  .contact-intro{margin-top:16px;font-size:16px;line-height:1.7}
  .contact-direct{margin-top:32px;grid-template-columns:72px minmax(0,1fr);gap:6px;align-items:center}
  .contact-form{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .form-stage{grid-column:1;grid-row:1}
  .form-bottom{grid-column:1;grid-row:2;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:16px}
  .form-bottom-copy{flex:1 1 auto;min-width:0}
  .circle-cta{width:128px;height:128px}
  .link-tools{flex-wrap:nowrap;gap:14px}
  .attachment-note{margin-left:auto;flex-basis:auto}
  .brief-field .field-line textarea{min-height:96px}
  .service-field{margin-top:0 !important}
  .schedule-heading h2{font-size:22px}
  .time-chips{grid-template-columns:repeat(3,minmax(0,1fr))}
  .timezone-label,.schedule-note,.skip-call,.schedule-heading p{font-size:14px;line-height:1.5}
  .schedule-note svg,.skip-call svg{width:16px;height:16px}
  .calendar-day,.calendar-weekdays{font-size:13px}
  .time-chip > span{height:auto;min-height:48px;padding-top:13px;padding-bottom:13px;font:var(--t-mono-tag);letter-spacing:0;color:var(--body-strong);transition:border-color .18s,color .18s,background .18s}
  .time-chip:hover > span{border-color:var(--body);background:#18231b}
  .time-chip input:checked + span{background:var(--accent);color:var(--bg-d);border-color:var(--accent)}
  .schedule-heading h2{font-weight:500;line-height:1.4;letter-spacing:0;color:var(--txt)}
  .schedule-heading p{color:var(--body);line-height:1.75}
  .contact-email{align-items:center}
  .contact-email svg{top:0;align-self:center}
  .contact-email{gap:4px}
  .contact-email{font-size:19.5px;line-height:1.5;width:auto;white-space:nowrap}
  .contact-email svg{width:21.2px;height:21.2px;top:2.31px;margin-left:-4.18px;margin-right:-6.18px;stroke-width:1.35}
  .schedule-heading h2,.schedule-heading p{font-family:var(--sans)}
  .schedule-heading{justify-content:flex-start}
  .schedule-back{margin:2px 0 0 -6px}
  .schedule-heading p{margin-top:5px}
  .schedule-heading{flex-direction:column;align-items:flex-start;gap:8px}
  .schedule-back{margin:0 0 0 -6px}
  .schedule-heading p{font-size:14px !important}
  .contact-form{row-gap:4px}
  .contact-form{row-gap:0}
  .form-bottom{margin-top:-24px}
  .circle-cta{position:relative;top:-40px}
  .service-field legend{margin-bottom:8px}
  .service-chips{margin-top:0}
  .link-tools .text-action,.attachment-note,#deck,.file-details{font-size:12px}
  .text-action svg{width:14px;height:14px}
  .calendar-grid{row-gap:8px}
  .schedule-heading{margin-bottom:25.65px}
  .brief-field{flex:none}
  .brief-field .field-line{flex:none}
  .brief-field .field-line textarea{height:104px;min-height:104px}
  .time-chip > span{min-height:40px;padding-top:9px;padding-bottom:9px}
  .calendar-grid{grid-template-rows:none;grid-auto-rows:33px}
  .calendar-grid:has(> :nth-child(36):empty) > :nth-child(n+36){display:none}
  .time-field{margin-top:74px}
  #skip-call{margin-top:74px}
  .schedule-heading p{margin-top:3px}
  .time-field legend{color:var(--txt)}
  .tz-picker .timezone-label{margin:0}
  .tz-chev{flex:none;transition:transform .25s}
  .time-field .tz-picker{margin-bottom:12px}
  .tz-picker{position:relative;display:block;width:max-content;max-width:100%;cursor:default}
  .tz-btn{display:flex;align-items:center;gap:6px;color:var(--muted);font:inherit;line-height:inherit;padding:0}
  .tz-btn:hover,.tz-btn[aria-expanded="true"]{color:var(--accent)}
  .tz-btn[aria-expanded="true"] .tz-chev{transform:rotate(180deg)}
  .tz-pop{position:absolute;z-index:60;top:calc(100% + 8px);left:0;width:300px;background:#152B1D;border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
  :root[data-theme="light"] .tz-pop{background:#fff}
  .tz-search{display:block;width:100%;box-sizing:border-box;height:36px;padding:0 10px;margin-bottom:6px;background:transparent;border:0;border-bottom:1px solid var(--border);color:var(--body-strong);font:400 13px/1 var(--mono);outline:none}
  .tz-search::placeholder{color:var(--muted)}
  .tz-search:focus{border-color:var(--accent)}
  .tz-list{max-height:216px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border) transparent;margin:0;padding:0;list-style:none;contain:content}
  .tz-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:8px;font:400 13px/18px var(--mono);color:var(--body-strong);cursor:pointer;outline:none}
  .tz-list li em{font-style:normal;color:var(--muted);flex:none}
  .tz-list li:hover,.tz-list li:focus{background:#233127}
  :root[data-theme="light"] .tz-list li:hover,:root[data-theme="light"] .tz-list li:focus{background:#eef4f0}
  .tz-list li[aria-selected="true"]{color:var(--accent)}
  .tz-list li[aria-selected="true"] em{color:var(--accent)}
  .tz-list .tz-empty{color:var(--muted);cursor:default}
  /* tz dropdown v2 — minimal */
  .tz-pop{width:100%;min-width:0;box-sizing:border-box;top:calc(100% + 10px);padding:4px 0;background:var(--bg);border:1px solid var(--border);border-radius:8px;box-shadow:none}
  :root[data-theme="light"] .tz-pop{background:var(--bg)}
  .tz-search{height:34px;padding:0 12px;margin:0 0 4px;font:400 13px/1 var(--sans);border-bottom:1px solid var(--border)}
  .tz-list{max-height:216px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;margin-right:4px}
  .tz-list::-webkit-scrollbar{width:2px;height:0}
  .tz-list::-webkit-scrollbar-track{background:transparent}
  .tz-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
  .tz-list::-webkit-scrollbar-thumb:hover{background:var(--muted)}
  .tz-list li{min-width:0;gap:8px;padding:7px 10px 7px 12px;border-radius:0;font:400 13px/18px var(--sans);color:var(--body)}
  .tz-list li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tz-list li em{font:400 11px/18px var(--sans);color:var(--muted)}
  .tz-list li:hover,.tz-list li:focus,:root[data-theme="light"] .tz-list li:hover,:root[data-theme="light"] .tz-list li:focus{background:transparent;color:var(--accent)}
  .tz-list li[aria-selected="true"]{color:var(--accent)}
  .time-field legend{display:flex;align-items:center;justify-content:flex-start;gap:6px}
  .time-field legend svg{width:16px;height:16px;stroke-width:1.5;flex:none}
  .calendar-day.is-today{text-decoration-color:var(--accent)}
  .time-field legend{float:left;width:auto;margin:0 10px 12px 0;line-height:21px}
  .time-field .tz-picker{display:inline-block;vertical-align:top;line-height:21px;margin-bottom:12px}
  #time-slots{clear:both}
  .contact-page .page .tz-picker :is(input,button,li):focus,.contact-page .page .tz-picker :is(input,button,li):focus-visible{outline:none}
  .contact-form{position:relative}
  .form-stage,.scheduling-panel{position:static}
  #skip-call{position:absolute;left:0;bottom:93.5px;margin:0 !important;line-height:21px}
  .schedule-heading{margin-bottom:72px}
  .time-field{margin-top:52px}
  .tz-pop{width:300px;max-width:none}
  .tz-search,.tz-list li{font-size:14px}
  .tz-list li em{font-size:12px}
  .contact-direct .contact-meta{font:400 13px/24px var(--mono);letter-spacing:.2px;color:#87918B}
  .contact-direct{grid-template-columns:max-content minmax(0,1fr);column-gap:7px}
  @keyframes mc-av-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
  .contact-direct .avatar{animation:mc-av-in .89s cubic-bezier(.2,.7,.2,1) both;animation-delay:.3s}
  .contact-direct .avatar:nth-child(2){animation-delay:.389s}
  .contact-direct .avatar:nth-child(3){animation-delay:.478s}
  .contact-direct .avatar:nth-child(4){animation-delay:.567s}
  @media (prefers-reduced-motion:reduce){.contact-direct .avatar{animation:none}}
  .contact-intro{margin-top:24px}
}

/* (2026-10-05) < 420: los chips se reparten siempre como en Figma 360 (4 filas: 2·2·2·1, con
   "Not sure yet" sola junto al CTA). Sangrado derecho solo en el contenedor de chips: su
   ancho útil queda fijo en 312 px (el de 360) aunque la pantalla crezca hasta 419. */
@media (max-width: 419.98px) {
  .service-chips { padding-right: max(0px, calc(100% - 312px)); }
}

/* (2026-10-05) 420–750: el CTA circular ya no sube sobre los chips (paso 1) ni sobre las
   horas (paso 2): baja a su propia franja con 32 px de aire. "Skip, just email me" queda a
   su izquierda, pegado a él y centrado en su alto (128 px → centro a 64 px del borde). */
@media (min-width: 420px) and (max-width: 750px) {
  .form-bottom { margin-top: 32px; }
  .circle-cta { top: 0 !important; }
  #skip-call { left: auto; right: calc(168px + 4px); bottom: calc(84px - 10.5px); }
}

/* (2026-10-05) el símbolo no cambia de color al pasar el cursor: los componentes del header
   inyectan un "a:hover{color:#fff}" global (su <helmet>) que lo volvía blanco. */
.contact-page .contact-symbol, .contact-page .contact-symbol:hover { color: var(--accent); }

/* CTA blob: relleno #B8FF00 (dark) / #9BD700 (light) = --accent. Bordes: verde oscuro en dark; en
   light #9BD700 que se vuelve TRANSPARENTE (deja ver el fondo real). Mismo cruce que el fondo de la
   página: valores colgados de --fade-p (0,45 s) + transition .4s ease, igual que el
   background-color del * en case-study.css. Así la bola y el fondo van exactamente al mismo ritmo. */
#cta-blob-fill stop{transition:stop-color .4s ease,stop-opacity .4s ease}
#cta-blob-fill stop:nth-of-type(1),#cta-blob-fill stop:nth-of-type(2){stop-color:var(--accent)}
#cta-blob-fill stop:nth-of-type(3){stop-color:#9BD700}
#cta-blob-fill stop:nth-of-type(4){stop-color:color-mix(in oklab,#9BD700 calc(var(--fade-p,0) * 100%),#7BAA00)}
/* (2026-10-19) la transparencia ya no va en el relleno sino en la máscara del <g> (#cta-blob-mask, mismo
   degradado animado): blob y gota se pintan opacos, así no se suman al solaparse y el goo funde formas
   opacas como en dark. Mismos valores y mismo cruce con --fade-p; en dark la máscara es blanca = sin efecto. */
#cta-blob-alpha stop{transition:stop-opacity .4s ease}
#cta-blob-alpha stop:nth-of-type(3){stop-opacity:calc(1 - .4 * var(--fade-p,0))}
#cta-blob-alpha stop:nth-of-type(4){stop-opacity:calc(1 - var(--fade-p,0))}
@media (prefers-reduced-motion:reduce){#cta-blob-fill stop,#cta-blob-alpha stop{transition:none}}

/* (2026-10-19) Aviso de privacidad del paso 2: link absoluto bajo las horas, no desplaza nada.
   Desktop: misma fila que "Skip, just email me" (margin-top 26), a la izquierda. Mobile: 16px bajo las horas. */
.time-field{position:relative}
.privacy-note{position:absolute;left:0;top:calc(100% + 16px);display:flex;align-items:center;gap:6px;font:400 14px/1.5 var(--mono);color:var(--body);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.privacy-note:hover{color:var(--accent)}
.privacy-note svg{width:16px;height:16px}
@media (min-width:768px){.privacy-note{top:calc(100% + 26px)}}