/*
Theme Name: Chimino Shop
Theme URI: https://chiminoshop.com
Description: Tema hijo a la medida para Chimino Shop. Bordados, estampados y parches con identidad de nubes, con modo día y modo noche.
Author: Chimino Shop
Template: blocksy
Version: 1.5.0
Text Domain: chimino-shop
*/

/* =========================================================
   1. PALETA — MODO DÍA
   Cambia un valor aquí y cambia en todo el sitio.
   ========================================================= */
:root{
  /* colores de marca */
  --francia:#2F80E4;
  --cielo:#6DA0E1;
  --liberty:#5B61B2;
  --cardo:#DEC1DB;
  --rosa:#F286AF;
  --marino:#22306B;      /* color del texto */
  --platino:#EEE2DF;

  /* superficies y fondos */
  --superficie:#FFFFFF;  /* tarjetas, zona blanca, formularios */
  --cabecera:rgba(255,255,255,.80);
  --borde:#DCE6F5;
  --tenue:#7C86B4;
  --nube:#FFFFFF;        /* las nubes flotantes */
  --pie:#22306B;         /* fondo del pie de página */

  /* degradado del cielo */
  --cielo-1:#DCEBFB;
  --cielo-2:#EAF1FB;
  --cielo-3:#EEE2DF;

  /* velo sobre la imagen de fondo y panel flotante */
  --capsula:rgba(255,255,255,.70);
  --capsula-borde:rgba(47,128,228,.28);
  --velo:rgba(255,255,255,.10);
  --panel:rgba(255,255,255,.92);
  --sombra-panel:0 26px 64px rgba(70,40,110,.26);

  --display:'Fredoka',system-ui,sans-serif;
  --body:'Nunito',system-ui,sans-serif;
}

/* =========================================================
   2. PALETA — MODO NOCHE
   El mismo cielo, pero de noche.
   ========================================================= */
html.chi-noche{
  --francia:#5B9BF0;
  --cielo:#7FB0EC;
  --liberty:#9AA0E6;
  --cardo:#C9A9C6;
  --rosa:#F286AF;
  --marino:#E9EEFC;      /* el texto se vuelve claro */
  --platino:#28325C;

  --superficie:#1B2447;
  --cabecera:rgba(15,21,50,.82);
  --borde:#2E3A66;
  --tenue:#98A4D2;
  --nube:#2B3565;
  --pie:#0D1330;

  --cielo-1:#0D1330;
  --cielo-2:#141C3C;
  --cielo-3:#1A2247;

  --capsula:rgba(40,50,100,.55);
  --capsula-borde:rgba(122,166,236,.38);
  --velo:rgba(9,12,38,.72);
  --panel:rgba(23,30,66,.90);
  --sombra-panel:0 26px 64px rgba(0,0,0,.5);
}

/* =========================================================
   3. FONDO E IMAGEN DE CIELO
   La imagen vive en img/fondo.jpg dentro del tema.
   Para cambiarla, reemplaza ese archivo por otro con el
   mismo nombre (recomendado: 1600 px de ancho o más).
   ========================================================= */
html{ background:var(--cielo-1); }

body{
  font-family:var(--body);
  color:var(--marino);
  background-image:url('img/foto.jpg');
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-color:var(--cielo-1);
  transition:color .3s;
}

/* Velo sobre la imagen: casi invisible de día, oscuro de noche */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  background:var(--velo);
  transition:background .3s;
}
#page, .site, #main-container, .ct-header, .ct-footer{ position:relative; z-index:1; }

h1,h2,h3,h4{ font-family:var(--display); color:var(--marino); letter-spacing:-.01em; }

.site-header{
  background:var(--cabecera);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borde);
}
.sub-menu, .menu li ul{
  background:var(--superficie) !important;
  border-radius:18px !important;
  border:1px solid var(--borde) !important;
  box-shadow:0 16px 34px rgba(8,14,40,.22) !important;
  padding:7px !important;
}
.sub-menu a{ border-radius:12px; font-weight:600; }
.sub-menu a:hover{ background:var(--platino); color:var(--francia); }

