/* flip card specific styles – integrated smoothly with existing design */
 .flip-card {
     background-color: transparent;
    -webkit-tap-highlight-color: transparent;

     width: 100%;
     height: 360px;
     /* fixed height for uniform cards */
     perspective: 2000px;
     font-family: 'Inter', sans-serif;
 }

 .flip-card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     text-align: center;
     transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
     transform-style: preserve-3d;
     -webkit-transform-style: preserve-3d; /* FIX iOS */
     border-radius: 1rem;
     /* match rounded-lg (0.5rem) */
     box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
 }

 .flip-card:hover .flip-card-inner {
     transform: rotateY(180deg);
 }

 /* mobile/touch friendly: tap to flip via JS fallback, but we keep hover for desktop */
 .flip-card-front,
 .flip-card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden; /* FIX iOS */
     border-radius: 1rem;
     overflow: hidden;
     background: white;
     display: flex;
     flex-direction: column;
 }

 .flip-card-front {
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     color: white;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
     transform: translateZ(1px);
 }

 /* dark overlay for better button contrast on front */
 .flip-card-front .overlay {
     /* background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 70%); */
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     align-items: center;
     padding: 1.5rem;
 }

 .flip-card-back {
     background: #f8f8f8;
     /* secondary light */
     color: #1f2937;
     transform: rotateY(180deg);
     padding: 1.5rem 1.2rem;
     overflow-y: auto;
     /* scroll only if content overflows (360px should fit) */
     text-align: left;
     font-size: 0.9rem;
     line-height: 1.5;
     box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
 }

 .flip-card-back strong {
     color: #ff8c00;
     /* accent / warm tone */
     font-weight: 600;
 }

 .flip-card-back ul {
     margin-top: 0.25rem;
     margin-bottom: 0.75rem;
     padding-left: 1.2rem;
     list-style-type: disc;
 }

 .flip-card-back li {
     margin-bottom: 0.2rem;
 }

 .flip-card-back p {
     margin-bottom: 0.5rem;
 }

 /* button style – same accent as site */
 .flip-btn {
     background-color: #ff8c00;
     /* accent */
     border: none;
     color: white;
     font-weight: 600;
     padding: 0.6rem 1.8rem;
     border-radius: 9999px;
     cursor: pointer;
     font-size: 1rem;
     transition: background 0.2s, transform 0.1s;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(2px);
     letter-spacing: 0.01em;
     margin-bottom: 0.5rem;
     /* spacing from bottom */
 }

 .flip-btn:hover {
     background-color: #e67e00;
     transform: scale(1.03);
 }

 /* mobile: keep interactive, but we also add a manual flip via button click (touch) */
 /* the button itself triggers flip for touch devices – we use small js */
 @media (max-width: 768px) {
     .flip-card {
         height: 340px;
         /* slightly shorter on mobile */
     }

     .flip-btn {
         padding: 0.5rem 1.4rem;
         font-size: 0.9rem;
     }

     /* ensure back scrollable if needed */
     .flip-card-back {
         padding: 1.2rem 1rem;
         font-size: 0.85rem;
         background: #ffffff;
     }

     .flip-card-back .flip-btn .view-more-btn {
          opacity: 0;
        visibility: hidden;
        pointer-events: none;

     }
 }

 /* manual flipped class for touch (added by js) */
 .flip-card.flipped .flip-card-inner {
     transform: rotateY(180deg);
 }

 /* <!-- 1. Granite -->        
<!-- 2. Marble -->
<!-- 3. Limestone -->
<!-- 4. Soapstone -->    
<!-- 5. Quartzite --
<!-- 6. Travertine -->      
<!-- 7. Onyx -->     
<!-- 8. Quartz (engineered) -->  
<!-- 9. Porcelain -->  
<!-- 10. Semi-Precious Stone --> */

 /* placeholder images: using unsplash / stone related but kept generic with bg color fallback */
 .front-image-1 {
     background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('./texturas/Marble.webp');
 }

 .front-image-3 {
     background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('./texturas/Soaptone.webp');
 }

 .front-image-2 {
     background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('./texturas/LIMESTONE.webp');
 }

 .front-image-4 {
     background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('./texturas/Quartzite.webp');
 }

 .front-image-5 {
     background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('./texturas/Travertine.webp');
 }

 .front-image-6 {
     background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('./texturas/ONYX.webp');
 }

 .front-image-7 {
     background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('./texturas/Quartz.webp');
 }

 .front-image-8 {
     background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('./texturas/Porcelain.webp');
 }

 .front-image-9 {
     background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('./texturas/Semiprecouis.webp');
 }

 /* additional background fallback */
 .bg-fallback {
     background-color: #4b5563;
 }

 .flip-card-front .overlay button {
     pointer-events: auto;
     z-index: 10;
 }

 .flip-card-front {
     pointer-events: auto;
     /* ensures clicks on front */
 }

 .flip-card-back {
     pointer-events: auto;
 }

 /* prevent flicker on mobile */
 .flip-card.flipped .flip-card-inner {
     transform: rotateY(180deg);
 }

 /* keep back side interactions */
 .flip-card-back a,
 .flip-card-back button {
     display: none;
     /* no buttons inside back */
 }

 .flip-card-back ul,
 .flip-card-back p {
     user-select: text;
 }

 /* ensure scroll only if needed */
 .flip-card-back {
     scrollbar-width: thin;
 }