/*
Theme Name: Fire IPTV
Theme URI: https://fireiptv.example
Author: Safae
Author URI: https://fireiptv.example
Description: Tema de tienda IPTV con estilo "hippie moderno": crema y berenjena, cursor cósmico, blobs animados, selector de vibra y rejilla de planes. Adaptado del diseño Vibra·Alma.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fireiptv
*/

/* =========================================
   ROOT VIBES — modern hippie palette
   ========================================= */
:root{
  --cream:        #fbf2dc;
  --cream-soft:   #f4e8c8;
  --ink:          #2a1437;
  --ink-soft:     #4a2861;
  --aubergine:    #3d1a4e;
  --acid:         #d4ff3c;
  --magenta:      #ff2d92;
  --orange:       #ff6b35;
  --teal:         #00c8b8;
  --sun:          #ffd23f;
  --grain-op:     0.06;

  --display: 'Bagel Fat One', serif;
  --hand:    'Caveat', cursive;
  --body:    'Fraunces', serif;
  --mono:    'DM Mono', monospace;
}

/* Frequency themes — swapped via JS */
body[data-freq="calm"]   { --accent: var(--teal);    --accent2: var(--sun); }
body[data-freq="dream"]  { --accent: var(--magenta); --accent2: var(--acid); }
body[data-freq="fire"]   { --accent: var(--orange);  --accent2: var(--magenta); }
body[data-freq="earth"]  { --accent: var(--acid);    --accent2: var(--teal); }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.55;
  overflow-x:hidden;
  cursor:none;
  transition: background .8s ease;
}

/* GRAIN OVERLAY — gives the page that printed zine feel */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:var(--grain-op);
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.8'/></svg>");
}

/* CUSTOM COSMIC CURSOR */
.cursor-orb{
  position:fixed;
  width:18px; height:18px;
  background:var(--accent, var(--magenta));
  border-radius:50%;
  top:0; left:0;
  pointer-events:none;
  z-index:10000;
  mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  transition: width .25s ease, height .25s ease, background .4s ease;
  box-shadow:0 0 30px var(--accent, var(--magenta));
}
.cursor-trail{
  position:fixed;
  width:50px; height:50px;
  border:1.5px dashed var(--ink);
  border-radius:50%;
  top:0; left:0;
  pointer-events:none;
  z-index:10000;
  transform:translate(-50%,-50%);
  transition: transform .15s ease-out, width .3s ease, height .3s ease, border-color .4s ease;
  animation: spin 8s linear infinite;
}
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg);} }

.cursor-orb.hover{ width:40px; height:40px; }
.cursor-trail.hover{ width:80px; height:80px; border-style:solid; }

/* =========================================
   NAV
   ========================================= */
nav{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  padding:22px 36px;
  display:flex; justify-content:space-between; align-items:center;
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--cream) 70%, transparent);
  border-bottom:1px dashed var(--ink-soft);
}
.logo{
  font-family:var(--display);
  font-size:24px;
  letter-spacing:-0.02em;
  color:var(--ink);
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.logo .star{
  display:inline-block;
  animation: spin 10s linear infinite;
  color:var(--magenta);
}
.nav-links{
  display:flex; gap:32px;
  font-family:var(--mono);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.nav-links a{
  color:var(--ink);
  text-decoration:none;
  position:relative;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px;
  height:2px;
  background:var(--magenta);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.nav-links a:hover::after{ transform:scaleX(1); }

.cart-btn{
  background:var(--ink);
  color:var(--cream);
  padding:10px 18px;
  border-radius:100px;
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  border:none;
  cursor:none;
  display:flex; align-items:center; gap:8px;
  text-decoration:none;
}
.cart-btn .count{
  background:var(--acid);
  color:var(--ink);
  border-radius:100px;
  padding:2px 8px;
  font-weight:600;
}

/* =========================================
   HERO
   ========================================= */
.hero{
  min-height:100vh;
  padding:140px 36px 80px;
  position:relative;
  overflow:hidden;
}

/* Floating background blobs */
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:0.55;
  z-index:0;
  pointer-events:none;
  animation: float 14s ease-in-out infinite;
}
.blob.b1{ width:480px; height:480px; background:var(--magenta); top:-100px; right:-80px; }
.blob.b2{ width:380px; height:380px; background:var(--acid); top:30%; left:-100px; animation-delay:-4s;}
.blob.b3{ width:300px; height:300px; background:var(--teal); bottom:0; right:20%; animation-delay:-8s;}
@keyframes float{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(40px,-30px) scale(1.1); }
  66%{ transform:translate(-30px,40px) scale(.95); }
}

.hero-grid{
  position:relative; z-index:2;
  max-width:1400px; margin:0 auto;
  display:grid;
  grid-template-columns: 1fr;
  gap:30px;
}

.hero-tag{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 16px;
  border:1.5px solid var(--ink);
  border-radius:100px;
  width:fit-content;
  background:var(--cream-soft);
}
.hero-tag .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--orange);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:.4; transform:scale(.8); }
  50%   { opacity:1;  transform:scale(1.3); }
}

