/* Zig-Zag Patagonia - "Hyper-Modern" Design System - Refined v6 */

:root {
  /* Core Colors */
  --bg-primary: #0a0a0a;
  --bg-secondary: #0f0f0f;
  --text-primary: #ffffff;
  --text-secondary: #aaaaaa;

  /* Vibrant Accent - Nature Green */
  --accent-color: #4caf50;
  --accent-hover: #388e3c;
  --accent-glow: rgba(76, 175, 80, 0.3);

  /* Surfaces */
  --card-bg: rgba(20, 20, 20, 0.6);
  --card-border: 1px solid rgba(255, 255, 255, 0.08);
  --card-hover-bg: rgba(30, 30, 30, 0.9);

  /* Typography */
  --font-display: "Montserrat", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --text-primary: #121212;
  --text-secondary: #555555;
  --card-bg: rgba(255, 255, 255, 0.85);
  --card-border: 1px solid rgba(0, 0, 0, 0.08);
  --card-hover-bg: #ffffff;
}

/* Global Reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  /* Disable native scroll */
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Main Scroll Wrapper (View Window) */
.snap-container {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  /* No native scroll */
  position: relative;
}

/* Moving Content Layer (Elastic Slide) */
.scroll-content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* Elastic Easing: Backwards anticipation then shoot */
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Note on Easing: To get "prepare/elastic", we need JS or complex keyframes. 
   css cubic-bezier(0.68, -0.55, 0.265, 1.55) gives overshoot. 
   User wants "prepare to jump". That's negative delay? No.
   Let's stick to a smooth exponential ease for "graceful" feel.
   Or cubic-bezier(0.85, 0, 0.15, 1) for distinct jump.
   User asked "elastic ... prepare to pass". This implies anticipation.
   Anticipation in CSS transition is hard without keyframes. 
   I will use a standard smooth ease for now, focusing on the "one section" logic.
*/

/* Section Snap Logic */
section,
header.media-hero,
footer {
  height: 100vh;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Fixed clipping */
  padding-top: 80px;
  /* Navbar space */
  padding-bottom: 90px;
  /* Player space */
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

/* Allow internal scrolling ONLY if strictly needed, but try to hide it */
.container {
  height: 100%;
  width: 100%;
  max-width: 1400px;
  /* Limit width */
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Fixed clipping */
  /* overflow: hidden; -> Removed to allow scroll */
  position: relative;
}

/* Section Common Styles */
.section-padding {
  padding: 80px 0;
  width: 100%;
  height: 100vh;
  /* Full Page Scroll default */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Fixed clipping */
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  /* Add extra padding to ensure content doesn't get hidden under fixed elements */
  padding-top: 100px;
  padding-bottom: 100px;
}

/* Header Styles */
.section-header {
  text-align: center;
  margin-bottom: 12px;
  z-index: 10;
  position: relative;
}

.modern-card p {
  font-size: 0.75rem;
  line-height: 1.2;
  margin-bottom: 0;
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  color: #aaa;
  margin-top: 5px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Allow scrolling in section if content overflows (e.g. Products) */
/* OVERRIDE: User wants strict fit */
#productos.section-padding { padding-top: 60px !important; padding-bottom: 80px !important; height: 100vh; justify-content: flex-start; }

#productos .container {
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;
  position: relative;
  justify-content: flex-start; /* Fixed clipping */
}

/* Refined Header Size (Reduced 30%) */
.section-header h2 {
  font-size: 1.5rem;
  /* Reduced from 2rem */
  margin-bottom: 2px;
}

.section-subtitle {
  font-size: 0.65rem;
  /* Reduced from 0.85rem */
  margin-top: 0;
  color: #999;
  letter-spacing: 1px;
}

/* 2a. Product Grid */
.products-grid-container {
  width: 100%;
  max-width: 1800px;
  /* Wider/Larger */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
  padding: 0 30px;
  /* Less side padding = Bigger cards */
  flex-grow: 1;
  overflow: hidden;
  height: 100%;
  /* Fill available space */
}

/* Response Breakpoints */
@media (max-width: 1200px) {
  .products-grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 800px) {
  .products-grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 500px) {
  .products-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Card Updates for Verticality */
.products-grid-container .product-slide {
  width: 100%;
  height: 100%;
  /* Fill grid cell */
}

/* OVERLAY CARD DESIGN (Refined) */
.product-price-card {
  width: 100%;
  height: 100%;
  background: #050505;
  border-radius: 12px;
  /* Slightly tighter radius */
  overflow: hidden;
  position: relative;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.product-price-card:hover {
  transform: scale(1.02);
  /* Green Glow behind */
  box-shadow: 0 0 25px rgba(76, 175, 80, 0.4);
  z-index: 10;
}

/* Image Fills Card */
.card-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s ease;
  filter: brightness(0.9);
  /* Slightly darker image for text contrast */
}

.product-price-card:hover .card-image img {
  transform: scale(1.08);
  filter: brightness(1);
}

/* Cleaner, Compact Details */
.card-details {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 12px 10px 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0px;
  /* Stronger gradient for readability */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.85) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  text-align: left;
}

.card-text-top h3 {
  font-size: 0.8rem;
  /* Smaller */
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.3px;
}

.card-subtitle {
  font-size: 0.6rem;
  color: #bbb;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}

/* Price Row */
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  /* Space before button */
}

.price-old {
  display: none;
}

/* Hide old price to clean up like reference? Or keep mini. Ref has one price per item. */
/* Keeping it simple as per "clean layout" request - user says "cleaner" */
.price-new {
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}

/* Button - Floating Pill */
.btn-whatsapp-card {
  background: linear-gradient(90deg, #4caf50, #45a049);
  color: #fff;
  font-weight: 700;
  font-size: 0.6rem;
  /* Small compact font */
  padding: 6px 0;
  border-radius: 20px;
  /* Full Pill */
  text-align: center;
  border: none;
  text-transform: uppercase;
  display: block;
  text-decoration: none;
  width: 100%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.btn-whatsapp-card:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.btn-whatsapp-card.disabled {
  background: #555;
  cursor: not-allowed;
  box-shadow: none;
}

/* SOLD Badge */
.badge-sale.sold {
  background: #d32f2f;
  /* Red for Sold */
  color: #fff;
}

/* Pagination Controls (Dots) - Bottom */
.pagination-controls {
  flex-shrink: 0;
  margin-top: 15px;
  padding-bottom: 0;
  height: 12px;
}

/* Dots (Page Numbers styled as dots) */
.pagination-controls button.page-dot {
  width: 6px;
  /* Smaller */
  height: 6px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  text-indent: -9999px;
  /* Hide text */
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.pagination-controls button.page-dot.active {
  background: var(--accent-color);
  transform: scale(1.4);
}

/* Arrows - Absolute */
.grid-arrow-btn.grid-arrow-main {
  position: absolute;
  top: 55%;
  /* Vertically centered relative to container roughly */
  transform: translateY(-50%);
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  border: none;
  cursor: pointer;
}

.grid-arrow-btn.prev {
  left: 0;
}

.grid-arrow-btn.next {
  right: 0;
}

.grid-arrow-btn:hover {
  background: var(--accent-color);
  transform: translateY(-50%) scale(1.1);
}

@media (max-width: 768px) {
  .grid-arrow-btn.grid-arrow-main {
    background: rgba(76, 175, 80, 0.8);
  }

  .grid-arrow-btn.prev {
    left: 5px;
  }

  .grid-arrow-btn.next {
    right: 5px;
  }

  .products-grid-container {
    padding-bottom: 50px !important;
    /* give space for bottom arrows */
    align-content: flex-start;
  }

  .product-price-card {
    max-height: 400px;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

/* Typography */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* HEADER & HERO Typography */
h1 {
  font-size: clamp(3rem, 6vw, 5rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}

/* --- FULL SCREEN GALLERY (#galeria) --- */
#galeria.section-padding {
  padding: 0 !important;
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding-top: 0 !important;
  background: #000;
}

#galeria .container {
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  display: block;
}

/* Gallery Slider Full Size */
.gallery-single-slider {
  width: 100%;
  height: 100%;
  position: relative;
}

.gallery-single-wrapper {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 0.6s ease-in-out;
}

.gallery-slide-single {
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.gallery-slide-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures filling without black bars */
  display: block;
}

/* Gallery Header Overlay - Bottom Position */
.gallery-header-overlay {
  position: absolute;
  bottom: 100px;
  /* Above player bar (approx 90px) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  /* Slightly more transparent for full screen feel */
  backdrop-filter: blur(8px);
  padding: 15px 40px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  width: max-content;
  max-width: 90%;
}

.gallery-header-overlay h2 {
  margin: 0;
  font-size: 1.8rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.gallery-header-overlay .section-subtitle {
  color: #ddd;
  font-size: 0.85rem;
  margin: 5px 0 0 0;
}

/* REMOVED: Old #galeria .section-header blocks to avoid conflict */

/* Gallery Arrows */
.gallery-single-slider .slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s;
}

.gallery-single-slider .prev-btn {
  left: 20px;
}

.gallery-single-slider .next-btn {
  right: 20px;
}

.gallery-single-slider .slider-btn:hover {
  background: var(--accent-color);
}

/* --- TRANSPARENT UI OVERRIDES (Activated by JS) --- */
body.transparent-ui .navbar {
  background: rgba(0, 0, 0, 0.35) !important;
}

body.transparent-ui .music-player-bar {
  background: rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(5px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- MERGED SECTION STYLES --- */
.merged-section {
  justify-content: flex-start;
  /* Parse content from top */
  padding-top: 100px !important;
  /* Space for Navbar */
  padding-bottom: 100px !important;
  /* Space for Player */
  overflow-y: auto !important;
  /* Allow scroll if content exceeds 100vh */
}

.merged-block {
  margin-bottom: 40px;
  width: 100%;
}

.small-header {
  margin-bottom: 15px;
}

.small-header h2 {
  font-size: 1.5rem;
  color: var(--accent-color);
}

.interactive-nosotros { padding-top: 60px !important; padding-bottom: 120px !important; }

.nosotros-container {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
  justify-content: flex-start;
  min-height: 0;
}

.interactive-nosotros .section-header {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

.nosotros-bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
}

#nosotros h2.bento-section-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
  font-weight: 700;
  line-height: 1.1;
}

#nosotros h2.bento-section-title.vis-title {
  color: #51c056;
}

#nosotros h2.bento-section-title.hacemos-title {
  color: #438ce5;
}

#nosotros h2.bento-section-title.participa-title {
  color: #f28b3f;
  margin-top: 5px;
  /* Reclaimed vertical space to prevent cropped buttons */
}

.bento-panel {
  background: rgba(30, 30, 30, 0.4);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 15px;
  /* Extremely compact */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  min-width: 0;
  min-height: 0;
}

/* Green Glow Panel */
.bento-vision {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  border: 1px solid rgba(81, 192, 86, 0.4);
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(81, 192, 86, 0.15);
}

.bento-right-col {
  display: contents;
  /* Allows its children to become direct children of the grid */
}

/* Blue Glow Panel Container */
.bento-hacemos {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  border: 1px solid rgba(67, 140, 229, 0.4);
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(67, 140, 229, 0.15);
}

/* Orange Glow Panel Container */
.bento-participa {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  border: 1px solid rgba(242, 139, 63, 0.4);
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(242, 139, 63, 0.15);
}

.bento-right-row:nth-of-type(2) .bento-panel {
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

.bento-hacemos,
.bento-reparaciones,
.bento-activismo {
  flex: 1;
}

.bento-participa-1,
.bento-participa-2,
.bento-participa-3 {
  flex: 1;
}

.bento-right-row.participates-row {
  margin-top: -15px;
  /* Adjusting visually since title is duplicated in HTML */
}

/* Hide duplicated title and tweak spacing if needed */
.bento-right-col > h2:nth-of-type(3) {
  display: none;
}

.bento-slider .slider-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  transform: none !important;
  /* Force override of JS horizontal sliding */
}

/* Hide scrollbar */
.bento-slider .slider-wrapper::-webkit-scrollbar {
  display: none;
}

.bento-slider .slider-wrapper::-webkit-scrollbar-thumb {
  display: none;
}

.bento-slide {
  overflow-y: auto;
  padding-top: 30px;
  padding-bottom: 30px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Fixed clipping */
  align-items: center;
  /* Cambiado de flex-start a center */
  text-align: center;
  /* Cambiado de left a center */
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.5s ease-in-out,
    visibility 0.5s ease-in-out;
  box-sizing: border-box;
  white-space: normal;
}

.bento-slider {
  flex: 1;
  /* Perfectly expand to remaining flexbox space seamlessly */
  position: relative;
  width: 100%;
  z-index: 2;
  min-height: 0;
  display: block;
}

.bento-slide.static {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.bento-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 5;
}

/* Replaced active/static rules in the block above */

.bento-slide i,
.bento-slide.static i {
  font-size: 1rem;
  margin-bottom: 5px;
  color: #fff;
}

.bento-slide h3 {
  font-size: 0.95rem;
  margin-bottom: 2px;
  color: #fff;
  font-weight: 700;
}

.bento-slide p {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.2;
  max-width: 100%;
}

/* Modificación: Alinear y centrar el contenido (íconos, titulo y descripcion) */
.bento-slide,
.bento-slide.static {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Fixed clipping */
  align-items: center;
  /* Centrado Horizontal */
  text-align: center;
  /* Centrado del Texto */
  height: 100%;
  width: 100%;
}

.btn-voluntariado {
  background: #4caf50;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.7rem;
  margin-top: auto;
  display: inline-block;
  letter-spacing: 1px;
  text-decoration: none;
  transition:
    background 0.3s,
    transform 0.2s;
  pointer-events: auto;
  /* Ensure clickable */
  position: relative;
  z-index: 100;
}

.btn-voluntariado:hover {
  background: #388e3c;
  transform: translateY(-2px);
}

.bento-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 5px;
  width: 100%;
  z-index: 2;
  padding-top: 5px;
}

.bento-controls.horizontal-right {
  justify-content: flex-end;
}

.bento-controls.horizontal-right .slider-dots {
  margin: 0;
}

.bento-controls button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.3s;
  padding: 0;
}

.bento-controls button:hover {
  color: #888;
}

.slider-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.slider-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #333;
  transition: all 0.3s;
  cursor: pointer;
}

