/* ===================================================================
   Catálogo Web - Estilos públicos
   Los colores se definen como variables CSS inyectadas desde PHP
   (ver includes/header.php) para que sean 100% editables desde el panel.
=================================================================== */

:root{
  --primary: #0b6e99;
  --secondary: #064a68;
  --accent: #ff7a00;
  --text: #1a1a1a;
  --bg: #f6f8fa;
  --card-bg: #ffffff;
  --border: #e5e9ec;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(0,0,0,.06);
  --shadow-hover: 0 10px 30px rgba(0,0,0,.12);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height:1.5;
}
h1,h2,h3,h4{ font-family:'Poppins', sans-serif; margin:0 0 .5em; line-height:1.25; }
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width:1200px; margin:0 auto; padding:0 20px; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- Header ---------- */
.site-header{ background:#fff; box-shadow: var(--shadow); position: sticky; top:0; z-index:50; }
.header-inner{ display:flex; align-items:center; gap:24px; padding:14px 20px; }
.brand{ flex-shrink:0; }
.brand-logo{ height:44px; width:auto; }
.brand-name{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.4rem; color: var(--primary); }

.search-form{ flex:1; max-width:520px; position:relative; display:flex; }
.search-form input{
  width:100%; padding:11px 44px 11px 16px; border:1px solid var(--border); border-radius:30px;
  font-size:.95rem; outline:none; transition:border-color .2s;
}
.search-form input:focus{ border-color: var(--primary); }
.search-form button{
  position:absolute; right:4px; top:4px; bottom:4px; width:38px; border:none; border-radius:50%;
  background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center;
}
.search-suggestions{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border-radius:12px;
  box-shadow: var(--shadow-hover); max-height:360px; overflow-y:auto; display:none; z-index:60;
}
.search-suggestions.active{ display:block; }
.search-suggestions a{
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border);
}
.search-suggestions a:hover{ background:var(--bg); }
.search-suggestions img{ width:40px; height:40px; object-fit:cover; border-radius:8px; background:#eee; }
.search-suggestions .s-name{ font-weight:500; font-size:.9rem; }
.search-suggestions .s-price{ font-size:.8rem; color:var(--primary); }

.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.menu-toggle span{ width:24px; height:2px; background:var(--text); display:block; }

.site-nav{ background: var(--primary); }
.nav-inner{ display:flex; flex-wrap:wrap; gap:0 4px; }
.site-nav a{ color:#fff; padding:12px 16px; font-size:.92rem; font-weight:500; white-space:nowrap; opacity:.9; display:block; }
.site-nav a:hover, .site-nav a.active{ opacity:1; background: rgba(255,255,255,.12); }
.nav-item{ position:relative; display:flex; }
.sub-toggle{ display:none; }
.sub-menu{
  display:none; position:absolute; top:100%; left:0; min-width:220px; flex-direction:column;
  background: var(--secondary); box-shadow: var(--shadow-hover); border-radius:0 0 10px 10px; z-index:70; padding:6px 0;
}
@media (min-width: 721px){
  .nav-item.has-sub:hover .sub-menu, .nav-item.has-sub:focus-within .sub-menu{ display:flex; }
}
.sub-menu a{ padding:10px 18px; font-size:.88rem; }

/* ---------- Alerts ---------- */
.alert{ margin-top:16px; padding:12px 18px; border-radius:10px; font-size:.9rem; }
.alert-success{ background:#e6f7ee; color:#0d7a3e; }
.alert-error{ background:#fde8e8; color:#c0392b; }
.alert-info{ background:#e8f2fb; color:#1468b3; }

/* ---------- Carrusel de promociones ---------- */
.hero-carousel{ position:relative; height:380px; overflow:hidden; background: var(--secondary); color:#fff; margin-bottom:34px; }
.hc-slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; opacity:0; visibility:hidden; transition:opacity .6s ease, visibility .6s; background: linear-gradient(135deg, var(--secondary), var(--primary)); }
.hc-slide.is-active{ opacity:1; visibility:visible; }
.hc-img{ position:absolute; top:0; left:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; }
.hc-overlay{ position:absolute; inset:0; background: rgba(0,0,0,.4); }
.hc-content{ position:relative; z-index:2; width:100%; padding-left:64px; padding-right:64px; }
.hc-title{ font-size:2.4rem; margin:0 auto .3em; max-width:720px; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.hc-sub{ font-size:1.1rem; max-width:600px; margin:0 auto 22px; opacity:.95; }
.hc-btn{ display:inline-block; background: var(--accent); color:#fff; padding:12px 24px; border-radius:10px; font-weight:600; }
.hc-btn:hover{ filter:brightness(1.08); }
.hc-prev, .hc-next{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:42px; border-radius:50%;
  border:none; background: rgba(255,255,255,.9); color: var(--secondary); font-size:1.6rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.hc-prev{ left:14px; }
.hc-next{ right:14px; }
.hc-dots{ position:absolute; bottom:14px; left:0; right:0; z-index:3; display:flex; justify-content:center; gap:8px; }
.hc-dot{ width:10px; height:10px; padding:0; border-radius:50%; border:none; background: rgba(255,255,255,.5); cursor:pointer; }
.hc-dot.is-active{ background:#fff; }
.hc-slide.no-img .hc-title{ font-size:2.6rem; }
.hc-prev:focus-visible, .hc-next:focus-visible, .hc-dot:focus-visible, .hc-btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* ---------- Section titles ---------- */
.section{ padding:30px 0; }
.section-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.section-title h2{ font-size:1.5rem; color: var(--secondary); border-left:5px solid var(--accent); padding-left:12px; }
.section-title a{ color: var(--primary); font-weight:600; font-size:.9rem; }

/* ---------- Category grid (home) ---------- */
.categories-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:18px; }
.category-card{
  background: var(--card-bg); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s; text-align:center;
}
.category-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.category-card .cat-img{ height:120px; background:var(--bg); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.category-card .cat-img img{ width:100%; height:100%; object-fit:cover; }
.category-card .cat-name{ padding:14px; font-weight:600; color:var(--secondary); }

/* ---------- Product grid ---------- */
.products-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:22px; }
.product-card{
  background: var(--card-bg); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s; display:flex; flex-direction:column; position:relative;
}
.product-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.product-card .badge{
  position:absolute; top:10px; left:10px; background: var(--accent); color:#fff; font-size:.72rem;
  padding:4px 10px; border-radius:20px; font-weight:600; z-index:2;
}
.product-card .p-img{ height:200px; background:#f0f2f4; overflow:hidden; }
.product-card .p-img img{ width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.product-card:hover .p-img img{ transform:scale(1.06); }
.product-card .p-body{ padding:16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-card .p-cat{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--primary); font-weight:600; }
.product-card .p-name{ font-size:1rem; font-weight:600; color:var(--text); }
.product-card .p-desc{ font-size:.85rem; color:#666; flex:1; }
.product-card .p-price{ font-size:1.15rem; font-weight:700; color: var(--secondary); }
.product-card .p-consult{ font-size:.95rem; color: var(--primary); font-weight:600; }
.product-card .p-price .compare{ font-size:.85rem; color:#999; text-decoration:line-through; font-weight:400; margin-left:6px; }
.product-card .p-stock{ font-size:.78rem; color:#0d7a3e; }
.product-card .p-stock.out{ color:#c0392b; }
.product-card .p-btn{
  margin-top:8px; display:inline-block; text-align:center; background: var(--primary); color:#fff;
  padding:9px; border-radius:8px; font-weight:600; font-size:.88rem; transition:background .2s;
}
.product-card .p-btn:hover{ background: var(--secondary); }

.subcategory-row{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px; }
.subcategory-chip{ background:#fff; color: var(--secondary); border:1px solid var(--border); padding:8px 16px; border-radius:30px; font-size:.9rem; font-weight:600; transition:all .2s; }
.subcategory-chip:hover{ background: var(--primary); color:#fff; border-color: var(--primary); }

.empty-state{ text-align:center; padding:60px 20px; color:#888; }

/* ---------- Pagination ---------- */
.pagination{ display:flex; justify-content:center; gap:6px; margin-top:30px; flex-wrap:wrap; }
.pagination a, .pagination span{
  padding:8px 14px; border-radius:8px; background:#fff; box-shadow: var(--shadow); font-size:.9rem;
}
.pagination .current{ background: var(--primary); color:#fff; }

/* ---------- Product detail ---------- */
.breadcrumbs{ font-size:.85rem; color:#777; margin-bottom:18px; }
.breadcrumbs a{ color: var(--primary); }
.product-detail{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; background:#fff; border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.product-gallery .main-image{ border-radius:12px; overflow:hidden; background:#f0f2f4; height:420px; margin-bottom:12px; }
.product-gallery .main-image img{ width:100%; height:100%; object-fit:cover; }
.thumb-list{ display:flex; gap:10px; flex-wrap:wrap; }
.thumb-list img{ width:70px; height:70px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid transparent; }
.thumb-list img.active{ border-color: var(--primary); }
.product-info .p-cat{ font-size:.8rem; text-transform:uppercase; color:var(--primary); font-weight:700; letter-spacing:.05em; }
.product-info h1{ font-size:1.8rem; margin:.2em 0 .4em; }
.product-info .price-row{ display:flex; align-items:baseline; gap:12px; margin:14px 0; }
.product-info .price{ font-size:2rem; font-weight:700; color: var(--secondary); }
.product-info .compare{ font-size:1.1rem; color:#999; text-decoration:line-through; }
.product-info .sku{ color:#888; font-size:.85rem; margin-bottom:10px; }
.product-info .desc{ color:#444; margin:18px 0; white-space:pre-line; }
.product-actions{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:10px; font-weight:600; border:none; font-size:.95rem; }
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-whatsapp:hover{ background:#1ebe59; }
.btn-outline{ background:#fff; border:1px solid var(--border); color:var(--text); }

/* ---------- Floating WhatsApp ---------- */
.whatsapp-float{
  position:fixed; bottom:24px; right:24px; width:60px; height:60px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.25); z-index:100;
  transition: transform .2s;
}
.whatsapp-float:hover{ transform: scale(1.08); }

/* ---------- Páginas informativas ---------- */
.info-hero{ background:linear-gradient(135deg, var(--secondary), var(--primary)); color:#fff; padding:44px 0; margin-bottom:26px; }
.info-hero h1{ font-size:2rem; margin-bottom:.3em; }
.info-hero p{ margin:0; opacity:.92; }
.info-contact-bar{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px; }
.btn-primary-link{ background:var(--primary); color:#fff; }
.btn-primary-link:hover{ background:var(--secondary); }
.info-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:18px; margin-bottom:30px; }
.info-card{ background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); border-top:4px solid var(--accent); }
.info-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.info-card-head h2{ font-size:1.15rem; color: var(--secondary); margin:0; }
.info-icon{ font-size:1.6rem; line-height:1; }
.info-content{ line-height:1.7; color:#333; }
.info-content h3{ font-size:1rem; color: var(--primary); margin:18px 0 6px; }
.info-map{ background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); margin-bottom:40px; }
.info-map-head{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:16px; }
.info-map-head h2{ font-size:1.15rem; color: var(--secondary); margin:0 8px 0 0; }
.info-map-head p{ margin:0; color:#555; flex:1; min-width:180px; }
.info-map-frame{ position:relative; width:100%; height:380px; border-radius:10px; overflow:hidden; background:#eef1f3; }
.info-map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.info-content p{ margin:0 0 14px; }
.info-content ul{ margin:0 0 14px; padding-left:20px; }
.info-content li{ margin-bottom:4px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--secondary); color:#fff; margin-top:60px; }
.footer-inner{ display:flex; flex-wrap:wrap; gap:40px; padding:40px 20px; }
.footer-col{ flex:1; min-width:220px; }
.footer-col h4{ color:#fff; margin-bottom:10px; }
.footer-col p{ color:rgba(255,255,255,.75); margin:4px 0; font-size:.9rem; }
.footer-col a{ color:#fff; }
.social-links{ display:flex; gap:14px; margin-top:10px; }
.social-links a{ font-size:.85rem; opacity:.85; }
.footer-bottom{ background: rgba(0,0,0,.15); padding:14px 0; text-align:center; font-size:.82rem; color:rgba(255,255,255,.7); }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .products-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .product-detail{ grid-template-columns: 1fr; }
  .product-gallery .main-image{ height:300px; }
}
@media (max-width: 720px){
  :root{ --search-h:42px; --search-gap:10px; }
  /* .site-header delante: si no, la regla .container (padding:0 14px) más abajo pisa el relleno vertical */
  .site-header .header-inner{ flex-wrap:wrap; gap:0 16px; padding:9px 14px 10px; }
  .brand{ margin-right:auto; }
  .brand-logo{ height:34px; }
  .search-form{ order:3; flex:0 0 100%; max-width:100%; width:100%; height:var(--search-h); margin-top:var(--search-gap); opacity:1;
    transition:height .28s ease, margin-top .28s ease, opacity .2s ease; }
  /* Al bajar: el buscador se desvanece y se pliega, queda solo logo + menú.
     El header está en el flujo de la página: lo que se achica se lo devolvemos como margen inferior
     (mismo tiempo y curva) para que el contenido no se corra. Si se corriera, el navegador reajusta
     el scroll y el buscador entraría en un ciclo de abrir y cerrar. */
  .site-header{ transition:margin-bottom .28s ease, box-shadow .25s ease; }
  .site-header.search-collapsed{ margin-bottom:calc(var(--search-h) + var(--search-gap)); box-shadow:0 2px 12px rgba(0,0,0,.1); }
  .site-header.search-collapsed .search-form{ height:0; margin-top:0; opacity:0; overflow:hidden; pointer-events:none; visibility:hidden;
    transition:height .28s ease, margin-top .28s ease, opacity .2s ease, visibility 0s .28s; }
  @media (prefers-reduced-motion: reduce){
    .search-form, .site-header.search-collapsed .search-form, .site-header{ transition:none; }
  }
  .search-form input{ height:100%; padding:0 46px 0 16px; font-size:16px; }
  .search-form button{ width:36px; }

  .hero-carousel{ height:320px; margin-bottom:22px; }
  .hc-content{ padding-left:44px; padding-right:44px; }
  .hc-title{ font-size:1.6rem; line-height:1.2; }
  .hc-slide.no-img .hc-title{ font-size:1.8rem; }
  .hc-sub{ font-size:.95rem; margin-bottom:16px; }
  .hc-btn{ padding:10px 18px; font-size:.9rem; }
  .hc-prev, .hc-next{ width:36px; height:36px; font-size:1.3rem; }
  .hc-prev{ left:8px; }
  .hc-next{ right:8px; }
  .info-hero{ padding:28px 0; margin-bottom:18px; }
  .info-hero h1{ font-size:1.6rem; }
  .info-grid{ grid-template-columns:1fr; }
  .info-card{ padding:18px; }
  .info-map{ padding:16px; }
  .info-map-frame{ height:280px; }

  .section{ padding:18px 0; }
  .section-title{ margin-bottom:14px; }
  .section-title h2{ font-size:1.2rem; line-height:1.25; }
  .categories-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
  .category-card .cat-img{ height:96px; }
  .category-card .cat-name{ padding:10px 8px; font-size:.88rem; line-height:1.3; }
  .menu-toggle{ display:flex; margin-left:auto; }
  .site-nav{ display:none; }
  .site-nav.open{ display:block; }
  .nav-inner{ flex-direction:column; }
  .nav-item{ flex-wrap:wrap; align-items:center; }
  .nav-item > a{ flex:1; }
  .sub-toggle{ display:block; background:none; border:none; color:#fff; padding:12px 16px; font-size:.95rem; opacity:.9; cursor:pointer; }
  .sub-toggle[aria-expanded="true"]{ transform:rotate(180deg); }
  .sub-menu{ display:none; position:static; width:100%; min-width:0; box-shadow:none; border-radius:0; padding:0 0 4px; background:rgba(0,0,0,.15); }
  .nav-item.has-sub.open .sub-menu{ display:flex; }
  .sub-menu a{ padding:10px 16px 10px 30px; font-size:.88rem; }
  .hero h1{ font-size:1.8rem; }

  .container{ padding:0 14px; }
  .products-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
  .product-card{ border-radius:10px; }
  .product-card .badge{ font-size:.62rem; padding:3px 7px; top:6px; left:6px; }
  .product-card .p-img{ height:150px; }
  .product-card .p-body{ padding:10px; gap:4px; }
  .product-card .p-cat{ font-size:.62rem; }
  .product-card .p-name{ font-size:.85rem; line-height:1.3; }
  .product-card .p-desc{ display:none; }
  .product-card .p-price{ font-size:.95rem; }
  .product-card .p-price .compare{ display:block; margin-left:0; font-size:.75rem; }
  .product-card .p-stock{ font-size:.7rem; }
  .product-card .p-btn{ font-size:.78rem; padding:7px; margin-top:auto; }
  .product-card .p-body > :nth-last-child(2){ margin-bottom:6px; }

  /* Menú abierto: si hay muchas categorías, se desplaza dentro del menú (el header es fijo) */
  .site-nav.open{ max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y:auto; overscroll-behavior:contain; }

  /* Botón flotante de WhatsApp más chico y pegado al borde */
  .whatsapp-float{ width:52px; height:52px; bottom:16px; right:14px; }
  .whatsapp-float svg{ width:26px; height:26px; }
  .site-footer{ margin-top:36px; }
  .footer-inner{ gap:22px; padding:28px 14px; }
  .footer-col{ min-width:100%; }
  .footer-bottom{ padding:14px 0 80px; }

  /* Detalle de producto */
  .breadcrumbs{ font-size:.8rem; margin-bottom:12px; }
  .product-detail{ padding:14px; gap:18px; border-radius:12px; }
  .product-gallery .main-image{ height:auto; aspect-ratio:1 / 1; max-height:340px; margin-bottom:10px; }
  .thumb-list{ flex-wrap:nowrap; overflow-x:auto; gap:8px; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  .thumb-list img{ width:60px; height:60px; flex:0 0 auto; }
  .product-info h1{ font-size:1.3rem; }
  .product-info .price{ font-size:1.6rem; }
  .product-info .price-row{ margin:10px 0; }
  .product-info .desc{ margin:12px 0; }
  .product-actions{ flex-direction:column; gap:10px; margin-top:16px; }
  .product-actions .btn{ width:100%; justify-content:center; padding:13px 18px; }

  /* Información */
  .info-contact-bar{ flex-direction:column; gap:10px; margin-bottom:20px; }
  .info-contact-bar .btn{ width:100%; justify-content:center; text-align:center; overflow-wrap:anywhere; }
  .info-map-head .btn{ width:100%; justify-content:center; }
  .subcategory-row{ gap:8px; margin-bottom:18px; }
  .subcategory-chip{ padding:7px 14px; font-size:.85rem; }
}