/*
Theme Name: SP Integra
Theme URI: https://www.spintegra.es/
Author: SP Integra
Author URI: https://www.spintegra.es/
Description: Tema a medida para SP Integra — Equipamiento Dental en las Islas Canarias. Diseño clínico, profesional y moderno, compatible con WooCommerce. Basado en el rediseño 2026.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spintegra
Tags: business, ecommerce, custom-colors, custom-menu, featured-images, full-width-template
*/

/* =========================================================
   SP INTEGRA THEME — VARIABLES & RESET
   ========================================================= */
:root{
  --brand:#013E78;
  --brand2:#014F96;
  --accent:#4da6ff;
  --ink:#0D1B2A;
  --paper:#ffffff;
  --mist:#EFF3F8;
  --line:#D8E2EC;
  --muted:#818B9D;
  --maxw:1240px;
  --font-head:'Raleway',sans-serif;
  --font-body:'Open Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul{list-style:none}
::selection{background:var(--accent);color:#fff}
.sp-container{max-width:var(--maxw);margin:0 auto;padding-left:28px;padding-right:28px}
.sp-head{font-family:var(--font-head);letter-spacing:-.03em}
.sp-eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand2)}

/* =========================================================
   UTILITY BAR
   ========================================================= */
.sp-utility{background:var(--ink);color:#cfdadd;font-size:13px}
.sp-utility .sp-container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-top:9px;padding-bottom:9px}
.sp-utility-left,.sp-utility-right{display:flex;gap:22px;align-items:center;font-weight:500}
.sp-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
.sp-utility .sp-pill{color:#fff;text-decoration:none;padding:4px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;display:inline-flex;align-items:center;gap:7px}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.sp-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.sp-header .sp-container{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;padding-bottom:16px}
.sp-logo{display:flex;align-items:center;gap:13px;text-decoration:none}
.sp-logo-mark{width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,var(--brand),var(--brand2));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-head);font-weight:700;font-size:19px;box-shadow:0 6px 18px -8px var(--brand2)}
.sp-logo-text b{display:block;font-family:var(--font-head);font-weight:700;font-size:21px;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.sp-logo-text span{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:2px}
.sp-logo img{max-height:48px;width:auto}
.sp-nav{display:flex;gap:30px;align-items:center;font-size:15px;font-weight:500}
.sp-nav a{color:var(--ink);text-decoration:none}
.sp-nav a:hover{color:var(--brand2)}
.sp-nav ul{display:flex;gap:30px;align-items:center}
.sp-nav .sub-menu{display:none}
.sp-header-actions{display:flex;gap:12px;align-items:center}
.sp-cart{color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;display:flex;gap:7px;align-items:center}
.sp-cart-count{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head)}
.sp-btn-dark{background:var(--ink);color:#fff;text-decoration:none;font-size:14px;font-weight:600;padding:11px 20px;border-radius:11px;display:inline-block}
.sp-menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:42px;height:42px;cursor:pointer;font-size:20px;align-items:center;justify-content:center}

/* =========================================================
   HERO
   ========================================================= */