.slider-dots.green-dots .dot.active {
  background: #4caf50;
  width: 18px;
}

.slider-dots.blue-dots .dot.active {
  background: #2196f3;
  width: 18px;
}

.slider-dots.orange-dots .dot.active {
  background: #ff9800;
  width: 18px;
}

/* Footer Video Background */
.footer {
  position: relative;
  
  /* Allow scrolling if content is too tall */
  overflow-x: hidden;
  padding: 80px 0 160px;
  /* Extra bottom space to avoid player covering last button */
  background: #000;
}

.footer-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
}

.footer-video-bg video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.footer-video-bg video.active {
  opacity: 0.3;
  /* Desired background visibility */
}

.footer .container {
  position: relative;
  z-index: 2;
  justify-content: flex-end;
  padding-bottom: 120px;
  /* Gap above default 90px padding reserved for player */
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

@media (max-width: 900px) {
  .nosotros-bento-grid {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .bento-right-row {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .footer-video-bg {
    flex-direction: column;
  }

  .footer-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
}

p {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 65ch;
}

/* --- NAVBAR --- */
.navbar {
  border-bottom: 0;
  backdrop-filter: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 5%;
  z-index: 1000;
  transition: background-color 0.25s ease;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
}

.navbar.scrolled {
  background: rgba(15, 15, 15, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--card-border);
  padding: 15px 5%;
}

[data-theme="light"] .navbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
}

/* LOGO LOGIC */
.logo-patch {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Fixed clipping */
}

.logo-patch img {
  height: 40px;
  /* Adjust as needed */
  width: auto;
  filter: invert(1) brightness(100%);
  transition: filter 0.3s;
}

/* Light Theme Scrolled: Revert to Black */
[data-theme="light"] .navbar.scrolled .logo-patch img {
  filter: invert(0);
}

/* Dark Theme Scrolled: Keep White */
[data-theme="dark"] .navbar.scrolled .logo-patch img {
  filter: invert(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Theme Toggle */
.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 1.1rem;
  background: #ffffff;
  color: #000000;
  border: none;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.theme-toggle:hover {
  transform: scale(1.05);
}

[data-theme="light"] .theme-toggle {
  background: #000000;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.shop-button {
  background: var(--accent-color);
  color: #fff !important;
  padding: 10px 24px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s;
}

.shop-button:hover {
  transform: translateY(-2px);
  background: var(--accent-hover);
  box-shadow: 0 4px 15px var(--accent-glow);
}

.hamburger {
  display: none;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
}

.navbar.scrolled .hamburger {
  color: var(--text-primary);
}

/* Menu Links */
.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
}

.nav-links li a {
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  opacity: 0.8;
  transition: all 0.3s;
  letter-spacing: 0.05em;
  position: relative;
  text-decoration: none;
}

.nav-links li a:hover,
.nav-links li a.active {
  opacity: 1;
  color: var(--accent-color);
}

.nav-links li a.active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--accent-color);
  border-radius: 2px;
}

.navbar.scrolled .nav-links li a {
  color: var(--text-primary);
}

.navbar.scrolled .nav-links li a.active {
  color: var(--accent-color);
}

@media (max-width: 900px) {
  .hamburger {
    display: block;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: var(--bg-secondary);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    transition: right 0.4s var(--ease-out-expo);
    z-index: 999;
  }

  .nav-links.active {
    right: 0;
  }

  .nav-links li a {
    color: var(--text-primary);
    font-size: 1.5rem;
  }
}

/* --- MEDIA HERO (TV/RADIO) --- */
.media-hero {
  height: 100vh;
  padding-top: 80px;
  padding-bottom: 100px;
  /* Space for player */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
}

.media-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  height: 60vh;
  /* Reduced from 75vh to fit nicely */
  max-height: 600px;
  /* Prevent too tall on huge screens? Or maybe remove max-height */
  width: 90%;
  margin: 0 auto;
}

