/* ============================================================
   CRÉCIMA — Landing de Tiendanube
   Medido sobre "landing tiendanube" (node 104:7922, 1440).
   Tablet y móvil se derivan de ese frame con los cortes del
   resto del sitio: 48px de margen en 768 y 16px en 390.
   Header, botones base y footer viven en main.css.
   ============================================================ */

:root {
  --container-tn: 1260px;
  --pad-tn: 90px;

  /* Los azules del diseño. Son de Tiendanube, no de Crécima:
     viven acá y no en tokens.css para que no se mezclen con la
     paleta de la marca. */
  --tn-azul:      #0050c3;
  --tn-paso-1:    #d7e4fa;
  --tn-paso-2:    #c6d8f7;
  --tn-paso-3:    #97bdff;
  --tn-alc-1:     #6663f6;
  --tn-alc-2:     #6967ce;
  --tn-alc-3:     #2d2c6c;
  --tn-gris:      #8e98a8;
  --tn-celeste:   #acb6f1;   /* el cierre del degradé del hero */
  --tn-radio:     12px;
}

body.pagina-tiendanube { background: var(--bg-lavender); }

.container-tn {
  width: 100%;
  max-width: calc(var(--container-tn) + 2 * var(--pad-tn));
  margin-inline: auto;
  padding-inline: var(--pad-tn);
}

/* ------------------------------------------------------------
   1. HERO
   ------------------------------------------------------------ */
.tn-hero {
  position: relative;
  /* Medido sobre el frame: el título arranca en 184 y la bajada
     termina en 414, con el panel entrando en 472. El padding de
     abajo deja 40px de aire hasta el sello, que es lo mínimo que
     el bloque necesita para no quedar pegado. */
  padding: 175px var(--gutter) 116px;
  text-align: center;
  /* El del frame, verificado contra la imagen píxel a píxel: se
     mantiene plano en el gris hasta el 55,8% y recién ahí vira
     al celeste. El violeta que había puesto antes era invento
     mío y tiraba a rosado.

     El degradé mide 557px aunque el hero mida 477: así el celeste
     queda en el punto exacto del diseño en vez de completarse
     antes de tiempo. */
  background:
    linear-gradient(180deg, #e9ebf8 55.769%, var(--tn-celeste) 100%)
      top / 100% 557px no-repeat,
    var(--tn-celeste);
}
.tn-hero__title {
  max-width: 746px;
  margin-inline: auto;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--text);
}
.tn-hero__title b { font-weight: 600; }
.tn-hero__lead {
  max-width: 578px;
  margin: 37px auto 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: var(--text);
}
.tn-hero__lead b { font-weight: 700; }

/* ------------------------------------------------------------
   2. PANEL CLARO — sello, dupla de logos y bajada
   ------------------------------------------------------------
   El panel se monta sobre el hero: la curva de arriba recorta
   contra el degradé, igual que en el resto del sitio.
   ------------------------------------------------------------ */
.tn-panel {
  position: relative;
  z-index: 1;
  border-radius: 60px 60px 0 0;
  background: var(--bg-light);
  padding-block: 0 clamp(80px, 9vw, 120px);
  /* Sin esto el margen negativo del sello se colapsa hacia
     afuera y arrastra el panel entero, que se comía el aire de
     abajo del hero. `flow-root` abre un contexto propio y el
     margen se queda adentro. */
  display: flow-root;
  /* Se monta sobre el hero subiendo lo que mide su radio, por lo
     mismo que el bloque de planes: por fuera de una esquina
     redondeada se ve la capa de atrás, y estando apilados ahí
     asomaba el fondo del body en vez del degradé.

     El hero compensa esos 60px en su padding de abajo, así el
     borde del panel, el sello y el aire del hero quedan
     exactamente donde estaban. */
  margin-top: -60px;
}

/* El sello asoma apenas sobre la curva del panel: 16px, que es
   lo que mide en el frame (arranca en 456 y el panel en 472).
   En tablet y móvil el sello es más chico, así que lo que asoma
   baja en la misma proporción — si no, se come el aire de abajo
   del hero y termina pisando el texto. */
.tn-sello {
  display: block;
  width: 147px;
  margin: -16px auto 0;
}

.tn-dupla {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 64px;
}
.tn-dupla__tn   { width: 224px; }
.tn-dupla__cre  { width: 148px; }
.tn-dupla__mas {
  font-size: 50px;
  font-weight: 300;
  line-height: 1;
  color: var(--text);
}

