/* ============================================================
   Certificación ARP — Franco Pisso
   Reconstrucción limpia (HTML + CSS + JS) de la landing Elementor
   ============================================================ */

:root {
  --blue-dark:   #1F447D;
  --blue-medium: #5189F9;
  --blue-light:  #62A8FC;
  --blue-pale:   #AED3FF;
  --blue-grad-a: #1F447D;
  --blue-grad-b: #487FD5;
  --panel-grad-a: #E6EDFF;
  --panel-grad-b: #C0D6FD;
  --gray:  #F1F3FA;
  --card:  #F8F8F8;
  --ink:   #0B0B0B;
  --radius: 18px;
  --content: 960px;  /* caja de ancho única para todos los bloques */
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--blue-dark);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

p { margin: 0 0 1em; }

/* ---------- Tipografía utilitaria ---------- */

.eyebrow {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--blue-dark);
}
.eyebrow--dark { color: var(--blue-dark); }
.accent { color: var(--blue-medium); }

.section-title {
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 600;
  letter-spacing: 1.2px;
  line-height: 1.1;
  color: var(--blue-dark);
  text-align: center;
  margin: 0 auto 28px;
  max-width: 720px;
}

/* ---------- Botón ---------- */

.btn {
  display: inline-block;
  margin: 40px auto 0;
  padding: 16px 34px;
  background: var(--blue-dark);
  color: var(--gray);
  border: 1px solid var(--blue-dark);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn:hover,
.btn:focus-visible {
  background: #fff;
  color: var(--blue-dark);
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(31, 68, 125, 0.28);
}
.btn:active { transform: translateY(-1px); }

/* Contenedor centrado para botones sueltos dentro de section */
.steps > .btn { display: block; width: max-content; }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  background: linear-gradient(156deg, var(--blue-grad-a) 0%, var(--blue-grad-b) 100%);
  padding: 165px 20px 110px;
  display: flex;
  justify-content: center;
}

.hero__card,
.cta__card {
  width: min(100%, var(--content));
  background: var(--blue-pale);
  border: 1px solid var(--card);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* El card del hero baja sobre la sección siguiente */
.hero__card { margin-bottom: -300px; position: relative; z-index: 9; }

.hero__media,
.cta__media {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-grad-a) 0%, var(--panel-grad-b) 100%);
}
.hero__media img,
.cta__media img {
  border-radius: 10px;
  filter:
    drop-shadow(0 3px 5px rgba(31, 68, 125, 0.28))
    drop-shadow(20px 30px 34px rgba(31, 68, 125, 0.42));
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), filter .5s ease;
}
.hero__card:hover .hero__media img,
.cta__card:hover .cta__media img {
  transform: scale(1.035);
  filter:
    drop-shadow(0 4px 7px rgba(31, 68, 125, 0.30))
    drop-shadow(26px 38px 44px rgba(31, 68, 125, 0.46));
}

.hero__panel,
.cta__panel {
  background: var(--card);
  border-radius: var(--radius);
  padding: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.hero__panel h1 { text-align: left; }
.hero__panel p {
  text-align: left;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--blue-dark);
  margin: 0;
}

/* Segunda fila del card del hero: ocupa todo el ancho */
.hero__intro {
  grid-column: 1 / -1;
  background: var(--card);
  border-radius: var(--radius);
  padding: 32px 46px;
  text-align: center;
}
.hero__intro p {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--blue-dark);
}
.hero__intro p:last-child { margin-bottom: 0; }
.hero__intro-mark { color: var(--blue-medium); }

/* ============================================================
   PASOS — Cómo obtener tu certificado
   ============================================================ */

.steps {
  background: var(--gray);
  padding: 100px 20px;
  text-align: center;
}
.section--overlap { padding-top: 300px; }

.approval {
  max-width: var(--content);
  margin: 0 auto;
}
.approval__title {
  margin: 0 0 22px;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--blue-dark);
}
/* Bloque único con divisiones internas: los 3 ítems son una misma idea */
.approval__grid {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--blue-medium);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat-card {
  padding: 20px 28px;
  text-align: center;
  transition: background-color .25s ease;
}
.stat-card:not(:last-child) {
  border-bottom: 1px solid rgba(81, 137, 249, 0.28);
}
.stat-card:hover { background: #EDF3FF; }
.stat-card__label {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .6px;
  line-height: 1.4;
  color: var(--blue-dark);
}
/* Mismo tamaño y peso que el texto; solo cambia el color */
.stat-card__value { color: var(--blue-medium); }

/* ============================================================
   ES PARA VOS SI...
   ============================================================ */

/* ============================================================
   COMPARATIVA
   ============================================================ */

.compare {
  background: var(--gray);
  padding: 100px 20px;
  display: flex;
  justify-content: center;
}
.compare__table {
  width: min(100%, var(--content));
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(31, 68, 125, 0.12);
}
.compare__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
}
.compare__row:not(:last-child):not(.compare__row--head) {
  border-bottom: 1px solid #E5EBF6;
}

