/* ==========================================================================
   Landing AMC Financiero
   Replica del sistema visual del original (GoHighLevel) en CSS propio.

   Paleta y tipografias tomadas del original:
     teal  #02798c   header, footer, botones, acentos
     fondo #eef1f5
     titulares #2c3345 / cuerpo #607179
     Poppins (titulares) + Lato (cuerpo)
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root {
  --teal:        #02798c;
  --teal-dark:   #01606f;
  --teal-darker: #014c58;

  --bg:          #eef1f5;
  --white:       #ffffff;
  --ink:         #2c3345;
  --body:        #607179;
  --muted:       #8c8c8c;
  --border:      #d0d5dd;
  --border-soft: #e4e8ee;
  --chip:        #f5f6f8;
  --danger:      #c0392b;

  --font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;

  --shadow-card: 0 1px 3px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .05);
  --shadow-btn:  0 2px 8px rgba(2, 121, 140, .25);

  --pad-section: clamp(2.5rem, 6vw, 4.5rem);
}

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* `hidden` debe ganar siempre, tambien sobre clases con display propio
   (.modal, .ag-estado, .btn...): sin esto, un display:flex lo anula. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.25;
  text-wrap: balance;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--teal-dark); }

/* foco visible y consistente en todo lo interactivo */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --- utilidades --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.container--narrow  { max-width: 1010px; }
.container--reading { max-width: 780px; }

.accent { color: var(--teal); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--white);
  color: var(--teal);
  padding: .75rem 1.25rem;
  font-weight: 700;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* --- header ------------------------------------------------------------- */
.site-header {
  background: var(--teal);
  padding: .85rem 1rem;
  display: flex;
  justify-content: center;
}
.site-logo { width: clamp(150px, 22vw, 195px); height: auto; }

/* --- hero --------------------------------------------------------------- */
.hero {
  padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}

.eyebrow {
  font-size: clamp(.875rem, 1.6vw, 1rem);
  color: var(--body);
  margin-bottom: .85rem;
}

.hero-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 1.15rem;
  /* `balance` reparte las lineas y deja el titular mas estrecho que el
     original; `pretty` solo evita palabras huerfanas y respeta el ancho */
  text-wrap: pretty;
}

.hero-sub {
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: 1.75rem;
}
.hero-sub .accent { font-weight: 700; }

/* --- botones ------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn--primary {
  background: var(--teal);
  color: var(--white);
  padding: .95rem 2.25rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-btn);
}
.btn--primary:hover  { background: var(--teal-dark); color: var(--white); transform: translateY(-1px); }
.btn--primary:active { background: var(--teal-darker); transform: none; }

.btn--pill  { border-radius: 999px; padding-inline: clamp(1.5rem, 4vw, 2.5rem); }
.btn--block { display: block; width: 100%; padding-inline: 1rem; }

/* --- cards -------------------------------------------------------------- */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.card--form { max-width: 560px; }
.card--wide { max-width: 940px; }

.form-section { padding: 0 clamp(1rem, 4vw, 2rem) var(--pad-section); }

/* --- formulario --------------------------------------------------------- */
.form-intro {
  font-size: .9375rem;
  line-height: 1.65;
  margin-bottom: 1.75rem;
}
/* el original justifica el texto tambien en movil, donde produce
   "rios" de espacio en blanco; aqui solo se justifica con ancho suficiente */
@media (min-width: 40rem) {
  .form-intro { text-align: justify; }
}

.form-flash {
  background: #fdf2f2;
  border: 1px solid #f5c6cb;
  border-left: 4px solid var(--danger);
  color: #7d2f28;
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  font-size: .9375rem;
  margin-bottom: 1.5rem;
}

.row { display: grid; gap: 1.15rem; }
@media (min-width: 34rem) {
  .row--2 { grid-template-columns: 1fr 1fr; }
}

.field { margin-bottom: 1.15rem; border: 0; padding: 0; min-width: 0; }
.row .field { margin-bottom: 0; }