.hero h1{
  font-family:var(--display);
  font-size: clamp(70px, 14vw, 220px);
  line-height:0.85;
  letter-spacing:-0.04em;
  color:var(--ink);
  margin-top:10px;
}
.hero h1 .wave{
  display:inline-block;
  color:var(--magenta);
  transform-origin:center;
  animation: wiggle 4s ease-in-out infinite;
}
@keyframes wiggle{
  0%,100%{ transform:rotate(-3deg) skewX(-2deg); }
  50%    { transform:rotate(3deg)  skewX(2deg); }
}
.hero h1 .underline{
  position:relative; display:inline-block;
}
.hero h1 .underline::after{
  content:"";
  position:absolute; left:0; right:0; bottom:8px;
  height:18px;
  background:var(--acid);
  z-index:-1;
  transform:skew(-8deg);
}

.hero-bottom{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:60px;
  margin-top:40px;
  align-items:end;
}
@media (max-width:880px){ .hero-bottom{ grid-template-columns:1fr; gap:40px; } }

.hero-copy{
  font-family:var(--body);
  font-size:22px;
  line-height:1.45;
  max-width:520px;
  color:var(--ink-soft);
}
.hero-copy em{
  font-style:italic;
  font-family:var(--hand);
  font-size:30px;
  color:var(--magenta);
  line-height:1;
}

.hero-cta{
  display:flex; flex-direction:column; gap:14px;
}
.btn-primary{
  background:var(--ink);
  color:var(--cream);
  padding:22px 32px;
  border-radius:100px;
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  border:none;
  cursor:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  text-decoration:none;
  transition: transform .3s ease, background .3s ease;
  position:relative;
  overflow:hidden;
}
.btn-primary:hover{
  transform: translateY(-3px) rotate(-1deg);
  background:var(--magenta);
}
.btn-primary .arrow{
  background:var(--acid);
  color:var(--ink);
  width:36px; height:36px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  transition: transform .3s ease;
}
.btn-primary:hover .arrow{ transform:rotate(45deg); }

.hero-meta{
  font-family:var(--hand);
  font-size:22px;
  color:var(--ink-soft);
  transform:rotate(-2deg);
  padding-left:20px;
}
.hero-meta::before{
  content:"✿";
  color:var(--orange);
  margin-right:8px;
}

/* Spinning sticker */
.sticker{
  position:absolute;
  width:140px; height:140px;
  top:200px; right:8%;
  animation: spin 22s linear infinite;
  z-index:3;
}
.sticker svg{ width:100%; height:100%; }
@media (max-width:880px){ .sticker{ top:auto; bottom:30px; right:10px; width:100px; height:100px;} }

/* =========================================
   MARQUEE
   ========================================= */
.marquee{
  background:var(--ink);
  color:var(--cream);
  padding:24px 0;
  overflow:hidden;
  white-space:nowrap;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  position:relative;
  z-index:2;
}
.marquee-track{
  display:inline-flex;
  gap:40px;
  animation: marquee 28s linear infinite;
  font-family:var(--display);
  font-size:42px;
  letter-spacing:-0.01em;
  align-items:center;
}
.marquee-track span{ display:inline-block; }
.marquee-track .em{ color:var(--acid); font-style:italic; }
.marquee-track .mg{ color:var(--magenta); }
@keyframes marquee{
  to { transform:translateX(-50%); }
}