.tn-bajada {
  max-width: 1042px;
  margin: 20px auto 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  text-align: center;
  color: var(--text);
}
/* Se pinta con el scroll, como los textos de la Home: arranca
   en el gris del diseño y termina en el azul marino de la
   marca. Los dos colores los lee initPaint de acá. */
.tn-bajada {
  --paint-desde: #8e98a8;
  --paint-hasta: #180f34;
}

.tn-badge {
  display: block;
  width: 236px;
  margin: 74px auto 0;
}

/* ------------------------------------------------------------
   3. ¿CÓMO TRABAJAMOS? — tres pasos
   ------------------------------------------------------------
   Las tarjetas van sin texto de cuerpo a propósito: llevan el
   título arriba y un ícono abajo que representa la instancia.
   El azul se satura de una a la otra, así el orden se lee sin
   numerarlas.
   ------------------------------------------------------------ */
.tn-pasos { padding-block: 114px 0; }
.tn-pasos__title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--text);
  margin-bottom: 61px;
}
.tn-pasos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 21px;
}
.tn-paso {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 377px;
  padding: 32px 28px;
  border-radius: var(--tn-radio);
  background: var(--tn-paso-1);
}
.tn-paso:nth-child(2) { background: var(--tn-paso-2); }
.tn-paso:nth-child(3) { background: var(--tn-paso-3); }
.tn-paso__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.tn-paso__icono {
  width: 76px;
  height: 76px;
  object-fit: contain;
  color: var(--text);
  opacity: 0.55;
}

/* ------------------------------------------------------------
   4. BANDA — crear la tienda con el enlace de 30 días
   ------------------------------------------------------------ */
.tn-banda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 111px;
  padding: 55px 48px;
  border-radius: var(--tn-radio);
  background: var(--tn-azul);
  color: #fff;
}
.tn-banda__txt {
  max-width: 486px;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}
.tn-banda__txt b { font-weight: 700; }
/* Botón oscuro sobre el azul: el violeta de marca no contrasta
   contra este fondo. */
.btn--tn-oscuro {
  background: var(--text);
  color: #fff;
  min-width: 211px;
  justify-content: center;
}
.btn--tn-oscuro:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(24, 15, 52, 0.6);
}

/* ------------------------------------------------------------
   5. ALCANCE — los tres paquetes
   ------------------------------------------------------------ */
.tn-alcance {
  position: relative;
  z-index: 1;
  border-radius: 20px 20px 0 0;
  background: #fbfaff;
  /* Se monta sobre el panel de arriba, subiendo lo que mide su
     propio radio. Es el mismo recurso que usa el footer del
     sitio, y resuelve un detalle que si no se ve feo: por fuera
     de una esquina redondeada se ve lo que hay detrás, y estando
     apilados ahí no había panel sino el fondo del body, que es
     bastante más gris. Se leía como dos puntas descoloridas.

     El padding de arriba compensa los 20px, así el contenido no
     se mueve de donde estaba. */
  margin-top: -20px;
  padding-block: 83px 99px;
}
.tn-alcance__title {
  max-width: 851px;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.005em;
  color: var(--text);
  margin-bottom: 55px;
}
.tn-alcance__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  /* Sin `align-items` cada tarjeta toma el alto de su propio
     contenido y las tres quedan desparejas. Con `stretch` —que
     es el valor por defecto de la grilla— todas toman el alto de
     la más larga, y como el botón va empujado al fondo, los tres
     terminan alineados en la misma línea. */
  align-items: stretch;
}
.tn-plan {
  display: flex;
  flex-direction: column;
  gap: 21px;
  padding: 47px 25px 50px;
  border-radius: var(--tn-radio);
  background: #fff;
}
.tn-plan__arte { width: 121px; }
.tn-plan__title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.tn-plan__bajada {
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-soft);
}
.tn-plan__que {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.tn-plan__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-soft);
}
/* El botón queda abajo de todo aunque las tarjetas tengan
   distinto largo de lista. */
.tn-plan__cta { margin-top: auto; padding-top: 15px; }
/* Sin `border-radius` propio: hereda la píldora del .btn del
   sitio, como todos los demás botones. El radio de 12px que
   trae el diseño acá lo dejaba con esquinas cuadradas y era el
   único botón del sitio que no era redondo. */
