/*
Theme Name:   Laimonix Child
Description:  Tema hijo de Kadence para Laimonix (cámaras, accesorios y servicios técnicos)
Author:       Laimonix
Template:     kadence
Version:      1.0.0
Text Domain:  laimonix-child
*/

/* ==========================================================
   1. Variables de diseño (tomadas del HTML de referencia)
   ========================================================== */
:root{
  --stone:#EDE8DB;
  --cream:#F7F4EA;
  --ink:#1E1C16;
  --ink-soft:#5B5848;
  --olive:#3B4A38;
  --olive-deep:#2C382A;
  --olive-tint:#E4E9E1;
  --terracotta:#A65A34;
  --line:#DCD5C1;
  --serif:'Newsreader', serif;
  --sans:'Work Sans', sans-serif;
  --radius:4px;
}

body{
  background:var(--stone);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
}

h1,h2,h3,.product_title,.woocommerce-loop-product__title{
  font-family:var(--serif);
  font-weight:500;
  color:var(--ink);
}

a{ color:inherit; }

/* ==========================================================
   2. Franja superior (barra util-bar del diseño original)
   ========================================================== */
.laimonix-utilbar{
  background:var(--olive);
  color:var(--cream);
  font-size:12.5px;
}
.laimonix-utilbar .wrap{
  max-width:1280px;
  margin:0 auto;
  padding:8px 28px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px;
}

/* ==========================================================
   3. Botón "Pedir por WhatsApp" (reemplaza add-to-cart
   en la categoría de cámaras/kits — ver functions.php)
   ========================================================== */
.laimonix-wa-btn{
  margin-top:auto;
  background:var(--olive);
  color:var(--cream) !important;
  border:none;
  padding:11px;
  border-radius:var(--radius);
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  text-decoration:none;
}
.laimonix-wa-btn:hover{
  background:var(--olive-deep);
  color:var(--cream) !important;
}

/* ==========================================================
   4. Botón flotante de WhatsApp (fixed, esquina inferior)
   ========================================================== */