/* `:not(.choice)` es imprescindible: las opciones de radio y el checkbox de
   consentimiento tambien son <label> hijos directos de .field, y sin excluirlos
   este selector (0,1,1) le gana en especificidad a `.choice` (0,1,0) y le pisa
   el padding a 0, dejando las cajitas grises pegadas al texto e invisibles. */
.field > label:not(.choice),
.field legend {
  display: block;
  font-size: .9375rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: .45rem;
  padding: 0;
}
.field legend { margin-bottom: .7rem; }

.req { color: var(--body); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.55; }

.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 1; }

.field input:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(2, 121, 140, .14);
}

/* prefijo telefonico fijo (+56), en vez del selector de paises del original */
.input-group { display: flex; align-items: stretch; }
.input-prefix {
  display: flex;
  align-items: center;
  padding-inline: .8rem;
  font-size: .9375rem;
  color: var(--body);
  background: var(--chip);
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  white-space: nowrap;
}
.input-group input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }

/* --- radios y checkbox -------------------------------------------------- */
.field--choices { display: block; }

/* Igual que el original: la caja de cada opcion se ajusta al largo de su
   etiqueta en vez de ocupar todo el ancho del formulario. En movil se estira
   para que el area tactil no quede diminuta. */
.choice {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: flex-start;
  gap: .6rem;
  background: var(--chip);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: .6rem .9rem;
  margin-bottom: .5rem;
  font-size: .9375rem;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.field--choices .choice { display: flex; }
.choice:hover { background: #eef0f3; }

@media (max-width: 33.9375rem) {
  .field--choices .choice { width: 100%; }
}

.choice input {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: .15rem 0 0;
  accent-color: var(--teal);
  cursor: pointer;
}
.choice:has(input:checked) {
  background: rgba(2, 121, 140, .07);
  border-color: rgba(2, 121, 140, .35);
}

.field--consent { margin-top: 1.5rem; }
.choice--check {
  display: flex;
  width: 100%;
  background: transparent;
  padding: 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--body);
}
.choice--check:hover { background: transparent; }

.field-error {
  color: var(--danger);
  font-size: .8125rem;
  margin: .4rem 0 0;
}
.has-error input,
.has-error textarea { border-color: var(--danger); }
.has-error legend { color: var(--danger); }

.form-note {
  font-size: .8125rem;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  margin: 1.5rem 0 0;
}

/* honeypot: fuera de pantalla, no display:none (algunos bots lo detectan) */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- frase de posicionamiento ------------------------------------------- */
.statement { padding: 0 0 var(--pad-section); text-align: center; }
.statement-title {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 700;
}

/* --- programa TAX ------------------------------------------------------- */
.programa { padding: 0 clamp(1rem, 4vw, 2rem) var(--pad-section); }

.programa-title {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  text-align: center;
  margin: 1.75rem 0 1.25rem;
}

.checklist { list-style: none; margin: 0 auto; padding: 0; max-width: 44rem; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: clamp(.9375rem, 1.5vw, 1.0625rem);
  color: var(--ink);
  padding: .35rem 0;
}
.check { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: .2rem; }
.check circle { fill: var(--teal); }

.programa-cta { display: block; width: fit-content; margin: 2rem auto 0; }

/* --- carrusel ----------------------------------------------------------- */
.carousel { position: relative; }

.carousel-viewport {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--chip);
}

