/* ============================================================
   YANG SHENG · EXPANSIÓN — Sistema de diseño "Opción 4"
   Verde de la opción 1 + crema/negro/tierra de la opción 2.
   Todos los valores son variables → el personalizador en vivo
   los sobrescribe (ver js/app.js).
   ============================================================ */

:root{
  /* ---- PALETA BASE (Equilibrio) ---- */
  --crema:        #F6F1E7;   /* fondo principal (opción 2) */
  --crema-2:      #EFE7D6;   /* fondo alterno */
  --blanco:       #FFFDF8;   /* tarjetas */
  --tinta:        #2A2622;   /* negro cálido (opción 2) */
  --tinta-suave:  #635B51;   /* texto secundario */
  --marca:        #6E8C72;   /* VERDE de la opción 1 */
  --marca-osc:    #4F6A54;   /* verde oscuro de la opción 1 */
  --acento:       #C5805A;   /* tierra/terracota de la opción 2 */
  --oro:          #C9A96A;   /* dorado para detalles */
  --linea:        #E4DACA;   /* bordes suaves */

  /* ---- TIPOGRAFÍA (la cambia el personalizador) ---- */
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Mulish", system-ui, sans-serif;

  /* ---- FORMA (la cambia el personalizador) ---- */
  --radio:         24px;     /* radio de tarjetas/inputs */
  --radio-img:     140px 140px 24px 24px;  /* forma de imágenes hero */
  --radio-img2:    24px 24px 160px 24px;   /* forma imagen "sobre" */
  --radio-btn:     40px;

  /* ---- MOTION (lo regula el personalizador) ---- */
  --vel: 1;                  /* multiplicador de velocidad de animación */
  --reveal-y: 26px;          /* desplazamiento de las apariciones */

  --maxw: 1180px;
  --sombra: 0 22px 50px rgba(42,38,34,.10);
  --sombra-soft: 0 10px 30px rgba(42,38,34,.07);
}

/* Paleta alternativa: JADE NOCTURNO (más profunda, mística) */
:root[data-tema="jade"]{
  --crema:#EFEADD; --crema-2:#E6DECB; --blanco:#FBF8F1;
  --tinta:#23302A; --tinta-suave:#566059;
  --marca:#5E8268; --marca-osc:#3C5A47; --acento:#B9774F; --oro:#C7A063; --linea:#DBD2BF;
}
/* Paleta alternativa: AMANECER (más cálida, terracota al frente) */
:root[data-tema="amanecer"]{
  --crema:#FAF3E9; --crema-2:#F3E7D6; --blanco:#FFFCF6;
  --tinta:#352A22; --tinta-suave:#6B5B4C;
  --marca:#7C9A78; --marca-osc:#566F50; --acento:#C97C4F; --oro:#D2A766; --linea:#EBDCC6;
}

/* ---- FORMAS (data-forma) ---- */
:root[data-forma="organico"]{
  --radio:30px;
  --radio-img:54% 46% 48% 52% / 60% 60% 40% 40%;
  --radio-img2:54% 46% 48% 52% / 48% 52% 48% 52%;
  --radio-btn:50px;
}
:root[data-forma="suave"]{
  --radio:22px; --radio-img:28px; --radio-img2:28px; --radio-btn:40px;
}
:root[data-forma="editorial"]{
  --radio:10px; --radio-img:160px 160px 12px 12px; --radio-img2:12px 12px 160px 12px; --radio-btn:8px;
}

/* ---- INTENSIDAD DE MOVIMIENTO (data-motion) ----
   "suave" = la sensación actual (calmada y elegante).
   "plena" = más viva. Nunca se apaga del todo: siempre hay movimiento. */
:root[data-motion="suave"]{ --vel:1; --reveal-y:26px; }
:root[data-motion="plena"]{ --vel:.78; --reveal-y:38px; }

/* ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--tinta); background:var(--crema);
  line-height:1.7; font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--marca-osc);font-weight:700}

/* grano sutil premium sobre todo */
body::after{
  content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* resplandor suave que sigue al cursor (desktop) */
.cursor-glow{
  position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle, color-mix(in srgb, var(--marca) 22%, transparent), transparent 65%);
  transform:translate(-50%,-50%);left:50%;top:30%;transition:opacity .6s;opacity:0;mix-blend-mode:multiply;
}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;min-height:50px;padding:0 30px;
  border-radius:var(--radio-btn);font-weight:700;font-size:.96rem;cursor:pointer;
  transition:transform calc(.38s * var(--vel)) cubic-bezier(.34,1.4,.4,1), background .3s, box-shadow .4s, color .3s, gap .3s;
  border:1.6px solid transparent;font-family:var(--sans);position:relative;overflow:hidden;
}
.btn-primary{background:var(--marca);color:var(--blanco);box-shadow:0 12px 26px color-mix(in srgb, var(--marca) 34%, transparent)}
.btn-primary:hover{background:var(--marca-osc);transform:translateY(-3px) scale(1.015)}
.btn-acento{background:var(--acento);color:#fff;box-shadow:0 12px 26px color-mix(in srgb, var(--acento) 34%, transparent)}
.btn-acento:hover{transform:translateY(-3px) scale(1.015);filter:brightness(1.05)}
.btn-ghost{border-color:var(--tinta);color:var(--tinta)}
.btn-ghost:hover{background:var(--tinta);color:var(--crema)}
.btn .ar{transition:transform .3s}
.btn:hover .ar{transform:translateX(4px)}
:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:6px}

