/* Estructura común + tres juegos de tokens (body.dis-a / dis-b / dis-c). */

/* ---------- Tokens por diseño ---------- */
body.dis-a{--fondo:#10241c;--fondo2:#183528;--texto:#f3ead8;--suave:#cfc4ae;--acento:#e2b45a;--sobre-acento:#10241c;--marca:#e2b45a;--linea:#2c5240;--tarjeta:#183528;--tarjeta-texto:#f3ead8;--resalte:#e2b45a;--f-tit:"Cormorant Garamond",Georgia,serif;--f-txt:"Mulish",system-ui,sans-serif;--peso-tit:500;--radio:2px;--radio-t:4px;--borde-t:1px solid #2c5240;--aviso:#7e2433;--aviso-t:#f3ead8}
body.dis-b{--fondo:#fffaf3;--fondo2:#ffffff;--texto:#1f1214;--suave:#5a4a4c;--acento:#f2b631;--sobre-acento:#1f1214;--marca:#c8102e;--linea:#1f1214;--tarjeta:#ffffff;--tarjeta-texto:#1f1214;--resalte:#c8102e;--f-tit:"Rubik",system-ui,sans-serif;--f-txt:"Nunito Sans",system-ui,sans-serif;--peso-tit:800;--radio:999px;--radio-t:16px;--borde-t:2px solid #1f1214;--aviso:#0f5132;--aviso-t:#ffffff}
body.dis-c{--fondo:#f8f2e7;--fondo2:#e9dcc6;--texto:#2b241c;--suave:#54493c;--acento:#a3262a;--sobre-acento:#ffffff;--marca:#a3262a;--linea:#b8a78a;--tarjeta:#ffffff;--tarjeta-texto:#2b241c;--resalte:#a3262a;--f-tit:"Cabin",system-ui,sans-serif;--f-txt:"Cabin",system-ui,sans-serif;--peso-tit:700;--radio:10px;--radio-t:16px;--borde-t:1.5px dashed #b8a78a;--aviso:#5d7a64;--aviso-t:#ffffff;--f-mano:"Caveat",cursive}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--texto);font:16px/1.6 var(--f-txt);-webkit-font-smoothing:antialiased}
body.dis-c{background-image:radial-gradient(rgba(43,36,28,.05) 1px,transparent 1px);background-size:6px 6px}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--f-tit);font-weight:var(--peso-tit);line-height:1.1;text-wrap:balance;margin:0 0 .5em}
.cont{max-width:1180px;margin:0 auto;padding-left:max(16px,4vw);padding-right:max(16px,4vw)}
.saltar{position:absolute;left:-999px;top:8px;background:var(--acento);color:var(--sobre-acento);padding:8px 14px;z-index:100}
.saltar:focus{left:8px}
:focus-visible{outline:3px solid var(--acento);outline-offset:3px}
.centro{text-align:center}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ---------- Botones ---------- */
.btn,.button,button.button,.wc-block-components-button,input[type=submit]{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 24px;border-radius:var(--radio);border:1px solid var(--acento);background:var(--acento);color:var(--sobre-acento)!important;font:700 15px var(--f-txt);text-decoration:none;cursor:pointer;transition:filter .15s,transform .15s}
.btn:hover,.button:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.98)}
.btn-2{background:transparent;color:var(--texto)!important;border-color:currentColor}
.dis-a .btn-2{color:var(--acento)!important}
.dis-b .btn{font-family:var(--f-tit)}

