/* ==========================================================
   Identidad: relieves, texturas y degradados
   Se carga después de styles.css y lo sobrescribe.
   ========================================================== */
:root{
  --f-hand:'Caveat Brush','Barlow',cursive;
  --grain-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  --grain-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
  --kernels:radial-gradient(circle at 50% 50%,rgba(255,255,255,.2) 0 4.5px,transparent 5.5px) 0 0/30px 30px,radial-gradient(circle at 50% 50%,rgba(255,255,255,.2) 0 4.5px,transparent 5.5px) 15px 15px/30px 30px;
  --kernels-gold:radial-gradient(circle at 50% 50%,rgba(248,184,8,.22) 0 4.5px,transparent 5.5px) 0 0/30px 30px,radial-gradient(circle at 50% 50%,rgba(248,184,8,.22) 0 4.5px,transparent 5.5px) 15px 15px/30px 30px;
  --veins:repeating-linear-gradient(118deg,rgba(255,255,255,.045) 0 2px,transparent 2px 26px);
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='26'%3E%3Cpath d='M0 0h96v10c-24 0-24 16-48 16S24 10 0 10z'/%3E%3C/svg%3E");
}

/* bordes ondulados entre secciones */
.wave{position:relative}
.wave::before{content:'';position:absolute;left:0;right:0;top:0;height:26px;background:var(--above);-webkit-mask:var(--wave) repeat-x 0 0/96px 26px;mask:var(--wave) repeat-x 0 0/96px 26px;pointer-events:none;z-index:2}

