/*
Theme Name: Servymaq
Theme URI: https://www.servymaqsas.com
Author: Gato Rojo Publicidad
Author URI: https://www.servymaqsas.com
Description: Tema de bloques para Servymaq SAS — repuestos y llantas para maquinaria pesada. Home informativo con categorías que enlazan a la tienda WooCommerce. Estilo bold negro + amarillo, tipografía Barlow, animaciones con Motion One.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: servymaq
*/

:root{
  --sq-yellow:#FFE600;
  --sq-yellow-dark:#E6CF00;
  --sq-blue:#2471A3;
  --sq-blue-dark:#1B5680;
  --sq-blue-soft:rgba(36,113,163,0.14);
  --sq-ink:#111111;
  --sq-surface:#1A1A1A;
  --sq-surface-2:#1F1F1F;
  --sq-border-dark:#2C2C2C;
  --sq-muted:#8A8A8A;
}

/* ---------- Base ---------- */
body{ -webkit-font-smoothing:antialiased; }
.wp-site-blocks > footer{ margin-block-start:0; }
a{ transition:color .2s ease; }

/* Full-bleed sections keep their own horizontal padding */
.sq-section{ padding-left:clamp(1.25rem,5vw,4rem); padding-right:clamp(1.25rem,5vw,4rem); }

/* ---------- Header ---------- */
.sq-header{ position:sticky; top:0; z-index:1000; }
.sq-header .wp-block-site-title a{ font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.5rem; letter-spacing:.5px; color:var(--sq-ink); text-transform:uppercase; }
.sq-header .wp-block-navigation a{ font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.4px; color:var(--sq-ink); }
.sq-header .wp-block-navigation a:hover{ opacity:.6; }
.sq-topbar{ font-size:.78rem; letter-spacing:.2px; }
.sq-topbar strong{ color:var(--sq-yellow); font-weight:600; }

/* ---------- Hero ---------- */
.sq-hero{ position:relative; overflow:hidden; transition:background-color .6s ease; }
.sq-hero::after{
  content:"SQ"; position:absolute; right:-1.5rem; bottom:-4rem;
  font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(9rem,26vw,18rem);
  line-height:1; color:rgba(17,17,17,.07); pointer-events:none; z-index:0; transition:color .6s ease;
}
.sq-hero > *{ position:relative; z-index:1; }

