/* ==========================================================================
   sms-activate-mx.css — smsactivate.mx
   Page-specific styles for the sms activate landing page
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero Section (Sección 1: Introducción)
   -------------------------------------------------------------------------- */
.hero {
  padding: var(--spacing-3xl) 0 var(--spacing-2xl);
  position: relative;
}

.hero__inner {
  display: grid;
  gap: var(--spacing-xl);
}

.hero__label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  background-color: rgba(245, 197, 24, 0.1);
  border: 1px solid rgba(245, 197, 24, 0.25);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: var(--spacing-md);
}

.hero__title {
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-heading);
  margin-bottom: var(--spacing-md);
}

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

.hero__subtitle {
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  color: var(--color-text);
  max-width: 680px;
  line-height: 1.7;
  margin-bottom: var(--spacing-lg);
}

.hero__cta {
  margin-bottom: var(--spacing-xl);
}

/* Puntos clave box */
.key-takeaways {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg) var(--spacing-xl);
  max-width: 680px;
}

.key-takeaways__title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--spacing-md);
}

.key-takeaways__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.key-takeaways__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.5;
}

.key-takeaways__list li::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  background-color: var(--color-accent);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230f1420' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3,8 6.5,11.5 13,5'/%3E%3C/svg%3E");
  background-size: contain;
}

/* --------------------------------------------------------------------------
   2. Section 2.0 — SMS Flow Infographic
   -------------------------------------------------------------------------- */
.flow-diagram {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  margin-top: var(--spacing-xl);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.flow-step {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: var(--spacing-lg) var(--spacing-md);
  position: relative;
  border-right: 1px solid var(--color-border);
}

.flow-step:last-child {
  border-right: none;
}

.flow-step__icon {
  width: 48px;
  height: 48px;
  background-color: rgba(245, 197, 24, 0.12);
  border: 1px solid rgba(245, 197, 24, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: var(--spacing-sm);
  flex-shrink: 0;
}

.flow-step__num {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 4px;
}

.flow-step__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.3;
}

.flow-step__desc {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

.flow-arrow {
  display: none;
}

@media (max-width: 767px) {
  .flow-diagram {
    flex-direction: column;
  }

  .flow-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    min-width: unset;
    padding: var(--spacing-md);
    gap: var(--spacing-md);
  }

  .flow-step:last-child {
    border-bottom: none;
  }

  .flow-step__icon {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .flow-step__content {
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   3. Section 2.1 — Comparison Table (Number Categories)
   -------------------------------------------------------------------------- */
.table-categories .data-table {
  min-width: 600px;
}

/* --------------------------------------------------------------------------
   4. Section 2.2 — Technical Flowchart
   -------------------------------------------------------------------------- */
.tech-flowchart {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--spacing-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.tech-step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.tech-step:last-child {
  border-bottom: none;
}

.tech-step:nth-child(even) {
  background-color: var(--color-surface-alt);
}

.tech-step__num {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background-color: var(--color-accent);
  color: #0f1420;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}

.tech-step__body {}

.tech-step__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 4px;
}

.tech-step__desc {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   5. Section 3.0 — Use Case Cards (numbered list)
   -------------------------------------------------------------------------- */
.usecase-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.usecase-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  transition: border-color 0.2s ease;
}

.usecase-item:hover {
  border-color: var(--color-accent);
}

.usecase-item__num {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background-color: rgba(245, 197, 24, 0.12);
  border: 1px solid rgba(245, 197, 24, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-accent);
  flex-shrink: 0;
}

.usecase-item__body {}

.usecase-item__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 6px;
}

.usecase-item__desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   6. Section 3.1 — Business Comparison Table
   -------------------------------------------------------------------------- */
.table-business .data-table {
  min-width: 580px;
}

.check-yes { color: var(--color-green); font-weight: 700; }
.check-no  { color: var(--color-danger); font-weight: 700; }
.check-mid { color: var(--color-accent); font-weight: 700; }

/* --------------------------------------------------------------------------
   7. Section 3.2 — Decision Flowchart (CSS)
   -------------------------------------------------------------------------- */
.decision-flow {
  margin-top: var(--spacing-xl);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl);
}

.decision-flow__question {
  text-align: center;
  background-color: rgba(245, 197, 24, 0.1);
  border: 2px solid var(--color-accent);
  border-radius: var(--border-radius);
  padding: var(--spacing-md) var(--spacing-lg);
  font-weight: 700;
  color: var(--color-heading);
  font-size: 1.05rem;
  margin-bottom: var(--spacing-lg);
}

.decision-flow__branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

@media (max-width: 480px) {
  .decision-flow__branches {
    grid-template-columns: 1fr;
  }
}

.decision-branch {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  background-color: var(--color-surface-alt);
}

.decision-branch__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-sm);
}

.decision-branch--virtual .decision-branch__label {
  color: var(--color-accent);
}

.decision-branch--personal .decision-branch__label {
  color: var(--color-green);
}

.decision-branch__title {
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: var(--spacing-sm);
  font-size: 0.95rem;
}

.decision-branch ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.decision-branch ul li {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding-left: 16px;
  position: relative;
  line-height: 1.4;
}

.decision-branch ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-size: 0.8rem;
}

