/* ==========================================================================
   Enviamo — sistema base
   El violeta es el de la marca (#423cd4). El turquesa (#01eca7) NO decora:
   solo aparece donde algo ha salido bien. Esa disciplina es lo que hace que
   un estado de exito se lea al instante sin necesidad de texto.
   ========================================================================== */

:root {
  /* Marca */
  --violeta: #423cd4;
  --violeta-hondo: #322da1;
  --violeta-tinta: #251f6b;
  --verde: #01eca7;

  /* Superficies: frias, casi blancas. El producto es una herramienta de
     trabajo, no una web de agencia. */
  --papel: #fbfbfe;
  --papel-alto: #ffffff;
  --niebla: #f1f1f8;
  --linea: #e4e4f0;

  /* Texto */
  --tinta: #14132b;
  --tinta-media: #4a4869;
  --tinta-suave: #7d7b99;

  /* Un solo radio grande y uno pequeno. Mezclar cinco radios distintos es
     lo que hace que una web parezca un kit de componentes. */
  --radio: 20px;
  --radio-min: 10px;

  /* Sombras por elevacion, no una sombra generica para todo */
  --sombra-baja: 0 1px 2px rgba(20, 19, 43, .04), 0 2px 8px rgba(20, 19, 43, .04);
  --sombra-alta: 0 24px 60px -20px rgba(37, 31, 107, .28);

  --paso: clamp(1rem, .6rem + 1.6vw, 1.75rem);
  --ancho: 1180px;
}

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

html {
  scroll-behavior: smooth;
  /* El header fijo taparia el titulo de la seccion al saltar por anclas */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   Tipografia
   Una sola familia, dos pesos muy separados (800 / 400). El contraste lo da
   el peso y el interletrado, no una segunda tipografia decorativa.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.04;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.3rem + 5.2vw, 5.2rem); }
h2 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); letter-spacing: -.025em; }

p { margin: 0; text-wrap: pretty; }

.entradilla {
  font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem);
  line-height: 1.55;
  color: var(--tinta-media);
  /* Menos de 80 caracteres por linea */
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */

.envoltorio {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

section { padding-block: clamp(4.5rem, 3rem + 7vw, 9rem); }

.seccion-cabecera { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.seccion-cabecera p { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.75rem;
  border: 0;
  border-radius: 999px;
  font-size: .98rem;
  font-weight: 650;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s, background-color .18s;
}

.boton--principal {
  background: var(--violeta);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(66, 60, 212, .8);
}
.boton--principal:hover {
  background: var(--violeta-hondo);
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -12px rgba(66, 60, 212, .75);
}

.boton--calmo {
  background: var(--papel-alto);
  color: var(--tinta);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-baja);
}
.boton--calmo:hover { border-color: #c9c7e4; transform: translateY(-2px); }

.boton--claro {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(8px);
}
.boton--claro:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px); }

.boton:active { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Accesibilidad: foco visible siempre, y motion que se puede desactivar
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--violeta);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}