/* 
         * DESIGN SYSTEM & VARIABLES 
         */
 :root {
     --color-bg: #fbf9f4;
     /* Cream / Off-white */
     --color-text-main: #3e2b26;
     /* Chocolate */
     --color-accent: #c59d5f;
     /* Soft Gold */
     --color-accent-hover: #a68146;
     --color-white: #ffffff;
     --font-display: 'Playfair Display', serif;
     --font-body: 'Lato', sans-serif;
     --font-script: 'Dancing Script', cursive;

     --spacing-container: 1280px;
     --radius-soft: 12px;
     --radius-pill: 50px;
 }

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

 body {
     font-family: var(--font-body);
     background-color: var(--color-bg);
     color: var(--color-text-main);
     line-height: 1.7;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     overflow-x: hidden;
     text-rendering: optimizeSpeed;
 }

 h1,
 h2,
 h3,
 h4 {
     font-family: var(--font-display);
     font-weight: 700;
     line-height: 1.2;
 }

 img {
     max-width: 100%;
     height: auto;
     display: block;
 }

 a {
     text-decoration: none;
     color: inherit;
     transition: all 0.3s ease;
 }

 p {
     margin-bottom: 1.5rem;
     font-weight: 300;
     color: #5d4d49;
 }

 /* Utilities */
 .container {
     max-width: var(--spacing-container);
     margin: 0 auto;
     padding: 0 30px;
 }

 .highlight-script {
     font-family: var(--font-script);
     color: var(--color-accent);
     font-size: 1.5em;
     display: inline-block;
     transform: rotate(-3deg);
 }

 .btn-order {
     display: inline-block;
     background-color: var(--color-text-main);
     color: var(--color-white);
     padding: 14px 40px;
     border-radius: var(--radius-pill);
     font-weight: 700;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     font-size: 0.9rem;
     box-shadow: 0 4px 15px rgba(62, 43, 38, 0.2);
     position: relative;
     overflow: hidden;
     z-index: 1;
 }

 .btn-order::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 0%;
     height: 100%;
     background-color: var(--color-accent);
     transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
     z-index: -1;
 }

 .btn-order:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(62, 43, 38, 0.3);
 }

 .btn-order:hover::before {
     width: 100%;
 }

 /* 
         * NAVIGATION 
         */
 .navbar {
     padding: 40px 0;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: 100;
 }

 .navbar .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .brand {
     font-family: var(--font-display);
     font-size: 2rem;
     font-weight: 700;
     letter-spacing: -1px;
 }

 .nav-links {
     display: flex;
     gap: 40px;
 }

 .nav-links a {
     font-family: var(--font-display);
     font-size: 1.1rem;
     position: relative;
 }

 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 1px;
     background-color: var(--color-text-main);
     transition: width 0.3s ease;
 }

 .nav-links a:hover::after {
     width: 100%;
 }

 .nav-links .nav-cta {
     background-color: var(--color-accent);
     color: var(--color-white);
     padding: 8px 25px;
     border-radius: var(--radius-pill);
     font-size: 0.9rem;
     font-weight: 700;
     transition: transform 0.3s ease, background-color 0.3s ease;
     white-space: nowrap;
 }

 .nav-links .nav-cta::after {
     display: none;
 }

 .nav-cta:hover {
     background-color: var(--color-accent-hover);
     transform: translateY(-2px);
 }

 /* Hamburger Button */
 .hamburger-btn {
     display: none;
     flex-direction: column;
     justify-content: space-between;
     width: 30px;
     height: 21px;
     background: transparent;
     background: transparent;
     border: none;
     cursor: pointer;
     z-index: 200;
     padding: 0;
     position: relative;
     /* Essential for z-index to work */
 }

 .hamburger-btn .bar {
     width: 100%;
     height: 3px;
     background-color: var(--color-text-main);
     border-radius: 10px;
     transition: all 0.3s ease;
 }

 .hamburger-btn.active .bar:nth-child(1) {
     transform: translateY(9px) rotate(45deg);
 }

 .hamburger-btn.active .bar:nth-child(2) {
     opacity: 0;
 }

 .hamburger-btn.active .bar:nth-child(3) {
     transform: translateY(-9px) rotate(-45deg);
     font-family: var(--font-body);
     background-color: var(--color-bg);
     color: var(--color-text-main);
     line-height: 1.7;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     overflow-x: hidden;
     text-rendering: optimizeSpeed;
 }

 h1,
 h2,
 h3,
 h4 {
     font-family: var(--font-display);
     font-weight: 700;
     line-height: 1.2;
 }

 img {
     max-width: 100%;
     height: auto;
     display: block;
 }

 a {
     text-decoration: none;
     color: inherit;
     transition: all 0.3s ease;
 }

 p {
     margin-bottom: 1.5rem;
     font-weight: 300;
     color: #5d4d49;
 }

 /* Utilities */
 .container {
     max-width: var(--spacing-container);
     margin: 0 auto;
     padding: 0 30px;
 }

 .highlight-script {
     font-family: var(--font-script);
     color: var(--color-accent);
     font-size: 1.5em;
     display: inline-block;
     transform: rotate(-3deg);
 }

 .btn-order {
     display: inline-block;
     background-color: var(--color-text-main);
     color: var(--color-white);
     padding: 14px 40px;
     border-radius: var(--radius-pill);
     font-weight: 700;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     font-size: 0.9rem;
     box-shadow: 0 4px 15px rgba(62, 43, 38, 0.2);
     position: relative;
     overflow: hidden;
     z-index: 1;
 }

 .btn-order::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 0%;
     height: 100%;
     background-color: var(--color-accent);
     transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
     z-index: -1;
 }

 .btn-order:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(62, 43, 38, 0.3);
 }

 .btn-order:hover::before {
     width: 100%;
 }

 /* 
        * NAVIGATION 
        */
 .navbar {
     padding: 40px 0;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: 100;
 }

 .navbar .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .brand {
     font-family: var(--font-display);
     font-size: 2rem;
     font-weight: 700;
     letter-spacing: -1px;
 }

 .nav-links {
     display: flex;
     gap: 40px;
 }

 .nav-links a {
     font-family: var(--font-display);
     font-size: 1.1rem;
     position: relative;
 }

 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 1px;
     background-color: var(--color-text-main);
     transition: width 0.3s ease;
 }

 .nav-links a:hover::after {
     width: 100%;
 }

 .nav-links .nav-cta {
     background-color: var(--color-accent);
     color: var(--color-white);
     padding: 8px 25px;
     border-radius: var(--radius-pill);
     font-size: 0.9rem;
     font-weight: 700;
     transition: transform 0.3s ease, background-color 0.3s ease;
     white-space: nowrap;
 }

 .nav-links .nav-cta::after {
     display: none;
 }

 .nav-cta:hover {
     background-color: var(--color-accent-hover);
     transform: translateY(-2px);
 }

 /* Hamburger Button */
 .hamburger-btn {
     display: none;
     flex-direction: column;
     justify-content: space-between;
     width: 30px;
     height: 21px;
     background: transparent;
     background: transparent;
     border: none;
     cursor: pointer;
     z-index: 200;
     padding: 0;
     position: relative;
     /* Essential for z-index to work */
 }

 .hamburger-btn .bar {
     width: 100%;
     height: 3px;
     background-color: var(--color-text-main);
     border-radius: 10px;
     transition: all 0.3s ease;
 }

 .hamburger-btn.active .bar:nth-child(1) {
     transform: translateY(9px) rotate(45deg);
 }

 .hamburger-btn.active .bar:nth-child(2) {
     opacity: 0;
 }

 .hamburger-btn.active .bar:nth-child(3) {
     transform: translateY(-9px) rotate(-45deg);
 }

 /* 
        * HERO SECTION (Asymmetric)
        */
 .hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     padding-top: 80px;
     /* Space for nav */
     position: relative;
     overflow: hidden;
 }

 /* Background texture simulation using CSS radial gradient */
 .hero::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -20%;
     width: 80%;
     height: 150%;
     background: linear-gradient(135deg, rgba(197, 157, 95, 0.1) 0%, rgba(251, 249, 244, 0) 70%);
     border-radius: 50%;
     z-index: -1;
 }

 .hero-grid {
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: 60px;
     align-items: center;
 }

 .hero-title {
     font-size: clamp(3.5rem, 6vw, 5.5rem);
     margin-bottom: 1.5rem;
     letter-spacing: -2px;
     line-height: 1;
 }

 .hero-title span {
     color: var(--color-accent);
     font-style: italic;
 }

 .hero-image-wrapper {
     position: relative;
     z-index: 1;
 }

 /* Organic shape via border-radius */
 .hero-img {
     width: 100%;
     height: 100%;
     /* Ensure it fills the aspect ratio box */
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.1);
     animation: morph 8s ease-in-out infinite;
     object-fit: cover;
     /* Prevent distortion */
     aspect-ratio: 1/1.1;
 }

 @keyframes morph {
     0% {
         border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     }

     50% {
         border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
     }

     100% {
         border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     }
 }

 /* 
        * STORY SECTION (ZigZag)
        */
 .story {
     padding: 120px 0 100px;
 }

 /* SVG Wave Divider */
 .wave-divider {
     position: absolute;
     left: 0;
     width: 100%;
     line-height: 0;
     direction: ltr;
 }

 .story-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
     margin-bottom: 120px;
 }

 .story-row.reverse {
     margin-bottom: 0;
 }

 /* Responsive ordering for zig zag */
 .story-row.reverse .story-content {
     order: -1;
 }

 .story-img {
     border-radius: 4px;
     /* Arch shape */
     border-radius: 200px 200px 20px 20px;
     overflow: hidden;
     /* Ensure image stays inside shape */
     box-shadow: 0 20px 40px rgba(62, 43, 38, 0.1);
     height: 100%;
     /* Match grid height */
     min-height: 400px;
     /* Minimum height for visual balance */
 }

 .story-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .story-content h2 {
     font-size: 3rem;
     margin-bottom: 1.5rem;
 }

 .ornament {
     width: 60px;
     height: 2px;
     background-color: var(--color-accent);
     margin-bottom: 30px;
 }

 /* 
        * PRODUCTS (Editorial Cards)
        */
 .products {
     padding: 0 0 120px 0;
 }

 .products-header {
     text-align: center;
     margin-bottom: 80px;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
 }

 .products-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 40px;
 }

 .card {
     background-color: var(--color-white);
     border-radius: 20px;
     padding: 20px;
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     position: relative;
     border: 1px solid rgba(0, 0, 0, 0.03);
     display: flex;
     flex-direction: column;
 }

 .card:hover {
     transform: translateY(-15px);
     box-shadow: 0 30px 60px rgba(62, 43, 38, 0.1);
 }

 .card-img-container {
     border-radius: 15px;
     overflow: hidden;
     margin-bottom: 25px;
     position: relative;
     padding-top: 110%;
     /* Tall aspect ratio */
 }

 .card-img-container img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* Critical for cards */
     transition: transform 0.8s ease;
 }

 .card:hover .card-img-container img {
     transform: scale(1.1);
 }

 .card-meta {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 15px;
 }

 .card-title {
     font-size: 1.5rem;
     font-family: var(--font-display);
 }

 .card-price {
     font-family: var(--font-script);
     /* Handwritten style */
     font-size: 1.8rem;
     color: var(--color-accent);
 }

 .card-desc {
     font-size: 0.95rem;
     margin-bottom: 30px;
     flex-grow: 1;
 }

 /* 
        * FOOTER
        */
 footer {
     background-color: var(--color-text-main);
     color: var(--color-bg);
     padding: 80px 0 30px;
     position: relative;
 }

 /* Footer wave top */
 .footer-wave {
     position: absolute;
     top: -50px;
     left: 0;
     width: 100%;
     height: 50px;
     /* Simple SVG wave data URI could go here, simulating with border-radius for speed in code size */
     background-color: var(--color-text-main);
     border-radius: 50% 50% 0 0 / 100% 100% 0 0;
     transform: scaleX(1.5);
 }

 .footer-content {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 50px;
     margin-bottom: 60px;
 }

 .footer-brand h2 {
     font-size: 2.5rem;
     margin-bottom: 20px;
     color: var(--color-accent);
 }

 .social-circle {
     display: inline-flex;
     width: 45px;
     height: 45px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     align-items: center;
     justify-content: center;
     margin-right: 10px;
     transition: 0.3s;
 }

 .social-circle:hover {
     border-color: var(--color-accent);
     color: var(--color-accent);
 }

 /* 
        * STICKY BAR (Mobile Conversion)
        */
 .mobile-sticky-bar {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     background-color: var(--color-white);
     padding: 15px 20px;
     box-shadow: 0 -5px 20px rgba(62, 43, 38, 0.15);
     z-index: 999;
     display: none;
     animation: slideUp 0.5s ease-out;
 }

 .mobile-sticky-bar .btn-order {
     display: block;
     width: 100%;
     text-align: center;
     background-color: var(--color-accent);
     /* Gold for high urgency */
     padding: 12px;
     font-size: 1rem;
     box-shadow: 0 4px 10px rgba(197, 157, 95, 0.4);
 }

 .mobile-sticky-bar .btn-order:hover {
     background-color: var(--color-accent-hover);
 }

 @keyframes slideUp {
     from {
         transform: translateY(100%);
     }

     to {
         transform: translateY(0);
     }
 }

 @media (max-width: 900px) {
     .hero-grid {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .hero-image-wrapper {
         order: -1;
         margin-bottom: 40px;
     }

     .hero-img {
         width: 80%;
         margin: 0 auto;
         aspect-ratio: 1/1;
     }

     .story-row {
         grid-template-columns: 1fr;
     }

     .story-row.reverse .story-content {
         order: 0;
     }

     .story-img {
         order: -1;
     }

     .hamburger-btn {
         display: flex;
         position: fixed;
         right: 30px;
         top: 35px;
         z-index: 9999;
         /* Z-index extremo para evitar conflictos */
         background: rgba(251, 249, 244, 0.8);
         /* Tu fondo original */
         padding: 10px;
         /* AUMENTADO: Hacemos el área de clic más grande sin cambiar el icono */
         border-radius: 50%;
         /* Opcional: lo hace redondo al tacto */
     }

     .nav-links {
         /* Base state for animation */
         transform: translateX(100%);
         opacity: 0;
         visibility: hidden;
         pointer-events: none;
         /* Prevent clicks when hidden */

         /* Positioning */
         position: fixed;
         top: 0;
         right: 0;
         height: 100vh;
         width: 100%;
         max-width: 300px;
         background-color: var(--color-bg);
         flex-direction: column;
         justify-content: center;
         align-items: center;
         box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
         transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
         z-index: 1500;
         display: flex;
     }

     .nav-links.active {
         transform: translateX(0);
         visibility: visible;
         opacity: 1;
         pointer-events: auto;
         /* Aseguramos que nada lo tape */
         z-index: 9998;
     }

     .nav-links a {
         font-size: 1.5rem;
         margin: 15px 0;
     }

     .nav-links .nav-cta {
         font-size: 1.2rem;
         /* Larger on mobile */
         margin-top: 20px;
         padding: 12px 30px;
     }

     /* Mobile Menu Placeholder */

     .mobile-sticky-bar {
         display: block;
     }

     /* Adjust footer to not be covered */
     footer {
         padding-bottom: 90px;
     }
 }

 /* 
* TIENDA E-COMMERCE SECTION
*/
 .tienda-section {
     padding: 80px 0 120px 0;
     background-color: var(--color-bg);
 }

 .tienda-header {
     text-align: center;
     margin-bottom: 60px;
 }

 .tienda-header h2 {
     font-size: clamp(2.5rem, 5vw, 4rem);
     margin-bottom: 1rem;
     font-family: var(--font-display);
 }

 .tienda-header p {
     font-size: 1.1rem;
     color: #5d4d49;
     max-width: 600px;
     margin: 0 auto;
 }

 /* ========================================
   SHOWCASE DE LUJO - GRID ASIMÉTRICO
   ======================================== */
 /* Fin de estilos de tienda */
 /* ========================================
   SHOWCASE DE LUJO (NUEVA TIENDA)
   ======================================== */

 /* HERO SECTION - IMPACTO VISUAL */
 .showcase-hero {
     position: relative;
     height: 85vh;
     /* Casi pantalla completa */
     min-height: 600px;
     background: url('img/hero.png') no-repeat center center/cover;
     /* Fallback por si no hay imagen específica, usamos un color rico */
     background-color: #2a1d1a;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     overflow: hidden;
 }

 /* Si no existe hero-tienda.jpg, usa un gradiente elegante */
 .showcase-hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(62, 43, 38, 0.8) 0%, rgba(42, 29, 26, 0.9) 100%);
     z-index: 1;
 }

 .hero-content {
     position: relative;
     z-index: 2;
     padding: 20px;
 }

 .showcase-hero h1 {
     font-family: 'Playfair Display', serif;
     font-size: clamp(3rem, 8vw, 6rem);
     margin-bottom: 20px;
     line-height: 1.1;
     letter-spacing: -0.02em;
 }

 .text-accent {
     color: var(--color-accent);
     /* Tu dorado */
     font-style: italic;
 }

 .showcase-hero p {
     font-family: 'Lato', sans-serif;
     font-size: clamp(1.1rem, 3vw, 1.5rem);
     margin-bottom: 40px;
     font-weight: 300;
     opacity: 0.9;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
 }

 /* BOTÓN MAESTRO (CTA) */
 .btn-maestro {
     display: inline-block;
     background: linear-gradient(135deg, #c59d5f 0%, #a67c52 100%);
     color: white;
     padding: 20px 48px;
     border-radius: 50px;
     font-family: 'Lato', sans-serif;
     font-weight: 700;
     font-size: 1.1rem;
     text-transform: uppercase;
     letter-spacing: 2px;
     text-decoration: none;
     box-shadow: 0 10px 30px rgba(197, 157, 95, 0.4);
     transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .btn-maestro::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transform: translateX(-100%);
     transition: transform 0.6s ease;
 }

 .btn-maestro:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(197, 157, 95, 0.6);
     background: linear-gradient(135deg, #d4af72 0%, #b88d60 100%);
 }

 .btn-maestro:hover::after {
     transform: translateX(100%);
 }

 .secure-text {
     margin-top: 20px;
     font-size: 0.9rem;
     opacity: 0.7;
     font-family: 'Lato', sans-serif;
 }

 /* GALLERY SECTION */
 .gallery-section {
     padding: 100px 0;
     background-color: var(--color-bg);
 }

 .showcase-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 40px;
     margin-top: 60px;
 }

 .showcase-item {
     position: relative;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     /* Sombra suave */
     transition: transform 0.4s ease;
     aspect-ratio: 4/5;
     /* Formato retrato elegante */
     background-color: white;
 }

 .showcase-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.8s ease;
 }

 .showcase-item:hover {
     transform: translateY(-10px);
 }

 .showcase-item:hover img {
     transform: scale(1.05);
 }

 .showcase-caption {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 80%, transparent 100%);
     padding: 40px 20px 20px;
     text-align: center;
     color: white;
 }

 .showcase-caption h3 {
     font-family: 'Playfair Display', serif;
     font-size: 1.8rem;
     margin-bottom: 5px;
     color: var(--color-accent);
 }

 .showcase-caption p {
     font-family: 'Lato', sans-serif;
     font-size: 1.05rem;
     opacity: 1;
     font-weight: 400;
     margin-bottom: 5px;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }

 /* ANIMACIONES DE ENTRADA */
 .fade-in-up {
     opacity: 0;
     transform: translateY(30px);
     animation: fadeInUp 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
 }

 .delay-100 {
     animation-delay: 0.1s;
 }

 .delay-200 {
     animation-delay: 0.3s;
 }

 .delay-300 {
     animation-delay: 0.5s;
 }

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

 /* BOTÓN SECUNDARIO (Estilo borde) */
 .btn-secondary-style {
     background: transparent;
     border: 2px solid var(--color-accent);
     color: var(--color-text-main);
     box-shadow: none;
 }

 .btn-secondary-style:hover {
     background: var(--color-accent);
     color: white;
     transform: translateY(-3px);
 }

 /* Footer limpio */
 .copyright {
     text-align: center;
     color: rgba(255, 255, 255, 0.3);
     font-size: 0.8rem;
     margin-top: 40px;
 }

 /* Responsive */
 @media (max-width: 768px) {
     .showcase-hero {
         height: 70vh;
     }

     .btn-maestro {
         padding: 16px 32px;
         font-size: 1rem;
         width: 90%;
         /* Botón ancho en móvil */
         max-width: 350px;
     }

     .showcase-grid {
         grid-template-columns: 1fr;
         /* Columna única en móvil */
         padding: 0 20px;
     }
 }

 /* ========================================
   AJUSTES ONE-PAGE (LANDING UNIFICADA)
   ======================================== */

 /* Enlace envolvente del showcase */
 .showcase-item-link {
     display: block;
     text-decoration: none;
     height: 100%;
 }

 /* Botón pequeño "PEDIR" en hover */
 .btn-ver-mn {
     display: inline-block;
     background: white;
     color: var(--color-text-main);
     padding: 8px 16px;
     border-radius: 20px;
     font-size: 0.8rem;
     font-weight: 700;
     margin-top: 10px;
     opacity: 0;
     transform: translateY(10px);
     transition: all 0.3s ease 0.1s;
 }

 .showcase-item:hover .btn-ver-mn {
     opacity: 1;
     transform: translateY(0);
 }

 .btn-ver-mn:hover {
     background: var(--color-accent);
     color: white;
 }

 /* Ajuste de Products Section para Showcase */
 .products {
     background: var(--color-bg);
     /* Asegurar fondo adecuado */
     padding-bottom: 80px;
 }

 /* ========================================
   SECCIÓN "CÓMO FUNCIONA" REFINED (PREMIUM FLOW)
   ======================================== */

 .how-it-works {
     position: relative;
     background: #2a1d1a;
     color: white;
     padding: 100px 0 80px;
     /* Padding extra top para el wave */
     overflow: hidden;
     margin-top: -2px;
     /* Evitar línea blanca por subpixel rendering */
 }

 /* Wave Transition del Hero */
 .wave-top {
     position: absolute;
     top: -1px;
     /* Solapamiento ligero */
     left: 0;
     width: 100%;
     line-height: 0;
     transform: rotate(180deg);
     /* Si fuera bottom wave, pero aquí es top, así que quiero que lo blanco "baje". 
                                 El SVG insertado tiene fill #fbf9f4. 
                                 Si lo pongo absolute top 0, tapará el background oscuro. Correcto. */
     transform: none;
 }

 .wave-top svg {
     display: block;
     width: 100%;
     height: 60px;
     /* Altura de la curva */
 }

 @media (min-width: 768px) {
     .wave-top svg {
         height: 120px;
     }
 }

 /* Grid y Layout */
 .steps-grid {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     position: relative;
     max-width: 1000px;
     margin: 40px auto 0;
     padding: 0 20px;
 }

 .step-item {
     flex: 1;
     position: relative;
     text-align: center;
     padding: 0 15px;
     z-index: 2;
 }

 /* Números Gigantes (Watermark) */
 .step-number-watermark {
     position: absolute;
     top: -40px;
     left: 50%;
     transform: translateX(-50%);
     font-family: var(--font-display);
     /* O Script si prefieres */
     font-size: 8rem;
     font-weight: 700;
     color: var(--color-accent);
     opacity: 0.1;
     z-index: -1;
     line-height: 1;
     pointer-events: none;
 }

 /* Iconos de Pasos */
 .step-icon {
     font-size: 2.5rem;
     margin-bottom: 15px;
     display: inline-block;
     background: rgba(255, 255, 255, 0.05);
     /* Círculo sutil */
     width: 80px;
     height: 80px;
     line-height: 80px;
     border-radius: 50%;
     border: 1px solid rgba(197, 157, 95, 0.3);
     backdrop-filter: blur(5px);
     transition: transform 0.3s ease, border-color 0.3s ease;
 }

 .step-item:hover .step-icon {
     transform: translateY(-5px);
     border-color: var(--color-accent);
     background: rgba(197, 157, 95, 0.1);
 }

 /* Tipografía de Pasos */
 .step-content h3 {
     font-family: var(--font-display);
     font-size: 1.5rem;
     margin-bottom: 10px;
     color: var(--color-white);
 }

 .step-content p {
     font-size: 0.95rem;
     color: rgba(255, 255, 255, 0.7);
     line-height: 1.6;
 }

 /* Conector Visual (Línea) */
 .step-connector {
     flex-grow: 1;
     height: 2px;
     background: repeating-linear-gradient(to right,
             rgba(255, 255, 255, 0.1),
             rgba(255, 255, 255, 0.1) 4px,
             transparent 4px,
             transparent 8px);
     margin-top: 40px;
     /* Alinear con el centro del icono aprox */
     display: none;
     /* Default oculto en móvil */
 }

 @media (min-width: 900px) {
     .step-connector {
         display: block;
     }
 }

 /* Responsive adjustments */
 @media (max-width: 900px) {
     .steps-grid {
         flex-direction: column;
         gap: 60px;
     }

     .wave-top svg {
         height: 50px;
     }

     .how-it-works {
         padding-top: 100px;
     }
 }

 /* Utilidad Z-Index y Relative faltante en el CSS anterior o global */
 .relative {
     position: relative;
 }

 .z-10 {
     z-index: 10;
 }

 /* ========================================
   SECCIÓN "PROCESO" PREMIUM (Light Theme)
   ======================================== */

 .process-section-premium {
     padding: 80px 0;
     background: linear-gradient(to bottom, #ffffff 0%, #fbf9f4 100%);
     position: relative;
     overflow: hidden;
 }

 .process-card-premium {
     background: white;
     border: 1px solid rgba(197, 157, 95, 0.15);
     /* Borde dorado muy sutil */
     border-radius: 20px;
     padding: 40px 30px;
     position: relative;
     overflow: hidden;
     /* Para contener la watermark */
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     text-align: left;
     /* Alineación izquierda para variar */
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .process-card-premium:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 40px rgba(197, 157, 95, 0.15);
     border-color: rgba(197, 157, 95, 0.4);
 }

 /* Watermark Gigante (Icono de fondo) */
 .card-watermark {
     position: absolute;
     bottom: -20px;
     right: -20px;
     font-size: 10rem;
     opacity: 0.05;
     filter: grayscale(100%);
     pointer-events: none;
     line-height: 1;
     z-index: 0;
     transform: rotate(-10deg);
 }

 /* Icono Principal (Visible) */
 .process-icon-gold {
     font-size: 3rem;
     margin-bottom: 20px;
     display: inline-block;
     color: var(--color-text-main);
     /* O Accent si prefieres */
     /* Fondo circular opcional */
     width: 60px;
     height: 60px;
     line-height: 60px;
     text-align: center;
     border-radius: 50%;
     background: rgba(197, 157, 95, 0.1);
     position: relative;
     z-index: 2;
 }

 .process-card-premium h3 {
     font-family: var(--font-display);
     font-size: 1.8rem;
     line-height: 1.2;
     margin-bottom: 15px;
     color: var(--color-text-main);
     position: relative;
     z-index: 2;
 }

 .process-card-premium p {
     font-size: 1rem;
     color: #666;
     line-height: 1.6;
     position: relative;
     z-index: 2;
 }

 /* ========================================
   CORRECCIÓN: CÓMO FUNCIONA (Tono Arena - No Footer)
   ======================================== */

 .how-it-works {
     background: #e6e0d4;
     /* Arena cálido premium */
     color: var(--color-text-main);
     /* Texto oscuro (Chocolate) */
 }

 /* Números de Fondo (Watermark) - Ahora oscuros pero muy sutiles */
 .step-number-watermark {
     color: var(--color-text-main);
     opacity: 0.05;
     /* Muy muy sutil */
 }

 /* Textos */
 .step-content h3 {
     color: var(--color-text-main);
 }

 .step-content p {
     color: rgba(62, 43, 38, 0.8);
     /* Chocolate con transparencia */
 }

 /* Iconos - Fondo blanco para resaltar sobre arena */
 .step-icon {
     background: rgba(255, 255, 255, 0.4);
     border-color: var(--color-text-main);
     color: var(--color-text-main);
 }

 .step-item:hover .step-icon {
     background: #fff;
     color: var(--color-accent);
     border-color: var(--color-accent);
 }

 /* Línea conectora - Oscura sutil */
 .step-connector {
     background: repeating-linear-gradient(to right,
             rgba(62, 43, 38, 0.1),
             rgba(62, 43, 38, 0.1) 4px,
             transparent 4px,
             transparent 8px);
 }

 /* Título de Sección */
 .how-it-works .section-header h2 {
     color: var(--color-text-main) !important;
 }

 .how-it-works .highlight-script {
     color: var(--color-accent) !important;
 }

 /* ========================================
   AJUSTES FINALES: ACCESIBILIDAD & DISEÑO
   ======================================== */

 /* Números Gigantes (Más grandes) */
 .step-number-watermark {
     font-size: 14rem !important;
     /* Más grande */
     top: -60px !important;
     opacity: 0.04 !important;
     /* Mantener sutil para no interferir con texto */
 }

 /* Mejora Cards Proceso (Evitar vacío) */
 .process-card-premium p {
     font-size: 1.05rem;
     /* Ligeramente más grande para legibilidad */
     color: #4a4a4a;
     /* Gris oscuro para contraste AA+ */
 }

 /* Grid Social Animado */
 .social-grid-preview img {
     transition: transform 0.3s ease, filter 0.3s ease;
     cursor: pointer;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 .social-grid-preview img:hover {
     transform: scale(1.02);
     filter: brightness(1.1);
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
 }

 /* Accesibilidad Wave */
 .wave-top svg {
     /* Asegurar que no cause desbordamiento horizontal */
     width: 100%;
     display: block;
 }

 /* ========================================
   ANIMACIONES SCROLL REVEAL (Lujo Suave)
   ======================================== */

 .reveal {
     opacity: 1;
     /* SEGURIDAD: Visible por defecto */
     transform: none;
     /* Sin desplazamiento inicial */
     transition: opacity 1s cubic-bezier(0.2, 1, 0.2, 1), transform 1s cubic-bezier(0.2, 1, 0.2, 1);
 }

 .reveal.active {
     opacity: 1;
     transform: translateY(0);
 }

 /* Retrasos escalonados para grids */
 .reveal:nth-child(1) {
     transition-delay: 0.1s;
 }

 .reveal:nth-child(2) {
     transition-delay: 0.2s;
 }

 .reveal:nth-child(3) {
     transition-delay: 0.3s;
 }

 .reveal:nth-child(4) {
     transition-delay: 0.4s;
 }

 /* Efecto hover suave en productos */
 .showcase-item {
     transition: transform 0.6s cubic-bezier(0.2, 1, 0.2, 1), box-shadow 0.6s ease;
 }

 .showcase-item:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 40px rgba(62, 43, 38, 0.15);
 }

 /* CORRECCIÓN CRÍTICA: Enlaces Envolventes */
 .showcase-item-link {
     display: block;
     /* Asegura que ocupe el espacio del grid */
     text-decoration: none;
     color: inherit;
     height: 100%;
     /* Para que las tarjetas tengan misma altura */
 }

 /* Asegurar que el contenido interno llene el enlace */
 .showcase-item-link .showcase-item {
     height: 100%;
 }

 /* ========================================
   CARRUSEL DRAMÁTICO - ESTILO CROQUIPAN PREMIUM
   Fondo Chocolate + Tarjeta Crema Central
   ======================================== */

 .product-carousel-section {
     background: linear-gradient(135deg, #3e2b26 0%, #2a1d1a 100%);
     /* Chocolate oscuro */
     padding: 60px 0 80px;
     position: relative;
     overflow: hidden;
 }

 /* Onda decorativa inferior */
 .product-carousel-section::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 120px;
     background: #faf8f5;
     /* Crema */
     clip-path: ellipse(80% 100% at 50% 100%);
 }

 .carousel-container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 40px;
     position: relative;
     z-index: 2;
 }

 /* Header Dramático */
 .carousel-header {
     text-align: center;
     margin-bottom: 40px;
 }

 .carousel-title {
     font-family: 'Playfair Display', serif;
     font-size: clamp(2.5rem, 5vw, 4rem);
     color: white;
     margin-bottom: 15px;
     font-weight: 700;
     letter-spacing: -0.02em;
     text-transform: uppercase;
 }

 .carousel-subtitle {
     font-family: 'Lato', sans-serif;
     font-size: 1.2rem;
     color: var(--color-accent);
     /* Dorado */
     font-weight: 300;
     letter-spacing: 2px;
     text-transform: uppercase;
 }

 /* Wrapper del Carrusel */
 .carousel-wrapper {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 35px;
 }

 /* Track Container */
 .carousel-track-container {
     overflow: hidden;
     width: 100%;
     max-width: 1000px;
     margin: 0 auto;
 }

 .carousel-track {
     display: flex;
     transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 /* Slides */
 .carousel-slide {
     min-width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 20px;
     opacity: 0.4;
     transform: scale(0.9);
     transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .carousel-slide.active {
     opacity: 1;
     transform: scale(1);
 }

 /* Tarjeta Central del Producto */
 .product-image-wrapper {
     background: linear-gradient(135deg, #fbf9f4 0%, #f5f0e8 100%);
     border-radius: 30px;
     width: 100%;
     max-width: 380px;
     aspect-ratio: 1 / 1;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;
     position: relative;
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
     padding: 30px;
     border: 1px solid rgba(197, 157, 95, 0.2);
 }

 /* Etiqueta decorativa opcional */
 .product-image-wrapper::before {
     content: '';
     position: absolute;
     top: 20px;
     right: 20px;
     width: 60px;
     height: 60px;
     background: var(--color-accent);
     border-radius: 50%;
     opacity: 0.1;
 }

 .product-image {
     width: 100%;
     height: 100%;
     object-fit: contain;
     filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
     transition: transform 0.6s ease;
 }

 .carousel-slide.active .product-image {
     transform: scale(1.08);
     /* Zoom más pronunciado */
 }

 /* Tipografía del Producto - MÁS BOLD */
 .product-name {
     font-family: 'Playfair Display', serif;
     font-size: clamp(1.8rem, 4vw, 2.8rem);
     color: white;
     margin-bottom: 10px;
     font-weight: 700;
     text-align: center;
     letter-spacing: 0.02em;
     text-transform: uppercase;
 }

 .product-description {
     font-family: 'Lato', sans-serif;
     font-size: 1.1rem;
     color: rgba(255, 255, 255, 0.7);
     font-weight: 300;
     text-align: center;
     letter-spacing: 1px;
 }

 /* Navegación - Estilo Dorado */
 .carousel-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(197, 157, 95, 0.2);
     backdrop-filter: blur(10px);
     border: 2px solid var(--color-accent);
     width: 55px;
     height: 55px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2.2rem;
     color: var(--color-accent);
     cursor: pointer;
     transition: all 0.3s ease;
     z-index: 10;
 }

 .carousel-nav:hover {
     background: var(--color-accent);
     color: white;
     transform: translateY(-50%) scale(1.15);
     box-shadow: 0 10px 30px rgba(197, 157, 95, 0.4);
 }

 .carousel-prev {
     left: calc(50% - 250px);
 }

 .carousel-next {
     right: calc(50% - 250px);
 }

 /* Indicadores - Estilo Dorado */
 .carousel-indicators {
     display: flex;
     justify-content: center;
     gap: 15px;
     margin-bottom: 40px;
 }

 .indicator {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.3);
     cursor: pointer;
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }

 .indicator.active {
     background: var(--color-accent);
     transform: scale(1.4);
     border-color: rgba(255, 255, 255, 0.3);
 }

 .indicator:hover {
     background: var(--color-accent);
     transform: scale(1.2);
 }

 /* CTA Dorado Vibrante */
 .carousel-cta {
     text-align: center;
 }

 .btn-explore {
     display: inline-block;
     background: linear-gradient(135deg, var(--color-accent) 0%, #d4af72 100%);
     color: white;
     font-family: 'Lato', sans-serif;
     font-size: 1.1rem;
     font-weight: 600;
     padding: 22px 65px;
     border-radius: 50px;
     text-decoration: none;
     letter-spacing: 2px;
     text-transform: uppercase;
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     box-shadow: 0 15px 40px rgba(197, 157, 95, 0.4);
     position: relative;
     overflow: hidden;
 }

 .btn-explore::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     transition: left 0.6s ease;
 }

 .btn-explore:hover::before {
     left: 100%;
 }

 .btn-explore:hover {
     background: linear-gradient(135deg, #d4af72 0%, #e8c48a 100%);
     transform: translateY(-5px);
     box-shadow: 0 20px 50px rgba(197, 157, 95, 0.5);
 }

 .cta-trust {
     margin-top: 18px;
     font-family: 'Lato', sans-serif;
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.6);
     font-weight: 300;
     letter-spacing: 1px;
 }

 /* Responsive */
 @media (max-width: 768px) {
     .product-carousel-section {
         padding: 80px 0 120px;
     }

     .carousel-container {
         padding: 0 20px;
     }

     .carousel-header {
         margin-bottom: 40px;
     }

     .carousel-slide {
         padding: 30px 15px;
     }

     .product-image-wrapper {
         max-width: 380px;
         padding: 30px;
     }

     .carousel-nav {
         width: 45px;
         height: 45px;
         font-size: 1.8rem;
     }

     .carousel-prev {
         left: calc(50% - 220px);
     }

     .carousel-next {
         right: calc(50% - 220px);
     }

     .btn-explore {
         width: 90%;
         max-width: 350px;
         padding: 18px 40px;
         font-size: 1rem;
     }
 }

 @media (max-width: 480px) {
     .product-image-wrapper {
         max-width: 300px;
         padding: 20px;
     }

     .carousel-nav {
         width: 40px;
         height: 40px;
         font-size: 1.5rem;
     }
 }