.site-footer{ background:var(--pie); color:#fff; }
.site-footer a{ color:#A9B6E0; }
.site-footer a:hover{ color:#fff; }

/* =========================================================
   4. BOTÓN DÍA / NOCHE
   ========================================================= */
.chi-modo{
  position:fixed; left:18px; bottom:18px; z-index:9999;
  display:flex; align-items:center; gap:8px;
  background:var(--superficie); color:var(--marino);
  border:2px solid var(--borde); border-radius:99px;
  padding:9px 16px 9px 12px; cursor:pointer;
  font-family:var(--body); font-size:13.5px; font-weight:800;
  box-shadow:0 8px 22px rgba(8,14,40,.18);
  transition:transform .18s, border-color .18s, background .3s, color .3s;
}
.chi-modo:hover{ transform:translateY(-2px); border-color:var(--francia); }
.chi-modo svg{ width:19px; height:19px; flex-shrink:0; }
.chi-modo .chi-luna{ display:block; }
.chi-modo .chi-sol{ display:none; }
html.chi-noche .chi-modo .chi-luna{ display:none; }
html.chi-noche .chi-modo .chi-sol{ display:block; }

@media (max-width:600px){
  .chi-modo{ left:12px; bottom:12px; padding:9px; }
  .chi-modo .chi-modo-texto{ display:none; }
}

/* =========================================================
   5. CORRECCIONES SOBRE BLOCKSY
   Blocksy pinta fondo blanco en sus contenedores. Los ponemos
   transparentes para que se vea el cielo del tema en los dos
   modos. La cabecera y el pie sí conservan color propio.
   ========================================================= */
html{ background:var(--cielo-1); }

#main-container, #content, .site-content, .site-main,
.ct-container, .ct-container-narrow, .ct-container-full,
[class*="ct-container"], .entry-content, article.page{
  background:transparent !important;
}

#header, .ct-header, #header [data-row], .ct-header [data-row],
#header [data-column], .ct-header [data-column]{
  background:var(--cabecera) !important;
}
.ct-footer, .ct-footer [data-row]{ background:var(--pie) !important; }

/* En tienda, producto, carrito y checkout el contenido también
   flota sobre la imagen, para que el texto siempre se lea. */
body:not(.chi-portada-activa) #main-container{
  background:var(--panel) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  max-width:1240px;
  margin:26px auto 56px !important;
  border-radius:30px;
  border:1px solid var(--borde);
  box-shadow:var(--sombra-panel);
  padding:34px 26px !important;
}
@media (max-width:700px){
  body:not(.chi-portada-activa) #main-container{
    margin:14px 10px 34px !important;
    padding:22px 16px !important;
    border-radius:22px;
  }
}

/* En la portada quitamos márgenes para que el cielo llegue de
   orilla a orilla y no queden franjas entre secciones. */
.chi-portada-activa #main-container,
.chi-portada-activa .entry-content,
.chi-portada-activa [class*="ct-container"]{
  padding:0 !important;
  margin:0 !important;
  max-width:none !important;
  width:100% !important;
}

/* =========================================================
   6. MENÚ ENCAPSULADO CON ICONOS
   El menú se vuelve una cápsula flotante y cada línea lleva
   su propio icono. Los iconos se asignan por la dirección del
   enlace, así que funcionan aunque cambies el texto del menú.
   ========================================================= */

/* --- la cápsula --- */
#header ul.menu,
.ct-header ul.menu,
nav[class*="header-menu"] > ul{
  background:var(--capsula) !important;
  border:2px solid var(--capsula-borde) !important;
  border-radius:99px !important;
  padding:5px !important;
  gap:2px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 22px rgba(70,40,110,.14);
}

/* --- cada opción es una pastilla --- */
#header .menu > li > a,
.ct-header .menu > li > a{
  display:flex !important;
  align-items:center;
  gap:7px;
  border-radius:99px !important;
  padding:8px 15px !important;
  font-family:var(--display);
  font-weight:500;
  font-size:14.5px;
  color:var(--marino) !important;
  transition:background .2s, color .2s;
}
#header .menu > li > a:hover,
.ct-header .menu > li > a:hover,
#header .menu > li.current-menu-item > a,
.ct-header .menu > li.current-menu-item > a{
  background:var(--francia) !important;
  color:#fff !important;
}