/* =========================================
   FREQUENCY SELECTOR
   ========================================= */
.freq{
  padding:100px 36px 60px;
  text-align:center;
  position:relative;
}
.freq h2{
  font-family:var(--display);
  font-size: clamp(40px, 6vw, 80px);
  line-height:0.9;
  margin-bottom:8px;
}
.freq h2 .small{
  display:block;
  font-family:var(--hand);
  font-size:0.4em;
  color:var(--magenta);
  transform:rotate(-3deg);
  margin-bottom:6px;
}
.freq p{
  max-width:520px;
  margin:0 auto 40px;
  color:var(--ink-soft);
  font-size:17px;
}
.freq-pills{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  max-width:760px;
  margin:0 auto;
}
.pill{
  padding:14px 24px;
  border-radius:100px;
  background:var(--cream-soft);
  border:2px solid var(--ink);
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:none;
  display:flex; align-items:center; gap:10px;
  transition: all .3s ease;
}
.pill .swatch{
  width:14px; height:14px; border-radius:50%;
  border:1.5px solid var(--ink);
}
.pill[data-set="calm"]  .swatch{ background:var(--teal); }
.pill[data-set="dream"] .swatch{ background:var(--magenta); }
.pill[data-set="fire"]  .swatch{ background:var(--orange); }
.pill[data-set="earth"] .swatch{ background:var(--acid); }

.pill:hover{ transform: translateY(-3px) rotate(-2deg); }
.pill.active{
  background:var(--ink);
  color:var(--cream);
}
.pill.active .swatch{ border-color:var(--cream); }

/* =========================================
   PRODUCTS GRID
   ========================================= */
.products{
  padding:60px 36px 120px;
  max-width:1400px;
  margin:0 auto;
  position:relative;
}

.products-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:50px;
  flex-wrap:wrap; gap:20px;
}
.products-head h3{
  font-family:var(--display);
  font-size:clamp(36px, 5vw, 60px);
  line-height:0.95;
}
.products-head h3 em{
  font-family:var(--hand);
  font-style:italic;
  color:var(--magenta);
  font-size:0.7em;
  font-weight:400;
}
.products-head .count{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.product-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}
@media (max-width:980px){ .product-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:620px){ .product-grid{ grid-template-columns: 1fr; } }

.product{
  background:var(--cream-soft);
  border:2px solid var(--ink);
  border-radius:30px;
  padding:24px;
  position:relative;
  overflow:hidden;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.3), box-shadow .35s ease;
  cursor:none;
}
.product:hover{
  transform: translateY(-10px) rotate(-1deg);
  box-shadow: 14px 14px 0 var(--ink);
}
.product:nth-child(even):hover{ transform: translateY(-10px) rotate(1deg); }

.product .badge{
  position:absolute;
  top:-12px; right:-12px;
  width:80px; height:80px;
  background:var(--acid);
  border:2px solid var(--ink);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono);
  font-size:11px;
  text-align:center;
  line-height:1.1;
  letter-spacing:0.05em;
  text-transform:uppercase;
  transform:rotate(15deg);
  z-index:3;
  animation: spin 18s linear infinite reverse;
}
.product .badge.hot{ background:var(--magenta); color:var(--cream); }
.product .badge.new{ background:var(--teal); }

.product .visual{
  aspect-ratio: 4 / 3.2;
  border-radius:20px;
  border:1.5px solid var(--ink);
  overflow:hidden;
  position:relative;
  margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
}

/* Each product gets a unique generated visual */
.v-1{ background: radial-gradient(circle at 30% 30%, var(--magenta), var(--orange) 60%, var(--aubergine));}
.v-2{ background: conic-gradient(from 90deg, var(--teal), var(--acid), var(--sun), var(--teal)); }
.v-3{ background: linear-gradient(135deg, var(--acid) 0%, var(--teal) 70%); }
.v-4{ background: radial-gradient(ellipse at center, var(--sun), var(--orange) 50%, var(--magenta) 100%); }
.v-5{ background: linear-gradient(180deg, var(--aubergine) 0%, var(--magenta) 60%, var(--orange) 100%); }
.v-6{ background: repeating-linear-gradient(45deg, var(--teal) 0 30px, var(--acid) 30px 60px); }

