/* css general de VYNTA */

  :root {
    --black: #0a0a0a;
    --deep: #111111;
    --surface: #181818;
    --border: #2a2a2a;
    --chrome: #c8c8c8;
    --chrome-light: #e8e8e8;
    --muted: #666666;
    --white: #f5f5f5;
    --accent: #8a7d6b;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--black);
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
  }

  /* NAV */
  nav {
    position: fixed; top: 0; width: 100%; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 60px;
    background: linear-gradient(to bottom, rgba(10,10,10,0.95) 0%, transparent 100%);
    backdrop-filter: blur(2px);
   
  }

 .nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 6px;
  color: var(--chrome-light);
  text-decoration: none;
  /* Añade esto para evitar que Flexbox lo comprima */
  flex-shrink: 0; 
  white-space: nowrap; 
}

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

  .nav-links a {
    color: var(--chrome);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: color 0.3s;
  }

  .nav-links a:hover { color: var(--white); }

  .nav-cta {
    background: transparent;
    border: 1px solid var(--chrome);
    color: var(--chrome-light);
    padding: 10px 28px;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
  }

  .nav-cta:hover {
    background: var(--chrome-light);
    color: var(--black);
  }

  .section-label {
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
  }

  .section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(40px, 5vw, 72px);
    letter-spacing: 3px;
    color: var(--white);
    margin-bottom: 60px;
  }

  /* PRODUCTOS */
  .productos { background: var(--deep); padding: 100px 60px; }

  .productos-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 60px;
  }

  .productos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .producto-card {
    position: relative;
    cursor: pointer;
  }

  .producto-img {
    aspect-ratio: 3/4;
    background: var(--surface);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }

  .producto-card:hover .producto-placeholder { transform: scale(1.03); }

  .producto-label-img {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.2);
  }

  .producto-badge {
    position: absolute; top: 16px; left: 16px;
    background: var(--accent);
    color: var(--white);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 10px;
  }

  .producto-tag {
    position: absolute; top: 16px; right: 16px;
    background: rgba(0,0,0,0.7);
    border: 1px solid var(--border);
    color: var(--chrome);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 10px;
  }

  .producto-nombre {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 6px;
  }

  .producto-estilo {
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 12px;
  }

  .producto-footer {
    display: flex; justify-content: space-between; align-items: center;
  }

  .producto-precio {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--chrome-light);
  }

  .producto-precio span {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--muted);
    font-weight: 300;
    letter-spacing: 1px;
  }

  .btn-comprar {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--chrome);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 16px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s;
  }

  .btn-comprar:hover {
    border-color: var(--chrome);
    background: var(--chrome);
    color: var(--black);
  }

  /* MANIFIESTO */
  .manifiesto {
    padding: 120px 60px;
    position: relative;
    overflow: hidden;
  }

  .manifiesto::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(138,125,107,0.05) 0%, transparent 60%);
  }

  .manifiesto-inner {
    max-width: 800px;
    position: relative;
  }

  .manifiesto blockquote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.4;
    color: var(--white);
    margin-bottom: 32px;
    position: relative;
  }

  .manifiesto blockquote::before {
    content: '"';
    font-size: 120px;
    color: var(--border);
    position: absolute;
    top: -20px; left: -40px;
    font-family: 'Playfair Display', serif;
    line-height: 1;
  }

  .pilares {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-top: 80px;
  }

  .pilar {
    background: var(--surface);
    padding: 40px 32px;
    border-top: 1px solid var(--border);
  }

  .pilar-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 48px;
    color: var(--border);
    letter-spacing: 2px;
    margin-bottom: 16px;
  }

  .pilar-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 3px;
    color: var(--white);
    margin-bottom: 12px;
  }

  .pilar-text {
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
  }

