/* ==========================================================================
   Enviamo v2 — margenes y medidas
   Carga la ULTIMA de todas: aqui se corrige lo que las hojas heredadas dan
   por hecho sobre el espacio disponible.
   ==========================================================================

   El canal lateral es lo primero que se nota cuando esta mal. Con 16px en
   movil el texto toca el borde y la pagina parece que se cae por los lados;
   con 24px en tablet pasa lo mismo a otra escala.

   Aqui se declara UNA vez, y todo lo demas lo hereda.
   ========================================================================== */

:root {
  /* El canal crece con la pantalla, pero nunca baja de 20px: por debajo de
     eso el texto roza el marco del telefono. */
  --paso: clamp(1.25rem, .9rem + 2.2vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   El contenedor comun
   `.envoltorio` es el de las hojas viejas y `.s__dentro` el del sistema
   nuevo: los dos tienen que medir igual o las secciones no se alinean entre
   si al hacer scroll.
   -------------------------------------------------------------------------- */

.s__dentro,
.envoltorio {
  width: min(var(--ancho), 100% - var(--paso) * 2);
  margin-inline: auto;
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   El hero en movil
   El titular quedaba DEBAJO de la cabecera fija: el padding superior estaba
   calculado para escritorio, donde la cabecera es mas baja en proporcion.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .portada {
    /* La cabecera mide ~64px en movil; 5.5rem deja aire suficiente sin
       empujar la llamada a la accion fuera de pantalla. */
    padding-top: clamp(5.5rem, 5rem + 3vw, 7rem) !important;
    padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem) !important;
    min-height: auto;
  }

  /* Cuatro lineas de titular a 3rem no caben en 390px de ancho */
  .portada__titular {
    font-size: clamp(2.2rem, 1.3rem + 4.4vw, 3.4rem) !important;
  }
}

/* --------------------------------------------------------------------------
   Las filas de los mockups en pantallas estrechas
   «Pedido #4821 · WooCommerce» se partia en tres lineas y la fila crecia
   hasta descuadrar la escena. Se recorta con puntos suspensivos: el numero
   de pedido, que es lo que identifica, siempre se lee.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  /* La fila es un grid de tres columnas: icono | texto | estado. El texto es
     la unica que cede, y necesita `minmax(0, 1fr)` para poder encogerse;
     con `1fr` a secas el contenido marca el minimo y empuja al chip fuera. */
  .paso {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: .55rem;
    padding-inline: .65rem;
  }
  .paso__icono { width: 30px; height: 30px; font-size: .95rem; }

  .paso__titulo,
  .paso__detalle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .paso__titulo { font-size: .84rem; }
  .paso__detalle { font-size: .72rem; }

  /* El estado no se encoge ni se parte: es el resultado de la fila */
  .paso__estado {
    flex: none;
    white-space: nowrap;
    font-size: .66rem;
    padding: .18rem .45rem;
  }

  .escena__cuerpo { padding: .7rem; }
}

/* --------------------------------------------------------------------------
   Las secciones a pantalla completa
   Las que salen del envoltorio con margen negativo tienen que recuperar el
   canal por dentro, o su contenido acaba pegado al borde.
   -------------------------------------------------------------------------- */

/* Las franjas de borde a borde salen del envoltorio con margen negativo del
   50% del PADRE, no `50vw`: `vw` cuenta la barra de scroll y las descuadraba
   10px hacia la derecha. */
/* La franja de borde a borde la pinta la SECCION (`.s--verde`), que ya ocupa
   todo el ancho. El bloque de dentro no necesita salirse del envoltorio: ese
   truco con margenes negativos y `vw` dependia de la barra de scroll y se
   descuadraba sola. */
.muestra--ruta {
  margin-inline: 0;
  padding-inline: 0;
  width: 100%;
  background: none;
}

/* --------------------------------------------------------------------------
   Titulares: que no se corten nunca
   Un titular a 3rem con una palabra larga desborda por la derecha sin que
   nada lo avise. `text-wrap: balance` reparte las lineas y el guionado
   automatico salva las palabras que no caben de ninguna manera.
   -------------------------------------------------------------------------- */

.s__titulo,
.portada__titular,
.titular-doble {
  text-wrap: balance;
  overflow-wrap: break-word;
}