.product .visual svg{
  width:64%; height:auto;
  filter: drop-shadow(2px 4px 0 rgba(0,0,0,.25));
  transition: transform .6s cubic-bezier(.2,.9,.3,1.3);
}
.product:hover .visual svg{ transform: rotate(12deg) scale(1.08); }

.product .meta{
  display:flex; gap:8px;
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:10px;
  color:var(--ink-soft);
}
.product .meta .tag{
  background:var(--cream);
  border:1px solid var(--ink-soft);
  padding:3px 10px;
  border-radius:100px;
}
.product h4{
  font-family:var(--display);
  font-size:28px;
  line-height:1;
  letter-spacing:-0.02em;
  margin-bottom:8px;
}
.product .desc{
  font-size:15px;
  color:var(--ink-soft);
  margin-bottom:16px;
  line-height:1.4;
}
.product .row{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1.5px dashed var(--ink-soft);
  padding-top:14px;
}
.product .price{
  font-family:var(--display);
  font-size:26px;
  color:var(--ink);
}
.product .price s{
  font-family:var(--mono);
  font-size:13px;
  color:var(--ink-soft);
  margin-right:6px;
}
.product .buy{
  background:var(--ink);
  color:var(--cream);
  border:none;
  padding:10px 18px;
  border-radius:100px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:none;
  display:flex; align-items:center; gap:8px;
  transition: background .3s ease;
  text-decoration:none;
}
.product .buy:hover{ background:var(--magenta); }
.product .buy .plus{
  width:18px; height:18px;
  background:var(--acid);
  color:var(--ink);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  line-height:1;
}

/* =========================================
   MANIFESTO
   ========================================= */
.manifesto{
  background:var(--ink);
  color:var(--cream);
  padding:140px 36px;
  position:relative;
  overflow:hidden;
}
.manifesto-bg{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--magenta) 25%, transparent), transparent 50%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--teal) 25%, transparent), transparent 50%);
  pointer-events:none;
}
.manifesto-inner{
  max-width:1100px; margin:0 auto;
  position:relative; z-index:2;
}
.manifesto small{
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.25em;
  color:var(--acid);
  display:block;
  margin-bottom:30px;
}
.manifesto p{
  font-family:var(--body);
  font-size: clamp(28px, 4vw, 54px);
  line-height:1.15;
  font-weight:400;
  margin-bottom:30px;
}
.manifesto p em{
  font-family:var(--hand);
  color:var(--acid);
  font-style:italic;
  font-size:1.1em;
}
.manifesto p .hl{
  background:var(--magenta);
  color:var(--cream);
  padding:0 10px;
  display:inline-block;
  transform:skew(-6deg);
}
.manifesto-sign{
  margin-top:50px;
  font-family:var(--hand);
  font-size:38px;
  color:var(--acid);
  transform:rotate(-3deg);
  display:inline-block;
}

/* Floating eye */
.eye-float{
  position:absolute;
  top:60px; right:8%;
  width:120px; height:120px;
  animation: spin 30s linear infinite;
  opacity:.5;
}

/* =========================================
   TESTIMONIALS
   ========================================= */
.testimonials{
  padding:120px 36px;
  max-width:1300px; margin:0 auto;
}
.testimonials h3{
  font-family:var(--display);
  font-size:clamp(40px, 6vw, 70px);
  text-align:center;
  line-height:0.95;
  margin-bottom:14px;
}
.testimonials .sub{
  text-align:center;
  font-family:var(--hand);
  font-size:24px;
  color:var(--magenta);
  margin-bottom:60px;
}
.testi-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:30px;
}
@media (max-width:880px){ .testi-grid{ grid-template-columns:1fr; } }

.testi{
  background:var(--cream-soft);
  border:2px solid var(--ink);
  border-radius:18px;
  padding:24px;
  position:relative;
  transition: transform .3s ease;
}
.testi:nth-child(1){ transform:rotate(-2deg); }
.testi:nth-child(2){ transform:rotate(1.5deg); margin-top:30px; }
.testi:nth-child(3){ transform:rotate(-1deg); }
.testi:hover{ transform:rotate(0) scale(1.03); z-index:2; }