.decision-branch--personal ul li::before {
  color: var(--color-green);
}

/* --------------------------------------------------------------------------
   8. Section 3.3 — Code Snippet Block
   -------------------------------------------------------------------------- */
.code-block {
  background-color: #0a0f1a;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-top: var(--spacing-lg);
}

.code-block__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px var(--spacing-md);
  background-color: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}

.code-block__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #3a3a3a;
}

.code-block__lang {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.code-block pre {
  padding: var(--spacing-lg);
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.7;
  color: #c9d1d9;
  margin: 0;
}

.code-block .comment { color: #6e7681; font-style: italic; }
.code-block .keyword { color: #ff7b72; }
.code-block .string  { color: #a5d6ff; }
.code-block .func    { color: #d2a8ff; }
.code-block .var     { color: #ffa657; }
.code-block .number  { color: #79c0ff; }

/* --------------------------------------------------------------------------
   9. Section 4 — Provider Comparison Table
   -------------------------------------------------------------------------- */
.table-providers .data-table {
  min-width: 650px;
}

.rating-stars {
  color: var(--color-accent);
  font-size: 0.9rem;
  letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   10. Section 5 — Step-by-Step Guide
   -------------------------------------------------------------------------- */
.steps-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  counter-reset: step-counter;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
}

.step-item__num {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background-color: var(--color-accent);
  color: #0f1420;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  flex-shrink: 0;
}

.step-item__body {}

.step-item__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 4px;
}

.step-item__desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

.tips-callout {
  background-color: rgba(245, 197, 24, 0.06);
  border: 1px solid rgba(245, 197, 24, 0.25);
  border-radius: var(--border-radius);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.tips-callout__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-sm);
}

.tips-callout ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tips-callout ul li {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.tips-callout ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5c518' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   11. Section 6 — Do's and Don'ts + Legal Callout
   -------------------------------------------------------------------------- */
.dos-donts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

@media (max-width: 640px) {
  .dos-donts {
    grid-template-columns: 1fr;
  }
}

.dos-donts__col {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
}

.dos-donts__col--do {
  border-top: 3px solid var(--color-green);
}

.dos-donts__col--dont {
  border-top: 3px solid var(--color-danger);
}

.dos-donts__heading {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-md);
}

.dos-donts__col--do .dos-donts__heading {
  color: var(--color-green);
}

.dos-donts__col--dont .dos-donts__heading {
  color: var(--color-danger);
}

.dos-donts__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dos-donts__list li {
  font-size: 0.9rem;
  color: var(--color-text);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}

.dos-donts__col--do .dos-donts__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,12 9,17 20,7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.dos-donts__col--dont .dos-donts__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.legal-callout {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.legal-callout__title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.legal-callout__title::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a96b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 1px;
}

.legal-callout ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-callout ul li {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.legal-callout ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   12. Spacing utilities for subsections
   -------------------------------------------------------------------------- */
/* Used on <hr class="section-divider mt-3xl"> within sections */
.mt-3xl { margin-top: var(--spacing-3xl); }
/* Used on .section-header blocks inside multi-part sections */
.section-header.mt-3xl { margin-top: var(--spacing-3xl); }

/* --------------------------------------------------------------------------
   13. Section dividers
   -------------------------------------------------------------------------- */
.section-divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
  margin: 0;
}

/* --------------------------------------------------------------------------
   13. Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-text);
}

.breadcrumb span {
  margin: 0 6px;
  opacity: 0.5;
}