/* Main Player View */
.main-player-view {
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  height: 100%;
  /* Fill container */
}

.main-player-view iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Playlist */
.playlist-sidebar {
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  /* Fill container */
}

@media (max-width: 900px) {
  .media-container {
    grid-template-columns: 1fr;
    grid-template-rows: 40vh 1fr;
    height: auto;
    gap: 10px;
  }

  .media-hero {
    padding-top: 90px;
    justify-content: flex-start;
  }
}

/* --- SLIDERS & CARDS FIT --- */
/* Restrict Slider Height so it fits between Navbar and Player */
/* Restrict Slider Height so it fits between Navbar and Player */
#galeria.gallery-full-page {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #000;
  padding: 0 !important;
  /* Override section-padding and global section padding */
  margin: 0 !important;
  display: block;
  /* Reset display flex from section */
}

.gallery-full-page .gallery-single-slider {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

/* Ensure arrows are visible and properly placed for full screen */
.gallery-full-page .slider-btn {
  bottom: 40px;
  top: auto;
  transform: none;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 60px;
  height: 60px;
}

.gallery-full-page .slider-btn i {
  font-size: 1.5rem;
}

.gallery-full-page .prev-btn {
  left: 20px;
}

.gallery-full-page .next-btn {
  right: 20px;
}

.gallery-full-page .gallery-single-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  display: block !important;
  /* Override flex from .slider-wrapper */
}

.card-link {
  display: inline-block;
  margin-top: auto;
  padding: 8px 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.3s;
}

.card-link:hover {
  border-bottom-color: var(--accent-color);
  filter: brightness(1.2);
}

.gallery-slide-single {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
  background-color: #000;
  /* Fallback */
}

.gallery-slide-single.active {
  opacity: 1;
  z-index: 5;
  /* Higher than inactive */
}

.gallery-slide-single img {
  width: 100%;
  height: 100vh;
  /* Force full viewport height */
  object-fit: cover;
  object-position: center;
  display: block;
  /* Ensure it goes behind navbar if section is top 0 */
}

.gallery-full-page .gallery-single-wrapper {
  height: 100vh !important;
}

/* Nosotros Hierarchy */
.nosotros-hierarchy {
  margin-top: 20px;
}

.hierarchy-row {
  display: grid;
  gap: 20px;
}

.hierarchy-row.top {
  grid-template-columns: repeat(3, 1fr);
}

.hierarchy-row.mid {
  grid-template-columns: repeat(5, 1fr);
}

.hierarchy-row.bottom {
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  margin: 0 auto;
}

.hierarchy-row.top .modern-card {
  min-height: auto;
}

.hierarchy-row.mid .modern-card,
.hierarchy-row.bottom .modern-card {
  padding: 12px 15px;
  font-size: 0.8rem;
}

.hierarchy-row.mid h3,
.hierarchy-row.bottom h3 {
  font-size: 0.9rem;
  margin-bottom: 4px;
}

@media (max-width: 1200px) {
  .hierarchy-row.mid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .hierarchy-row.mid,
  .hierarchy-row.top,
  .hierarchy-row.bottom {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .hierarchy-row.mid,
  .hierarchy-row.top,
  .hierarchy-row.bottom {
    grid-template-columns: 1fr;
  }
}

/* Pill Buttons for Nosotros */
.nosotros-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start; /* Fixed clipping */
  gap: 8px;
  padding: 10px 25px;
  background: #4caf50;
  color: white;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.7rem;
  margin-top: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
  border: none;
  text-decoration: none;
}

.nosotros-pill-btn:hover {
  background: #388e3c;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
  color: white;
}

.nosotros-pill-btn i {
  font-size: 0.8rem;
  margin-bottom: 0 !important;
}

.slider-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
}

/* Slide Card (Que Hacemos) */
.slide-card {
  min-width: 300px;
  max-width: 800px;
  /* Use flex layout for internal content fitting */
  display: flex;
  flex-direction: row;
  background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  height: 50vh;
  /* Fixed relative height */
}

.slide-image {
  flex: 1;
  overflow: hidden;
}

.slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-content {
  flex: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Fixed clipping */
  
}

/* Product Card */
.product-card {
  width: 280px;
  height: 45vh;
  min-height: 350px;
}

/* --- NEW RULES (Gallery Single, Contact, Participa) --- */

.gallery-single-wrapper::-webkit-scrollbar {
  display: none;
}

@keyframes zoomSlow {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.15);
  }
}

/* 3. Contact Grid Layout (Restored Format) */
.contact-grid-layout {
  display: flex;
  gap: 30px;
  height: calc(100vh - 200px);
  overflow: hidden;
}

.contact-col-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: var(--bg-secondary);
  padding: 30px;
  border-radius: 12px;
}

.contact-col-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Fixed clipping */
  background: var(--bg-secondary);
  padding: 30px;
  border-radius: 12px;
}

.map-embed-box {
  flex: 1;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  min-height: 200px;
}

.map-embed-box iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
}

.info-item i {
  color: var(--accent-color);
  width: 24px;
  text-align: center;
}

/* Standard Form Styling */
.std-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
}

.std-form input,
.std-form textarea {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: 15px;
  border-radius: 8px;
  color: var(--text-primary);
  width: 100%;
  font-size: 1rem;
}

.std-form textarea {
  flex: 1;
  resize: none;
}

.std-form button {
  margin-top: auto;
  padding: 15px;
  font-weight: bold;
  border-radius: 8px;
}

/* --- FINAL UPDATE: FULL WIDTH CONTACT & PRICE CARDS --- */

/* 1. Full Width Contact Section (Compacted for Fit) */
.contact-full-section {
  width: 100%;
  padding: 0 !important;
  margin-top: 0;
  background: #0a0a0a;
  color: #fff;
  
}

.contact-full-wrapper {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  min-height: 450px;
  
  /* Allow scroll if content is tall */
  padding-bottom: 150px;
  /* Space for the player */
}

/* Left Panel: Content */
.contact-full-info {
  flex: 1;
  min-width: 320px;
  /* Tighter padding */
  padding: 20px 4%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Fixed clipping */
  /* or space-between if height allows */
  background: #0a0a0a;
}

.contact-title-main {
  font-size: 2.5rem;
  /* Smaller title */
  font-weight: 800;
  margin-bottom: 10px;
  color: #fff;
  text-align: left;
  line-height: 1.1;
}

.contact-subtitle {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 5px;
  color: #fff;
  opacity: 0.9;
}

.contact-desc {
  font-size: 0.9rem;
  color: #aaa;
  margin-bottom: 20px;
}

/* Meta Grid */
.contact-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  /* Smaller gap */
  margin-bottom: 25px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.meta-item i {
  font-size: 1.1rem;
}

/* Full row for address */
.light-text {
  display: block;
  font-size: 0.85rem;
  color: #888;
}

/* Dark Form */
.contact-full-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Tighter form */
  max-width: 600px;
  width: 100%;
}

.form-row {
  display: flex;
  gap: 10px;
}

.form-row input,
.form-row textarea {
  width: 100%;
}

.dark-input {
  background: #1a1a1a;
  border: 1px solid #333;
  padding: 12px;
  /* Reduced padding */
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.3s;
}

.dark-input:focus {
  border-color: #4caf50;
}

.dark-input::placeholder {
  color: #555;
}

.btn-full-submit {
  background: #4caf50;
  /* Green Brand Color */
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.3s;
  text-transform: uppercase;
  width: 100%;
  margin-top: 5px;
}

.btn-full-submit:hover {
  background: #43a047;
}

/* Right Panel: Map */
.contact-full-map {
  flex: 1;
  min-width: 320px;
  min-height: 400px;
  position: relative;
}

.contact-full-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  /* Removed filter for color map */
}

/* 2a. Product Grid (Compact 6-col) */
.products-grid-container {
  width: 100%;
  max-width: 1800px;
  /* Use full width if available */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
  /* Tight gap */
  padding: 10px 20px;
  height: auto !important;
  overflow: visible !important;
}

