@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Archivo+Black&family=DM+Sans:wght@400;500;600;700&display=swap');
  
:root {
  --ink:#191b17;
  --acid:#c6f64b;
  --paper:#f5f4ec
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'DM Sans',sans-serif
}

button,a {
  touch-action:manipulation
}

a {
  color:inherit
}

button {
  font:inherit;
  cursor:pointer
}

button:focus-visible,a:focus-visible {
  outline:3px solid #c841ef;
  outline-offset:4px
}

.top {
  background:var(--ink);
  color:var(--paper);
  text-align:center;
  padding:10px;
  font-size:11px;
  letter-spacing:2px
}

nav {
  height:93px;
  margin:0 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #191b1733
}

.logo {
  font-family:'Archivo Black',sans-serif;
  font-size:42px;
  letter-spacing:-4px;
  text-decoration:none;
  transform:skew(-8deg)
}

.logo small {
  display:block;
  font:9px 'DM Sans';
  letter-spacing:7px;
  text-align:center;
  margin-top:-4px
}

.navlinks {
  display:flex;
  gap:32px;
  font-size:13px
}

.navlinks a {
  text-decoration:none
}

.cart-toggle {
  background:none;
  border:1px solid var(--ink);
  border-radius:30px;
  padding:12px 20px
}

.cart-toggle span {
  background:var(--ink);
  color:white;
  border-radius:50%;
  padding:3px 7px;
  margin-left:10px
}

.hero {
  min-height:670px;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:70px 5% 60px;
  gap:20px;
  position:relative;
  overflow:hidden
}

.eyebrow {
  font-size:11px;
  letter-spacing:2px;
  font-weight:700
}

.hero h1 {
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(66px,7.8vw,118px);
  line-height:.91;
  letter-spacing:-7px;
  margin:30px 0
}

.hero h1 em {
  font-style:normal;
  color:var(--paper);
  -webkit-text-stroke:2px var(--ink)
}

.hero p {
  max-width:320px;
  line-height:1.6;
  font-size:15px
}

.cta {
  display:inline-flex;
  gap:50px;
  align-items:center;
  border:0;
  border-radius:50px;
  background:var(--ink);
  color:white;
  padding:19px 27px;
  text-decoration:none;
  font-size:13px;
  margin-top:18px
}

.hero-art {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:450px
}

.halo {
  position:absolute;
  width:460px;
  height:460px;
  background:var(--acid);
  border-radius:50%;
  max-width:95%
}

.spark {
  position:absolute;
  right:0;
  top:0;
  font-size:100px;
  line-height:1;
  transform:rotate(13deg)
}