/* ---------- Cabecera ---------- */
.aviso-barra{background:var(--aviso);color:var(--aviso-t);text-align:center;font-weight:700;font-size:14px;padding:8px 16px}
.cabecera-in{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-block:18px}
.logo{font:var(--peso-tit) 26px var(--f-tit);color:var(--marca);text-decoration:none;margin-right:auto}
.dis-a .logo{letter-spacing:.04em}
.dis-c .logo{font:700 34px var(--f-mano)}
.menu{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0;padding:0;font-weight:600;font-size:15px}
.menu a{text-decoration:none;padding:6px 0}
.menu a:hover{text-decoration:underline;text-underline-offset:4px}
.carro{font-weight:700;font-size:14px;text-decoration:none;border:1px solid currentColor;padding:8px 14px;border-radius:var(--radio)}
.dis-b .carro{background:var(--texto);color:#fff;border-color:var(--texto)}

/* ---------- Vela dibujada ---------- */
.vela{position:relative;width:var(--w,70px);height:var(--h,130px);flex:none}
.vela .cuerpo{position:absolute;inset:auto 0 0 0;height:calc(100% - 34px);border-radius:8px 8px 6px 6px;background:var(--cera);box-shadow:inset -10px 0 18px rgba(0,0,0,.14),0 8px 18px rgba(0,0,0,.12)}
.vela .mecha{position:absolute;left:50%;top:20px;width:2px;height:16px;background:#3b2a1d;transform:translateX(-50%)}
.vela .llama{position:absolute;left:50%;top:0;width:14px;height:24px;transform:translateX(-50%);border-radius:50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#fff8d6 0 20%,#ffd36b 45%,#f08a24 80%);box-shadow:0 0 22px 8px rgba(255,190,80,.45);animation:tiembla 2.4s ease-in-out infinite}
.vela .nombre{position:absolute;left:0;right:0;bottom:34%;text-align:center;color:var(--tinta,var(--resalte));font:var(--peso-tit) var(--fs,16px)/1.05 var(--f-mano,var(--f-tit));padding:0 6px;overflow-wrap:anywhere}
.vela .adorno{position:absolute;left:0;right:0;bottom:16%;text-align:center;font-size:12px;letter-spacing:.2em;color:var(--tinta,var(--resalte));opacity:.85}
@keyframes tiembla{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06,.95) rotate(2deg)}}
.sin-foto{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:1;background:var(--fondo2);border-radius:calc(var(--radio-t) - 4px);padding-bottom:12px}
.sin-foto .vela{--h:62%;--w:30%}

/* ---------- Portada ---------- */
.hero{padding-block:30px 60px}
.dis-a .hero{background:radial-gradient(55% 80% at 75% 55%,rgba(226,180,90,.2),transparent 70%)}
.hero-in{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
.hero h1{font-size:clamp(36px,5.4vw,64px);line-height:1.02}
.hero h1 em{color:var(--resalte);font-style:normal}
.dis-a .hero h1 em{font-style:italic}
.dis-c .hero h1 em{font:700 1.25em var(--f-mano)}
.lead{font-size:18px;color:var(--suave);max-width:46ch;margin:0 0 24px}
.botones{display:flex;flex-wrap:wrap;gap:12px}
.hero-visual{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:18px;min-height:300px}
.hero-visual .v1{--h:160px}.hero-visual .v2{--h:220px;--w:88px;--fs:22px}.hero-visual .v3{--h:130px}
/* B: el texto y la vela en bloques de color */
.dis-b .hero-in{gap:16px;align-items:stretch}
.dis-b .hero-texto{background:#c8102e;color:#fff;border-radius:22px;padding:clamp(24px,4vw,44px)}
.dis-b .hero-texto .lead{color:#ffe3e7}
.dis-b .hero-texto h1 em{color:#f2b631}
.dis-b .hero-texto .btn-2{color:#fff!important}
.dis-b .hero-visual{background:#0f5132;border-radius:22px;padding:24px}
.dis-b .hero-visual .v1{--cera:#fffaf3}
.sello{position:absolute;top:18px;right:18px;background:#f2b631;color:#1f1214;font:800 13px/1.1 var(--f-tit);width:84px;height:84px;border-radius:50%;display:grid;place-items:center;text-align:center;transform:rotate(-12deg);padding:6px}
/* C: tarjeta de taller */
.dis-c .hero-visual{background:#fff;border:var(--borde-t);border-radius:18px;padding:24px}

.titulo-sec{font-size:clamp(28px,3.6vw,42px)}
.categorias{padding-bottom:40px}
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.cat{display:grid;gap:4px;padding:22px;background:var(--tarjeta);color:var(--tarjeta-texto);border:var(--borde-t);border-radius:var(--radio-t);text-decoration:none;transition:transform .15s}
.cat:hover{transform:translateY(-2px)}
.cat strong{font:var(--peso-tit) 24px var(--f-tit);color:var(--resalte)}
.cat span{color:var(--suave);font-size:14px}
.dis-a .cat span{color:#bfb59f}

.destacados,.personalizar,.pasos{padding-block:40px}
.grilla,ul.products{list-style:none;margin:0 0 28px!important;padding:0!important;display:grid!important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
ul.products::before,ul.products::after{display:none!important}
.prod,ul.products li.product{width:auto!important;margin:0!important;float:none!important;background:var(--tarjeta);color:var(--tarjeta-texto);border:var(--borde-t);border-radius:var(--radio-t);padding:14px!important;position:relative}
.prod a{display:grid;gap:6px;text-decoration:none}
.prod .foto img,ul.products li.product img{border-radius:calc(var(--radio-t) - 4px);aspect-ratio:1;object-fit:cover;margin:0 0 8px!important}
.prod strong,ul.products .woocommerce-loop-product__title{font:var(--peso-tit) 18px/1.2 var(--f-tit)!important;padding:0!important}
.precio,ul.products .price{font-weight:700;color:var(--resalte)!important;font-variant-numeric:tabular-nums}
.etq{justify-self:start;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--acento);color:var(--sobre-acento)}

.pers-in{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:center}
.taller{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;background:var(--tarjeta);color:var(--tarjeta-texto);border:var(--borde-t);border-radius:18px;padding:22px}
.taller .vela{--h:210px;--w:100px;--fs:24px}
.dis-a .taller .vela{--cera:#f3ead8!important}
.taller label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.taller input,.velas-campos input,.velas-campos select{width:100%;font:16px var(--f-txt);padding:11px 12px;min-height:46px;border:1.5px solid var(--linea);border-radius:10px;background:var(--fondo);color:var(--texto)}
.ops{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.ops button{font:600 14px var(--f-txt);padding:8px 14px;min-height:40px;border-radius:999px;border:1.5px solid var(--resalte);background:transparent;color:inherit;cursor:pointer}
.ops button[aria-pressed="true"]{background:var(--resalte);color:#fff}

.pasos-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;counter-reset:paso}
.pasos-l li{counter-increment:paso;background:var(--fondo2);border-radius:var(--radio-t);padding:22px;display:grid;gap:4px}
.pasos-l li::before{content:counter(paso);font:var(--peso-tit) 34px/1 var(--f-mano,var(--f-tit));color:var(--resalte)}
.pasos-l strong{font:var(--peso-tit) 20px var(--f-tit)}
.pasos-l span{color:var(--suave)}

/* ---------- Páginas, blog y tienda ---------- */
.pagina{padding-block:30px 60px}
.texto{max-width:760px}
.fecha{color:var(--suave);font-size:14px}
.entradas{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.entrada{background:var(--tarjeta);color:var(--tarjeta-texto);border:var(--borde-t);border-radius:var(--radio-t);padding:18px}
.entrada h2{font-size:24px}
.entrada h2 a{text-decoration:none}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{margin-bottom:20px}
.woocommerce div.product{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.woocommerce div.product div.images,.woocommerce div.product div.summary{width:auto!important;float:none!important}
.woocommerce div.product .product_title{font-size:clamp(28px,3.6vw,42px)}
.woocommerce div.product p.price{color:var(--resalte);font-size:24px;font-weight:700}
.woocommerce div.product .woocommerce-tabs,.woocommerce div.product .related{grid-column:1/-1}
.woocommerce .quantity .qty{min-height:46px;width:80px;font-size:16px}
.woocommerce table.shop_table{background:var(--tarjeta);color:var(--tarjeta-texto);border-radius:var(--radio-t)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{min-height:46px;padding:10px 12px;border:1.5px solid var(--linea);border-radius:10px;font-size:16px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--acento)!important;background:var(--fondo2)!important;color:var(--texto)!important}
.velas-campos{display:grid;gap:12px;margin:0 0 18px;padding:16px;background:var(--fondo2);border-radius:var(--radio-t)}
.velas-campos .vela{--h:150px;--w:76px;--fs:18px;justify-self:center}
.velas-campos small{color:var(--suave)}

/* ---------- Pie ---------- */
.pie{background:var(--fondo2);margin-top:20px;padding-top:40px}
.dis-b .pie{background:#1f1214;color:#fff}
.dis-b .pie .logo{color:#f2b631}
.pie-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.pie h2{font-size:18px}
.pie-legal{font-size:13px;opacity:.75;padding-block:24px}
.wa-flotante{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:50}

@media (max-width:820px){
  .hero-in,.pers-in,.woocommerce div.product{grid-template-columns:1fr}
  .hero-visual{min-height:240px}
  .taller{grid-template-columns:1fr;justify-items:center}
  .taller-form{width:100%}
  .menu{width:100%;order:3}
}

/* B: la letra gruesa necesita menos tamaño para que el nombre no se parta */
.dis-b .vela .nombre{font-size:calc(var(--fs,16px) * .72);overflow-wrap:break-word;letter-spacing:-.01em}
.woocommerce button.button.alt,.woocommerce a.button.alt,.woocommerce .single_add_to_cart_button,.woocommerce #place_order,.woocommerce .checkout-button{background:var(--acento)!important;color:var(--sobre-acento)!important;border-color:var(--acento)!important;border-radius:var(--radio)!important;min-height:46px}
.sin-foto-grande{border-radius:var(--radio-t)}
.sin-foto-grande .vela{--h:66%;--w:28%}
.woocommerce-product-gallery{opacity:1!important}
.velas-desc-cantidad{display:inline-block;margin:6px 0 14px;padding:8px 14px;border-radius:var(--radio-t);background:var(--fondo2);font-weight:700;color:var(--resalte)}