/* ---------- NAV (header opción 2) ---------- */
header.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--crema) 82%, transparent);backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb, var(--linea) 60%, transparent)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{font-family:var(--serif);font-size:1.6rem;font-weight:500;display:flex;align-items:center;gap:11px;letter-spacing:.01em}
.logo .leaf{width:30px;height:30px;border-radius:50% 50% 50% 2px;background:var(--marca);display:inline-block;transform:rotate(45deg);transition:transform .6s cubic-bezier(.34,1.5,.4,1)}
.logo:hover .leaf{transform:rotate(225deg)}
.nav-links{display:flex;gap:32px;font-size:.93rem;font-weight:600}
.nav-links a{color:var(--tinta-suave);position:relative;padding:4px 0;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--marca);transition:width .3s}
.nav-links a:hover{color:var(--tinta)}.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:14px}
.menu-btn{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--tinta)}

/* ---------- SECCIONES ---------- */
section{position:relative;padding:96px 0}
.sec-head{max-width:640px;margin-bottom:50px}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head h2{font-size:clamp(2.1rem,4.4vw,3.3rem);margin:14px 0 16px}
.sec-head p{color:var(--tinta-suave);font-size:1.1rem}

/* divisor ondulado ("ondita") entre secciones */
.wave{display:block;width:100%;height:70px;margin:-1px 0}
.wave svg{width:100%;height:100%;display:block}

/* ---------- HERO (estructura opción 1) ---------- */
.hero{padding:80px 0 50px;position:relative}
.aurora{position:absolute;inset:-10% -5% auto -5%;height:680px;z-index:0;pointer-events:none;filter:blur(60px);opacity:.55}
.aurora i{position:absolute;border-radius:50%;display:block}
.aurora i:nth-child(1){width:420px;height:420px;background:color-mix(in srgb,var(--marca) 60%,transparent);top:-60px;left:8%;animation:drift calc(22s * var(--vel,1)) ease-in-out infinite}
.aurora i:nth-child(2){width:360px;height:360px;background:color-mix(in srgb,var(--acento) 55%,transparent);top:40px;right:14%;animation:drift calc(26s * var(--vel,1)) ease-in-out infinite reverse}
.aurora i:nth-child(3){width:300px;height:300px;background:color-mix(in srgb,var(--oro) 50%,transparent);bottom:-40px;left:38%;animation:drift calc(30s * var(--vel,1)) ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,24px) scale(.95)}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:2}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.5rem);margin:18px 0 22px}
.hero h1 em{font-style:italic;color:var(--marca-osc)}
.hero p.lead{font-size:1.18rem;color:var(--tinta-suave);max-width:32ch;margin-bottom:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-media{position:relative}
.hero-media .ph{width:100%;height:560px;object-fit:cover;border-radius:var(--radio-img);filter:saturate(.97);background:var(--crema-2)}
.hero-badge{position:absolute;left:-22px;bottom:34px;background:var(--blanco);border:1px solid var(--linea);border-radius:18px;padding:15px 20px;box-shadow:var(--sombra);display:flex;align-items:center;gap:12px}
.stars{color:var(--oro);font-size:1rem;letter-spacing:2px}
.hero-badge b{font-family:var(--serif);font-size:1.5rem;display:block;line-height:1}
.hero-badge small{font-size:.78rem;color:var(--tinta-suave)}

/* franja de valores */
.values{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:22px 0;margin-top:34px;overflow:hidden}
.values .track{display:flex;gap:46px;justify-content:center;flex-wrap:wrap;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--marca-osc)}
.values .track span{opacity:.5}

/* ---------- QUÉ ES ---------- */
.ques{background:var(--blanco)}
.ques-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ques figure .ph{height:480px;width:100%;object-fit:cover;border-radius:var(--radio);background:var(--crema-2)}
.kanji{font-family:var(--serif);font-size:4.4rem;color:var(--marca);opacity:.32;line-height:1;animation:breathe calc(7s * var(--vel,1)) ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.22;transform:scale(1)}50%{opacity:.4;transform:scale(1.04)}}
.ques-txt h2{margin:8px 0 18px}
.ques-txt p{color:var(--tinta-suave);margin-bottom:16px}
.ques-txt em{color:var(--marca-osc);font-style:italic;font-family:var(--serif)}