.manifiesto-inner {
  width: 100%;
}

 
  /* FOOTER */
  footer {
    padding: 40px 60px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
  }

  /* SCROLLBAR */
  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: var(--black); }
  ::-webkit-scrollbar-thumb { background: var(--border); }
  @keyframes hero-line-move {
    0% { transform: translateX(-10%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(10%); opacity: 0; }
  }
  @keyframes hero-particle-float {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-100vh) scale(0.4); opacity: 0; }
  }
  @keyframes letra-in {
    to { opacity: 1; transform: translateY(0); }
  }

  .estilo-card.activo {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
  .estilo-card.activo::before {
    opacity: 0.5;
  }
  .estilo-card.activo .estilo-nombre::after {
    content: ' ●';
    color: var(--accent);
    font-size: 10px;
  }

  /* === MEJORA: CATÁLOGO CON FILTROS === */
  .filtros-bar {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-bottom: 48px;
  }
  .filtro-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--chrome);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 22px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s;
  }
  .filtro-btn:hover {
    border-color: var(--chrome);
    color: var(--white);
  }
  .filtro-btn.activo {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
  }

  .productos-grid {
    transition: all 0.4s ease;
  }
  .producto-card {
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .producto-card.oculto {
    display: none;
  }

  .producto-tallas {
    display: flex; gap: 6px; margin-bottom: 14px;
  }
  .talla-btn {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--chrome);
    font-size: 10px;
    width: 30px; height: 30px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s;
  }
  .talla-btn:hover { border-color: var(--chrome); color: var(--white); }
  .talla-btn.seleccionada {
    background: var(--chrome-light);
    border-color: var(--chrome-light);
    color: var(--black);
  }
  .talla-btn.agotada {
    opacity: 0.25;
    cursor: not-allowed;
    text-decoration: line-through;
  }

  .producto-badge.ultimas {
    background: #b5443a;
  }

  /* === MEJORA: MODAL DE PRODUCTO === */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease;
    padding: 24px;
  }
  .modal-overlay.activo {
    opacity: 1; visibility: visible;
  }
  .modal-box {
    background: var(--surface);
    border: 1px solid var(--border);
    width: 100%; max-width: 800px;
    max-height: 88vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s ease;
  }
  .modal-overlay.activo .modal-box {
    transform: translateY(0) scale(1);
  }
  .modal-img {
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 12px;
    position: relative;
    min-height: 100%;
  }
  .modal-img img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .modal-close {
    position: absolute; top: 16px; right: 16px;
    width: 36px; height: 36px;
    background: rgba(0,0,0,0.6);
    border: 1px solid var(--border);
    color: var(--chrome-light);
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 5;
    transition: all 0.3s;
  }
  .modal-close:hover { border-color: var(--chrome); color: var(--white); }
  .modal-info {
    padding: 40px;
    display: flex; flex-direction: column;
  }
  .modal-tag {
    font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--accent); margin-bottom: 12px;
  }
  .modal-nombre {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px; letter-spacing: 3px;
    color: var(--white); margin-bottom: 8px;
  }
  .modal-precio {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px; color: var(--chrome-light);
    letter-spacing: 2px; margin-bottom: 20px;
  }
  .modal-desc {
    font-size: 13px; line-height: 1.9; color: var(--muted);
    margin-bottom: 28px;
  }
  .modal-tallas-label {
    font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--chrome); margin-bottom: 12px;
  }
  .modal-tallas { display: flex; gap: 8px; margin-bottom: 32px; }
  .modal-tallas .talla-btn { width: 40px; height: 40px; font-size: 12px; }
  .modal-info .btn-whatsapp {
    margin-top: auto;
    justify-content: center;
    width: 100%;
  }

  .lookbook-ph {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px; letter-spacing: 4px;
    color: rgba(255,255,255,0.12);
    transition: transform 0.6s ease;
  }
  .lookbook-item:hover .lookbook-ph { transform: scale(1.06); }

  /* === MEJORA: FOOTER COMPLETO === */
  .footer-full {
    padding: 80px 60px 0;
    border-top: 1px solid var(--border);
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 60px;
  }
  .footer-brand-logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 48px;
    letter-spacing: 8px;
    color: var(--chrome-light);
    margin-bottom: 16px;
  }
  .footer-brand-text {
    font-size: 13px; color: var(--muted); line-height: 1.8;
    max-width: 280px; margin-bottom: 24px;
  }
  .footer-socials { display: flex; gap: 12px; align-items: center; }
  .footer-social-link {
    width: 42px; height: 42px;
    border: 1px solid rgba(200, 200, 200, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    display: flex; align-items: center; justify-content: center;
    color: var(--chrome-light);
    transition: all 0.3s ease;
  }
  .footer-social-link svg {
    width: 18px; height: 18px;
    display: block;
  }
  .footer-social-link:hover {
    border-color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    transform: translateY(-2px);
  }
  .footer-col-title {
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--chrome-light); margin-bottom: 20px;
  }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .footer-col a {
    color: var(--muted); text-decoration: none; font-size: 13px;
    transition: color 0.3s;
  }
  .footer-col a:hover { color: var(--white); }
  .footer-bottom {
    border-top: 1px solid var(--border);
    padding: 24px 0;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--border);
  }

  /* MOBILE */
  @media (max-width: 768px) {
    nav { padding: 20px 24px; }
    .nav-links { display: none; }
    .section { padding: 60px 24px; }
    .estilos-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; }
    .productos { padding: 60px 24px; }
    .productos-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .productos-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .manifiesto { padding: 60px 24px; }
    .manifiesto blockquote::before { left: 0; top: -30px; font-size: 80px; }
    .pilares { grid-template-columns: 1fr; }
    footer { padding: 32px 24px; flex-direction: column; gap: 16px; text-align: center; }

    /* === MEJORA: responsive nuevos bloques === */
    .filtros-bar { gap: 8px; }
    .filtro-btn { padding: 8px 16px; font-size: 9px; }

    .modal-box { grid-template-columns: 1fr; max-height: 92vh; }
    .modal-img { aspect-ratio: 4/3; }
    .modal-info { padding: 28px 24px; }
    .modal-nombre { font-size: 28px; }

    .lookbook-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
    .lookbook-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
    .lookbook-item:nth-child(4) { grid-row: span 1; }
    .lookbook-item:nth-child(6) { grid-column: span 2; }
    .lookbook-item:nth-child(7) { grid-row: span 1; }

    .footer-full { padding: 50px 24px 0; }
    .footer-top { grid-template-columns: 1fr; gap: 36px; text-align: center; }
    .footer-brand-text { max-width: 100%; margin-left: auto; margin-right: auto; }
    .footer-socials { justify-content: center; }
    .footer-col ul { align-items: center; }
    .footer-bottom { flex-direction: column; gap: 10px; text-align: center; padding: 20px 0; }
  
}

  .nav-links .dropdown {
    position: relative;
  }
  .nav-links .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #111;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 150px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    z-index: 100;
  }
  .nav-links .dropdown-menu li {
    width: 100%;
  }
  .nav-links .dropdown-menu li a {
    display: block;
    padding: 12px 16px;
    color: #fff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    transition: background 0.3s ease;
  }
  .nav-links .dropdown-menu li a:hover {
    background-color: #333;
  }
  .nav-links .dropdown:hover .dropdown-menu {
    display: block;
  }

