/* =========================================================
   CLARITO+ — página pública de beneficios (/clarito-plus)
   ========================================================= */

/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --blue-900:#000850;
  --blue-700:#0015E0;
  --blue-600:#041cff;
  --blue-500:#3E50FF;
  --blue-300:#8992FF;
  --blue-100:#EAEFFF;
  --blue-50:#F5F7FF;
  --white:#FFFFFF;
  --ink:#0A0E38;
  --grey:#6670A6;
  --line:#DDE3FA;
  --radius:2px;
  --serif:'Fraunces', serif;
  --sans:'Public Sans', sans-serif;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
ul{list-style:none;}
input{font-family:inherit;}

::selection{background:var(--blue-600); color:var(--white);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
}

/* =========================================================
   CLARITO+ — beneficios de la tarjeta (basado en el folleto)
   Azul Avante + amarillo, títulos condensados (Anton) y el logo en
   itálica pesada (Archivo 900 italic).
   ========================================================= */
.cl{
  --cl-blue:#041cff; --cl-blue-d:#0012c4; --cl-blue-dd:#000a7a;
  --cl-y:#ffc400; --cl-y-d:#e6a800; --cl-red:#e5242b;
  --cl-display:'Anton', 'Impact', sans-serif;
  --cl-logo:'Archivo', 'Public Sans', sans-serif;
  overflow-x:hidden;
}
.cl-wrap{ max-width:1180px; margin:0 auto; padding:0 40px; }
@media (max-width:720px){ .cl-wrap{ padding:0 22px; } }
.cl-center{ text-align:center; }
.cl-blue{ background:var(--cl-blue); color:#fff; position:relative; }
.cl-band{ padding:88px 0; }
.cl-y{ color:var(--cl-y); }
.cl-y-dark{ color:var(--cl-y-d); font-weight:700; }
.cl-blue-txt{ color:var(--cl-blue); }

/* Títulos */
.cl-display{
  font-family:var(--cl-display); font-weight:400; text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(34px, 5.4vw, 64px); line-height:1.04; color:var(--cl-blue); margin:0 0 14px;
}
.cl-display.is-light{ color:#fff; }
.cl-display.is-left{ text-align:left; }
.cl-display i{ font-family:var(--cl-logo); font-weight:900; font-style:italic; text-transform:none; letter-spacing:-.01em; }
.cl-display mark{
  background:var(--cl-blue); color:#fff; padding:0 .14em; box-decoration-break:clone; -webkit-box-decoration-break:clone;
  display:inline; position:relative;
}
.cl-sub{ font-size:clamp(18px, 2.2vw, 24px); font-weight:800; line-height:1.3; color:var(--cl-blue); margin:0 0 6px; }
.cl-sub.is-light{ color:#fff; }
.cl-sub.is-left{ text-align:left; }
.cl-copy{ font-size:clamp(16px, 1.7vw, 19px); line-height:1.55; color:#353a63; max-width:720px; margin:0 auto 10px; }
.cl-copy.is-light{ color:rgba(255,255,255,.92); }
.cl-copy.is-left{ margin-left:0; text-align:left; }
.cl-copy.is-blue{ color:var(--cl-blue); font-size:clamp(17px, 1.9vw, 21px); }
.cl-rule{ display:block; width:120px; height:4px; border-radius:4px; background:var(--cl-y); margin:18px 0; }
.cl-rule.is-center{ margin:18px auto; }

/* Caja azul de títulos (como en el folleto) */
.cl-stack{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin:0 0 20px; font-weight:400; }
.cl-box{
  display:inline-block; font-family:var(--cl-display); text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(30px, 4.4vw, 52px); line-height:1.06; color:#fff; background:var(--cl-blue);
  padding:.08em .32em .1em; box-shadow:10px 10px 0 var(--cl-y);
}
.cl-stack .cl-blue-txt{ font-family:var(--cl-display); text-transform:uppercase; font-size:clamp(24px, 3.2vw, 38px); line-height:1.1; }

/* Botones */
.cl-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.cl-ctas.is-center{ justify-content:center; }
.cl-btn{
  display:inline-flex; align-items:center; gap:8px; padding:15px 26px; border-radius:100px;
  font-weight:800; font-size:15px; letter-spacing:.01em; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.cl-btn svg{ width:18px; height:18px; transition:transform .25s var(--ease); }
.cl-btn:hover{ transform:translateY(-3px); }
.cl-btn:hover svg{ transform:translateX(4px); }
.cl-btn.is-yellow{ background:var(--cl-y); color:#121433; box-shadow:0 14px 30px -12px rgba(255,196,0,.8); }
.cl-btn.is-yellow:hover{ box-shadow:0 18px 36px -12px rgba(255,196,0,.95); }
.cl-btn.is-ghost{ border:2px solid rgba(255,255,255,.6); color:#fff; }
.cl-btn.is-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* ============ PORTADA ============ */
.cl-hero{ padding:56px 0 96px; overflow:hidden; }
.cl-hero-bg span{ position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; }
.cl-hero-bg span:nth-child(1){ width:560px; height:560px; right:-140px; top:-160px; background:radial-gradient(circle, rgba(255,255,255,.14), transparent 65%); animation:clDrift 14s ease-in-out infinite; }
.cl-hero-bg span:nth-child(2){ width:380px; height:380px; left:-120px; bottom:-160px; background:radial-gradient(circle, rgba(255,196,0,.22), transparent 65%); animation:clDrift 18s ease-in-out infinite reverse; }
.cl-hero-bg span:nth-child(3){ width:220px; height:220px; left:46%; top:12%; background:radial-gradient(circle, rgba(120,140,255,.35), transparent 65%); animation:clDrift 11s ease-in-out infinite; }
@keyframes clDrift{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(26px,-18px); } }
.cl-hero-grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px; }
.cl-logo{ display:inline-flex; flex-direction:column; align-items:flex-end; margin-bottom:22px; }
.cl-logo-word{ font-family:var(--cl-logo); font-weight:900; font-style:italic; font-size:clamp(46px, 6.4vw, 80px); line-height:.9; letter-spacing:-.02em; color:#fff; }
.cl-logo-word b{ color:var(--cl-y); font-weight:900; display:inline-block; margin-left:2px; animation:clPlus 3.2s ease-in-out infinite; }
@keyframes clPlus{ 0%,80%,100%{ transform:none; } 88%{ transform:rotate(90deg) scale(1.15); } }
.cl-logo-sub{ font-size:clamp(13px, 1.4vw, 16px); font-weight:600; color:#fff; margin-top:4px; margin-right:6px; }
.cl-hero h1{ font-size:clamp(28px, 3.6vw, 44px); font-weight:800; line-height:1.15; letter-spacing:-.01em; color:#fff; margin:0; max-width:560px; }
.cl-hero h1 em{ font-style:normal; color:var(--cl-y); }
.cl-lead{ font-size:clamp(16px, 1.6vw, 19px); color:rgba(255,255,255,.9); line-height:1.5; max-width:480px; margin:0; }
.cl-rise{ animation:clRise .8s var(--ease) both; animation-delay:var(--d, 0s); }
@keyframes clRise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
.cl-hero-art{ position:relative; min-height:440px; display:flex; align-items:center; justify-content:center; perspective:1100px; }
.cl-scroll{ position:absolute; left:50%; bottom:26px; width:26px; height:42px; margin-left:-13px; border:2px solid rgba(255,255,255,.55); border-radius:14px; }
.cl-scroll span{ position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:#fff; animation:clScroll 1.8s ease-in-out infinite; }
@keyframes clScroll{ 0%{ opacity:0; transform:translateY(0); } 30%{ opacity:1; } 100%{ opacity:0; transform:translateY(14px); } }

/* Imagen opcional / ilustración de respaldo */
.cl-art{ position:relative; width:100%; display:flex; align-items:center; justify-content:center; }
.cl-img{ display:none; max-width:100%; height:auto; filter:drop-shadow(0 30px 40px rgba(0,10,80,.25)); }
.cl-art.has-img .cl-img{ display:block; animation:clRise .7s var(--ease) both; }
.cl-art.has-img .cl-fallback{ display:none; }
.cl-fallback{ position:relative; width:100%; display:flex; align-items:center; justify-content:center; }

/* Tarjeta Clarito+ hecha en CSS */
.cl-card{
  position:relative; width:330px; max-width:78vw; aspect-ratio:1.586; border-radius:18px; overflow:hidden;
  background:linear-gradient(135deg, #0a24ff 0%, #2a43ff 55%, #001ad6 100%); color:#fff;
  box-shadow:0 30px 60px -20px rgba(0,8,80,.6), inset 0 0 0 1px rgba(255,255,255,.18);
  padding:22px 24px; display:flex; flex-direction:column;
}
.cl-card::before{ content:''; position:absolute; right:-60px; top:-80px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.18), transparent 65%); }
.cl-card-logo{ font-family:var(--cl-logo); font-weight:900; font-style:italic; font-size:34px; line-height:.9; letter-spacing:-.02em; }
.cl-card-logo b{ color:var(--cl-y); }
.cl-card-sub{ font-size:11px; font-weight:600; opacity:.9; margin-top:4px; }
.cl-card-chip{ width:42px; height:32px; border-radius:7px; margin-top:auto; background:linear-gradient(135deg, #ffe08a, #e6a800); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.cl-card-num{ font-size:10.5px; font-weight:700; letter-spacing:.14em; margin-top:10px; opacity:.85; }
.cl-card-shine{ position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 46%, transparent 60%); background-size:250% 100%; background-position:var(--sx, 120%) 0; animation:clShine 5s ease-in-out infinite; pointer-events:none; }
@keyframes clShine{ 0%,60%{ background-position:140% 0; } 100%{ background-position:-60% 0; } }
.cl-card.is-back{ background:#f6f7fb; color:#1a1d3a; box-shadow:0 24px 50px -22px rgba(0,8,80,.45), inset 0 0 0 1px rgba(10,20,80,.08); }
.cl-card-stripe{ position:absolute; left:0; right:0; top:26px; height:30px; background:#1a1d3a; }
.cl-card-qr{ position:absolute; left:22px; bottom:22px; width:54px; height:54px; border-radius:6px; background:
  repeating-linear-gradient(90deg, #1a1d3a 0 5px, transparent 5px 9px), repeating-linear-gradient(0deg, #1a1d3a 0 5px, transparent 5px 9px); opacity:.85; }
.cl-card-sig{ position:absolute; right:22px; bottom:28px; padding:6px 18px; border-radius:6px; background:var(--cl-blue); color:#fff; font-size:11px; font-weight:800; letter-spacing:.1em; }
.cl-card3d{ transition:transform .35s var(--ease); transform-style:preserve-3d; animation:clFloat 6s ease-in-out infinite; }
@keyframes clFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -12px; } }
.cl-hero .cl-card{ width:380px; transform:rotate(-8deg); }
.cl-cat{ display:block; }
.cl-cat-hero{ position:absolute; width:240px; right:-10px; bottom:-60px; filter:drop-shadow(0 20px 30px rgba(0,8,80,.4)); animation:clPeek 6s ease-in-out infinite; }
@keyframes clPeek{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(3deg) translateY(-6px); } }

/* ============ CLUB ============ */
.cl-club{ padding:96px 0 84px; background:#fff; }
.cl-club .cl-display{ font-size:clamp(36px, 6vw, 72px); line-height:1.16; }
.cl-tagline{ font-size:clamp(17px, 2vw, 22px); color:var(--cl-blue); margin:6px 0 40px; }
.cl-perks{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:14px; }
.cl-perk{
  display:flex; flex-direction:column; align-items:center; gap:12px; padding:22px 10px; border-radius:22px;
  background:#f4f6ff; color:var(--cl-blue); font-weight:800; font-size:14px; line-height:1.2;
  transition:transform .3s var(--ease), background .3s, color .3s, box-shadow .3s;
}
.cl-perk i{ width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:#fff; box-shadow:0 10px 22px -14px rgba(4,28,255,.6); transition:transform .4s cubic-bezier(.22,1.5,.36,1), background .3s; }
.cl-perk svg{ width:26px; height:26px; }
.cl-perk:hover{ transform:translateY(-6px); background:var(--cl-blue); color:#fff; box-shadow:0 22px 40px -20px rgba(4,28,255,.8); }
.cl-perk:hover i{ transform:rotate(-8deg) scale(1.08); background:var(--cl-y); color:#121433; }

/* ============ COMPARTE ============ */
.cl-share{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:38px; flex-wrap:nowrap; }
.cl-share-you{ display:flex; flex-direction:column; align-items:center; gap:6px; color:#fff; }
.cl-share-you svg{ width:64px; height:64px; padding:14px; border-radius:50%; background:rgba(255,255,255,.14); box-sizing:border-box; }
.cl-share-you.is-them svg{ background:var(--cl-y); color:#121433; }
.cl-share-you small{ font-weight:700; font-size:13px; }
.cl-share-line{ display:flex; gap:8px; }
.cl-share-line i{ width:8px; height:8px; border-radius:50%; background:var(--cl-y); opacity:.25; animation:clDots 1.6s ease-in-out infinite; }
.cl-share-line i:nth-child(2){ animation-delay:.2s; } .cl-share-line i:nth-child(3){ animation-delay:.4s; }
@keyframes clDots{ 0%,100%{ opacity:.25; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); } }
.cl-share-card{ font-family:var(--cl-logo); font-weight:900; font-style:italic; font-size:22px; padding:16px 20px; border-radius:14px; background:#fff; color:var(--cl-blue); box-shadow:0 18px 30px -14px rgba(0,0,0,.4); transform:rotate(-4deg); }
.cl-share-card b{ color:var(--cl-y-d); }

/* ============ SECCIONES CON IMAGEN ============ */
.cl-lentes, .cl-garantias, .cl-promos{ padding:96px 0; background:#fff; }
.cl-garantias{ background:linear-gradient(180deg, #fff, #f4f6ff); }
.cl-split{ display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:56px; }
.cl-split.is-rev{ grid-template-columns:1.1fr .9fr; }
.cl-cat-big{ width:min(320px, 70vw); filter:drop-shadow(0 24px 30px rgba(0,8,80,.25)); animation:clPeek 6s ease-in-out infinite; }
.cl-thumb{ position:absolute; right:12%; bottom:6%; font-size:64px; animation:clThumb 2.4s ease-in-out infinite; }
@keyframes clThumb{ 0%,100%{ transform:rotate(-10deg); } 50%{ transform:rotate(8deg) scale(1.08); } }

/* Puntos: 4 = 1 lente gratis */
.cl-points{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 18px; }
.cl-pt{ width:56px; height:56px; border-radius:50%; border:3px dashed #c6cdf7; display:flex; align-items:center; justify-content:center; }
.cl-pt i{ font-style:normal; font-family:var(--cl-display); font-size:22px; color:#c6cdf7; transition:color .3s; }
.cl-points.is-in .cl-pt{ animation:clPt .5s cubic-bezier(.22,1.5,.36,1) both; }
.cl-points.is-in .cl-pt:nth-child(1){ animation-delay:.1s; } .cl-points.is-in .cl-pt:nth-child(2){ animation-delay:.45s; }
.cl-points.is-in .cl-pt:nth-child(3){ animation-delay:.8s; } .cl-points.is-in .cl-pt:nth-child(4){ animation-delay:1.15s; }
@keyframes clPt{ from{ transform:scale(.6); background:transparent; border-style:dashed; } to{ transform:none; background:var(--cl-blue); border:3px solid var(--cl-blue); box-shadow:0 10px 20px -10px rgba(4,28,255,.8); } }
.cl-points.is-in .cl-pt i{ color:#fff; transition-delay:inherit; }
.cl-eq{ font-family:var(--cl-display); font-size:32px; color:var(--cl-blue); margin:0 4px; }
.cl-free{
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:100px; background:var(--cl-y); color:#121433;
  font-weight:800; font-size:15px; opacity:.25; transform:scale(.9);
}
.cl-free svg{ width:24px; height:24px; }
.cl-points.is-in .cl-free{ animation:clFree .6s cubic-bezier(.22,1.5,.36,1) 1.55s both; }
@keyframes clFree{ to{ opacity:1; transform:none; box-shadow:0 14px 28px -12px rgba(255,196,0,.9); } }
.cl-big-eq{ font-family:var(--cl-display); text-transform:uppercase; font-size:clamp(26px, 3.4vw, 40px); color:var(--cl-blue); margin:0 0 16px; }
.cl-big-eq mark{ background:var(--cl-blue); color:#fff; padding:0 .2em; }
.cl-fine{ font-size:12.5px; line-height:1.55; color:#6670a6; max-width:620px; margin:0; }

/* Reparación */
.cl-repairs{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-top:42px; text-align:left; }
.cl-repair{ padding:24px 20px; border-radius:22px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); transition:transform .3s var(--ease), background .3s; }
.cl-repair:hover{ transform:translateY(-6px); background:rgba(255,255,255,.14); }
.cl-repair i{ display:flex; width:64px; height:64px; border-radius:18px; align-items:center; justify-content:center; background:var(--cl-y); color:#121433; margin-bottom:16px; }
.cl-repair svg{ width:40px; height:40px; }
.cl-repair strong{ display:block; font-size:17px; font-weight:800; color:#fff; margin-bottom:6px; }
.cl-repair small{ display:block; font-size:14px; color:rgba(255,255,255,.8); line-height:1.45; }

/* Garantías */
.cl-bubble{
  position:relative; width:min(360px, 78vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(220,228,255,.55) 45%, rgba(170,185,255,.35) 70%, rgba(4,28,255,.12));
  box-shadow:inset -18px -26px 50px rgba(4,28,255,.18), inset 14px 16px 36px rgba(255,255,255,.9), 0 30px 60px -30px rgba(4,28,255,.6);
  display:flex; align-items:center; justify-content:center; animation:clFloat 6s ease-in-out infinite;
}
.cl-bubble::after{ content:''; position:absolute; left:20%; top:14%; width:22%; height:12%; border-radius:50%; background:rgba(255,255,255,.9); transform:rotate(-30deg); filter:blur(2px); }
.cl-bubble-ring{ position:absolute; inset:0; width:100%; height:100%; }
.cl-bubble-ring text{ font-family:var(--cl-display); font-size:17px; letter-spacing:.12em; fill:var(--cl-blue); }
.cl-red-glasses{ width:62%; filter:drop-shadow(0 10px 14px rgba(229,36,43,.35)); transform:rotate(-6deg); }
.cl-checks{ list-style:none; display:flex; flex-direction:column; gap:14px; margin:6px 0 22px; padding:0; }
.cl-checks li{ display:flex; align-items:center; gap:14px; font-family:var(--cl-display); text-transform:uppercase; font-size:clamp(20px, 2.4vw, 28px); color:var(--cl-blue); }
.cl-checks li b{ font-weight:400; color:var(--cl-y-d); }
.cl-checks i{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; border:3px solid var(--cl-blue); display:flex; align-items:center; justify-content:center; }
.cl-checks svg{ width:22px; height:22px; color:var(--cl-blue); stroke-dasharray:30; stroke-dashoffset:30; }
.cl-checks li.is-in svg{ animation:clCheck .5s ease-out forwards; animation-delay:calc(var(--d, 0s) + .25s); }
@keyframes clCheck{ to{ stroke-dashoffset:0; } }

/* Crédito Clarifácil */
.cl-steps{ list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:22px 0 0; padding:0; counter-reset:st; }
.cl-steps li{ position:relative; padding:16px 14px; border-radius:18px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); }
.cl-steps li b{ display:block; font-family:var(--cl-display); text-transform:uppercase; font-size:20px; color:var(--cl-y); font-weight:400; }
.cl-steps li span{ font-size:14px; color:rgba(255,255,255,.88); }
.cl-steps li + li::before{ content:''; position:absolute; left:-10px; top:50%; width:10px; height:2px; background:var(--cl-y); }
.cl-cards-pair{ position:relative; width:min(420px, 86vw); height:300px; }
.cl-cards-pair .cl-card{ position:absolute; }
.cl-cards-pair .is-back{ left:0; top:10px; transform:rotate(-10deg); }
.cl-cards-pair .is-tilt{ right:0; bottom:0; transform:rotate(8deg); animation:clFloat 6s ease-in-out infinite; }

/* Promos */
.cl-promo-art{ position:relative; width:min(420px, 86vw); height:320px; display:flex; align-items:center; justify-content:center; }
.cl-promo-art .cl-card.is-tilt-r{ transform:rotate(-12deg); }
.cl-cat-peek{ position:absolute; width:180px; left:-6px; bottom:0; animation:clPeek 6s ease-in-out infinite; }
.cl-tag{ position:absolute; right:6%; top:6%; width:76px; height:76px; border-radius:50%; background:var(--cl-y); color:#121433; font-family:var(--cl-display); font-size:38px; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 26px -12px rgba(255,196,0,.9); animation:clSpin 7s linear infinite; }
@keyframes clSpin{ to{ transform:rotate(360deg); } }

/* Cierre y legal */
.cl-cta{ padding:84px 0; background:linear-gradient(135deg, var(--cl-blue) 0%, var(--cl-blue-d) 100%); }
.cl-legal{ background:var(--cl-blue-dd); color:rgba(255,255,255,.82); padding:34px 0; }
.cl-legal p{ font-size:12px; line-height:1.65; text-align:center; max-width:980px; margin:0 auto; }
.cl-legal a{ color:var(--cl-y); text-decoration:underline; }

/* Aparecer al hacer scroll */
.cl-reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d, 0s); }
.cl-reveal.is-in{ opacity:1; transform:none; }


@media (max-width:1024px){
  .cl-perks{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .cl-repairs{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:860px){
  .cl-hero{ padding:36px 0 80px; }
  .cl-hero-grid, .cl-split, .cl-split.is-rev{ grid-template-columns:1fr; gap:34px; }
  .cl-split.is-rev .cl-art{ order:-1; }
  .cl-hero-art{ min-height:340px; }
  .cl-hero .cl-card{ width:300px; }
  .cl-cat-hero{ width:180px; right:0; bottom:-40px; }
  .cl-band, .cl-lentes, .cl-garantias, .cl-promos, .cl-club{ padding:66px 0; }
  .cl-display.is-left, .cl-sub.is-left, .cl-copy.is-left{ text-align:center; margin-left:auto; margin-right:auto; }
  .cl-credit-txt .cl-rule{ margin:18px auto; }
  .cl-stack{ align-items:center; text-align:center; }
  .cl-lentes-txt, .cl-garantias .cl-split > div:last-child, .cl-promos .cl-split > div:last-child{ text-align:center; }
  .cl-points{ justify-content:center; }
  .cl-checks{ align-items:flex-start; width:max-content; max-width:100%; margin-left:auto; margin-right:auto; }
  .cl-fine{ margin:0 auto; }
}
@media (max-width:560px){
  .cl-br{ display:none; }
  .cl-hero .cl-card{ width:250px; }
  .cl-hero-art{ min-height:300px; }
  .cl-cat-hero{ width:150px; bottom:-30px; }
  .cl-perks{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cl-repairs{ grid-template-columns:1fr; }
  .cl-steps{ grid-template-columns:1fr; }
  .cl-steps li + li::before{ display:none; }
  .cl-share{ gap:8px; }
  .cl-share-you svg{ width:50px; height:50px; padding:11px; }
  .cl-share-card{ font-size:17px; padding:12px 14px; }
  .cl-share-line{ gap:5px; } .cl-share-line i{ width:6px; height:6px; }
  .cl-pt{ width:44px; height:44px; } .cl-pt i{ font-size:18px; }
  .cl-ctas{ justify-content:center; }
  .cl-hero-txt{ text-align:center; }
  .cl-logo{ align-items:center; }
  .cl-logo-sub{ margin-right:0; }
  .cl-hero .cl-rule{ margin:18px auto; }
  .cl-hero h1, .cl-lead{ margin-left:auto; margin-right:auto; }
}
@media (prefers-reduced-motion:reduce){
  .cl-reveal{ opacity:1; transform:none; transition:none; }
  .cl-rise, .cl-card3d, .cl-cat-hero, .cl-cat-big, .cl-cat-peek, .cl-bubble, .cl-tag, .cl-thumb, .cl-hero-bg span, .cl-card-shine, .cl-logo-word b, .cl-share-line i, .cl-scroll span{ animation:none; }
  .cl-points .cl-pt{ background:var(--cl-blue); border:3px solid var(--cl-blue); } .cl-points .cl-pt i{ color:#fff; } .cl-free{ opacity:1; transform:none; }
  .cl-checks svg{ stroke-dashoffset:0; }
}

/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */
.whatsapp-float{
  position:fixed; right:26px; bottom:26px; z-index:150;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 32px -12px rgba(37,211,102,.55);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.whatsapp-float:hover{ transform:translateY(-4px) scale(1.06); box-shadow:0 20px 38px -12px rgba(37,211,102,.7); }
.whatsapp-float:active{ transform:translateY(-1px) scale(0.97); }
.whatsapp-float svg{ width:29px; height:29px; position:relative; z-index:2; }
.whatsapp-float-ring{
  position:absolute; inset:0; border-radius:50%;
  background:#25D366;
  animation:whatsappPulse 2.2s ease-out infinite;
}
.whatsapp-float-ring.delay{ animation-delay:1.1s; }
@keyframes whatsappPulse{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(2.1); opacity:0; }
}
.whatsapp-float-tip{
  position:absolute; right:72px; top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--ink); color:#fff; font-size:12.5px; font-weight:600; white-space:nowrap;
  padding:8px 14px; border-radius:8px; opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.whatsapp-float:hover .whatsapp-float-tip{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:720px){
  .whatsapp-float{ right:16px; bottom:16px; width:54px; height:54px; }
  .whatsapp-float-tip{ display:none; }
}
/* =========================================================
   PAGE BLINK — transición de página tipo parpadeo:
   dos "párpados" se cierran al salir y se abren al llegar.
   El overlay lo crea page-blink.js, aquí solo se estila.
   ========================================================= */
.page-blink{
  position:fixed; inset:0; z-index:9999;
  pointer-events:none;
  overflow:hidden;
}
/* Párpados con curva invertida (forma de ojo/almendra): a cada
   párpado se le "muerde" una elipse transparente en el borde donde
   se encuentran, así la abertura es amplia al centro y se cierra en
   punta hacia los lados, como un ojo real. La elipse mide 50vw de
   radio para que la punta caiga justo en los bordes de la pantalla.
   Los párpados miden 75% de alto para que, cerrados, se traslapen y
   el mordisco de uno quede cubierto por el otro (sin huecos). */
.page-blink::before,
.page-blink::after{
  content:''; position:absolute; left:0; width:100%; height:75%;
  transition:transform .42s cubic-bezier(.65,0,.35,1);
}
.page-blink::before{
  top:0;
  background:radial-gradient(ellipse 50vw 25vh at 50% 100%, transparent 99%, var(--ink) 100%);
}
.page-blink::after{
  bottom:0;
  background:radial-gradient(ellipse 50vw 25vh at 50% 0%, transparent 99%, var(--ink) 100%);
}
/* Estado inicial: cerrado (párpados traslapados cubriendo todo) */
.page-blink::before{ transform:translateY(0); }
.page-blink::after{ transform:translateY(0); }
/* Abierto: cada párpado se retrae fuera de la pantalla */
.page-blink.open::before{ transform:translateY(-110%); }

.page-blink.open::after{ transform:translateY(110%); }