.testi .quote-mark{
  position:absolute;
  top:-20px; left:20px;
  font-family:var(--display);
  font-size:80px;
  color:var(--magenta);
  line-height:1;
}
.testi p{
  font-family:var(--body);
  font-size:17px;
  font-style:italic;
  margin: 24px 0 20px;
  line-height:1.45;
}
.testi .who{
  display:flex; align-items:center; gap:12px;
  border-top:1.5px dashed var(--ink-soft);
  padding-top:14px;
}
.testi .avatar{
  width:42px; height:42px;
  border-radius:50%;
  border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display);
  font-size:18px;
}
.testi .a1{ background:var(--acid); }
.testi .a2{ background:var(--magenta); color:var(--cream);}
.testi .a3{ background:var(--teal); }
.testi .name{ font-family:var(--mono); font-size:13px; letter-spacing:0.05em; }
.testi .role{ font-size:12px; color:var(--ink-soft); font-family:var(--mono);}

/* Stars */
.stars{ color:var(--orange); font-size:14px; margin-bottom:4px;}

/* =========================================
   CTA FINAL
   ========================================= */
.cta{
  padding:100px 36px;
  text-align:center;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%);
  position:relative;
  overflow:hidden;
}
.cta h2{
  font-family:var(--display);
  font-size: clamp(60px, 12vw, 180px);
  line-height:0.85;
  letter-spacing:-0.04em;
}
.cta h2 .grad{
  background: linear-gradient(90deg, var(--magenta), var(--orange), var(--teal));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.cta p{
  font-family:var(--hand);
  font-size:28px;
  color:var(--ink-soft);
  margin:20px 0 40px;
}
.cta-form{
  max-width:520px;
  margin:0 auto;
  display:flex;
  background:var(--cream-soft);
  border:2px solid var(--ink);
  border-radius:100px;
  padding:6px;
  box-shadow: 6px 6px 0 var(--ink);
}
.cta-form input{
  flex:1;
  border:none;
  background:transparent;
  padding:14px 22px;
  font-family:var(--mono);
  font-size:14px;
  color:var(--ink);
  outline:none;
}
.cta-form input::placeholder{ color:var(--ink-soft); opacity:0.7; }
.cta-form button{
  background:var(--ink);
  color:var(--cream);
  border:none;
  padding:14px 26px;
  border-radius:100px;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  cursor:none;
  transition: background .3s ease;
}
.cta-form button:hover{ background:var(--magenta); }

.cta-note{
  margin-top:18px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
  letter-spacing:0.08em;
}

/* =========================================
   FOOTER
   ========================================= */
.site-footer{
  background:var(--ink);
  color:var(--cream);
  padding:60px 36px 30px;
}
.foot-grid{
  max-width:1300px; margin:0 auto;
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:50px;
}
@media (max-width:780px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }

.foot-brand h4{
  font-family:var(--display);
  font-size:38px;
  line-height:0.9;
  margin-bottom:14px;
}
.foot-brand p{
  font-family:var(--hand);
  font-size:22px;
  color:var(--acid);
  max-width:300px;
}
.foot-col h5{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--magenta);
  margin-bottom:18px;
}
.foot-col a{
  display:block;
  color:var(--cream);
  text-decoration:none;
  font-family:var(--body);
  font-size:16px;
  margin-bottom:8px;
  opacity:.8;
  transition: opacity .2s, transform .2s;
}
.foot-col a:hover{ opacity:1; transform:translateX(4px); color:var(--acid); }

.foot-bottom{
  border-top:1px dashed color-mix(in srgb, var(--cream) 30%, transparent);
  padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.08em;
  opacity:.75;
}

/* Reveal animation */
.reveal{
  opacity:0;
  transform: translateY(40px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.9,.3,1);
}
.reveal.in{
  opacity:1;
  transform:translateY(0);
}