/* ---------- 3 FORMAS (cajitas opción 1) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:36px 30px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform calc(.45s * var(--vel,1)) cubic-bezier(.34,1.4,.4,1), box-shadow .45s}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--marca) 8%,transparent),transparent 60%);opacity:0;transition:opacity .45s}
.card:hover{transform:translateY(-8px);box-shadow:var(--sombra)}
.card:hover::before{opacity:1}
.card .ic{width:60px;height:60px;border-radius:50% 50% 50% 12px;display:grid;place-items:center;margin-bottom:20px;font-size:1.5rem;position:relative;z-index:2}
.card:nth-child(1) .ic{background:color-mix(in srgb,var(--marca) 18%,var(--blanco));color:var(--marca-osc)}
.card:nth-child(2) .ic{background:color-mix(in srgb,var(--acento) 18%,var(--blanco));color:var(--acento)}
.card:nth-child(3) .ic{background:color-mix(in srgb,var(--oro) 22%,var(--blanco));color:var(--marca-osc)}
.card .num{font-family:var(--serif);font-style:italic;color:var(--acento);font-size:1rem;margin-bottom:8px;position:relative;z-index:2}
.card h3{font-size:1.55rem;margin-bottom:10px;position:relative;z-index:2}
.card p{color:var(--tinta-suave);font-size:.98rem;flex:1;margin-bottom:18px;position:relative;z-index:2}
.card .price{font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--marca-osc);margin-bottom:16px;position:relative;z-index:2}
.card .arrow{font-weight:700;color:var(--marca-osc);display:inline-flex;gap:8px;align-items:center;transition:gap .3s;position:relative;z-index:2}
.card:hover .arrow{gap:14px}

/* ---------- SOBRE ALEJANDRA ---------- */
.about{background:var(--crema-2)}
.about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center}
.about figure .ph{height:540px;width:100%;object-fit:cover;border-radius:var(--radio-img2);background:var(--crema)}
.about blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.7vw,2.2rem);line-height:1.28;color:var(--marca-osc);margin:8px 0 22px}
.about p{color:var(--tinta-suave);margin-bottom:18px}
.about .sign{font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--acento)}
.placeholder{display:inline-block;font-size:.7rem;letter-spacing:.04em;background:var(--oro);color:#fff;padding:2px 9px;border-radius:6px;font-weight:700;vertical-align:middle;font-family:var(--sans)}

/* ============================================================
   RESEÑAS — la sección estrella (reinventada)
   ============================================================ */
.resenas{background:var(--tinta);color:var(--crema);position:relative;overflow:hidden}
.resenas .aurora{opacity:.4;height:100%}
.resenas .eyebrow{color:var(--oro)}
.resenas h2{color:var(--crema)}
.resenas .sub{color:color-mix(in srgb,var(--crema) 72%,transparent);font-size:1.12rem;max-width:54ch;margin:0 auto 8px}

/* contador grande animado */
.counters{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:46px 0 14px;position:relative;z-index:2}
.counter{flex:1;min-width:180px;max-width:260px;text-align:center;padding:30px 18px;border-radius:var(--radio);
  background:color-mix(in srgb,var(--crema) 7%,transparent);border:1px solid color-mix(in srgb,var(--crema) 14%,transparent);backdrop-filter:blur(4px)}
.counter b{font-family:var(--serif);font-size:clamp(2.8rem,6vw,4rem);line-height:1;display:block;color:var(--crema)}
.counter b .plus{color:var(--oro)}
.counter .lbl{font-size:.92rem;color:color-mix(in srgb,var(--crema) 70%,transparent);margin-top:8px;display:block}
.counter .st{color:var(--oro);letter-spacing:3px;font-size:1.1rem}

/* botones de plataformas con links reales */
.platf-note{text-align:center;color:color-mix(in srgb,var(--crema) 72%,transparent);margin:40px auto 22px;font-style:italic;font-family:var(--serif);font-size:1.3rem;max-width:30ch;position:relative;z-index:2}
.platforms{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
.platf{display:flex;align-items:center;gap:14px;background:var(--crema);color:var(--tinta);border-radius:var(--radio-btn);padding:14px 22px;min-width:210px;
  transition:transform .4s cubic-bezier(.34,1.4,.4,1), box-shadow .4s;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.platf:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 34px rgba(0,0,0,.26)}
.platf .pico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:1.1rem;color:#fff;flex-shrink:0}
.platf .pname{font-weight:800;font-size:.98rem;display:block}
.platf .pmeta{font-size:.82rem;color:var(--tinta-suave)}
.platf .pmeta b{color:var(--acento)}
.platf .go{margin-left:auto;color:var(--marca-osc);font-weight:800;transition:transform .3s}
.platf:hover .go{transform:translateX(4px)}

/* carrusel de testimonios reales */
.tst-rail{margin-top:54px;overflow:hidden;position:relative;z-index:2;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tst-track{display:flex;gap:20px;width:max-content;animation:scrollx calc(46s * var(--vel,1)) linear infinite}
.tst-rail:hover .tst-track{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}
.tst{background:color-mix(in srgb,var(--crema) 9%,transparent);border:1px solid color-mix(in srgb,var(--crema) 15%,transparent);border-radius:var(--radio);padding:26px;width:340px;flex-shrink:0}
.tst .stars{margin-bottom:12px}
.tst p{font-size:1.02rem;color:var(--crema);margin-bottom:16px;line-height:1.6}
.tst .who{display:flex;align-items:center;gap:12px}
.tst .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--marca);flex-shrink:0}
.tst .who b{font-size:.9rem;color:var(--crema);display:block}
.tst .who small{font-size:.76rem;color:color-mix(in srgb,var(--crema) 65%,transparent)}

/* ---------- FAQ ---------- */
.faq{background:var(--crema)}
.faq-wrap{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--linea)}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--serif);font-size:1.25rem;color:var(--tinta);
  padding:26px 44px 26px 0;position:relative;display:flex;align-items:center;gap:12px;transition:color .3s}
.faq-q:hover{color:var(--marca-osc)}
.faq-q .ic{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:1.6px solid var(--marca);
  display:grid;place-items:center;color:var(--marca-osc);font-size:1.1rem;transition:transform .4s,background .3s,color .3s}