/* Ajustes Responsivos */
@media (max-width: 992px) {
  .extensiones-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

}


@media (max-width: 768px) {
  .extensiones { padding: 60px 24px; }
  .extensiones-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ext-info { padding: 20px 16px; }
  .ext-card:hover .ext-info { transform: translateY(0); }
  .ext-action { display: none; } /* Desactivamos acción compleja en móviles */

}

.styles .section-label {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--chrome);
  margin-bottom: 10px;
  font-family: 'Inter', sans-serif;
  opacity: 0.7;
}

/* Contenedor del Texto */
.style-content {
  flex: 1; /* Ocupa la otra mitad del espacio */
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.style-content h3 {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--chrome);
  margin-bottom: 20px;
  font-weight: 600;
}

.style-content p {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: var(--chrome);
  opacity: 0.8;
  margin: 0;
}

/* --- RESPONSIVIDAD (Para Tablets y Móviles) --- */
@media (max-width: 768px) {

  .style-content {
    padding: 30px 20px;
  }

}



.modal-tallas .talla-btn.activo,
.producto-tallas .talla-btn.activo {
  background: #f5f5f5 !important;
  color: #0a0a0a !important;
  border-color: #f5f5f5 !important;
  font-weight: 600;
}


.manifiesto {
  margin-top: 80px; 
}

h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem; 
  letter-spacing: 1px; 
  text-transform: uppercase; 
  color: #1a202c; 
  
}
   /* javascript tallas */
.talla-modal-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid #555;
  color: #fff;
  font-size: 0.95rem;
  font-family: inherit;
  border-radius: 6px; /* Bordes ligeramente redondeados, prolijos */
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  outline: none;
}

/* Efecto hover */
.talla-modal-btn:hover:not(:disabled) {
  border-color: #aaa;
}

/* Talla seleccionada */
.talla-modal-btn.activo {
  border-color: #fff;
  background-color: #fff;
  color: #000;
  font-weight: 600;
}