/* Response Breakpoints */
@media (max-width: 1200px) {
  .products-grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 800px) {
  .products-grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 500px) {
  .products-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.products-grid-container .product-slide {
  width: 100%;
  display: block;
}

/* Compact Card */
.product-price-card {
  width: 100%;
  background: #151515;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
  height: 100%;
  /* Fill grid cell */
  line-height: 1.1 !important;
  /* Adjusted from 0 to restore legibility */
}

.product-price-card .card-image {
  height: 240px !important;
}

.product-price-card .card-subtitle {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 5px;
}

.pagination-controls {
  display: none !important;
}

.product-price-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-color);
}

.card-image {
  width: 100%;
  height: 150px;
  /* Reduced image height */
  position: relative;
  background: #222;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-price-card:hover .card-image img {
  transform: scale(1.05);
}

.badge-sale {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff4444;
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.card-details {
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  text-align: left;
}

.card-text-top h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #eee;
  line-height: 1.2;
  overflow: visible;
  white-space: normal;
}

/* Descriptions restored */
.description {
  display: block !important;
  font-size: 0.8rem;
  color: #888;
}

.price-row {
  margin-top: auto;
  margin-bottom: 5px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: flex-start;
}

.price-old {
  text-decoration: line-through;
  color: #666;
  font-size: 0.75rem;
}

.price-new {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

.btn-whatsapp-card {
  width: 100%;
  background: var(--accent-color);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding: 6px 0;
  border-radius: 4px;
  text-align: center;
  border: none;
  display: block;
  text-decoration: none;
  transition: background 0.2s;
  margin-top: 0;
}

.btn-whatsapp-card:hover {
  background: #4caf50;
  color: #fff;
  filter: brightness(1.1);
}

@media (max-width: 768px) {
  .contact-full-wrapper {
    flex-direction: column;
  }

  .contact-full-info {
    padding: 40px 20px;
  }

  .contact-title-main {
    font-size: 2.2rem;
  }

  .form-row {
    flex-direction: column;
    gap: 10px;
  }

  .contact-full-map {
    min-height: 300px;
  }
}

/* 4. Participa New Styles */
.participa-content {
  display: flex;
  justify-content: flex-start; /* Fixed clipping */
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 20px;
}

.participa-card {
  background: var(--bg-secondary);
  padding: 30px;
  border-radius: 12px;
  flex: 1;
  min-width: 250px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.participa-card:hover {
  transform: translateY(-5px);
}

.participa-card i {
  font-size: 2.5rem;
  color: var(--accent-color);
  margin-bottom: 20px;
}

.participa-card h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .contact-grid-layout {
    flex-direction: column;
    
    height: auto;
  }

  .gallery-single-slider {
    height: 50vh;
  }

  .participa-content {
    flex-direction: column;
  }

  .contact-col-info,
  .contact-col-form {
    padding: 20px;
  }
}

.participa-card {
  background: var(--bg-secondary);
  padding: 30px;
  border-radius: 12px;
  flex: 1;
  min-width: 250px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.participa-card:hover {
  transform: translateY(-5px);
}

.participa-card i {
  font-size: 2.5rem;
  color: var(--accent-color);
  margin-bottom: 20px;
}

.participa-card h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .contact-grid-layout {
    flex-direction: column;
    
    height: auto;
  }

  .gallery-single-slider {
    height: 50vh;
  }

  .participa-content {
    flex-direction: column;
  }

  .contact-col-info,
  .contact-col-form {
    padding: 20px;
  }
}

.product-card {
  width: 280px;
  height: 45vh;
  /* Responsive height */
  max-height: 450px;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-radius: 12px;
  margin: 0 15px;
  flex-shrink: 0;
}

.product-image {
  flex: 2;
  overflow: hidden;
  position: relative;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Fixed clipping */
}

/* Contact Fit */
.contact-wrapper {
  height: 100%;
  max-height: calc(100vh - 180px);
  display: flex;
  gap: 20px;
  padding: 0 20px;
}

.contact-left-col,
.contact-form-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.map-container {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
}

.contact-info-card,
.contact-form-card {
  flex-shrink: 0;
  margin-bottom: 20px;
}

/* Footer Logo Adjustment */
.footer-logo {
  max-width: 80px;
  /* Smaller */
  height: auto;
  filter: invert(1);
  margin-bottom: 15px;
  transition: filter 0.3s;
}

@media (max-width: 900px) {
  .media-container {
    grid-template-columns: 1fr;
    grid-template-rows: 40vh 1fr;
    height: auto;
    gap: 10px;
    padding: 20px;
  }

  .media-hero {
    height: auto;
    min-height: 100vh;
    padding-bottom: 120px;
  }
}

/* Main Player View (Left) */
.main-player-view {
  background: #000;
  /* Preserve contrast for video */
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.main-player-view iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Audio Visualizer Mode */
.audio-visualizer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at center,
    var(--bg-secondary),
    var(--bg-primary)
  );
}

.audio-visualizer.hidden {
  display: none;
}

/* Activity Card (Specific tweaks) */
.activity-card {
  min-width: 300px;
  height: 45vh;
  min-height: 323px !important;
  /* User requested exact min-height */
  background: var(--card-bg);
  border-radius: 12px;
  padding: 0 !important;
  /* User requested 0 padding */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  /* Flex layout for image/text split */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Ensure image clips */
}

/* Ensure internal content has padding if needed, or if user meant CARD padding is 0 to allow full bleed image? */
/* If previous padding was on card, it spaced content. If 0, text hits edge. */
/* I'll assume 0 padding is for the CARD CONTAINER to let image be full width. */
/* Text usually needs padding. I'll ensure .activity-info or similar keeps its padding. */

/* Buttons closer to center */
.slider-btn.prev-btn {
  left: 50px !important;
}

.slider-btn.next-btn {
  right: 50px !important;
}

.breathing-logo {
  width: 150px;
  height: 150px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  /* Animation handled by keyframes, filter by theme below */
  animation: breathe 4s infinite ease-in-out;
}

/* Theme adaptation for logo in visualizer */
[data-theme="light"] .breathing-logo {
  filter: invert(0);
}

[data-theme="dark"] .breathing-logo {
  filter: invert(1);
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* Equalizer */
.equalizer {
  display: flex;
  gap: 6px;
  height: 40px;
  align-items: flex-end;
}

.equalizer span {
  width: 8px;
  background: var(--accent-color);
  border-radius: 4px;
  animation: equalize 1s infinite ease-in-out;
}

.equalizer span:nth-child(1) {
  animation-delay: 0.1s;
  height: 40%;
}

.equalizer span:nth-child(2) {
  animation-delay: 0.3s;
  height: 70%;
}

.equalizer span:nth-child(3) {
  animation-delay: 0s;
  height: 100%;
}

.equalizer span:nth-child(4) {
  animation-delay: 0.4s;
  height: 60%;
}

.equalizer span:nth-child(5) {
  animation-delay: 0.2s;
  height: 50%;
}

@keyframes equalize {
  0%,
  100% {
    height: 20%;
    opacity: 0.5;
  }

  50% {
    height: 100%;
    opacity: 1;
  }
}

/* Playlist Sidebar (Right) */
.playlist-sidebar {
  background: rgba(20, 20, 20, 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

[data-theme="light"] .playlist-sidebar {
  background: #f4f5f7;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.mode-switch-header {
  background: rgba(0, 0, 0, 0.4);
  padding: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .mode-switch-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mode-btn {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.3s;
  position: relative;
}

.mode-btn:hover {
  color: #ffffff;
}

.mode-btn.active {
  color: #ffffff;
}

[data-theme="light"] .mode-btn {
  color: #777777;
}

[data-theme="light"] .mode-btn:hover {
  color: #111111;
}

[data-theme="light"] .mode-btn.active {
  color: #111111;
}

.mode-btn.active::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-color);
  box-shadow: 0 0 10px var(--accent-color);
}

.divider {
  color: rgba(255, 255, 255, 0.25);
}

[data-theme="light"] .divider {
  color: rgba(0, 0, 0, 0.2);
}

.playlist-scroll-area {
  flex-grow: 1;
  
  padding: 15px;
}

.playlist-scroll-area::-webkit-scrollbar {
  width: 4px;
}

.playlist-scroll-area::-webkit-scrollbar-track {
  background: transparent;
}

.playlist-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

/* Playlist Items */
.playlist-entry {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

[data-theme="light"] body .playlist-entry {
  background: #ffffff;
  border-color: #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.playlist-entry:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] body .playlist-entry:hover {
  background: #f0f0f0;
  border-color: #cccccc;
}

.playlist-entry.active {
  background: rgba(76, 175, 80, 0.15);
  border-color: var(--accent-color);
}

[data-theme="light"] body .playlist-entry.active {
  background: #e8f5e9;
  /* Light green solid background */
  border-color: var(--accent-color);
}

.entry-thumb {
  width: 60px;
  height: 35px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
}

.entry-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entry-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.entry-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] body .entry-title {
  color: #111111;
}

.entry-meta {
  font-size: 0.75rem;
  color: #888;
}

[data-theme="light"] body .entry-meta {
  color: #555555;
}

.playlist-entry.active .entry-title {
  color: var(--accent-color);
}

[data-theme="light"] body .playlist-entry.active .entry-title {
  color: var(--accent-color);
  font-weight: 700;
}

.scroll-down {
  margin-top: 20px;
  align-self: center;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.5);
  animation: bounce 2s infinite;
  cursor: pointer;
}

/* --- SECTIONS --- */
.section-padding {
  padding: 120px 0;
}

.section-alt {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}

.section-header {
  text-align: center;
  margin-bottom: 70px;
}

.section-subtitle {
  max-width: 600px;
  margin: 15px auto 0;
  font-size: 1.1rem;
}

.text-center-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Feature Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  width: 100%;
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

.feature-card {
  background: var(--card-bg);
  border: var(--card-border);
  padding: 40px 30px;
  border-radius: 12px;
  transition:
    transform 0.3s,
    background 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  background: var(--card-hover-bg);
  border-color: rgba(255, 255, 255, 0.2);
}

.feature-icon {
  font-size: 2.5rem;
  color: var(--accent-color);
  margin-bottom: 25px;
}

.centered-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* --- GENERAL SLIDER STYLES (Used for Que Hacemos, Products, Merch) --- */
.slider-container {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 0 50px;
  /* Space for arrows */
}

.slider-wrapper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.slider-wrapper::-webkit-scrollbar {
  display: none;
}

/* Arrows */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--card-bg);
  color: var(--text-primary);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  backdrop-filter: blur(5px);
}

