/* ============================================================
   LAYOUT.CSS - CERASUS PROJECTS
   Estructura: Header, Nav, Hero, Subcategorías, Grid, Footer
   ============================================================ */

/* ── HEADER (negro como el footer) ── */
.header { background-color:var(--negro); position:sticky; top:0; z-index:100; border-bottom:none; }
.header-top { display:flex; align-items:center; justify-content:space-between; max-width:var(--ancho-maximo); margin:0 auto; padding:var(--espacio-md) var(--espacio-lg); height:80px; }
.logo { display:flex; align-items:center; gap:var(--espacio-sm); flex-shrink:0; }
.logo img { height:55px; width:auto; max-width:200px; object-fit:contain; }
.logo-text { font-weight:var(--peso-bold); font-size:var(--texto-lg); color:var(--negro); letter-spacing:3px; text-transform:uppercase; }

/* ── BUSCADOR (adaptado a header negro) ── */
.search-bar { flex:1; max-width:500px; margin:0 var(--espacio-2xl); position:relative; }
.search-bar input { width:100%; padding:10px 45px 10px 16px; border:1px solid rgba(255,255,255,0.3); border-radius:var(--radio-full); font-family:var(--fuente-principal); font-size:var(--texto-base); color:var(--blanco-puro); background-color:rgba(255,255,255,0.1); transition:border-color var(--transicion-rapida); }
.search-bar input::placeholder { color:rgba(255,255,255,0.5); }
.search-bar input:focus { outline:none; border-color:var(--rosa-sakura); background-color:rgba(255,255,255,0.15); }
.search-btn { position:absolute; right:4px; top:50%; transform:translateY(-50%); padding:8px 14px; color:rgba(255,255,255,0.7); font-size:var(--texto-md); border-radius:var(--radio-full); }
.search-btn:hover { color:var(--rosa-sakura); }

/* ── ICONOS HEADER (blancos sobre fondo negro) ── */
.header-icons { display:flex; align-items:center; gap:var(--espacio-lg); flex-shrink:0; }
.icon-link { display:flex; align-items:center; gap:6px; color:var(--blanco-crema); font-size:var(--texto-sm); font-weight:var(--peso-medium); position:relative; padding:6px; transition:color var(--transicion-rapida); }
.icon-link:hover { color:var(--rosa-sakura); }
.icon-link svg { width:22px; height:22px; stroke-width:1.5; }
.cart-count { position:absolute; top:-2px; right:-8px; background-color:var(--rosa-sakura); color:var(--blanco-puro); font-size:10px; font-weight:var(--peso-bold); width:18px; height:18px; border-radius:var(--radio-full); display:flex; align-items:center; justify-content:center; }

/* ── NAVEGACIÓN PRINCIPAL (negro como footer, hover rosa) ── */
.main-nav { display:flex; justify-content:center; align-items:center; gap:var(--espacio-lg); height:50px; background-color:var(--negro); border-bottom:none; }
.main-nav a { color:var(--blanco-crema); font-size:var(--texto-sm); font-weight:var(--peso-semibold); letter-spacing:1px; text-transform:uppercase; padding:14px 4px; border-bottom:2px solid transparent; transition:all var(--transicion-rapida); }
.main-nav a:hover, .main-nav a.active { color:var(--rosa-sakura); border-bottom-color:var(--rosa-sakura); }

/* ── HERO SECTION ── */
.hero { position:relative; width:100%; height:450px; overflow:hidden; margin-bottom:var(--espacio-3xl); }
.hero-image { width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4)); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:var(--espacio-lg); }
.hero-overlay h1 { color:var(--blanco-puro); font-size:var(--texto-3xl); font-weight:var(--peso-bold); margin-bottom:var(--espacio-md); letter-spacing:2px; }
.hero-overlay p { color:var(--blanco-puro); font-size:var(--texto-lg); margin-bottom:var(--espacio-xl); font-weight:var(--peso-light); }
.cta-btn { display:inline-block; padding:14px 40px; background-color:var(--blanco-puro); color:var(--negro); font-weight:var(--peso-bold); font-size:var(--texto-sm); letter-spacing:2px; text-transform:uppercase; transition:all var(--transicion-base); }
.cta-btn:hover { background-color:var(--rosa-sakura); color:var(--blanco-puro); }