.can {
  height:340px;
  width:172px;
  border-radius:30px 30px 34px 34px;
  position:relative;
  background:linear-gradient(100deg,#0003,transparent 24%,#fff5 48%,transparent 75%,#0003),var(--can);
  box-shadow:15px 25px 25px #0003;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  border-top:9px solid #c7cbc3;
  border-bottom:7px solid #b4b9ad
}

.can:before {
  content:'';
  position:absolute;
  top:-11px;
  left:7px;
  right:7px;
  height:15px;
  border-radius:50%;
  background:linear-gradient(#b8bdb4,#e4e6dd,#9caa99);
  border:2px solid #7f887b
}

.can .brand {
  font-family:'Archivo Black';
  font-size:49px;
  letter-spacing:-5px;
  transform:rotate(-90deg);
  position:absolute;
  top:115px
}

.can .flavor {
  position:absolute;
  bottom:35px;
  font-size:11px;
  font-weight:700;
  letter-spacing:2px
}

.can .vol {
  position:absolute;
  bottom:14px;
  font-size:9px
}

.one {
  --can:#87d7e6;
  transform:rotate(-15deg);
  z-index:2;
  margin-right:-15px;
  margin-top:35px
}

.two {
  --can:#fa8b99;
  transform:rotate(15deg);
  margin-left:-5px;
  margin-top:-15px
}

.art-note {
  position:absolute;
  bottom:4px;
  right:5px;
  font-size:9px;
  letter-spacing:1px
}

.round {
  position:absolute;
  bottom:45px;
  left:4px;
  border-radius:50%;
  width:110px;
  height:110px;
  background:var(--ink);
  color:var(--acid);
  display:grid;
  place-content:center;
  text-align:center;
  transform:rotate(-12deg);
  font-size:12px;
  font-weight:bold
}

.ribbon {
  background:var(--acid);
  border-top:1px solid;
  border-bottom:1px solid;
  padding:18px;
  text-align:center;
  font-family:'Archivo Black';
  font-size:23px;
  word-spacing:15px
}

.shop {
  padding:85px 5%
}

.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:35px
}

h2 {
  font-family:'Archivo Black';
  font-size:clamp(35px,4vw,58px);
  letter-spacing:-3px;
  margin:15px 0
}

.section-heading p {
  font-size:13px
}

.products {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px
}

.product-visual {
  background:#e2eae4;
  min-height:420px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  border-radius:5px
}

.product:nth-child(2) .product-visual {
  background:#f0dcdc
}

.product-visual:before {
  content:'';
  width:300px;
  height:300px;
  border-radius:50%;
  background:#b7dbe3;
  position:absolute
}

.product:nth-child(2) .product-visual:before {
  background:#efa2a5
}

.product-visual .can {
  height:285px;
  width:145px;
  transform:rotate(-9deg)
}

.product:nth-child(2) .can {
  transform:rotate(9deg)
}

.product-visual .brand {
  font-size:44px;
  top:95px
}

.tag {
  position:absolute;
  left:20px;
  top:20px;
  border:1px solid #191b1744;
  padding:7px 12px;
  border-radius:20px;
  font-size:10px;
  letter-spacing:1px
}

.product-line {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:22px
}

.product h3 {
  font-family:'Archivo Black';
  font-size:23px;
  letter-spacing:-1px;
  margin:0
}

.product p {
  font-size:12px;
  color:#61645b
}

.add {
  border:1px solid var(--ink);
  background:transparent;
  padding:13px 19px;
  border-radius:30px;
  font-size:13px
}

.add:hover {
  background:var(--acid)
}

.story {
  background:var(--ink);
  color:var(--paper);
  padding:70px 8%;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:60px;
  align-items:center
}

.story h2 {
  font-size:clamp(40px,5vw,72px);
  line-height:1.05
}

.story p {
  font-size:16px;
  line-height:1.8
}

.story a {
  color:var(--acid)
}

footer {
  padding:35px 5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px
}

.overlay {
  position:fixed;
  inset:0;
  background:#0008;
  z-index:9
}

.drawer {
  position:fixed;
  right:0;
  top:0;
  bottom:0;
  width:min(470px,100%);
  background:var(--paper);
  padding:28px;
  z-index:10;
  overflow:auto;
  box-shadow:-15px 0 60px #0002
}

.drawer header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #bbb;
  padding-bottom:20px
}

.drawer h2 {
  font-size:29px;
  letter-spacing:-1px;
  margin:0
}

.close {
  border:0;
  background:none;
  font-size:28px
}

.cart-item {
  padding:24px 0;
  border-bottom:1px solid #ccc;
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px
}

.cart-item strong {
  font-size:17px
}

.cart-item small {
  display:block;
  margin-top:7px;
  color:#666
}

.qty {
  display:flex;
  align-items:center;
  gap:17px;
  margin-top:15px
}

.qty button {
  width:30px;
  height:30px;
  border:1px solid #aaa;
  background:none;
  border-radius:50%
}

.total {
  display:flex;
  justify-content:space-between;
  margin:28px 0;
  font-size:22px;
  font-weight:bold
}

.pay {
  width:100%;
  background:#009ee3;
  color:white;
  border:0;
  padding:18px;
  border-radius:30px;
  font-weight:bold
}

.pay:disabled {
  opacity:.5;
  cursor:default
}

.notice {
  font-size:12px;
  line-height:1.6;
  color:#62665b
}

.message {
  padding:14px;
  background:#e8edda;
  font-size:13px;
  line-height:1.5;
  margin-top:15px
}

[hidden] {
  display:none!important
}

.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:var(--ink);
  color:white;
  padding:15px 25px;
  border-radius:40px;
  z-index:20;
  font-size:13px;
  white-space:nowrap
}