.faq-item.open .faq-q .ic{transform:translateY(-50%) rotate(45deg);background:var(--marca);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height calc(.5s * var(--vel,1)) ease;color:var(--tinta-suave)}
.faq-a .inner{padding:0 0 26px;font-size:1.05rem;line-height:1.7}
.faq-a .inner em{color:var(--marca-osc);font-style:italic;font-family:var(--serif)}

/* ---------- CTA FINAL ---------- */
.cta{background:var(--marca-osc);color:var(--crema);text-align:center;position:relative;overflow:hidden}
.cta .aurora{opacity:.35;height:100%}
.cta h2{color:var(--crema);margin-bottom:14px;position:relative;z-index:2}
.cta p{color:color-mix(in srgb,var(--crema) 84%,transparent);max-width:48ch;margin:0 auto 28px;font-size:1.1rem;position:relative;z-index:2}
.form-row{display:flex;gap:12px;max-width:480px;margin:0 auto;flex-wrap:wrap;position:relative;z-index:2}
.form-row input{flex:1;min-width:200px;min-height:54px;border:none;border-radius:var(--radio-btn);padding:0 24px;font-family:var(--sans);font-size:1rem}
.cta small{display:block;margin-top:16px;font-size:.8rem;color:color-mix(in srgb,var(--crema) 60%,transparent);position:relative;z-index:2}

/* ---------- FOOTER ---------- */
footer{background:var(--tinta);color:var(--crema);padding:64px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
footer .logo{color:var(--crema);margin-bottom:14px}
footer .fabout{color:color-mix(in srgb,var(--crema) 62%,transparent);font-size:.92rem;max-width:34ch}
.foot-col h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);margin-bottom:14px}
.foot-col a{display:block;color:color-mix(in srgb,var(--crema) 72%,transparent);font-size:.92rem;padding:5px 0;transition:color .3s}
.foot-col a:hover{color:var(--crema)}
.foot-bot{border-top:1px solid color-mix(in srgb,var(--crema) 15%,transparent);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:color-mix(in srgb,var(--crema) 55%,transparent)}
.disc{background:var(--crema-2);text-align:center;padding:18px;font-size:.84rem;color:var(--tinta-suave)}

/* ---------- APARICIONES AL SCROLL ---------- */
.reveal{opacity:0;transform:translateY(var(--reveal-y));filter:blur(6px);transition:opacity calc(.8s * var(--vel,1)) ease, transform calc(.8s * var(--vel,1)) cubic-bezier(.2,.7,.3,1), filter calc(.8s * var(--vel,1)) ease}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .aurora,.kanji,.tst-track,.breath-orb{animation:none!important}
  .cursor-glow{display:none}
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .hero-grid,.ques-grid,.about-grid{grid-template-columns:1fr;gap:38px}
  .cards{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .menu-btn{display:block}
  .hero-media .ph{height:420px}
  .about figure{order:-1}
  section{padding:72px 0}
  .cursor-glow{display:none}
}

/* página interior: cabecera compacta */
.page-hero{padding:70px 0 30px;position:relative}
.page-hero .eyebrow{margin-bottom:14px;display:block}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.8rem);max-width:18ch}
.page-hero h1 em{font-style:italic;color:var(--marca-osc)}
.page-hero p.lead{font-size:1.18rem;color:var(--tinta-suave);max-width:56ch;margin-top:18px}
.breadcrumb{font-size:.85rem;color:var(--tinta-suave);margin-bottom:18px}
.breadcrumb a:hover{color:var(--marca-osc)}

/* bloques genéricos de subpágina */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feat .fcard{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:30px;transition:transform .4s cubic-bezier(.34,1.4,.4,1),box-shadow .4s}
.feat .fcard:hover{transform:translateY(-6px);box-shadow:var(--sombra-soft)}
.feat .fcard .ic{font-size:1.7rem;margin-bottom:14px}
.feat .fcard h3{font-size:1.3rem;margin-bottom:8px}
.feat .fcard p{color:var(--tinta-suave);font-size:.96rem}
@media(max-width:760px){.feat{grid-template-columns:1fr}}

.pricebox{max-width:520px;margin:0 auto;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:44px;text-align:center;box-shadow:var(--sombra-soft)}
.pricebox .amt{font-family:var(--serif);font-size:3.4rem;color:var(--marca-osc);line-height:1}
.pricebox .amt small{font-size:1rem;color:var(--tinta-suave)}
.pricebox ul{list-style:none;text-align:left;margin:24px 0;display:grid;gap:12px}
.pricebox li{padding-left:30px;position:relative;color:var(--tinta-suave)}
.pricebox li::before{content:"✦";position:absolute;left:0;color:var(--acento)}

/* orbe de respiración (detalle "wow" con sentido) */
.breath{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.breath-orb{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 38% 34%, color-mix(in srgb,var(--marca) 60%,var(--blanco)), var(--marca-osc));
  box-shadow:0 0 0 0 color-mix(in srgb,var(--marca) 40%,transparent);animation:breath-pulse calc(8s * var(--vel,1)) ease-in-out infinite;display:grid;place-items:center}
@keyframes breath-pulse{0%,100%{transform:scale(.82);box-shadow:0 0 0 0 color-mix(in srgb,var(--marca) 30%,transparent)}50%{transform:scale(1.12);box-shadow:0 0 60px 12px color-mix(in srgb,var(--marca) 22%,transparent)}}
.breath-lbl{font-family:var(--serif);font-style:italic;color:var(--crema);font-size:1.3rem;min-height:1.5em}