/* Talla agotada */
.talla-modal-btn:disabled, 
.talla-modal-btn.agotada {
  border-color: #333;
  color: #444;
  cursor: not-allowed;
  background-image: linear-gradient(to top right, transparent calc(50% - 1px), #444, transparent calc(50% + 1px)); /* Línea diagonal tachada sutil */
}

.producto-tallas .talla-btn {
    width: auto !important;        
    min-width: 35px;               
    padding: 4px 10px !important;  
    white-space: nowrap;           
}
/* Ajuste para que las tallas compuestas (ej. 28-30) entren en una sola línea */
.producto-tallas .talla-btn {
    width: auto !important;
    min-width: 35px;
    padding: 4px 10px !important;
    white-space: nowrap;
}

#modalTallas .talla-modal-btn {
    width: auto !important;
    min-width: 40px;
    padding: 8px 14px !important;
    white-space: nowrap;
}
/* Contenedor general para todos los productos (1 fila normal) */
.modal-colores {
  display: flex;
  flex-wrap: wrap;       
  gap: 10px;             
  margin-bottom: 20px;
}

/* CSS ESPECÍFICO SOLO PARA MOM JEAN CREPANTE (y2k-01) */
/* Al ponerle este ancho, lo obligamos a partirse en 2 filas */
#modalBox[data-producto="y2k-01"] .modal-colores {
  max-width: 165px; 
}

/* Las bolitas de colores (igual para todos) */
.color-item {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.color-item:hover, .color-item.seleccionado {
  transform: scale(1.1);
  border-color: #fff;
}
/* CSS EXCLUSIVO PARA DIVIDIR COLORES DEL MOM JEAN CREPANTE (y2k-01) */
#modalBox[data-producto="y2k-01"] .modal-colores {
  max-width: 225px !important; /* Este ancho exacto corta los 9 colores en dos filas de forma hermosa */
}

/* Efecto hover suave para todas las bolitas de colores de cualquier producto */
.color-item:hover {
  transform: scale(1.1);
}

.producto-img {
  width: 100%;
  height: 380px; 
  overflow: hidden;
  position: relative;
}

.producto-img img, .modal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover !important; 
  object-position: top center !important;
}
.modal-img {
  aspect-ratio: auto !important;   /* la altura la marca la columna de info */
  height: 100% !important;         /* llena toda la caja, sin hueco negro */
  align-self: stretch !important;
  position: relative !important;
  min-height: 100% !important;
}

#modalPlaceholder {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

#modalPlaceholder img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* ==========================================================
   OPTIMIZACIÓN CELULAR (MOBILE) - DISEÑO E-COMMERCE MODERNO
   ========================================================== */