.slider-btn:hover {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.prev-btn {
  left: 0;
}

.next-btn {
  right: 0;
}

/* --- QUE HACEMOS SLIDER SPECIFIC --- */
.activity-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: 10px;
}

.activity-card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: 20px;
  padding: 60px 40px;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.slider-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(128, 128, 128, 0.3);
  cursor: pointer;
  transition: all 0.3s;
}

.dot.active {
  background: var(--accent-color);
  transform: scale(1.2);
}

#merchandising {
  background: #000;
}

.merch-container {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Merchandising Hero Styles */
.merch-hero-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  padding: 0 120px;
  /* More side space to avoid arrow overlap */
  gap: 60px;
  flex-direction: row;

  /* Absolute overlap for rotation */
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
  z-index: 1;
  transform: translateY(10px);
  /* Slight entrance effect */
}

.merch-hero-layout.active {
  opacity: 1;
  pointer-events: all;
  z-index: 2;
  transform: translateY(0);
}

.merch-info {
  flex: 1;
  text-align: left;
  max-width: 600px;
}

.merch-hero-title {
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 25px;
  letter-spacing: -2px;
  text-transform: uppercase;
}

.merch-hero-desc {
  font-size: 1.2rem;
  color: var(--text-secondary);
  line-height: 1.5;
  font-weight: 300;
}

.merch-image-box {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.merch-floating-img {
  width: 85%;
  /* Enlarged images */
  max-width: 800px;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
  transition: transform 0.5s var(--ease-out-expo);
  z-index: 2;
}

#merchandising:hover .merch-floating-img {
  transform: translateY(-15px) scale(1.02);
}

@media (max-width: 1200px) {
  .merch-hero-title {
    font-size: 3.5rem;
  }
}

@media (max-width: 768px) {
  .merch-hero-layout {
    flex-direction: column-reverse;
    /* Put image on top for mobile */
    text-align: center;
    justify-content: flex-end;
    padding-top: 80px;
    padding-bottom: 50px;
    /* Safety for navbar */
  }

  .merch-info {
    max-width: 100%;
    text-align: center;
  }

  .merch-hero-title {
    font-size: 2rem;
    margin-bottom: 10px;
  }

  .merch-hero-desc {
    font-size: 0.95rem;
  }

  .merch-floating-img {
    width: 100%;
    max-height: 45vh;
    object-fit: contain;
  }
}

/* Navigation Arrows */
.merch-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.merch-nav-btn:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.merch-nav-btn.prev {
  left: 20px;
}

.merch-nav-btn.next {
  right: 20px;
}

@media (max-width: 768px) {
  .merch-nav-btn {
    width: 40px;
    height: 40px;
  }

  .merch-nav-btn.prev {
    left: 5px;
  }

  .merch-nav-btn.next {
    right: 5px;
  }
}

/* --- PRODUCTS & MERCH SLIDER SPECIFIC --- */
.product-slide {
  flex: 0 0 320px;
  /* Fixed width for horizontal scrolling */
  scroll-snap-align: start;
}

@media (max-width: 600px) {
  .product-slide {
    flex: 0 0 85%;
  }
}

.product-card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Fill slide */
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.25);
}

.product-image {
  height: 280px;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #1a1a1a;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: brightness(0.9);
}

.product-card:hover img {
  transform: scale(1.08);
  filter: brightness(1);
}

.product-info {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.product-info h3 {
  font-size: 1.35rem;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.product-info p {
  font-size: 0.95rem;
  margin-bottom: 20px;
  flex-grow: 1;
  opacity: 0.8;
}

.btn {
  padding: 12px 30px;
  border-radius: 6px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start; /* Fixed clipping */
  gap: 10px;
  transition: all 0.3s;
  border: none;
  letter-spacing: 0.05em;
}

.btn-primary {
  background: var(--accent-color);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 5px 20px var(--accent-glow);
}

.btn-outline-light {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  background: transparent;
}

.btn-outline-light:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.btn-link {
  color: var(--accent-color);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-top: auto;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.btn-link:hover {
  border-bottom-color: var(--accent-color);
}

/* --- CONTACT SECTION (Redesigned) --- */
.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
  }
}

.contact-left-col {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.contact-info-card {
  background: var(--card-bg);
  border: var(--card-border);
  padding: 30px;
  border-radius: 12px;
  text-align: left;
}

.contact-info-card h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 15px;
  font-size: 1rem;
  color: var(--text-secondary);
}

.contact-item i {
  color: var(--accent-color);
  font-size: 1.2rem;
  margin-top: 3px;
}

.map-container {
  width: 100%;
  flex-grow: 1;
  min-height: 300px;
  border-radius: 12px;
  overflow: hidden;
  border: var(--card-border);
}

.map-container iframe {
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: block;
  filter: grayscale(1);
}

.map-container iframe:hover {
  filter: grayscale(0);
}

/* Right Column: Form */
.contact-form-col {
  display: flex;
  flex-direction: column;
}

.contact-form-card {
  background: var(--card-bg);
  border: var(--card-border);
  padding: 40px;
  border-radius: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.contact-form-card form {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-grow: 1;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--accent-color);
  outline: none;
  background: rgba(255, 255, 255, 0.05);
}

/* Make textarea fill space */
.contact-form-card .form-group:last-of-type {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.contact-form-card textarea {
  flex-grow: 1;
  min-height: 150px;
  resize: none;
}

/* Gallery Masonry */
.gallery-masonry {
  column-count: 3;
  column-gap: 20px;
}

@media (max-width: 768px) {
  .gallery-masonry {
    column-count: 2;
  }
}

@media (max-width: 500px) {
  .gallery-masonry {
    column-count: 1;
  }
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #111;
}

.gallery-item img {
  width: 100%;
  display: block;
  transition: transform 0.5s;
  opacity: 0.9;
}

.gallery-item:hover img {
  transform: scale(1.05);
  opacity: 1;
}

/* Footer */
.footer {
  background: #050505;
  color: #888;
  padding: 100px 0 160px;
  /* Extra space for music player */
  border-top: 1px solid #1a1a1a;
  
  overflow-x: hidden;
}

.footer-brand h2 {
  font-size: 2.5rem;
  color: #fff;
  opacity: 1;
  margin-bottom: 10px;
  letter-spacing: -0.05em;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
  z-index: 2;
  position: relative;
}

.footer-social-btns {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 25px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  backdrop-filter: blur(10px);
}

.footer-btn i {
  font-size: 1.1rem;
}

.footer-btn.instagram:hover {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  border-color: transparent;
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(214, 36, 159, 0.3);
}

.footer-btn.whatsapp:hover {
  background: #25d366;
  border-color: #25d366;
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}

.footer-btn.donar:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  transform: translateY(-5px);
  box-shadow: 0 10px 20px var(--accent-glow);
}

@media (max-width: 600px) {
  .footer-social-btns {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
  }

  .footer-btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- MUSIC PLAYER --- */
.music-player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(10, 10, 10, 0.95);
  border-top: 1px solid var(--card-border);
  padding: 15px 40px;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(15px);
  transition: transform 0.3s ease;
}

[data-theme="light"] .music-player-bar {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
}

/* FLOATING PLAYLIST (New) */
.playlist-overlay {
  position: fixed;
  bottom: 90px;
  /* Just above player */
  right: 20px;
  width: 300px;
  max-height: 60vh;
  background: rgba(15, 15, 15, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  z-index: 2001;
  /* Above player if needed */
  

  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] .playlist-overlay {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #000;
}

.playlist-overlay.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.playlist-header {
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--accent-color);
}

.playlist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.playlist-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.playlist-item.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--accent-color);
}