@media(max-width:720px) {
  nav {
  height:82px
}

.navlinks {
  display:none
}

.logo {
  font-size:34px
}

.hero {
  grid-template-columns:1fr;
  padding-top:40px;
  gap:0
}

.hero h1 {
  font-size:76px;
  letter-spacing:-5px
}

.hero-art {
  min-height:430px;
  margin-top:35px
}

.hero p {
  max-width:90%
}

.halo {
  width:350px;
  height:350px
}

.hero-art .can {
  height:285px;
  width:145px
}

.can .brand {
  font-size:43px;
  top:95px
}

.spark {
  font-size:75px
}

.round {
  width:85px;
  height:85px;
  bottom:20px
}

.ribbon {
  font-size:14px;
  word-spacing:3px
}

.shop {
  padding-top:45px
}

.section-heading {
  display:block
}

.products {
  grid-template-columns:1fr;
  gap:38px
}

.product-visual {
  min-height:350px
}

.story {
  grid-template-columns:1fr;
  gap:12px;
  padding:45px 6%
}

footer {
  gap:20px;
  flex-wrap:wrap
}


}



:root {
  --ink:#f7f8ff;
  --acid:#22d3ff;
  --paper:#0711ae
}

body {
  background:#0711ae;
  color:#fff
}

nav {
  border-color:#ffffff50
}

.top {
  background:#00092f;
  color:#fff
}

.logo {
  transform:none;
  letter-spacing:0
}

.logo-crop {
  display:block;
  position:relative;
  width:150px;
  height:44px;
  overflow:hidden
}

.logo-crop img {
  position:absolute;
  width:180px;
  max-width:none;
  left:-15px;
  top:-70px
}

.navlinks a:hover {
  color:#2ee7ff
}

.cart-toggle {
  color:#fff;
  border-color:#ffffff99
}

.cart-toggle span {
  background:#fff;
  color:#06119b
}