.carousel-track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.carousel-slide { flex: 0 0 100%; min-width: 0; }
.carousel-slide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .82);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .18);
  transition: background-color .15s ease;
}
.carousel-nav:hover { background: var(--white); }
.carousel-nav--prev { left: .75rem; }
.carousel-nav--next { right: .75rem; }
.carousel-nav svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-top: .9rem;
}
.carousel-dot {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c6ccd4;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.carousel-dot[aria-selected="true"] { background: var(--teal); transform: scale(1.25); }

/* --- footer ------------------------------------------------------------- */
.site-footer {
  background: var(--teal);
  color: rgba(255, 255, 255, .92);
  padding: clamp(2.25rem, 5vw, 3.5rem) 0 2rem;
  text-align: center;
  font-size: .75rem;
  line-height: 1.55;
}

.footer-logo {
  width: clamp(150px, 22vw, 195px);
  margin: 0 auto 1.5rem;
}
.footer-logo--small { width: 150px; margin-bottom: 0; }

.footer-tagline,
.footer-copy { margin-bottom: .35rem; }

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  margin: .5rem 0 1.75rem;
}
.footer-links a { color: rgba(255, 255, 255, .92); text-decoration: none; }
.footer-links a:hover { color: var(--white); text-decoration: underline; }
.footer-links--bottom { margin: 2rem 0 0; gap: .5rem clamp(2rem, 20vw, 12rem); }
.footer-links--bottom a { text-decoration: underline; }

.footer-legal {
  max-width: 68rem;
  margin-inline: auto;
  color: rgba(255, 255, 255, .82);
}
.footer-legal p { margin-bottom: .85rem; }

.footer-bottom {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  justify-items: center;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  text-align: center;
}
@media (min-width: 48rem) {
  .footer-bottom {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 2.5rem;
    text-align: left;
    justify-items: start;
  }
}

.footer-about { font-size: .8125rem; max-width: 34rem; margin: 0; }
.footer-hours { font-size: .8125rem; }
.footer-hours p { margin: 0; }
.footer-hours-title { font-family: var(--font-head); font-weight: 700; margin-bottom: .2rem; }

/* --- paginas legales ---------------------------------------------------- */
.legal { padding: clamp(2rem, 5vw, 3.5rem) 0 var(--pad-section); }
.legal .eyebrow { text-align: center; }

.legal-title {
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: .6rem;
}
.legal-updated {
  text-align: center;
  font-size: .875rem;
  color: var(--muted);
  margin-bottom: 2.5rem;
}

.legal-body {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  font-size: .9375rem;
}
.legal-body h2 {
  font-size: 1.1875rem;
  font-weight: 700;
  margin: 2.25rem 0 .85rem;
}
.legal-body h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 1.75rem 0 .65rem;
}
.legal-body h4 {
  font-size: .9375rem;
  font-weight: 600;
  margin: 1.4rem 0 .5rem;
}
.legal-body :is(h2, h3, h4):first-child { margin-top: 0; }
.legal-body :is(ul, ol) { margin: 0 0 1rem; padding-left: 1.35rem; }
.legal-body li { margin-bottom: .5rem; }
.legal-body a { overflow-wrap: anywhere; }

/* --- clases que vienen del documento original ------------------------------
   Se conservan tal cual para que el texto quede 1 a 1 con el sitio de AMC. */

/* parrafo de entrada: el marco legal que abre el documento */
.legal-body .intro {
  font-size: 1rem;
  color: var(--ink);
}

/* cada seccion numerada */
.legal-body .block { margin-top: 2.25rem; }
.legal-body .block:first-child { margin-top: 0; }

/* el termino que abre un parrafo, en negrita ("Principio de licitud...:") */
.legal-body .lead-term {
  font-weight: 700;
  color: var(--ink);
}

/* Parrafo de descargo en mayusculas (terminos de servicio). Las mayusculas las
   pone el CSS, igual que en el original: el texto fuente esta en caja normal,
   asi que se puede copiar y leer sin gritos. */
.legal-body .caps {
  text-transform: uppercase;
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .3px;
  color: var(--ink);
}

/* Los h4 del original van en teal para distinguirse de los h3 */
.legal-body h4 { color: var(--teal-dark); }

/* --- ficha de identidad de la empresa -------------------------------------- */
.legal-body .identity {
  background: var(--bg);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
}

.legal-body .identity dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5rem 1.1rem;
  margin: 0;
}

