@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

:root {
  --marfil: #F7FCFF;          /* Fondo claro agua */
  --deep-rose: #0078B7;       /* Azul profundo (antes deep-rose) */
  --dusty-rose: #37C7E3;      /* Celeste brillante (antes dusty-rose) */
  --gold: #49E3C6;            /* Verde-agua suave para acentos */
  --slate: #1B2C34;           /* Azul gris oscuro */
  --muted: #6CA6B7;           /* Azul gris claro */
}

* { box-sizing: border-box; }


body{font-family: "Quicksand", "Inter", "Segoe UI", sans-serif; background: linear-gradient(180deg, var(--marfil) 0%, #fff 100%); color: var(--slate); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
footer{border-top: 1px solid rgba(52,58,64,0.05);}
  .navbar{background: transparent;}
  .brand-sub{color:var(--muted); font-size:0.75rem}
  .badge{position:absolute; left:10px; top:10px; padding:6px 10px; border-radius:8px; font-weight:600; font-size:12px; box-shadow:0 6px 18px rgba(0,0,0,0.06);}
  .price{font-weight:700; color: var(--deep-rose); display:block; font-size:1.05rem}
  .btn-gold{background-color: var(--dusty-rose); color: #fff; border: none; border-radius: 25px; transition: all 0.3s ease;}
  .btn-gold:hover {background-color: #2EB5CA; transform: scale(1.03);}
  .modal-content {border: none; overflow: hidden;}
  .modal-header .btn-close {filter: invert(50%);}
  .navbar .nav-link {position: relative; color: #555; font-weight: 500; text-decoration: none; padding: 5px 0; transition: color 0.3s ease;}
  .navbar .nav-link::after {content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px; background-color: var(--dusty-rose); transition: width 0.3s ease-in-out;}
  .navbar .nav-link:hover {color: var(--dusty-rose);}
  .navbar .nav-link:hover::after {width: 100%;}
  
  .navbar .nav-link.active { color: var(--deep-rose); }
  
  .navbar .nav-link.active::after {width: 100%;}
  .form-control {border-radius: 10px; border: 1px solid #ddd; transition: all 0.3s ease;}
  .form-control:focus {border-color: var(--gold); box-shadow: 0 0 0 0.2rem rgba(73, 227, 198, 0.25);}
  .scroll-up {position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 50%; color: #fff; font-size: 20px; display: flex; justify-content: center; align-items: center; cursor: pointer; opacity: 0; pointer-events: none; transition: all 0.4s ease; z-index: 9999; background: radial-gradient(800px 200px at 10% 20%, rgba(55, 199, 227, 0.2), transparent 60%), radial-gradient(600px 150px at 90% 80%, rgba(73, 227, 198, 0.15), transparent 70%), linear-gradient(135deg, var(--dusty-rose), #0078B7); border: 2px solid rgba(255, 255, 255, 0.5); box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); padding: 1.5rem;}
  .scroll-up.show {opacity: 1; pointer-events: auto;}
  .scroll-up:hover {transform: scale(1.12); box-shadow: 0 0 20px rgba(73, 227, 198, 0.5);}
  .sticky-nav {position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); transition: all 0.3s ease;}
  .sticky-nav.scrolled {background: rgba(255, 255, 255, 0.98); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);}
  .product-card{border: 0; overflow: hidden; transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s; border-radius: 12px;}
  .product-card:hover{transform: translateY(-8px) scale(1.01); box-shadow: 0 18px 50px rgba(52,58,64,0.12);}
  .product-card:hover .card-img-top{transform: scale(1.06);}
  .product-card-modern {position: relative; overflow: hidden; border: none; background: #fff; border-radius: 12px; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
  .product-card-modern:hover {box-shadow: 0 6px 18px rgba(0,0,0,0.2); transform: translateY(-3px);}
  .product-image {position: relative; overflow: hidden; border-radius: 12px 12px 0 0;}
  .product-image img {width: 100%; height: auto; display: block; transition: opacity 0.6s ease, transform 0.6s ease; cursor: pointer;}
  .product-image .img-main {opacity: 1;}
  .product-image .img-hover {position: absolute; top: 0; left: 0; opacity: 0;}
  .product-image:hover .img-main {opacity: 0; transform: scale(1.05);}
  .product-image:hover .img-hover {opacity: 1; transform: scale(1.05);}
  .product-info {padding: 14px 10px 18px; text-align: center;}
  .product-title {font-size: 0.95rem; color: #333; font-weight: 600; margin-bottom: 6px;}
  .product-prices {display: flex; justify-content: center; gap: 8px; align-items: baseline;}
  .product-image:hover .quick-view-btn {opacity: 1; transform: translate(-50%, -50%) scale(1);}
  .quick-view-btn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); background: var(--dusty-rose); color: #fff; border: none; border-radius: 10px; padding: 18px 50px; font-size: 1rem; font-weight: 600; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.4s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.25); cursor: pointer;}
  .quick-view-btn .btn-text,.quick-view-btn .btn-icon {position: absolute; transition: all 0.3s ease;}
  .quick-view-btn .btn-icon {opacity: 0; transform: scale(0);}
  .quick-view-btn .btn-text {opacity: 1; transform: scale(1);}
  .quick-view-btn:hover {background: #2EAED1; transform: translate(-50%, -50%) scale(1.1);}
  .quick-view-btn:hover .btn-text {opacity: 0; transform: scale(0);}
  .quick-view-btn:hover .btn-icon {opacity: 1; transform: scale(1.2);}
  .discount-badge {position: absolute; top: 12px; left: 12px; background: #0078B7; color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 0.85rem; font-weight: 600;}
  .old-price {color: #888; text-decoration: line-through; font-size: 0.9rem;}
  .new-price {color: #0078B7; font-weight: 700; font-size: 1rem;}
  .popup-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease;}
  .popup-overlay.active {opacity: 1; visibility: visible;}
  .popup-container {background: #fff; border-radius: 12px; max-width: 900px; width: 90%; display: flex; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.2); position: relative; animation: slideUp 0.5s ease;}
  .popup-close {position: absolute; top: 15px; right: 20px; background: none; border: none; font-size: 26px; cursor: pointer; color: #444;}
  .popup-content {display: flex; width: 100%;}
  .popup-text {flex: 1; padding: 40px; display: flex; flex-direction: column; justify-content: center;}
  .popup-text h2 { font-weight: 600; letter-spacing: 2px; margin-bottom: 15px; color: #222;}
  .popup-text p {color: #555; font-size: 15px; margin-bottom: 25px;}
  .popup-text form {display: flex; border: 1px solid #ccc; border-radius: 25px; overflow: hidden;}
  .popup-text input {flex: 1; border: none; padding: 12px 18px; outline: none; font-size: 15px;}
  .popup-text button {background: #222;color: #fff; border: none; padding: 0 20px; cursor: pointer; transition: background 0.3s ease;}
  .popup-text button:hover {background: #444;}
  .popup-image { flex: 1;}
  .popup-image img {width: 100%; height: 100%; object-fit: cover;}
  .section-title {font-family: "Playfair Display", serif; font-size: 2.8rem; font-weight: 600; color: #2c1a1d; text-transform: uppercase; letter-spacing: 2px; text-align: center; margin: 2rem 0 3rem; position: relative; display: inline-block;}
  .section-title::after {content: ""; display: block; width: 80px; height: 3px; background: linear-gradient(to right, var(--dusty-rose), var(--gold)); margin: 10px auto 0; border-radius: 3px; transition: width 0.3s ease;}
  .section-title:hover::after { width: 120px;}
  .footer-section {background-color: #480002; color: #fff; padding: 60px 10%; font-family: "Poppins", sans-serif; position: relative;}
  
  .footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 30px;
  }

  .btn-redes{
    color: #df0006;   /* dorado */
    transition: 0.3s;
  }
    
  .btn-redes:hover{
    color: #ae0f13;
  }

  .footer-column h3 {font-size: 14px; letter-spacing: 1px; margin-bottom: 15px; text-transform: uppercase;}
  .footer-column a {display: block; color: #ddd; font-size: 14px; margin-bottom: 10px; text-decoration: none;}
  .footer-column a:hover {color: #ffcc00;}
  .footer-column p {font-size: 13px; color: #ddd; margin-bottom: 15px;}
  .footer-form label {font-size: 12px; display: block; margin-bottom: 10px;}
  .footer-form button {background: none; border: 1px solid #ccc; color: var(--gold); padding: 10px 15px; font-size: 13px; cursor: pointer; transition: background 0.3s ease;}
  .footer-form button:hover {background-color: var(--gold); color: #0f2f2f; border-color: var(--gold);}
  .footer-bottom {text-align: center; font-size: 12px; color: #bbb; margin-top: 40px;}
  .footer-logo {font-size: 24px; font-weight: 600; letter-spacing: 2px; margin: 0;}
  .footer-social {display: flex; align-items: center; gap: 15px;}
  .footer-social a {color: #fff; font-size: 20px; transition: color 0.3s ease;}
  .footer-social a:hover {color: #ffcc00;}
  .brand-logo {height: 60px; width: auto; object-fit: contain; border-radius: 6px;}
  .label {margin-left: 6px;}

@media (max-width:991px){.hero-image{display:none} .brand-sub{display:none}}
@media (max-width: 768px) {.popup-content {flex-direction: column;} .popup-image {display: none; } .popup-text {padding: 30px;}}
@media(max-width:480px){.btn-whatsapp{ width:56px; height:56px; left:18px; bottom:18px; } .btn-whatsapp i{ font-size:22px;}}