/* --- el icono --- */
#header .menu > li > a::before,
.ct-header .menu > li > a::before{
  content:"";
  width:19px; height:19px;
  flex-shrink:0;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}

/* --- iconos por línea --- */
#header .menu > li > a[href*="bordados"]::before,
.ct-header .menu > li > a[href*="bordados"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.4%203.6%209.2%2014.8%27%2F%3E%3Cpath%20d%3D%27M9.2%2014.8%208%2019l4.2-1.2z%27%2F%3E%3Ccircle%20cx%3D%2720.4%27%20cy%3D%273.6%27%20r%3D%271.15%27%2F%3E%3Cpath%20d%3D%27M3.6%2020.4c2.6.2%203.9-1.1%203.9-2.5s-1.5-2.2-2.8-1.6%27%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.4%203.6%209.2%2014.8%27%2F%3E%3Cpath%20d%3D%27M9.2%2014.8%208%2019l4.2-1.2z%27%2F%3E%3Ccircle%20cx%3D%2720.4%27%20cy%3D%273.6%27%20r%3D%271.15%27%2F%3E%3Cpath%20d%3D%27M3.6%2020.4c2.6.2%203.9-1.1%203.9-2.5s-1.5-2.2-2.8-1.6%27%2F%3E%3C%2Fsvg%3E");
}
#header .menu > li > a[href*="estampados"]::before,
.ct-header .menu > li > a[href*="estampados"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.2%27%20y%3D%274.4%27%20width%3D%2717.6%27%20height%3D%2715.2%27%20rx%3D%273.2%27%2F%3E%3Cpath%20d%3D%27M12%208.4l1.35%202.75%203.05.45-2.2%202.15.52%203.02L12%2015.35%209.28%2016.77l.52-3.02-2.2-2.15%203.05-.45z%27%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.2%27%20y%3D%274.4%27%20width%3D%2717.6%27%20height%3D%2715.2%27%20rx%3D%273.2%27%2F%3E%3Cpath%20d%3D%27M12%208.4l1.35%202.75%203.05.45-2.2%202.15.52%203.02L12%2015.35%209.28%2016.77l.52-3.02-2.2-2.15%203.05-.45z%27%2F%3E%3C%2Fsvg%3E");
}
#header .menu > li > a[href*="parches"]::before,
.ct-header .menu > li > a[href*="parches"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.2%27%20stroke-dasharray%3D%272.6%202.8%27%2F%3E%3Cpath%20d%3D%27M12%208.2l1.2%202.45%202.7.4-1.95%201.9.46%202.7L12%2014.9l-2.41%201.27.46-2.7-1.95-1.9%202.7-.4z%27%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.2%27%20stroke-dasharray%3D%272.6%202.8%27%2F%3E%3Cpath%20d%3D%27M12%208.2l1.2%202.45%202.7.4-1.95%201.9.46%202.7L12%2014.9l-2.41%201.27.46-2.7-1.95-1.9%202.7-.4z%27%2F%3E%3C%2Fsvg%3E");
}
#header .menu > li > a[href*="gorras"]::before,
.ct-header .menu > li > a[href*="gorras"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2014.2a7%207%200%200%201%2014%200%27%2F%3E%3Cpath%20d%3D%27M3.6%2014.2h16.9c1.35%200%201.95.7%201.95%201.5s-.8%201.3-2.15%201.1c-4.2-.8-12.2-.8-16.7%200z%27%2F%3E%3Cpath%20d%3D%27M12%207.2v-1.4%27%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2014.2a7%207%200%200%201%2014%200%27%2F%3E%3Cpath%20d%3D%27M3.6%2014.2h16.9c1.35%200%201.95.7%201.95%201.5s-.8%201.3-2.15%201.1c-4.2-.8-12.2-.8-16.7%200z%27%2F%3E%3Cpath%20d%3D%27M12%207.2v-1.4%27%2F%3E%3C%2Fsvg%3E");
}
#header .menu > li > a[href*="personalizados"]::before,
.ct-header .menu > li > a[href*="personalizados"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%2020.4%2013.6%2010.4%27%2F%3E%3Cpath%20d%3D%27M12.4%209.2l2.4%202.4%27%2F%3E%3Cpath%20d%3D%27M17.4%203.2l.85%201.75%201.75.85-1.75.85-.85%201.75-.85-1.75-1.75-.85%201.75-.85z%27%2F%3E%3Cpath%20d%3D%27M20.6%2011.4l.6%201.25%201.25.6-1.25.6-.6%201.25-.6-1.25-1.25-.6%201.25-.6z%27%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%2020.4%2013.6%2010.4%27%2F%3E%3Cpath%20d%3D%27M12.4%209.2l2.4%202.4%27%2F%3E%3Cpath%20d%3D%27M17.4%203.2l.85%201.75%201.75.85-1.75.85-.85%201.75-.85-1.75-1.75-.85%201.75-.85z%27%2F%3E%3Cpath%20d%3D%27M20.6%2011.4l.6%201.25%201.25.6-1.25.6-.6%201.25-.6-1.25-1.25-.6%201.25-.6z%27%2F%3E%3C%2Fsvg%3E");
}
#header .menu > li > a[href*="carrito"]::before,
.ct-header .menu > li > a[href*="carrito"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279.4%27%20cy%3D%2719.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2717.8%27%20cy%3D%2719.6%27%20r%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M2.6%203.4h2.7l2.5%2011.6h11l1.9-8.2H6.6%27%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279.4%27%20cy%3D%2719.6%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2717.8%27%20cy%3D%2719.6%27%20r%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M2.6%203.4h2.7l2.5%2011.6h11l1.9-8.2H6.6%27%2F%3E%3C%2Fsvg%3E");
}

