/*
Theme Name: Chibalete Theme
Theme URI: https://tiendachibalete.com/
Author: Chibalete Editores
Version: 1.0
Description: Tema WordPress personalizado con diseño Miró + Pop Art, compatible con WooCommerce y Gutenberg.
*/

/* Custom CSS from Index.css */

:root {
  --c-black: #1a1a1a;
  --c-white: #fffff0;
  --c-red: #e74c3c;
  --c-yellow: #f1c40f;
  --c-blue: #2c3e50;
  --c-cream: #fef3c7;
  --font-head: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-pop: 'Bangers', list-style-type;
  --font-display: 'Inter', sans-serif;
  /* Tailwind Utility mappings */
  --font-family-sans: 'Inter', sans-serif;
  --font-family-serif: 'Playfair Display', serif;
  --font-family-mono: 'DM Mono', monospace;
}

/* Force critical font classes */
.font-pop {
  font-family: 'Bangers', cursive !important;
}

.font-display {
  font-family: 'Inter', sans-serif !important;
}

.font-head {
  font-family: 'Playfair Display', serif !important;
}

.font-body {
  font-family: 'DM Sans', sans-serif !important;
}

/* Halftone Patterns */
.halftone-soft {
  background-image: radial-gradient(#000 1px, transparent 1px);
  background-size: 20px 20px;
}

.halftone-box {
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 10px 10px;
}

/* New Texture: Miro-Pop Paper (Cream + Grain + Shapes) */
/* New Texture: Miro-Pop Paper (Standardized: White/Cream + Fine Grain) */
.bg-miro-paper {
  background-color: #FDFBF7 !important;
  /* Base Creamy White */
  position: relative;
  /* Fine Noise/Grain (4-6% Opacity) */
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4));
}

.bg-miro-paper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 300px;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(44, 62, 80, 0.03) 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  /* Subtle curve simulation */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transform: rotate(-5deg);
  pointer-events: none;
}

/* Shapes for Simulation */
.miro-blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

/* Scrollbar Hide */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Marquee Animation */
@keyframes marquee-right {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.animate-marquee-right {
  display: flex;
  white-space: nowrap;
  animation: marquee-right 30s linear infinite;
}

.scroll-carousel-container {
  overflow: hidden;
  width: 100%;
}

/* Keyframes for Miro Line */
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.animate-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 3s ease-out forwards;
}

/* Float Animation for Logos */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Miro Card Utilities */
.miro-card {
  background: white;
  border: 4px solid #042B39;
  box-shadow: 12px 12px 0px 0px #042B39;
  transition: transform 0.2s;
}

/* Pop Card (Requested Repair) */
.pop-card {
  background: #fffff0;
  /* pop-white */
  border: 4px solid #1a1a1a;
  /* pop-black */
  box-shadow: 8px 8px 0px 0px #1a1a1a;
  padding: 2rem;
  transition: all 0.2s;
}

.pop-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0px 0px #2c3e50;
  /* pop-blue */
}

/* Chibalete Cart Icon Safety CSS */
.chibalete-cart-link {
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  z-index: 20;
  /* Ensure clickable */
}

/* Ensure SVG strokes match your Pop Art style */
.chibalete-cart-link svg {
  stroke: #1a1a1a;
  /* pop-black */
}

.chibalete-cart-link:hover svg {
  stroke: #e74c3c;
  /* pop-red */
}

/* Force hidden stickiness for badge if Tailwind fails */
.chibalete-cart-count.hidden {
  display: none !important;
}

/* Mobile Tweaks: Ensure spacing from Hamburger */
@media (max-width: 1024px) {
  .chibalete-cart-link {
    margin-right: 1rem;
  }
}

/* =========================================
   HERO HOME: MIRO-POP CONSTELACION (REIMAGINED)
   ========================================= */
.hero-home {
  background-color: #FDFBF7 !important;
  /* Cream Paper Base */
  position: relative;
  overflow: hidden;
  /* Optimization for repaints */
  transform: translate3d(0, 0, 0);
}

/* Layer 1: Paper Texture (Serigraphy/Grain) */
.hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
}

