/*
Theme Name: HVAC Catalog Landing
Theme URI: https://example.com/
Author: Proyecto Personal
Author URI: https://example.com/
Description: Tema WordPress claro y profesional para catálogo HVAC con portada tipo landing y blog con barra lateral.
Version: 1.0
Text Domain: hvac-catalog-landing
*/

:root {
      --color-bg: #edf2ff;
      --color-surface: #ffffff;
      --color-surface-dark: #0b1020;
      --color-primary: #006ad4;
      --color-primary-soft: #e0f2ff;
      --color-accent: #f97373;
      --color-text: #101827;
      --color-text-muted: #6b7280;
      --radius-lg: 22px;
      --radius-pill: 999px;
      --shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.20);
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-10: 40px;
      --max-width: 1180px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: radial-gradient(circle at top left, #e0f2ff 0, #edf2ff 40%, #f9fafb 100%);
      color: var(--color-text);
      -webkit-font-smoothing: antialiased;
      line-height: 1.6;
      min-height: 100vh;
    }

    img { max-width: 100%; display: block; }

    a { color: inherit; text-decoration: none; }

    .page {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: var(--space-6) var(--space-4) var(--space-10);
    }

    /* HEADER */
    .site-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-4);
      margin-bottom: var(--space-6);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    .brand-logo {
      width: 46px;
      height: 46px;
      border-radius: 18px;
      background: conic-gradient(from 160deg, #006ad4, #22c1c3, #f97373, #ffd166, #006ad4);
      padding: 2px;
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.35);
    }

    .brand-logo-inner {
      width: 100%;
      height: 100%;
      border-radius: 16px;
      background: linear-gradient(135deg, #ffffff, #e0f2ff);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      color: #006ad4;
      letter-spacing: 0.08em;
    }

    .brand-title {
      font-size: 20px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .brand-subtitle {
      font-size: 13px;
      color: var(--color-text-muted);
    }

    .header-nav {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      font-size: 13px;
    }

    .nav-pill {
      padding: 6px 12px;
      border-radius: var(--radius-pill);
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(148,163,184,0.35);
      color: var(--color-text-muted);
    }

    .nav-pill--primary {
      background: #101827;
      color: #f9fafb;
      border-color: transparent;
    }

    /* HERO CON SLIDER */
    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
      gap: var(--space-6);
      align-items: center;
      margin-bottom: var(--space-8);
    }

    .hero-copy h1 {
      font-size: clamp(32px, 3.4vw, 42px);
      line-height: 1.1;
      margin-bottom: var(--space-3);
    }

    .hero-copy h1 span {
      color: #006ad4;
    }

    .hero-copy p {
      font-size: 15px;
      color: var(--color-text-muted);
      max-width: 34rem;
      margin-bottom: var(--space-4);
    }

    .hero-badges {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      margin-bottom: var(--space-4);
      font-size: 13px;
    }

    .badge {
      padding: 6px 12px;
      border-radius: var(--radius-pill);
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(148,163,184,0.4);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .badge strong { font-weight: 600; }

    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      align-items: center;
    }

    .btn-primary {
      padding: 10px 22px;
      border-radius: var(--radius-pill);
      border: none;
      font-size: 14px;
      font-weight: 600;
      background: linear-gradient(135deg, #006ad4, #22b8ff);
      color: #f9fafb;
      cursor: pointer;
      box-shadow: var(--shadow-soft);
      transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      filter: brightness(1.05);
      box-shadow: 0 28px 70px rgba(15, 23, 42, 0.25);
    }

    .btn-outline {
      padding: 9px 18px;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(148,163,184,0.7);
      font-size: 13px;
      cursor: pointer;
      background: rgba(255,255,255,0.85);
      color: var(--color-text);
    }

    .hero-note {
      margin-top: var(--space-2);
      font-size: 12px;
      color: var(--color-text-muted);
    }

    /* SLIDER */
    .hero-slider {
      position: relative;
      border-radius: 28px;
      background: radial-gradient(circle at top, #ffffff 0, #e5edff 40%, #0b1020 100%);
      padding: var(--space-5);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .slider-track {
      position: relative;
      height: 260px;
    }

    .slide {
      position: absolute;
      inset: 0;
      border-radius: 22px;
      padding: var(--space-4);
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-3);
      background: linear-gradient(135deg, #0b1020, #111827);
      color: #e5edff;
      opacity: 0;
      transform: translateX(30px);
      transition: opacity 220ms ease, transform 220ms ease;
      pointer-events: none;
    }

    .slide--active {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }

    .slide-header {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: #a5b4fc;
      margin-bottom: var(--space-2);
    }

    .slide-title {
      font-size: 18px;
      margin-bottom: var(--space-2);
    }

    .slide-body {
      font-size: 13px;
      color: #cbd5ff;
      margin-bottom: var(--space-3);
    }

    .slide-meta {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      font-size: 12px;
    }

    .slide-pill {
      padding: 4px 10px;
      border-radius: var(--radius-pill);
      background: rgba(15,23,42,0.85);
      border: 1px solid rgba(148,163,184,0.8);
    }

    .slide-visual {
      border-radius: 18px;
      background: radial-gradient(circle at top left, #f9fafb 0, #dde5ff 45%, #0b1020 100%);
      position: relative;
      overflow: hidden;
    }

    .slide-visual::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 20% 0%, rgba(255,255,255,0.8) 0, transparent 45%),
        radial-gradient(circle at 80% 0%, rgba(59,130,246,0.7) 0, transparent 52%);
      mix-blend-mode: screen;
      opacity: 0.9;
      pointer-events: none;
    }

    .slide-unit {
      position: absolute;
      inset: 18% 8% auto 8%;
      height: 52%;
      border-radius: 18px;
      background: linear-gradient(145deg, #fdfefe, #e5edf5);
      box-shadow: 0 22px 45px rgba(15,23,42,0.4);
      transform: perspective(900px) rotateY(-14deg) rotateX(8deg);
    }

    .slide-unit::after {
      content: "";
      position: absolute;
      inset: auto 12% -20px 12%;
      height: 20px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(15,23,42,0.5) 0, transparent 70%);
      filter: blur(3px);
    }

    .slider-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: var(--space-4);
      font-size: 12px;
      color: #e5edff;
    }

    .slider-dots {
      display: flex;
      gap: 8px;
    }

    .slider-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: rgba(148,163,184,0.5);
      border: none;
      cursor: pointer;
      transition: background 160ms ease, width 160ms ease;
    }

    .slider-dot--active {
      width: 24px;
      background: linear-gradient(135deg, #22c1c3, #f97373);
    }

    .slider-arrows {
      display: flex;
      gap: 10px;
    }

    .slider-arrow {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.7);
      background: rgba(15,23,42,0.8);
      color: #e5edff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .slider-arrow:hover {
      background: #f97373;
      border-color: #f97373;
      color: #0b1020;
    }

    /* Sección resumen categorías */
    .categories {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-4);
    }

    .category-card {
      background: var(--color-surface);
      border-radius: var(--radius-lg);
      padding: var(--space-4);
      border: 1px solid rgba(148,163,184,0.3);
      box-shadow: 0 10px 25px rgba(15,23,42,0.06);
      position: relative;
      overflow: hidden;
      transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
    }

    .category-card::before {
      content: "";
      position: absolute;
      inset: -40%;
      background: radial-gradient(circle at top left, rgba(0,106,212,0.18) 0, transparent 55%);
      opacity: 0;
      transition: opacity 160ms ease;
    }

    .category-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 40px rgba(15,23,42,0.16);
      background: #0b1020;
      color: #e5edff;
    }

    .category-card:hover .category-title,
    .category-card:hover .category-text { color: #e5edff; }

    .category-card:hover::before { opacity: 1; }

    .category-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--color-text-muted);
      margin-bottom: 4px;
    }

    .category-title {
      font-size: 16px;
      margin-bottom: var(--space-2);
      color: var(--color-text);
    }

    .category-text {
      font-size: 13px;
      color: var(--color-text-muted);
      margin-bottom: var(--space-3);
    }

    .category-link {
      font-size: 12px;
      font-weight: 600;
      color: #006ad4;
    }

    .category-card:hover .category-link { color: #f97373; }

    @media (max-width: 960px) {
      .hero { grid-template-columns: minmax(0, 1fr); }
      .slider-track { height: auto; }
      .slide { position: relative; transform: none; }
    }

    @media (max-width: 720px) {
      .categories { grid-template-columns: minmax(0, 1fr); }
      .page { padding-inline: var(--space-3); }
      .site-header { flex-direction: column; align-items: flex-start; }
    }