/* Agenda tu llamada. Compartida por las dos variantes del home (no depende de data-hero). */

/* ===================== HEADER ===================== */
.ag-header { position: relative; isolation: isolate; }
.ag-flor {
  position: absolute; z-index: -1; left: -255px; top: -275px; width: min(44vw, 600px); height: auto;
  opacity: 0.55; pointer-events: none; transform: rotate(61deg);
}

/* ===================== MAIN ===================== */
.ag-main {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px;
  padding-top: clamp(32px, 4vw, 56px); padding-bottom: 120px;
}

/* ---- columna informativa (se pinta por encima de la flor de fondo) ---- */
.ag-info { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 32px; padding-top: 12px; position: relative; z-index: 1; }
.ag-eyebrow { font-size: 11px; font-weight: 600; color: var(--dua-marino); }
.ag-title { margin: 0; font-size: clamp(48px, 5.6vw, 84px); line-height: 1; font-weight: 500; letter-spacing: -0.035em; }
.ag-title .sig { display: block; margin-top: 0.06em; font-size: 0.9em; line-height: 1.05; white-space: nowrap; color: var(--dua-rosa-firma); }
.ag-lead { margin: 0; max-width: 500px; font-size: 19px; line-height: 1.55; color: var(--dua-texto-2); }
.ag-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; max-width: 520px; }
.ag-steps li {
  display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: baseline; padding: 18px 0;
  border-top: 1px solid var(--dua-linea);
}
.ag-steps li:last-child { border-bottom: 1px solid var(--dua-linea); }
.ag-steps__n { font-size: 12px; font-weight: 600; color: var(--dua-texto-4-sm); }
.ag-steps__t { display: flex; flex-direction: column; gap: 4px; }
.ag-steps__t strong { font-size: 21px; font-weight: 500; }
.ag-steps__t span { font-size: 16px; line-height: 1.5; color: var(--dua-texto-2); }
.ag-founders { margin: 0; display: flex; align-items: center; gap: 18px; max-width: 520px; }
.ag-founders img { flex: none; width: 96px; height: 96px; object-fit: cover; object-position: 50% 22%; border-radius: 50%; }
.ag-founders figcaption { display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.5; }
.ag-founders strong { font-size: 18px; font-weight: 500; }
.ag-founders figcaption span { color: var(--dua-texto-2); }
.ag-contact { display: flex; flex-direction: column; gap: 12px; }
.ag-contact__label { font-size: 11px; font-weight: 600; color: var(--dua-texto-3); }
.ag-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.ag-pills a {
  display: flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(48, 49, 79, 0.18); font-size: 15px; font-weight: 500; text-decoration: none;
}

/* ---- widget ---- */
.ag-widget { flex: 1.3 1 560px; min-width: 0; position: relative; isolation: isolate; }
.ag-flor-grande {
  position: absolute; z-index: -2; left: 60%; top: 46%; width: min(1100px, 150vw); height: auto;
  transform: translate(-50%, -50%) rotate(36deg); pointer-events: none; opacity: 0.75;
}
.ag-noscript { margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: var(--dua-texto-2); }
.ag-card { border-radius: 32px; background: rgba(255, 255, 255, 0.72); overflow: hidden; }
.ag-label { font-size: 11px; font-weight: 600; color: var(--dua-texto-3); }