/* Hide cursor on touch devices */
@media (hover: none) {
  body { cursor:auto; }
  .cursor-orb, .cursor-trail { display:none; }
  button, a, .pill, .product { cursor:pointer !important; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================
   BLOG (single / index)
   ========================================= */
/* Breadcrumb (migas de pan) */
.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px;
  letter-spacing:0.05em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:18px;
}
.breadcrumb a{ color:var(--magenta); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb .sep{ opacity:0.5; }
.breadcrumb .current{ color:var(--ink-soft); }

.post-single{ padding:140px 36px 90px; max-width:820px; margin:0 auto; }
.post-single .post-title{ font-family:var(--display); font-size:clamp(36px,6vw,68px); line-height:0.92; letter-spacing:-0.03em; margin-bottom:14px; }
.post-single .post-meta{ font-family:var(--mono); font-size:13px; color:var(--ink-soft); margin-bottom:30px; }
.post-content{ font-size:18px; line-height:1.7; color:var(--ink-soft); }
.post-content h2{ font-family:var(--display); font-size:32px; color:var(--ink); margin:34px 0 12px; letter-spacing:-0.02em; }
.post-content h3{ font-family:var(--body); font-weight:600; font-size:24px; color:var(--ink); margin:24px 0 10px; }
.post-content p{ margin-bottom:16px; }
.post-content a{ color:var(--magenta); text-decoration:underline; }
.post-content strong{ color:var(--ink); }
.post-content ul, .post-content ol{ margin:0 0 18px 0; padding-left:22px; }
.post-content li{ margin-bottom:8px; }

/* Aviso de afiliado */
.post-disclaimer{
  font-size:14px; font-style:italic;
  color:var(--ink-soft);
  background:var(--cream-soft);
  border:1.5px dashed var(--ink-soft);
  border-radius:14px; padding:14px 18px; margin-bottom:26px;
}
/* Enlace de vuelta al pilar */
.post-pillar{
  background:color-mix(in srgb, var(--acid) 22%, var(--cream-soft));
  border:2px solid var(--ink); border-radius:16px;
  padding:16px 20px; margin:30px 0; font-size:16px;
}
/* Botón de afiliado */
.aff-wrap{ margin:20px 0; }
.aff-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--cream) !important;
  padding:16px 26px; border-radius:100px;
  font-family:var(--mono); font-size:14px; font-weight:500;
  letter-spacing:0.04em; text-decoration:none !important;
  box-shadow:5px 5px 0 var(--magenta);
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.aff-btn:hover{ transform:translateY(-3px) rotate(-1deg); background:var(--magenta); box-shadow:5px 5px 0 var(--ink); }
/* Tabla */
.post-table{ overflow-x:auto; margin:0 0 24px; }
.post-table table{ width:100%; border-collapse:collapse; font-size:15px; background:var(--cream-soft); border-radius:12px; overflow:hidden; }
.post-table th, .post-table td{ text-align:left; padding:12px 14px; border:1px solid var(--ink-soft); }
.post-table th{ background:var(--ink); color:var(--cream); font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:0.05em; }
.post-table td{ color:var(--ink); }
.blog-wrap{ padding:140px 36px 90px; max-width:1300px; margin:0 auto; }
.blog-wrap h1{ font-family:var(--display); font-size:clamp(40px,7vw,90px); line-height:0.9; margin-bottom:40px; }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:980px){ .blog-grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:620px){ .blog-grid{ grid-template-columns:1fr;} }
.blog-card{ background:var(--cream-soft); border:2px solid var(--ink); border-radius:24px; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; }
.blog-card:hover{ transform:translateY(-8px) rotate(-1deg); box-shadow:12px 12px 0 var(--ink); }
.blog-card a{ text-decoration:none; color:inherit; display:block; }
.guias{ padding:100px 36px; max-width:1300px; margin:0 auto; }
.guias .g-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:40px; }
.guias h3{ font-family:var(--display); font-size:clamp(36px,5vw,60px); line-height:0.92; letter-spacing:-0.02em; }
.guias h3 em{ font-family:var(--hand); font-style:italic; color:var(--magenta); font-size:0.7em; font-weight:400; }
.guias .g-sub{ font-family:var(--mono); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); }
@media(max-width:880px){ .guias{ padding:70px 22px; } }