@media (max-width: 768px) {
  
  /* --- 1. NAVEGACIÓN --- */
  nav { padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
  .nav-links { display: none; }
  .nav-logo { font-size: 22px; letter-spacing: 4px; }
  .nav-cta { padding: 8px 12px; font-size: 10px; } /* Ajuste para que no se corte el botón Regresar */

  /* --- 2. FILTROS DE ESTILO --- */
  .productos-header { margin-bottom: 20px; }
  .section-title { font-size: 38px; }
  .filtros-bar { 
    display: flex; 
    flex-wrap: wrap; /* Hace que caigan a la siguiente línea si no caben */
    gap: 8px; 
    margin-bottom: 25px; 
  }
  .filtro-btn { 
    flex: 1 1 calc(50% - 8px); /* Los divide en un bloque de 2x2 parejo */
    text-align: center;
    padding: 10px; 
    font-size: 11px; 
  }

  /* --- 3. GRILLA DE PRODUCTOS Y TARJETAS --- */
  .productos { padding: 40px 15px; }
  .productos-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px; /* Espacio justo entre las dos columnas */
  }

  /* La foto: Mismo tamaño exacto para todas */
  .producto-img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 3/4 !important; /* Proporción estándar de moda */
    margin-bottom: 12px;
    background: #111; /* Color de fondo si la foto demora en cargar o está rota */
  }
  .producto-img img {
    object-fit: cover !important;
    object-position: top center !important;
  }

  /* Textos principales */
  .producto-nombre { 
    font-size: 11px; 
    line-height: 1.3;
    white-space: normal; /* Permite que el nombre ocupe dos líneas si es largo */
    margin-bottom: 6px;
  }
  .producto-estilo { font-size: 9px; margin-bottom: 8px; }
  
  /* Bolitas de colores (Forzamos a que salten de línea en celular) */
  .producto-card > div[style*="margin: 5px 0"] {
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 5px 0 10px 0 !important;
  }

  /* Tallas en la tarjeta */
  .producto-tallas { 
    flex-wrap: wrap; 
    gap: 4px; 
    margin-bottom: 12px; 
  }
  .producto-tallas .talla-btn { 
    min-width: 26px !important; 
    padding: 4px !important; 
    font-size: 10px; 
  }

  /* --- 4. PRECIO Y BOTÓN "PEDIR" --- */
  .producto-footer { 
    flex-direction: column; /* Apila el precio arriba y el botón abajo */
    align-items: flex-start; 
    gap: 10px; 
  }
  .producto-precio { font-size: 16px; }
  .producto-precio span { font-size: 9px; }
  .btn-comprar { 
    width: 100%; /* Botón ocupa todo el ancho */
    padding: 10px; 
    font-size: 10px; 
    text-align: center;
  }

  /* --- 5. MODAL DE PRODUCTO --- */
  .modal-overlay { padding: 0; }
  .modal-box {
    grid-template-columns: 1fr;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: #0a0a0a;   /* mismo negro parejo que la info */
  }

  
  .modal-img {
    width: 100%;
    height: 48vh !important;
    aspect-ratio: auto !important;
    flex-shrink: 0;
    background: #0d0d0d;
    padding: 0;
    position: relative !important;
    overflow: hidden;
  }
  .modal-img img,
  #modalPlaceholder img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;         /* embona completa, sin bandas */
    object-position: top center !important;
    display: block !important;
    margin: 0 !important;
  }
  /* El placeholder llena todo el contenedor */
  #modalPlaceholder {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

 
  .modal-info {
    padding: 26px 20px 24px;
    flex: 1 1 auto;
    position: relative;
    z-index: 2;
    margin-top: -60px;                 /* sube sobre la imagen */
    border-radius: 18px 18px 0 0;      /* esquinas superiores redondeadas */
    background: linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0) 0%,
      rgba(10, 10, 10, 0.6) 20%,
      rgba(10, 10, 10, 1) 42%,
      rgba(10, 10, 10, 1) 100%
    );
    background-color: #0a0a0a;         /* mismo negro parejo hasta abajo */
  }
  .modal-tag { font-size: 9px; letter-spacing: 2px; margin-bottom: 8px; }
  .modal-nombre { font-size: 24px; letter-spacing: 2px; margin-bottom: 6px; }
  .modal-precio { font-size: 20px; margin-bottom: 14px; }
  .modal-desc { font-size: 12px; line-height: 1.6; margin-bottom: 18px; }
  .modal-tallas-label { margin-bottom: 8px; }
  .modal-tallas { gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }

  /* Botones de talla en móvil: se adaptan al texto (incluido "Estándar")
     sin salirse de la caja. Altura fija, ancho según contenido con tope. */
  #modalTallas .talla-modal-btn,
  .talla-modal-btn {
    width: auto !important;
    min-width: 44px;
    max-width: 100%;
    height: auto !important;
    min-height: 44px;
    padding: 10px 14px !important;
    font-size: 12px;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .modal-info .btn-whatsapp { padding: 13px; margin-top: 8px; }

  /* Contenedor de colores más compacto */
  #modalColoresContainer { margin-bottom: 4px; }
  #modalColores { gap: 10px !important; margin-bottom: 14px !important; }
  .color-circle-btn { width: 28px; height: 28px; }

  .manifiesto { padding: 60px 20px; margin-top: 40px; }
  .manifiesto blockquote { font-size: 24px; }
  .manifiesto blockquote::before { left: 0; top: -25px; font-size: 60px; }
  .pilares { grid-template-columns: 1fr; gap: 20px; }

  .footer-full { padding: 50px 20px 0; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
  .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }

}

/* --- Ajuste de Etiquetas/Badges en la foto para Celular --- */
  .producto-badge {
    top: 8px !important;
    left: 8px !important;
    font-size: 7px !important;
    padding: 3px 6px !important;
    letter-spacing: 1px !important;
  }

  .producto-tag {
    top: 8px !important;
    right: 8px !important;
    font-size: 7px !important;
    padding: 3px 6px !important;
    letter-spacing: 1px !important;
  }

  /* Ajuste para la etiqueta secundaria de "Últimas unidades" si aparece */
  .producto-badge.ultimas {
    top: 28px !important; 
  }
  
.productos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;  
}


.producto-card {
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}


.producto-img {
  width: 100%;
  aspect-ratio: 3 / 4;   
  height: auto !important;
  background: var(--surface);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;        
  margin-bottom: 16px;
}


.producto-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}


.producto-img img[src=""],
.producto-img img:not([src]) {
  visibility: hidden;
}