/* 1 · tipo de reunión */
.ag-sec { display: flex; flex-direction: column; gap: 16px; padding: 30px 30px 26px; border-bottom: 1px solid rgba(48, 49, 79, 0.1); }
.ag-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.ag-tipo {
  position: relative; box-sizing: border-box; display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 20px;
  border: 1px solid rgba(48, 49, 79, 0.18); background: rgba(255, 255, 255, 0.6); color: var(--dua-marino); text-align: left; cursor: pointer;
}
.ag-tipo.is-on { border: 1.5px solid var(--dua-marino); background: #ffffff; }
.ag-tipo__dot { flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 999px; border: 1.5px solid rgba(48, 49, 79, 0.4); box-sizing: border-box; }
.ag-tipo.is-on .ag-tipo__dot { border: 6px solid var(--dua-cta); background: #ffffff; }
.ag-tipo__txt { display: flex; flex-direction: column; gap: 4px; }
.ag-tipo__txt strong { font-size: 19px; font-weight: 500; }
.ag-tipo__txt span { font-size: 15px; color: var(--dua-texto-2); }
.ag-hit { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ag-tipo:has(input:focus-visible), .ag-chip:has(input:focus-visible), .ag-hora:has(input:focus-visible) { outline: 2px solid var(--dua-marino); outline-offset: 3px; }

/* 2 · fecha y hora */
.ag-sec--fecha { flex-direction: row; flex-wrap: wrap; gap: 30px; padding: 26px 30px; }
.ag-cal { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ag-cal__head { display: flex; align-items: center; justify-content: space-between; }
.ag-cal__month { font-size: 22px; font-weight: 500; }
.ag-cal__nav { display: flex; gap: 6px; }
.ag-cal__btn {
  width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 1px solid rgba(48, 49, 79, 0.25); background: #ffffff;
  color: var(--dua-marino); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ag-cal__btn:disabled { border-color: rgba(48, 49, 79, 0.12); background: rgba(255, 255, 255, 0.6); color: rgba(48, 49, 79, 0.3); cursor: default; }
.ag-cal__dow, .ag-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ag-cal__dow { font-size: 10px; font-weight: 600; color: var(--dua-texto-3); text-align: center; }
.ag-cal__blank { height: 44px; }
.ag-day { height: 44px; padding: 0; border: 1px solid rgba(48, 49, 79, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.75); color: var(--dua-marino); font: 500 15px var(--dua-font-sans); cursor: pointer; }
.ag-day:disabled { border: 0; background: transparent; color: rgba(48, 49, 79, 0.28); font-weight: 400; cursor: default; }
.ag-day[aria-pressed="true"] { border: 0; background: var(--dua-cta); color: #ffffff; }
.ag-horas { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ag-horas__fecha { font-size: 17px; font-weight: 500; }
.ag-horas__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.ag-hora { position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; border: 1px solid rgba(48, 49, 79, 0.2); background: rgba(255, 255, 255, 0.75); color: var(--dua-marino); font: 400 15px var(--dua-font-sans); cursor: pointer; }
.ag-hora.is-on { border: 0; background: var(--dua-marino); color: #ffffff; font-weight: 500; }

/* 3 · tus datos */
.ag-datos { display: flex; flex-direction: column; gap: 18px; padding: 26px 30px 30px; }
.ag-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.ag-field { display: flex; flex-direction: column; gap: 8px; }
.ag-field label { font-size: 15px; font-weight: 500; }
.ag-opt { font-weight: 400; color: var(--dua-texto-3); }
.ag-field input {
  height: 52px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(48, 49, 79, 0.2); background: rgba(255, 255, 255, 0.85);
  color: var(--dua-marino); font: 16px var(--dua-font-sans); box-sizing: border-box; width: 100%;
}
.ag-field textarea {
  padding: 14px 18px; border-radius: 22px; border: 1px solid rgba(48, 49, 79, 0.2); background: rgba(255, 255, 255, 0.85);
  color: var(--dua-marino); font: 16px/1.5 var(--dua-font-sans); resize: vertical; box-sizing: border-box; width: 100%;
}
.ag-intereses { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ag-intereses legend { padding: 0 0 10px; font-size: 15px; font-weight: 500; }
.ag-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-chip {
  position: relative; box-sizing: border-box; display: flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(48, 49, 79, 0.2); background: rgba(255, 255, 255, 0.75); color: var(--dua-marino); font: 400 15px var(--dua-font-sans); cursor: pointer;
}
.ag-chip.is-on { border-color: var(--dua-marino); background: var(--dua-marino); color: #ffffff; }
.ag-optin { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--dua-texto-2); cursor: pointer; }
.ag-optin input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--dua-marino); }
.ag-error { margin: 0; font-size: 15px; line-height: 1.5; color: #b3123f; }
.ag-resumen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px;
  border-radius: 24px; background: rgba(241, 242, 247, 0.9);
}
.ag-resumen__txt { display: flex; flex-direction: column; gap: 2px; }
.ag-resumen__txt .mono { font-size: 10px; font-weight: 600; color: var(--dua-texto-3); }
.ag-resumen__txt > span:last-child { font-size: 17px; font-weight: 500; }
.ag-confirm {
  display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--dua-cta); color: #ffffff; font: 500 16px var(--dua-font-sans); cursor: pointer;
}

/* confirmada */
.ag-done { border-radius: 32px; overflow: hidden; color: #ffffff; }
.ag-done__in { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 60px 40px 68px; text-align: center; }
.ag-done__star { width: 150px; height: 171px; }
.ag-done__star .star-float { display: block; width: 100%; height: 100%; animation: dua-float-soft 6.5s ease-in-out infinite; }
.ag-done__star canvas { display: block; width: 100%; height: 100%; }
.ag-done__sig { font-size: 72px; line-height: 1; color: #ffffff; }
.ag-done h2 { margin: 0; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; }
.ag-done h2:focus { outline: none; }
.ag-done p { margin: 0; max-width: 440px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); }
.ag-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 8px; }
.ag-done__btn { min-height: 52px; padding: 0 24px; border-radius: 999px; font: 500 16px var(--dua-font-sans); cursor: pointer; }
.ag-done__btn--solid { border: 0; background: #ffffff; color: var(--dua-marino); }
.ag-done__btn--line { border: 1px solid rgba(255, 255, 255, 0.8); background: transparent; color: #ffffff; }
.ag-done :focus-visible { outline-color: #ffffff; }
.ag-done__home { display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; text-underline-offset: 6px; }
@keyframes dua-float-soft { 0%, 100% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(1.5px, -3px, 0); } 50% { transform: translate3d(-1px, -5px, 0); } 75% { transform: translate3d(-2px, -2px, 0); } }
@media (prefers-reduced-motion: reduce) { .ag-done__star .star-float { animation: none; } }

/* ===================== FOOTER (compacto) ===================== */
.ag-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-top: 48px; padding-bottom: 40px; }
.ag-footer__top img { width: 150px; height: auto; }
.ag-footer__top p { margin: 0; max-width: 340px; font-size: 16px; line-height: 1.5; color: var(--dua-footer-texto); }
.ag-footer__links { display: flex; flex-direction: column; gap: 0; font-size: 11px; font-weight: 500; color: var(--dua-footer-texto); }
.ag-footer__links a { display: flex; align-items: center; min-height: 24px; }
.ag-footer__bottom { padding-bottom: 28px; }
.ag-footer__bottom .footer__legal { padding-top: 20px; }

/* ===================== AJUSTES MÓVIL (una columna: información primero, widget después) ===================== */
@media (max-width: 720px) {
  .ag-main { gap: 40px; padding-bottom: 72px; }
  .ag-sec { padding: 22px 20px 20px; }
  .ag-sec--fecha { padding: 22px 20px; gap: 24px; }
  .ag-datos { padding: 22px 20px 24px; }
  .ag-done__in { padding: 44px 24px 52px; }
  .ag-footer__top { padding-top: 40px; }
}