.tn-plan .btn {
  padding: 0.72em 1.4em;
  font-size: 15px;
}
.tn-plan:nth-child(1) .btn { background: var(--tn-alc-1); color: #fff; }
.tn-plan:nth-child(2) .btn { background: var(--tn-alc-2); color: #fff; }
.tn-plan:nth-child(3) .btn { background: var(--tn-alc-3); color: #fff; }

/* ------------------------------------------------------------
   6. PANEL OSCURO — tiendas y testimonios
   ------------------------------------------------------------ */
.tn-oscuro {
  position: relative;
  z-index: 1;
  background: var(--bg-hero);
  color: var(--text-invert);
  padding-block: 80px 110px;
}
.tn-oscuro__title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 60px;
}

/* Las tiendas: dos por fila */
.tn-tiendas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.tn-tienda {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 16px;
  border-radius: var(--tn-radio);
  background: #fff;
  color: var(--text);
}
.tn-tienda__name {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}
.tn-tienda__media {
  aspect-ratio: 590 / 357;
  border-radius: var(--tn-radio);
  overflow: hidden;
  background: #eceaf4;
}
.tn-tienda__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.tn-tienda:hover .tn-tienda__media img { transform: scale(1.04); }
.tn-tienda__pie {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-inline: 8px;
}
.tn-tienda__desc {
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-soft);
  max-width: calc(100% - 146px);
}

/* Los testimonios: una fila que se arrastra, porque en el
   diseño el tercero queda cortado a propósito. */
.tn-testis {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  /* Sale hasta el borde de la pantalla y vuelve a entrar, así el
     recorte del último se lee como que la fila sigue. */
  margin-inline: calc(-1 * var(--pad-tn));
  padding-inline: var(--pad-tn);
}
.tn-testis::-webkit-scrollbar { display: none; }
.tn-testi {
  flex: 0 0 503px;
  scroll-snap-align: start;
}
.tn-testi__foto {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 28px;
}
.tn-testi__txt {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-invert-soft);
  margin-bottom: 20px;
}
.tn-testi__quien {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
}
.tn-testi__punto {
  width: 16px;
  height: 5px;
  flex: none;
  border-radius: 3px;
  background: #f0603c;
}
.tn-testi__rol {
  margin: 4px 0 10px 24px;
  font-size: 15px;
  color: var(--text-invert-soft);
}
.tn-testi__estrellas {
  display: flex;
  gap: 3px;
  margin-left: 24px;
  color: #ffc531;
}
.tn-testi__estrellas svg { width: 19px; height: 19px; }
.tn-testi__estrellas .apagada { color: rgba(255, 255, 255, 0.28); }

/* ------------------------------------------------------------
   7. CIERRE AZUL
   ------------------------------------------------------------ */