/* ============================================================
   PERSONALIZADOR EN VIVO (panel flotante)
   ============================================================ */
.cz-fab{position:fixed;right:22px;bottom:22px;z-index:9999;display:flex;align-items:center;gap:9px;
  background:var(--tinta);color:var(--crema);border:none;border-radius:50px;padding:13px 20px;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:.9rem;box-shadow:0 14px 34px rgba(42,38,34,.32);
  transition:transform .4s cubic-bezier(.34,1.5,.4,1),opacity .3s}
.cz-fab svg{color:var(--oro)}
.cz-fab:hover{transform:translateY(-3px) scale(1.03)}
.cz-fab.hide{opacity:0;pointer-events:none;transform:scale(.8)}
.cz-panel{position:fixed;right:22px;bottom:22px;z-index:10000;width:330px;max-width:calc(100vw - 32px);max-height:calc(100vh - 44px);overflow-y:auto;
  background:var(--blanco);border:1px solid var(--linea);border-radius:24px;box-shadow:0 30px 70px rgba(42,38,34,.34);
  padding:22px;transform:translateY(20px) scale(.96);opacity:0;pointer-events:none;
  transition:transform .42s cubic-bezier(.34,1.4,.4,1),opacity .3s}
.cz-panel.open{transform:none;opacity:1;pointer-events:auto}
.cz-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cz-head b{font-family:var(--serif);font-size:1.3rem;color:var(--tinta)}
.cz-x{background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--tinta-suave)}
.cz-hint{font-size:.86rem;color:var(--tinta-suave);margin-bottom:16px;line-height:1.5}
.cz-block{margin-bottom:16px}
.cz-block>label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--marca-osc);font-weight:700;margin-bottom:8px}
.cz-chips{display:flex;gap:8px;flex-wrap:wrap}
.cz-chips .ch{flex:1;min-width:fit-content;background:var(--crema);border:1.5px solid var(--linea);border-radius:30px;padding:8px 14px;
  font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--tinta-suave);cursor:pointer;transition:.25s}