.producto-nombre {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 6px;
  min-height: 2.6em;      
  line-height: 1.3;
}


.producto-card > div[style*="margin: 5px 0"],
.producto-card > div[style*="margin:5px 0"] {
  min-height: 22px;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 4px;
}


.producto-tallas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  min-height: 36px;      
}


.producto-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;       
}

/* ============================================================
   RESPONSIVE MÓVIL  (≤ 768 px)
   ============================================================ */
@media (max-width: 768px) {

  .productos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    align-items: stretch;
  }

  /* La foto mantiene proporción 3/4 en móvil también */
  .producto-img {
    aspect-ratio: 3 / 4;
    height: auto !important;
    margin-bottom: 12px;
  }

  /* Nombre: reserva espacio para 2 líneas en fuente más pequeña */
  .producto-nombre {
    font-size: 11px;
    min-height: 2.8em;
    line-height: 1.4;
    margin-bottom: 6px;
  }

  .producto-tallas {
    gap: 4px;
    margin-bottom: 10px;
    min-height: 30px;
  }

  .producto-tallas .talla-btn {
    min-width: 26px !important;
    padding: 4px !important;
    font-size: 10px;
  }

  .producto-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .producto-precio { font-size: 16px; }
  .producto-precio span { font-size: 9px; }

  .btn-comprar {
    width: 100%;
    padding: 10px;
    font-size: 10px;
    text-align: center;
  }

  /* Badges más pequeñas en móvil */
  .producto-badge {
    top: 8px !important;
    left: 8px !important;
    font-size: 7px !important;
    padding: 3px 6px !important;
    letter-spacing: 1px !important;
  }
  .producto-tag {
    top: 8px !important;
    right: 8px !important;
    font-size: 7px !important;
    padding: 3px 6px !important;
    letter-spacing: 1px !important;
  }
  .producto-badge.ultimas {
    top: 28px !important;
  }

}


   

/* --- HEADER DE SECCIÓN --- */
#coleccion .section-label {
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}

#coleccion .section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: 3px;
  color: var(--white);
  margin-bottom: 40px;
}

/* --- GRID: siempre 4 columnas iguales en desktop --- */
#coleccion .productos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px;
  align-items: stretch;
}

/* --- TARJETA: flex-column para empujar el footer al fondo --- */
#coleccion .producto-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

#coleccion .producto-card:hover {
  border-color: var(--chrome);
}

/* --- IMAGEN: proporción fija 3/4, nunca colapsa --- */
#coleccion .producto-img {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: #1a1a1a;
  margin-bottom: 0;
}

#coleccion .producto-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Si la imagen no carga, el fondo de color llena el espacio */
#coleccion .producto-img img[src=""],
#coleccion .producto-img img:not([src]) {
  visibility: hidden;
}

/* --- CUERPO DE LA TARJETA: padding uniforme --- */
#coleccion .producto-nombre,
#coleccion .producto-estilo,
#coleccion .producto-tallas,
#coleccion .producto-footer,
#coleccion .producto-card > div[style*="margin"] {
  padding-left: 12px;
  padding-right: 12px;
}

/* --- NOMBRE: máximo 2 líneas, altura reservada --- */
#coleccion .producto-nombre {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.4;
  min-height: 2.8em;       /* reserva exacta para 2 líneas */
  display: -webkit-box;
 
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 14px;
  margin-bottom: 6px;
  padding-left: 12px;
  padding-right: 12px;
}

/* --- SWATCHES DE COLOR --- */
#coleccion .producto-card > div[style*="margin: 5px"],
#coleccion .producto-card > div[style*="margin:5px"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  min-height: 20px;
  padding-left: 12px;
  padding-right: 12px;
  margin: 6px 0 !important;
}

/* --- LÍNEA DE ESTILO --- */
#coleccion .producto-estilo {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-left: 12px;
  padding-right: 12px;
}

/* --- TALLAS: en una sola fila sin desbordarse hacia abajo --- */
#coleccion .producto-tallas {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 30px;
  margin-bottom: 12px;
  padding-left: 12px;
  padding-right: 12px;
}

#coleccion .talla-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--chrome);
  font-size: 10px;
  font-family: 'Inter', sans-serif;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
}

#coleccion .talla-btn:hover {
  border-color: var(--chrome);
  color: var(--white);
}

#coleccion .talla-btn.agotada {
  opacity: 0.25;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* --- FOOTER: precio + botón siempre al fondo --- */