.s__entradilla,
.entradilla {
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Tablet: el punto donde mas se notaba
   Entre 700 y 1000px el contenido tenia margenes de movil pero tipografia de
   escritorio, y se leia apretado.
   -------------------------------------------------------------------------- */

@media (min-width: 700px) and (max-width: 1040px) {
  :root { --paso: 2.5rem; }
}


/* ==========================================================================
   Envoltorios anidados
   ==========================================================================

   Tres secciones median distinto que el resto (1098 y 1139 frente a 1180) y
   al hacer scroll se veia el salto: sus titulares no arrancaban en la misma
   vertical que los de arriba y abajo.

   La causa es el anidamiento. `min(var(--ancho), 100% - var(--paso) * 2)`
   mide el `100%` contra el PADRE, no contra la pantalla: si el envoltorio
   vive dentro de otro que ya descontó su canal, se descuenta dos veces.

   Un envoltorio dentro de otro no tiene que volver a apartarse: el de fuera
   ya lo hizo.
   ========================================================================== */

.envoltorio .envoltorio,
.s__dentro .envoltorio,
.envoltorio .s__dentro,
.s__dentro .s__dentro,
.tabs__panel .envoltorio,
.mk-teatro .envoltorio {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* Los mockups dentro de las pestañas: su envoltorio propio sobra, porque el
   de la seccion ya coloca el contenido en su sitio. */
.tabs__panel .mk-seccion > .envoltorio { padding-inline: 0; }


/* ==========================================================================
   Dos desalineamientos reales
   ==========================================================================

   Al medir el margen izquierdo de cada seccion salian tres valores distintos
   (125, 146 y 166px). Como la pagina se lee en vertical, esa diferencia se
   nota: los titulares no arrancan en la misma linea.
   ========================================================================== */

/* 1. INTEGRACIONES se quedaba escalada al 96,5%.
      `transiciones.css` le pone una animacion ligada al scroll
      (`animation-timeline: view()`) que la levanta como una carta. Estaba
      calculada para cuando era la penultima seccion: ahora tiene cuatro
      debajo y su recorrido nunca llega al final, asi que se queda encogida
      para siempre. */
.s.conexiones {
  animation: none !important;
  transform: none !important;
}

/* 2. DIVIDIR y AGRUPAR median 1098px cuando el CSS decia 1180. La diferencia
      no era de anchura sino de ESCALA: las hojas heredadas animan la entrada
      de `.mk-seccion` con un `scale(.96)`, y dentro de un panel de pestanas
      esa animacion no llega a completarse nunca, asi que la escena se queda
      encogida de forma permanente.

      Dentro de las pestanas manda `v2-tabs.js`: la entrada la gobierna el
      panel, no la seccion. */
.tabs__panel .mk-seccion {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.tabs__panel .mk-seccion > .envoltorio,
.tabs__panel .envoltorio {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}




/* REGLAS es el unico mockup que no vive en pestañas, asi que conserva el
   padding lateral que `mockups/_base.css` da a `.mk-seccion`. Sumado al
   canal de la seccion, su contenido quedaba 16px mas adentro que el resto. */
.s.mk-seccion { padding-inline: 0; }


/* ==========================================================================
   La franja clara sobre el degradado del hero
   ==========================================================================

   `background-origin` vale `padding-box` por defecto: el degradado empieza a
   pintarse DENTRO del padding, no en el borde del elemento. Como la portada
   tiene 105px de padding superior para despejar la cabecera, el degradado
   arrancaba 105px mas abajo y por arriba asomaba el fondo del body.

   Con `border-box` el degradado ocupa el elemento entero, padding incluido.
   ========================================================================== */

.portada,
.s--lavanda,
.s--verde,
.s--tinta,
.muestra--ruta {
  background-origin: border-box;
}

/* Y el `main` que faltaba: al ensamblar la pagina se perdio la etiqueta de
   apertura y todas las secciones colgaban directamente del body. */


/* ==========================================================================
   El aire de cada seccion, por rango
   ==========================================================================

   Siete secciones se quedaban con padding cero y el corte de color caia
   sobre el contenido, sin margen de respiro. Las hojas heredadas declaran su
   propio `padding-block` y ganaban al sistema.

   El rango es lo que crea la jerarquia, asi que aqui manda: una seccion
   clave respira el doble que una de dato, y eso se nota antes de leer.
   ========================================================================== */

.s.s--clave { padding-block: clamp(4.5rem, 3.5rem + 5vw, 8rem) !important; }
.s.s--apoyo { padding-block: clamp(3.5rem, 2.8rem + 3.5vw, 6rem) !important; }
.s.s--dato  { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem) !important; }

/* La portada manda sobre su propio aire: tiene que ocupar la pantalla */
.portada.s--clave { padding-block: unset !important; }

/* Dos secciones seguidas del mismo color siguen siendo dos temas distintos:
   necesitan separarse. Lo que no hace falta es sumar el aire de las dos, asi
   que la de abajo se queda con el 60% del suyo.

   Antes esto ponia `padding-top: 0` y cuatro secciones quedaban pegadas a la
   de arriba, con el titular tocando el borde. */
.s--papel + .s--papel.s--clave { padding-top: clamp(2.7rem, 2.1rem + 3vw, 4.8rem) !important; }
.s--papel + .s--papel.s--apoyo { padding-top: clamp(2.1rem, 1.7rem + 2.1vw, 3.6rem) !important; }
.s--papel + .s--papel.s--dato  { padding-top: clamp(1.5rem, 1.2rem + 1.5vw, 2.4rem) !important; }


/* ==========================================================================
   El borde superior del hero, a prueba de todo
   ==========================================================================

   La franja clara de arriba aparecia al redimensionar la ventana: el fondo
   lo pinta `.portada`, que empieza donde empieza el `<main>`, y cualquier
   margen heredado por encima (del body, del primer bloque, del propio main)
   deja ver el papel de detras.

   La solucion no es perseguir de donde sale el margen: es que el color de
   fondo de la PAGINA sea el mismo con el que arranca el degradado. Asi,
   asome lo que asome, no se nota.

   El tono es el primer paso del degradado de `.portada`
   (`linear-gradient(155deg, #ece7ff 0%, ...)`), no uno parecido: si no
   coincide exactamente se nota el corte.

   NO se le pone al `body`: hay cuatro secciones sin fondo propio (pedidos,
   seguimiento, reglas y feeds) que se tenirian de lavanda.
   ========================================================================== */

html { background: #ece7ff; }

/* --------------------------------------------------------------------------
   El rebote del scroll en movil

   Al llegar arriba del todo, el navegador separa el body del borde superior
   y deja ver el fondo del elemento raiz. Como `html` lleva el lavanda del
   hero y el `body` el papel casi blanco, asomaba una franja de otro color.

   Se tapa con una banda del mismo tono con el que arranca el hero, colocada
   por ENCIMA del borde superior del documento. Va en `absolute`, no en
   `fixed`: el rebote arrastra el documento, asi que la banda sube con el y
   rellena el hueco. Una capa fija se quedaria clavada al viewport y no
   taparia nada.
   -------------------------------------------------------------------------- */

body {
  /* La banda se posiciona contra el body, no contra el viewport */
  position: relative;
}

body::before {
  content: '';
  position: absolute;
  /* Justo encima del borde: fuera de vista salvo durante el rebote */
  top: -200px;
  left: 0;
  right: 0;
  height: 200px;
  background: #ece7ff;
  /* Detras de todo y sin capturar clics */
  z-index: -1;
  pointer-events: none;
}

/* Y ningun margen puede empujar la portada hacia abajo */
body > main,
main > .portada:first-child { margin-top: 0; }
.portada::before,
.portada::after { top: 0; }

/* ==========================================================================
   El cierre: un solo fondo, no dos
   ==========================================================================

   `.alta__reja` traia su propio degradado violeta con radio de 28px, pensado
   para cuando la seccion era clara y este bloque era la unica nota oscura.
   Ahora la seccion ya es oscura (`.s--tinta`), asi que quedaban dos cajas
   superpuestas: una azulada flotando dentro de otra violeta, con el texto
   pegado al borde porque el padding horizontal era cero.
   ========================================================================== */

.s--tinta .alta__reja {
  background: none;
  border-radius: 0;
  padding-inline: 0;
  padding-block: 0;
  box-shadow: none;
}
.s--tinta .alta__reja::before,
.s--tinta .alta__reja::after { display: none; }


/* Los titulares centrados quedaban tapados por la cabecera fija al saltar
   por ancla o al parar el scroll justo ahi. */
.s__cabecera--centro { scroll-margin-top: 90px; }
section[id] { scroll-margin-top: 80px; }


/* ==========================================================================
   Integraciones sobre violeta: legibilidad y sin curvas
   ==========================================================================

   La seccion tiene fondo violeta oscuro propio (de `integraciones.css`), pero
   la cabecera usaba los colores del sistema, pensados para fondo claro: el
   rotulo salia en violeta sobre violeta y la entradilla en gris medio. Casi
   no se leian.

   Y las curvas de `transiciones.css` cerraban la seccion como una carta.
   Tenian sentido cuando era la penultima; ahora solo interrumpen el scroll.
   ========================================================================== */

/* --- Sin curvas --- */
.s.conexiones,
.s.precios,
.s.conexiones::before,
.s.conexiones::after {
  border-radius: 0 !important;
}

/* --- El texto, a colores de fondo oscuro --- */

.s.conexiones .s__titulo { color: #fff; }

.s.conexiones .s__entradilla { color: rgba(255, 255, 255, .72); }

.s.conexiones .s__rotulo {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

/* El acento del titular tambien: el degradado hacia el violeta oscuro
   desaparecia sobre este fondo. */
.s.conexiones .s__ac {
  background: linear-gradient(96deg, #fff 0%, #cfc8ff 45%, var(--verde) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Los rotulos de columna, un poco mas presentes */
.s.conexiones .columna__t { color: rgba(255, 255, 255, .72); }

/* Y el pie */
.s.conexiones .conexiones__nota { color: rgba(255, 255, 255, .72); }

/* ==========================================================================
   El río de color: las tres secciones centrales, un solo degradado
   ==========================================================================

   Antes cada sección pintaba su propio fondo y al bajar se veían tres cortes
   secos: lavanda, verde, lavanda. Ahora el color lo pone el contenedor y
   cambia DENTRO de cada sección, no en la unión, así que el scroll fluye.

   El recorrido tiene sentido: lavanda donde los pedidos son cosa tuya, verde
   en el centro donde entra tu cliente, y vuelta al lavanda con las reglas.
   ========================================================================== */

.rio-color {
  position: relative;
  isolation: isolate;
  background:
    /* Las manchas de luz, repartidas a lo largo del recorrido */
    radial-gradient(38% 14% at 88% 6%, rgba(150, 110, 255, .20), transparent 70%),
    radial-gradient(34% 12% at 6% 34%, rgba(66, 60, 212, .12), transparent 68%),
    radial-gradient(42% 14% at 92% 56%, rgba(1, 236, 167, .18), transparent 70%),
    radial-gradient(36% 12% at 4% 82%, rgba(66, 60, 212, .12), transparent 68%),
    /* Y el degradado de fondo que las une */
    linear-gradient(180deg,
      #f1eeff 0%,
      #f5f2ff 18%,
      #f2f7fa 38%,
      #eefaf6 52%,
      #f2f6fb 66%,
      #f4f1ff 84%,
      #f1eeff 100%);
}

/* Las secciones de dentro no pintan nada: el color ya está detrás */
.rio-color > .s {
  background: none;
}

/* Y el rótulo de seguimiento sigue en verde, que es su seña */
.rio-color .s--sobre-color .s__rotulo {
  background: rgba(4, 168, 120, .12);
  color: #04795a;
}

/* --------------------------------------------------------------------------
   El aire dentro del río
   Tres secciones «clave» seguidas sumaban 128 + 128 = 256px en cada unión,
   el doble que en el resto de la página. Antes se disimulaba porque cada una
   tenía su propio color y el corte marcaba la separación; ahora que el fondo
   es continuo, ese vacío se ve.

   Dentro del río el aire de la unión lo pone UNA sola: la de abajo entra con
   la mitad. El bloque sigue respirando por fuera.
   -------------------------------------------------------------------------- */

.rio-color > .s + .s {
  padding-top: clamp(1.6rem, 1.3rem + 1.6vw, 2.6rem) !important;
}

/* La última tampoco necesita todo su aire abajo: el río acaba ahí y la
   siguiente sección ya trae el suyo. */
.rio-color > .s:last-child {
  padding-bottom: clamp(2.8rem, 2.2rem + 3vw, 5rem) !important;
}

/* --------------------------------------------------------------------------
   El hueco tras la escena de las pestañas
   El lienzo mide 430px pero su panel 497: sobraban 67px de aire dentro de la
   propia escena, que se sumaban al padding de la sección. Entre «tus
   pedidos» y «seguimiento» acababa habiendo casi 200px de nada.

   La escena ya viene con su propio margen interno, así que la sección no
   necesita añadir tanto por debajo.
   -------------------------------------------------------------------------- */

.rio-color > #pedidos {
  padding-bottom: clamp(1.1rem, .9rem + 1vw, 1.8rem) !important;
}

/* La escena no añade aire extra por debajo. OJO: nada de `align-content` en
   `.tabs__panel` — los dos paneles comparten celda del grid y esa propiedad
   rompe el apilado: se dibujan uno encima del otro y se leen los dos textos
   superpuestos. */
.tabs__panel .mk-teatro { margin-bottom: 0; }
.tabs__panel .mk-seccion { padding-bottom: 0; }

/* --------------------------------------------------------------------------
   El hueco tras la ruta del paquete
   Eran 272px, más del doble que cualquier otra unión. Dos causas sumadas:
   el padding de la sección (128px) y que la rejilla de la ruta reserva la
   altura de la columna más alta — la de «Entregado», que tiene dos burbujas
   — dejando 80px vacíos bajo las otras tres.

   Las columnas se alinean arriba y la sección recorta su aire inferior.
   -------------------------------------------------------------------------- */

.ruta { align-items: start; }

.rio-color > #seguimiento {
  /* Mas apretada que las demas: la ruta ya deja ~130px de aire bajo tres de
     sus cuatro columnas, porque solo «Entregado» lleva dos burbujas. */
  padding-bottom: clamp(.4rem, .3rem + .5vw, .9rem) !important;
}

/* ==========================================================================
   Los titulares, a tres tamaños y no a siete
   ==========================================================================

   Medidos en pantalla salían 32, 40, 48, 51, 54 y 56px sin lógica: dos
   secciones del mismo rango tenían 40 y otras dos 56. Las hojas heredadas
   traen sus propios tamaños (`.titular-doble`, `.alta__titular`…) y pisaban
   al sistema.

   El tamaño lo marca el RANGO, que es lo que crea la jerarquía:
     clave  →  lo que hay que ver
     apoyo  →  lo que sostiene el argumento
     dato   →  lo que se consulta
   ========================================================================== */

.s--clave .s__titulo,
.s--clave .titular-doble,
.s--clave .alta__titular,
.s--clave .mk-cabecera h2 {
  font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.2rem) !important;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.s--apoyo .s__titulo,
.s--apoyo .titular-doble,
.s--apoyo .alta__titular,
.s--apoyo .mk-cabecera h2 {
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.5rem) !important;
  line-height: 1.08;
  letter-spacing: -.03em;
}

.s--dato .s__titulo,
.s--dato .titular-doble {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem) !important;
  line-height: 1.12;
  letter-spacing: -.025em;
}

/* --------------------------------------------------------------------------
   Redes sociales en el pie

   Van bajo el correo, dentro de la columna de marca: son parte de quien
   somos, no un cuarto grupo de enlaces. Puestos como grupo aparte competian
   con «Producto» y «Legal», que es donde de verdad se va la gente.

   El area de toque es de 40px aunque el icono mida 20: por debajo de eso
   fallan los dedos en movil, y son enlaces que se pulsan con el pulgar en
   la parte mas baja de la pagina.
   -------------------------------------------------------------------------- */

.pie__redes {
  display: flex;
  gap: .4rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.pie__red {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -8px;   /* el icono se alinea con el texto, no su caja */
  border-radius: var(--radio-min);
  color: var(--tinta-suave);
  transition: color .2s, background-color .2s;
}

.pie__red:hover,
.pie__red:focus-visible {
  color: var(--violeta);
  background: var(--niebla);
}

.pie__red:focus-visible {
  outline: 3px solid var(--violeta);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pie__red { transition: none; }
}