.tn-cierre {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding-block: 100px 120px;
  /* Arranca con el azul saliendo del panel oscuro de arriba. */
  background: linear-gradient(180deg, #123a97 0%, var(--tn-azul) 22%, var(--tn-azul) 100%);
}
.tn-cierre__badge {
  display: block;
  width: 236px;
  margin: 0 auto 30px;
}
.tn-cierre__title {
  font-size: 52px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.tn-cierre__lead {
  max-width: 436px;
  margin: 37px auto 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
}
.tn-cierre .btn { margin-top: 37px; }

/* Blanco sobre el azul, y no el violeta de marca, por dos
   razones: contrasta mucho más sobre este fondo, y el footer
   viene inmediatamente abajo con su propio botón violeta —dos
   botones iguales pegados se disputaban la atención. */
.btn--tn-claro {
  background: #fff;
  color: var(--tn-azul);
}
.btn--tn-claro:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------
   TABLET — 768
   ------------------------------------------------------------
   No hay frame: se deriva del de 1440 con los cortes que ya usa
   el resto del sitio. Los tres bloques de a tres pasan a dos
   columnas, salvo los pasos, que quedan en una fila de tres
   porque son sólo título e ícono.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .container-tn { max-width: none; padding-inline: 48px; }

  /* En una pantalla más baja el degradé se ajusta al alto del
     hero: con los 557px de escritorio el celeste casi no
     llegaría a verse. */
  .tn-hero { padding: 150px 48px 116px; background-size: 100% 100%; }
  .tn-hero__title { font-size: 36px; max-width: 560px; }
  .tn-hero__lead { font-size: 17px; line-height: 24px; margin-top: 28px; }

  .tn-panel { border-radius: 40px 40px 0 0; margin-top: -40px; }
  .tn-sello { width: 124px; margin-top: -13px; }
  .tn-dupla { margin-top: 48px; gap: 16px; }
  .tn-dupla__tn  { width: 176px; }
  .tn-dupla__cre { width: 116px; }
  .tn-dupla__mas { font-size: 38px; }
  .tn-bajada { font-size: 24px; line-height: 32px; }
  .tn-badge { width: 196px; margin-top: 56px; }

  .tn-pasos { padding-top: 84px; }
  .tn-pasos__title { font-size: 32px; margin-bottom: 40px; }
  .tn-pasos__grid { gap: 14px; }
  .tn-paso { min-height: 268px; padding: 24px 20px; }
  .tn-paso__title { font-size: 21px; }
  .tn-paso__icono { width: 56px; height: 56px; }

  .tn-banda {
    margin-top: 72px;
    padding: 36px 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .tn-banda__txt { font-size: 24px; max-width: none; }

  .tn-alcance { padding-block: 68px 72px; }
  .tn-alcance__title { font-size: 32px; margin-bottom: 40px; max-width: none; }
  .tn-alcance__grid { grid-template-columns: repeat(2, 1fr); }
  .tn-plan { padding: 36px 24px 40px; }
  .tn-plan__title { font-size: 26px; }

  .tn-oscuro { padding-block: 64px 80px; }
  .tn-oscuro__title { font-size: 32px; margin-bottom: 40px; }
  .tn-tiendas { gap: 16px; }
  .tn-tienda__name { font-size: 24px; }

  .tn-testis { margin-inline: -48px; padding-inline: 48px; }
  .tn-testi { flex-basis: 420px; }

  .tn-cierre { padding-block: 72px 88px; }
  .tn-cierre__title { font-size: 36px; }
  .tn-cierre__badge { width: 196px; }
}

/* ------------------------------------------------------------
   MÓVIL — 390
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .container-tn { padding-inline: 16px; }

  .tn-hero { padding: 124px 16px 92px; background-size: 100% 100%; }
  .tn-hero__title { font-size: 28px; max-width: 330px; }
  .tn-hero__lead { font-size: 15px; line-height: 22px; margin-top: 22px; max-width: 340px; }

  .tn-panel { border-radius: 32px 32px 0 0; margin-top: -32px; }
  .tn-sello { width: 108px; margin-top: -12px; }
  .tn-dupla { margin-top: 36px; gap: 12px; }
  .tn-dupla__tn  { width: 138px; }
  .tn-dupla__cre { width: 92px; }
  .tn-dupla__mas { font-size: 28px; }
  .tn-bajada { font-size: 19px; line-height: 26px; }
  .tn-badge { width: 168px; margin-top: 44px; }

  .tn-pasos { padding-top: 64px; }
  .tn-pasos__title { font-size: 26px; margin-bottom: 28px; }
  /* En una columna las tres tarjetas quedarían larguísimas: se
     bajan de alto y el título comparte renglón con el ícono. */
  .tn-pasos__grid { grid-template-columns: 1fr; gap: 12px; }
  .tn-paso {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 20px;
  }
  .tn-paso__title { font-size: 21px; }
  .tn-paso__icono { width: 46px; height: 46px; flex: none; }

  .tn-banda { margin-top: 56px; padding: 28px 22px; gap: 22px; }
  .tn-banda__txt { font-size: 20px; }
  .btn--tn-oscuro { width: 100%; }

  .tn-alcance { padding-block: 60px 56px; }
  .tn-alcance__title { font-size: 26px; margin-bottom: 28px; }
  .tn-alcance__grid { grid-template-columns: 1fr; }
  .tn-plan__title { font-size: 24px; }

  .tn-oscuro { padding-block: 48px 64px; }
  .tn-oscuro__title { font-size: 26px; margin-bottom: 28px; }
  .tn-tiendas { grid-template-columns: 1fr; gap: 14px; }
  .tn-tienda__name { font-size: 22px; }
  .tn-tienda__pie { flex-direction: column; align-items: flex-start; gap: 14px; padding: 0;}
  .tn-tienda__desc { max-width: none; }

  .tn-testis { margin-inline: -16px; padding-inline: 16px; }
  .tn-testi { flex-basis: 296px; }

  .tn-cierre { padding-block: 56px 72px; }
  .tn-cierre__title { font-size: 28px; }
  .tn-cierre__lead { font-size: 16px; margin-top: 24px; }
  .tn-cierre__badge { width: 168px; }
  .tn-cierre .btn { width: 100%; justify-content: center; }
}