.cz-chips .ch:hover{border-color:var(--marca)}
.cz-chips .ch.on{background:var(--marca);border-color:var(--marca);color:#fff}
.cz-colors{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cz-colors input[type=color]{width:46px;height:38px;border:1.5px solid var(--linea);border-radius:12px;background:none;cursor:pointer;padding:2px}
.cz-colors span{font-size:.78rem;color:var(--tinta-suave)}
.cz-reset{margin-left:auto;background:var(--crema);border:1.5px solid var(--linea);border-radius:10px;width:36px;height:36px;cursor:pointer;font-size:1rem;color:var(--tinta-suave)}
.cz-block select{width:100%;padding:10px 12px;border:1.5px solid var(--linea);border-radius:12px;background:var(--crema);font-family:var(--sans);font-size:.9rem;color:var(--tinta);cursor:pointer}
.cz-restore{width:100%;margin-top:6px;background:none;border:1.5px solid var(--linea);border-radius:30px;padding:11px;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:.86rem;color:var(--tinta-suave);transition:.25s}
.cz-restore:hover{border-color:var(--acento);color:var(--acento)}
@media(max-width:520px){.cz-fab span{display:none}}

/* ============================================================
   APARICIONES VARIADAS (las asigna app.js por sección)
   ============================================================ */
.reveal.r-left { transform: translateX(-40px) translateY(8px); }
.reveal.r-right{ transform: translateX(40px) translateY(8px); }
.reveal.r-scale{ transform: scale(.9); }
.reveal.r-rot  { transform: translateY(26px) rotate(-1.2deg); }
.reveal.in{ opacity:1; transform:none; filter:none; }

/* ============================================================
   MODO FUTURISTA (data-futur="on")  ·  "más futurista"
   El "menos futurista" (off) es el diseño actual, que ya está chulo.
   ============================================================ */
:root[data-futur="on"]{ --sombra:0 22px 60px rgba(42,38,34,.16); }
/* aurora más viva y presente */
:root[data-futur="on"] .aurora{ opacity:.72; filter:blur(50px); }
:root[data-futur="on"] .hero .aurora i{ mix-blend-mode:normal; }
/* tarjetas con cristal (glassmorphism) y borde luminoso */
:root[data-futur="on"] .card{
  background:color-mix(in srgb, var(--blanco) 70%, transparent);
  backdrop-filter:blur(10px) saturate(1.1);
  border:1px solid color-mix(in srgb, var(--marca) 26%, var(--linea));
  box-shadow:0 10px 40px color-mix(in srgb, var(--marca) 12%, transparent);
}
:root[data-futur="on"] .card:hover{
  box-shadow:0 26px 60px color-mix(in srgb, var(--marca) 22%, transparent),
             0 0 0 1px color-mix(in srgb, var(--marca) 40%, transparent);
}
:root[data-futur="on"] .feat .fcard{
  background:color-mix(in srgb, var(--blanco) 72%, transparent);
  backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb, var(--marca) 22%, var(--linea));
}
/* titular del hero con degradado animado sutil */
:root[data-futur="on"] .hero h1 em{
  background:linear-gradient(100deg, var(--marca-osc), var(--acento), var(--marca-osc));
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shimmer calc(6s * var(--vel,1)) linear infinite;
}
@keyframes shimmer{to{background-position:220% 0}}
/* botones con halo */
:root[data-futur="on"] .btn-primary{ box-shadow:0 0 0 1px color-mix(in srgb,var(--marca) 50%,transparent), 0 14px 34px color-mix(in srgb,var(--marca) 40%,transparent); }
:root[data-futur="on"] .btn-acento { box-shadow:0 0 0 1px color-mix(in srgb,var(--acento) 50%,transparent), 0 14px 34px color-mix(in srgb,var(--acento) 40%,transparent); }
/* rejilla futurista tenue en secciones oscuras */
:root[data-futur="on"] .resenas::before,
:root[data-futur="on"] .cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:1;
  background-image:linear-gradient(color-mix(in srgb,var(--crema) 8%,transparent) 1px,transparent 1px),
                   linear-gradient(90deg,color-mix(in srgb,var(--crema) 8%,transparent) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask:radial-gradient(ellipse at 50% 0%, #000, transparent 70%);
          mask:radial-gradient(ellipse at 50% 0%, #000, transparent 70%);
}
/* badges/contadores con brillo de cristal */
:root[data-futur="on"] .counter{ background:color-mix(in srgb,var(--crema) 10%,transparent); border-color:color-mix(in srgb,var(--oro) 30%,transparent); box-shadow:0 0 40px color-mix(in srgb,var(--marca) 14%,transparent) inset; }
:root[data-futur="on"] .hero-badge{ backdrop-filter:blur(8px); background:color-mix(in srgb,var(--blanco) 78%,transparent); }

/* ============================================================
   BANDA DE VALORES → MARQUEE ROTATIVO (chulo en móvil y desktop)
   ============================================================ */
.values{overflow:hidden}
.values-marquee{ -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.vtrack{ display:flex; align-items:center; gap:38px; width:max-content;
  font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--marca-osc);
  animation:scrollx calc(34s * var(--vel,1)) linear infinite; }
.values:hover .vtrack{ animation-play-state:paused; }
.vtrack span{ white-space:nowrap; }
.vtrack i{ color:var(--oro); font-style:normal; opacity:.6; font-size:.8rem; }

/* ============================================================
   BOTONES "GLASS" REDONDEADOS (CTA de tarjetas, visibles en móvil)
   ============================================================ */
.pill{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:10px 18px;border-radius:40px;font-weight:700;font-size:.92rem;font-family:var(--sans);
  color:var(--marca-osc);
  background:color-mix(in srgb, var(--marca) 12%, var(--blanco));
  border:1.5px solid color-mix(in srgb, var(--marca) 30%, transparent);
  backdrop-filter:blur(6px);
  transition:transform .35s cubic-bezier(.34,1.4,.4,1), background .3s, box-shadow .35s, gap .3s;
}
.pill:hover{ transform:translateY(-2px); gap:12px; background:var(--marca); color:#fff; box-shadow:0 12px 26px color-mix(in srgb,var(--marca) 34%,transparent); }
.card .pill{ margin-top:4px; }

/* ============================================================
   NAVBAR INFERIOR FLOTANTE (Empieza · Escríbeme) — lo inyecta app.js
   ============================================================ */
body{ padding-bottom:86px; }
.dock{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:9998;
  display:flex; gap:10px; padding:8px; border-radius:50px;
  background:color-mix(in srgb, var(--tinta) 90%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 18px 44px rgba(42,38,34,.32), 0 0 0 1px color-mix(in srgb,var(--crema) 12%,transparent) inset;
  animation:dockin .7s cubic-bezier(.34,1.5,.4,1) both;
}
@keyframes dockin{from{opacity:0;transform:translate(-50%,30px)}to{opacity:1;transform:translate(-50%,0)}}
.dock a{
  display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 24px;border-radius:40px;
  font-family:var(--sans);font-weight:700;font-size:.95rem;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.4,.4,1),background .3s,box-shadow .3s,gap .3s;
}
.dock .d-prim{ background:var(--marca); color:#fff; box-shadow:0 8px 20px color-mix(in srgb,var(--marca) 40%,transparent); }
.dock .d-prim:hover{ transform:translateY(-2px); gap:12px; background:var(--marca-osc); }
.dock .d-ghost{ background:transparent; color:var(--crema); border:1.5px solid color-mix(in srgb,var(--crema) 30%,transparent); }
.dock .d-ghost:hover{ transform:translateY(-2px); gap:12px; background:color-mix(in srgb,var(--crema) 14%,transparent); }
@media(max-width:520px){
  .dock{ left:14px; right:14px; transform:none; justify-content:center; }
  .dock a{ flex:1; justify-content:center; padding:0 14px; }
  @keyframes dockin{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
}

/* FAB Personaliza: más visible (sube por encima del dock + pulso) */
.cz-fab{ bottom:96px; box-shadow:0 14px 34px rgba(42,38,34,.34), 0 0 0 0 color-mix(in srgb,var(--acento) 60%,transparent); animation:fabpulse 2.6s ease-out infinite; }
.cz-fab .dotlive{ width:8px;height:8px;border-radius:50%;background:var(--acento);box-shadow:0 0 0 0 var(--acento); }
@keyframes fabpulse{0%{box-shadow:0 14px 34px rgba(42,38,34,.34), 0 0 0 0 color-mix(in srgb,var(--acento) 55%,transparent)}70%{box-shadow:0 14px 34px rgba(42,38,34,.34), 0 0 0 16px color-mix(in srgb,var(--acento) 0%,transparent)}100%{box-shadow:0 14px 34px rgba(42,38,34,.34), 0 0 0 0 color-mix(in srgb,var(--acento) 0%,transparent)}}
.cz-panel{ bottom:96px; }
@media(max-width:520px){ .cz-fab{ bottom:90px; } .cz-panel{ bottom:90px; left:14px; right:14px; } }

/* ============================================================
   MODAL DE CONTACTO (Escríbeme) — lo inyecta app.js
   ============================================================ */
.modal-ov{ position:fixed; inset:0; z-index:10001; background:rgba(42,38,34,.55); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .35s; }
.modal-ov.open{ opacity:1; pointer-events:auto; }
.modal{ width:100%; max-width:440px; background:var(--blanco); border:1px solid var(--linea); border-radius:26px; padding:30px; box-shadow:0 30px 80px rgba(42,38,34,.4); transform:translateY(20px) scale(.97); transition:transform .4s cubic-bezier(.34,1.4,.4,1); max-height:90vh; overflow-y:auto; }
.modal-ov.open .modal{ transform:none; }
.modal .m-x{ float:right; background:none;border:none;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--tinta-suave); }
.modal .eyebrow{ display:block; margin-bottom:6px; }
.modal h3{ font-family:var(--serif); font-size:1.7rem; margin-bottom:8px; color:var(--tinta); }
.modal p.sub{ color:var(--tinta-suave); font-size:.96rem; margin-bottom:18px; }
.modal label{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.04em; color:var(--marca-osc); margin:12px 0 6px; }
.modal input, .modal textarea{ width:100%; border:1.5px solid var(--linea); border-radius:14px; padding:12px 14px; font-family:var(--sans); font-size:1rem; background:var(--crema); color:var(--tinta); }
.modal input:focus, .modal textarea:focus{ outline:none; border-color:var(--marca); }
.modal textarea{ min-height:96px; resize:vertical; }
.modal .m-send{ width:100%; margin-top:18px; }
.modal .m-foot{ text-align:center; font-size:.8rem; color:var(--tinta-suave); margin-top:12px; }

/* ============================================================
   FONDO VERDE CTA RENOVADO (más profundo y con vida)
   ============================================================ */
.cta{ background:radial-gradient(120% 140% at 20% 0%, color-mix(in srgb,var(--marca) 70%, var(--tinta)) 0%, var(--marca-osc) 45%, color-mix(in srgb,var(--marca-osc) 80%, var(--tinta)) 100%); }
:root[data-tema="jade"] .cta{ background:radial-gradient(120% 140% at 20% 0%, var(--jade,#5E8268) 0%, var(--marca-osc) 50%, #23302A 100%); }

/* ============================================================
   MENÚ LATERAL (DRAWER) — hamburguesa en todas las pantallas
   ============================================================ */
/* overflow-x:clip evita el scroll lateral SIN romper el position:sticky del header */
html,body{ max-width:100%; overflow-x:clip; }
/* Escritorio: menú en línea integrado (como la v2). Móvil: hamburguesa → drawer */
@media(min-width:861px){ .nav-links{ display:flex; } .menu-btn{ display:none; } .nav-emp{ display:inline-flex; } }
@media(max-width:860px){ .nav-links{ display:none; } .menu-btn{ display:block; } .nav-emp{ display:none; } }
.menu-btn{ width:46px;height:46px;display:grid;place-items:center;border-radius:14px;transition:background .3s; }
.menu-btn:hover{ background:color-mix(in srgb,var(--marca) 12%,transparent); }
section[id]{ scroll-margin-top:96px; }
/* header flotante: al hacer scroll se despega en una barra redondeada que flota */
header.nav{ transition:background .4s, top .4s, padding .4s; }
.nav-in{ transition:height .4s, background .4s, box-shadow .4s, border-radius .4s, padding .4s; border:1px solid transparent; border-radius:50px; }
header.nav.scrolled{ background:transparent; border-color:transparent; box-shadow:none; backdrop-filter:none; top:10px; }
header.nav.scrolled .nav-in{ height:62px; background:color-mix(in srgb, var(--crema) 95%, transparent); backdrop-filter:blur(14px); border-color:var(--linea); box-shadow:0 14px 34px rgba(42,38,34,.16); padding-left:22px; padding-right:14px; }
@media(max-width:640px){ header.nav.scrolled{ top:8px; } header.nav.scrolled .nav-in{ height:58px; margin:0 10px; } }
.nav-emp{ align-items:center; min-height:42px; padding:0 22px; border-radius:var(--radio-btn); background:var(--marca); color:#fff; font-weight:700; font-size:.92rem; transition:transform .3s cubic-bezier(.34,1.4,.4,1), background .3s; }
.nav-emp:hover{ transform:translateY(-2px); background:var(--marca-osc); }

.drawer-ov{ position:fixed; inset:0; z-index:10002; background:rgba(42,38,34,.5); backdrop-filter:blur(5px); opacity:0; pointer-events:none; transition:opacity .4s; }
.drawer-ov.open{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:min(87vw,372px); z-index:10003;
  background:var(--crema); box-shadow:-30px 0 90px rgba(42,38,34,.34);
  transform:translateX(100%); transition:transform .55s cubic-bezier(.5,.05,.18,1);
  display:flex; flex-direction:column; padding:24px 28px; overflow:hidden; }
.drawer.open{ transform:none; }
.drawer .aurora{ position:absolute; inset:auto auto auto 0; top:-80px; height:420px; width:120%; opacity:.55; filter:blur(55px); z-index:0; }
.drawer-top{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.drawer-logo{ font-family:var(--serif); font-size:1.5rem; display:flex; gap:10px; align-items:center; }
.drawer-logo .leaf{ width:26px;height:26px;border-radius:50% 50% 50% 2px;background:var(--marca);display:inline-block;transform:rotate(45deg); animation:breathe 6s ease-in-out infinite; }
.drawer-x{ background:none;border:none;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--tinta);width:44px;height:44px;border-radius:12px;transition:background .3s,transform .4s; }
.drawer-x:hover{ background:color-mix(in srgb,var(--tinta) 8%,transparent); transform:rotate(90deg); }
.drawer-kanji{ font-family:var(--serif); font-size:5rem; color:var(--marca); opacity:.16; line-height:1; position:relative; z-index:2; margin:6px 0 -10px; }
.drawer-links{ display:flex; flex-direction:column; margin-top:14px; position:relative; z-index:2; }
.drawer-links a{ font-family:var(--serif); font-size:1.65rem; color:var(--tinta); padding:13px 0;
  border-bottom:1px solid color-mix(in srgb,var(--linea) 70%,transparent);
  display:flex; align-items:center; justify-content:space-between;
  opacity:0; transform:translateX(26px); transition:opacity .5s ease, transform .55s cubic-bezier(.34,1.4,.4,1), color .3s, padding .3s; }
.drawer.open .drawer-links a{ opacity:1; transform:none; }
.drawer-links a:nth-child(1){ transition-delay:.10s }
.drawer-links a:nth-child(2){ transition-delay:.16s }
.drawer-links a:nth-child(3){ transition-delay:.22s }
.drawer-links a:nth-child(4){ transition-delay:.28s }
.drawer-links a:nth-child(5){ transition-delay:.34s }
.drawer-links a:nth-child(6){ transition-delay:.40s }
.drawer-links a .ar{ color:var(--marca); font-size:1.1rem; opacity:0; transform:translateX(-8px); transition:.3s; }
.drawer-links a:hover{ color:var(--marca-osc); padding-left:10px; }
.drawer-links a:hover .ar{ opacity:1; transform:none; }
.drawer-foot{ margin-top:auto; position:relative; z-index:2; padding-top:16px; opacity:0; transform:translateY(14px); transition:opacity .5s .42s, transform .5s .42s; }
.drawer.open .drawer-foot{ opacity:1; transform:none; }
.drawer-cta{ display:flex; gap:10px; margin-bottom:16px; }
.drawer-cta a{ flex:1; justify-content:center; min-height:48px; }
.drawer-social{ display:flex; gap:18px; font-size:.9rem; font-weight:600; color:var(--tinta-suave); }
.drawer-social a{ display:inline-flex; align-items:center; gap:6px; transition:color .3s; }
.drawer-social a:hover{ color:var(--marca-osc); }
@media (prefers-reduced-motion:reduce){ .drawer .leaf{animation:none} .drawer-links a{opacity:1;transform:none;transition:none} .drawer-foot{opacity:1;transform:none} }

/* ============================================================
   AJUSTES MÓVIL (que no se rompa nada)
   ============================================================ */
@media(max-width:640px){
  /* la insignia de reseñas ya no desborda */
  .hero-badge{ left:10px; right:auto; bottom:12px; padding:12px 16px; }
  .hero-badge b{ font-size:1.3rem; }
  .hero{ padding:48px 0 36px; }
  .hero h1{ font-size:clamp(2.2rem,9vw,3rem); }
  .hero p.lead{ max-width:none; }
  .wrap{ padding:0 20px; }
  .vtrack{ font-size:1.02rem; gap:26px; }
  .sec-head h2, .cta h2, .resenas h2{ font-size:clamp(1.8rem,7.5vw,2.4rem); }
  .page-hero{ padding:54px 0 26px; }
  .page-hero h1{ font-size:clamp(2rem,8.5vw,2.8rem); }
  .platf{ min-width:0; width:100%; }
  .counters{ gap:12px; }
  .counter{ min-width:0; flex:1 1 100%; max-width:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .tst{ width:280px; }
  .breath-orb{ width:120px;height:120px; }
  /* el dock no tapa el contenido final */
  body{ padding-bottom:96px; }
}
@media(max-width:380px){
  .foot-grid{ grid-template-columns:1fr; }
  .dock a{ font-size:.88rem; padding:0 10px; }
}

/* PERSONALIZADOR en móvil = hoja inferior (no desborda, cruz grande y tocable) */
@media(max-width:640px){
  .cz-fab{ bottom:88px; right:16px; }
  .cz-panel{
    left:0; right:0; bottom:0; top:auto; width:auto; max-width:none;
    max-height:86vh; border-radius:24px 24px 0 0; padding:14px 18px 28px;
    box-shadow:0 -22px 50px rgba(42,38,34,.32);
  }
  .cz-panel::before{ content:""; display:block; width:42px; height:5px; border-radius:5px; background:var(--linea); margin:2px auto 10px; }
  .cz-head{ position:sticky; top:0; z-index:3; background:var(--blanco); padding:6px 0 10px; }
  .cz-x{ width:48px; height:48px; font-size:2rem; display:grid; place-items:center; border-radius:14px; background:var(--crema); color:var(--tinta); }
}