.playlist-item span {
  font-size: 0.9rem;
  font-weight: 500;
}

.playlist-item small {
  font-size: 0.8rem;
  opacity: 0.6;
}

.player-track-info {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 25%;
}

.track-icon {
  width: 50px;
  height: 50px;
  background: #222;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 1.5rem;
}

.track-details {
  display: flex;
  flex-direction: column;
}

.track-title {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
}

.track-artist {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* Controls */
.player-controls-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  max-width: 600px;
}

.player-buttons {
  display: flex;
  align-items: center;
  gap: 25px;
}

.player-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 0.2s;
}

.player-btn:hover {
  color: var(--text-primary);
}

.player-btn.active {
  color: var(--accent-color);
}

.play-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--text-primary);
  color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* Nav Actions (Icons) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav-actions button,
.nav-actions .btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition:
    background 0.3s,
    color 0.3s;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-actions .btn-primary {
  background: var(--accent-color);
  color: #fff;
  box-shadow: 0 2px 10px rgba(76, 175, 80, 0.4);
}

.nav-actions .btn-primary:hover {
  background: #43a047;
  transform: translateY(-2px);
}

.nav-actions button:hover {
  background: rgba(128, 128, 128, 0.1);
  color: var(--accent-color);
}

.play-btn:hover {
  transform: scale(1.05);
}

.progress-container {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-family: monospace;
}

.progress-bar {
  flex-grow: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

[data-theme="light"] .progress-bar {
  background: rgba(0, 0, 0, 0.1);
}

.progress-fill {
  width: 0%;
  height: 100%;
  background: var(--text-primary);
  border-radius: 2px;
  position: relative;
  transition: width 0.1s linear;
}

.player-volume-wrapper {
  width: 25%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
}

.volume-slider {
  width: 100px;
}

@media (max-width: 768px) {
  .music-player-bar {
    flex-direction: column;
    padding: 15px 20px;
    gap: 10px;
    height: auto;
  }

  .player-track-info,
  .player-volume-wrapper {
    width: 100%;
    justify-content: space-between;
  }

  .player-controls-wrapper {
    width: 100%;
    order: -1;
    margin-bottom: 5px;
  }

  .playlist-overlay {
    width: 90%;
    right: 5%;
    bottom: 150px;
  }
}

/* --- FINAL VISUAL OVERHAUL (Overlay & Fit) --- */

/* 1. Global & Theme Variables for Gradient */
:root {
  --gradient-overlay: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  --overlay-text: #000;
}

[data-theme="dark"] {
  --gradient-overlay: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  --overlay-text: #fff;
}

/* 2. Slider Fix (Quienes Somos/Que Hacemos) */
.slider-container {
  width: 100%;
  /* Ensure shadows/edges aren't cut tightly */
  padding: 40px 10px 10px 10px;
  /* Added significant Top Padding */
  overflow: visible;
  /* Let cards breathe */
  max-height: calc(100vh - 160px);
  position: relative;
  /* Context for dots */
}

/* Ensure the section clips the overflow, not the container, to allow partial cards */
#que-hacemos {
  overflow: hidden;
}

.slider-pagination {
  position: absolute !important;
  bottom: 25px !important;
  /* Adjusted to sit comfortably inside the card area */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  display: flex !important;
  z-index: 20;

  /* Style refinement */
  background: rgba(0, 0, 0, 0.2);
  /* slightly darker for contrast */
  padding: 4px 10px;
  border-radius: 12px;
}

/* Pagination Controls (Grid) */
/* Card Subtitle */
.card-subtitle {
  font-size: 0.7rem;
  color: #888;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pagination Controls (Grid + Arrows) */
.pagination-controls {
  display: flex;
  justify-content: flex-start; /* Fixed clipping */
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  padding-bottom: 20px;
  position: relative;
}

/* Arrows */
.grid-arrow-btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 10px;
  transition:
    transform 0.2s,
    color 0.2s;
  display: flex;
  /* alignment */
  align-items: center;
}

.grid-arrow-btn:hover {
  color: var(--accent-color);
  transform: scale(1.1);
}

.grid-arrow-btn:disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Dots (Page Numbers styled as dots) */
.pagination-controls button.page-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  text-indent: -9999px;
  /* Hide text */
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.pagination-controls button.page-dot.active {
  background: var(--accent-color);
  transform: scale(1.4);
}

/* Animation for page change */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3. Product & Merch OVERLAY Design (Legacy - Replaced by Price Cards) */
/* .product-card rules are effectively deprecated for main sections */
.product-card {
  position: relative;
  /* height: 40vh !important; */
  /* max-height: 450px !important; */
  border-radius: 12px;
  overflow: hidden;
  /* display: block !important; */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.product-image {
  width: 100%;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.product-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.product-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  padding: 60px 20px 20px 20px !important;
  /* Top padding for gradient transition */
  background: var(--gradient-overlay);
  color: var(--overlay-text);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Force text colors in overlay */
.product-info h3,
.product-info p {
  color: var(--overlay-text) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin: 2px 0 !important;
}

/* 4. Gallery Masonry (Full Visibility) */
#galeria {
  display: flex;
  flex-direction: column;
}

/* Flex for height filling */
.gallery-masonry {
  flex: 1;
  display: block;
  column-count: 3;
  column-gap: 15px;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 150px);
  
  padding: 5px 2px;
}

.gallery-item {
  margin-bottom: 15px;
  break-inside: avoid;
  height: auto !important;
}

.gallery-item img {
  display: block;
  width: 100%;
  border-radius: 8px;
}

/* 5. Contact Map & Layout */
.contact-wrapper {
  display: flex;
  flex-direction: row;
  gap: 20px;
  height: 100%;
  max-height: calc(100vh - 180px);
  padding-bottom: 20px;
}

.contact-left-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-form-col {
  flex: 1;
  
}

.map-container {
  flex: 1;
  /* Grow to fill left col */
  min-height: 200px;
  border-radius: 12px;
  overflow: hidden;
  background: #333;
  /* Placeholder */
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 768px) {
  .contact-wrapper {
    flex-direction: column;
  }

  .gallery-masonry {
    column-count: 2;
  }

  .product-card {
    height: 45vh !important;
  }
}

/* --- LATEST FIXES (FINAL POLISH) --- */

/* Global Compactness */
section,
header.media-hero,
footer {
  padding-top: 100px !important;
  /* More space from navbar */
  padding-bottom: 90px !important;
  /* Space for player */
}

.section-header {
  margin-bottom: 15px !important;
}

/* 1. Gallery Fix: CSS Masonry */
/* This section is now handled by the "FINAL VISUAL OVERHAUL" section above. */
/* .gallery-masonry {
    display: block;
    column-count: 3;
    column-gap: 15px;
    width: 100%;
    max-height: calc(100vh - 180px);
    Strictly fit
    
    padding: 10px;
    scrollbar-width: none;
}

.gallery-masonry::-webkit-scrollbar {
    display: none;
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    height: auto !important;
    Natural height
    position: relative;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
} */

/* 2. Slider Dots & Layout */
/* This section is now handled by the "FINAL VISUAL OVERHAUL" section above. */
/* .slider-container {
    max-height: calc(100vh - 150px);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.slider-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
} */

/* Move dots up to avoid player overlap */
/* .slider-pagination {
    position: absolute;
    bottom: 25px;
    Higher up
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    z-index: 20;
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, 0.3);
    Legibility backing
    padding: 5px 10px;
    border-radius: 20px;
} */

.slider-btn {
  z-index: 20;
}

/* Ensure buttons are clickable */

/* 3. Products & Merch: Compact Cards */
/* Force cards to be smaller to fit Titles + Cards + Player */
/* This section is now handled by the "FINAL VISUAL OVERHAUL" section above. */
/* .product-card {
    height: 35vh !important;
    Strict short height
    max-height: 350px !important;
}

.product-image {
    flex: 1 !important;
    height: auto !important;
}

.product-info {
    padding: 10px !important;
}

.product-info h3 {
    font-size: 1rem !important;
    margin: 5px 0 !important;
} */

