/**
 * REFORMAS YAMYLU — Sección Garantía Contractual
 * DESIGN_SYSTEM.md §16.02
 * Fondo: #1A2C5B (Navy) · Layout centrado · Tipografía protagonista
 * La sección más poderosa de la landing.
 */

/* ═══════════════════════════════════════════
   ESTRUCTURA PRINCIPAL
═══════════════════════════════════════════ */

.garantia {
  position: relative;
  background-color: var(--color-navy);
  padding: var(--space-3xl) 0;
  overflow: hidden;
}

/* Línea estructural superior — transición desde hero */
.garantia::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(201, 164, 74, 0.25) 20%,
    rgba(201, 164, 74, 0.25) 80%,
    transparent 100%
  );
}

/* Línea estructural inferior */
.garantia::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(201, 164, 74, 0.18) 20%,
    rgba(201, 164, 74, 0.18) 80%,
    transparent 100%
  );
}

/* ═══════════════════════════════════════════
   WATERMARK — FIRMA VISUAL PREMIUM
   Logo como elemento editorial de fondo
═══════════════════════════════════════════ */

.garantia__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(380px, 64vw, 700px);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.garantia__watermark img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.08;
  filter: brightness(2.4) saturate(0.15);
}

.garantia__container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════
   EYEBROW — LABEL SUPERIOR
═══════════════════════════════════════════ */

.garantia__eyebrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.garantia__eyebrow-line {
  display: block;
  width: 0;
  height: 1px;
  background: var(--color-gold-dim);
  /* Animación propia via JS class */
  transition: width 800ms var(--ease-premium) 200ms;
}

.garantia__eyebrow.revealed .garantia__eyebrow-line {
  width: 40px;
}

.garantia__eyebrow-text {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-silver);
}

/* ═══════════════════════════════════════════
   COMPOSICIÓN DEL NÚMERO
   El elemento más importante de toda la landing
═══════════════════════════════════════════ */

.garantia__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--space-lg);
  position: relative;
  width: 100%;
}

/* Override base reveal: el stage solo hace fade, sin translateY */
.garantia__stage.reveal {
  transform: none;
}

/* ─── Líneas arquitectónicas laterales ─── */
.garantia__rail {
  display: block;
  flex-shrink: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(201, 164, 74, 0.30) 100%
  );
  transition: width 1200ms var(--ease-premium) 700ms;
}

.garantia__rail--left {
  background: linear-gradient(
    to left,
    transparent 0%,
    rgba(201, 164, 74, 0.30) 100%
  );
}

.garantia__stage.revealed .garantia__rail--left,
.garantia__stage.revealed .garantia__rail--right {
  width: clamp(40px, 7vw, 120px);
}

/* ─── El número "10%" — tratamiento tipográfico premium ─── */
/* El "10" domina. El "%" es proporcional y más pequeño.     */
/* Tratamiento estándar en marcas de lujo y Apple.           */

.garantia__number {
  display: inline-flex;
  align-items: flex-start;
  padding: 0 clamp(16px, 2vw, 40px);
  user-select: none;

  /* Animación propia dentro del stage */
  opacity: 0;
  transform: scale(0.94) translateY(14px);
  transition:
    opacity  900ms var(--ease-premium) 150ms,
    transform 1100ms var(--ease-premium) 150ms;
}

.garantia__stage.revealed .garantia__number {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Dígitos — protagonistas absolutos */
.garantia__number-int {
  font-family: var(--font-display);
  font-size: clamp(100px, 13vw, 210px);
  font-weight: 300;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--color-gold);
  /* Fuerza cifras lineales modernas en lugar de old-style figures */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* Símbolo % — refinado, proporcional, anclado arriba */
.garantia__number-pct {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.2vw, 84px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-gold);
  opacity: 0.80;
  margin-top: clamp(10px, 1.2vw, 20px);
  margin-left: clamp(4px, 0.4vw, 8px);
}