.sp-hero{background:linear-gradient(155deg,#012540 0%,#014F96 100%);color:#fff;position:relative;overflow:hidden}
.sp-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 78% -10%,rgba(77,166,255,.18),transparent 60%)}
.sp-hero-ring{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%;pointer-events:none}
.sp-hero-ring.a{right:-120px;top:-120px;width:520px;height:520px}
.sp-hero-ring.b{right:-40px;top:40px;width:340px;height:340px}
.sp-hero-grid{display:grid;grid-template-columns:1.15fr .95fr;gap:56px;align-items:center;position:relative;padding-top:88px;padding-bottom:92px}
.sp-hero-badge{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#bfeef5;background:rgba(22,179,199,.14);border:1px solid rgba(22,179,199,.3);padding:7px 14px;border-radius:999px;margin-bottom:26px}
.sp-hero h1{font-family:var(--font-head);font-weight:700;font-size:62px;line-height:1.02;letter-spacing:-.035em;text-wrap:balance;margin-bottom:22px}
.sp-hero p.lead{font-size:19px;line-height:1.55;color:#d4e2e5;max-width:30em;margin-bottom:34px}
.sp-cta-row{display:flex;gap:14px;flex-wrap:wrap}
.sp-btn-accent{background:var(--brand2);color:#fff;text-decoration:none;font-weight:700;font-size:16px;padding:15px 28px;border-radius:12px;box-shadow:0 14px 30px -12px rgba(1,79,150,.5);display:inline-block}
.sp-btn-ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;text-decoration:none;font-weight:600;font-size:16px;padding:15px 26px;border-radius:12px;display:inline-block}
.sp-hero-media{position:relative}
.sp-ph{background:repeating-linear-gradient(135deg,#e9eff0 0 12px,#f4f8f9 12px 24px);display:flex;align-items:center;justify-content:center}
.sp-ph-dark{background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 14px,rgba(255,255,255,.02) 14px 28px);border:1px solid rgba(255,255,255,.16)}
.sp-ph-label{font-family:var(--font-head);font-size:11px;letter-spacing:.12em;color:#9fb1b5;text-transform:uppercase}
.sp-ph-dark .sp-ph-label{color:rgba(255,255,255,.6)}
.sp-hero-card{position:absolute;left:-26px;bottom:30px;background:#fff;color:var(--ink);border-radius:15px;padding:16px 20px;box-shadow:0 22px 50px -20px rgba(0,0,0,.5);display:flex;gap:13px;align-items:center}
.sp-hero-card-mark{width:42px;height:42px;border-radius:11px;background:var(--mist);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;color:var(--brand2)}
.sp-trust{border-top:1px solid rgba(255,255,255,.1);position:relative}
.sp-trust .sp-container{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:20px;padding-bottom:20px}
.sp-trust b{font-family:var(--font-head);font-size:26px;display:block}
.sp-trust span{font-size:13px;color:#9dc5e8}

/* =========================================================
   SECTIONS / HEADINGS
   ========================================================= */
.sp-section{padding-top:92px;padding-bottom:92px}
.sp-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:46px;flex-wrap:wrap}
.sp-section-head h2{font-family:var(--font-head);font-weight:700;font-size:42px;letter-spacing:-.03em;margin-top:10px;line-height:1.05;max-width:14em}
.sp-section-head p{max-width:24em;font-size:16px;color:var(--muted);line-height:1.6}
.sp-link-underline{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:3px}

/* SERVICES */
.sp-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sp-card{border:1px solid var(--line);border-radius:18px;padding:28px 24px;background:#fff;transition:.2s}
.sp-card:hover{border-color:var(--brand2);box-shadow:0 18px 40px -26px rgba(11,70,81,.4);transform:translateY(-3px)}
.sp-card-num{width:46px;height:46px;border-radius:12px;background:var(--mist);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;color:var(--brand2);font-size:17px;margin-bottom:20px}
.sp-card h3{font-family:var(--font-head);font-weight:600;font-size:20px;letter-spacing:-.02em;margin-bottom:12px}
.sp-card p{font-size:14.5px;color:var(--muted);line-height:1.55}

/* CATALOG */
.sp-catalog{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sp-grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.sp-cat{text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;display:block;transition:.2s}
.sp-cat:hover{box-shadow:0 16px 36px -24px rgba(11,70,81,.45);transform:translateY(-3px)}
.sp-cat .sp-ph{aspect-ratio:5/4}
.sp-cat-foot{padding:15px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sp-cat-foot b{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.sp-cat-foot .sp-arrow{color:var(--brand2);font-weight:700}

/* PRO BANNER */
.sp-pro{background:linear-gradient(120deg,#012540,#014F96);border-radius:26px;padding:54px 56px;color:#fff;position:relative;overflow:hidden;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.sp-pro::after{content:"";position:absolute;right:-60px;bottom:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(22,179,199,.4),transparent 70%)}
.sp-pro-body{position:relative}
.sp-pro-body .sp-eyebrow{color:#bfeef5}
.sp-pro h2{font-family:var(--font-head);font-weight:700;font-size:38px;letter-spacing:-.03em;margin:12px 0 16px;line-height:1.08}
.sp-pro p{font-size:16.5px;color:#d4e2e5;line-height:1.55;max-width:32em}
.sp-pro .sp-btn-accent{margin-top:26px}
.sp-pro-media{position:relative;aspect-ratio:1;border-radius:18px}

/* TECH SERVICE */
.sp-tech{background:var(--ink);color:#fff}
.sp-tech .sp-eyebrow{color:var(--accent)}
.sp-tech .sp-section-head h2{color:#fff}
.sp-tech .sp-section-head p{color:#a9c0c4}
.sp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sp-island{border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:30px;background:rgba(255,255,255,.03)}
.sp-island-title{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.sp-island-title h3{font-family:var(--font-head);font-weight:600;font-size:22px;letter-spacing:-.02em}
.sp-island p{font-size:14.5px;color:#9dc5e8;line-height:1.55;margin-bottom:20px}
.sp-island a{color:#fff;text-decoration:none;font-weight:600;font-size:14.5px;border-bottom:2px solid var(--accent);padding-bottom:3px}

/* BRANDS + FEATURES */
.sp-center{text-align:center;margin-bottom:38px}
.sp-center h2{font-family:var(--font-head);font-weight:700;font-size:34px;letter-spacing:-.03em;margin-top:10px}
.sp-brands{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:64px}
.sp-brand{border:1px solid var(--line);border-radius:13px;aspect-ratio:2/1;display:flex;align-items:center;justify-content:center;background:#fff}
.sp-brand span{font-family:var(--font-head);font-weight:700;color:#b6c2c5;font-size:15px;letter-spacing:.04em}
.sp-feature-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sp-feature{border:1px solid var(--line);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.sp-feature-body{padding:30px}
.sp-feature-body h3{font-family:var(--font-head);font-weight:600;font-size:22px;letter-spacing:-.02em;margin-bottom:12px}
.sp-feature-body p{font-size:14.5px;color:var(--muted);line-height:1.55;margin-bottom:18px}

/* CTA */
.sp-cta{background:var(--mist);border-top:1px solid var(--line)}
.sp-cta .sp-container{padding-top:80px;padding-bottom:80px;text-align:center}
.sp-cta h2{font-family:var(--font-head);font-weight:700;font-size:44px;letter-spacing:-.03em;line-height:1.05;max-width:18em;margin:0 auto 18px;text-wrap:balance}
.sp-cta p{font-size:17px;color:var(--muted);max-width:36em;margin:0 auto 30px;line-height:1.55}
.sp-cta .sp-cta-row{justify-content:center}
.sp-btn-light{background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;font-size:16px;padding:16px 28px;border-radius:12px;display:inline-block}

/* =========================================================
   FOOTER
   ========================================================= */
.sp-footer{background:var(--ink);color:#cfdadd}
.sp-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-top:70px;padding-bottom:40px}
.sp-footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sp-footer-logo b{font-family:var(--font-head);font-weight:700;font-size:20px;letter-spacing:-.03em;color:#fff}
.sp-footer p{font-size:14px;line-height:1.6;color:#9fb1b5;max-width:26em}
.sp-footer h4{font-family:var(--font-head);font-size:14px;color:#fff;margin-bottom:16px;letter-spacing:.04em}
.sp-footer ul{font-size:14px;line-height:2.1;color:#9fb1b5}
.sp-footer ul a{text-decoration:none}
.sp-footer ul a:hover{color:#fff}
.sp-footer-legal{border-top:1px solid rgba(255,255,255,.1)}
.sp-footer-legal .sp-container{padding-top:22px;padding-bottom:22px;font-size:12.5px;color:#7d9095;line-height:1.6}

/* =========================================================
   GENERIC PAGE / POST CONTENT
   ========================================================= */
.sp-page{padding-top:64px;padding-bottom:80px}
.sp-page .sp-container{max-width:820px}
.sp-page h1.entry-title{font-family:var(--font-head);font-weight:700;font-size:46px;letter-spacing:-.03em;line-height:1.05;margin-bottom:28px}
.sp-content{font-size:17px;line-height:1.7;color:#26383c}
.sp-content h2{font-family:var(--font-head);font-size:30px;letter-spacing:-.02em;margin:36px 0 14px}
.sp-content h3{font-family:var(--font-head);font-size:22px;margin:28px 0 12px}
.sp-content p{margin-bottom:18px}
.sp-content ul,.sp-content ol{margin:0 0 18px 22px}
.sp-content li{margin-bottom:8px}
.sp-content a{color:var(--brand2)}
.sp-content img{border-radius:14px;margin:20px 0}
.sp-post-meta{font-size:14px;color:var(--muted);margin-bottom:24px;font-weight:600;letter-spacing:.02em}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1024px){
  .sp-hero h1{font-size:48px}
  .sp-grid-5{grid-template-columns:repeat(3,1fr)}
  .sp-brands{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:860px){
  .sp-nav,.sp-header-actions .sp-btn-dark{display:none}
  .sp-menu-toggle{display:flex}
  .sp-hero-grid{grid-template-columns:1fr;gap:36px;padding-top:56px;padding-bottom:56px}
  .sp-hero-media{max-width:420px}
  .sp-grid-4,.sp-grid-3{grid-template-columns:1fr 1fr}
  .sp-trust .sp-container{grid-template-columns:1fr 1fr}
  .sp-pro,.sp-feature{grid-template-columns:1fr}
  .sp-pro-media{display:none}
  .sp-footer-grid{grid-template-columns:1fr 1fr}
  .sp-hero h1{font-size:40px}
  .sp-section{padding-top:60px;padding-bottom:60px}
  /* mobile nav opened */
  .sp-nav.is-open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:#fff;border-bottom:1px solid var(--line);padding:18px 28px;gap:16px}
  .sp-nav.is-open ul{flex-direction:column;align-items:flex-start;gap:16px}
}
@media(max-width:560px){
  .sp-grid-4,.sp-grid-3,.sp-grid-5,.sp-footer-grid,.sp-trust .sp-container,.sp-brands{grid-template-columns:1fr}
  .sp-hero h1{font-size:34px}
  .sp-cta h2{font-size:32px}
  .sp-section-head h2{font-size:32px}
}