.legal-body .identity dt {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.legal-body .identity dd {
  margin: 0;
  color: var(--body);
}

/* En movil no cabe la etiqueta y el valor en la misma fila sin partir palabras,
   asi que el valor pasa debajo de su etiqueta. */
@media (max-width: 34rem) {
  .legal-body .identity dl { grid-template-columns: 1fr; gap: .15rem; }
  .legal-body .identity dt { margin-top: .6rem; }
  .legal-body .identity dt:first-child { margin-top: 0; }
}

.legal-back { text-align: center; margin-top: 2rem; font-size: .9375rem; }

/* --- pagina de gracias -------------------------------------------------- */
.gracias {
  min-height: 60vh;
  display: grid;
  place-items: center;
  padding: var(--pad-section) clamp(1rem, 4vw, 2rem);
  text-align: center;
}
.gracias .card { max-width: 620px; }

.gracias-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.5rem;
}
.gracias-icon circle { fill: var(--teal); }

.gracias-title {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  margin-bottom: .85rem;
}
.gracias-text { font-size: 1.0625rem; margin-bottom: 1.75rem; }
.gracias-steps {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  text-align: left;
  max-width: 30rem;
  margin-inline: auto;
}
.gracias-steps li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: .4rem 0;
  font-size: .9375rem;
  color: var(--ink);
}

/* ==========================================================================
   Agenda (modal de la pagina de gracias) y administracion
   ========================================================================== */