/* Layer 2: Miró Pop Macro-Composition 
   - Yellow/Red/Blue Large Circles
   - Fine Organic Lines
*/
.hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* Below text, above texture */
  background:
    /* 1. Technical Fine Line (Black Arc) - Top Left to Bottom Right vibe */
    radial-gradient(130% 100% at 0% 0%, transparent 60%, rgba(26, 26, 26, 0.4) 60.5%, transparent 60.8%),

    /* 2. Primary Yellow Sun (Top Right - Anchor) */
    radial-gradient(circle at 85% 15%, rgba(241, 196, 15, 0.8) 0, rgba(241, 196, 15, 0.6) 120px, transparent 122px),

    /* 3. Deep Blue Gravity (Bottom Left - Anchor) */
    radial-gradient(circle at 10% 85%, rgba(44, 62, 80, 0.9) 0, rgba(44, 62, 80, 0.8) 140px, transparent 142px),

    /* 4. Red Float (Middle Right - Transparent Pop) */
    radial-gradient(circle at 75% 65%, rgba(231, 76, 60, 0.3) 0, rgba(231, 76, 60, 0.1) 80px, transparent 81px),

    /* 5. Subtle Secondary Line (Bottom Right) */
    radial-gradient(circle at 100% 100%, transparent 30%, rgba(26, 26, 26, 0.2) 30.5%, transparent 31%);

  background-size: 100% 100%;
}

/* Content Safety: Ensure all direct children float above the art */
.hero-home>* {
  position: relative;
  z-index: 10;
}

/* Clean up legacy decorative elements to ensure clean canvas */
.hero-home>svg,
.hero-home>.miro-blob,
.hero-home>.halftone-soft,
.hero-home>.absolute:not(.miro-blob):not(.halftone-soft):not(svg) {
  /* We carefully target absolute positioned children that are likely decorative 
      BUT we must be careful not to hide the content container if it was absolute (it is relative in PHP).
      To be safe, we hide specific known legacy classes found in front-page.php */
  display: none !important;
}

/* Explicitly re-enable content container if mistakenly caught (safety net) */
.hero-home>.relative {
  display: flex !important;
  /* It was flex in PHP */
  z-index: 10;
}

/* Typography Adjustments for Readability on Art */
.hero-home h1,
.hero-home .hero-title {
  color: #1a1a1a;
  /* Removed heavy text-shadow, keeping it clean/editorial */
  text-shadow: none;
}

/* Link/Cta Safety */
.hero-home a {
  position: relative;
  z-index: 20;
}

/* === HERO BANNER: LO MAS NUEVO (MIRO POP v1) === */
.hero-home span.bg-pop-red {
  /* Reset & Base: Paper Aesthetic */
  background-color: #FDFBF7 !important;
  color: #1a1a1a !important;

  /* Frame & Structure */
  border: 3px solid #1a1a1a !important;
  box-shadow: 4px 4px 0 0 rgba(26, 26, 26, 0.1) !important;
  padding: 0.5rem 1.5rem !important;
  /* Breathing room */

  /* Editorial Vibe */
  overflow: visible !important;
  position: relative;
  z-index: 20;
  display: inline-block;
  /* Ensure transforms work */
  transform: rotate(-2deg) !important;
  /* Slight organic tilt */
}

/* Macroforma: Floating Red Circle (The soul of the old badge, reimaged) */
.hero-home span.bg-pop-red::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #e74c3c;
  /* Pop Red */
  border-radius: 50%;
  top: -12px;
  right: -12px;
  z-index: -1;
  border: 2px solid #1a1a1a;
  /* Defined form */
}

/* Decoration: Fine Organic Underline */
.hero-home span.bg-pop-red::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 5%;
  width: 90%;
  height: 2px;
  background: #1a1a1a;
  transform: rotate(1deg);
  border-radius: 99px;
}

/* === END HERO HOME: MIRO-POP CONSTELACION === */

/* === HOME SOPA DE LETRAS: MIRO-POP GEOMETRIC (REDESIGN) === */
.home-sopa {
  position: relative;
  background: #FDFBF7 !important;
  /* Paper White */
  overflow: hidden;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
  /* Ensure clean canvas */
}

/* Layer 1: Paper Grain */
.home-sopa::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
  z-index: 0;
}

/* Layer 2: Geometric Miró Pop Elements
   - Color Blocks (Rectangles)
   - Medium Circles
   - Fine grid lines
*/
.home-sopa::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* Fine Black Vertical Line (Left) */
    linear-gradient(to right, transparent 49px, rgba(26, 26, 26, 0.1) 50px, transparent 51px),

    /* Medium Red Circle (Float Left) */
    radial-gradient(circle at 5% 40%, rgba(231, 76, 60, 0.8) 0, rgba(231, 76, 60, 0.8) 20px, transparent 21px),

    /* Solid Blue Block (Bottom Right Accent) */
    linear-gradient(to top left, rgba(44, 62, 80, 0.05) 0%, rgba(44, 62, 80, 0.05) 30%, transparent 30%),

    /* Yellow Circle (Top Right) */
    radial-gradient(circle at 95% 10%, rgba(241, 196, 15, 0.6) 0, rgba(241, 196, 15, 0.6) 40px, transparent 41px);

  background-size: 100px 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