/* títulos con relieve */
.h2{font-size:clamp(34px,7.6vw,66px);line-height:1.02;background:linear-gradient(180deg,#B3239A 0%,#780858 55%,#4F0540 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.95)) drop-shadow(0 4px 2px rgba(61,6,48,.28))}
.stars .h2,.loc .h2{background-image:linear-gradient(180deg,#FFF6A0 0%,#F8D808 45%,#F8A808 100%);filter:drop-shadow(0 2px 0 #B87C00) drop-shadow(0 4px 0 #7B4D00) drop-shadow(0 8px 6px rgba(0,0,0,.4))}
.gloss .h2{background-image:linear-gradient(180deg,#8E0F72 0%,#5E0647 60%,#3D0630 100%);filter:drop-shadow(0 2px 0 rgba(255,236,150,.95)) drop-shadow(0 4px 2px rgba(61,6,48,.3))}
.hand{font-family:var(--f-hand);font-weight:400}

/* botones tipo caramelo */
.btn{min-height:54px;transition:transform .3s var(--spring),box-shadow .2s,filter .2s;position:relative}
.btn--plum{background:linear-gradient(180deg,#B3239A 0%,#8A0F6A 50%,#640549 100%);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.25),0 4px 0 #3D0630,0 10px 16px rgba(61,6,48,.35)}
.btn--green{background:linear-gradient(180deg,#C9EE3A 0%,#98C808 55%,#74A006 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.18),0 4px 0 #4E6B03,0 10px 16px rgba(0,0,0,.28)}
.btn--yellow{background:linear-gradient(180deg,#FFF07A 0%,#F8D808 50%,#E8A800 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.65),inset 0 -3px 0 rgba(0,0,0,.14),0 4px 0 #9A6A00,0 10px 16px rgba(0,0,0,.28)}
.btn--wa{background:linear-gradient(180deg,#19A152 0%,#0B7A3B 55%,#075C2C 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.25),0 4px 0 #04401E,0 10px 16px rgba(0,0,0,.3)}
.btn:active{transform:translateY(3px) scale(.98);transition-duration:.08s}
.btn--plum:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.25),0 1px 0 #3D0630,0 3px 6px rgba(61,6,48,.3)}
.btn--green:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 1px 0 #4E6B03}
.btn--yellow:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 1px 0 #9A6A00}
.btn--wa:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 #04401E}
@media (hover:hover){.btn:hover{transform:translateY(-3px);filter:brightness(1.06)}.btn--plum:hover,.btn--green:hover,.btn--yellow:hover{background-color:transparent}}
.btn--sm{min-height:44px}

/* nav */
.nav{background:var(--grain-l),linear-gradient(180deg,#8A0F6A 0%,#5E0647 100%);box-shadow:0 3px 0 var(--amber),0 8px 18px rgba(61,6,48,.35)}

/* HERO */
.hero{color:#FFF3C4;background:var(--grain-l),radial-gradient(110% 85% at 80% 38%,#B3239A 0%,#780858 42%,#3D0630 100%)}
.hero::before{content:'';position:absolute;inset:0;background:var(--kernels);opacity:.55;-webkit-mask:linear-gradient(100deg,#000 0%,transparent 55%);mask:linear-gradient(100deg,#000 0%,transparent 55%);pointer-events:none}
.hero__text,.hero__plate{position:relative;z-index:1}
.hero__title{color:transparent;filter:drop-shadow(0 3px 0 #C98A00) drop-shadow(0 6px 0 #9A6600) drop-shadow(0 9px 0 #5E3E00) drop-shadow(0 16px 14px rgba(0,0,0,.45))}
.hero__title .ln{background:linear-gradient(180deg,#FFF9B0 0%,#FFE23A 34%,#F8B808 78%,#EE8F00 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:4px #3D0630;padding:0 .05em}
.hero__lead{color:#FFF3C4;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.hero__hand{font:400 clamp(26px,6vw,36px)/1 var(--f-hand);color:#FFE45C;margin:18px 0 0;transform:rotate(-3deg);transform-origin:left;text-shadow:0 2px 0 #3D0630;animation:rise .7s .3s var(--ease-out) both}
.openstate{color:#FFF3C4}
.dot{background:#FFE45C}
.openstate.is-open .dot,.openstate.is-open .dot::after{background:#7BE35A}
.hero__img{position:relative;z-index:1;box-shadow:0 0 0 8px rgba(255,255,255,.95),0 0 0 14px rgba(248,216,8,.9),0 24px 40px rgba(0,0,0,.45)}
.leaf{position:absolute;z-index:0;width:40%;height:auto;aspect-ratio:200/420;pointer-events:none;filter:drop-shadow(0 12px 14px rgba(0,0,0,.35))}
.leaf--a{left:-10%;top:-2%;transform:rotate(-38deg)}
.leaf--b{right:-4%;bottom:-6%;transform:rotate(148deg)}
.steam{z-index:2}

/* HISTORIA */
.story{--above:#3D0630;background:var(--grain-d),var(--kernels-gold),linear-gradient(165deg,#FFFDF0 0%,#FFF3B0 100%);padding-top:clamp(96px,13vw,170px)}
.story__text p{font-size:18px}
.placeholder{background:linear-gradient(180deg,#FFF6C2,#FFE882);box-shadow:inset 0 2px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(184,124,0,.25)}
.story__fig{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;align-items:start;padding:10px 6px}
.polaroid{margin:0;background:#fff;padding:9px 9px 0;box-shadow:0 12px 26px rgba(61,6,48,.28),0 1px 0 rgba(0,0,0,.06);transform:rotate(var(--r,0deg));transition:transform .5s var(--spring)}
.polaroid img{width:100%;aspect-ratio:9/14;object-fit:cover;object-position:50% 20%}
.polaroid figcaption{font:400 clamp(20px,4.6vw,26px)/1 var(--f-hand);color:var(--plum);text-align:center;padding:10px 4px 12px}
.pol--a{--r:-3deg}.pol--b{--r:2.5deg;margin-top:28px}
.pol--c{--r:-1.5deg;grid-column:1/-1;width:72%;justify-self:center;margin-top:-6px}
.pol--c img{aspect-ratio:16/10}
@media (hover:hover){.polaroid:hover{transform:rotate(0deg) translateY(-6px) scale(1.03);z-index:3}}
@media (min-width:900px){.story__fig{gap:26px 20px}}

/* ESTRELLAS */
.stars{--above:#FFF3B0;background:var(--grain-l),var(--veins),radial-gradient(90% 60% at 12% 0%,#A3138A 0%,#780858 45%,#3D0630 100%);padding-top:clamp(96px,12vw,160px)}
.star{background:linear-gradient(160deg,#FFE23A,#F8A808);box-shadow:0 14px 28px rgba(0,0,0,.4)}
.star::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 8px rgba(61,6,48,.3);pointer-events:none}
.star__t{background:linear-gradient(180deg,rgba(61,6,48,.7),rgba(40,3,31,.95));padding:16px 18px 18px}
.star__t b{filter:drop-shadow(0 2px 0 #000)}
.star__p{background:linear-gradient(180deg,#FFF07A,#F8C008);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 3px 0 #9A6A00,0 6px 10px rgba(0,0,0,.35);top:16px;right:16px;z-index:2}
.star--d{background:linear-gradient(160deg,#FFC93A,#EE8F00)}
.star--c{background:linear-gradient(160deg,#C9EE3A,#74A006)}

/* MENÚ */
.menu{--above:#3D0630;background:var(--grain-d),var(--kernels-gold),linear-gradient(180deg,#FFFFFF 0%,#FFF3B8 100%);padding-top:clamp(96px,12vw,150px)}
.menu__sub a{color:var(--plum)}
.chips{background:linear-gradient(180deg,#FFE23A 0%,#F8B808 100%);box-shadow:0 4px 0 #B87C00,0 10px 18px rgba(61,6,48,.25)}
.chip{background:linear-gradient(180deg,#fff,#FFF1B0);box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(120,8,88,.35)}
.chip[aria-current="true"]{background:linear-gradient(180deg,#B3239A,#780858 60%,#5E0647);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 2px 0 #3D0630}
@media (hover:hover){.chip:not([aria-current="true"]):hover{background:linear-gradient(180deg,#fff,#FFE27A)}}
.cat__title{font-size:clamp(30px,6.4vw,52px);display:inline-block;padding-bottom:14px;margin-bottom:22px;background:linear-gradient(180deg,#B3239A 0%,#780858 55%,#4F0540 100%) 0 0/100% calc(100% - 14px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10'%3E%3Cpath d='M0 5q7-8 14 0t14 0' fill='none' stroke='%23F8B808' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 100%/28px 10px repeat-x;
  -webkit-background-clip:text,border-box;background-clip:text,border-box;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 rgba(255,255,255,.95)) drop-shadow(0 3px 2px rgba(61,6,48,.25))}
.card{background:linear-gradient(170deg,#FFFBE0 0%,#FFEC8C 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -3px 0 rgba(184,124,0,.22),0 8px 18px rgba(120,8,88,.16)}
.card__img{background:linear-gradient(160deg,#FFD23A,#F8A808);box-shadow:inset -3px 0 6px rgba(61,6,48,.25)}
.card__img img{filter:saturate(1.08) contrast(1.03)}
.price{background:linear-gradient(180deg,#B3239A,#780858 60%,#4F0540);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 rgba(255,255,255,.9))}
.more{background:linear-gradient(180deg,#B3239A,#780858 55%,#5E0647);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 #3D0630}
.more:active{transform:translateY(2px) scale(.97);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 #3D0630}
.tag{background:linear-gradient(180deg,#C9EE3A,#98C808);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 0 #5E7D04}
.tag--share{background:linear-gradient(180deg,#FFD84A,#F8A808);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 0 #9A6A00}
.ing{background:linear-gradient(180deg,#fff,#FFF6CF);box-shadow:0 2px 0 rgba(184,124,0,.3)}
.steps li::before{background:linear-gradient(180deg,#B3239A,#780858);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 0 #3D0630}

/* GLOSARIO */
.gloss{--above:#FFF3B8;background:var(--grain-d),var(--kernels),linear-gradient(135deg,#FFD23A 0%,#F8A808 55%,#EE8F00 100%);padding-top:clamp(96px,12vw,150px)}
.gloss__head p{color:#3D0630}
.term{background:linear-gradient(180deg,#fff,#FFF8DC);box-shadow:inset 0 2px 0 #fff,0 6px 0 rgba(139,90,0,.45),0 14px 20px rgba(61,6,48,.2);transform:rotate(var(--r,0deg))}
.term:nth-child(3n+1){--r:-.7deg}.term:nth-child(3n+2){--r:.5deg}.term:nth-child(3n){--r:-.3deg}
.term dt svg{width:68px;height:68px;padding:7px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#FFF9D0 0%,#FFE27A 70%,#F8C008 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 3px 0 rgba(184,124,0,.45)}
@media (hover:hover){.term:hover{transform:rotate(0) translateY(-6px)}}

/* UBICACIÓN */
.loc{--above:#EE8F00;background:var(--grain-l),var(--veins),radial-gradient(90% 80% at 90% 0%,#A3138A 0%,#780858 40%,#3D0630 100%);padding-top:clamp(96px,12vw,150px);overflow:hidden}
.loc__addr{color:#FFF3C4;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.hours tr.is-today{background:linear-gradient(180deg,#FFF07A,#F8C008);box-shadow:0 3px 0 #9A6A00}
.loc__map{box-shadow:0 0 0 7px #fff,0 0 0 11px var(--yellow),0 22px 36px rgba(0,0,0,.45)}

/* FOOTER */
.foot{--above:#3D0630;background:var(--grain-l),linear-gradient(180deg,#4A0840 0%,#240320 100%);padding-top:96px}
.foot__logo{filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}

/* WhatsApp flotante */
.wa{background:linear-gradient(180deg,#19A152 0%,#0B7A3B 55%,#075C2C 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 4px 0 #04401E,0 10px 20px rgba(0,0,0,.4)}

/* aplicar ondas */
.story,.stars,.menu,.gloss,.loc,.foot{position:relative}
.story::before,.stars::before,.menu::before,.gloss::before,.loc::before,.foot::before{content:'';position:absolute;left:0;right:0;top:0;height:26px;background:var(--above);-webkit-mask:var(--wave) repeat-x 0 0/96px 26px;mask:var(--wave) repeat-x 0 0/96px 26px;pointer-events:none;z-index:2}
.hero::before{height:auto;-webkit-mask:linear-gradient(100deg,#000 0%,transparent 55%);mask:linear-gradient(100deg,#000 0%,transparent 55%)}

@media (prefers-reduced-motion:reduce){.hero__hand{animation:none}}
main{overflow-x:clip}html{overflow-x:clip}

.story::before{display:none}

/* aviso de demo */
.demo{background:linear-gradient(180deg,#2A0422,#3D0630);color:#FFF3C4;text-align:center;padding:9px var(--gutter);padding-top:calc(9px + env(safe-area-inset-top))}
.demo p{margin:0;font-size:14px;line-height:1.35;font-weight:600}
.demo strong{color:#FFE45C;font-weight:800}
@media (min-width:700px){.demo p{font-size:15px}}