/* ==========================================================================
   Contactanos + gracias: page-specific layer on top of site.css.
   Every colour comes from the tokens in site.css. One motion idea per
   section, and motion that answers the visitor's action (hover, tap, focus,
   copy, submit). Reduced-motion users get the final states, no animation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero: quiet staggered entrance + "elegí cómo" channel chips
   -------------------------------------------------------------------------- */
.contact-hero { position: relative; overflow: hidden; }
.contact-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.contact-hero .lead { max-width: 46ch; }
.contact-hero__figure {
  display: none; position: relative; isolation: isolate; margin: 0;
  justify-self: end; width: min(100%, 26rem);
}
.contact-hero__photo {
  position: relative; aspect-ratio: 4 / 5; max-height: 34rem; border-radius: 2px; overflow: hidden;
  background: url("../../images/photos/hands-phone.webp") center / cover no-repeat;
}
.contact-hero__photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--cream) 0, transparent 35%), linear-gradient(to top, color-mix(in srgb, var(--blue) 45%, transparent), transparent 55%);
}
.contact-hero__figure::after {
  content: ""; position: absolute; left: 1.25rem; top: 1.25rem; right: -1.25rem; bottom: -1.25rem; z-index: -1;
  border: 1px solid var(--line-strong); border-radius: 2px; pointer-events: none;
}
@media (min-width: 861px) { .contact-hero__figure { display: block; } }
@media (max-width: 860px) { .contact-hero__grid { grid-template-columns: 1fr; } }

/* Entrance: only on this hero, four beats, no bounce */
.contact-hero [data-enter] { opacity: 0; transform: translateY(12px); animation: contact-enter var(--dur-slow) var(--ease-out) forwards; }
.contact-hero [data-enter="1"] { animation-delay: 60ms; }
.contact-hero [data-enter="2"] { animation-delay: 180ms; }
.contact-hero [data-enter="3"] { animation-delay: 320ms; }
.contact-hero [data-enter="4"] { animation-delay: 480ms; }
.contact-hero [data-enter="5"] { animation-delay: 300ms; }
@keyframes contact-enter { to { opacity: 1; transform: none; } }

.channels { margin-top: 2rem; }
.channels__label { display: block; font-size: var(--step--1); font-weight: 500; color: var(--ink-soft); margin-bottom: 0.75rem; }
.channels__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
  --chip: var(--blue); --chip-tint: var(--blue-tint);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 2.75rem; padding: 0.5rem 1.05rem 0.5rem 0.85rem;
  font-weight: 500; font-size: 0.95rem; color: var(--chip); white-space: nowrap;
  border: 1px solid var(--line-strong); border-radius: 999px; background: #fff;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.chip::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--chip-tint);
  transform: translateX(-101%);
  transition: transform var(--dur) var(--ease-out);
}
.chip svg { width: 1.15rem; height: 1.15rem; flex: none; }
.chip:hover, .chip:focus-visible { border-color: var(--chip); }
.chip:hover::before, .chip:focus-visible::before { transform: none; }
.chip:active { transform: translateY(1px); }
.chip--wa { --chip: var(--green); --chip-tint: var(--green-tint); }
.chip--book { background: var(--blue); color: var(--cream); border-color: var(--blue); }
.chip--book::before { background: var(--blue-soft); }
.chip--book:hover, .chip--book:focus-visible { color: var(--cream); border-color: var(--blue-soft); }