/* Celdas de contenido */
.compare__cell {
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--blue-dark);
  background: #fff;
  display: flex;
  align-items: center;
  transition: background-color .2s ease;
}
.compare__row:not(.compare__row--head):hover .compare__cell { background: #F3F7FF; }
.compare__row:not(.compare__row--head):hover .compare__label { background: #E9EEF9; }
.compare__row:not(.compare__row--head):hover .compare__cell:nth-child(2) { background: #E2ECFF; }
/* Columna destacada: certificado de validez internacional */
.compare__row:not(.compare__row--head) .compare__cell:nth-child(2) {
  background: #EDF3FF;
  box-shadow: inset 1px 0 0 #D9E4F8, inset -1px 0 0 #D9E4F8;
}
/* Columna rótulo (izquierda) */
.compare__label {
  background: var(--gray);
  font-weight: 700;
  letter-spacing: .3px;
  border-right: 1px solid #E5EBF6;
}

/* Fila de encabezado */
.compare__row--head .compare__cell {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  border: 0;
}
.compare__cell--corner {
  background: var(--gray);
  box-shadow: none;
  border: 0;
}
.compare__cell--best {
  background: var(--blue-dark);
  color: var(--card);
}
.compare__cell--alt {
  background: var(--blue-grad-b);
  color: var(--card);
}
.compare__cell--best small,
.compare__cell--alt small {
  display: block;
  font-weight: 500;
  text-transform: uppercase;
  opacity: .78;
  margin-top: 4px;
}

/* ============================================================
   FAQ
   ============================================================ */

.faq {
  background: #fff;
  padding: 100px 20px;
}
.faq__cols {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.faq__col { display: flex; flex-direction: column; gap: 12px; }

.faq details {
  border: 1px solid var(--blue-pale);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq details:hover { border-color: var(--blue-light); }
.faq details[open] {
  border-color: var(--blue-medium);
  box-shadow: 0 10px 24px rgba(31, 68, 125, 0.10);
}
.faq details[open] .faq__body { animation: faqReveal .32s ease both; }
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px;
  font-weight: 500;
  color: var(--blue-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: color .25s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue-light); }
.faq summary::after {
  content: "+";
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .3s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__body {
  padding: 0 18px 18px;
  font-size: 15px;
  font-weight: 300;
  color: var(--blue-dark);
}
.faq__body p { margin: 0; }

/* ============================================================
   CTA FINAL
   ============================================================ */

.cta {
  background: linear-gradient(156deg, var(--blue-grad-a) 0%, var(--blue-grad-b) 100%);
  padding: 100px 20px;
  display: flex;
  justify-content: center;
}
.cta__panel .btn { margin-top: 24px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .hero { padding: 100px 20px 60px; }
  .cta { padding: 60px 20px; }
  .hero__card, .cta__card { width: 100%; }
  .compare__table { width: 100%; }
}

@media (max-width: 768px) {
  .hero__card, .cta__card { grid-template-columns: 1fr; }
  .hero__card { margin-bottom: -180px; }
  .hero__panel, .cta__panel, .hero__intro { padding: 28px; }

  .steps, .compare, .faq { padding: 60px 20px; }
  /* gana al shorthand de arriba: deja sitio para el overlap del card del hero */
  .steps.section--overlap { padding-top: 240px; }
  .stat-card { padding: 16px 20px; }

  .faq__cols { grid-template-columns: 1fr; }

  /* La comparativa pasa a tarjetas apiladas */
  .compare__table { box-shadow: 0 10px 24px rgba(31, 68, 125, 0.12); }
  .compare__row {
    grid-template-columns: 1fr;
    margin: 14px;
    border: 1px solid var(--blue-pale);
    border-radius: 12px;
    overflow: hidden;
  }
  .compare__row--head { display: none; }
  .compare__row:not(:last-child):not(.compare__row--head) { border-bottom: 1px solid var(--blue-pale); }
  .compare__cell { display: block; border: 0; }
  .compare__label {
    background: var(--blue-dark);
    color: var(--card);
    border-right: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
  }
  .compare__row:not(.compare__row--head) .compare__cell:nth-child(2) {
    background: #EDF3FF;
    box-shadow: none;
  }
  .compare__row:not(.compare__row--head) .compare__cell:nth-child(3) { background: #fff; }
  .compare__row .compare__cell:nth-child(2)::before { content: "Certificado ARP: "; font-weight: 700; }
  .compare__row .compare__cell:nth-child(3)::before { content: "Certificado común: "; font-weight: 700; }
}

/* ============================================================
   ANIMACIONES DE INTRO (scroll reveal)
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .js-anim [data-anim] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
  }
  .js-anim [data-anim].is-in {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   REDUCED MOTION — desactiva todo el movimiento
   ============================================================ */

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