.blog-card .b-img{ aspect-ratio:1200/630; overflow:hidden; border-bottom:2px solid var(--ink); }
.blog-card .b-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card .b-body{ padding:22px; }
.post-cover{ margin:0 0 30px; border:2px solid var(--ink); border-radius:20px; overflow:hidden; }
.post-cover img{ display:block; width:100%; height:auto; }

/* Artículo y blog: adaptable a móvil / iOS */
@media (max-width:880px){
  .post-single{
    padding:100px 20px 60px;
    padding-left:max(20px, env(safe-area-inset-left));
    padding-right:max(20px, env(safe-area-inset-right));
  }
  .blog-wrap{
    padding:100px 20px 60px;
    padding-left:max(20px, env(safe-area-inset-left));
    padding-right:max(20px, env(safe-area-inset-right));
  }
  .post-content{ font-size:17px; }
  .post-content h2{ font-size:27px; }
  .post-content h3{ font-size:21px; }
  .post-cover{ border-radius:16px; }
  .breadcrumb{ font-size:11px; gap:6px; }
  .aff-btn{ width:100%; justify-content:center; box-shadow:4px 4px 0 var(--magenta); }
  .post-table{ font-size:14px; }
  .post-table th, .post-table td{ padding:10px; }
}
.blog-card h4{ font-family:var(--display); font-size:24px; line-height:1.02; margin-bottom:10px; }
.blog-card p{ font-size:15px; color:var(--ink-soft); }

/* =========================================
   POPUP CANALES
   ========================================= */
.vibe-modal{
  position:fixed; inset:0;
  z-index:9500;
  display:none;
  align-items:center; justify-content:center;
  padding:24px;
}
.vibe-modal.open{ display:flex; }
.vibe-modal-overlay{
  position:absolute; inset:0;
  background: color-mix(in srgb, var(--ink) 60%, transparent);
  backdrop-filter: blur(4px);
  cursor:none;
}
.vibe-modal-box{
  position:relative;
  width:100%; max-width:560px;
  max-height:86vh;
  display:flex; flex-direction:column;
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:30px;
  box-shadow: 14px 14px 0 var(--ink);
  overflow:hidden;
  transform: translateY(24px) scale(.96);
  opacity:0;
  transition: transform .4s cubic-bezier(.2,.9,.3,1.3), opacity .3s ease;
}
.vibe-modal.open .vibe-modal-box{ transform: translateY(0) scale(1); opacity:1; }

.vibe-modal-close{
  position:absolute; top:16px; right:16px;
  width:40px; height:40px;
  border-radius:50%;
  background:var(--ink); color:var(--cream);
  border:none; cursor:none;
  font-family:var(--mono); font-size:16px;
  display:flex; align-items:center; justify-content:center;
  z-index:3;
  transition: background .3s ease, transform .3s ease;
}
.vibe-modal-close:hover{ background:var(--magenta); transform:rotate(90deg); }

.vibe-modal-head{
  padding:30px 30px 18px;
  border-bottom:1.5px dashed var(--ink-soft);
  background:var(--cream-soft);
}
.vibe-modal-eyebrow{
  font-family:var(--mono); font-size:12px;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--magenta);
}
.vibe-modal-head h3{
  font-family:var(--display);
  font-size:clamp(34px,7vw,46px);
  line-height:0.95; letter-spacing:-0.02em;
  margin:6px 0 6px;
}
.vibe-modal-head p{
  font-family:var(--hand);
  font-size:21px; color:var(--ink-soft);
}

.vibe-modal-list{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 18px;
  flex:1;
}
.vibe-modal-list::-webkit-scrollbar{ width:10px; }
.vibe-modal-list::-webkit-scrollbar-track{ background:var(--cream-soft); }
.vibe-modal-list::-webkit-scrollbar-thumb{ background:var(--ink-soft); border-radius:100px; border:2px solid var(--cream); }