.gracias-cita {
  font-family: var(--font-head);
  font-size: 1.125rem;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.gracias-tz { color: var(--muted); font-size: .9rem; font-family: var(--font-body); }
.gracias-nota { font-size: .875rem; color: var(--muted); margin-top: 1rem; }
.gracias-icon--aviso circle { fill: #b7791f; }

.btn--secondary {
  background: var(--chip);
  color: var(--ink);
  padding: .95rem 1.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.btn--secondary:hover { background: var(--border-soft); }

.btn--link {
  background: none;
  color: var(--danger);
  padding: .95rem 1rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.modal-abierto { overflow: hidden; }

/* --- modal -------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44, 51, 69, .6);
  backdrop-filter: blur(2px);
}

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(16, 24, 40, .25);
  padding: clamp(1.25rem, 3vw, 2rem);
  animation: modal-in .22s ease-out;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .modal-panel { animation: none; } }

.modal-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--chip);
  color: var(--body);
  cursor: pointer;
}
.modal-close:hover { background: var(--border-soft); color: var(--ink); }

.modal-head { margin-bottom: 1.25rem; padding-right: 2.5rem; }
.modal-head h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin-bottom: .3rem; }
.modal-sub { font-size: .9rem; color: var(--muted); }

/* --- estado ------------------------------------------------------------- */
.ag-estado {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 2.5rem 1rem;
  justify-content: center;
  text-align: center;
  color: var(--body);
  font-size: .95rem;
}
.ag-estado--error { color: var(--ink); flex-direction: column; }

.ag-spinner {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  border-radius: 50%;
  border: 3px solid var(--border-soft);
  border-top-color: var(--teal);
  animation: ag-spin .8s linear infinite;
}
@keyframes ag-spin { to { transform: rotate(360deg); } }

/* --- picker: calendario + horas ---------------------------------------- */
.ag-picker {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 40rem) {
  .ag-picker { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.ag-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.ag-cal-titulo { font-family: var(--font-head); font-weight: 600; color: var(--ink); }

.ag-cal-btn {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.ag-cal-btn:hover:not(:disabled) { background: var(--chip); }
.ag-cal-btn:disabled { opacity: .3; cursor: default; }

.ag-cal-dow, .ag-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .25rem;
}
.ag-cal-dow span {
  text-align: center;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  padding-bottom: .35rem;
}

.ag-dia {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--muted);
  cursor: default;
  position: relative;
}
.ag-dia--hueco { visibility: hidden; }
.ag-dia--libre {
  background: rgba(2, 121, 140, .1);
  color: var(--teal-dark);
  font-weight: 700;
  cursor: pointer;
}
.ag-dia--libre:hover { background: rgba(2, 121, 140, .2); }
.ag-dia--activo, .ag-dia--activo:hover { background: var(--teal); color: var(--white); }
.ag-dia--hoy::after {
  content: '';
  position: absolute;
  bottom: 14%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.ag-horas-titulo {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .75rem;
  min-height: 2.25rem;
  display: flex;
  align-items: center;
}
.ag-horas-vacio { font-size: .9rem; color: var(--muted); }
.ag-horas-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: .5rem;
  max-height: 20rem;
  overflow-y: auto;
  padding-right: .25rem;
}
@media (min-width: 40rem) {
  .ag-horas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ag-hora {
  padding: .7rem .5rem;
  border: 1.5px solid var(--teal);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--teal-dark);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ag-hora:hover { background: var(--teal); color: var(--white); }

/* --- confirmar / listo -------------------------------------------------- */
.ag-confirmar, .ag-listo { text-align: center; padding: .5rem 0; }
.ag-listo .gracias-icon { margin-bottom: 1rem; }
.ag-listo-titulo { font-size: 1.25rem; margin-bottom: .75rem; }

.ag-resumen {
  font-family: var(--font-head);
  font-size: 1.125rem;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.ag-resumen strong { display: block; font-size: 1.25rem; }
.ag-resumen span { color: var(--body); font-family: var(--font-body); }

.ag-confirmar-texto { font-size: .95rem; max-width: 34rem; margin-inline: auto; }

.ag-error {
  background: #fdf2f2;
  border: 1px solid #f5c6cb;
  border-left: 4px solid var(--danger);
  color: #7d2f28;
  border-radius: var(--radius-sm);
  padding: .7rem 1rem;
  font-size: .9rem;
  text-align: left;
  max-width: 34rem;
  margin: 0 auto 1rem;
}

.ag-botones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 1.25rem;
}
.ag-botones .btn:disabled { opacity: .6; cursor: wait; transform: none; }

/* --- administracion ----------------------------------------------------- */
.admin {
  padding: var(--pad-section) clamp(1rem, 4vw, 2rem);
}
.admin .card { max-width: 640px; }
.admin-title { font-size: 1.5rem; margin-bottom: .25rem; }
.admin-sub { color: var(--muted); margin-bottom: 1.5rem; }
.admin-text { font-size: .95rem; }
.admin-text code { background: var(--chip); padding: .1rem .35rem; border-radius: 4px; font-size: .85em; }

.admin-flash {
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  font-size: .95rem;
  margin-bottom: 1.5rem;
  border: 1px solid;
}
.admin-flash--ok    { background: #eefaf3; border-color: #b8e2c8; color: #0f5a2e; }
.admin-flash--error { background: #fdf2f2; border-color: #f5c6cb; color: #7d2f28; }

.admin-estado {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5rem 1.25rem;
  margin: 0 0 1.5rem;
  font-size: .95rem;
}
.admin-estado dt { color: var(--muted); }
.admin-estado dd { margin: 0; color: var(--ink); font-weight: 600; word-break: break-word; }
.admin-error { color: var(--danger); font-weight: 400; font-size: .9rem; }

.admin-dot {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  margin-right: .35rem;
  vertical-align: middle;
}
.admin-dot--ok  { background: #0f7b3f; }
.admin-dot--off { background: var(--muted); }

.admin-prueba {
  background: var(--chip);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  font-size: .9rem;
  margin-bottom: 1.5rem;
}

.admin-pasos { font-size: .95rem; padding-left: 1.25rem; margin: 1rem 0 1.5rem; }
.admin-pasos li { margin-bottom: .4rem; }

.admin-acciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.btn--google { display: inline-flex; align-items: center; gap: .6rem; }
.btn--google svg { background: #fff; border-radius: 50%; padding: 2px; }