/* ── SUBCATEGORÍAS CIRCULARES ── */
.subcategories { display:flex; justify-content:center; gap:var(--espacio-2xl); padding:var(--espacio-xl) var(--espacio-lg); margin-bottom:var(--espacio-2xl); max-width:var(--ancho-maximo); margin-left:auto; margin-right:auto; }
.subcat-item { text-align:center; cursor:pointer; transition:transform var(--transicion-rapida); }
.subcat-item:hover { transform:translateY(-4px); }
.subcat-img { width:100px; height:100px; border-radius:var(--radio-full); overflow:hidden; margin:0 auto var(--espacio-sm); border:2px solid var(--gris-claro); transition:border-color var(--transicion-rapida); background-color:var(--rosa-polvo); display:flex; align-items:center; justify-content:center; }
.subcat-item:hover .subcat-img { border-color:var(--rosa-sakura); }
.subcat-img img { width:100%; height:100%; object-fit:cover; }
.subcat-name { font-size:var(--texto-sm); font-weight:var(--peso-semibold); color:var(--negro); }
.subcat-item:hover .subcat-name { color:var(--rosa-sakura); }

/* ── SECCIONES ── */
.section { max-width:var(--ancho-maximo); margin:0 auto var(--espacio-3xl); padding:0 var(--espacio-lg); }
.section-title { font-size:var(--texto-xl); font-weight:var(--peso-semibold); text-align:left; margin-bottom:var(--espacio-xl); color:var(--negro); }

/* ── BREADCRUMB ── */
.breadcrumb { padding:var(--espacio-md) var(--espacio-lg); max-width:var(--ancho-maximo); margin:0 auto; font-size:var(--texto-sm); color:var(--gris-medio); }
.breadcrumb a { color:var(--gris-medio); text-decoration:underline; }
.breadcrumb a:hover { color:var(--negro); }
.breadcrumb span { margin:0 6px; color:var(--gris-claro); }

/* ── FILTROS Y ORDEN ── */
.filter-bar { display:flex; justify-content:space-between; align-items:center; padding:var(--espacio-md) 0; margin-bottom:var(--espacio-lg); border-bottom:var(--borde-fino); }
.filter-btn { display:flex; align-items:center; gap:var(--espacio-sm); font-size:var(--texto-sm); font-weight:var(--peso-medium); color:var(--negro); padding:8px 16px; border:var(--borde-fino); border-radius:var(--radio-sm); cursor:pointer; }
.filter-btn:hover { border-color:var(--rosa-sakura); }
.sort-select { font-family:var(--fuente-principal); font-size:var(--texto-sm); font-weight:var(--peso-medium); color:var(--negro); padding:8px 16px; border:var(--borde-fino); border-radius:var(--radio-sm); background-color:var(--blanco-puro); cursor:pointer; }

/* Panel de filtros */
.filters-panel { display:none; padding:var(--espacio-lg); margin-bottom:var(--espacio-lg); background-color:var(--blanco-puro); border:var(--borde-fino); border-radius:var(--radio-md); }
.filters-panel.active { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--espacio-xl); }
.filter-group h4 { font-size:var(--texto-sm); font-weight:var(--peso-semibold); margin-bottom:var(--espacio-md); text-transform:uppercase; letter-spacing:1px; }
.filter-options { display:flex; flex-wrap:wrap; gap:var(--espacio-sm); }
.filter-option { padding:6px 14px; border:var(--borde-fino); border-radius:var(--radio-sm); font-size:var(--texto-sm); cursor:pointer; transition:all var(--transicion-rapida); }
.filter-option:hover, .filter-option.selected { background-color:var(--negro); color:var(--blanco-puro); border-color:var(--negro); }
.color-option { width:28px; height:28px; border-radius:var(--radio-full); border:2px solid var(--gris-claro); cursor:pointer; }
.color-option:hover, .color-option.selected { border-color:var(--negro); }
.price-range { display:flex; gap:var(--espacio-md); align-items:center; }
.price-input { width:100px; padding:6px 10px; border:var(--borde-fino); border-radius:var(--radio-sm); font-family:var(--fuente-principal); font-size:var(--texto-sm); }