.hero {
  background:radial-gradient(ellipse at 10% 40%,#0074ff66,transparent 65%),#0711ae;
  min-height:620px;
  align-items:center;
  grid-template-columns:1fr 1.08fr;
  padding-top:40px;
  padding-bottom:40px
}

.hero h1 {
  font-style:italic;
  font-size:clamp(54px,6.5vw,100px);
  letter-spacing:-4px;
  line-height:1;
  transform:rotate(-3deg);
  margin:24px 0 30px
}

.hero h1 em {
  color:white;
  -webkit-text-stroke:0;
  text-shadow:4px 4px 0 #008cff
}

.hero p {
  color:#e2ebff
}

.hero-art {
  min-height:0;
  display:block;
  transform:rotate(2deg)
}

.brand-poster {
  width:100%;
  display:block;
  border:1px solid #ffffff33;
  box-shadow:15px 18px 0 #00064f55
}

.cta {
  background:#fff;
  color:#0812ab;
  font-weight:700
}

.ribbon {
  background:#fff;
  color:#0c16c4;
  border-color:#fff;
  transform:rotate(-1deg);
  word-spacing:5px
}

.shop {
  background:#060d71
}

.section-heading p {
  color:#c7d3ff
}

.product-visual {
  background:radial-gradient(circle,#008dff,#1024b8);
  border:1px solid #6687ff;
  border-radius:0
}

.product:nth-child(2) .product-visual {
  background:radial-gradient(circle,#ff71b9,#3d19a9)
}

.product-visual:before {
  background:transparent;
  border:2px dashed #ffffff80;
  transform:rotate(25deg);
  border-radius:44% 54% 43% 57%
}

.product:nth-child(2) .product-visual:before {
  background:transparent
}

.tag {
  color:#fff;
  border-color:#ffffff88
}

.can {
  color:#071147
}

.can .brand {
  font-style:italic
}

.product p {
  color:#b6c5ff
}

.add {
  color:#fff;
  border-color:#8196ff
}

.add:hover {
  background:#fff;
  color:#0711ae
}

.story {
  background:radial-gradient(ellipse at right,#004eff88,transparent 70%),#03062c;
  border-top:1px solid #6275ea
}

.story a {
  color:#62e8ff
}

footer {
  background:#01041d;
  color:#fff
}

.drawer {
  background:#f6f7ff;
  color:#0a1459
}

.drawer header {
  border-color:#ccd1e7
}

.drawer .close,.drawer .total,.drawer .qty button {
  color:#0a1459
}

.drawer .notice {
  color:#555b79
}

.message {
  background:#e1e9ff;
  color:#14225c
}

.toast {
  background:#fff;
  color:#0711ae
}

.product-visual:after {
  content:'ENVASE ILUSTRATIVO';
  position:absolute;
  bottom:12px;
  right:14px;
  font-size:9px;
  letter-spacing:1.5px;
  color:#e8edff
}

@media(max-width:900px) {
  .hero {
  grid-template-columns:1fr;
  gap:35px;
  padding-top:40px;
  padding-bottom:45px
}

.hero h1 {
  font-size:clamp(50px,10vw,85px)
}

.hero-art {
  max-width:560px;
  width:100%;
  justify-self:center;
  margin-top:0
}

.hero p {
  max-width:440px
}

.navlinks {
  display:none
}


}

@media(max-width:480px) {
  .logo-crop {
  width:120px;
  height:38px
}

.logo-crop img {
  width:150px;
  left:-15px;
  top:-57px
}

.cart-toggle {
  padding:10px 13px
}

.hero h1 {
  letter-spacing:-3px
}

.ribbon {
  font-size:13px
}

.hero-art {
  transform:rotate(1deg)
}


}


body {
  overflow-x:clip
}

.hero h1 {
  font-family:'Permanent Marker','Archivo Black',sans-serif;
  font-weight:400
}

.section-heading h2,.story h2 {
  font-family:'Permanent Marker','Archivo Black',sans-serif;
  font-weight:400
}

.product-visual {
  display:block;
  min-height:0;
  aspect-ratio:1;
  background:#060d71;
  isolation:isolate
}

.product-visual:before,.product-visual:after {
  display:none
}

.product-photo {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .4s ease
}

.product-visual:hover .product-photo {
  transform:scale(1.025)
}

.product-visual .tag {
  z-index:1;
  background:#061040b8;
  color:#fff;
  border-color:#ffffff88;
  backdrop-filter:blur(8px)
}

@media(prefers-reduced-motion:reduce) {
  .product-photo {
  transition:none
}

.product-visual:hover .product-photo {
  transform:none
}


}


/* Proporciones compactas para recorrer la tienda con menos desplazamiento. */
.top {
  padding:7px 12px;
  font-size:10px
}

nav {
  height:74px
}

.hero {
  min-height:0;
  padding:30px 5% 36px;
  gap:38px;
  grid-template-columns:1.1fr .9fr
}

.hero h1 {
  font-size:clamp(46px,5.4vw,76px);
  line-height:1.02;
  margin:18px 0 20px;
  letter-spacing:-3px
}

.hero p {
  font-size:14px;
  line-height:1.5;
  margin:0;
  max-width:370px
}

.hero-art {
  max-width:350px;
  width:100%;
  justify-self:center
}

.brand-poster {
  box-shadow:8px 10px 0 #00064f55
}

.cta {
  padding:14px 22px;
  margin-top:20px;
  gap:30px;
  font-size:12px
}

.ribbon {
  padding:12px 16px;
  font-size:17px
}

.shop {
  padding:42px 5% 46px
}

.section-heading {
  margin-bottom:22px;
  gap:20px
}

.section-heading h2 {
  font-size:clamp(28px,3.3vw,44px);
  margin:10px 0
}

.section-heading p {
  margin:0 0 8px;
  font-size:12px
}

.products {
  max-width:880px;
  margin:0 auto;
  gap:26px
}

.product-visual {
  width:100%;
  max-width:310px;
  margin:0 auto
}

.product-line {
  margin-top:14px
}

.product h3 {
  font-size:20px
}

.product-line strong {
  font-size:16px
}

.product p {
  margin:0;
  font-size:12px
}

.add {
  padding:11px 15px;
  font-size:12px
}

.story {
  padding:36px 6%;
  gap:35px
}

.story h2 {
  font-size:clamp(31px,3.7vw,49px);
  margin:12px 0;
  line-height:1.08
}

.story p {
  font-size:14px;
  line-height:1.6;
  margin:0 0 12px
}

.story a {
  font-size:13px
}

footer {
  padding:22px 5%
}

.eyebrow {
  font-size:10px;
  letter-spacing:1.6px
}


@media(min-width:1400px) {
  .hero,.shop {
  padding-left:max(5%,calc((100vw - 1200px)/2));
  padding-right:max(5%,calc((100vw - 1200px)/2))
}


}


@media(min-width:721px) and (max-width:900px) {
  .hero {
  grid-template-columns:1fr .9fr;
  gap:28px
}

.hero h1 {
  font-size:clamp(43px,6.2vw,56px)
}

.hero-art {
  max-width:285px
}

.hero p {
  font-size:13px
}

.ribbon {
  font-size:14px
}

.section-heading {
  align-items:center
}


}


@media(max-width:720px) {
  nav {
  height:68px
}

.hero {
  grid-template-columns:1fr;
  gap:22px;
  padding-top:25px;
  padding-bottom:28px
}

.hero h1 {
  font-size:clamp(43px,9vw,62px);
  margin:14px 0 17px
}

.hero-art {
  max-width:245px;
  margin-top:0
}

.hero p {
  font-size:13px;
  max-width:410px
}

.cta {
  padding:12px 20px;
  margin-top:16px
}

.ribbon {
  font-size:12px;
  padding:10px 12px;
  word-spacing:2px
}

.shop {
  padding-top:29px;
  padding-bottom:30px
}

.section-heading {
  display:block;
  margin-bottom:19px
}

.section-heading h2 {
  font-size:30px
}

.section-heading p {
  margin-top:8px
}

.products {
  grid-template-columns:1fr 1fr;
  gap:16px
}

.product-visual {
  max-width:250px;
  min-height:0
}

.product-line {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:11px
}

.product h3 {
  font-size:17px
}

.product-line strong {
  font-size:14px
}

.product p {
  font-size:10px
}

.add {
  padding:10px 12px;
  font-size:11px;
  width:100%
}

.tag {
  left:9px;
  top:9px;
  padding:5px 7px;
  font-size:8px
}

.story {
  grid-template-columns:1fr;
  gap:12px;
  padding:29px 5%
}

.story h2 {
  font-size:34px
}

.story p {
  font-size:13px
}

footer {
  padding:20px 5%;
  font-size:11px
}


}


@media(max-width:380px) {
  .products {
  gap:12px
}

.product h3 {
  font-size:15px
}

.product-line strong {
  font-size:13px
}

.section-heading h2 {
  font-size:26px
}

.hero-art {
  max-width:215px
}


}




/* Catálogo ampliado: tarjetas compactas, packs y sorpresa. */
.products { max-width:1100px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 24px; align-items:start; }
.product { min-width:0; }
.product-visual { max-width:260px; }
.product h3 { font-size:19px; }
.product-detail { margin:9px 0 12px!important; color:#c3ceff; font-size:12px; }
.product-actions { display:grid; gap:8px; }
.product-actions .add { width:100%; display:flex; align-items:center; justify-content:space-between; gap:6px; text-align:left; }
.product-actions .pack-add { background:#ffffff0d; border-color:#a5b8ff; }
.product-actions .pack-add:hover { background:#fff; }
.flavor-art { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; position:relative; color:#fff; text-align:center; }
.flavor-art.maracuya { background:radial-gradient(circle at 20% 10%,#ffe56c,#d47716 65%,#612377); }
.flavor-art.berries { background:radial-gradient(circle at 20% 10%,#f75dba,#90227d 65%,#2f126e); }
.flavor-art.sin-alcohol { background:radial-gradient(circle at 20% 10%,#85edc2,#168d8d 65%,#083275); }
.art-star { position:absolute; font-size:220px; color:#ffffff1a; line-height:1; transform:rotate(15deg); }
.art-brand { font-family:'Permanent Marker',sans-serif; font-size:38px; transform:rotate(-8deg); z-index:1; }
.art-name { font-family:'Permanent Marker',sans-serif; font-size:26px; margin-top:14px; z-index:1; }
.flavor-art small { font-size:8px; letter-spacing:1.5px; margin-top:18px; z-index:1; }
.special-products { max-width:1100px; margin:30px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.special-card { padding:25px; border:1px solid #829bff; background:#ffffff08; display:flex; flex-direction:column; align-items:flex-start; }
.special-card h3 { font:28px/1.15 'Permanent Marker',sans-serif; margin:15px 0; }
.special-card p { font-size:13px; line-height:1.6; margin:0 0 14px; color:#d6e0ff; }
.special-card small { font-size:11px; color:#d6e0ff; }
.flavor-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:15px; }
.flavor-chips span { border:1px solid #ffffff55; padding:5px 9px; border-radius:20px; font-size:10px; }
.special-buy { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:15px; margin-top:auto; padding-top:20px; width:100%; }
.special-buy strong { font-size:23px; }
.surprise { background:linear-gradient(125deg,#4420bd,#0d1a75); }
.surprise .add { background:#fff; color:#131c71; border-color:white; }
@media(max-width:900px) { .products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 20px; } .product h3 { font-size:18px; } }
@media(max-width:600px) { .products { gap:24px 14px; } .product h3 { font-size:16px; } .product-actions .add { padding:10px 8px; font-size:10px; } .product-detail { font-size:10px!important; } .art-brand { font-size:28px; } .art-name { font-size:19px; } .art-star { font-size:160px; } .flavor-art small { font-size:6px; letter-spacing:.8px; } .special-products { grid-template-columns:1fr; gap:16px; margin-top:25px; } .special-card { padding:20px; } .special-card h3 { font-size:25px; } .special-buy .add { width:auto; } .toast { max-width:calc(100vw - 28px); white-space:normal; text-align:center; } }

/* Encabezado persistente: debajo del carrito y sobre el contenido. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 8;
  margin: 0;
  padding: 0 5%;
  background: #0711ae;
  box-shadow: 0 4px 16px #00051f26;
}
#sabores, #universo { scroll-margin-top: 94px; }
@media (max-width: 720px) {
  #sabores, #universo { scroll-margin-top: 84px; }
}

/* Esquinas suaves y referencias visuales de los packs. */
.product-visual, .brand-poster { border-radius:15px; overflow:hidden; }
.product-photo { border-radius:15px; }
.special-visual { width:100%; height:200px; border-radius:15px; overflow:hidden; margin-bottom:22px; position:relative; flex-shrink:0; }
.pack-reference { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; background:#101a65; }
.reference-tile { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.reference-tile img { height:100%; width:100%; object-fit:cover; }
.reference-tile > span:last-child { position:absolute; bottom:10px; left:4px; right:4px; text-align:center; padding:5px 2px; border-radius:8px; background:#071247cc; font-size:10px; color:white; }
.reference-berries { background:linear-gradient(150deg,#ef68b1,#70166c); }
.reference-maracuya { background:linear-gradient(150deg,#ffe76a,#c77b20); }
.reference-word { font:19px 'Permanent Marker',sans-serif; color:white; transform:rotate(-12deg); }
.surprise-reference { display:grid; grid-template-columns:1fr 1fr; background:#121676; }
.surprise-reference > img { width:100%; height:200px; object-fit:cover; }
.surprise-reference:after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 30%,#071247bb); }
.surprise-question { position:absolute; z-index:1; left:50%; top:44%; transform:translate(-50%,-50%) rotate(-8deg); font:88px/1 'Permanent Marker',sans-serif; color:white; text-shadow:3px 5px 0 #1924a3; }
.surprise-caption { position:absolute; z-index:1; left:0; right:0; bottom:16px; text-align:center; font:15px 'Permanent Marker',sans-serif; color:white; }
@media(max-width:600px) { .special-visual { height:175px; margin-bottom:18px; } .surprise-reference > img { height:175px; } .reference-word { font-size:17px; } }

/* Cierre Universo Caoos: contraste explícito y contenido equilibrado. */
.story {
  color:#fff;
  background:radial-gradient(ellipse at 85% 40%,#2435ac66,transparent 60%),#070c32;
  border-top:1px solid #7c8dff40;
  padding:44px 6%;
  grid-template-columns:1.1fr 1fr;
  gap:50px;
  align-items:center;
}
.story .eyebrow { color:#a8bcff; font-size:10px; letter-spacing:2px; }
.story h2 { color:#fff; font-size:clamp(34px,3.6vw,52px); line-height:1.08; margin:15px 0 18px; }
.story .story-copy p { color:#d2daf4; font-size:14px; line-height:1.65; margin:0; }
.story-social { color:#fff; display:flex; align-items:center; gap:22px; padding:26px; border:1px solid #9aafff40; border-radius:15px; background:#ffffff06; }
.social-symbol { color:#98daff; font-size:68px; line-height:1; flex-shrink:0; }
.social-handle { display:block; color:#fff; font-size:22px; font-weight:700; letter-spacing:-.5px; }
.story .story-social p { color:#c6d0ef; font-size:13px; line-height:1.55; margin:9px 0 18px; }
.story a.instagram-button { display:inline-flex; align-items:center; justify-content:space-between; gap:22px; border-radius:30px; padding:12px 19px; background:#fff; color:#111d71; text-decoration:none; font-size:12px; font-weight:700; }
.story a.instagram-button:hover { background:#b8e8ff; }
footer { padding:24px 6%; background:#03071e; color:#d2d9ee; border-top:1px solid #ffffff12; gap:20px; }
footer > span { font-size:11px; color:#b4bfdc; }
footer > a:last-child { color:#e0e8ff; font-size:12px; text-decoration:none; }
@media(max-width:850px) { .story { gap:28px; padding:34px 5%; } .story-social { gap:14px; padding:20px; } .social-symbol { font-size:45px; } .social-handle { font-size:20px; } }
@media(max-width:640px) { .story { grid-template-columns:1fr; gap:25px; padding:30px 5%; } .story h2 { font-size:36px; } .story-social { padding:20px; } .social-symbol { font-size:54px; } footer { padding:22px 5%; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; } footer > span { grid-column:1 / -1; grid-row:2; } }

/* Declaración de mayoría de edad: el fondo permanece bloqueado hasta confirmar. */
html.age-locked { overflow:hidden; }
.age-gate { position:fixed; inset:0; margin:auto; width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; box-sizing:border-box; padding:32px; border:1px solid #879cff77; border-radius:20px; background:radial-gradient(ellipse at top right,#273bc1,#080f47 65%); color:#fff; box-shadow:0 24px 90px #0009; text-align:center; z-index:100; }
.age-gate::backdrop { background:#01051ae8; backdrop-filter:blur(6px); }
.age-brand { font:28px 'Permanent Marker',sans-serif; color:#fff; transform:rotate(-6deg); }
.age-badge { display:inline-grid; place-items:center; width:52px; height:52px; border:1px solid #a1bdff99; border-radius:50%; color:#b6e8ff; font-weight:700; margin:20px 0 10px; }
.age-gate h2 { color:#fff; font:30px/1.15 'Permanent Marker',sans-serif; letter-spacing:-1px; margin:12px 0 18px; }
.age-gate > p { color:#dce4ff; font-size:14px; line-height:1.6; }
.age-check { display:flex; gap:12px; align-items:center; padding:16px; margin:22px 0 16px; border:1px solid #829bff77; border-radius:12px; background:#ffffff08; text-align:left; font-size:14px; cursor:pointer; }
.age-check input { width:22px; height:22px; margin:0; accent-color:#86dcff; flex-shrink:0; }
.age-enter { width:100%; padding:15px 18px; border:0; border-radius:30px; background:#fff; color:#111e73; font-weight:700; }
.age-enter:disabled { opacity:.4; cursor:not-allowed; }
.age-decline { background:none; border:0; padding:16px; color:#c1cfff; font-size:12px; text-decoration:underline; }
.age-gate p.age-legal { color:#aebce7; font-size:10px; line-height:1.6; margin:12px 0 0; }
.age-message { color:#fff; padding:12px; border-radius:10px; border:1px solid #a4b7ff66; background:#ffffff0d; font-size:12px; line-height:1.5; }
@media(max-width:480px) { .age-gate { padding:24px; } .age-gate h2 { font-size:27px; } }