/* ==========================================================================
   Acabado
   Los detalles que separan «correcto» de «impecable». Nada de esto se ve de
   forma consciente, pero su ausencia sí se nota: la pagina parece plana.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sombras con color, nunca grises
   Una sombra gris bajo un boton violeta lo ensucia. La sombra tiene que ser
   del color del objeto, mas oscura y saturada: asi el elemento parece
   iluminado, no recortado y pegado.
   -------------------------------------------------------------------------- */

:root {
  /* Sombras en capas: varias sombras juntas imitan la caida real de la luz
     mucho mejor que una sola sombra grande y difusa. */
  --sombra-baja:
    0 1px 1px rgba(37, 31, 107, .04),
    0 2px 4px rgba(37, 31, 107, .04),
    0 4px 8px rgba(37, 31, 107, .03);

  --sombra-media:
    0 2px 4px rgba(37, 31, 107, .04),
    0 8px 16px rgba(37, 31, 107, .06),
    0 16px 32px rgba(37, 31, 107, .05);

  --sombra-alta:
    0 4px 8px rgba(37, 31, 107, .05),
    0 16px 32px rgba(37, 31, 107, .1),
    0 32px 64px -16px rgba(37, 31, 107, .22);
}

.boton--principal {
  box-shadow:
    0 1px 2px rgba(37, 31, 107, .2),
    0 4px 10px -2px rgba(66, 60, 212, .45),
    /* Reflejo interior superior: da la sensacion de superficie curva */
    inset 0 1px 0 rgba(255, 255, 255, .22);
}
.boton--principal:hover {
  box-shadow:
    0 2px 4px rgba(37, 31, 107, .2),
    0 12px 24px -4px rgba(66, 60, 212, .5),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* --------------------------------------------------------------------------
   2. Curvas distintas para entrar y para salir
   Al aparecer, algo debe llegar rapido y frenar despacio (sensacion de peso).
   Al desaparecer, arrancar suave y acelerar. Usar la misma curva en ambos
   sentidos es lo que hace que una interfaz se sienta «de plantilla».
   -------------------------------------------------------------------------- */

:root {
  --entra: cubic-bezier(.16, 1, .3, 1);      /* frena al final */
  --sale: cubic-bezier(.4, 0, 1, 1);         /* acelera al final */
  --suave: cubic-bezier(.4, 0, .2, 1);
}

.boton { transition: transform .15s var(--sale), box-shadow .15s var(--sale), background-color .15s var(--suave); }
.boton:hover { transition: transform .35s var(--entra), box-shadow .35s var(--entra), background-color .2s var(--suave); }

.tarjeta, .proceso__item, .marca, .ficha {
  transition:
    transform .2s var(--sale),
    box-shadow .2s var(--sale),
    border-color .2s var(--suave);
}
.tarjeta:hover, .proceso__item:hover, .marca:hover, .ficha:hover {
  transition:
    transform .45s var(--entra),
    box-shadow .45s var(--entra),
    border-color .3s var(--suave);
}

/* --------------------------------------------------------------------------
   3. Reflejo superior en superficies elevadas
   Una linea blanca de 1px en el borde de arriba imita la luz que cae desde
   el cenit. Es el detalle que hace que una tarjeta parezca un objeto con
   grosor en vez de un rectangulo de color.
   -------------------------------------------------------------------------- */

.tarjeta, .pantalla, .precios__caja, .escena {
  box-shadow:
    var(--sombra-media),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* Sobre la portada clara el panel necesita un limite: blanco sobre
   casi-blanco se deshace sin borde. */
.escena {
  box-shadow: var(--sombra-alta), inset 0 1px 0 rgba(255, 255, 255, .9);
  border: 1px solid #ece9f8;
}

.marca {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.marca:hover {
  box-shadow:
    0 20px 40px -24px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* --------------------------------------------------------------------------
   4. Tipografia optica
   Los titulares grandes necesitan MENOS interletrado que el texto pequeño:
   a tamaño grande el ojo percibe mas espacio del que hay. Sin este ajuste,
   un titular de 5rem parece desparramado.
   -------------------------------------------------------------------------- */

h1 { letter-spacing: -.045em; }
h2 { letter-spacing: -.038em; }
h3 { letter-spacing: -.022em; }

/* El texto pequeño, al contrario, respira mejor con una pizca mas */
.cifra__pie, .tira__intro, .conexiones__rotulo { letter-spacing: .005em; }

/* Numeros alineados en columna: sin esto las cifras bailan al animarse */
.cifra__dato, .precios__cifra, .etiqueta__codigo { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   5. Contraste real sobre degradados
   El texto blanco sobre violeta claro se queda en 3:1 y es ilegible para
   mucha gente. Una sombra sutil lo sube sin ensuciar el diseño.
   -------------------------------------------------------------------------- */

.alta__titular { text-shadow: 0 1px 2px rgba(20, 15, 60, .18); }
.alta__texto, .alta__ventajas { color: rgba(255, 255, 255, .92); }
.conexiones .entradilla { color: rgba(255, 255, 255, .8); }
.conexiones__nota { color: rgba(255, 255, 255, .8); }
.marca__nombre { color: rgba(255, 255, 255, .95); }

/* --------------------------------------------------------------------------
   6. Los bordes no son grises: son del color del fondo, mas oscuro
   Un borde gris puro sobre fondo violeta claro se ve sucio. Tomar el tono
   del entorno y oscurecerlo mantiene la armonia.
   -------------------------------------------------------------------------- */

:root { --linea: #e6e5f2; }
.tarjeta:hover, .proceso__item:hover { border-color: #c5c2ec; }

/* --------------------------------------------------------------------------
   7. Estados de foco que acompañan al diseño
   El contorno azul del navegador rompe cualquier estetica. Este mantiene la
   accesibilidad y encaja con la marca.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--violeta);
  outline-offset: 3px;
  border-radius: 8px;
}
.conexiones :focus-visible { outline-color: var(--verde); }
.alta :focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------------------
   8. El cursor informa
   -------------------------------------------------------------------------- */

.marca, .tarjeta, .proceso__item { cursor: default; }
a, button, .boton { cursor: pointer; }

/* --------------------------------------------------------------------------
   9. Seleccion de texto con la marca
   Un detalle que casi nadie cuida y que se ve en cuanto alguien subraya algo.
   -------------------------------------------------------------------------- */

::selection {
  background: rgba(66, 60, 212, .22);
  color: var(--tinta);
}
.conexiones ::selection, .alta ::selection {
  background: rgba(1, 236, 167, .3);
  color: #fff;
}

/* --------------------------------------------------------------------------
   10. La barra de scroll, discreta
   -------------------------------------------------------------------------- */

@supports (scrollbar-color: auto) {
  html { scrollbar-color: #cfcde8 transparent; scrollbar-width: thin; }
}

/* --------------------------------------------------------------------------
   11. Los logos de integraciones, siempre visibles
   Se intento animarlos con el scroll y la cuadricula de transportistas — la
   ultima antes del pie — se quedaba en opacidad 0 con cuatro rangos
   distintos. Un logo invisible en una web publica es peor fallo que un logo
   quieto: son el argumento de la seccion. El movimiento vive en el hover.
   -------------------------------------------------------------------------- */

.marcas > * {
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
}
.marcas > *:not(:hover) { transform: none; }

/* --------------------------------------------------------------------------
   12. Sin bordes rectos entre secciones
   La curva de cierre de la portada ya separa los bloques; un borde de 1px
   encima dibujaba una raya que la cortaba por la mitad.
   -------------------------------------------------------------------------- */

.proceso, .capacidades, .muestras, .precios { border: 0; }

/* --------------------------------------------------------------------------
   13. La curva de cierre y la seccion siguiente, del mismo tono
   La curva se pintaba en #fbfbfe y el proceso arrancaba en blanco puro: ese
   salto de un punto de luminosidad dibujaba una raya horizontal justo debajo
   de la curva. No era un borde, era un cambio de color.
   -------------------------------------------------------------------------- */

.portada__cierre { background: #fff; }
/* Arranca en el mismo color en que acaba la portada, no en blanco puro: si
   no, la portada funde hacia #fbfbfe y la seccion empieza en #fff, y ese
   salto de dos tonos dibuja una raya limpia a lo ancho de la pagina. */
.proceso { background: linear-gradient(180deg, var(--papel) 0%, #f4f3fb 100%); }

/* --------------------------------------------------------------------------
   14. El cierre curvo, hecho con mascara y no con un div encima
   Un elemento superpuesto siempre deja una costura con lo que hay debajo:
   por muy iguales que sean los colores, el antialias de la curva y el borde
   del bloque dibujan una raya. Recortando la propia portada con `mask` no
   hay dos superficies que casar: hay una sola, con el borde inferior curvo.
   -------------------------------------------------------------------------- */

/* La curva recortaba el borde inferior para coser el salto de la portada
   oscura al resto de la pagina claro. Con la portada ya clara no hay salto
   que coser, y la mascara solo servia para crear una capa de composicion de
   pantalla completa.

   Se retira tambien el padding que la acompañaba: esos 5-8rem existian para
   dejar sitio a la curva, y sin ella empujaban el contenido fuera de la
   pantalla por abajo. El espaciado lo gobierna `fluidez.css`. */

/* Sin la curva, el resto de la pagina empieza donde termina la portada */
.proceso { padding-top: clamp(3rem, 2rem + 4vw, 5rem); }

/* --------------------------------------------------------------------------
   15. Titulares de dos lineas: un solo h2
   Antes cada linea era un <h2> aparte para poder animarlas por separado, lo
   que dejaba nueve encabezados en la pagina y «Tú vendes.» / «De lo demás
   nos ocupamos» como dos titulares distintos para Google. Ahora es un unico
   h2 con dos spans: mismo efecto, semantica correcta.
   -------------------------------------------------------------------------- */

.titular-doble {
  display: block;
}
.titular-doble > .titular-corte {
  display: block;
  overflow: hidden;
  padding-bottom: .12em;
}