/* ===== AJUSTE_03 · VISUAL 6 — capa de diseño del Inicio (HTML/CSS/JS puro; inspirada en 21st.dev y React Bits, recreada a mano) ===== */
:root{--ease:cubic-bezier(.22,1,.36,1);--v6-borde:#d7e6cc;--v6-sombra:0 18px 44px rgba(15,42,26,.10)}

/* Utilidades: etiqueta tipo píldora, títulos, fondos */
.sec-tag{display:inline-flex;align-items:center;gap:.55rem;padding:.38rem .85rem;border:1px solid var(--v6-borde);background:rgba(255,255,255,.7);border-radius:999px;color:var(--verde-700);font-size:.7rem;letter-spacing:.16em}
.sec-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verde-700);box-shadow:0 0 0 4px rgba(45,92,38,.15)}
.mp-sec .sec-tag,.cc-sec .sec-tag{background:rgba(255,255,255,.08);border-color:rgba(151,196,89,.35);color:var(--verde-200)}
.mp-sec .sec-tag::before,.cc-sec .sec-tag::before{background:var(--verde-200);box-shadow:0 0 0 4px rgba(151,196,89,.18)}
.bg-puntos{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(45,92,38,.22) 1px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%)}
.bg-puntos--claro{background-image:radial-gradient(rgba(151,196,89,.35) 1px,transparent 1.4px)}
.bg-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bg-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:v6-flota 16s ease-in-out infinite alternate}
.bg-aurora i:nth-child(1){width:42vw;height:42vw;left:-10vw;top:-12vw;background:#cfe8b8}
.bg-aurora i:nth-child(2){width:34vw;height:34vw;right:-8vw;top:20%;background:#b8dcc4;animation-duration:20s}
.bg-aurora i:nth-child(3){width:28vw;height:28vw;left:35%;bottom:-14vw;background:#e3f1c9;animation-duration:24s}
.bg-aurora--oscura i{opacity:.35}
.bg-aurora--oscura i:nth-child(1){background:#2d7a2b}.bg-aurora--oscura i:nth-child(2){background:#1f6b52}.bg-aurora--oscura i:nth-child(3){background:#4a8f1f}
@keyframes v6-flota{to{transform:translate3d(6vw,4vw,0) scale(1.15)}}

/* Spotlight que sigue el cursor */
.spot-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(151,196,89,.28),transparent 70%);z-index:1}
[data-spot]:hover>.spot-glow{opacity:1}
[data-spot]{position:relative}

/* Aparición al hacer scroll (solo si hay JS) */
.js-rv .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js-rv .rv.in{opacity:1;transform:none}

/* ===== 1 · Por qué confiar: bento con tarjetas ===== */
.confianza-sec{background:linear-gradient(180deg,#fbfdf8,#f1f7ec)!important}
.confianza-sec .container{position:relative;z-index:1}
.cf-hitos{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin:0 0 1.2rem}
.cf-hitos::before{display:none}
.cf-hitos li{padding:1.15rem 1.2rem;background:rgba(255,255,255,.85);border:1px solid var(--v6-borde);border-radius:20px;box-shadow:0 8px 24px rgba(15,42,26,.06);transition:transform .35s var(--ease),box-shadow .35s}
.cf-hitos li:hover{transform:translateY(-4px);box-shadow:var(--v6-sombra)}
.cf-hitos li::before{display:none}
.cf-hitos b{font-size:2.3rem}
.cf-hoy{border-color:var(--verde-700)!important;box-shadow:0 0 0 3px rgba(45,92,38,.12),0 8px 24px rgba(15,42,26,.08)!important}
.cf-lema{padding:1.4rem 1.6rem 1.4rem 4rem;margin:0 0 1.2rem;background:#e9f3e1;border:1px solid var(--v6-borde);border-left:1px solid var(--v6-borde);border-radius:22px;position:relative;font-size:1.12rem}
.cf-lema::before{content:"\201C";position:absolute;left:1.2rem;top:.7rem;font:800 3.8rem/1 'Playfair Display',serif;color:var(--verde-700)}
.cf-lista{display:grid;gap:.7rem}
.cf-lista li{grid-template-columns:2.6rem 1fr;align-items:start;padding:1rem 1.2rem;background:rgba(255,255,255,.85);border:1px solid var(--v6-borde);border-radius:18px;transition:transform .3s var(--ease),box-shadow .3s}
.cf-lista li:hover{transform:translateX(5px);box-shadow:0 10px 26px rgba(15,42,26,.09)}
.cf-lista i{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:#e4f0da;font-size:.78rem;letter-spacing:0;padding:0}
.cf-foto{border-radius:32px}
.cf-visual::before{content:"";position:absolute;inset:-14px -14px auto auto;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(151,196,89,.45),transparent 70%);z-index:0}
.cf-foto,.cf-foto2{z-index:1}

/* ===== 2 · Ecosistema: más profundidad ===== */
.eco-sec{overflow:hidden}
.eco-sec .container{position:relative;z-index:1}
.eco-tile{border:1px solid rgba(255,255,255,.35);transition:transform .45s var(--ease),box-shadow .45s}
.eco-tile:hover{transform:translateY(-6px);box-shadow:0 28px 56px rgba(15,42,26,.28)}
.eco-idx{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35);top:1rem;left:1rem}
.eco-cuerpo{z-index:2}

/* ===== 3 · Mapa: retícula y brillo ===== */
.mp-sec{position:relative;overflow:hidden}
.mp-sec .container{position:relative;z-index:1}
.mp-visual::before{content:"";position:absolute;inset:8% -10%;border-radius:50%;background:radial-gradient(circle,rgba(151,196,89,.28),transparent 68%);filter:blur(10px);z-index:-1}
.mp-stat{padding:1rem 1.3rem;width:max-content;max-width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(151,196,89,.25);border-radius:20px;backdrop-filter:blur(6px)}
.mp-stat span{border-left-color:rgba(151,196,89,.5)}

/* ===== 4 · Productos destacados ===== */
#destacados-sec{position:relative;overflow:hidden;background:linear-gradient(180deg,#fbfdf8,#f4f9f0)!important;padding:6rem 0}
#destacados-sec .container{position:relative;z-index:1}
.product-card--featured{position:relative;padding:.7rem!important;background:#fff!important;border:1px solid var(--v6-borde)!important;border-radius:28px!important;box-shadow:0 10px 30px rgba(15,42,26,.07)!important;transition:transform .45s var(--ease),box-shadow .45s!important;overflow:hidden}
.product-card--featured:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(15,42,26,.16)!important}
.product-card--featured>:first-child{aspect-ratio:1/1!important;border-radius:20px!important;box-shadow:none!important}
.product-card--featured:hover>:first-child{transform:none;box-shadow:none}
.product-card--featured>:first-child img{transition:transform .8s var(--ease)}
.product-card--featured:hover>:first-child img{transform:scale(1.07)}
.product-card--featured>*:not(:first-child){margin-left:.8rem!important;margin-right:.8rem!important}
.product-card--featured .product-card__acciones{margin-left:.8rem!important;margin-right:.8rem!important}
.product-card--featured .product-card__precio{display:inline-block;align-self:flex-start;padding:.15rem .8rem;background:#e9f3e1;border-radius:999px;font-size:1.05rem}
.product-card--featured .product-card__acciones{margin-bottom:.5rem}
.product-card--featured .btn-agregar{border-radius:999px}
.product-card--featured .btn-ficha-link{border-radius:999px}

/* ===== 5 · Reseñas: tarjetas ===== */
.rs-sec{position:relative;overflow:hidden;background:linear-gradient(180deg,#eef5e8,#e5f0dc)!important}
.rs-sec .container{position:relative;z-index:1}
.rs-resumen{background:radial-gradient(500px 300px at 90% 0%,rgba(151,196,89,.35),transparent 60%),linear-gradient(160deg,#0f2a1a,#1b4510);box-shadow:0 28px 60px rgba(15,42,26,.28)}
#resenas-grid{columns:2;column-gap:1.1rem}
.rs-item{break-inside:avoid;margin:0 0 1.1rem;padding:3.2rem 1.5rem 1.4rem;background:#fff;border:1px solid var(--v6-borde);border-radius:24px;box-shadow:0 8px 24px rgba(15,42,26,.06);transition:transform .4s var(--ease),box-shadow .4s}
.rs-item:hover{transform:translateY(-4px);box-shadow:var(--v6-sombra)}
.rs-item::before{left:1.4rem;top:.9rem;color:var(--verde-700);opacity:.9}
.rs-item p{font-size:1.02rem}
.rs-item--principal{column-span:all;padding-top:3.4rem;background:linear-gradient(135deg,#fff,#f1f8ea)}
.rs-item--principal p{font-size:1.45rem}
.rs-item .rs-autor{margin-top:1rem;padding-top:.9rem;border-top:1px solid #e3eed9}
.rs-item .rs-autor .rs-av{display:grid;place-items:center;flex:none;width:2.2rem;height:2.2rem;margin:0;border-radius:50%;background:var(--verde-700);color:#fff;font:700 .9rem 'Lato',sans-serif;padding:0}
.rs-item .rs-autor span:not(.rs-av){margin-left:auto;font-size:.72rem;background:#e9f3e1;padding:.15rem .6rem;border-radius:999px}
.rs-lista{position:relative}

/* ===== 6 · Cómo comprar: pasos en tarjetas sobre fondo oscuro ===== */
.cc-sec{position:relative;overflow:hidden;color:#fff;background:radial-gradient(900px 480px at 15% 0%,#1f4a1a 0%,transparent 60%),#0f2a1a!important}
.cc-sec .container{position:relative;z-index:1}
.cc-sec .sec-title{color:#fff}.cc-sec .sec-title span{color:var(--verde-200)}
.cc-pasos{position:relative;gap:1.2rem;margin:2.6rem 0 2.6rem}
.cc-pasos::before{content:"";position:absolute;left:8%;right:8%;top:2.9rem;border-top:2px dashed rgba(151,196,89,.35)}
.cc-pasos li{padding:5.2rem 1.5rem 1.6rem;border:1px solid rgba(151,196,89,.28);border-top:1px solid rgba(151,196,89,.28);border-radius:26px;background:rgba(255,255,255,.05);backdrop-filter:blur(8px);transition:transform .4s var(--ease),background .4s}
.cc-pasos li:hover{transform:translateY(-6px);background:rgba(255,255,255,.09)}
.cc-pasos b{left:1.5rem;top:1rem;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;font:800 1.15rem 'Lato',sans-serif;color:#0f2a1a;-webkit-text-stroke:0;background:var(--verde-200);box-shadow:0 0 0 7px rgba(151,196,89,.18)}
.cc-pasos strong{color:#fff}.cc-pasos span{color:rgba(255,255,255,.82)}
.cc-sec .btn-whatsapp{background:var(--verde-200);color:#0f2a1a}

/* ===== 7 · ASOFINRE y contacto ===== */
.as-sec{background:#f4f9f0!important;color:var(--tinta-texto);padding:5rem 0}
.as-sec::before{display:none}
.as-sec .container{position:relative;max-width:1100px}
.as-sec .container{padding:3.2rem 3rem;border-radius:34px;background:radial-gradient(520px 320px at 100% 0%,rgba(151,196,89,.35),transparent 60%),linear-gradient(135deg,#0b2114,#1b4510);color:#fff;overflow:hidden;box-shadow:0 30px 60px rgba(15,42,26,.25)}
.as-sec .container::after{content:"";position:absolute;right:-60px;bottom:-60px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(151,196,89,.3);box-shadow:0 0 0 38px rgba(151,196,89,.06),0 0 0 78px rgba(151,196,89,.04)}
.as-sec .sec-tag{background:rgba(255,255,255,.08);border-color:rgba(151,196,89,.35);color:var(--verde-200)}
.as-sec .sec-tag::before{background:var(--verde-200)}
.ct-sec{position:relative;overflow:hidden;background:linear-gradient(180deg,#f4f9f0,#eaf3e3)!important}
.ct-sec .container{position:relative;z-index:1}
.ct-sec .sec-title{font-size:clamp(2.4rem,5.4vw,3.8rem)}

@media(max-width:900px){
 .cf-hitos{grid-template-columns:1fr}
 #resenas-grid{columns:1}
 .cc-pasos::before{display:none}
 .as-sec .container{padding:2.2rem 1.5rem;border-radius:26px}
 .bg-aurora i{filter:blur(50px)}
}
@media(prefers-reduced-motion:reduce){.bg-aurora i{animation:none}.js-rv .rv{opacity:1;transform:none;transition:none}}

.rs-resumen .sec-tag{background:rgba(255,255,255,.08);border-color:rgba(151,196,89,.35);color:var(--verde-200)}
.rs-resumen .sec-tag::before{background:var(--verde-200);box-shadow:0 0 0 4px rgba(151,196,89,.18)}
.rs-resumen .btn-whatsapp{font-size:.9rem;padding:.8rem 1.2rem;line-height:1.3}
.as-sec p.sec-tag{font-size:.7rem;letter-spacing:.16em;color:var(--verde-200);margin-bottom:1rem}
.as-sec p{margin:0 0 1.4rem}
.as-sec p:last-child{margin-bottom:0}
@media(max-width:900px){.cf-hitos{grid-template-columns:repeat(3,1fr);gap:.5rem}.cf-hitos li{padding:.8rem .7rem}.cf-hitos b{font-size:1.45rem}.cf-hitos span{font-size:.72rem}}