/* Live status pill: "abierto ahora / cerrado, abrimos ..." (JS fills it) */
.status {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: var(--step--1); font-weight: 500; color: var(--ink-soft);
}
.status__dot {
  position: relative; width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none;
  background: var(--ink-faint); transition: background var(--dur) var(--ease-out);
}
.status[data-state="open"] .status__dot { background: var(--green-soft); }
.status[data-state="open"] .status__dot::after {
  content: ""; position: absolute; inset: -0.3rem; border-radius: 50%;
  border: 1.5px solid var(--green-soft); opacity: 0;
  animation: status-ping 2.6s var(--ease-out) infinite;
}
@keyframes status-ping { 0% { transform: scale(0.5); opacity: 0.7; } 70%, 100% { transform: scale(1.15); opacity: 0; } }
.status strong { font-weight: 500; color: var(--ink); }
.channels .status { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   El estudio: action rows (copy / call / write) + integrated map
   -------------------------------------------------------------------------- */
.contact-info .title { margin-bottom: 0.25rem; }
.contact-rows.contact-list { gap: 0; margin-top: 1.25rem; border-top: 1px solid var(--line); }
.contact-rows li { position: relative; display: block; border-bottom: 1px solid var(--line); }
.row {
  position: relative; width: 100%; text-align: left;
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: 0.9rem; align-items: center;
  padding: 0.95rem 0.6rem 0.95rem 0.5rem; margin: 0 -0.5rem; width: calc(100% + 1rem);
  border-radius: 2px; color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out);
}
.row--static { cursor: default; }
.contact-rows .row svg { width: 1.35rem; height: 1.35rem; margin: 0; color: var(--blue); }
.contact-rows .row--wa svg { color: var(--green); }
.row__text { line-height: 1.35; min-width: 0; }
.row__text small { display: block; color: var(--ink-faint); font-size: 0.85rem; margin-top: 0.1rem; }
.row__action {
  display: inline-flex; align-items: center; gap: 0.35rem;
  flex: none; font-size: 0.85rem; font-weight: 500; color: var(--blue); white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
/* More specific than `.contact-rows .row svg` above, so no !important is needed */
.contact-rows .row .row__action svg { width: 1rem; height: 1rem; }
.row--wa .row__action { color: var(--green-soft); }
.row--copied .row__action { color: var(--green-soft); }
/* Rows are links or buttons (call, write, copy); the hours row is plain text
   and gets nothing. Hover = background only. */
@media (hover: hover) {
  .row__action { opacity: 0.75; }
  .row:not(.row--static):hover, .row:focus-visible { background: var(--cream-2); }
  .row:not(.row--static):hover .row__action, .row:focus-visible .row__action { opacity: 1; }
  .row--copied .row__action { opacity: 1; }
}
.contact-rows .row:focus-visible { outline-offset: -2px; }
.row--has-copy { padding-right: 3.4rem; }
.row__copy {
  position: absolute; right: -0.25rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  color: var(--ink-faint);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.row__copy svg { width: 1.1rem; height: 1.1rem; }
.row__copy:hover, .row__copy:focus-visible { color: var(--blue); background: var(--blue-tint); }
.row__copy.row--copied { color: var(--green-soft); background: var(--green-tint); }
.row__copy[data-feedback]::after {
  content: attr(data-feedback); position: absolute; right: calc(100% + 0.5rem); top: 50%; transform: translateY(-50%);
  padding: 0.25rem 0.55rem; font-size: 0.8rem; font-weight: 500; white-space: nowrap;
  color: var(--cream); background: var(--green-soft); border-radius: 2px;
  animation: contact-enter var(--dur-fast) var(--ease-out);
}
.contact-rows a:hover { text-decoration: none; color: var(--ink); }
.contact-info .status { margin-top: 0.35rem; }
.contact-info .btn-row { margin-top: 1.75rem; }

/* Map with a frame and a directions bar; the embed regains its colour while
   the pointer is over it (the map itself is interactive) */
.contact-map { position: relative; isolation: isolate; }
.contact-map::after {
  content: ""; position: absolute; left: 1.25rem; top: 1.25rem; right: -1.25rem; bottom: -1.25rem; z-index: -1;
  border: 1px solid var(--line-strong); border-radius: 2px; pointer-events: none;
}
.contact-map .map iframe { transition: filter var(--dur-slow) var(--ease-out); }
.contact-map .map:hover iframe, .contact-map .map:focus-within iframe { filter: saturate(1) contrast(1); }
.map__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 0.75rem; font-size: var(--step--1); color: var(--ink-soft);
}
.map__bar strong { color: var(--ink); font-weight: 500; }
@media (max-width: 820px) {
  .contact { grid-template-columns: 1fr; } /* same breakpoint as site.css, kept here so the page never depends on it */
  .contact-map::after { display: none; }
  .map__bar { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   Asesorías 1:1: "cómo es" strip + booking card
   -------------------------------------------------------------------------- */
.calendly-block__inner { align-items: start; }
.how-list { list-style: none; margin-top: 2.25rem; display: grid; gap: 0; border-top: 1px solid var(--on-dark-line); }
.how-item {
  position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid var(--on-dark-line);
}
.how-item::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--cream); transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--ease-in-out);
  transition-delay: calc(var(--i, 0) * 280ms + 200ms);
}
.how-item__num {
  font-family: var(--font-serif); font-size: var(--step-1); color: var(--on-dark-soft);
  transition: color var(--dur) var(--ease-out); transition-delay: calc(var(--i, 0) * 280ms + 200ms);
}
.how-item strong { display: block; font-weight: 500; font-size: var(--step-0); }
.how-item p { margin-top: 0.2rem; color: var(--on-dark-soft); font-size: var(--step--1); line-height: 1.5; }
.how-list.is-visible .how-item::after { transform: scaleX(1); }
.how-list.is-visible .how-item__num { color: var(--cream); }