#coleccion .producto-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;         /* ← empuja al fondo */
  padding: 12px 12px 14px;
  border-top: 1px solid var(--border);
}

#coleccion .producto-precio {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--chrome-light);
  line-height: 1;
}

#coleccion .producto-precio span {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--muted);
  font-weight: 300;
}

#coleccion .btn-comprar {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--chrome);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 14px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.3s;
  white-space: nowrap;
}

#coleccion .btn-comprar:hover {
  border-color: var(--chrome);
  background: var(--chrome);
  color: var(--black);
}

/* --- BADGES (posición correcta) --- */
#coleccion .producto-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 8px;
  letter-spacing: 1.5px;
  padding: 4px 8px;
  z-index: 2;
}

#coleccion .producto-badge.ultimas {
  top: 36px;
}

#coleccion .producto-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 8px;
  letter-spacing: 1.5px;
  padding: 4px 8px;
  z-index: 2;
}

/* --- BOTÓN VER COLECCIÓN COMPLETA --- */
#coleccion #btnVerColeccion {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--chrome);
  color: var(--chrome);
  padding: 16px 56px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s;
}

#coleccion #btnVerColeccion:hover {
  background: var(--chrome-light);
  color: var(--black);
  border-color: var(--chrome-light);
}

/* VYNTA HOME COLECCION */
@media (max-width: 600px) {

  #coleccion {
    padding: 40px 14px 60px;
  }

  #coleccion .section-title {
    font-size: 36px;
    margin-bottom: 24px;
  }

  /* 2 columnas ajustadas */
  #coleccion .productos-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  /* Imagen: misma proporción */
  #coleccion .producto-img {
    aspect-ratio: 3 / 4 !important;
  }

  /* Nombre más pequeño */
  #coleccion .producto-nombre {
    font-size: 10px;
    letter-spacing: 1px;
    min-height: 2.6em;
    margin-top: 10px;
    margin-bottom: 4px;
  }

  /* Tallas compactas */
  #coleccion .talla-btn {
    min-width: 24px;
    height: 24px;
    font-size: 9px;
    padding: 0 5px;
  }

  /* Footer: apila precio y botón */
  #coleccion .producto-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 10px 12px;
  }

  #coleccion .producto-precio {
    font-size: 17px;
  }

  #coleccion .btn-comprar {
    width: 100%;
    text-align: center;
    padding: 9px;
    font-size: 9px;
  }

  /* Badges más chicas */
  #coleccion .producto-badge {
    top: 8px;
    left: 8px;
    font-size: 7px;
    padding: 3px 6px;
  }

  #coleccion .producto-badge.ultimas {
    top: 28px;
  }

  #coleccion .producto-tag {
    top: 8px;
    right: 8px;
    font-size: 7px;
    padding: 3px 6px;
  }

  /* Botón ver más: ancho completo en móvil */
  #coleccion #btnVerColeccion {
    padding: 14px 0;
    width: 100%;
    text-align: center;
  }

}


/* Los 3 botones: mismo ancho, misma altura, mismo padding */
.cta-buttons .btn-whatsapp,
.cta-buttons .btn-ig,
.cta-buttons .btn-facebook {
  width: 100% ;
  display: flex ;
  align-items: center;
  justify-content: center ;
  gap: 12px ;
  padding: 18px 24px ;
  font-size: 12px ;
  letter-spacing: 3px ;
  text-transform: uppercase ;
  font-family: 'Inter', sans-serif ;
  font-weight: 600 ;
  text-decoration: none ;
  box-sizing: border-box ;
  transition: all 0.3s ;
  min-height: 58px ;
}

/* WhatsApp — verde */
.cta-buttons .btn-whatsapp {
  background: #34dedba0 ;
  color: #000 ;
  border: none ;
}
.cta-buttons .btn-whatsapp:hover {
  background: #20bbab ;
  transform: translateY(-2px);
}

/* RESPONSIVE — en desktop los botones van en fila si hay espacio */
@media (min-width: 601px) {

  .cta-buttons .btn-whatsapp,
  .cta-buttons .btn-ig,
  .cta-buttons .btn-facebook {
    width: auto;
    min-width: 200px !important;
    flex: 1 1 180px ;
  }

}