.ch-row{
  display:flex; align-items:center; gap:14px;
  padding:12px 12px;
  border-radius:16px;
  transition: background .2s ease, transform .2s ease;
}
.ch-row:hover{ background:var(--cream-soft); transform:translateX(4px); }
.ch-row + .ch-row{ border-top:1px dashed color-mix(in srgb, var(--ink-soft) 35%, transparent); }
.ch-ava{
  width:40px; height:40px; flex-shrink:0;
  border-radius:12px;
  border:1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:18px;
  color:var(--ink);
}
.ch-name{ font-family:var(--body); font-size:17px; font-weight:600; flex:1; }
.ch-q{
  font-family:var(--mono); font-size:11px;
  letter-spacing:0.08em;
  background:var(--ink); color:var(--cream);
  padding:3px 9px; border-radius:100px;
}
.ch-q.q4k{ background:var(--magenta); }
.ch-q.qfhd{ background:var(--teal); }

.vibe-modal-foot{
  padding:18px 24px;
  border-top:1.5px solid var(--ink);
  background:var(--cream-soft);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.vibe-modal-count{
  font-family:var(--mono); font-size:12px;
  color:var(--ink-soft); letter-spacing:0.06em;
}
.vibe-modal-foot .btn-primary{ padding:14px 22px; font-size:12px; }

body.modal-open{ overflow:hidden; }

@media (max-width:620px){
  .vibe-modal{ padding:12px; }
  .vibe-modal-box{ max-height:90vh; border-radius:24px; box-shadow:8px 8px 0 var(--ink); }
  .vibe-modal-head{ padding:26px 22px 16px; }
  .vibe-modal-list{ padding:10px 12px; }
  .ch-name{ font-size:16px; }
  .vibe-modal-foot{ flex-direction:column; align-items:stretch; }
  .vibe-modal-foot .btn-primary{ justify-content:center; }
}

/* =========================================
   RESPONSIVE MÓVIL (Android / iOS)
   ========================================= */

/* Safe areas iOS (notch / barra de gestos) */
nav{
  padding-left: max(36px, env(safe-area-inset-left));
  padding-right: max(36px, env(safe-area-inset-right));
  padding-top: max(22px, env(safe-area-inset-top));
}
.site-footer{ padding-bottom: max(30px, env(safe-area-inset-bottom)); }

/* Evita el zoom automático de iOS en inputs */
input, textarea, select{ font-size:16px; }
/* Sin destellos al tocar en móvil */
a, button, .pill, .product, .buy{ -webkit-tap-highlight-color: transparent; }

@media (max-width:880px){
  nav{ padding:14px 18px; padding-top: max(14px, env(safe-area-inset-top)); }
  .nav-links{ display:none; }            /* el menú vive en hero + footer */
  .logo{ font-size:20px; }
  .cart-btn{ padding:9px 13px; font-size:11px; letter-spacing:0.06em; }

  .hero{ padding:110px 22px 60px; min-height:auto; }
  .hero h1{ font-size: clamp(56px, 17vw, 120px); }
  .hero-copy{ font-size:18px; }
  .hero-copy em{ font-size:26px; }
  .hero-bottom{ margin-top:24px; }
  .btn-primary{ padding:18px 24px; font-size:13px; }
  .sticker{ width:84px; height:84px; }

  .marquee{ padding:18px 0; }
  .marquee-track{ font-size:28px; gap:22px; }

  .freq{ padding:70px 22px 40px; }
  .products{ padding:40px 22px 80px; }
  .products-head{ margin-bottom:34px; }
  .manifesto{ padding:90px 22px; }
  .eye-float{ width:80px; height:80px; top:30px; right:5%; }
  .testimonials{ padding:80px 22px; }
  .cta{ padding:70px 22px; }
  .site-footer{ padding:50px 22px 30px; }

  /* Tarjetas: quita el desplazamiento que descuadra en 1-2 columnas */
  .testi:nth-child(2){ margin-top:0; }
}

@media (max-width:620px){
  .product{ border-radius:24px; padding:22px; }
  .product:hover{ box-shadow:8px 8px 0 var(--ink); }

  /* Formulario de la newsletter en columna (no se sale en pantallas estrechas) */
  .cta-form{ flex-direction:column; border-radius:26px; gap:8px; padding:10px; box-shadow:4px 4px 0 var(--ink); }
  .cta-form input{ text-align:center; }
  .cta-form button{ border-radius:20px; padding:14px; }

  .marquee-track{ font-size:24px; }
  .hero h1{ font-size: clamp(46px, 16vw, 96px); }
}