.laimonix-wa-fab{
  position:fixed;
  bottom:22px;
  right:22px;
  background:var(--olive);
  color:var(--cream);
  border:none;
  padding:14px 20px;
  border-radius:30px;
  font-size:13.5px;
  font-weight:700;
  box-shadow:0 6px 20px rgba(30,28,22,0.25);
  z-index:9999;
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.laimonix-wa-fab:hover{ background:var(--olive-deep); }

/* ==========================================================
   5. Tarjetas de producto (grid de la tienda)
   ========================================================== */
ul.products li.product{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:6px;
  padding:16px;
  display:flex;
  flex-direction:column;
}
ul.products li.product:hover{ border-color:var(--olive); }
ul.products li.product .price{
  font-size:17px;
  font-weight:700;
  color:var(--ink);
}
ul.products li.product .button{
  margin-top:auto;
  background:var(--olive) !important;
  color:var(--cream) !important;
  border-radius:var(--radius) !important;
  font-weight:600;
}
ul.products li.product .button:hover{ background:var(--olive-deep) !important; }

/* ==========================================================
   6. Contenedor general (wrap) y secciones de la plantilla
   de inicio (hero, franja de confianza, vitrinas, servicios,
   categorías, cómo comprar)
   ========================================================== */
.wrap{ max-width:1280px; margin:0 auto; padding:0 28px; }
@media (max-width:640px){ .wrap{ padding:0 18px; } }
.sc{ font-size:12.5px; letter-spacing:0.03em; color:var(--ink-soft); }

.hero{ padding:56px 0 48px; }
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
@media (max-width:840px){ .hero-grid{ grid-template-columns:1fr; gap:32px; } }
.hero-copy h1{ font-size:clamp(28px,3.6vw,42px); line-height:1.2; margin:0 0 16px; max-width:15ch; }
.hero-copy p{ color:var(--ink-soft); font-size:15px; max-width:46ch; margin:0 0 26px; }
.hero-btn{ background:var(--olive); color:var(--cream); padding:14px 26px; border-radius:var(--radius); font-size:14.5px; font-weight:600; display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.hero-btn:hover{ background:var(--olive-deep); color:var(--cream); }
.hero-media{ aspect-ratio:1/1; background:var(--cream); border:1px solid var(--line); border-radius:6px; overflow:hidden; }

.trust{ background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-inner{ display:grid; grid-template-columns:repeat(4,1fr); }
@media (max-width:760px){ .trust-inner{ grid-template-columns:repeat(2,1fr); } }
.trust-item{ padding:20px; border-right:1px solid var(--line); }
.trust-item:last-child{ border-right:none; }
.trust-item strong{ display:block; font-size:13.5px; margin-bottom:2px; }
.trust-item span{ font-size:12.5px; color:var(--ink-soft); }

.shelf{ padding:52px 0; }
.shelf-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:26px; flex-wrap:wrap; gap:10px; }
.shelf-head h2{ font-size:22px; margin:0; }
.shelf-head a{ font-size:13px; color:var(--olive); font-weight:600; border-bottom:1px solid var(--olive); padding-bottom:2px; text-decoration:none; }

.services{ padding:52px 0; background:var(--olive); color:var(--cream); }
.services .shelf-head h2{ color:var(--cream); }
.service-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:760px){ .service-grid{ grid-template-columns:1fr; } }
.service-card{ background:rgba(247,244,234,0.06); border:1px solid rgba(247,244,234,0.25); border-radius:6px; padding:28px; }
.service-card h3{ color:var(--cream); font-size:19px; margin:0 0 10px; }
.service-card p{ font-size:14px; color:#D4D9CE; margin:0 0 18px; max-width:44ch; }
.service-from{ font-size:12.5px; color:#B7C0AC; margin-bottom:16px; }
.service-btn{ background:var(--cream); color:var(--olive-deep) !important; padding:11px 20px; border-radius:var(--radius); font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.service-btn:hover{ background:#fff; }

.cat-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:760px){ .cat-tiles{ grid-template-columns:repeat(2,1fr); } }
.cat-tile{ background:var(--cream); border:1px solid var(--line); border-radius:6px; padding:20px; display:flex; flex-direction:column; gap:10px; min-height:110px; justify-content:center; }
.cat-tile.soon{ border-style:dashed; color:var(--ink-soft); justify-content:center; align-items:center; text-align:center; }
.cat-tile h3{ font-size:15px; margin:0; font-weight:500; }

.howto{ padding:56px 0; }
.howto-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:760px){ .howto-grid{ grid-template-columns:1fr; } }
.howto-card{ background:var(--cream); border:1px solid var(--line); border-radius:6px; padding:26px; }
.howto-num{ width:30px; height:30px; border-radius:50%; background:var(--olive); color:var(--cream); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin-bottom:16px; }
.howto-card h4{ font-size:15px; margin:0 0 8px; }
.howto-card p{ font-size:13.5px; color:var(--ink-soft); margin:0; }
.pay-logos{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.pay-logos span{ font-size:11.5px; background:var(--stone); border:1px solid var(--line); padding:5px 10px; border-radius:20px; color:var(--ink-soft); }

/* ==========================================================
   7. Header propio (header.php) y footer propio (footer.php)
   ========================================================== */
.laimonix-header{ background:var(--cream); border-bottom:1px solid var(--line); }
.laimonix-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 28px; flex-wrap:wrap; }
.laimonix-logo-text{ font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink); }
.laimonix-search{ flex:1; max-width:380px; display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.laimonix-search input{ flex:1; border:none; padding:10px 14px; font-family:var(--sans); font-size:13.5px; outline:none; }
.laimonix-search button{ border:none; background:var(--stone); padding:0 16px; cursor:pointer; }
.laimonix-header-actions{ display:flex; align-items:center; gap:14px; }
.laimonix-cart{ position:relative; font-size:20px; text-decoration:none; color:var(--ink); }
.laimonix-cart-count{ position:absolute; top:-6px; right:-10px; background:var(--terracotta); color:#fff; font-size:10.5px; font-weight:700; border-radius:50%; width:17px; height:17px; display:flex; align-items:center; justify-content:center; }
.laimonix-header-wa{ background:var(--olive); color:var(--cream) !important; padding:9px 16px; border-radius:var(--radius); font-size:13px; font-weight:600; text-decoration:none; }
.laimonix-header-wa:hover{ background:var(--olive-deep); color:var(--cream); }
@media (max-width:760px){
  .laimonix-header-inner{ padding:14px 18px; }
  .laimonix-search{ order:3; max-width:100%; width:100%; }
}

.laimonix-footer{ background:var(--ink); color:var(--stone); padding:48px 0 0; margin-top:40px; }
.laimonix-footer-inner{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; padding-bottom:36px; }
@media (max-width:760px){ .laimonix-footer-inner{ grid-template-columns:1fr; } }
.laimonix-footer-col h4{ color:var(--cream); font-size:14px; margin:0 0 12px; }
.laimonix-footer-col p{ font-size:13px; color:#B9B6A8; margin:0; max-width:40ch; }
.laimonix-footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.laimonix-footer-col a{ font-size:13px; color:#D4D1C2; text-decoration:none; }
.laimonix-footer-col a:hover{ color:var(--cream); }
.laimonix-footer-wa{ display:inline-block; background:var(--olive); color:var(--cream) !important; padding:9px 14px; border-radius:var(--radius); font-size:12.5px; text-decoration:none; }
.laimonix-footer-bottom{ border-top:1px solid #3A362C; padding:16px 28px; font-size:12px; color:#8F8C7E; }

/* ==========================================================
   8. Mega-menú de categorías (estilo SYSCOM)
   ========================================================== */
.laimonix-catmenu-wrap{ background:var(--olive); }
.laimonix-catmenu ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; }
.laimonix-cat-item{ position:relative; }
.laimonix-cat-item > a{
  display:block;
  padding:12px 16px;
  font-size:13px;
  font-weight:600;
  color:var(--cream);
  text-decoration:none;
  white-space:nowrap;
}
.laimonix-cat-item > a:hover{ background:var(--olive-deep); }
.laimonix-cat-proximamente{ opacity:0.75; cursor:default; }
.laimonix-badge-soon{
  display:inline-block;
  font-size:9.5px;
  font-weight:700;
  background:var(--terracotta);
  color:#fff;
  padding:1px 6px;
  border-radius:10px;
  margin-left:4px;
  vertical-align:middle;
}

/* Submenú desplegable */
.laimonix-submenu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:240px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:0 0 6px 6px;
  box-shadow:0 10px 24px rgba(30,28,22,0.18);
  z-index:50;
  padding:6px 0;
}
.laimonix-cat-item:hover .laimonix-submenu{ display:block; }
.laimonix-submenu li a{
  display:block;
  padding:9px 18px;
  font-size:13px;
  color:var(--ink);
  text-decoration:none;
}
.laimonix-submenu li a:hover{ background:var(--stone); color:var(--olive-deep); }

/* En móvil: menú apilado, sin desplegable flotante */
@media (max-width:900px){
  .laimonix-catmenu ul{ flex-direction:column; }
  .laimonix-cat-item > a{ padding:12px 18px; }
  .laimonix-submenu{
    display:block;
    position:static;
    border:none;
    box-shadow:none;
    background:var(--olive-deep);
    border-radius:0;
    padding:0;
  }
  .laimonix-submenu li a{ color:#D4D9CE; padding:8px 30px; font-size:12.5px; }
  .laimonix-submenu li a:hover{ background:transparent; color:var(--cream); }
}