/* ==========================================================================
   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; }

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 ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal-body li { margin-bottom: .5rem; }

.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);
}