/* --- la flechita del desplegable no lleva icono --- */
#header .menu > li > a .ct-toggle-dropdown-desktop::before,
.ct-header .menu .sub-menu a::before{ display:none !important; }

/* --- en celular la cápsula se relaja --- */
@media (max-width:999px){
  #header ul.menu,
  .ct-header ul.menu,
  nav[class*="header-menu"] > ul{
    border-radius:22px !important;
    padding:8px !important;
  }
  #header .menu > li > a,
  .ct-header .menu > li > a{ justify-content:flex-start; }
}

/* =========================================================
   7. CIELO DE PIXEL ART
   ========================================================= */
.chi-pixel-cielo{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:0;
}
.chi-px-dia{ display:block; }
.chi-px-noche{ display:none; }
html.chi-noche .chi-px-dia{ display:none; }
html.chi-noche .chi-px-noche{ display:block; }

/* --- nubes pixeladas (día) --- */
.chi-nube-px{
  position:absolute; fill:#FFFFFF;
  animation:chi-deriva linear infinite;
}
.chi-npx1{ top:11%; width:132px; opacity:.8;  animation-duration:90s; }
.chi-npx2{ top:31%; width:88px;  opacity:.55; animation-duration:132s; animation-delay:-45s; }
.chi-npx3{ top:57%; width:172px; opacity:.42; animation-duration:168s; animation-delay:-96s; }
@keyframes chi-deriva{ from{ transform:translateX(-30vw);} to{ transform:translateX(130vw);} }

/* --- sol pixelado (día) --- */
.chi-sol-px{
  position:absolute; top:8%; right:6%; width:48px;
  fill:#FFD166; opacity:.85;
  animation:chi-latir 4.5s steps(2,end) infinite;
}
@keyframes chi-latir{ 0%,100%{ opacity:.6; } 50%{ opacity:.95; } }

/* --- estrellas (noche) --- */
.chi-estrella{
  position:absolute; background:#EAF1FF; opacity:.18;
  animation:chi-titila 3.6s steps(2,end) infinite;
}
@keyframes chi-titila{ 0%,100%{ opacity:.15; } 50%{ opacity:1; } }

/* --- luna pixelada (noche) --- */
.chi-luna-px{
  position:absolute; top:7%; right:7%; width:46px;
  fill:#F5F2DA; opacity:.95;
}