.slide-card {
  height: 45vh !important;
  max-height: 450px !important;
}

/* 4. Contact: Compact & Visible */
/* This section is now handled by the "FINAL VISUAL OVERHAUL" section above. */
/* .contact-wrapper {
    flex: 1;
    
    padding-bottom: 20px;
    gap: 10px;
    display: flex;
    flex-direction: row;
}

.contact-item {
    margin-bottom: 5px !important;
}

.map-container {
    min-height: 150px;
    flex: 1;
} */

@media (max-width: 768px) {
  /* This section is now handled by the "FINAL VISUAL OVERHAUL" section above. */
  /* .contact-wrapper {
        flex-direction: column;
    }

    .gallery-masonry {
        column-count: 2;
    }

    .product-card {
        height: 30vh !important;
    } */
}

/* Player Bar Override */
.music-player-bar {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  height: 85px;
  z-index: 9999;
}

/* --- SIMPLE FULLSCREEN GALLERY --- */
.simple-gallery-section {
  position: relative;
  height: 100vh;
  width: 100%;
  background: #000;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

.simple-slides-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.simple-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.simple-slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  /* Slight overlay for contrast */
}

.simple-slide.active {
  opacity: 1;
  z-index: 2;
  transform: scale(1.02);
  /* Slight movement effect */
  transition:
    opacity 1.2s ease,
    transform 10s linear;
}

/* OVERLAY TEXT */
.gallery-overlay {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
  pointer-events: none;
  width: 90%;
}

.gallery-overlay h2 {
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -1px;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.gallery-overlay p {
  font-size: 1.1rem;
  color: #eee;
  margin-top: 5px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* BUTTONS */
.simple-prev,
.simple-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

.simple-prev:hover,
.simple-next:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  transform: translateY(-50%) scale(1.1);
}

.simple-prev {
  left: 30px;
}

.simple-next {
  right: 30px;
}

@media (max-width: 768px) {
  .gallery-overlay h2 {
    font-size: 2rem;
  }

  .simple-prev,
  .simple-next {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

/* --- LIGHT THEME OVERRIDES --- */

/* Contacto */
[data-theme="light"] .contact-full-section,
[data-theme="light"] .contact-full-info {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

[data-theme="light"] .contact-title-main,
[data-theme="light"] .contact-subtitle {
  color: var(--text-primary);
}

[data-theme="light"] .contact-desc {
  color: var(--text-secondary);
}

[data-theme="light"] .dark-input {
  background: #ffffff;
  border: 1px solid #ddd;
  color: var(--text-primary);
}

[data-theme="light"] .dark-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.2);
}

[data-theme="light"] .dark-input::placeholder {
  color: #888;
}

[data-theme="light"] .meta-item,
[data-theme="light"] .light-text {
  color: var(--text-primary);
}

[data-theme="light"] .meta-item i {
  color: var(--accent-color);
}

/* Footer Overlay */
[data-theme="light"] .footer {
  background: transparent;
}

[data-theme="light"] .footer-video-bg video.active {
  opacity: 1;
  /* Quita el overlay oscuro con transparencia */
}

[data-theme="light"] .footer-message {
  color: var(--text-primary);
  text-shadow:
    0 1px 4px rgba(255, 255, 255, 0.8),
    0 0 10px rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .footer-btn {
  color: var(--text-primary);
  border-color: var(--text-primary);
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8);
}

/* Nosotros (Bento Panels) */
[data-theme="light"] .bento-panel {
  background: var(--card-bg);
}

[data-theme="light"] .bento-slide h3,
[data-theme="light"] .bento-slide.static h3,
[data-theme="light"] .bento-slide i,
[data-theme="light"] .bento-slide.static i {
  color: var(--text-primary);
}

[data-theme="light"] .bento-slide p,
[data-theme="light"] .bento-slide.static p {
  color: var(--text-secondary);
}

[data-theme="light"] .bento-controls button {
  color: var(--text-primary);
}

[data-theme="light"] .bento-controls button:hover {
  color: var(--accent-color);
}

/* Productos */
[data-theme="light"] .product-price-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
}

[data-theme="light"] .card-image {
  background: #f8f9fa;
}

[data-theme="light"] .card-details {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.9) 60%,
    rgba(255, 255, 255, 0) 100%
  );
}

[data-theme="light"] .product-price-card .card-text-top h3 {
  color: var(--text-primary);
  text-shadow: none;
}

[data-theme="light"] .product-price-card .card-subtitle {
  color: var(--text-secondary);
}

[data-theme="light"] .product-price-card .price-new {
  color: var(--text-primary);
}

[data-theme="light"] .product-price-card .price-old {
  color: #999;
}

/* Navbar overrides for light theme depending on active section */
[data-theme="light"] body:not(.dark-nav-force) .navbar {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
}

[data-theme="light"] body:not(.dark-nav-force) .navbar .nav-links li a {
  color: #000;
}

[data-theme="light"] body:not(.dark-nav-force) .navbar .nav-links li a:hover,
[data-theme="light"] body:not(.dark-nav-force) .navbar .nav-links li a.active {
  color: var(--accent-color);
}

[data-theme="light"] body:not(.dark-nav-force) .navbar .logo-patch img {
  filter: brightness(0);
  /* Black pixels for non-transparent areas */
}

[data-theme="light"] body:not(.dark-nav-force) .navbar .hamburger {
  color: #000;
}

/* Ensure navbar reverts to dark defaults when dark-nav-force is active *even* in light theme */
[data-theme="light"] body.dark-nav-force .navbar {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
}

[data-theme="light"] body.dark-nav-force .navbar .nav-links li a {
  color: #ffffff;
}

[data-theme="light"] body.dark-nav-force .navbar .logo-patch img {
  filter: invert(1) brightness(100%);
}


.prod-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}
.prod-slide.active {
  opacity: 1;
  z-index: 2;
}

/* Responsive font sizes based on viewport height to prevent vertical cropping */
.bento-slide i, .bento-slide.static i {
  font-size: clamp(1rem, 4vh, 2rem) !important;
  margin-bottom: 0 !important;
}
.bento-slide h3, .bento-slide.static h3 {
  font-size: clamp(1.1rem, 3vh, 1.5rem) !important;
  margin-bottom: 0 !important;
}
.bento-slide p, .bento-slide.static p {
  font-size: clamp(0.75rem, 2vh, 1rem) !important;
  line-height: clamp(1.1, 2.5vh, 1.4) !important;
  padding: 0 10px !important;
}
.bento-slide .btn-voluntariado {
  font-size: clamp(0.6rem, 1.5vh, 0.75rem) !important;
  padding: clamp(4px, 1vh, 8px) clamp(8px, 2vh, 16px) !important;
  margin-top: 0 !important;
}

