/*
Theme Name:  SP Integra
Theme URI:   https://www.spintegra.es
Description: Tema oficial de SP Integra Servicios y Equipamiento S.L. Optimizado para velocidad, SEO y uso móvil. Distribuidor de equipamiento dental en Canarias.
Version:     2.0.0
Author:      SP Integra
Author URI:  https://www.spintegra.es
Text Domain: spintegra
Tags:        dental, b2b, woocommerce, responsive, seo
License:     GPL v2 or later
*/

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Marca */
  --color-primary:#014F96; --color-primary-dark:#013a70; --color-primary-light:#e3f0ff;
  --color-secondary:#818B9D; --color-secondary-light:#f0f2f5;

  /* Semánticos */
  --color-text:#1a1a2e; --color-text-light:#555; --color-text-muted:#818B9D;
  --color-heading:#0d1b2a; --color-border:#dde1e7;
  --color-bg:#ffffff; --color-bg-alt:#f8f9fa; --color-bg-dark:#0d1b2a;
  --color-success:#2e7d32; --color-warning:#e65100; --color-error:#c62828;

  /* Tipografía */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem; --text-5xl:3rem;
  --weight-normal:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* Espaciado */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --space-20:5rem; --space-24:6rem;

  /* Layout */
  --container-xl:1200px; --container-lg:1024px;

  /* Bordes y sombras */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-full:9999px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:0 8px 24px rgba(0,0,0,.12);

  /* Transiciones */
  --transition-fast:150ms ease; --transition-base:250ms ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET Y BASE
   ═══════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:var(--font-sans);font-size:var(--text-base);line-height:1.6;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--color-primary-dark)}
ul,ol{padding-left:var(--space-6)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Tipografía fluida */
h1,h2,h3,h4,h5,h6{color:var(--color-heading);font-weight:var(--weight-bold);line-height:1.2;letter-spacing:-.02em}
h1{font-size:clamp(1.75rem,5vw,3rem)}
h2{font-size:clamp(1.5rem,4vw,2.25rem)}
h3{font-size:clamp(1.25rem,3vw,1.875rem)}
h4{font-size:var(--text-xl)}
p{margin-bottom:var(--space-4)}
p:last-child{margin-bottom:0}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */
.container{width:100%;max-width:var(--container-xl);margin:0 auto;padding:0 clamp(1rem,4vw,1.5rem)}
.section{padding:clamp(2.5rem,7vw,5rem) 0}
.section-sm{padding:clamp(2rem,5vw,3rem) 0}
.section-eyebrow{display:inline-block;font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.12em;color:var(--color-primary);margin-bottom:var(--space-3)}
.section-title{margin-bottom:var(--space-4)}
.section-subtitle{font-size:var(--text-lg);color:var(--color-text-muted);max-width:640px;margin:0 auto var(--space-10)}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-8)}

.grid{display:grid;gap:var(--space-6)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTES BASE
   ═══════════════════════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:1.2;border-radius:var(--radius-md);border:2px solid transparent;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn-primary:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);color:#fff}
.btn-outline{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn-outline:hover{background:var(--color-primary);color:#fff}
.btn-white{background:#fff;color:var(--color-primary);border-color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base)}
.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}

.card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-base)}
.card:hover{box-shadow:var(--shadow-md)}

.badge{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.06em}
.badge-primary{background:var(--color-primary-light);color:var(--color-primary)}
.badge-success{background:#e8f5e9;color:var(--color-success)}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESIBILIDAD
   ═══════════════════════════════════════════════════════════════════════════ */
:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;border-radius:2px}
*:focus:not(:focus-visible){outline:none}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-primary);color:#fff;padding:var(--space-3) var(--space-6);z-index:9999;border-radius:0 0 var(--radius-md) 0}
.skip-link:focus{left:0;top:0;color:#fff}

/* Áreas táctiles mínimas WCAG 2.5.5 */
@media(max-width:900px){
  .btn,button,a.button,input[type=submit]{min-height:44px;min-width:44px}
  input,select,textarea{font-size:16px!important}
}

/* WordPress core */
.aligncenter{margin-left:auto;margin-right:auto}
.alignleft{float:left;margin-right:var(--space-6)}
.alignright{float:right;margin-left:var(--space-6)}
.alignwide{max-width:var(--container-xl)}
.alignfull{max-width:100%}
.wp-block-image{margin-bottom:var(--space-6)}