/* --- estrella fugaz (noche) --- */
.chi-fugaz{
  position:absolute; top:9%; left:2%;
  width:4px; height:4px; background:#fff; opacity:0;
  box-shadow:-7px 7px 0 0 rgba(255,255,255,.6),
             -14px 14px 0 0 rgba(255,255,255,.32),
             -21px 21px 0 0 rgba(255,255,255,.12);
  animation:chi-fugaz 13s linear infinite;
}
@keyframes chi-fugaz{
  0%{ opacity:0; transform:translate(0,0); }
  2%{ opacity:1; }
  12%{ opacity:0; transform:translate(58vw,30vh); }
  100%{ opacity:0; transform:translate(58vw,30vh); }
}

/* =========================================================
   8. PORTADA
   ========================================================= */
.chi-portada{ position:relative; }

/* --- la nube bajo el gatito sigue siendo suave, para que
       combine con la ilustración de la mascota --- */
.chi-nube-tras path{ fill:var(--nube); transition:fill .3s; }

/* --- hero --- */
.chi-hero{
  position:relative; z-index:1;
  max-width:1160px; margin:0 auto;
  padding:48px 20px 34px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:32px; align-items:center;
}
.chi-hero h1{ font-size:clamp(30px,4.8vw,50px); font-weight:600; line-height:1.05; margin:0 0 14px; }
.chi-hero h1 em{ font-style:normal; color:var(--francia); }
.chi-hero p{ color:var(--liberty); max-width:44ch; margin:0 0 22px; font-weight:500; }

.chi-pastillas{ display:flex; gap:9px; flex-wrap:wrap; }
.chi-pastilla{
  border:2px solid var(--liberty); border-radius:99px;
  padding:10px 20px; font-family:var(--display); font-size:15px; font-weight:500;
  color:var(--liberty); text-decoration:none; transition:.2s;
}
.chi-pastilla:hover{ background:var(--liberty); color:#fff; }
.chi-llena{
  background:var(--francia); border-color:var(--francia); color:#fff;
  box-shadow:0 6px 16px rgba(47,128,228,.28);
}
.chi-llena:hover{ background:var(--liberty); border-color:var(--liberty); color:#fff; }

/* --- mascota --- */
.chi-hero-visual{ position:relative; text-align:center; }
.chi-nube-tras{ position:absolute; left:0; right:0; bottom:22%; width:96%; margin:auto; }
.chi-mascota-caja{ position:relative; }
.chi-mascota{
  position:relative; width:min(320px,86%); height:auto; margin:0 auto; display:block;
  animation:chi-flota 6s ease-in-out infinite;
}
@keyframes chi-flota{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-11px);} }
.chi-chispa{
  position:absolute; width:13px; height:13px; border-radius:99px;
  background:var(--cardo); opacity:.85; animation:chi-brilla 3.4s ease-in-out infinite;
}
.chi-chispa-b{ background:var(--cielo); }
.chi-chispa:nth-child(1){ top:12%; left:8%;  animation-delay:0s; }
.chi-chispa:nth-child(2){ top:26%; right:7%; animation-delay:1.1s; }
.chi-chispa:nth-child(3){ bottom:24%; left:4%; animation-delay:2.2s; }
@keyframes chi-brilla{ 0%,100%{ transform:scale(.6); opacity:.35;} 50%{ transform:scale(1.15); opacity:.9;} }

/* --- círculos de color del hero --- */
.chi-swatches{
  position:relative; z-index:2;
  display:flex; gap:10px; justify-content:center; margin-top:14px;
}
.chi-sw{
  width:32px; height:32px; border-radius:99px; cursor:pointer;
  border:3px solid var(--superficie); padding:0;
  box-shadow:0 2px 8px rgba(8,14,40,.2);
  transition:transform .15s, box-shadow .15s;
}
.chi-sw:hover{ transform:scale(1.1); }
.chi-sw.on{
  transform:scale(1.15);
  box-shadow:0 0 0 3px var(--francia), 0 2px 8px rgba(8,14,40,.2);
}
.chi-pie-hero{
  position:relative; z-index:2;
  margin:9px 0 0; text-align:center;
  color:var(--tenue); font-size:12.5px; font-weight:600;
}
.chi-sin-logo{
  background:var(--superficie); border:2px dashed var(--cardo); border-radius:16px;
  padding:22px 18px; color:var(--tenue); font-weight:600; font-size:13.5px;
  max-width:320px; margin:0 auto; text-align:center; position:relative; z-index:2;
}

