/*
Theme Name: Victory Creations
Theme URI: https://victorycreations.es
Description: Tema WooCommerce a medida para Victory Creations — kits de cumpleaños personalizados y educativos sin pantallas. Reconstruido a partir del diseño de Claude Design.
Author: Victory Creations
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
WC requires at least: 8.0
WC tested up to: 9.5
Text Domain: victory-creations
License: GPL-2.0-or-later
Tags: ecommerce, woocommerce, custom-colors, custom-menu, custom-logo, e-commerce
*/

/* =========================================================================
   1. DESIGN TOKENS — paletas y tipografías (del diseño Claude Design)
   :root usa terracota+editorial como valores por defecto; los bloques
   [data-palette] / [data-typeset] permiten cambiar desde el Personalizador.
   ========================================================================= */
:root{
  --bg:#FBF6EE;--surface:#FFFFFF;--ink:#2C2722;--muted:#857A6D;--accent:#C2613A;
  --accent-ink:#FFF7EF;--accent2:#7E8E5B;--accent3:#E2A33E;--soft:#F4E8D7;--soft2:#EAEEDD;--border:#ECDFCC;
  --font-display:'Playfair Display',Georgia,serif;--font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-script:'Pinyon Script','Brush Script MT',cursive;--wd:600;--wn:400;
}
[data-palette="terracota"]{--bg:#FBF6EE;--surface:#FFFFFF;--ink:#2C2722;--muted:#857A6D;--accent:#C2613A;--accent-ink:#FFF7EF;--accent2:#7E8E5B;--accent3:#E2A33E;--soft:#F4E8D7;--soft2:#EAEEDD;--border:#ECDFCC}
[data-palette="pastel"]{--bg:#FBF4F2;--surface:#FFFFFF;--ink:#3A3340;--muted:#8E8693;--accent:#E07A66;--accent-ink:#FFF6F3;--accent2:#3FA98F;--accent3:#B49BD8;--soft:#F7E8E3;--soft2:#E3F1EC;--border:#EFE2DE}
[data-palette="vivo"]{--bg:#FCF6EC;--surface:#FFFFFF;--ink:#241F1D;--muted:#7C7268;--accent:#EE5D52;--accent-ink:#FFF5F1;--accent2:#1FA39A;--accent3:#F2B23D;--soft:#FBE6D7;--soft2:#DCF1EE;--border:#EDE0CE}
[data-palette="bosque"]{--bg:#F7F6EF;--surface:#FFFFFF;--ink:#26302A;--muted:#74807A;--accent:#3E7C5A;--accent-ink:#F2F8F4;--accent2:#C2613A;--accent3:#D9A441;--soft:#E4EEE5;--soft2:#F0E7D7;--border:#DDE6DC}
[data-palette="nordico"]{--bg:#F5F6F7;--surface:#FFFFFF;--ink:#2B3038;--muted:#7C828B;--accent:#5B7FA6;--accent-ink:#F4F8FC;--accent2:#8E9E80;--accent3:#C98A6B;--soft:#E6EBF0;--soft2:#ECEDE6;--border:#E1E4E8}
[data-palette="caramelo"]{--bg:#FBF5EC;--surface:#FFFFFF;--ink:#33291F;--muted:#897C6C;--accent:#D2842F;--accent-ink:#FFF8EF;--accent2:#3E8C84;--accent3:#C96B8E;--soft:#F6E7CF;--soft2:#DDEFEC;--border:#EBDFCB}
[data-palette="arandano"]{--bg:#F6F5FA;--surface:#FFFFFF;--ink:#272338;--muted:#7E7A90;--accent:#5B53B0;--accent-ink:#F5F4FC;--accent2:#E0814E;--accent3:#46A39A;--soft:#E7E5F3;--soft2:#FBE9D9;--border:#E3E0EC}
[data-palette="chicle"]{--bg:#FCF4F4;--surface:#FFFFFF;--ink:#3A2730;--muted:#917A82;--accent:#D2496F;--accent-ink:#FFF5F8;--accent2:#3FA0A6;--accent3:#E0A52F;--soft:#FAE3E9;--soft2:#DCF0F0;--border:#F0E0E3}

[data-typeset="editorial"]{--font-display:'Playfair Display',Georgia,serif;--font-body:'Hanken Grotesk',system-ui,sans-serif;--font-script:'Pinyon Script','Brush Script MT',cursive;--wd:600;--wn:400}
[data-typeset="boutique"]{--font-display:'Cormorant Garamond',Georgia,serif;--font-body:'Mulish',system-ui,sans-serif;--font-script:'Pinyon Script','Brush Script MT',cursive;--wd:600;--wn:400}
[data-typeset="sereno"]{--font-display:'Marcellus',Georgia,serif;--font-body:'Jost',system-ui,sans-serif;--font-script:'Pinyon Script','Brush Script MT',cursive;--wd:400;--wn:400}
[data-typeset="comercial"]{--font-display:'Hanken Grotesk',system-ui,sans-serif;--font-body:'Hanken Grotesk',system-ui,sans-serif;--font-script:'Hanken Grotesk',system-ui,sans-serif;--wd:800;--wn:800}
[data-typeset="moderno"]{--font-display:'Bricolage Grotesque',system-ui,sans-serif;--font-body:'Hanken Grotesk',system-ui,sans-serif;--font-script:'Bricolage Grotesque',system-ui,sans-serif;--wd:700;--wn:700}
[data-typeset="geometrico"]{--font-display:'Outfit',system-ui,sans-serif;--font-body:'Outfit',system-ui,sans-serif;--font-script:'Outfit',system-ui,sans-serif;--wd:700;--wn:600}
[data-typeset="manrope"]{--font-display:'Manrope',system-ui,sans-serif;--font-body:'Manrope',system-ui,sans-serif;--font-script:'Manrope',system-ui,sans-serif;--wd:600;--wn:600}
[data-typeset="onest"]{--font-display:'Onest',system-ui,sans-serif;--font-body:'Onest',system-ui,sans-serif;--font-script:'Onest',system-ui,sans-serif;--wd:600;--wn:600}
[data-typeset="bevietnam"]{--font-display:'Be Vietnam Pro',system-ui,sans-serif;--font-body:'Be Vietnam Pro',system-ui,sans-serif;--font-script:'Be Vietnam Pro',system-ui,sans-serif;--wd:600;--wn:600}
[data-typeset="familjen"]{--font-display:'Familjen Grotesk',system-ui,sans-serif;--font-body:'Hanken Grotesk',system-ui,sans-serif;--font-script:'Familjen Grotesk',system-ui,sans-serif;--wd:600;--wn:600}
[data-typeset="original"]{--font-display:'DM Serif Display',Georgia,serif;--font-body:'Plus Jakarta Sans',system-ui,sans-serif;--font-script:'Caveat',cursive;--wd:400;--wn:400}

/* =========================================================================
   2. BASE
   ========================================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--accent3);color:var(--ink)}
img{max-width:100%;height:auto}
a{color:inherit}
.vc-hero-title em{color:var(--accent);font-style:italic}

/* =========================================================================
   3. ANIMACIONES (del diseño)
   ========================================================================= */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}
@keyframes spin3d{from{transform:rotateX(-15deg) rotateY(0deg)}to{transform:rotateX(-15deg) rotateY(360deg)}}
@keyframes revealUp{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes wipeBlank{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
@keyframes drift{from{transform:translateY(36px)}to{transform:translateY(-36px)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}}

/* Scroll-driven reveals: solo si el navegador soporta animation-timeline */
.vc-reveal{opacity:0;transform:translateY(46px)}
@supports (animation-timeline: view()){
  .vc-reveal{opacity:1;transform:none;animation-name:revealUp;animation-duration:.9s;animation-timing-function:cubic-bezier(.2,.75,.25,1);animation-fill-mode:both;animation-timeline:view();animation-range:entry 0% cover 36%}
}
/* Fallback: si no hay animation-timeline, JS pone .vc-in para revelar */
@supports not (animation-timeline: view()){
  .vc-reveal.vc-in{opacity:1;transform:none;transition:opacity .7s ease, transform .7s cubic-bezier(.2,.75,.25,1)}
}

/* =========================================================================
   4. CABECERA RESPONSIVE (nav móvil)
   ========================================================================= */
.vc-nav-toggle{display:none}
@media (max-width:860px){
  .vc-nav-toggle{
    display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    background:transparent;border:1px solid var(--border);border-radius:999px;cursor:pointer;color:var(--ink)
  }
  .vc-nav{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch !important;
    gap:0 !important;margin:0 !important;background:var(--bg);border-bottom:1px solid var(--border);
    padding:8px 24px 16px;display:none
  }
  .vc-header.vc-nav-open .vc-nav{display:flex}
  .vc-nav a{padding:12px 0;border-top:1px solid var(--border)}
  .vc-header-cta{display:none !important}
}

/* =========================================================================
   5. AJUSTES BÁSICOS WOOCOMMERCE (afinado en fases posteriores)
   ========================================================================= */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt{
  background:var(--accent);color:var(--accent-ink);border-radius:999px;font-weight:800;
  padding:12px 22px;border:none;font-family:inherit
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover{
  background:color-mix(in srgb,var(--accent) 88%,#000);color:var(--accent-ink)
}
.woocommerce-message, .woocommerce-info, .woocommerce-error{border-top-color:var(--accent)}
.woocommerce .star-rating span{color:var(--accent3)}

/* Utilidad de contenedor */
.vc-wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* =========================================================================
   6. CONFIGURADOR DE PRODUCTO (estados con :has → funciona sin JS)
   ========================================================================= */
.vc-cfg-input{width:100%;border:1.5px solid var(--border);border-radius:13px;padding:13px 15px;font-size:17px;font-weight:600;font-family:inherit;color:var(--ink);background:var(--bg);outline:none}
.vc-cfg-input::placeholder{color:var(--muted);font-weight:500}
.vc-cfg-input:focus{border-color:var(--accent)}

.vc-world{position:relative;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;border-radius:999px;padding:7px 12px;transition:all .15s;border:1.5px solid var(--border);background:var(--surface);color:var(--muted)}
.vc-world input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.vc-world:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#fff);color:var(--ink);box-shadow:0 0 0 1px var(--accent)}
.vc-world:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.vc-world-dot{width:11px;height:11px;border-radius:50%;display:inline-block}

.vc-addon{position:relative;display:flex;align-items:center;gap:13px;width:100%;cursor:pointer;font-family:inherit;text-align:left;border-radius:14px;padding:13px 15px;transition:all .15s;border:1.5px solid var(--border);background:var(--surface)}
.vc-addon input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.vc-addon:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,#fff)}
.vc-addon:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.vc-addon-box{flex:0 0 auto;width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff;background:transparent;border:1.5px solid var(--border);transition:all .15s}
.vc-addon-box::after{content:'✓';opacity:0;transition:opacity .12s}
.vc-addon:has(input:checked) .vc-addon-box{background:var(--accent);border-color:var(--accent)}
.vc-addon:has(input:checked) .vc-addon-box::after{opacity:1}

.vc-qty{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:999px;overflow:hidden;background:var(--surface)}
.vc-qty button{width:46px;height:50px;border:none;background:transparent;font-size:22px;cursor:pointer;color:var(--ink);font-family:inherit}
.vc-qty input{width:44px;height:50px;text-align:center;border:none;background:transparent;font-weight:800;font-size:17px;color:var(--ink);-moz-appearance:textfield;font-family:inherit}
.vc-qty input::-webkit-outer-spin-button,.vc-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Acordeón FAQ nativo */
.vc-faq{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.vc-faq>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;cursor:pointer;font-weight:700;font-size:16.5px;color:var(--ink)}
.vc-faq>summary::-webkit-details-marker{display:none}
.vc-faq>summary::after{content:'+';font-size:22px;color:var(--accent);font-weight:400;flex:0 0 auto}
.vc-faq[open]>summary::after{content:'−'}
.vc-faq .vc-faq-a{padding:0 20px 20px;color:var(--muted);font-size:15.5px;line-height:1.6}