/** Shopify CDN: Minification failed

Line 251:1 Unexpected "}"

**/

@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("//cucucuentos.com/cdn/shop/t/11/assets/albert-sans-latin-ext.woff2?v=166811929065035443121787787280") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20C0; }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("//cucucuentos.com/cdn/shop/t/11/assets/albert-sans-latin.woff2?v=73334353097926380681787787280") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'DM Serif Display'; font-style: italic; font-weight: 400; font-display: swap; src: url("//cucucuentos.com/cdn/shop/t/11/assets/dm-serif-italic-ext.woff2?v=59717795887007260831787787280") format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF; }
@font-face { font-family: 'DM Serif Display'; font-style: italic; font-weight: 400; font-display: swap; src: url("//cucucuentos.com/cdn/shop/t/11/assets/dm-serif-italic.woff2?v=46088841900813787241787787280") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url("//cucucuentos.com/cdn/shop/t/11/assets/dm-serif-ext.woff2?v=83413781707175207101787787280") format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF; }
@font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url("//cucucuentos.com/cdn/shop/t/11/assets/dm-serif.woff2?v=8410575023853683831787787280") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }

/* Marca Cucucuentos 2026: DM Serif Display en titulares, Albert Sans en el resto */
:root, html body {
  --font-primary--family: 'DM Serif Display', Georgia, serif;
  --font-heading--family: 'DM Serif Display', Georgia, serif;
  --font-heading--weight: 400;
  --font-heading--style: normal;
  --font-body--family: 'Albert Sans', system-ui, sans-serif;
  --font-paragraph--family: 'Albert Sans', system-ui, sans-serif;
  --font-subheading--family: 'Albert Sans', system-ui, sans-serif;
  --font-subheading--weight: 600;
  --font-accent--family: 'Albert Sans', system-ui, sans-serif;
  --font-accent--weight: 700;
  --button-text-case-primary: none;
  --button-text-case-secondary: none;
  --cucu-green: #47836B;
  --cucu-green-dark: #35634F;
}
/* Presets de titular en bloques de texto: sin mayusculas heredadas */
.text-block.h1 p, .text-block.h2 p, .text-block.h3 p, .text-block.h4 p { text-transform: none !important; font-family: 'DM Serif Display', Georgia, serif !important; font-weight: 400 !important; }
body { font-family: 'Albert Sans', system-ui, sans-serif; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
}
/* Nada de mayusculas forzadas en tarjetas de producto ni busqueda */
.product-card *, predictive-search * { text-transform: none !important; }
/* Coleccion: tarjetas centradas y contenidas (con 1 producto no queda huerfana) */
@media (min-width: 750px) {
  .main-collection-grid ul.product-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
  .main-collection-grid .product-grid__item { width: min(340px, 100%); }
}
/* Todos los botones .button del theme en verde de marca, salvo controles de galeria/zoom */
.button:not(media-gallery *):not(zoom-dialog *):not(slideshow-component *):not(.button-unstyled),
button[name="add"], .add-to-cart-button, .cucu-btn {
  background: var(--cucu-green) !important;
  color: #fff !important;
  border-radius: 999px !important;
  text-transform: none !important;
  font-family: 'Albert Sans', system-ui, sans-serif !important;
  font-weight: 800 !important;
  border: none !important;
}
.button:not(media-gallery *):not(zoom-dialog *):not(slideshow-component *):not(.button-unstyled):hover,
button[name="add"]:hover, .add-to-cart-button:hover, .cucu-btn:hover { background: var(--cucu-green-dark) !important; color: #fff !important; }
/* CTA de compra: degradado verde de marca, visible de un vistazo (Ras, 06-09: el
   de antes, ampliado al 220 %, se veia como un verde liso y no se distinguia de
   los botones sencillos). En movil la animacion se apaga y queda el degradado quieto. */
/* Especificidad a proposito: la regla generica de arriba (.button:not(...)) pesa (0,2,3)
   y pisaba este degradado; con tres clases (0,3,0) gana esta. */
.cucu-btn.cucu-btn.cucu-btn, button.button[name="add"], .button.add-to-cart-button.button {
  background: linear-gradient(115deg, #8ED1AB 0%, #5AA383 28%, #3A6F58 62%, #24493A 100%) !important;
  background-size: 150% 150% !important;
  animation: cucu-gx-shift 7s ease-in-out infinite;
  box-shadow: 0 10px 24px -12px rgba(53, 99, 79, .55);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cucu-btn.cucu-btn.cucu-btn:hover, button.button[name="add"]:hover, .button.add-to-cart-button.button:hover {
  background: linear-gradient(115deg, #8ED1AB 0%, #5AA383 28%, #3A6F58 62%, #24493A 100%) !important;
  filter: brightness(.96);
  transform: scale(1.02);
  box-shadow: 0 0 1.4em .2em rgba(71, 131, 107, .28), 0 12px 26px -12px rgba(53, 99, 79, .6);
}
/* enlaces y acentos coherentes */
.product-details a { color: var(--cucu-green); }

/* Galeria de producto contenida y redondeada */
.product-media-container--image, .product-media-container--image .product-media { border-radius: 22px; overflow: hidden; }
/* En escritorio: conjunto centrado; el mosaico acompana el scroll */
@media (min-width: 990px) {
  .product-information__grid { max-width: 1280px; margin-inline: auto; }
  /* La imagen seleccionada manda: mas ancho para la galeria que para la columna de compra.
     Mismo patron de 4 tracks de Horizon (margen, media, detalles, margen), solo cambia el reparto. */
  .product-information__grid--half.product-information--media-left,
  .product-information__grid--half.product-information--media-left:has(.media-gallery--extend) {
    grid-template-columns:
      var(--full-page-grid-margin)
      calc(var(--full-page-grid-central-column-width) * 0.58)
      calc(var(--full-page-grid-central-column-width) * 0.42)
      var(--full-page-grid-margin) !important;
  }
  .product-information__media media-gallery { display: block; position: sticky; top: 88px; }
}
/* El dialogo de zoom queda fuera de la contencion de la galeria */
zoom-dialog slideshow-component,
zoom-dialog .product-media-container--image { max-width: none !important; margin: 0 !important; }
zoom-dialog .product-media-container--image,
zoom-dialog .product-media-container--image .product-media,
zoom-dialog .product-media { border-radius: 0 !important; }

/* ── Pagina de producto: jerarquia compacta ── */
.product-details h1 { font-size: clamp(28px, 2.6vw, 38px) !important; line-height: 1.12 !important; }
.product-details product-price .price { font-family: 'Albert Sans', system-ui, sans-serif; font-size: 20px; font-weight: 700; color: #111; }
.product-details rte-formatter { font-family: 'Albert Sans', system-ui, sans-serif; }
.product-details rte-formatter p { font-size: 15px; line-height: 1.55; color: #4A4A4A; margin: 0 0 8px; }
.product-details rte-formatter strong { color: #111; font-weight: 700; }
.product-details rte-formatter p:has(> strong:only-child) { margin: 10px 0 2px; font-size: 16px; }
.product-details rte-formatter ul { list-style: none; padding: 0; margin: 0 0 6px; display: flex; flex-direction: column; gap: 7px; }
.product-details rte-formatter li { position: relative; padding-left: 27px; font-size: 15px; line-height: 1.5; color: #4A4A4A; }
.product-details rte-formatter li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background-color: #EAF3EE; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4L3.8 6.8L9 1' stroke='%2347836B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.product-details rte-formatter > p:last-child { font-size: 14px; color: #55605B; background: #FAF7F2; padding: 12px 15px; border-radius: 14px; margin: 6px 0 0; }
.product-details rte-formatter > p:last-child strong { color: #224446; }

/* ── Boton "galaxy" de marca (CTA principal) ── */
.cucu-btn-galaxy {
  --gx-bg: linear-gradient(115deg, #7CC49C 0%, #4A8A70 26%, #2F5D48 52%, #24493A 74%, #47836B 100%);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; overflow: hidden; isolation: isolate;
  background: var(--gx-bg); background-size: 220% 220%;
  color: #fff !important; text-decoration: none;
  font-family: 'Albert Sans', system-ui, sans-serif; font-weight: 800; text-transform: none;
  border: none; cursor: pointer; white-space: nowrap; text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease;
  box-shadow: 0 10px 24px -12px rgba(53, 99, 79, .55);
  animation: cucu-gx-shift 7s ease-in-out infinite;
}
.cucu-gx-backdrop { background-size: 220% 220%; animation: cucu-gx-shift 7s ease-in-out infinite; }
@keyframes cucu-gx-shift { 0%, 100% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } }
/* Variante clara (header): blanco en reposo, verde al pasar; sin borde animado */
.cucu-btn-galaxy--light { --gx-bg: #fff; color: #35634F !important; box-shadow: 0 6px 16px -10px rgba(17, 17, 17, .3), 0 0 0 1.5px rgba(71, 131, 107, .22); }
.cucu-btn-galaxy--light .cucu-gx-spark { display: none; }
.cucu-btn-galaxy--light .cucu-gx-star { animation: none; opacity: 0; }
.cucu-btn-galaxy--light:hover .cucu-gx-star { animation: cucu-gx-twinkle var(--tw, 3s) ease-in-out var(--td, 0s) infinite; }
.cucu-btn-galaxy--light .cucu-gx-backdrop::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, #7CC49C 0%, #4A8A70 26%, #2F5D48 52%, #24493A 74%, #47836B 100%); background-size: 220% 220%; animation: cucu-gx-shift 7s ease-in-out infinite; opacity: 0; transition: opacity .25s ease; }
.cucu-btn-galaxy--light:hover { --gx-bg: linear-gradient(115deg, #7CC49C 0%, #4A8A70 26%, #2F5D48 52%, #24493A 74%, #47836B 100%); color: #fff !important; box-shadow: 0 0 1.6em .25em rgba(71, 131, 107, .32), 0 12px 28px -12px rgba(53, 99, 79, .6); }
.cucu-btn-galaxy--light:hover .cucu-gx-backdrop::before { opacity: 1; }
.cucu-btn-galaxy--light:hover .cucu-gx-spark::before { background: conic-gradient(from 0deg, transparent 0 340deg, #FBE7C4 360deg); }
.cucu-btn-galaxy--light:hover .cucu-gx-star { background: #fff; }
.cucu-btn-galaxy:hover { transform: scale(1.045); color: #fff; box-shadow: 0 0 1.6em .25em rgba(71, 131, 107, .32), 0 12px 28px -12px rgba(53, 99, 79, .6); }
.cucu-btn-galaxy:active { transform: scale(1); }
.cucu-gx-spark { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 0; -webkit-mask: linear-gradient(white, transparent 50%); mask: linear-gradient(white, transparent 50%); animation: cucu-gx-flip 3.6s infinite steps(2, end); }
.cucu-gx-spark::before { content: ""; position: absolute; width: 220%; aspect-ratio: 1; top: 0; left: 50%; translate: -50% -15%; transform: rotate(-90deg); opacity: .65; background: conic-gradient(from 0deg, transparent 0 340deg, #FBE7C4 360deg); animation: cucu-gx-rotate 1.8s linear infinite both; transition: opacity .25s ease; }
.cucu-btn-galaxy:hover .cucu-gx-spark::before { opacity: 1; }
.cucu-gx-backdrop { position: absolute; inset: 2px; border-radius: inherit; background: var(--gx-bg); z-index: 0; }
.cucu-gx-backdrop::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .3s ease; background: radial-gradient(130% 130% at 112% 112%, rgba(251, 231, 196, .5) 22%, rgba(251, 231, 196, 0) 58%); }
.cucu-btn-galaxy:hover .cucu-gx-backdrop::after { opacity: 1; }
.cucu-gx-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; z-index: 1; opacity: 0; pointer-events: none; animation: cucu-gx-twinkle var(--tw, 3s) ease-in-out var(--td, 0s) infinite; }
.cucu-gx-s1 { left: 16%; top: 32%; --tw: 2.6s; --td: .2s; }
.cucu-gx-s2 { left: 36%; top: 66%; width: 2px; height: 2px; --tw: 3.4s; --td: 1.1s; }
.cucu-gx-s3 { left: 68%; top: 24%; width: 2px; height: 2px; --tw: 3s; --td: .6s; }
.cucu-gx-s4 { left: 86%; top: 58%; --tw: 2.3s; --td: 1.6s; }
.cucu-gx-text { position: relative; z-index: 2; }
@keyframes cucu-gx-rotate { to { transform: rotate(90deg); } }
@keyframes cucu-gx-flip { to { rotate: 360deg; } }
@keyframes cucu-gx-twinkle { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: .95; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .cucu-gx-spark, .cucu-gx-spark::before, .cucu-gx-star { animation: none; }
  .cucu-gx-spark::before { opacity: 0; }
}
/* Movil: los botones animan background-position y un conic-gradient girando. Eso no
   lo resuelve el compositor: es repintado de CPU en cada fotograma, en TODOS los
   botones de la pagina y tambien fuera de pantalla. En un iPhone se traduce en scroll
   a tirones y secciones que tardan en aparecer. El degradado se ve igual, quieto. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .cucu-btn-galaxy, .cucu-gx-backdrop, .cucu-btn-galaxy--light .cucu-gx-backdrop::before,
  .cl-btn, #shopify-pc__banner__btn-accept { animation: none !important; }
  .cucu-gx-spark, .cucu-gx-star { display: none !important; }
}

/* ── Landings SEO (paginas cuento-*): boton y chips coherentes con la marca ── */
.cl-btn {
  background: linear-gradient(115deg, #7CC49C 0%, #4A8A70 26%, #2F5D48 52%, #24493A 74%, #47836B 100%) !important;
  background-size: 220% 220% !important;
  animation: cucu-gx-shift 7s ease-in-out infinite;
  border-radius: 999px !important;
  font-family: 'Albert Sans', system-ui, sans-serif !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px -12px rgba(53, 99, 79, .55);
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.cl-btn:hover { transform: scale(1.045); box-shadow: 0 0 1.6em .25em rgba(71, 131, 107, .32), 0 12px 28px -12px rgba(53, 99, 79, .6); }
.cl-chips { margin-top: 26px; }

/* Footer con aire respecto a la seccion anterior */
.shopify-section-group-footer-group .section { padding-top: 34px !important; padding-bottom: 8px !important; }


/* ---- Landings SEO (plantilla cl2: situaciones y gustos) ---- */
.cl2{font-family:'Albert Sans',system-ui,sans-serif;color:#111;line-height:1.55;margin-top:-56px}
.cl2 *{box-sizing:border-box}
.cl2-wrap{max-width:1020px;margin:0 auto;padding:0 20px 56px}
.cl2-hero{text-align:center;padding:4px 0 22px}
.cl2-eyebrow{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#C77F1A;background:#FDF3E3;border-radius:999px;padding:8px 16px;margin-bottom:14px}
.cl2 h1{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(30px,4.6vw,46px);line-height:1.1;margin:0 0 14px;text-transform:none}
.cl2-sub{font-size:17.5px;color:#4A4A4A;max-width:36em;margin:0 auto 22px}
.cl2-btn{display:inline-block;background:linear-gradient(115deg,#7CC49C 0%,#4A8A70 26%,#2F5D48 52%,#24493A 74%,#47836B 100%);background-size:220% 220%;color:#fff !important;padding:16px 36px;border-radius:999px;font-weight:800;font-size:17px;text-decoration:none;box-shadow:0 10px 24px -12px rgba(53,99,79,.55);transition:transform .25s ease,box-shadow .25s ease;animation:cl2shift 7s ease-in-out infinite}
.cl2-btn:hover{transform:scale(1.045);box-shadow:0 0 1.6em .25em rgba(71,131,107,.32)}
@keyframes cl2shift{0%,100%{background-position:0% 40%}50%{background-position:100% 60%}}
.cl2-trust{font-size:13.5px;color:#6E6E73;margin-top:12px}
.cl2-trust strong{color:#C77F1A}
.cl2-others{display:flex;gap:8px;align-items:center;overflow-x:auto;padding:12px 2px;margin:4px 0 30px;border-top:1px solid rgba(17,17,17,.07);border-bottom:1px solid rgba(17,17,17,.07);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cl2-others::-webkit-scrollbar{display:none}
.cl2-others .cl2-otag{font-size:13px;font-weight:700;color:#6E6E73;flex-shrink:0;margin-right:2px}
.cl2-others a{flex-shrink:0;font-size:13.5px;font-weight:700;color:#C77F1A;background:#fff;border:1.5px solid rgba(199,127,26,.4);border-radius:999px;padding:8px 14px;text-decoration:none;white-space:nowrap;transition:background .2s ease}
.cl2-others a:hover{background:#FDF3E3}
.cl2-split{display:grid;grid-template-columns:0.75fr 1.25fr;gap:34px;align-items:center;margin:0 0 44px}
@media(max-width:760px){.cl2-split{grid-template-columns:1fr}}
.cl2-video{border-radius:20px;overflow:hidden;background:#111;max-width:300px;margin:0 auto;border:1px solid rgba(17,17,17,.08)}
.cl2-video video{width:100%;height:auto;display:block}
.cl2 h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(24px,3vw,30px);margin:0 0 12px;text-transform:none}
.cl2-split p{font-size:16px;color:#4A4A4A;margin:0 0 14px}
.cl2-check{list-style:none;padding:0;margin:0}
.cl2-check li{padding-left:28px;position:relative;margin-bottom:10px;font-size:15.5px;color:#4A4A4A}
.cl2-check li:before{content:'';position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background-color:#EAF3EE;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4L3.8 6.8L9 1' stroke='%2347836B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.cl2-check strong{color:#111}
.cl2-h2c{text-align:center;margin-bottom:20px !important}
.cl2-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:0 0 44px}
.cl2-step{background:#FAF7F2;border:1px solid rgba(17,17,17,.07);border-radius:18px;padding:24px 22px}
.cl2-step .n{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#6FA98B,#3E7560);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:12px}
.cl2-step h3{font-size:17px;font-weight:800;margin:0 0 6px;font-family:'Albert Sans',system-ui,sans-serif}
.cl2-step p{font-size:14.5px;color:#5C6B69;margin:0}
.cl2-review{background:#fff;border:1px solid #E3E3E0;border-radius:16px;padding:22px 24px;max-width:640px;margin:0 auto 36px}
.cl2-review .cl2-stars{color:#FBBC04;font-size:14px;letter-spacing:1px}
.cl2-review p{font-size:15px;line-height:1.65;color:#3C4043;margin:8px 0 10px}
.cl2-review .cl2-who{font-size:13px;color:#70757A;font-weight:600}
.cl2-cta-end{text-align:center;padding-bottom:8px}

/* Banner de ilustración en landings cl2 */
.cl2-heroimg{border-radius:20px;overflow:hidden;margin:8px 0 26px;border:1px solid rgba(17,17,17,.08)}
.cl2-heroimg img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
@media(max-width:760px){.cl2-heroimg img{aspect-ratio:16/10}}

/* Producto personalizado: sin compra rapida desde tarjetas.
   El quick-add anadia al carrito sin nombre/foto/opciones; se obliga a pasar por la pagina de producto. */
quick-add-component, #quick-add-dialog { display: none !important; }

/* El visor de imagenes del producto (#cucu-visor) vive en un stacking context z:1;
   al abrirse, el header (z:50) lo tapaba: se baja el header mientras este abierto. */
body:has(#cucu-visor.is-open) #cucu-topbar { z-index: 0 !important; }

/* PDP escritorio: el contenido iba a todo el ancho de pantalla y quedaba disperso */
.product-information { max-width: 1120px; margin-inline: auto; margin-bottom: clamp(36px, 5vw, 64px); }

/* cl2 full-bleed: el template de pages encierra el contenido en ~672px;
   se rompe ese corsé para que .cl2-wrap pueda usar sus 1020px */
.cl2 { width: 100vw; margin-left: calc(50% - 50vw); }
 }

/* Espaciado homogéneo bajo el header en la PDP (paso 1 y paso 2) */
.product-information { padding-top: 26px !important; }
/* El contenido del cierre (reseñas + acordeones) centrado aunque la sección sea full-width */
.shopify-section-group-footer-group .section--full-width { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; }
.shopify-section-group-footer-group .section--full-width > * { max-width: 1020px; margin-inline: auto; }

/* Tipografia: titulares con lineas equilibradas (nada de una palabra suelta al final)
   y parrafos sin viudas. Cubre landings, home y PDP. */
h1, h2, h3, .cucu-gusto-name, .cucu-mini-headline { text-wrap: balance; }
.cl2-sub, .cl2-split p, .cl2-step p, .cl2-review p, p { text-wrap: pretty; }

/* ── Banner de cookies (privacy banner nativo de Shopify) como dialogo centrado de marca ──
   Por defecto es una sabana blanca anclada abajo que tapa media pantalla en movil.
   Se convierte en modal centrado con overlay. Aceptar y Rechazar mantienen igual
   tamano y nivel (requisito AEPD); solo cambia el enfasis de color. */
/* OJO: el JS de Shopify cierra el banner poniendo display:none inline; un display !important
   incondicional lo pisaba y el dialogo no se cerraba nunca (bug grave visto en Clarity 30-08).
   El flex solo aplica mientras el inline diga block (= banner mostrado). */
#shopify-pc__banner.shopify-pc__banner__dialog[style*="block"] { display: flex !important; }
/* Modal centrado que oscurece y tapa la pagina hasta que se responde (decision de Ras).
   OJO al gate [style*="block"]: sin el, el display:none con que Shopify lo cierra quedaba
   pisado por el !important y el dialogo no se cerraba nunca. */
#shopify-pc__banner.shopify-pc__banner__dialog {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background: rgba(20, 31, 26, .66) !important;
  backdrop-filter: blur(4px);
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 2147483000;
}
#shopify-pc__banner .shopify-pc__banner__wrapper {
  background: #fff;
  width: 100%;
  max-width: 430px;
  max-height: min(86vh, 640px);
  overflow: auto;
  border-radius: 22px;
  padding: 30px 26px 22px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
  text-align: center;
  animation: cucuCookiesIn .4s cubic-bezier(.22,.7,.3,1) both;
}
@keyframes cucuCookiesIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
#shopify-pc__banner h2 { font-size: 24px; line-height: 1.15; color: #1F2A25; margin: 0 0 10px; }
#shopify-pc__banner .shopify-pc__banner__body p { font-size: 13.5px; line-height: 1.55; color: #5b6660; margin: 0; }
#shopify-pc__banner a { color: #35634F; }
/* Jerarquia tipo prensa: Aceptar es el unico boton real; Rechazar y Administrar
   quedan en primera capa (requisito AEPD) pero como enlaces grises discretos. */
#shopify-pc__banner .shopify-pc__banner__btns {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 12px 22px; margin-top: 18px;
}
#shopify-pc__banner__btn-accept { order: 1; flex: 1 1 100%; width: 100% !important; }
#shopify-pc__banner__btn-decline { order: 2; }
#shopify-pc__banner__btn-manage-prefs { order: 3; }
#shopify-pc__banner__btn-accept {
  margin: 0 !important; padding: 15px 18px !important;
  border-radius: 999px !important; font-size: 16px !important; font-weight: 800 !important;
  border: none !important; cursor: pointer;
  background: linear-gradient(115deg, #7CC49C 0%, #4A8A70 26%, #2F5D48 52%, #24493A 74%, #47836B 100%) !important;
  background-size: 220% 220% !important;
  animation: cucu-gx-shift 7s ease-in-out infinite;
  color: #fff !important;
  box-shadow: 0 12px 26px -12px rgba(53, 99, 79, .6);
}
#shopify-pc__banner__btn-decline,
#shopify-pc__banner__btn-manage-prefs {
  background: none !important; border: none !important; color: #99a29c !important;
  width: auto !important; font-size: 13px !important; font-weight: 500 !important;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
  padding: 2px !important; margin: 0 !important; box-shadow: none !important;
}
@media (max-width: 480px) {
  #shopify-pc__banner .shopify-pc__banner__wrapper { padding: 24px 20px 16px; border-radius: 20px; }
  #shopify-pc__banner h2 { font-size: 21px; }
}

/* La web es solo clara: bloquea el auto-dark de Chrome/Samsung en Android */
:root { color-scheme: only light; }

/* Mientras el dialogo de cookies esta abierto, la pagina de detras no scrollea */
body:has(#shopify-pc__banner.shopify-pc__banner__dialog[style*="block"]) { overflow: hidden; }

/* En movil, los degradados animados de los CTA (background-position repinta cada frame
   en el main thread de Safari) quedan estaticos: mismo look, cero coste por frame */
@media (max-width: 760px) {
  .cucu-btn, button[name="add"], .add-to-cart-button, .cucu-btn-galaxy, .cucu-gx-backdrop,
  .cucu-btn-galaxy--light .cucu-gx-backdrop::before, .cl-btn, #shopify-pc__banner__btn-accept { animation: none; }
}

/* Accesibilidad: quien pide menos movimiento en su sistema no ve ninguna animacion decorativa */
@media (prefers-reduced-motion: reduce) {
  .cucu-btn, button[name="add"], .add-to-cart-button, .cucu-btn-galaxy, .cucu-gx-backdrop,
  .cucu-btn-galaxy--light .cucu-gx-backdrop::before, .cl-btn, #shopify-pc__banner__btn-accept,
  [style*="cucuMarquee"], [style*="cucuDrift"] { animation: none !important; }
}

/* En movil las tres columnas de "Lo que recibes" van una debajo de otra y a ancho
   completo. La del medio (portada + libro) tenia flex-grow 0.75 y se quedaba en 314
   de 342: mas estrecha que las otras y pegada a la izquierda.
   El video ya no es vertical sino cuadrado, asi que a ancho completo no domina la
   seccion como hacia el 9:16 (por eso antes estaba limitado a 230px). */
@media (max-width: 760px) {
  .cucu-recibes > * { flex-basis: 100% !important; max-width: none !important; }
  .cucu-video-box { margin-inline: auto; }
}

/* Si tocan fuera del dialogo de cookies (creyendo que pueden usar la web), el dialogo
   llama la atencion en vez de no hacer nada: el toque se lo comia el overlay en silencio */
@keyframes cucuNudge { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
#shopify-pc__banner .shopify-pc__banner__wrapper.cucu-nudge { animation: cucuNudge .42s ease; }

/* En pantallas tactiles NO hay raton: los efectos :hover se aplicaban al tocar y dejaban
   los botones en estado "hover pegado" tras volver atras. Se anulan en tactil. */
@media (hover: none) {
  .cucu-btn-galaxy:hover, .cl-btn:hover, .cl2-btn:hover { transform: none !important; }
  .cucu-btn:hover, button[name="add"]:hover, .add-to-cart-button:hover { transform: none !important; filter: none !important; }
  .cucu-btn-galaxy:hover .cucu-gx-spark::before,
  .cucu-btn-galaxy:hover .cucu-gx-backdrop::after,
  .cucu-btn-galaxy--light:hover .cucu-gx-backdrop::before { opacity: 0 !important; }
  .cucu-btn-galaxy--light:hover .cucu-gx-star { animation: none !important; opacity: 0 !important; }
  .cl2-others a:hover { background: transparent !important; }
}

/* Las capas decorativas del boton galaxy cubrian toda su superficie y capturaban el toque.
   En Safari iOS, un elemento con -webkit-mask + animacion rompe el hit-testing y el toque
   no llegaba al enlace: el boton "no hacia nada" en movil (reporte de Ras 30-08).
   Son puramente decorativas, asi que se vuelven transparentes al puntero. */
.cucu-gx-spark, .cucu-gx-spark::before, .cucu-gx-backdrop, .cucu-gx-backdrop::before,
.cucu-gx-backdrop::after, .cucu-gx-star, .cucu-gx-text { pointer-events: none !important; }
/* El area tocable es el enlace entero */
.cucu-btn-galaxy { touch-action: manipulation; -webkit-tap-highlight-color: rgba(71,131,107,.18); }

/* Capas decorativas del boton galaxy: cubrian toda su superficie y capturaban el toque.
   En Safari iOS un elemento con -webkit-mask + animacion rompe el hit-testing y el toque
   no llegaba al enlace. Son decorativas: se vuelven transparentes al puntero. */
.cucu-gx-spark, .cucu-gx-spark::before, .cucu-gx-backdrop, .cucu-gx-backdrop::before,
.cucu-gx-backdrop::after, .cucu-gx-star, .cucu-gx-text { pointer-events: none !important; }
.cucu-btn-galaxy, .cucu-btn, button[name="add"] { touch-action: manipulation; }

/* ── MOVIL: botones galaxy simplificados (peticion de Ras 30-08) ──
   Se queda solo el borde luminoso que gira; fuera destellos, estrellas, glow y hover
   (en tactil el hover se quedaba pegado y daba efectos raros al tocar).
   Al pulsar, lo tipico: un oscurecimiento leve. */
@media (max-width: 900px) {
  .cucu-btn-galaxy .cucu-gx-star { display: none !important; }
  .cucu-btn-galaxy { animation: none !important; transition: filter .12s ease !important; }
  .cucu-gx-backdrop { animation: none !important; }
  /* La CHISPA es la que quemaba el movil: lleva -webkit-mask y un conic-gradient en su
     ::before, asi que cada fotograma pasaba por el hilo principal (~124 recalculos de estilo
     por segundo, incluso con la pagina parada). Medido: CPU en 10s de reposo 997ms -> 166ms. */
  .cucu-gx-spark, .cucu-gx-spark::before { animation: none !important; }
  .cucu-gx-spark::before { opacity: 0 !important; }
  .cucu-btn-galaxy:hover, .cucu-btn-galaxy:focus {
    transform: none !important;
    box-shadow: 0 10px 24px -12px rgba(53, 99, 79, .55) !important;
    filter: none !important;
  }
  .cucu-btn-galaxy:hover .cucu-gx-spark::before,
  .cucu-btn-galaxy:hover .cucu-gx-backdrop::after { opacity: 0 !important; }
  .cucu-btn-galaxy--light:hover { --gx-bg: #fff !important; color: #35634F !important; }
  .cucu-btn-galaxy--light:hover .cucu-gx-backdrop::before { opacity: 0 !important; }
  /* respuesta al toque: solo oscurecer */
  .cucu-btn-galaxy:active { filter: brightness(.9) !important; transform: none !important; }
  .cucu-btn:active, button[name="add"]:active, .add-to-cart-button:active { filter: brightness(.9) !important; transform: none !important; }
}

/* ── Estado "cargando" de los CTA (peticion de Ras 30-08) ──
   Al tocar un enlace, el navegador tarda en traer la pagina siguiente y mantiene la actual en
   pantalla: parecia que el toque no habia entrado. El boton pasa a estado cargando al instante:
   el texto se atenua y aparece un aro girando. Solo transform/opacity (GPU, cero repintados). */
.cucu-cargando { position: relative; pointer-events: none; }
.cucu-cargando > *:not(.cucu-spin) { opacity: .38; transition: opacity .15s ease; }
.cucu-spin {
  position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; border: 2.5px solid rgba(255,255,255,.32); border-top-color: #fff;
  animation: cucuSpin .62s linear infinite; z-index: 5; pointer-events: none;
}
.cucu-btn-galaxy--light .cucu-spin, .cucu-cargando-oscuro .cucu-spin {
  border-color: rgba(53,99,79,.28); border-top-color: #35634F;
}
@keyframes cucuSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cucu-spin { animation-duration: 1.6s; } }

/* ── MOVIL: boton BASICO, sin ninguna capa decorativa (peticion de Ras 30-08) ──
   Se ocultan las capas superpuestas (chispa, backdrop, estrellas): el degradado lo pinta
   directamente el propio enlace, asi que no hay nada encima que pueda comerse el toque
   ni animarse. Mismo aspecto, cero efectos, area tocable limpia. */
@media (max-width: 900px) {
  .cucu-btn-galaxy .cucu-gx-spark,
  .cucu-btn-galaxy .cucu-gx-backdrop,
  .cucu-btn-galaxy .cucu-gx-star { display: none !important; }
  .cucu-btn-galaxy {
    background: linear-gradient(115deg, #7CC49C 0%, #4A8A70 26%, #2F5D48 52%, #24493A 74%, #47836B 100%) !important;
    background-size: 100% 100% !important;
    animation: none !important;
    isolation: auto !important;
    overflow: visible !important;
    transition: filter .12s ease !important;
  }
  .cucu-btn-galaxy--light {
    background: #fff !important;
    color: #35634F !important;
    box-shadow: 0 6px 16px -10px rgba(17,17,17,.3), 0 0 0 1.5px rgba(71,131,107,.22) !important;
  }
  .cucu-btn-galaxy .cucu-gx-text { position: static !important; z-index: auto !important; }
  .cucu-btn-galaxy:active { filter: brightness(.9) !important; }
}

/* ── Carrusel de la ficha: el swipe horizontal arrastraba la pagina en vertical ──
   <slideshow-slides> venia con touch-action:auto, asi que el navegador admitia los dos
   ejes: al pasar de foto con el dedo, un gesto ligeramente diagonal movia la pagina.
   Con pan-x, el dedo dentro de la galeria solo pasa fotos. Se conserva el pinch-zoom
   para no romper el zoom de accesibilidad, y solo aplica en pantallas tactiles. */
@media (pointer: coarse) {
  .media-gallery--carousel slideshow-slides { touch-action: pan-x pinch-zoom; }
}

/* ── Ficha: la galeria se pegaba al borde en ventanas medianas ──
   .product-information__media ocupa tambien la canaleta lateral del grid
   (grid-column: 1/3) para ir a sangre en movil, que es lo que se busca alli.
   Pero por debajo de ~1120px el grid ya no se centra y ocupa toda la ventana,
   asi que esa invasion dejaba las miniaturas tocando el borde izquierdo.
   Desde que hay dos columnas y hasta que el grid vuelve a centrarse, que
   respete la canaleta. */
@media (min-width: 750px) and (max-width: 1120px) {
  .product-information .product-information__grid .product-information__media { grid-column: 2 / 3 !important; }
}

/* ── Pie legal centrado ─────────────────────────────────────────────────
   Al quitar el bloque de iconos sociales (que duplicaba el Instagram y
   ademas seguia apuntando a las cuentas de demo de Shopify en facebook,
   tiktok, x y youtube) quedo su contenedor vacio: 0 hijos pero 63px de
   ancho, que empujaban «© 2026...» y «Terminos y politicas» fuera del
   centro. Se oculta solo mientras siga vacio: si algun dia vuelve a haber
   iconos, reaparece. */
/* :empty no vale: el contenedor conserva un espacio en blanco dentro. Se mira
   si hay algun enlace, que es lo que serian los iconos si vuelven. */
.footer-utilities__group--right:not(:has(a)) { display: none; }
.footer-utilities { justify-content: center; }
.footer-utilities__group--left {
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}

/* ── Carrito: fuera el campo de codigo de descuento (01-09, pedido por Ras) ──
   Estaba justo encima del boton Pagar. Un campo de cupon en un carrito sin cupones
   activos manda al cliente a buscar un codigo que no existe, y muchos no vuelven.
   Se oculta por CSS en vez de tocar el snippet base del theme: asi es reversible
   borrando este bloque, y no se rompe si Shopify actualiza Horizon.
   Para recuperarlo (por ejemplo en Navidad con una promo), basta con quitar esto. */
.cart-discount { display: none !important; }

/* 02-09-2026: las variables de fuente del theme apuntaban a Quicksand y Big Shoulders (settings_data no se puede pushear) y cualquier elemento que cucu-brand no pisara las descargaba (17-34 KB). :root:root gana al :root inline del theme por especificidad. */
:root:root{--font-body--family:'Albert Sans',system-ui,sans-serif;--font-subheading--family:'Albert Sans',system-ui,sans-serif;--font-heading--family:'DM Serif Display',Georgia,serif;--font-accent--family:'Albert Sans',system-ui,sans-serif}

/* ── Banner de cookies de Shopify: solo el boton Aceptar (04-09-2026, pedido por Ras) ──
   El admin no permite quitar botones del banner nativo, asi que se ocultan por CSS
   «Rechazar» y «Administrar preferencias». Es temporal ("de momento", dixit Ras):
   para volver a enseñarlos basta con borrar este bloque. El enlace «Preferencias de
   cookies» del footer sigue abriendo el panel completo. */
#shopify-pc__banner__btn-decline,
#shopify-pc__banner__btn-manage-prefs { display: none !important; }

/* ── Artículos del blog (04-09-2026): columna de lectura ancha y jerarquía razonable ──
   Horizon pintaba el H1 a 1200px y a 48px, los H2 al mismo tamaño que el H1 y el cuerpo
   a 14px en una columna de 672px: se leía raro (Ras). Se unifica todo a una columna de
   lectura de 780px, con imágenes a sangre de esa columna. */
main:has(.blog-post-content) h1 { max-width: 780px; margin-left: auto; margin-right: auto; font-size: clamp(30px, 4vw, 40px) !important; line-height: 1.12 !important; }
main:has(.blog-post-content) .blog-post-content.rte,
main:has(.blog-post-content) .blog-post-content.rte rte-formatter { max-width: 780px !important; width: 100%; margin-left: auto; margin-right: auto; }
.blog-post-content.rte { font-size: 17px; line-height: 1.68; color: #2b2b2b; }
.blog-post-content.rte p { margin: 0 0 18px; }
.blog-post-content.rte h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.2; margin: 52px 0 14px; }
.blog-post-content.rte h3 { font-size: 20px; line-height: 1.3; margin: 30px 0 8px; }
.blog-post-content.rte ul { padding-left: 22px; margin: 0 0 18px; }
.blog-post-content.rte li { margin-bottom: 8px; }
.blog-post-content.rte img { width: 100%; height: auto; border-radius: 16px; display: block; }
.blog-post-content.rte figure { margin: 26px 0; }
.blog-post-content.rte figcaption { font-size: 13.5px; color: #6e6e73; margin-top: 8px; text-align: center; }
.blog-post-content.rte .cucu-guia-resumen { background: #F3F8F4; border-radius: 18px; padding: 22px 24px; margin: 24px 0 30px; }
.blog-post-content.rte .cucu-guia-resumen p { margin: 0 0 10px; }
.blog-post-content.rte .cucu-guia-resumen p:last-child { margin: 0; }
.blog-post-content.rte .cucu-guia-ficha { border: 1px solid rgba(17,17,17,.08); border-radius: 18px; padding: 18px 20px; margin: 16px 0 26px; background: #fff; }
.blog-post-content.rte .cucu-guia-ficha ul { margin: 0; }
.blog-post-content.rte .cucu-guia-ficha li { margin-bottom: 6px; }
.blog-post-content.rte table { width: 100%; border-collapse: collapse; font-size: 14px; }
.blog-post-content.rte th, .blog-post-content.rte td { padding: 10px 10px; border-bottom: 1px solid rgba(17,17,17,.08); text-align: left; vertical-align: top; }
.blog-post-content.rte th { background: #F3F8F4; font-weight: 700; }
.blog-post-content.rte tr:first-child td { background: #FBF6EC; }