/* Ensure content floats above background */
.home-sopa>* {
  position: relative;
  z-index: 2;
}

/* Refined Spacing: Tighter Vertical */
.home-sopa .grid {
  column-gap: 2rem !important;
  row-gap: 2rem !important;
}

.home-sopa article {
  margin-bottom: 0 !important;
  background: transparent !important;
  /* Let paper show through if desired, or keep white card */
  /* If cards have borders, we keep them. Assuming cards are white blocks from PHP */
}

/* Typography Refinement */
.home-sopa .font-body,
.home-sopa p,
.home-sopa .excerpt {
  font-size: 0.95rem !important;
  /* Reduced for editorial neatness */
  line-height: 1.5 !important;
  color: #4a4a4a !important;
  /* Soft black */
}

/* CTA TRANSFORM: Orange Pop Button */
/* Targeting the specific span button in the loop */
.home-sopa article .mt-auto span,
.home-sopa article .read-more {
  display: inline-block !important;
  background-color: #F1C40F !important;
  /* Pop Orange/Yellow */
  color: #1a1a1a !important;
  border: 3px solid #1a1a1a !important;
  padding: 0.5rem 1.5rem !important;
  font-family: 'Bangers', cursive;
  /* Match font-pop */
  font-size: 1.2rem !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 4px 4px 0 0 #1a1a1a !important;
  transition: all 0.2s ease;

  /* Reset old styles */
  border-bottom: 3px solid #1a1a1a !important;
  /* Override border-current if any */
}

.home-sopa article .mt-auto span:hover,
.home-sopa article .read-more:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 #e74c3c !important;
  /* Red shadow on hover */
  background-color: #F1C40F !important;
}

/* Hide legacy blobs if any */
.home-sopa .miro-blob {
  display: none !important;
}

/* === END HOME SOPA DE LETRAS === */

/* === HOME NUESTRAS ALIANZAS: MIRO-POP CANVAS (REDESIGN) === */
.home-alianzas {
  position: relative;
  overflow: hidden;
  background: #FDFBF7 !important;
  /* Cream Paper */
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* Layer 1: Paper Grain (Consistent) */
.home-alianzas::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
  z-index: 0;
}

/* Layer 2: Miró Canvas (Macroforms & Lines) 
   - Replacing Grid with Organic Composition
*/
.home-alianzas::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* Fine Curved Line (Top) */
    radial-gradient(100% 100% at 50% 0%, transparent 49.5%, rgba(26, 26, 26, 0.15) 50%, transparent 50.5%),

    /* Large Soft Yellow Circle (Background Left) */
    radial-gradient(circle at 10% 20%, rgba(241, 196, 15, 0.15) 0, transparent 400px),

    /* Solid Blue Anchor (Bottom Right) */
    radial-gradient(circle at 90% 90%, rgba(44, 62, 80, 0.1) 0, rgba(44, 62, 80, 0.1) 100px, transparent 101px),

    /* Red Accent (Floating Top Right) */
    radial-gradient(circle at 80% 10%, rgba(231, 76, 60, 0.4) 0, transparent 60px);

  background-size: 100% 100%;
}

/* Ensure content floats above art */
.home-alianzas>* {
  position: relative;
  z-index: 2;
}

/* TITLE: Stamped & Graphic */
.home-alianzas .section-title,
.home-alianzas h2 {
  display: inline-block;
  margin: 0 auto 3rem auto !important;
  padding: .75rem 2rem;
  background: #1A1A1A;
  /* Solid Black */
  color: #FDFBF7;
  /* Paper Text */
  border: none;
  /* No Border, just solid block */
  box-shadow: 8px 8px 0 0 #F1C40F;
  /* Yellow Shadow */
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 2px;
  transform: rotate(-1deg);
  position: relative;
}

/* Title Decoration (Red Dot) via Pseudo to avoid HTML change */
.home-alianzas h2::after {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  background: #e74c3c;
  border-radius: 50%;
  border: 2px solid #1a1a1a;
}

.home-alianzas .title-wrap,
.home-alianzas .heading-wrap {
  text-align: center;
}