/* --- cinta de nube --- */
.chi-cinta{ position:relative; z-index:1; line-height:0; margin-top:-4px; }
.chi-cinta svg{ width:100%; height:56px; display:block; }
.chi-cinta path{ fill:var(--panel); transition:fill .3s; }

/* --- zona de secciones --- */
/* El bloque de contenido flota por encima de la imagen de fondo:
   panel translúcido, esquinas redondeadas y sombra. */
.chi-zona-blanca{
  background:var(--panel);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  position:relative; z-index:1;
  max-width:1240px; margin:0 auto 56px;
  border-radius:0 0 30px 30px;
  border:1px solid var(--borde); border-top:none;
  box-shadow:var(--sombra-panel);
  padding-bottom:56px;
  transition:background .3s;
}
/* La cinta de nube es el borde superior del panel */
.chi-cinta{ max-width:1240px; margin:0 auto -1px; }
@media (max-width:700px){
  .chi-zona-blanca{ margin:0 10px 34px; border-radius:0 0 22px 22px; }
  .chi-cinta{ margin:0 10px -1px; }
}
.chi-cinta svg{ border-radius:30px 30px 0 0; }
.chi-contenedor{ max-width:1160px; margin:0 auto; padding:0 20px; }

.chi-seccion-titulo{ display:flex; align-items:center; gap:11px; margin:38px 0 18px; flex-wrap:wrap; }
.chi-seccion-titulo h2{ font-size:24px; font-weight:600; margin:0; display:flex; align-items:center; gap:10px; }
.chi-sub{ color:var(--tenue); font-size:13px; font-weight:600; }
.chi-icono-nube{
  width:34px; height:22px; display:inline-block; flex-shrink:0;
  border-radius:22px 22px 17px 17px / 19px 19px 15px 15px;
}
.chi-liberty{ background:var(--liberty); }
.chi-rosa{ background:var(--rosa); }
.chi-cielo-c{ background:var(--cielo); }

/* =========================================================
   6. TARJETAS DE PRODUCTO — tu diseño
   ========================================================= */
.chi-fila{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(218px,244px);
  gap:18px; overflow-x:auto; padding:4px 2px 14px;
}
.chi-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(218px,1fr)); gap:18px;
}
.chi-card{
  background:var(--superficie); border:1px solid var(--borde); border-radius:20px;
  box-shadow:0 6px 18px rgba(70,40,110,.10);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .2s, box-shadow .2s, background .3s;
}
.chi-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(8,14,40,.16); }

.chi-card-img{
  position:relative; display:block;
  background:linear-gradient(165deg,var(--cielo-2),var(--platino));
  height:190px; overflow:hidden;
}
.chi-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.chi-card-img::after{
  content:""; position:absolute; bottom:-30px; left:-8%;
  width:116%; height:60px; background:var(--superficie); border-radius:50% 50% 0 0;
  transition:background .3s;
}
.chi-etiquetas{ position:absolute; top:11px; left:11px; display:flex; gap:5px; z-index:2; }
.chi-tag{
  font-size:10px; font-weight:800; letter-spacing:.04em;
  padding:4px 10px; border-radius:99px; color:#fff;
}
.chi-tag-dest{ background:var(--liberty); }
.chi-tag-pop{ background:var(--rosa); }