/* ═══════════════════════════════════════════
   STATEMENT — PROMESA PRINCIPAL
   Cormorant Italic — el peso emocional
═══════════════════════════════════════════ */

.garantia__statement {
  margin-bottom: var(--space-lg);
  max-width: 680px;
}

.garantia__statement-line {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: rgba(244, 239, 230, 0.85);
}

.garantia__statement-line--italic {
  font-style: italic;
  font-weight: 400;
  color: var(--color-white);
}

/* "10%" dentro del statement — eco visual del número grande */
.garantia__statement-gold {
  color: var(--color-gold);
  font-style: italic;
}

/* ═══════════════════════════════════════════
   LÍNEA DIVISORIA — SEPARADOR EDITORIAL
═══════════════════════════════════════════ */

.garantia__rule {
  width: 0;
  height: 1px;
  background: var(--color-gold-dim);
  margin: 0 auto var(--space-lg);
  /* Override reveal: animar width en lugar de translateY */
  transform: none !important;
  transition: width 900ms var(--ease-premium) 100ms, opacity 400ms ease 100ms;
}

.garantia__rule.revealed {
  width: 64px;
}

/* ═══════════════════════════════════════════
   CUERPO EXPLICATIVO
   DM Sans — la información
═══════════════════════════════════════════ */

.garantia__body {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-white-60);
  max-width: 480px;
  text-align: center;
  margin-bottom: var(--space-lg);
}

.garantia__body em {
  font-style: italic;
  color: rgba(244, 239, 230, 0.80);
}

/* ═══════════════════════════════════════════
   BLOQUE DE CONFIANZA — TRES PILARES
   Sutil, sin cards, composición editorial
═══════════════════════════════════════════ */

.garantia__pillars {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(32px, 5vw, 80px);
  margin-bottom: var(--space-2xl);
  width: 100%;
  max-width: 720px;
}

.garantia__pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
  max-width: 180px;
}

.garantia__pillar-icon {
  width: 28px;
  height: 28px;
  color: var(--color-gold);
  opacity: 0.80;
  flex-shrink: 0;
}

.garantia__pillar-text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-silver);
  text-align: center;
  line-height: 1.5;
}

/* Separador vertical entre pilares (desktop) */
.garantia__pillar-sep {
  width: 1px;
  height: 48px;
  background: var(--color-gold-dim);
  flex-shrink: 0;
  margin-top: 6px;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════
   CTA
═══════════════════════════════════════════ */

.garantia__cta {
  display: flex;
  justify-content: center;
}

/* ═══════════════════════════════════════════
   RESPONSIVE — TABLET
═══════════════════════════════════════════ */

@media (max-width: 1023px) {
  .garantia__container {
    padding: 0 48px;
  }

  .garantia__pillars {
    gap: var(--space-md);
  }

  .garantia__pillar-sep {
    display: none;
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — MOBILE
═══════════════════════════════════════════ */

@media (max-width: 767px) {
  .garantia {
    padding: var(--space-2xl) 0;
  }

  .garantia__watermark {
    top: 30%;
    /* En mobile la sección es más alta (pillars apilados verticalmente).
       top: 50% desplaza el watermark a la mitad inferior, lejos del área
       de foco (número + statement). top: 30% lo alinea con el stage. */
  }

  .garantia__container {
    padding: 0 24px;
  }

  /* Rails ocultos en mobile — solo número */
  .garantia__rail {
    display: none;
  }

  .garantia__statement {
    max-width: 100%;
  }

  .garantia__pillars {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    max-width: 100%;
  }

  .garantia__pillar {
    flex-direction: row;
    text-align: left;
    max-width: 100%;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: var(--border-gold);
  }

  .garantia__pillar:last-child {
    border-bottom: none;
  }

  .garantia__pillar-text {
    text-align: left;
  }

  .garantia__pillar-sep {
    display: none;
  }

  .garantia__body {
    max-width: 100%;
  }
}