/* GRID LAYOUT */
.home-alianzas .alianzas-grid,
.home-alianzas .partners-grid {
  display: grid;
  gap: 2rem !important;
  align-items: stretch;
}

@media (min-width: 992px) {

  .home-alianzas .alianzas-grid,
  .home-alianzas .partners-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* CARDS: Pop Art Editorial */
.home-alianzas .alianza-card,
.home-alianzas .partner-card,
.home-alianzas .miro-box {
  background: #FFFFF0;
  border: 3px solid #1a1a1a;
  /* Distinct Border */
  box-shadow: 6px 6px 0 0 #1a1a1a;
  /* Hard Shadow */
  padding: 2rem;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.home-alianzas .alianza-card:hover,
.home-alianzas .partner-card:hover,
.home-alianzas .miro-box:hover {
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0 0 #e74c3c;
  /* Red Shadow on Interaction */
}

/* Legacy Connector Line Trick (Disable if present) */
.home-alianzas .alianza-card::before,
.home-alianzas .partner-card::before {
  display: none !important;
}

/* LOGOS */
.home-alianzas .alianza-logo,
.home-alianzas .partner-logo,
.home-alianzas img {
  max-width: 120px;
  /* Bit larger than before */
  height: auto;
  display: block;
  object-fit: contain;
  margin: 0 auto;
}

.home-alianzas .logo-wrap {
  /* Clean wrapper */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  margin-bottom: 1.5rem;
  border-bottom: 2px dashed rgba(26, 26, 26, 0.1);
  /* Subtle divider within card */
  width: 100%;
}

/* TYPOGRAPHY */
.home-alianzas h3 {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.25rem !important;
  margin-bottom: 1rem !important;
  text-align: center;
  color: #1a1a1a;
}

.home-alianzas p {
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  color: #4a4a4a;
}

/* === END HOME NUESTAS ALIANZAS === */

/* === FOOTER: MIRO-POP FINAL PAGE (REDESIGN) === */
footer.bg-pop-black {
  background-color: #FDFBF7 !important;
  /* Paper White */
  color: #1a1a1a !important;
  /* Dark Ink */
  border-top: 2px solid #1a1a1a !important;
  /* Closure Line */
  position: relative;
  overflow: hidden;
}

/* Layer 1: Paper Texture */
footer.bg-pop-black::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
  z-index: 0;
}

/* Layer 2: Soft Closure Graphics (Reposed Miró) */
footer.bg-pop-black::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* Soft Cyan Repose (Bottom Left) */
    radial-gradient(circle at 0% 100%, rgba(22, 160, 133, 0.1) 0, transparent 250px),

    /* Grey Cloud (Top Right) */
    radial-gradient(circle at 100% 0%, rgba(26, 26, 26, 0.05) 0, transparent 300px),

    /* Yellow Highlight (Center Low) */
    radial-gradient(ellipse at 50% 120%, rgba(241, 196, 15, 0.2) 0, transparent 200px);

  background-size: 100% 100%;
}

/* Ensure Content Visibility */
footer .relative,
footer .z-10 {
  z-index: 5;
  position: relative;
}

/* Hide Legacy Blobs inside Footer */
footer .miro-blob,
footer .absolute.bg-pop-red {
  display: none !important;
}

/* TYPOGRAPHY OVERRIDES (Inverting Light-on-Dark to Dark-on-Light) */
footer h5,
footer .text-pop-yellow {
  color: #1a1a1a !important;
  border-bottom: 2px solid #F1C40F;
  /* Yellow underline accent */
  display: inline-block;
  padding-bottom: 0.25rem;
  margin-bottom: 1.5rem !important;
}

footer a,
footer li a {
  color: #4a4a4a !important;
  /* Soft Black */
  font-weight: 500 !important;
}

footer a:hover,
footer li a:hover {
  color: #e74c3c !important;
  /* Red Hover */
  transform: translateX(3px);
}

/* Social Icons (SVG Fills) */
footer svg {
  fill: #1a1a1a !important;
}

footer a:hover svg {
  fill: #e74c3c !important;
}

/* Logo Container Adjustment */
footer .bg-pop-white {
  border-color: #1a1a1a !important;
  box-shadow: 4px 4px 0 0 #1a1a1a !important;
}

footer .bg-pop-white:hover {
  box-shadow: 6px 6px 0 0 #e74c3c !important;
}

/* Contact Text */
footer .text-pop-white {
  color: #1a1a1a !important;
  font-weight: 700;
  opacity: 0.8;
}

/* === END FOOTER REDESIGN === */