/* ── GRID DE PRODUCTOS (4 COLUMNAS, 500x769px) ── */
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--espacio-md); }
.product-card { position:relative; transition:transform var(--transicion-base); cursor:pointer; }
.product-card .card-image { position:relative; overflow:hidden; aspect-ratio:500/769; background-color:var(--gris-fondo); margin-bottom:var(--espacio-md); cursor:pointer; }
.product-card .card-image img { width:100%; height:100%; object-fit:cover; transition:transform 500ms ease; }

/* Hover effects SOLO en dispositivos con mouse (evita el problema del doble-tap en mobile) */
@media (hover: hover) {
    .product-card:hover { transform:translateY(-3px); }
    .product-card:hover .card-image img { transform:scale(1.03); }
    .product-card:hover .fav-btn { opacity:1; }
    .fav-btn:hover { background-color:var(--rosa-sakura); color:var(--blanco-puro); }
}

/* Badges */
.badge-discount { position:absolute; bottom:12px; left:12px; background-color:var(--negro); color:var(--blanco-puro); padding:4px 10px; font-size:var(--texto-xs); font-weight:var(--peso-bold); border-radius:var(--radio-sm); }
.badge-sale { position:absolute; top:12px; right:-6px; background-color:var(--rojo-descuento); color:var(--blanco-puro); padding:4px 8px; font-size:9px; font-weight:var(--peso-bold); letter-spacing:1px; writing-mode:vertical-rl; }
.badge-urgency { position:absolute; bottom:12px; right:12px; background-color:rgba(255,255,255,0.9); color:var(--negro); padding:4px 10px; font-size:var(--texto-xs); font-weight:var(--peso-semibold); border-radius:var(--radio-sm); }

/* Botón favorito */
.fav-btn { position:absolute; top:12px; right:12px; width:36px; height:36px; background-color:rgba(255,255,255,0.85); border-radius:var(--radio-full); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--transicion-rapida); opacity:0; border:none; }
.fav-btn.active { opacity:1; background-color:var(--rosa-sakura); color:var(--blanco-puro); }
.fav-btn svg { width:18px; height:18px; }

/* En dispositivos táctiles, el botón fav siempre está visible (no tiene hover) */
@media (hover: none) {
    .fav-btn { opacity:1; background-color:rgba(255,255,255,0.95); }
}

/* Info producto - TODO alineado a la izquierda (desktop y mobile) */
.card-info { padding:0; text-align:left; }
.card-brand { font-size:var(--texto-sm); font-weight:var(--peso-bold); color:var(--negro); margin-bottom:4px; text-align:left; }
.card-name { font-size:var(--texto-base); font-weight:var(--peso-normal); color:var(--gris-oscuro); margin-bottom:6px; line-height:1.4; text-align:left; }
.card-name a { color:var(--gris-oscuro); }
.card-name a:hover { color:var(--rosa-sakura); }
.card-prices { display:flex; justify-content:flex-start; align-items:center; gap:var(--espacio-sm); margin-bottom:4px; text-align:left; }
.price-original { font-size:var(--texto-sm); color:var(--gris-medio); text-decoration:line-through; }
.price-discount { font-size:var(--texto-base); font-weight:var(--peso-bold); color:var(--rojo-descuento); }
.price-savings { font-size:var(--texto-xs); color:var(--gris-medio); text-align:left; }

/* ── FOOTER ── */
.footer { background-color:var(--negro); color:var(--blanco-crema); margin-top:var(--espacio-3xl); }
.footer-content { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--espacio-2xl); max-width:var(--ancho-contenido); margin:0 auto; padding:var(--espacio-3xl) var(--espacio-lg); }
.footer-col h4 { color:var(--rosa-sakura); font-size:var(--texto-sm); font-weight:var(--peso-bold); letter-spacing:2px; text-transform:uppercase; margin-bottom:var(--espacio-lg); }
.footer-col p, .footer-col li { font-size:var(--texto-sm); color:var(--gris-claro); margin-bottom:var(--espacio-sm); line-height:1.8; }
.footer-col a { color:var(--gris-claro); transition:color var(--transicion-rapida); }
.footer-col a:hover { color:var(--rosa-sakura); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding:var(--espacio-lg); text-align:center; max-width:var(--ancho-contenido); margin:0 auto; }
.footer-bottom p { font-size:var(--texto-xs); color:var(--gris-medio); margin-bottom:var(--espacio-xs); }