.chi-card-info{ padding:13px 16px 16px; display:flex; flex-direction:column; gap:7px; flex:1; }
.chi-miga{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--cielo); }
.chi-miga b{ color:var(--rosa); }
.chi-card-titulo{ font-size:15.5px; font-weight:500; margin:0; line-height:1.3; }
.chi-card-titulo a{ color:var(--marino); text-decoration:none; }
.chi-card-titulo a:hover{ color:var(--francia); }
.chi-puntos{ display:flex; gap:5px; }
.chi-punto{ width:15px; height:15px; border-radius:99px; border:1.5px solid var(--superficie); box-shadow:0 0 0 1px var(--borde); }
.chi-card-pie{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:4px; gap:8px; }
.chi-precio{ font-family:var(--display); font-weight:600; font-size:15px; color:var(--marino); }
.chi-precio del{ opacity:.45; font-size:13px; }
.chi-precio ins{ text-decoration:none; }
.chi-ver{
  background:var(--platino); color:var(--marino); font-size:13px; font-weight:800;
  padding:8px 15px; border-radius:99px; text-decoration:none; white-space:nowrap;
}
.chi-ver:hover{ background:var(--francia); color:#fff; }
.chi-vacio{ color:var(--tenue); font-weight:600; padding:30px 0; text-align:center; }

/* =========================================================
   7. CATÁLOGO Y FICHA DE PRODUCTO
   ========================================================= */
.page-title, [class*="hero-section"]{
  background:linear-gradient(180deg,var(--cielo-1),var(--cielo-2)) !important;
}
.page-title h1, [class*="hero-section"] h1{ color:var(--marino) !important; }

.button, input[type="submit"], .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button,
.woocommerce .single_add_to_cart_button{
  background:var(--francia) !important; color:#fff !important; border:none !important;
  border-radius:99px !important; font-family:var(--display) !important; font-weight:600 !important;
  padding:12px 26px !important; box-shadow:0 6px 16px rgba(47,128,228,.28);
}
.button:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover{ background:var(--liberty) !important; }

.woocommerce .single_add_to_cart_button.disabled,
.woocommerce button.button:disabled{
  background:var(--cielo) !important; box-shadow:none; cursor:not-allowed;
}

.woocommerce ul.products li.product{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:20px; overflow:visible; padding:0 0 18px; text-align:center;
}
.woocommerce ul.products li.product img{ border-radius:20px 20px 0 0 !important; margin-bottom:14px !important; }
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:16px !important; color:var(--marino) !important; padding:0 16px; margin:0 0 6px !important;
}
.woocommerce ul.products li.product .price{
  font-family:var(--display); font-weight:600; color:var(--marino) !important;
  display:block; padding:0 16px; margin-bottom:12px !important;
}
.woocommerce ul.products li.product .button{ margin:0 16px !important; padding:10px 20px !important; font-size:14px !important; }

.woocommerce div.product .product_title{ font-size:30px; }
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color:var(--francia) !important; font-family:var(--display); font-weight:600; font-size:26px;
}
.woocommerce div.product form.cart .variations label{
  font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--tenue);
}
.woocommerce div.product form.cart .variations select{
  border:2px solid var(--borde) !important; border-radius:13px !important;
  padding:11px 38px 11px 15px !important; background-color:var(--superficie) !important;
  color:var(--marino) !important; font-weight:600 !important; font-size:15px !important;
  line-height:1.6 !important; min-height:50px !important; height:auto !important; width:100%;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236DA0E1' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
.woocommerce div.product form.cart .variations select:focus{ border-color:var(--francia) !important; outline:none; }
.woocommerce .quantity .qty{
  border:2px solid var(--borde); border-radius:13px; padding:10px;
  background:var(--superficie); color:var(--marino); font-weight:700;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  border:2px solid var(--borde) !important; border-radius:13px !important;
  padding:11px 14px !important; background:var(--superficie) !important; color:var(--marino) !important;
  font-weight:600; line-height:1.6 !important; min-height:48px;
}
.woocommerce-checkout #payment{ background:var(--superficie); border:1px solid var(--borde); border-radius:22px; }
.woocommerce-info, .woocommerce-message{
  border-top-color:var(--francia) !important; background:var(--superficie); border-radius:16px;
}

/* =========================================================
   8. ACCESIBILIDAD Y CELULAR
   ========================================================= */
a:focus-visible, button:focus-visible{ outline:3px solid var(--francia); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

@media (max-width:900px){
  .chi-hero{ grid-template-columns:1fr; text-align:center; padding-top:30px; }
  .chi-hero p{ margin-left:auto; margin-right:auto; }
  .chi-pastillas{ justify-content:center; }
  .woocommerce div.product .product_title{ font-size:24px; }
}