.calendly-fallback.booking-card {
  padding: 0; border: 0; overflow: hidden; border-radius: 2px;
  background: var(--cream); color: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.booking-card__media {
  position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: var(--navy-deep);
}
.booking-card__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
}
.booking-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30, 33, 48, 0.75), transparent 60%);
}
.booking-card__badge {
  position: absolute; left: 1.25rem; bottom: 1rem; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.75rem; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--cream); border: 1px solid var(--on-dark-line); border-radius: 999px;
  background: rgba(30, 33, 48, 0.55); backdrop-filter: blur(6px);
}
.booking-card__badge svg { width: 0.95rem; height: 0.95rem; }
.booking-card__body { padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.calendly-fallback.booking-card p { color: var(--ink-soft); }
.booking-card__facts { list-style: none; display: grid; gap: 0.55rem; margin-top: 1.25rem; font-size: var(--step--1); color: var(--ink); }
.booking-card__facts li { display: flex; align-items: center; gap: 0.6rem; }
.booking-card__facts svg { width: 1.1rem; height: 1.1rem; color: var(--blue); flex: none; }
.booking-card .btn-row { align-items: center; margin-top: 1.5rem; }
.booking-card .text-link { font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   Dejanos tu consulta: two-column layout, inline validation, submit state
   -------------------------------------------------------------------------- */
.form-layout {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-rows: auto 1fr; grid-template-areas: "head form" "tips form"; gap: 0 clamp(2rem, 6vw, 6rem);
  align-content: start;
}
.form-layout .section-head { grid-area: head; margin-bottom: 0; }
.form-layout .contact-form { grid-area: form; }
.form-tips { grid-area: tips; align-self: start; list-style: none; display: grid; gap: 0.9rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.form-tips li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.7rem; align-items: start; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.5; }
.form-tips svg { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; color: var(--blue); }
.form-tips strong { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) {
  .form-layout { grid-template-columns: 1fr; grid-template-areas: "head" "form" "tips"; }
  .form-layout .section-head { margin-bottom: 1.5rem; }
  .form-tips { margin-top: 2rem; }
}

/* Topic chips: the visitor tells us the area, we prefix the message */
.topic { display: grid; gap: 0.5rem; }
.topic[hidden] { display: none; } /* only useful with JS: shown by contact.js */
.topic__label { font-weight: 500; font-size: var(--step--1); }
.topic__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.topic__btn {
  --t: var(--blue); --t-tint: var(--blue-tint);
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2.4rem; padding: 0.35rem 0.9rem;
  font-size: 0.9rem; font-weight: 500; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 999px; background: #fff;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.topic__btn::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--t); opacity: 0.55; transition: opacity var(--dur-fast) var(--ease-out); }
.topic__btn:hover { border-color: var(--t); color: var(--t); }
.topic__btn[aria-pressed="true"] { background: var(--t); border-color: var(--t); color: var(--cream); }
.topic__btn[aria-pressed="true"]::before { background: var(--cream); opacity: 1; }
.topic__btn--sucesiones { --t: var(--green); --t-tint: var(--green-tint); }
.topic__btn--familia { --t: var(--bordeaux); --t-tint: var(--bordeaux-tint); }

.contact-form .field { gap: 0.4rem; }
.field__control { position: relative; }
.field__control input, .field__control textarea { padding-right: 2.6rem; }
.field__check {
  position: absolute; right: 0.85rem; top: 0.95rem; width: 1.15rem; height: 1.15rem;
  color: var(--green-soft); opacity: 0; transform: scale(0.6);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out);
  pointer-events: none;
}
.field.is-valid .field__check { opacity: 1; transform: none; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--bordeaux-soft); }
.field.is-invalid input:focus, .field.is-invalid textarea:focus { border-color: var(--bordeaux); box-shadow: 0 0 0 3px var(--bordeaux-tint); }
.field.is-valid input, .field.is-valid textarea { border-color: var(--green-soft); }
.field.is-valid input:focus, .field.is-valid textarea:focus { box-shadow: 0 0 0 3px var(--green-tint); }
.field__hint {
  display: flex; justify-content: space-between; gap: 1rem;
  min-height: 1.3rem; font-size: 0.85rem; line-height: 1.3; color: var(--ink-faint);
  transition: color var(--dur-fast) var(--ease-out);
}
.field__hint span:first-child { flex: 1 1 auto; }
.field__count { flex: none; font-variant-numeric: tabular-nums; }
.field.is-invalid .field__hint { color: var(--bordeaux-soft); font-weight: 500; }
.field.is-valid .field__hint--msg { color: var(--green-soft); }
.contact-form .field label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.field__optional { font-weight: 400; color: var(--ink-faint); font-size: 0.8rem; }

.form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 0.25rem; }
.form__status { font-size: var(--step--1); color: var(--bordeaux-soft); font-weight: 500; min-height: 1.4rem; }
.form__status:empty { display: none; }