/* Navigation clearance and scrollable panels. */
:root { --nav-height: 84px; --player-height: 85px; }
.snap-container { height: 100dvh; }
.scroll-content > section,
.scroll-content > header,
.scroll-content > footer { height: 100%; min-height: 0; }
#inicio.media-hero {
  padding-top: calc(var(--nav-height) + 20px) !important;
  padding-bottom: calc(var(--player-height) + 20px) !important;
}
.media-container {
  min-height: 0;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  max-height: 600px;
}
.main-player-view, .playlist-sidebar { min-height: 0; min-width: 0; }
.mode-switch-header { flex-shrink: 0; padding: 12px 20px; }
.mode-btn { background: none; border: 0; font: inherit; min-height: 44px; }
.playlist-scroll-area {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: var(--text-secondary) transparent;
}
.playlist-entry { width: 100%; text-align: left; font: inherit; color: inherit; }
.hamburger { border: 0; background: none; min-width: 44px; min-height: 44px; z-index: 1001; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-color); outline-offset: 3px;
}
#contacto.contact-full-section {
  padding: calc(var(--nav-height) + 24px) 5% calc(var(--player-height) + 24px) !important;
  background: var(--bg-primary); color: var(--text-primary);
}
.contact-full-wrapper {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); width: 100%; max-width: 1300px;
  margin: 0 auto; height: 100%; min-height: 0; padding: 0;
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
}
.contact-full-info { min-width: 0; padding: 24px 0; background: var(--bg-primary); }
.contact-title-main { margin-bottom: 24px; font-size: clamp(2rem, 4vw, 3.5rem); color: var(--text-primary); }
.contact-subtitle { font-size: 1.35rem; color: var(--text-primary); }
.contact-desc { color: var(--text-secondary); margin: 12px 0 28px; }
.contact-meta-grid { flex-direction: column; gap: 20px; margin-bottom: 32px; }
.contact-full-info .light-text { color: var(--text-secondary); }
.contact-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  align-self: flex-start; max-width: 100%; padding: 16px 22px;
  background: var(--accent-color); color: #071b09; border-radius: 8px;
  text-decoration: none; font-weight: 700; text-align: center;
}
.contact-whatsapp:hover { background: #66bb6a; }
.contact-full-map { min-width: 0; min-height: 300px; border-radius: 12px; overflow: hidden; }
@media (max-width: 900px) {
  .media-container {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    padding: 0; height: 100%; max-height: none;
  }
  #inicio .scroll-down { display: none; }
  .nav-links { overflow-y: auto; padding: var(--nav-height) 20px calc(var(--player-height) + 20px); }
}
@media (max-width: 768px) {
  .music-player-bar { height: auto; gap: 6px; padding: 10px 16px; }
  .player-track-info { display: none; }
  .player-controls-wrapper { margin: 0; }
  .player-volume-wrapper { justify-content: flex-end; }
  .player-btn { min-width: 44px; min-height: 44px; }
  #contacto.contact-full-section { padding-left: 20px !important; padding-right: 20px !important; }
  .contact-full-wrapper { grid-template-columns: minmax(0, 1fr); display: grid; gap: 24px; }
  .contact-full-info { padding: 0; }
  .contact-full-map { min-height: 280px; }
  .contact-title-main { margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-content { transition: none; }
  .breathing-logo, .scroll-down, .equalizer span { animation: none; }
}

.contact-full-wrapper { scrollbar-width: thin; scrollbar-color: var(--text-secondary) transparent; }
.floating-wa-btn { bottom: calc(var(--player-height) + 20px); }
@media (max-width: 768px) { .floating-wa-btn { display: none; } }

/* Center content in the usable viewport, keeping fixed controls clear. */
#inicio.media-hero { justify-content: center; }
#nosotros.interactive-nosotros, #merchandising.section-padding, .scroll-content > .footer {
  padding-top: calc(var(--nav-height) + 24px) !important;
  padding-bottom: calc(var(--player-height) + 24px) !important;
  justify-content: center;
}
.contact-full-wrapper { max-height: 620px; margin-block: auto; }
.contact-full-info { justify-content: center; }
.footer > .container { justify-content: center; padding-bottom: 0; }
.merch-container { max-height: 660px; }
.merch-hero-title { font-size: clamp(2rem, 4vw, 4.5rem); overflow-wrap: anywhere; }
.merch-hero-desc { color: #d1d1d1; }
.merch-info { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.about-layout {
  display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.6fr);
  gap: clamp(32px, 6vw, 96px); width: 90%; max-width: 1120px;
  height: min(100%, 640px); min-height: 0; margin: auto;
}
.about-index { display: flex; flex-direction: column; min-height: 0; }
.about-index h2 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; margin-bottom: 28px; }
.about-topics { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.about-topic {
  display: block; flex-shrink: 0; min-height: 44px; padding: 10px 12px;
  background: transparent; border: 0; border-radius: 6px; text-align: left;
  font: inherit; font-size: .95rem; color: var(--text-secondary); cursor: pointer;
}
.about-topic:hover { color: var(--text-primary); background: var(--bg-secondary); }
.about-topic[aria-pressed="true"] { color: var(--text-primary); background: var(--card-hover-bg); font-weight: 700; }
.about-reading { display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--text-secondary); }
.about-stories { flex: 1; min-height: 0; display: flex; }
.about-story {
  width: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: flex-start; padding: 32px 4px;
}
.about-story[hidden] { display: none; }
.about-story > :first-child { margin-top: auto; }
.about-story > :last-child { margin-bottom: auto; }
.about-story h3 { font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.15; margin-bottom: 24px; text-wrap: balance; }
.about-story p { color: var(--text-secondary); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.75; max-width: 60ch; }
.about-action { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; margin-top: 28px; color: var(--text-primary); text-underline-offset: 6px; }
.about-controls { display: flex; align-items: center; justify-content: space-between; border-top: var(--card-border); padding-top: 16px; gap: 20px; color: var(--text-secondary); }
.about-controls > div { display: flex; gap: 8px; }
.about-controls button { width: 48px; height: 48px; background: var(--bg-secondary); color: var(--text-primary); border: var(--card-border); border-radius: 50%; cursor: pointer; }
.about-controls button:hover { background: var(--card-hover-bg); }
.about-mobile-label, .about-select { display: none; }
.about-story, .about-topics, .merch-info { scrollbar-width: thin; scrollbar-color: var(--text-secondary) transparent; }
@media (max-width: 768px) {
  .about-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 20px; height: 100%; }
  .about-index h2 { margin-bottom: 18px; }
  .about-topics { display: none; }
  .about-mobile-label { display: block; font-size: .85rem; color: var(--text-secondary); margin-bottom: 6px; }
  .about-select { display: block; width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--text-primary); background: var(--bg-secondary); border: var(--card-border); border-radius: 6px; }
  .about-story { padding: 20px 4px; }
  .about-story h3 { font-size: 1.75rem; margin-bottom: 16px; }
  .about-story p { line-height: 1.6; }
  .about-controls { padding-top: 10px; }
  .contact-full-info { justify-content: flex-start; }
  .contact-full-wrapper { max-height: none; }
  .merch-hero-layout { padding: 0 36px; gap: 16px; justify-content: center; }
  .merch-image-box { flex: 0 1 38%; min-height: 0; width: 100%; }
  .merch-floating-img { max-height: 100%; width: auto; max-width: 100%; }
  .merch-info { flex: 0 1 auto; min-height: 0; }
  .merch-hero-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .merch-nav-btn { width: 44px; height: 44px; }
  .footer-social-btns { gap: 12px; }
}

.catalog-position {
  position: absolute; bottom: calc(var(--player-height) + 28px); left: 50%;
  transform: translateX(-50%); z-index: 100; width: max-content; max-width: calc(100% - 40px); text-align: center;
}
.btn-catalogo {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 28px; border-radius: 8px; font-size: 1.15rem; font-weight: 700;
  background: #25d366; color: #072913; text-decoration: none;
}
body .floating-wa-btn { bottom: calc(var(--player-height) + 20px); }
.scroll-down { color: var(--text-secondary); min-width: 44px; min-height: 44px; text-align: center; }
.footer .footer-message { color: #fff; font-size: clamp(1.15rem, 2.5vw, 2rem); font-weight: 600; }
@media (max-width: 768px) {
  body .floating-wa-btn { display: none; }
  .btn-catalogo { font-size: 1rem; padding: 14px 20px; }
}

/* Photo-only navigation for personalized projects. */
.merch-container { --thumbnail-space: 104px; }
.merch-hero-layout { height: calc(100% - var(--thumbnail-space)); }
.merch-nav-btn { top: calc((100% - var(--thumbnail-space)) / 2); }
.merch-thumbnails {
  position: absolute; bottom: 0; left: 0; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 4px; z-index: 3;
}
.merch-thumbnail {
  width: 88px; height: 76px; padding: 6px; flex-shrink: 0;
  border: 1px solid #454545; border-radius: 8px; background: #151515;
  cursor: pointer; opacity: .65; transition: opacity .2s, border-color .2s;
}
.merch-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.merch-thumbnail:hover { opacity: 1; border-color: #aaa; }
.merch-thumbnail[aria-pressed="true"] { opacity: 1; border: 2px solid var(--accent-color); }
@media (max-width: 768px) {
  .merch-container { --thumbnail-space: 80px; }
  .merch-thumbnails { gap: 8px; }
  .merch-thumbnail { width: clamp(44px, 14vw, 60px); height: 56px; padding: 4px; }
}

/* Fixed chrome must use the same dynamic viewport as every page panel. */
.snap-container { overflow: clip; }
.scroll-content > section, .scroll-content > header, .scroll-content > footer {
  height: 100% !important;
}
body:has(#nosotros:not([inert])) .floating-wa-btn { display: none; }
@media (max-width: 768px) {
  .music-player-bar {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px;
    grid-template-rows: 44px 24px; column-gap: 8px; row-gap: 2px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    height: auto; align-items: center;
  }
  .player-controls-wrapper, .player-volume-wrapper { display: contents; }
  .player-volume-wrapper > i { display: none; }
  .player-volume-wrapper .volume-slider { grid-column: 1; grid-row: 1; width: 64px; min-width: 0; height: 44px; }
  .player-buttons { grid-column: 2; grid-row: 1; gap: 0; justify-content: center; width: 100%; }
  .player-buttons .player-btn { min-width: 30px; width: 30px; min-height: 44px; padding: 0; }
  .player-buttons .play-btn { width: 44px; height: 44px; flex-shrink: 0; }
  #playlistToggle { grid-column: 3; grid-row: 1; margin: 0 !important; width: 44px; height: 44px; }
  .progress-container { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .catalog-position { bottom: calc(var(--player-height) + 24px); }
}