/* Hero en modo AZUL (lo activa el JS del slider según el slide) */
.sq-hero.is-blue{ background-color:var(--sq-blue) !important; }
.sq-hero.is-blue::after{ color:rgba(255,255,255,.09); }
.sq-hero.is-blue h1,.sq-hero.is-blue h2{ color:#fff; }
.sq-hero.is-blue .sq-hero-lead{ color:#d6e6f1; }
.sq-hero.is-blue .sq-hero-price{ color:#fff; }
.sq-hero.is-blue .sq-hero-price small{ color:#bcd6e8; }
.sq-hero.is-blue .sq-mark{ background:#fff; color:var(--sq-blue); }
.sq-hero.is-blue .sq-stats{ border-top-color:rgba(255,255,255,.25); }
.sq-hero.is-blue .sq-stat-num{ color:#fff; }
.sq-hero.is-blue .sq-stat-label{ color:#bcd6e8; }
.sq-hero.is-blue .sq-slider-dot{ background:rgba(255,255,255,.35); }
.sq-hero.is-blue .sq-slider-dot.is-active{ background:#fff; }
.sq-hero.is-blue .sq-slider-btn{ border-color:#fff; color:#fff; }
.sq-hero.is-blue .sq-slider-btn:hover{ background:#fff; color:var(--sq-blue); }
.sq-badge{
  display:inline-flex; align-items:center; gap:.5rem; background:var(--sq-ink); color:var(--sq-yellow);
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:1px;
  padding:.45rem .85rem; border-radius:50px;
}
.sq-badge::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--sq-yellow); display:inline-block; }
.sq-hero h1{ color:var(--sq-ink); letter-spacing:-1px; }
.sq-hero h1 .sq-mark{ background:var(--sq-ink); color:var(--sq-yellow); padding:0 .35rem; }
.sq-hero-lead{ color:#3a3300; font-weight:600; max-width:34rem; }
.sq-hero-price{ font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.5rem; color:var(--sq-ink); margin:0; }
.sq-hero-price small{ font-family:'Barlow',sans-serif; font-weight:700; font-size:.8rem; color:#5a5300; text-transform:uppercase; letter-spacing:.5px; }

/* ---------- Hero slider ---------- */
.sq-hero-slider{ position:relative; overflow:hidden; }
.sq-slides-track{ display:flex; align-items:flex-start; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.sq-slide{ flex:0 0 100%; width:100%; min-width:0; }
.sq-slider-nav{ display:flex; align-items:center; gap:14px; margin-top:1.75rem; }
.sq-slider-dots{ display:flex; gap:8px; }
.sq-slider-dot{ width:10px; height:10px; border-radius:50%; background:rgba(17,17,17,.22); border:none; padding:0; cursor:pointer; transition:all .25s ease; }
.sq-slider-dot:hover{ background:rgba(17,17,17,.45); }
.sq-slider-dot.is-active{ background:var(--sq-ink); width:26px; border-radius:5px; }
.sq-slider-btn{ width:40px; height:40px; border-radius:50%; border:2px solid var(--sq-ink); background:transparent; color:var(--sq-ink); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; transition:all .2s ease; }
.sq-slider-btn:hover{ background:var(--sq-ink); color:var(--sq-yellow); }
.editor-styles-wrapper .sq-slides-track{ display:block; transform:none !important; }
.editor-styles-wrapper .sq-slide{ flex-basis:auto; width:auto; margin-bottom:2rem; }
.sq-slide-img{ margin:0; display:flex; justify-content:center; align-items:center; }
.sq-slide-img img{ width:auto; max-width:100%; max-height:340px; object-fit:contain; border-radius:14px; display:block; }
@media (min-width:782px){ .sq-slide-cols{ flex-wrap:nowrap !important; align-items:center; } }
@media (max-width:781px){ .sq-slide-img img{ max-height:240px; } }

/* ---------- Vertical category cards (foto + botón Tienda) ---------- */
.sq-cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px; }
.sq-catv{ background:var(--sq-surface-2); border:1px solid var(--sq-border-dark); border-radius:14px; overflow:hidden; height:100%; display:flex; flex-direction:column; transition:transform .25s ease, border-color .25s ease; }
.sq-catv:hover{ transform:translateY(-6px); border-color:var(--sq-yellow); }
.sq-catv-img{ margin:0; height:170px; background:#fff; overflow:hidden; }
.sq-catv-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.sq-catv:hover .sq-catv-img img{ transform:scale(1.05); }
.sq-catv-body{ padding:1.1rem 1.25rem 1.25rem; display:flex; flex-direction:column; flex-grow:1; }
.sq-catv-body h3{ color:#fff; font-size:1.15rem; margin:0 0 .2rem; }
.sq-catv-count{ color:var(--sq-muted); font-size:.78rem; margin:0 0 1rem; }
.sq-catv .wp-block-buttons{ margin-top:auto; }
.sq-catv .wp-block-button{ width:100%; }
.sq-catv .wp-block-button__link{ display:block; width:100%; text-align:center; background:var(--sq-yellow); color:var(--sq-ink); }
.sq-catv .wp-block-button__link:hover{ background:var(--sq-yellow-dark); }

/* ---------- Brand logos band ---------- */
.sq-brand-logo{ background:#fff; border-radius:10px; padding:0 18px; height:60px; display:flex; align-items:center; justify-content:center; transition:transform .2s ease; }
.sq-brand-logo:hover{ transform:translateY(-3px); }
.sq-brand-logo img{ max-height:34px; max-width:130px; width:auto; height:auto; object-fit:contain; display:block; }

/* ---------- Aplicaciones / Sectores ---------- */
.sq-apps-band{ background-color:#15232e; }
.sq-apps-sub{ color:#8aa0b3; max-width:38rem; }
.sq-app-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:12px; }
.sq-app-card{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:1.4rem 1rem; transition:transform .25s ease, border-color .25s ease, background .25s ease; }
.sq-app-card:hover{ transform:translateY(-4px); border-color:var(--sq-yellow); background:rgba(255,255,255,.06); }
.sq-app-label{ position:relative; padding-top:46px; text-align:center; color:#dfe7ee; font-weight:700; font-size:.85rem; margin:0; }
.sq-app-label::before{ content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:30px; height:30px;
  background-color:#9fb4c4; -webkit-mask:var(--sq-icon) center / contain no-repeat; mask:var(--sq-icon) center / contain no-repeat; transition:background-color .2s ease; }
.sq-app-card:hover .sq-app-label::before{ background-color:var(--sq-yellow); }

/* ---------- Buttons ---------- */
.sq-btn-wa a.wp-block-button__link{ background:#fff !important; color:var(--sq-ink) !important; border:2px solid var(--sq-wa,#25D366); }
.sq-btn-light a.wp-block-button__link{ background:var(--sq-yellow) !important; color:var(--sq-ink) !important; }
.sq-btn-ghost a.wp-block-button__link{ background:transparent !important; color:#fff !important; border:1.5px solid #2c2c2c; }
.sq-btn-blue a.wp-block-button__link{ background:var(--sq-blue) !important; color:#fff !important; }
.sq-btn-blue a.wp-block-button__link:hover{ background:var(--sq-blue-dark) !important; }
.wp-block-button__link{ transition:transform .2s ease, background .2s ease; }
.wp-block-button__link:hover{ transform:translateY(-2px); }

/* ---------- Stats ---------- */
.sq-stats{ border-top:2px solid rgba(17,17,17,.12); }
.sq-stat-num{ font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:2rem; line-height:1; color:var(--sq-ink); }
.sq-stat-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; color:#5a5300; margin-top:.15rem; }

/* ---------- Brand marquee ---------- */
.sq-marquee{ overflow:hidden; }
.sq-marquee .sq-track{
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.15rem; letter-spacing:1px;
  text-transform:uppercase; color:var(--sq-muted); white-space:nowrap; display:inline-block;
  padding-left:100%; animation:sq-marq 22s linear infinite;
}
.sq-marquee .sq-track .sq-dot{ color:var(--sq-yellow); margin:0 1.1rem; }
@keyframes sq-marq{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

/* ---------- Section headings ---------- */
.sq-kicker{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--sq-blue); }
.sq-kicker-light{ color:var(--sq-yellow); }
.sq-kicker-blue{ color:#7fb6dd; }

/* ---------- Icon system (pseudo-element box + masked glyph on the card heading) ---------- */
.sq-icon-head{ position:relative; padding-top:64px; }
.sq-icon-head::before{ content:""; position:absolute; top:0; left:0; width:48px; height:48px; border-radius:12px; background:#FFF7C2; }
.sq-icon-head::after{ content:""; position:absolute; top:11px; left:11px; width:26px; height:26px;
  background-color:#9a8e00; -webkit-mask:var(--sq-icon) center / contain no-repeat; mask:var(--sq-icon) center / contain no-repeat; }
.sq-i-clock{ --sq-icon:url(assets/icons/clock.svg); }
.sq-i-truck{ --sq-icon:url(assets/icons/truck.svg); }
.sq-i-shield{ --sq-icon:url(assets/icons/shield.svg); }
.sq-i-bolt{ --sq-icon:url(assets/icons/bolt.svg); }
.sq-i-forklift{ --sq-icon:url(assets/icons/forklift.svg); }
.sq-i-tractor{ --sq-icon:url(assets/icons/tractor.svg); }
.sq-i-gear{ --sq-icon:url(assets/icons/gear.svg); }
.sq-i-filter{ --sq-icon:url(assets/icons/filter.svg); }
.sq-i-tools{ --sq-icon:url(assets/icons/tools.svg); }
.sq-i-cart{ --sq-icon:url(assets/icons/cart.svg); }
.sq-i-tire{ --sq-icon:url(assets/icons/tire.svg); }
.sq-i-box{ --sq-icon:url(assets/icons/box.svg); }
.sq-i-plane{ --sq-icon:url(assets/icons/plane.svg); }
.sq-i-factory{ --sq-icon:url(assets/icons/factory.svg); }
.sq-i-ship{ --sq-icon:url(assets/icons/ship.svg); }
.sq-i-crane{ --sq-icon:url(assets/icons/crane.svg); }
.sq-i-building{ --sq-icon:url(assets/icons/building.svg); }
.sq-i-leaf{ --sq-icon:url(assets/icons/leaf.svg); }

/* ---------- Value props ---------- */
.sq-value-card{ background:#fff; border:1px solid #ececec; border-radius:14px; height:100%; }
.sq-value-card h3{ font-size:1.2rem; }
.sq-value-card .sq-icon-head::before{ background:var(--sq-blue-soft); }
.sq-value-card .sq-icon-head::after{ background-color:var(--sq-blue); }

/* ---------- Category grid ---------- */
.sq-cat-card{
  background:var(--sq-surface-2); border:1px solid var(--sq-border-dark); border-radius:14px; height:100%;
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.sq-cat-card:hover{ transform:translateY(-6px); background:var(--sq-yellow); border-color:var(--sq-yellow); }
.sq-cat-card .sq-icon-head::before{ background:rgba(36,113,163,.18); }
.sq-cat-card .sq-icon-head::after{ background-color:#7fb6dd; }
.sq-cat-card:hover .sq-icon-head::before{ background:var(--sq-ink); }
.sq-cat-card:hover .sq-icon-head::after{ background-color:var(--sq-yellow); }
.sq-cat-card h3{ color:#fff; font-size:1.15rem; margin-bottom:.2rem; }
.sq-cat-card .sq-cat-count{ color:var(--sq-muted); font-size:.78rem; margin:0; }
.sq-cat-card:hover h3,.sq-cat-card:hover .sq-cat-count{ color:var(--sq-ink); }
.sq-cat-card .sq-cat-go{ color:var(--sq-yellow); font-weight:800; font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; }
.sq-cat-card .sq-cat-go a{ color:inherit; }
.sq-cat-card:hover .sq-cat-go{ color:var(--sq-ink); }
.sq-cat-shop{ background:var(--sq-yellow); border-color:var(--sq-yellow); }
.sq-cat-shop h3,.sq-cat-shop .sq-cat-go{ color:var(--sq-ink); }
.sq-cat-shop .sq-cat-count{ color:#7a6f00; }
.sq-cat-shop .sq-icon-head::before{ background:var(--sq-ink); }
.sq-cat-shop .sq-icon-head::after{ background-color:var(--sq-yellow); }
.sq-cat-shop:hover{ transform:translateY(-6px); background:var(--sq-yellow-dark); border-color:var(--sq-yellow-dark); }
.sq-cat-shop:hover .sq-icon-head::before{ background:var(--sq-ink); }

/* ---------- Brands band ---------- */
.sq-brand-pill{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; color:#bbb;
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.05rem; text-transform:uppercase; letter-spacing:.5px;
  padding:.65rem 1.1rem; transition:all .2s ease; }
.sq-brand-pill:hover{ border-color:var(--sq-yellow); color:#fff; }
.sq-brands-band .sq-brand-pill{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); color:#fff; }
.sq-brands-band .sq-brand-pill:hover{ background:var(--sq-yellow); border-color:var(--sq-yellow); color:var(--sq-ink); }

/* ---------- WhatsApp CTA band ---------- */
.sq-cta-band h2{ color:var(--sq-ink); }
.sq-cta-band .sq-lead{ color:#3a3300; font-weight:600; }

/* ---------- Footer ---------- */
.sq-footer a{ color:#aaa; }
.sq-footer a:hover{ color:var(--sq-yellow); }
.sq-footer h4{ color:#fff; font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase; font-size:1rem; letter-spacing:.5px; }
.sq-footer-brand{ font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.6rem; color:#fff; text-transform:uppercase; }
.sq-footer-brand b{ color:var(--sq-yellow); }

/* ---------- Floating WhatsApp ---------- */
.sq-wa-float{ position:fixed; right:18px; bottom:18px; z-index:1200; width:54px; height:54px; border-radius:50%;
  background:#25D366; display:block; box-shadow:0 8px 24px rgba(0,0,0,.25); transition:transform .2s ease; }
.sq-wa-float::before{ content:""; position:absolute; inset:12px; background-color:#fff;
  -webkit-mask:url(assets/icons/whatsapp.svg) center / contain no-repeat; mask:url(assets/icons/whatsapp.svg) center / contain no-repeat; }
.sq-wa-float:hover{ transform:scale(1.06); }

/* ---------- Animations (Motion One enhances; CSS is the reliable baseline) ---------- */
.fade-up{ opacity:0; transform:translateY(28px); animation:sqFadeUp .7s cubic-bezier(.22,1,.36,1) forwards; }
.stagger-children > *{ opacity:0; transform:translateY(22px); animation:sqFadeUp .6s cubic-bezier(.22,1,.36,1) forwards; }
.stagger-children > *:nth-child(1){ animation-delay:.05s; }
.stagger-children > *:nth-child(2){ animation-delay:.15s; }
.stagger-children > *:nth-child(3){ animation-delay:.25s; }
.stagger-children > *:nth-child(4){ animation-delay:.35s; }
.stagger-children > *:nth-child(5){ animation-delay:.45s; }
.stagger-children > *:nth-child(6){ animation-delay:.55s; }
@keyframes sqFadeUp{ to{ opacity:1; transform:none; } }

.animate-on-scroll{ opacity:0; transform:translateY(32px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.animate-on-scroll.is-visible{ opacity:1; transform:none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; animation-iteration-count:1 !important; }
  .fade-up,.stagger-children > *,.animate-on-scroll{ opacity:1 !important; transform:none !important; }
  .sq-marquee .sq-track{ animation:none !important; padding-left:0 !important; }
}

/* ---------- Editor visibility ---------- */
.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .stagger-children > *,
.editor-styles-wrapper .animate-on-scroll{
  opacity:1 !important; transform:none !important; animation:none !important; transition:none !important;
}

/* ---------- Equal cards ---------- */
.equal-cards > .wp-block-column{ display:flex; flex-direction:column; flex-grow:0; }
.equal-cards > .wp-block-column > .wp-block-group{ display:flex; flex-direction:column; flex-grow:1; }
.equal-cards .cta-bottom{ margin-top:auto; }

/* ---------- WooCommerce product cards — buttons aligned to bottom ---------- */
ul.products li.product,
.wc-block-grid__product{
  display:flex !important;
  flex-direction:column !important;
}
ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product .wc-block-grid__product-title{
  flex-grow:1;
}
ul.products li.product .price,
ul.products li.product .woocommerce-loop-product__title + *,
.wc-block-grid__product .wc-block-grid__product-price{
  margin-top:auto !important;
}

/* ---------- Responsive ---------- */
@media (max-width:781px){
  .sq-hero::after{ font-size:8rem; bottom:-2rem; opacity:.5; }
  .sq-stat-num{ font-size:1.6rem; }
}