:root{
  --app-bg:#f6f7f9;
  --card-radius:18px;
}

body{
  background: var(--app-bg);
}

/* Contenedor ancho tipo app */
.decinos-app{
  max-width: 520px;         /* look app en móvil */
  margin: 0 auto;
  padding: 16px;
}

/* Cards suaves */
.decinos-card{
  border: 0;
  border-radius: var(--card-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Botones grandes */
.btn-decinos{
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 600;
}

/* Header mínimo (si lo usás) */
.decinos-topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(246,247,249,.92);
  backdrop-filter: blur(10px);
  padding: 10px 0;
}
/* ===== DECINOS LANDING PREMIUM ===== */
:root{
  --d-bg1:#070a12;
  --d-bg2:#0b1530;
  --d-bg3:#0a0f1f;
  --d-text:#e5e7eb;
  --d-muted:rgba(229,231,235,.72);
  --d-line:rgba(255,255,255,.10);

  --d-blue:37,99,235;    /* rgb */
  --d-green:34,197,94;   /* rgb */
  --d-pink:236,72,153;   /* rgb */
}

/* Fondo general (mata el blanco) */
html, body{
  background: radial-gradient(1200px 700px at 15% 15%, rgba(var(--d-blue),.22), transparent 60%),
              radial-gradient(900px 600px at 85% 25%, rgba(var(--d-green),.18), transparent 55%),
              radial-gradient(900px 650px at 40% 95%, rgba(var(--d-pink),.12), transparent 60%),
              linear-gradient(180deg, var(--d-bg1), var(--d-bg2) 55%, var(--d-bg3));
  color: var(--d-text);
}

/* Si WP mete contenedor blanco, lo neutralizamos */
#content, .site-content, .content-area, .ast-container{
  background: transparent !important;
}

/* Full-bleed dentro del tema */
.decinos-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Contenedor ancho */
.decinos-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 16px;
}

/* “Blobs” decorativos (efecto premium) */
.decinos-bgfx{
  position: relative;
  overflow: hidden;
}
.decinos-bgfx::before,
.decinos-bgfx::after{
  content:"";
  position:absolute;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(70px);
  opacity: .65;
  pointer-events:none;
  transform: translateZ(0);
}
.decinos-bgfx::before{
  left: -220px;
  top: -180px;
  background: radial-gradient(circle, rgba(var(--d-blue),.55), transparent 60%);
}
.decinos-bgfx::after{
  right: -240px;
  top: 120px;
  background: radial-gradient(circle, rgba(var(--d-green),.45), transparent 60%);
}

/* Secciones (sin blanco) */
.decinos-section{
  background: transparent;
}
.decinos-section-alt{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.decinos-hero{
  padding-top: 40px;
}

/* Cards “glass” */
.decinos-card{
  border-radius: 22px;
  border: 1px solid var(--d-line);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
}

/* Cards claras para bloques internos (si querés) */
.decinos-card-soft{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 18px;
}

/* Tipografía */
.decinos-kicker{
  letter-spacing:.12em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .78rem;
  color: rgba(229,231,235,.75);
}
.decinos-h1{
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.05;
  margin: 10px 0 14px;
}
.decinos-lead{
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  color: rgba(229,231,235,.82);
  max-width: 60ch;
}

/* Botones */
.decinos-btn{
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 800;
}

/* Imagen con borde y sombra */
.decinos-img{
  border-radius: 24px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 70px rgba(0,0,0,.40);
}

/* ===== Animaciones en scroll ===== */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1{ transition-delay: .08s; }
.reveal.delay-2{ transition-delay: .16s; }
.reveal.delay-3{ transition-delay: .24s; }

/* Parallax sutil para elementos decorativos */
.parallax{
  transform: translateY(var(--py, 0px));
  will-change: transform;
}

/* Si el usuario prefiere reducir movimiento */
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
}