/*  DISEÑO RESPONSIVO (MÓVILES Y TABLETS) */
@media (max-width: 992px) {

  
  .pilares {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
}


  /* Estilos de tipografía originales adaptados */
  .section-label {
    display: block;
    margin-bottom: 10px;
    color: #ffffff;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
  }

  .section-label {
    display: block;
    margin-bottom: 10px;
    color: #ffffff;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
  }

.style-content h3 {
  color: #ffffff;
  font-size: 13px;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}

.style-content p {
  color: #b0b0b0; /* Un gris un poco más claro para mejor contraste sobre #181818 */
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  max-width: 450px;
}

.style-content h3 {
  color: #ffffff;
  font-size: 13px;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin: 0 0 6px 0;
}

.style-content p {
  color: #b0b0b0; 
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  max-width: 450px;
}


.color-circle-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.color-circle-btn:hover {
  transform: scale(1.1);
}

.color-circle-btn.activo {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.carrusel-dots {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}

.carrusel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.2s ease;
}

.carrusel-dot.activo {
  background: #fff;
}
/* Correcciones específicas vynta.html */

/* Alineación de tarjetas de producto */
#coleccion-hombre .producto-card,
#coleccion-mujer .producto-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}

#coleccion-hombre .producto-nombre,
#coleccion-mujer .producto-nombre {
  min-height: 2.8em;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#coleccion-hombre .producto-tallas,
#coleccion-mujer .producto-tallas {
  min-height: 34px;
  align-items: flex-start;
}

#coleccion-hombre .producto-footer,
#coleccion-mujer .producto-footer {
  margin-top: auto !important; 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

#coleccion-hombre .btn-comprar,
#coleccion-mujer .btn-comprar {
  width: 100%;
  text-align: center;
  padding: 12px 0;
}

/* Corrección de imágenes y botones hero en móvil */
@media (max-width: 768px) {
  
  #hero-hombre .hero-single-img,
  #hero-mujer .hero-single-img {
    background-position: center 15% !important; 
  }

  #hero-hombre .hero-cta-center,
  #hero-mujer .hero-cta-center {
    width: 85%;
    max-width: 320px;
    bottom: 12%; 
  }

  #hero-hombre .btn-transparente,
  #hero-mujer .btn-transparente {
    width: 100%;
    text-align: center;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: normal;
  }

  #hero-hombre .hero-coleccion-dropdown .btn-transparente::after {
    margin-left: 0;
  }
}

.modal-info {
  background: rgba(20, 20, 20, 0.55);   /* medio transparente */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 768px) {
  /* En móvil el fondo de la info lo da el degradado del solapamiento
     (definido más arriba), por eso aquí no imponemos un color sólido
     que lo tape. Sin blur para no difuminar la imagen que asoma. */
  .modal-info {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}


#imgLightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  cursor: zoom-out;
}

#imgLightbox.activo {
  opacity: 1;
  visibility: visible;
}

#imgLightbox .lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;          /* imagen COMPLETA, sin recortes */
  transform: scale(0.96);
  transition: transform 0.3s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

#imgLightbox.activo .lightbox-img {
  transform: scale(1);
}

#imgLightbox .lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #f5f5f5;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 3001;
  transition: all 0.2s ease;
}

#imgLightbox .lightbox-close:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: #fff;
}

/* La ampliación ahora se hace con el botón "Ampliar imagen",
   por eso la imagen ya no lleva cursor de zoom. */

/* ==========================================================
   BOTÓN "AMPLIAR" (modal de producto)
   Discreto y al estilo del sitio: fondo transparente, borde
   fino, texto claro y acento al pasar el cursor. Aplica a
   hombre y mujer. El acento usa --accent si existe (mujer);
   en hombre cae a un gris claro por defecto.
   ========================================================== */
.btn-ampliar-imagen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 4px;
  padding: 9px 16px;

  background: transparent;
  border: 1px solid #3a3a3a;
  color: #f5f5f5;
  cursor: pointer;

  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;

  transition: border-color 0.2s ease, color 0.2s ease;
}

.btn-ampliar-imagen svg {
  width: 15px;
  height: 15px;
}

.btn-ampliar-imagen:hover {
  border-color: var(--accent, #cccccc);
  color: var(--accent, #ffffff);
}


.carrusel-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;

  background: none;
  border: none;
  padding: 0 10px;
  margin: 0;
  cursor: pointer;

  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  line-height: 1;
  font-weight: 300;

  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;

 
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
}

.carrusel-flecha.izq {
  left: 6px;
}

.carrusel-flecha.der {
  right: 6px;
}

.carrusel-flecha:hover {
  opacity: 1;
  color: var(--accent, #ffffff);
}

.carrusel-flecha:active {
  transform: translateY(-50%) scale(0.9);
}