/* Submit button: label slides out, a small ring takes its place */
.btn--submit { position: relative; min-width: 12rem; justify-content: center; overflow: hidden; }
.btn--submit .btn__label, .btn--submit .btn__busy { transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out); }
.btn--submit .btn__busy {
  position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  opacity: 0; transform: translateY(100%);
}
.btn--submit .btn__busy::before {
  content: ""; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid rgba(255, 249, 243, 0.35); border-top-color: var(--cream);
  animation: submit-spin 0.9s linear infinite;
}
.btn--submit.is-loading { pointer-events: none; }
.btn--submit.is-loading .btn__label { opacity: 0; transform: translateY(-100%); }
.btn--submit.is-loading .btn__busy { opacity: 1; transform: none; }
@keyframes submit-spin { to { transform: rotate(360deg); } }
.contact-form.is-submitting { opacity: 0.85; }
.contact-form.is-shaking .field.is-invalid { animation: field-nudge var(--dur) var(--ease-out); }
@keyframes field-nudge { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* --------------------------------------------------------------------------
   Gracias: the tick draws itself, then "qué pasa ahora"
   -------------------------------------------------------------------------- */
.thanks-page { align-content: center; padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)); padding-bottom: clamp(3rem, 6vw, 5rem); }
.thanks-page .container { max-width: 44rem; }
.thanks-mark { width: 4.5rem; height: 4.5rem; margin: 0 auto 1.5rem; color: var(--green-soft); }
.thanks-mark svg { width: 100%; height: 100%; }
.thanks-mark circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: mark-draw 900ms var(--ease-out) 150ms forwards; }
.thanks-mark path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: mark-draw 500ms var(--ease-out) 850ms forwards; }
@keyframes mark-draw { to { stroke-dashoffset: 0; } }
.thanks-page [data-enter] { opacity: 0; transform: translateY(10px); animation: contact-enter var(--dur-slow) var(--ease-out) forwards; }
.thanks-page [data-enter="1"] { animation-delay: 400ms; }
.thanks-page [data-enter="2"] { animation-delay: 550ms; }
.thanks-page [data-enter="3"] { animation-delay: 700ms; }
.thanks-page [data-enter="4"] { animation-delay: 950ms; }
.thanks-page [data-enter="5"] { animation-delay: 1150ms; }
.next-steps {
  list-style: none; counter-reset: next; text-align: left;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  margin: 2.5rem auto 0; max-width: 44rem;
}
.next-steps li {
  position: relative; padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
}
.next-steps li::before {
  counter-increment: next; content: counter(next);
  display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; margin-bottom: 0.75rem;
  font-family: var(--font-serif); font-size: 0.95rem; color: var(--blue);
  border: 1px solid var(--line-strong); border-radius: 50%;
}
.next-steps strong { display: block; font-weight: 500; line-height: 1.3; }
.thanks-page .next-steps p { margin-top: 0.35rem; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.5; }
.thanks-page .status { margin-top: 1rem; justify-content: center; }
.thanks-page__aside { font-size: var(--step--1); color: var(--ink-faint); }
.thanks-page__aside a { color: var(--blue); font-weight: 500; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease-out); }
.thanks-page__aside a:hover { border-bottom-color: currentColor; }
@media (max-width: 700px) {
  .thanks-page .btn-row .btn { flex: 1 1 100%; justify-content: center; }
  .next-steps { grid-template-columns: 1fr; }
  .next-steps li { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; align-items: start; }
  .next-steps li::before { grid-row: span 2; margin-bottom: 0; }
  .thanks-page .next-steps p { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   Reduced motion: final states, no entrance, no ping, no draw
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .contact-hero [data-enter], .thanks-page [data-enter] { opacity: 1; transform: none; animation: none; }
  .status[data-state="open"] .status__dot::after { animation: none; display: none; }
  .how-item::after { transform: scaleX(1); }
  .how-item__num { color: var(--cream); }
  .thanks-mark circle, .thanks-mark path { stroke-dashoffset: 0; animation: none; }
  .chip::before { transition: none; }
  .btn--submit .btn__busy::before { animation: none; border-top-color: rgba(255, 249, 243, 0.35); }
  .contact-form.is-shaking .field.is-invalid { animation: none; }
}