/*
Theme Name: Domotec
Theme URI: https://domotecperu.com
Author: Carlos Andres Polanco Zevallos
Description: Tema personalizado para Domotec Perú — Soluciones Smart
Version: 1.0.0
License: GNU General Public License v2
Text Domain: domotec
*/

:root {
  --cyan: #00a8cc;
  --cyan-a11y: #00a8cc;
  /* Variante oscurecida de --cyan: el mismo tono lo más cyan posible sin
     bajar de contraste AA (>=4.5:1) sobre fondos claros/texto blanco. Usar
     solo donde el texto/ícono va sobre var(--bg) o similar; sobre fondos
     oscuros el --cyan original ya cumple contraste. */
  --cyan-hover: #0090b0;
  --cyan-pale: #e8f7fb;
  --cyan-mid: #b3e5f0;
  --wa-green: #25d366;
  --bg: #ffffff;
  --bg-soft: #f8fafb;
  --bg-dark: #0b1a2e;
  --text: #0f1d2e;
  --sub: #4a5e72;
  --muted: #8fa3b1;
  --border: #e4ecf0;
  --white: #ffffff;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  font-size: 16px;
}

a {
  text-decoration: none;
}

/* ══════════════════════════════════════════
   NAV — MOBILE FIRST
   Por defecto: panel lateral (móvil)
   Desktop override: barra horizontal
   ══════════════════════════════════════════ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 320;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.nav-logo-img {
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

/* ── HAMBURGER (visible por defecto — móvil) ── */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background .2s;
  flex-shrink: 0;
}

.nav-hamburger:hover {
  background: var(--cyan-pale);
}

.nav-hamburger span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
  transform-origin: center;
}

.nav-hamburger span:nth-child(1) {
  width: 22px;
}

.nav-hamburger span:nth-child(2) {
  width: 16px;
  margin-left: auto;
}

.nav-hamburger span:nth-child(3) {
  width: 22px;
}

.nav-hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  width: 22px;
}

.nav-hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  width: 22px;
}

/* ── OVERLAY ── */
.nav-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 315;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── NAV-PANEL (contenedor del menú móvil) ── */
.nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(300px, 85vw);
  height: 100dvh;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(110%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  z-index: 316;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
}

.nav-panel.is-open {
  transform: translateX(0);
}

/* Header del panel: logo + botón cerrar */
.nav-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 68px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.nav-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  transition: background .18s, border-color .18s;
  flex-shrink: 0;
}

.nav-close svg {
  width: 16px;
  height: 16px;
}

.nav-close:hover {
  background: var(--cyan-pale);
  border-color: var(--cyan-mid);
  color: var(--cyan);
}

/* ── NAV-LINKS (lista dentro del panel) ── */
.nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 8px 0 32px;
  overflow-y: auto;
  flex: 1;
}

/* Ítems en móvil */
.nav-links>li {
  width: 100%;
  border-bottom: 1px solid var(--border);
}

.nav-links>li>a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  width: 100%;
  transition: background .18s, color .18s;
}

.nav-links>li>a:hover {
  color: var(--cyan);
  background: var(--cyan-pale);
}

.nav-links .current-menu-item>a {
  color: var(--cyan);
}

/* Flecha submenú móvil */
.nav-links>li.menu-item-has-children>a::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 8px;
  transition: transform .25s;
  flex-shrink: 0;
}

.nav-links>li.menu-item-has-children.is-open>a::after {
  transform: rotate(-135deg);
}

/* Submenú en móvil — acordeón */
.nav-links .sub-menu {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  transition: max-height .3s ease;
}

.nav-links>li.is-open>.sub-menu {
  max-height: 400px;
}

.nav-links .sub-menu li a {
  display: block;
  padding: 11px 24px 11px 36px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--sub);
  transition: color .18s, background-color .18s;
}

.nav-links .sub-menu li a:hover {
  color: var(--cyan-a11y);
  background: var(--cyan-pale);
}

/* Último ítem (CTA) en móvil */
@keyframes nav-pulse {

  0% {
    transform: scale(1);
    opacity: 0.55;
  }

  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

.nav-links>li:last-child {
  border-bottom: none;
  padding: 16px 24px 0;
}

.nav-links>li:last-child>a {
  position: relative;
  /* var(--cyan) da solo ~2.8:1 de contraste con texto blanco (falla AA 4.5:1);
     --cyan-a11y es el cyan más claro posible que sigue cumpliendo (~4.6:1). */
  background: var(--cyan-a11y);
  color: #fff !important;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  justify-content: center;
}

.nav-links>li:last-child>a::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(0, 168, 204, 0.55);
  animation: nav-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

.nav-links>li:last-child>a:hover {
  background: #006a7e;
}

.nav-links>li:last-child>a:hover::before {
  animation-play-state: paused;
  opacity: 0;
}

/* Submenú del botón CTA (Contacto) — se separa del botón para no verse "pegado" */
.nav-links>li:last-child>.sub-menu {
  margin: 0 24px;
  border-radius: 10px;
  border-top: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.nav-links>li:last-child.is-open>.sub-menu {
  margin-top: 8px;
}

.nav-links>li:last-child .sub-menu li a {
  padding: 12px 16px;
  margin: 4px;
  border-radius: 6px;
}

/* ══════════════════════════════════════════
   DESKTOP — a partir de 1025px
   ══════════════════════════════════════════ */
@media (min-width: 1025px) {

  /* Ocultar hamburger, overlay y panel-header */
  .nav-hamburger {
    display: none;
  }

  .nav-overlay {
    display: none;
  }

  .nav-panel {
    position: relative;
    width: auto;
    height: auto;
    transform: none;
    transition: none;
    box-shadow: none;
    background: transparent;
    flex-direction: row;
    align-items: center;
    z-index: auto;
    flex-grow: 1;
    display: flex;
    justify-content: center;
  }

  .nav-panel-header {
    display: none;
  }

  /* Menú horizontal */
  .nav-links {
    position: static;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 0;
    overflow: visible;
    flex: none;
  }

  .nav-links>li {
    width: auto;
    border-bottom: none;
  }

  .nav-links>li>a {
    padding: 0;
    font-size: 0.875rem;
    color: var(--sub);
    width: auto;
    justify-content: flex-start;
  }

  .nav-links>li>a:hover {
    background: transparent;
    color: var(--cyan);
  }

  /* Flecha desktop */
  .nav-links>li.menu-item-has-children>a::after {
    width: 6px;
    height: 6px;
    transform: rotate(45deg) translateY(-2px);
    margin-left: 6px;
  }

  .nav-links>li.menu-item-has-children:hover>a::after {
    transform: rotate(-135deg) translateY(-2px);
  }

  /* Submenú desktop — dropdown */
  .nav-links>li {
    position: relative;
  }

  .nav-links .sub-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    max-height: none;
    overflow: visible;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(15, 29, 46, 0.14);
    padding: 20px 8px 8px;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 400;
  }

  .nav-links>li:hover>.sub-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-links .sub-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 0.84rem;
    border-radius: 8px;
    white-space: nowrap;
    color: var(--sub);
    transition: color 0.18s, background-color 0.18s;
  }

  .nav-links .sub-menu li a::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--muted);
    flex-shrink: 0;
    transition: background .18s;
  }

  .nav-links .sub-menu li a:hover {
    background: var(--cyan-pale);
    color: var(--cyan-a11y);
  }

  .nav-links .sub-menu li a:hover::before {
    background: var(--cyan);
  }

  /* Botón CTA desktop */
  .nav-links>li:last-child {
    border-bottom: none;
    padding: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .nav-links>li:last-child>a {
    padding: 9px 22px;
    justify-content: center;
    width: auto;
  }

  /* Submenú del botón CTA (Contacto) en escritorio — separado y alineado a la derecha.
     Se usa padding + pseudo-elemento (en vez de margin/top) para que el "hueco" visual
     siga perteneciendo al área de hover del <ul>, así el mouse no lo cierra al pasar. */
  .nav-links>li:last-child>.sub-menu {
    top: 100%;
    left: auto;
    right: 0;
    margin: 0;
    padding: 10px 8px 8px;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .nav-links>li:last-child>.sub-menu::before {
    content: '';
    position: absolute;
    inset: 10px 0 0 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 29, 46, 0.14);
    z-index: -1;
  }

  .hero {
    min-height: 70vh !important;
  }
}

/* <=== AQUÍ SE CERRÓ LA LLAVE CORRECTAMENTE PARA EL ESCRITORIO ── */


/* ── Video background ── */
.hero--video .hero-bg {
  display: none;
  /* replaced by video */
}

.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero-video-el {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  /* poster shows until video loads */
}

/* Fallback: if video can't load, show poster-style image */
@media (prefers-reduced-motion: reduce) {
  .hero-video-el {
    display: none;
  }

  .hero--video::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&auto=format&fit=crop&q=85');
    background-size: cover;
    background-position: center;
    z-index: 0;
  }
}


/* ── HERO BASE ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 68px;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      rgba(7, 17, 30, 0.88) 0%,
      rgba(7, 17, 30, 0.72) 45%,
      rgba(7, 17, 30, 0.35) 100%);
  z-index: 1;
}

/* ── DEMO MODAL LIGHTBOX ── */
.demo-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.demo-modal.is-open {
  display: flex;
}

.demo-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 12, 22, 0.94);
  backdrop-filter: blur(12px);
  cursor: pointer;
  animation: modal-fade-in 0.25s ease;
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.demo-modal-box {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 900px;
  animation: modal-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-slide-up {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.demo-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  background: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  transition: all 0.2s;
  z-index: 3;
}

.demo-modal-close:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #fff;
  transform: scale(1.1);
}

.demo-modal-close svg {
  width: 16px;
  height: 16px;
}

.demo-modal-inner {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #000;
  aspect-ratio: 16/9;
}

.demo-modal-video {
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}

.demo-modal-caption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 6px 0;
  text-align: left;
}

.demo-modal-caption strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
}

.demo-modal-caption span {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

/* ── Hero trigger button micro-animation ── */
.hero-demo-trigger {
  position: relative;
  overflow: hidden;
}

.hero-demo-trigger svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-demo-trigger:hover svg {
  transform: scale(1.2);
}

/* Pulse ring on play button */
.hero-demo-trigger::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  animation: pulse-ring 2s ease-in-out infinite;
}

@keyframes pulse-ring {

  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }

  50% {
    opacity: 0.1;
    transform: scale(1.05);
  }
}



.hero-content {
  position: relative;
  z-index: 2;
  padding: 80px 5vw;
  max-width: 720px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 24px;
}

.hero-eyebrow-line {
  width: 28px;
  height: 2px;
  background: var(--cyan);
  border-radius: 2px;
}

.hero h1 {
  font-size: clamp(2rem, 2.8vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 24px;
}

.hero h1 .hl {
  color: var(--cyan);
}

.hero-desc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.75;
  max-width: 580px;
  margin-bottom: 44px;
}

.hero-btns {
  display: flex;
  gap: 16px;
  margin-bottom: 60px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* var(--cyan) da solo ~2.8:1 de contraste con texto blanco (falla AA 4.5:1);
     --cyan-a11y es el cyan más claro posible que sigue cumpliendo (~4.6:1). */
  background: var(--cyan-a11y);
  color: #fff;
  padding: 13px 26px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all .2s;
  box-shadow: 0 4px 18px rgba(0, 168, 204, 0.35);
  cursor: pointer;
}

.btn-primary:hover {
  background: #006a7e;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 168, 204, 0.45);
}

.btn-primary svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-outline-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 13px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  transition: all .2s;
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-outline-light svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text);
  padding: 13px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1.5px solid var(--border);
  transition: all .2s;
  cursor: pointer;
}

.btn-outline:hover {
  border-color: var(--cyan-mid);
  color: var(--cyan);
}

.btn-outline svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-stats {
  display: flex;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  max-width: 420px;
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.06);
}

.hstat {
  padding: 16px 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  min-width: 96px;
  text-align: center;
  flex: 1;
}

.hstat:last-child {
  border-right: none;
}

.hstat-num {
  font-size: 1.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
}

.hstat-num span {
  color: var(--cyan);
}

.hstat-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
  margin-top: 3px;
}

/* Tarjetas flotantes */
.hero-cards {
  position: absolute;
  z-index: 2;
  right: 6vw;
  bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@keyframes floatup {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-card,
  .hero-card-2 {
    animation: none;
  }
}

.hero-card {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 230px;
  border: 1px solid var(--border);
  animation: floatup 4s ease-in-out infinite;
}

.hc-icon {
  width: 42px;
  height: 42px;
  background: var(--cyan-pale);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hc-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--cyan);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hc-label {
  font-size: 0.7rem;
  color: var(--sub);
  font-weight: 600;
}

.hc-val {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text);
  margin-top: 2px;
}

.hero-card-2 {
  background: var(--bg-dark);
  border-radius: 14px;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  animation: floatup 4s ease-in-out 1.5s infinite;
  align-self: flex-end;
}

.hc2-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
  flex-shrink: 0;
}

.hc2-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}

.hc2-sub {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 1px;
}


/* ── MARQUEE ── */
.marquee {
  background: var(--cyan);
  padding: 14px 0;
  overflow: hidden;
}

.mq-track {
  display: flex;
  animation: mq 20s linear infinite;
  width: max-content;
}

@keyframes mq {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.mq-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 28px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

.mq-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

/* ── SECTION HELPERS ── */
.sec-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 12px;
}

.sec-tag svg {
  width: 14px;
  height: 14px;
  stroke: var(--cyan);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sec-h2 {
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 12px;
}

.sec-h2 em {
  font-style: normal;
  color: var(--cyan);
}

.sec-p {
  font-size: 1rem;
  color: var(--sub);
  line-height: 1.75;
  max-width: 480px;
}

/* ── AMBIENTES ── */
.ambientes {
  padding: 96px 5vw;
  background: var(--bg);
}

.ambientes .sec-tag,
.ambientes .sec-tag svg {
  color: var(--cyan);
  stroke: var(--cyan);
}

.ambientes .sec-h2 em {
  color: var(--cyan);
}

.ambientes-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 24px;
  flex-wrap: wrap;
}

.ambientes-top > div {
  flex: 1 1 420px;
  max-width: 620px;
  min-width: 280px;
}

.ambientes-top > .btn-primary {
  flex-shrink: 0;
}

.ambientes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 175px);
  gap: 1px;
  background: rgba(255, 255, 255, 0.09);
  /* color de las líneas divisorias */
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 16px 48px rgba(0, 30, 60, 0.15);
}

.room-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  padding: 28px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.room-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.38;
  /* Sutiles imágenes de fondo oscurecidas */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
  z-index: 1;
}

.room-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 26, 46, 0.85) 0%, rgba(11, 26, 46, 0.45) 100%);
  z-index: 2;
  transition: background 0.4s ease;
}

.room-content-wrap {
  position: relative;
  z-index: 3;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.room-card:not(.room-empty):hover .room-bg-image {
  transform: scale(1.08);
  opacity: 0.58;
  /* Se aclara ligeramente en hover */
}

.room-card:not(.room-empty):hover .room-overlay {
  background: linear-gradient(to top, rgba(11, 26, 46, 0.75) 0%, rgba(11, 26, 46, 0.25) 100%);
}

.room-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.3s ease;
}

.room-card:not(.room-empty):hover .room-label {
  color: var(--cyan-mid);
}

.room-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.room-card:not(.room-empty):hover .room-dot {
  transform: scale(1.3);
  box-shadow: 0 0 12px 3px var(--cyan);
}

.room-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}

.room-card:not(.room-empty):hover .room-title {
  color: #fff;
}

.room-sala {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.room-dormitorio {
  grid-column: 4;
  grid-row: 1 / 3;
}

.room-entrada {
  grid-column: 3;
  grid-row: 1;
}

.room-cocina {
  grid-column: 3;
  grid-row: 2;
}

.room-oficina {
  grid-column: 3;
  grid-row: 3;
}

.room-pasillo {
  grid-column: 1;
  grid-row: 3;
}

.room-exterior {
  grid-column: 2;
  grid-row: 3;
}

.room-empty {
  grid-column: 4;
  grid-row: 3;
  background: #091526;
  /* Fondo más oscuro para indicar celda vacía */
  cursor: default;
  pointer-events: none;
}

/* Paginador y flechas de navegación (ocultos en desktop) */
.ambientes-dots,
.ambientes-arrow {
  display: none;
}

/* ── SOLUCIONES CATEGORÍAS ── */
/* ── SOLUCIONES CATEGORÍAS ── */
.soluciones-categorias {
  padding: 96px 5vw;
  background: var(--bg-soft);
  text-align: center;
}

.sol-cat-top {
  margin-bottom: 48px;
}

.sol-cat-top .sec-tag {
  justify-content: center;
  color: var(--cyan);
}

.sol-cat-top .sec-tag svg {
  stroke: var(--cyan);
}

.sol-cat-slider-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.sol-cat-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 30px;
  padding: 10px 0 20px;
  scrollbar-width: none;
  /* Firefox */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.sol-cat-grid::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

.sol-cat-card {
  flex-shrink: 0;
  width: 277.5px;
  /* exactamente 4 visibles en 1200px de contenedor */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sol-cat-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(11, 26, 46, 0.05);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--bg-dark);
}

.sol-cat-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sol-cat-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  transition: color 0.3s ease;
}

/* Flechas flotantes del Slider */
.sol-cat-arrow {
  display: flex;
  position: absolute;
  top: calc(50% - 44px);
  /* centrado relativo al wrapper de la imagen */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  color: var(--text);
  justify-content: center;
  align-items: center;
  z-index: 10;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease, opacity 0.3s ease;
  box-shadow: 0 4px 12px rgba(11, 26, 46, 0.08);
}

.sol-cat-arrow:hover {
  background: var(--white);
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 8px 20px rgba(0, 168, 204, 0.15);
  transform: scale(1.05);
}

.sol-cat-prev {
  left: -24px;
}

.sol-cat-next {
  right: -24px;
}

/* Hover Effects en Tarjetas */
.sol-cat-card:hover .sol-cat-img-wrapper {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(11, 26, 46, 0.12);
}

.sol-cat-card:hover img {
  transform: scale(1.08);
}

.sol-cat-card:hover .sol-cat-title {
  color: var(--cyan);
}

/* Paginador de Slider en Soluciones */
.sol-cat-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  width: 100%;
}

.sol-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(15, 29, 46, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.sol-cat-dot.active {
  background: var(--cyan);
  width: 22px;
  border-radius: 4px;
}

/* Tablet Layout */
@media (max-width: 1024px) {
  .sol-cat-card {
    width: 230px;
  }

  .sol-cat-arrow {
    display: none !important;
  }
}

/* Mobile Layout */
@media (max-width: 640px) {
  .soluciones-categorias {
    padding: 60px 5vw;
  }

  .sol-cat-top {
    margin-bottom: 32px;
  }

  .sol-cat-grid {
    gap: 24px;
    padding: 10px 5vw 20px;
    margin: 0 -5vw;
  }

  .sol-cat-card {
    width: 200px;
    gap: 14px;
    scroll-margin-left: 5vw;
  }

  .sol-cat-img-wrapper {
    border-radius: 20px;
  }

  .sol-cat-title {
    font-size: 0.95rem;
  }
}

/* ── FEATURES ── */
.feat-section {
  padding: 0 5vw;
}

.feat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
}

.feat-row.rev {
  direction: rtl;
}

.feat-row.rev>* {
  direction: ltr;
}

.feat-photo {
  border-radius: 20px;
  overflow: hidden;
  height: 380px;
  position: relative;
}

.feat-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s;
}

.feat-row:hover .feat-photo img {
  transform: scale(1.03);
}

.feat-photo-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 10px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--border);
}

.fpb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.fpb-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}

.feat-list {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feat-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: all .25s;
}

.feat-item:hover {
  background: var(--cyan-pale);
  border-color: var(--cyan-mid);
}

.fi-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fi-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--cyan);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fi-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.fi-desc {
  font-size: 0.82rem;
  color: var(--sub);
  line-height: 1.6;
}

/* ── PROCESO ── */
.proceso {
  background: var(--bg-dark);
  padding: 96px 5vw;
}

.proceso .sec-h2 {
  color: #fff;
}

.proceso .sec-p {
  color: rgba(255, 255, 255, 0.5);
}

.proceso .sec-tag {
  color: var(--cyan-mid);
}

.proceso .sec-tag svg {
  stroke: var(--cyan-mid);
}

.proceso-header {
  max-width: 640px;
  margin: 0 auto 76px;
  text-align: center;
}

.proceso-header .sec-p {
  max-width: 560px;
  margin: 0 auto;
}

/* ── TRACK / TIMELINE ── */
.proceso-track {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto 100px auto;
  column-gap: 6px;
}

.proceso-line {
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: center;
  position: relative;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 168, 204, 0.35) 6%, rgba(0, 168, 204, 0.35) 94%, transparent);
  overflow: hidden;
  z-index: 0;
}

.proceso-line-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--cyan), #7ee6ff, var(--cyan));
  background-size: 200% 100%;
  transform-origin: left;
  animation: procesoLineDraw 2.2s cubic-bezier(.65, 0, .35, 1) forwards, procesoLineShimmer 3.5s linear 2.2s infinite;
}

@keyframes procesoLineDraw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes procesoLineShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.proceso-node {
  grid-row: 2;
  align-self: center;
  justify-self: center;
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(160deg, #142236, var(--bg-dark));
  border: 1.5px solid rgba(0, 168, 204, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px rgba(11, 26, 46, 1), 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}

.proceso-node-dot {
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  border: 1.5px solid var(--cyan);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity .3s, transform .3s;
}

.proceso-node-icon {
  width: 22px;
  height: 22px;
  color: var(--cyan-mid);
  transition: color .3s;
}

.proceso-node-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

.proceso-node--up::after,
.proceso-node--down::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 2px;
  height: 21px;
  background: linear-gradient(rgba(0, 168, 204, 0.5), rgba(0, 168, 204, 0.05));
  transform: translateX(-50%);
}

.proceso-node--up::after {
  bottom: 100%;
}

.proceso-node--down::after {
  top: 100%;
  background: linear-gradient(rgba(0, 168, 204, 0.05), rgba(0, 168, 204, 0.5));
}

.proceso-card {
  grid-column: span 1;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 22px 18px 20px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .3s, border-color .3s;
}

.proceso-card--up {
  grid-row: 1;
  align-self: end;
  margin-bottom: 21px;
}

.proceso-card--down {
  grid-row: 3;
  align-self: start;
  margin-top: 21px;
}

.proceso-card-num {
  position: absolute;
  top: -6px;
  right: 6px;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
  z-index: 0;
  pointer-events: none;
}

.proceso-card-title {
  position: relative;
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.proceso-card-desc {
  position: relative;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.65;
}

.proceso-card:hover {
  background: rgba(0, 168, 204, 0.07);
  border-color: rgba(0, 168, 204, 0.3);
  z-index: 3;
}

.proceso-card--up:hover {
  transform: translateY(-6px);
}

.proceso-card--down:hover {
  transform: translateY(6px);
}

.proceso-card:hover .proceso-card-num {
  color: rgba(0, 168, 204, 0.12);
}

/* Resalta el nodo correspondiente cuando se pasa el cursor sobre su card */
.proceso-node:has(+ .proceso-card:hover) {
  border-color: var(--cyan);
  transform: scale(1.08);
}

.proceso-node:has(+ .proceso-card:hover) .proceso-node-dot {
  opacity: 1;
  transform: scale(1);
}

.proceso-node:has(+ .proceso-card:hover) .proceso-node-icon {
  color: var(--cyan);
}

/* ── RESPONSIVE: timeline vertical en pantallas medianas/pequeñas ── */
@media (max-width: 900px) {
  .proceso-header {
    margin-bottom: 52px;
  }

  .proceso-track {
    grid-template-columns: 58px 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    row-gap: 6px;
    column-gap: 18px;
    max-width: 460px;
    margin: 0 auto;
    position: relative;
  }

  .proceso-track::before {
    content: '';
    position: absolute;
    top: 29px;
    bottom: 29px;
    left: 29px;
    width: 2px;
    background: linear-gradient(rgba(0, 168, 204, 0.5), rgba(0, 168, 204, 0.1));
    z-index: 0;
  }

  .proceso-line {
    display: none;
  }

  .proceso-node,
  .proceso-card {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .proceso-node {
    align-self: start;
  }

  .proceso-node::after {
    display: none;
  }

  .proceso-card--up,
  .proceso-card--down {
    align-self: start;
    margin: 0 0 20px;
  }

  .proceso-card--up:hover,
  .proceso-card--down:hover {
    transform: translateX(4px);
  }

  .proceso-card-num {
    font-size: 2.2rem;
  }
}

@media (max-width: 640px) {
  .proceso {
    padding: 64px 5vw;
  }

  .proceso-track {
    max-width: 100%;
  }

  .proceso-node {
    width: 48px;
    height: 48px;
  }

  .proceso-node-icon {
    width: 18px;
    height: 18px;
  }

  .proceso-track::before {
    left: 24px;
  }

  .proceso-card {
    padding: 18px 16px 16px;
  }
}

/* ── ECOSISTEMA CONECTADO (home, entre Proceso y Voz) ── */
.eco-section {
  background: var(--bg);
  padding: 96px 5vw;
}

.eco-section .sec-tag {
  color: var(--cyan);
}

.eco-section .sec-h2 em {
  color: var(--cyan);
}

.eco-header {
  max-width: 700px;
  margin: 0 auto 50px;
  text-align: center;
}

.eco-header .sec-p {
  max-width: 700px;
  margin: 0 auto;
}

.eco-diagram {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eco-devices {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px 16px;
  width: 100%;
}

.eco-device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.eco-device-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--cyan-pale);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cyan-mid);
  transition: all 0.3s;
}

.eco-device:hover .eco-device-icon {
  background: var(--cyan);
  color: var(--white);
  transform: translateY(-4px);
}

.eco-device-icon svg {
  width: 24px;
  height: 24px;
}

.eco-device span {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}

@media (max-width: 1024px) and (min-width: 769px) {
  .eco-devices {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .eco-devices {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 22px;
    padding: 4px 4px 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .eco-devices::-webkit-scrollbar {
    display: none;
  }

  .eco-device {
    flex: 0 0 auto;
    width: 84px;
    scroll-snap-align: start;
  }
}

/* ── TESTIMONIOS ── */
.testimonios {
  padding: 96px 5vw;
  background: var(--bg-soft);
}

.test-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 24px;
}

.test-top .sec-p {
  max-width: 640px;
  margin-top: -2px;
}

.test-slider-container {
  position: relative;
  width: 100%;
}

.test-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 20px;
  scrollbar-width: none;
  /* Firefox */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  padding: 10px 0 20px;
}

.test-grid::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

.tc {
  background: var(--white);
  border-radius: 16px;
  padding: 32px;
  border: 1px solid var(--border);
  transition: all .28s;
  position: relative;
  flex-shrink: 0;
  width: calc((100% - 40px) / 3);
  scroll-snap-align: start;
}

.tc:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 80, 120, 0.1);
  border-color: var(--cyan-mid);
}

/* Flechas de Navegación del Slider */
.test-arrow {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border);
  color: var(--text);
  justify-content: center;
  align-items: center;
  z-index: 10;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease, opacity 0.3s ease;
  box-shadow: 0 4px 12px rgba(11, 26, 46, 0.08);
}

.test-arrow:hover {
  background: var(--white);
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 8px 20px rgba(0, 168, 204, 0.15);
  transform: translateY(-50%) scale(1.05);
}

.test-prev {
  left: -24px;
}

.test-next {
  right: -24px;
}

/* Paginador de Slider */
.test-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  width: 100%;
}

.test-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(15, 29, 46, 0.15);
  border: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  padding: 0;
}

.test-dot.active {
  background: var(--cyan);
  width: 22px;
  border-radius: 4px;
}

.tc-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}

.tc-stars svg {
  width: 14px;
  height: 14px;
  fill: #fbbf24;
  stroke: none;
}

.tc-text {
  font-size: 0.92rem;
  color: var(--sub);
  line-height: 1.75;
  margin-bottom: 24px;
  font-style: italic;
}

.tc-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tc-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border);
}

.tc-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tc-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}

.tc-role {
  font-size: 0.73rem;
  color: var(--sub);
  margin-top: 2px;
}

/* ── CTA ── */
.cta {
  position: relative;
  padding: 96px 5vw;
  background: var(--bg-soft);
  overflow: hidden;
  scroll-margin-top: 80px;
  /* Evita que el menú fixed tape la sección al anclar */
}

.cta-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  background: linear-gradient(135deg, #071220 0%, #0e1e35 100%);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 10, 30, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  min-height: 480px;
  z-index: 2;
}

/* Orbe luminoso en el fondo de la tarjeta */
.cta-inner::before {
  content: '';
  position: absolute;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.18) 0%, transparent 70%);
  bottom: -120px;
  left: -120px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.cta-left {
  padding: 68px 8% 68px 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 3;
}

.cta-tagline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
  width: fit-content;
}

.cta-tagline-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--cyan);
  animation: cta-pulse 2s infinite;
}

@keyframes cta-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.5;
  }
}

.cta-left h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.cta-left h2 em {
  font-style: italic;
  color: var(--cyan);
}

.cta-left p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 28px;
  line-height: 1.7;
  max-width: 480px;
}

/* Viñetas de beneficios */
.cta-benefits {
  list-style: none;
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cta-benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

.cta-benefits li svg {
  width: 18px;
  height: 18px;
  stroke: var(--cyan);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--bg-dark);
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  width: fit-content;
  transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 168, 204, 0.35);
  background: #f8fafb;
}

.btn-white svg {
  width: 16px;
  height: 16px;
  stroke: var(--bg-dark);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease;
}

.btn-white:hover svg {
  transform: translateX(4px);
}

.cta-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 55%;
  overflow: hidden;
  z-index: 1;
}

.cta-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #0e1e35 0%, rgba(14, 30, 53, 0.95) 15%, rgba(14, 30, 53, 0.7) 45%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

.cta-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.8;
  filter: brightness(0.9) contrast(1.05);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-inner:hover .cta-right img {
  transform: scale(1.05);
}

/* ── PROYECTO INTEGRAL ── */
.pyi {
  padding: 90px 5vw;
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
}

.pyi-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
  z-index: 2;
}

.pyi::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.14) 0%, transparent 70%);
  top: -140px;
  right: -100px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.pyi-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
}

.pyi-tag-dot {
  width: 7px;
  height: 7px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--cyan);
  animation: cta-pulse 2s infinite;
}

.pyi-h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.pyi-h2 em {
  font-style: italic;
  color: var(--cyan);
}

.pyi-desc {
  font-size: 1.05rem;
  color: var(--sub);
  margin-bottom: 28px;
  line-height: 1.7;
  max-width: 500px;
}

.pyi-benefits {
  list-style: none;
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pyi-benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text);
}

.pyi-benefits li svg {
  width: 18px;
  height: 18px;
  stroke: var(--cyan);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.pyi-network {
  position: relative;
  width: min(480px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  z-index: 2;
}

.pyi-network-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pyi-network-lines line {
  stroke: rgba(0, 168, 204, 0.35);
  stroke-width: 0.4;
}

.pyi-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 31%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: radial-gradient(circle at 35% 28%, var(--cyan-pale) 0%, var(--white) 72%);
  border: 1px solid rgba(0, 168, 204, 0.35);
  box-shadow: 0 10px 36px rgba(0, 168, 204, 0.22);
  z-index: 3;
  text-align: center;
  padding: 8px;
}

.pyi-hub svg {
  width: 26%;
  height: 26%;
  color: var(--cyan);
  flex-shrink: 0;
}

.pyi-hub span {
  font-size: clamp(0.66rem, 1.7vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1.25;
}

.pyi-hub span em {
  display: block;
  font-style: normal;
  color: var(--cyan);
  font-size: 1.1em;
}

.pyi-node {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: clamp(38px, 8.5vw, 50px);
  height: clamp(38px, 8.5vw, 50px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--sub);
  box-shadow: 0 4px 14px rgba(15, 29, 46, 0.08);
  z-index: 4;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.pyi.in .pyi-node {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.pyi-node svg {
  width: 42%;
  height: 42%;
  pointer-events: none;
}

.pyi-node:hover,
.pyi-node:focus-visible {
  background: var(--cyan-pale);
  border-color: rgba(0, 168, 204, 0.55);
  color: var(--cyan-a11y);
  box-shadow: 0 8px 22px rgba(0, 168, 204, 0.3);
  transform: translate(-50%, -50%) scale(1.15);
  outline: none;
}

.pyi-node--static {
  cursor: default;
}

.pyi-node--static:hover {
  background: var(--white);
  border-color: var(--border);
  color: var(--sub);
  box-shadow: 0 4px 14px rgba(15, 29, 46, 0.08);
  transform: translate(-50%, -50%) scale(1);
}

.pyi-node-label {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--bg-dark);
  border: 1px solid rgba(0, 168, 204, 0.35);
  padding: 5px 10px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pyi-node:hover .pyi-node-label,
.pyi-node:focus-visible .pyi-node-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1024px) {
  .pyi-inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .pyi-desc {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .pyi {
    padding: 64px 6vw;
  }

  .pyi-network {
    width: min(300px, 80vw);
  }
}

/* ── CTA con formulario embebido (páginas de Soluciones) ── */
.cta-inner--form {
  grid-template-columns: 1fr 1fr;
  min-height: unset;
  align-items: start;
}

.cta-inner--form .cta-left {
  justify-content: flex-start;
  padding-top: 64px;
}

.cta-inner--form .cta-right {
  position: relative;
  inset: unset;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  padding: 64px 56px 64px 0;
  display: block;
}

.cta-inner--form .cta-right::before {
  display: none;
}

.cta-form-wrap.contacto-form-card {
  width: 100%;
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}

.cta-form-wrap.contacto-form-card::before {
  display: none;
}

.cta-form-wrap .wpcf7-form input[type="text"],
.cta-form-wrap .wpcf7-form input[type="email"],
.cta-form-wrap .wpcf7-form input[type="tel"],
.cta-form-wrap .wpcf7-form textarea {
  margin-bottom: 14px;
}

@media (max-width: 1024px) {
  .cta-inner--form .cta-left {
    padding-top: 48px;
  }

  .cta-inner--form .cta-right {
    height: auto;
    padding: 8px 24px 48px;
  }
}

/* ── CLIENTES ── */
.clientes {
  padding: 80px 5vw;
  background: #091321;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

.clientes::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.clientes-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.clientes-label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 40px;
  text-align: center;
  opacity: 0.8;
}

.clientes-carousel {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin-top: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.clientes-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 20px;
  animation: clientes-scroll 88s linear infinite;
}

.clientes-carousel:hover .clientes-track {
  animation-play-state: paused;
}

@keyframes clientes-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.clientes-logo-card {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px 28px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  height: 70px;
  flex-shrink: 0;
}

.clientes-logo-card img {
  max-height: 34px;
  width: auto;
  display: block;
}

.clientes-logo-card:hover {
  box-shadow: 0 10px 25px rgba(0, 168, 204, 0.2);
  transform: translateY(-4px);
}

/* ── CLIENTES (variante clara) ── */
.clientes-blanco {
  padding: 80px 5vw;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.clientes-blanco-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.clientes-blanco-label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text);
  opacity: 0.6;
  margin-bottom: 40px;
  text-align: center;
}

.clientes-blanco-carousel {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin-top: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.clientes-blanco-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 20px;
  animation: clientes-scroll 88s linear infinite;
}

.clientes-blanco-carousel:hover .clientes-blanco-track {
  animation-play-state: paused;
}

.clientes-blanco-logo-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  width: 160px;
  height: 70px;
  flex-shrink: 0;
}

.clientes-blanco-logo-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.clientes-blanco-logo-card:hover {
  background: var(--white);
  border-color: var(--cyan-mid);
  box-shadow: 0 10px 25px rgba(0, 168, 204, 0.15);
  transform: translateY(-4px);
}

@media (max-width: 768px) {
  .clientes-blanco {
    padding: 60px 5vw;
  }

  .clientes-blanco-logo-card {
    padding: 10px;
    width: 130px;
    height: 60px;
  }

  .clientes-blanco-logo-card img {
    max-height: 100%;
  }
}

/* ── FOOTER ── */
footer {
  background: #07111e;
  padding: 72px 5vw 36px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 32px;
}

.ft-mark {
  display: inline-block;
  margin-bottom: 14px;
  text-decoration: none;
}

.ft-logo-img {
  height: 42px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}


.ft-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.75;
  max-width: 280px;
}

.ft-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 168, 204, 0.08);
  border: 1px solid rgba(0, 168, 204, 0.2);
  color: var(--cyan);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 16px 0 20px;
  width: fit-content;
}

.ft-badge svg {
  width: 13px;
  height: 13px;
  stroke: var(--cyan);
  stroke-width: 2.5;
  fill: none;
}

.ft-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.ft-social-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ft-social-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform 0.3s ease;
}

.ft-social-btn:hover {
  background: rgba(0, 168, 204, 0.1);
  border-color: var(--cyan);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 168, 204, 0.2);
}

.ft-social-btn:hover svg {
  transform: scale(1.05);
}

.ft-col h3 {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 18px;
}

.ft-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ft-col a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  transition: color .2s;
}

.ft-col a:hover {
  color: #fff;
}

.ft-contacto ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ft-contacto li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ft-contacto li svg {
  width: 16px;
  height: 16px;
  stroke: var(--cyan);
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer-bottom em {
  font-style: normal;
  color: var(--cyan);
  opacity: .7;
}

/* ── REVEAL ── */
[data-r] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}

[data-r].in {
  opacity: 1;
  transform: translateY(0);
}


/* ── CONTENEDOR MÁXIMO GLOBAL (PC/DESKTOP) ── */
@media (min-width: 1300px) {

  .nav,
  .ambientes,
  .voz,
  .soluciones-categorias,
  .feat-section,
  .proceso,
  .precios,
  .faq,
  .testimonios,
  .clientes,
  footer {
    padding-left: calc((100% - 1200px) / 2) !important;
    padding-right: calc((100% - 1200px) / 2) !important;
  }

  .hero {
    padding-left: calc((100% - 1200px) / 2) !important;
  }

  .hero-content {
    padding-left: 0 !important;
  }

  .cta-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .page-soluciones-hero,
  .page-soluciones-grid-section,
  .page-qs-hero,
  .page-qs-intro,
  .page-qs-mv,
  .page-qs-valores {
    padding-left: calc((100% - 1200px) / 2) !important;
    padding-right: calc((100% - 1200px) / 2) !important;
  }
}

/* ══════════════════════════════════════════
   SOPORTE RESPONSIVO PARA PANTALLAS MÓVILES
   Evita que las columnas se aplasten en cel.
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Hero responsive */
  .hero {
    min-height: 80vh;
  }

  .hero-cards {
    display: none;
  }

  .hero-content {
    padding: 60px 5vw;
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(2rem, 8vw, 2.8rem);
    margin-bottom: 18px;
  }

  .hero-desc {
    font-size: 0.95rem;
    margin-bottom: 32px;
  }

  .hero-btns {
    margin-bottom: 40px;
  }

  .hstat {
    padding: 14px 18px;
  }

  .hstat-num {
    font-size: 1.4rem;
  }

  .feat-row {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 0;
  }

  .feat-row.rev {
    direction: ltr;
  }

  .feat-photo {
    height: 280px;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .test-arrow {
    display: none !important;
  }

  .test-grid {
    gap: 16px;
    padding: 10px 5vw 20px;
    margin: 0 -5vw;
  }

  .tc {
    width: 85vw;
    max-width: 380px;
    padding: 24px;
    scroll-snap-align: start;
    scroll-margin-left: 5vw;
  }

  .cta {
    padding: 60px 4vw;
  }

  .cta-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    border-radius: 20px;
  }

  .cta-inner::before {
    width: 280px;
    height: 280px;
    top: -140px;
    left: -140px;
  }

  .cta-left {
    padding: 48px 24px 40px;
  }

  .cta-right {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    height: 280px;
    width: 100%;
  }

  .cta-right::before {
    display: block;
    background: linear-gradient(to bottom, #0e1e35 0%, rgba(14, 30, 53, 0.7) 40%, transparent 100%);
  }

  .cta-right img {
    opacity: 0.75;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Ambientes responsive (Slider horizontal) */
  .ambientes-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    gap: 16px;
    padding: 10px 5vw 30px;
    margin: 0 -5vw;
    scrollbar-width: none;
    /* Firefox */
  }

  .ambientes-grid::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
  }

  .room-card {
    grid-column: auto !important;
    grid-row: auto !important;
    flex-shrink: 0;
    width: 82vw;
    min-height: 220px;
    padding: 24px;
    scroll-snap-align: start;
  }

  .room-empty {
    display: none;
  }

  /* Slider wrappers e indicadores móviles */
  .ambientes-slider-wrapper {
    position: relative;
    width: 100%;
  }

  /* Flechas de navegación del slider */
  .ambientes-arrow {
    display: flex !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(11, 26, 46, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    justify-content: center;
    align-items: center;
    z-index: 15;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .ambientes-arrow:active {
    background: var(--cyan) !important;
    border-color: var(--cyan) !important;
  }

  .ambientes-prev {
    left: 8px;
  }

  .ambientes-next {
    right: 8px;
  }

  /* Paginador de slider ambientes en móviles */
  .ambientes-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    width: 100%;
  }

  .amb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(15, 29, 46, 0.15);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
  }

  .amb-dot.active {
    background: var(--cyan);
    width: 22px;
    border-radius: 4px;
  }
}

/* ==========================================================================
   PÁGINA DE SOLUCIONES (DISEÑO PREMIUM DE TARJETAS CON FOTOS Y OVERLAY)
   ========================================================================== */

.page-soluciones-main {
  background: #071322;
  min-height: 100vh;
}

/* Page Soluciones Hero */
.page-soluciones-hero {
  padding: 140px 5vw 60px;
  background: #071322;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.page-soluciones-hero::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -150px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.page-soluciones-hero .sec-tag {
  justify-content: center;
  margin-bottom: 20px;
  color: var(--cyan);
  background: rgba(0, 168, 204, 0.1);
  border: 1px solid rgba(0, 168, 204, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1;
}

.page-soluciones-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  margin: 0 0 16px 0;
  letter-spacing: -0.03em;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 1;
}

.page-soluciones-subtitle {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: rgba(255, 255, 255, 0.7);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* Bento Grid Section */
.page-soluciones-grid-section {
  padding: 60px 5vw 120px;
  background: #050e1a;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.page-soluciones-bento {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.sol-bento-card {
  position: relative;
  height: 380px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #091321;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s, box-shadow 0.45s;
  cursor: pointer;
  text-decoration: none;
}

.sol-bento-wide {
  grid-column: span 2;
}

.sol-bento-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s;
  z-index: 0;
}

.sol-bento-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(7, 19, 34, 0.95) 0%,
      rgba(7, 19, 34, 0.6) 50%,
      rgba(7, 19, 34, 0.15) 100%);
  z-index: 1;
}

.sol-bento-content {
  position: relative;
  z-index: 2;
  padding: 36px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.sol-bento-wide .sol-bento-content {
  padding: 40px;
}

.sol-bento-num {
  align-self: flex-start;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--cyan);
  background: rgba(0, 168, 204, 0.12);
  border: 1px solid rgba(0, 168, 204, 0.25);
  padding: 4px 10px;
  border-radius: 8px;
  letter-spacing: 0.05em;
}

.sol-bento-title {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  color: var(--white);
  letter-spacing: -0.01em;
}

.sol-bento-wide .sol-bento-title {
  font-size: 1.55rem;
}

.sol-bento-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.sol-bento-wide .sol-bento-desc {
  font-size: 0.92rem;
}

/* Hover Effects */
.sol-bento-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 168, 204, 0.3);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), 0 0 20px rgba(0, 168, 204, 0.06);
}

.sol-bento-card:hover .sol-bento-img {
  transform: scale(1.04);
  opacity: 0.75;
}

/* Responsividad */
@media (max-width: 1024px) {
  .sol-bento-wide {
    grid-column: span 1;
  }

  .page-soluciones-hero {
    padding: 110px 5vw 40px;
  }

  .page-soluciones-bento {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .page-soluciones-bento {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sol-bento-card {
    height: 340px;
  }

  .sol-bento-content {
    padding: 24px;
  }

  .page-soluciones-title {
    font-size: 2.1rem;
  }

  .page-soluciones-subtitle {
    font-size: 0.95rem;
  }
}

/* ── ECOSISTEMA DE VOZ ── */
.voz {
  background: var(--bg-dark);
  padding: 96px 5vw;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 80px;
  /* Evita que el header tape la sección al anclar */
}

.voz-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Background glowing accent for technology vibe */
.voz::before {
  content: '';
  position: absolute;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.1) 0%, transparent 70%);
  top: 10%;
  right: -100px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.voz-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.voz-tag-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--cyan);
  margin-right: 4px;
}

.voz-left h2 {
  color: #fff;
  margin-bottom: 24px;
}

.voz-left h2 em {
  font-style: normal;
  color: var(--cyan);
}

.voz-left p {
  color: rgba(255, 255, 255, 0.6);
  max-width: 480px;
  margin-bottom: 36px;
  line-height: 1.7;
}

/* Console terminal style for voice typewriter */
.voz-console {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px 36px;
  max-width: 520px;
  height: 115px;
  /* Altura constante fija para prevenir saltos de línea y fluctuaciones */
  min-height: 115px;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.voz-console::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 10% 10%, rgba(0, 168, 204, 0.05) 0%, transparent 60%);
  pointer-events: none;
}

.voz-console-balloon {
  width: 100%;
  line-height: 1.5;
}

.voz-console-quote {
  font-family: Georgia, serif;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  user-select: none;
  vertical-align: middle;
}

.voz-console-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  /* Letra reducida, más fina y elegante */
  font-weight: 700;
  color: var(--cyan);
  /* Cian suave de marca en lugar de neón crudo */
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0, 168, 204, 0.15);
}

.voz-cursor-bar {
  display: inline-block;
  width: 2.5px;
  height: 1.25em;
  background-color: var(--cyan);
  margin-left: 4px;
  vertical-align: middle;
  animation: voz-cursor-blink 0.8s infinite;
  box-shadow: 0 0 6px rgba(0, 168, 204, 0.4);
}

@keyframes voz-cursor-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Assistant cards layout */
.voz-right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* With 6 cards the modifier is the same — 3 cols auto wraps into 2 rows */
.voz-right--grid {
  grid-template-columns: repeat(3, 1fr);
}

.voz-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 28px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), border-color .3s, box-shadow .3s;
}

.voz-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 168, 204, 0.3);
  box-shadow: 0 12px 30px rgba(0, 168, 204, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.voz-card-icon-wrap {
  width: 64px;
  height: 64px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s;
}

.voz-card:hover .voz-card-icon-wrap {
  transform: scale(1.06);
}

/* Mi Home — naranja Xiaomi */
.voz-card-icon-wrap--mi {
  background: #ff6900;
  color: #fff;
}

/* Zigbee / Matter — cyan claro */
.voz-card-icon-wrap--zigbee {
  background: rgba(0, 168, 204, 0.15);
  color: var(--cyan);
  border: 1px solid rgba(0, 168, 204, 0.25);
}

/* Aqara Hub — gris oscuro sutil */
.voz-card-icon-wrap--aqara {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.voz-card-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.4;
  letter-spacing: -0.01em;
}


/* ── RESPONSIVE VOZ ── */
@media (max-width: 1024px) {
  .voz {
    padding: 80px 5vw;
  }

  .voz-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .voz-console {
    max-width: 100%;
  }

  .voz-right {
    gap: 12px;
  }

  .voz-card {
    padding: 24px 12px;
  }

  .voz-card-icon-wrap {
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
  }
}

@media (max-width: 480px) {
  .voz-card-title {
    font-size: 0.8rem;
  }
}

/* ── QUIÉNES SOMOS PAGE ── */

.page-qs-main {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* QS Hero Section */
.page-qs-hero {
  position: relative;
  height: 460px;
  background-image: linear-gradient(rgba(11, 26, 46, 0.7), rgba(11, 26, 46, 0.85)), url('https://images.unsplash.com/photo-1582407947304-fd86f028f716?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 5vw 40px;
}

.page-qs-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(0, 168, 204, 0.15), transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.page-qs-hero-content {
  max-width: 800px;
  z-index: 2;
  position: relative;
}

.page-qs-hero-content .sec-tag {
  justify-content: center;
  margin-bottom: 20px;
  color: var(--cyan);
  background: rgba(0, 168, 204, 0.1);
  border: 1px solid rgba(0, 168, 204, 0.2);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-qs-hero-title {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  margin: 0 0 16px 0;
  letter-spacing: -0.03em;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.page-qs-hero-title em {
  font-style: normal;
  color: var(--cyan);
}

.page-qs-hero-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6;
  font-weight: 400;
}

/* QS Intro Section (Split columns) */
.page-qs-intro {
  padding: 100px 5vw;
  background: var(--bg);
}

.page-qs-intro-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 80px;
  align-items: center;
}

.page-qs-section-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--bg-dark);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.page-qs-section-title.text-center {
  text-align: center;
}

.page-qs-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--sub);
  margin-bottom: 20px;
}

/* Stats Block as premium horizontal row */
.page-qs-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(11, 26, 46, 0.02);
}

.page-qs-stat-item {
  text-align: center;
  flex: 1;
  position: relative;
}

.page-qs-stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--border);
}

.page-qs-stat-num-wrapper {
  display: flex;
  justify-content: center;
  align-items: baseline;
  color: var(--cyan);
  font-weight: 800;
  margin-bottom: 6px;
}

.page-qs-stat-number {
  font-size: clamp(2.2rem, 5vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.page-qs-stat-suffix {
  font-size: 1.4rem;
  margin-left: 2px;
  font-weight: 700;
}

.page-qs-stat-label {
  font-size: 0.8rem;
  color: var(--sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
}

/* Floating Glassmorphism Badge */
.page-qs-floating-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 14px 18px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(11, 26, 46, 0.1);
  z-index: 10;
  text-align: left;
}

.floating-badge-icon {
  width: 32px;
  height: 32px;
  background: var(--cyan);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.floating-badge-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--white);
}

.page-qs-floating-badge strong {
  display: block;
  font-size: 0.85rem;
  color: var(--bg-dark);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 2px;
}

.page-qs-floating-badge span {
  display: block;
  font-size: 0.75rem;
  color: var(--sub);
  line-height: 1;
}

/* Intro Image Wrapper */
.page-qs-image-wrapper {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(11, 26, 46, 0.06);
  border: 1px solid var(--border);
}

.page-qs-intro-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-qs-image-wrapper:hover .page-qs-intro-img {
  transform: scale(1.04);
}

.page-qs-image-glow {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  pointer-events: none;
  background: linear-gradient(to bottom right, rgba(0, 168, 204, 0.08), transparent 50%);
}

/* Misión & Visión Section - Modern Dark Section */
/* ── Bento DNA Section ── */
.page-qs-dna {
  padding: 100px 5vw;
  background: #071322;
  position: relative;
  overflow: hidden;
}

.page-qs-dna::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -150px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.12) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.page-qs-dna-header {
  text-align: center;
  margin-bottom: 56px;
  position: relative;
  z-index: 1;
}

.page-qs-dna-header .sec-tag {
  justify-content: center;
  margin-bottom: 16px;
  color: var(--cyan);
  background: rgba(0, 168, 204, 0.1);
  border: 1px solid rgba(0, 168, 204, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-qs-dna-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.page-qs-dna-title em {
  font-style: normal;
  color: var(--cyan);
}

.page-qs-dna-subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
  max-width: 500px;
  margin: 0 auto;
}

/* Bento Grid */
.page-qs-bento {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}

.bento-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 32px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(0, 168, 204, 0.05) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}

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

.bento-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 168, 204, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 168, 204, 0.05);
}

.bento-wide {
  grid-column: span 2;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  padding: 40px;
}

.bento-icon-wrapper {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(0, 168, 204, 0.1);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(0, 168, 204, 0.15);
  transition: all 0.3s;
}

.bento-card:hover .bento-icon-wrapper {
  background: var(--cyan);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(0, 168, 204, 0.25);
  transform: scale(1.05);
}

.bento-icon-wrapper svg {
  width: 24px;
  height: 24px;
}

.bento-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bento-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.bento-wide h3 {
  margin-bottom: 0;
  font-size: 1.35rem;
}

.bento-card p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

.bento-wide p {
  font-size: 0.95rem;
  line-height: 1.65;
}

.bento-small {
  padding: 32px 28px;
}

.bento-small h3 {
  margin-top: 18px;
}

/* Responsividad para Quiénes Somos */

@media (max-width: 1200px) {
  .page-qs-intro-container {
    gap: 40px;
  }

  .page-qs-bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .page-qs-intro-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .page-qs-intro-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .page-qs-stats {
    width: 100%;
  }

  .page-qs-image-wrapper {
    max-width: 600px;
    margin: 0 auto;
  }

  .clientes-logo-card {
    padding: 20px 24px;
  }
}

@media (max-width: 768px) {
  .page-qs-hero {
    height: 360px;
    padding-top: 100px;
  }

  .page-qs-intro {
    padding: 60px 5vw;
  }

  .page-qs-dna {
    padding: 60px 5vw;
  }

  .page-qs-dna-header {
    margin-bottom: 40px;
  }

  .page-qs-bento {
    grid-template-columns: 1fr;
  }

  .bento-card {
    padding: 24px;
  }

  .page-qs-floating-badge {
    position: relative;
    bottom: auto;
    left: auto;
    margin: 20px auto 0;
    max-width: 240px;
    background: rgba(255, 255, 255, 0.95);
  }

  .clientes {
    padding: 60px 5vw;
  }
}

@media (max-width: 480px) {
  .page-qs-stats {
    flex-direction: column;
    gap: 20px;
    padding: 24px 20px;
  }

  .page-qs-stat-item:not(:last-child)::after {
    display: none;
  }

  .page-qs-bento {
    grid-template-columns: 1fr;
  }

  .clientes-logo-card {
    padding: 16px 18px;
    height: 56px;
  }

  .clientes-logo-card img {
    max-height: 24px;
  }
}

/* ── SECCIÓN PRECIOS ── */

.precios {
  padding: 100px 5vw;
  background: var(--bg);
}

.precios-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.precios-header .sec-tag {
  justify-content: center;
  margin-bottom: 20px;
}

.precios-title {
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 800;
  color: var(--bg-dark);
  margin-bottom: 16px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.precios-subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--sub);
  line-height: 1.6;
}

.precios-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch;
}

.precios-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 44px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s, border-color 0.4s;
  box-shadow: 0 10px 30px rgba(11, 26, 46, 0.02);
}

.precios-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(11, 26, 46, 0.06);
  border-color: var(--border);
}

/* Card Destacada */
.precios-card.featured {
  border: 2px solid var(--cyan);
  box-shadow: 0 15px 35px rgba(0, 168, 204, 0.08);
  transform: scale(1.02);
}

.precios-card.featured:hover {
  transform: scale(1.02) translateY(-6px);
  box-shadow: 0 25px 50px rgba(0, 168, 204, 0.15);
}

.precios-popular-tag {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cyan);
  color: var(--white);
  padding: 6px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 100px;
  box-shadow: 0 4px 15px rgba(0, 168, 204, 0.25);
}

/* Card Custom (Dark accents for contrast) */
.precios-card.custom {
  background: radial-gradient(circle at top right, rgba(0, 168, 204, 0.03), transparent 60%), var(--white);
}

.precios-card-header {
  margin-bottom: 30px;
}

.precios-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sub);
  margin-bottom: 12px;
}

.precios-card.featured .precios-badge {
  color: var(--cyan);
}

.precios-card-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bg-dark);
  margin-bottom: 10px;
}

.precios-card-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--sub);
  min-height: 44px;
}

.precios-price-box {
  display: flex;
  align-items: baseline;
  margin-top: 24px;
  color: var(--bg-dark);
}

.precios-currency {
  font-size: 1.4rem;
  font-weight: 700;
  margin-right: 4px;
}

.precios-amount {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
}

.precios-period {
  font-size: 0.95rem;
  color: var(--sub);
  margin-left: 6px;
  font-weight: 600;
}

.precios-card-body {
  flex-grow: 1;
  margin-bottom: 40px;
}

.precios-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.precios-features li {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--sub);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.precios-features .feature-icon {
  width: 18px;
  height: 18px;
  color: var(--cyan);
  flex-shrink: 0;
  margin-top: 2px;
}

.precios-card-footer {
  margin-top: auto;
}

.precios-card-footer .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 16px;
  transition: all 0.3s ease;
  text-align: center;
}

.precios-card-footer .btn-outline {
  border: 2px solid var(--border);
  color: var(--bg-dark);
  background: transparent;
}

.precios-card-footer .btn-outline:hover {
  background: var(--bg-dark);
  color: var(--white);
  border-color: var(--bg-dark);
  box-shadow: 0 10px 20px rgba(11, 26, 46, 0.1);
}

.precios-card-footer .btn-cyan {
  background: var(--cyan);
  color: var(--white);
  border: 2px solid var(--cyan);
}

.precios-card-footer .btn-cyan:hover {
  background: var(--cyan-hover);
  border-color: var(--cyan-hover);
  box-shadow: 0 10px 25px rgba(0, 168, 204, 0.25);
  transform: translateY(-2px);
}

/* ── TABLA COMPARATIVA DE PLANES ── */

.hs-compare-table-wrap {
  max-width: 1000px;
  margin: 0 auto;
  overflow-x: auto;
}

.hs-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 640px;
}

.hs-compare-table th,
.hs-compare-table td {
  padding: 18px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.hs-compare-table thead th {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  border-bottom: 2px solid var(--border);
}

.hs-compare-label {
  font-weight: 700;
  color: var(--sub);
  font-size: 0.85rem;
  white-space: nowrap;
  width: 120px;
}

.hs-compare-featured {
  background: var(--cyan-pale);
}

.hs-compare-tag {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.hs-compare-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hs-compare-features li {
  font-size: 0.88rem;
  color: var(--sub);
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}

.hs-compare-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
}

@media (max-width: 768px) {
  .hs-compare-table th,
  .hs-compare-table td {
    padding: 14px;
  }
}


/* ── SECCIÓN FAQ ── */

.faq {
  padding: 100px 5vw;
  background: var(--bg-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.faq-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.faq-header .sec-tag {
  justify-content: center;
  margin-bottom: 20px;
  color: var(--cyan-mid);
}

.faq-header .sec-tag svg {
  stroke: var(--cyan-mid);
}

.faq-title {
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 16px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.faq-subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.faq-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 168, 204, 0.4);
}

.faq-item.active {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--cyan);
  box-shadow: 0 10px 25px rgba(0, 168, 204, 0.15);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  gap: 20px;
  transition: color 0.3s;
  outline: none;
}

.faq-question:hover {
  color: var(--cyan-mid);
}

.faq-item.active .faq-question {
  color: var(--cyan-mid);
}

.faq-arrow {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
  flex-shrink: 0;
}

.faq-item.active .faq-arrow {
  transform: rotate(180deg);
  color: var(--cyan);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-answer-content {
  padding: 0 30px 28px;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
}

.faq-wa-cta {
  text-align: center;
  margin-top: 48px;
}

/* ── RESPONSIVIDAD PRECIOS & FAQ ── */

@media (max-width: 1024px) {
  .precios-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 500px;
    margin: 0 auto;
  }

  .precios-card.featured {
    transform: none;
  }

  .precios-card.featured:hover {
    transform: translateY(-8px);
  }
}

@media (max-width: 768px) {

  .precios,
  .faq {
    padding: 60px 5vw;
  }

  .faq-wa-cta {
    margin-top: 32px;
  }

  .precios-header,
  .faq-header {
    margin-bottom: 40px;
  }

  .faq-question {
    padding: 20px 24px;
    font-size: 1rem;
  }

  .faq-answer-content {
    padding: 0 24px 20px;
    font-size: 0.95rem;
  }
}

/* ══════════════════════════════════════════
   PÁGINA DE CONTACTO
   ══════════════════════════════════════════ */

.page-contacto-main {
  background: var(--bg);
  min-height: 100vh;
}

/* Hero */
.contacto-hero {
  position: relative;
  height: 420px;
  background-image: linear-gradient(rgba(11, 26, 46, 0.72), rgba(11, 26, 46, 0.88)), url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 5vw 40px;
}

.contacto-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at bottom left, rgba(0, 168, 204, 0.12), transparent 55%);
  pointer-events: none;
  z-index: 1;
}

.contacto-hero-content {
  max-width: 750px;
  position: relative;
  z-index: 2;
}

.contacto-hero-content .sec-tag {
  justify-content: center;
  margin-bottom: 20px;
  color: var(--cyan);
  background: rgba(0, 168, 204, 0.1);
  border: 1px solid rgba(0, 168, 204, 0.2);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contacto-hero-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  margin: 0 0 16px 0;
  letter-spacing: -0.03em;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.contacto-hero-title em {
  font-style: normal;
  color: var(--cyan);
}

.contacto-hero-subtitle {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.65;
  font-weight: 400;
}

/* Contact Body */
.contacto-body {
  padding: 80px 5vw;
}

.contacto-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  align-items: start;
}

.contacto-info {
  position: sticky;
  top: 100px;
}

/* Left Info Column */
.contacto-info-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--bg-dark);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.contacto-info-title em {
  font-style: normal;
  color: var(--cyan);
}

.contacto-info-desc {
  font-size: 1rem;
  color: var(--sub);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 420px;
}

/* Contact Info Cards */
.contacto-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contacto-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 24px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.contacto-card:hover {
  border-color: var(--cyan-mid);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 168, 204, 0.06);
}

.contacto-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--cyan-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.contacto-card:hover .contacto-card-icon {
  background: var(--cyan);
}

.contacto-card-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--cyan);
  transition: stroke 0.3s;
}

.contacto-card:hover .contacto-card-icon svg {
  stroke: var(--white);
}

.contacto-card-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sub);
  margin-bottom: 2px;
}

.contacto-card-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

/* WhatsApp card accent */
.contacto-card-wa {
  border-color: rgba(37, 211, 102, 0.2);
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.03), var(--white));
}

.contacto-card-wa:hover {
  border-color: #25d366;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.1);
}

.contacto-card-icon-wa {
  background: rgba(37, 211, 102, 0.1) !important;
}

.contacto-card-wa:hover .contacto-card-icon-wa {
  background: #25d366 !important;
}

.contacto-card-icon-wa svg {
  stroke: #25d366 !important;
}

.contacto-card-wa:hover .contacto-card-icon-wa svg {
  stroke: var(--white) !important;
}

/* Horario */
.contacto-horario {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 18px 24px;
  background: var(--bg-soft);
  border-radius: 14px;
  border: 1px solid var(--border);
}

.contacto-horario svg {
  width: 22px;
  height: 22px;
  stroke: var(--cyan);
  flex-shrink: 0;
}

.contacto-horario strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.contacto-horario span {
  font-size: 0.82rem;
  color: var(--sub);
}

/* Right Form Column */
.contacto-form-card {
  background: var(--bg-dark);
  border-radius: 24px;
  padding: 48px 40px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 50px rgba(11, 26, 46, 0.1);
  position: relative;
  overflow: hidden;
}

.contacto-form-card::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.08) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  border-radius: 50%;
  pointer-events: none;
}

.contacto-form-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.contacto-form-subtitle {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 32px;
  line-height: 1.6;
}

/* Selector de tipo de proyecto (Residencial / Empresas / Cerraduras) */
.contacto-form-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.contacto-form-tab {
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.contacto-form-tab:hover {
  border-color: rgba(0, 168, 204, 0.4);
  color: var(--white);
}

.contacto-form-tab.active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--white);
}

.contacto-form-panel {
  display: none;
}

.contacto-form-panel.active {
  display: block;
  animation: modal-fade-in 0.2s ease;
}

/* Style Contact Form 7 inputs inside the dark card */
.contacto-form-card .wpcf7-form p {
  margin: 0;
}

.contacto-form-card .wpcf7-form label,
.contacto-fallback-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
}

.contacto-form-card .wpcf7-form input[type="text"],
.contacto-form-card .wpcf7-form input[type="email"],
.contacto-form-card .wpcf7-form input[type="tel"],
.contacto-form-card .wpcf7-form textarea,
.contacto-fallback-form input[type="text"],
.contacto-fallback-form input[type="email"],
.contacto-fallback-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--white);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  outline: none;
  margin-bottom: 20px;
}

.contacto-form-card .wpcf7-form input:focus,
.contacto-form-card .wpcf7-form textarea:focus,
.contacto-fallback-form input:focus,
.contacto-fallback-form textarea:focus {
  border-color: var(--cyan);
  background: rgba(0, 168, 204, 0.04);
  box-shadow: 0 0 0 3px rgba(0, 168, 204, 0.1);
}

.contacto-form-card .wpcf7-form input::placeholder,
.contacto-form-card .wpcf7-form textarea::placeholder,
.contacto-fallback-form input::placeholder,
.contacto-fallback-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.contacto-form-card .wpcf7-form textarea,
.contacto-fallback-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contacto-form-card .wpcf7-form select,
.contacto-form-card .wpcf7-form input[type="number"] {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--white);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  outline: none;
  margin-bottom: 20px;
}

.contacto-form-card .wpcf7-form select:focus,
.contacto-form-card .wpcf7-form input[type="number"]:focus {
  border-color: var(--cyan);
  background: rgba(0, 168, 204, 0.04);
  box-shadow: 0 0 0 3px rgba(0, 168, 204, 0.1);
}

.contacto-form-card .wpcf7-form select option {
  color: var(--text);
}

.contacto-form-card .wpcf7-form .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.contacto-form-card .wpcf7-form .wpcf7-list-item {
  margin: 0;
}

.contacto-form-card .wpcf7-form .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 7px;
  text-transform: none;
  font-weight: 500;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  margin-bottom: 0;
}

.contacto-form-card .wpcf7-form .wpcf7-list-item input[type="checkbox"] {
  accent-color: var(--cyan);
  width: 14px;
  height: 14px;
}

/* CF7 submit button */
.contacto-form-card .wpcf7-form input[type="submit"],
.contacto-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 28px;
  background: var(--cyan);
  color: var(--white);
  border: none;
  border-radius: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 20px rgba(0, 168, 204, 0.3);
  margin-top: 8px;
}

.contacto-form-card .wpcf7-form input[type="submit"]:hover,
.contacto-submit-btn:hover {
  background: var(--cyan-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 168, 204, 0.4);
}

.contacto-submit-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--white);
  transition: transform 0.3s;
}

.contacto-submit-btn:hover svg {
  transform: translateX(4px);
}

/* CF7 validation overrides */
.contacto-form-card .wpcf7-not-valid-tip {
  color: #f87171;
  font-size: 0.78rem;
  margin-top: -16px;
  margin-bottom: 16px;
  display: block;
}

.contacto-form-card .wpcf7-response-output {
  border-radius: 12px !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 14px 20px !important;
  margin: 16px 0 0 !important;
  font-size: 0.9rem !important;
}

/* Fallback form row */
.contacto-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── RESPONSIVIDAD CONTACTO ── */

@media (min-width: 1300px) {
  .contacto-body {
    padding-left: calc((100% - 1200px) / 2) !important;
    padding-right: calc((100% - 1200px) / 2) !important;
  }
}

@media (max-width: 1024px) {
  .contacto-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .contacto-info-desc {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .contacto-hero {
    height: 340px;
    padding-top: 100px;
  }

  .contacto-body {
    padding: 48px 5vw;
  }

  .contacto-form-card {
    padding: 32px 24px;
    border-radius: 20px;
  }

  .contacto-form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .contacto-card {
    padding: 16px 18px;
  }

  .contacto-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
}


/* ══════════════════════════════════════════
   PÁGINA ARQUITECTO SMART
   ══════════════════════════════════════════ */

.page-arq-main {
  background: var(--bg);
  min-height: 100vh;
}

/* ── Hero ── */
.arq-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 5vw 60px;
  overflow: hidden;
}

.arq-hero-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(160deg, rgba(11, 26, 46, 0.82), rgba(11, 26, 46, 0.92)), url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.arq-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 80%, rgba(0, 168, 204, 0.12), transparent 60%),
    radial-gradient(ellipse at 70% 20%, rgba(0, 168, 204, 0.06), transparent 50%);
  pointer-events: none;
}

.arq-hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.arq-hero-content .sec-tag {
  justify-content: center;
  margin-bottom: 20px;
  color: var(--cyan);
  background: rgba(0, 168, 204, 0.1);
  border: 1px solid rgba(0, 168, 204, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.arq-hero-title {
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  margin: 0 0 18px;
  letter-spacing: -0.03em;
}

.arq-hero-title em {
  font-style: normal;
  color: var(--cyan);
}

.arq-hero-subtitle {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto 32px;
}

.arq-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--cyan);
  color: var(--white);
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 20px rgba(0, 168, 204, 0.3);
}

.arq-hero-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s;
}

.arq-hero-btn:hover {
  background: var(--cyan-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 168, 204, 0.4);
}

.arq-hero-btn:hover svg {
  transform: translateX(4px);
}

/* ── Intro ── */
.arq-intro {
  padding: 80px 5vw;
}

.arq-intro-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.arq-intro-img-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.arq-intro-img-wrapper img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

.arq-intro-img-glow {
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.15), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.arq-intro-right .sec-tag {
  margin-bottom: 16px;
}

.arq-section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--bg-dark);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  line-height: 1.2;
}

.arq-section-title em {
  font-style: normal;
  color: var(--cyan);
}

.arq-section-title.text-center {
  text-align: center;
}

.arq-text {
  font-size: 1rem;
  color: var(--sub);
  line-height: 1.75;
  margin-bottom: 16px;
}

/* ── Benefits ── */
.arq-benefits {
  padding: 80px 5vw;
  background: var(--bg-soft);
}

.arq-benefits-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 48px;
}

.arq-benefits-header .sec-tag {
  justify-content: center;
  margin-bottom: 16px;
}

.arq-benefits-sub {
  font-size: 1.05rem;
  color: var(--sub);
  line-height: 1.6;
}

.arq-benefits-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.arq-benefit-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 28px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.arq-benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 168, 204, 0.08);
  border-color: var(--cyan-mid);
}

.arq-benefit-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--cyan-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.arq-benefit-card:hover .arq-benefit-icon {
  background: var(--cyan);
}

.arq-benefit-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--cyan);
  transition: stroke 0.3s;
}

.arq-benefit-card:hover .arq-benefit-icon svg {
  stroke: var(--white);
}

.arq-benefit-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--bg-dark);
  margin-bottom: 10px;
}

.arq-benefit-card p {
  font-size: 0.9rem;
  color: var(--sub);
  line-height: 1.65;
}

/* ── Vision Quote ── */
.arq-vision {
  padding: 80px 5vw;
  background: var(--bg-dark);
}

.arq-vision-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.arq-vision-quote {
  margin-bottom: 24px;
}

.arq-vision-quote svg {
  width: 40px;
  height: 40px;
  stroke: var(--cyan);
  opacity: 0.5;
}

.arq-vision-text {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.75;
  font-weight: 400;
}

.arq-vision-text em {
  font-style: normal;
  color: var(--cyan);
  font-weight: 700;
}

/* ── Socios Arquitectos ── */
.arq-socios {
  padding: 80px 5vw;
}

.arq-socios-header {
  text-align: center;
  margin-bottom: 48px;
}

.arq-socios-header .sec-tag {
  justify-content: center;
  margin-bottom: 16px;
}

.arq-socios-grid {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.arq-socio-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.arq-socio-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-mid);
  box-shadow: 0 8px 24px rgba(0, 168, 204, 0.06);
}

.arq-socio-logo {
  width: 100px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.arq-socio-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.arq-socio-name {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sub);
}

/* ── Únete (CTA + Form) ── */
.arq-unete {
  padding: 80px 5vw;
  background: var(--bg-soft);
}

.arq-unete-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: start;
}

.arq-unete-left .sec-tag {
  margin-bottom: 16px;
}

.arq-unete-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--bg-dark);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  line-height: 1.2;
}

.arq-unete-title em {
  font-style: normal;
  color: var(--cyan);
}

.arq-unete-desc {
  font-size: 1rem;
  color: var(--sub);
  line-height: 1.7;
  margin-bottom: 28px;
}

.arq-unete-perks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.arq-perk {
  display: flex;
  align-items: center;
  gap: 12px;
}

.arq-perk svg {
  width: 20px;
  height: 20px;
  stroke: var(--cyan);
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.arq-perk span {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
}

/* Form Card */
.arq-unete-form-card {
  background: var(--bg-dark);
  border-radius: 24px;
  padding: 44px 36px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 50px rgba(11, 26, 46, 0.1);
  position: relative;
  overflow: hidden;
}

.arq-unete-form-card::before {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.08) 0%, transparent 70%);
  top: -100px;
  right: -80px;
  border-radius: 50%;
  pointer-events: none;
}

.arq-unete-form-card h3 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.arq-unete-form-card p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 28px;
  line-height: 1.5;
}

.arq-form label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 7px;
}

.arq-form input,
.arq-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--white);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  outline: none;
  margin-bottom: 18px;
}

.arq-form input:focus,
.arq-form textarea:focus {
  border-color: var(--cyan);
  background: rgba(0, 168, 204, 0.04);
  box-shadow: 0 0 0 3px rgba(0, 168, 204, 0.1);
}

.arq-form input::placeholder,
.arq-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.arq-form textarea {
  resize: vertical;
  min-height: 110px;
}

.arq-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.arq-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 28px;
  background: var(--cyan);
  color: var(--white);
  border: none;
  border-radius: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 20px rgba(0, 168, 204, 0.3);
  margin-top: 6px;
}

.arq-submit-btn:hover {
  background: var(--cyan-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 168, 204, 0.4);
}

.arq-submit-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--white);
  transition: transform 0.3s;
}

.arq-submit-btn:hover svg {
  transform: translateX(4px);
}

/* ── RESPONSIVIDAD ARQUITECTO SMART ── */

@media (max-width: 1024px) {
  .arq-intro-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .arq-intro-img-wrapper img {
    height: 320px;
  }

  .arq-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .arq-unete-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 768px) {
  .arq-hero {
    min-height: 380px;
    padding: 120px 5vw 48px;
  }

  .arq-intro,
  .arq-benefits,
  .arq-socios,
  .arq-unete {
    padding: 56px 5vw;
  }

  .arq-benefits-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .arq-socios-grid {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  .arq-unete-form-card {
    padding: 32px 24px;
    border-radius: 20px;
  }

  .arq-form-row {
    grid-template-columns: 1fr;
  }

  .arq-vision {
    padding: 56px 5vw;
  }
}


/* ══════════════════════════════════════════
   PÁGINA PROYECTOS INMOBILIARIOS
   ══════════════════════════════════════════ */

.page-proy-main {
  background: var(--bg);
  min-height: 100vh;
}

/* ── Hero ── */
.proy-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 5vw 60px;
  overflow: hidden;
}

.proy-hero-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(160deg, rgba(11, 26, 46, 0.78), rgba(11, 26, 46, 0.92)), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.proy-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 90%, rgba(0, 168, 204, 0.14), transparent 55%);
  pointer-events: none;
}

.proy-hero-content {
  position: relative;
  z-index: 2;
  max-width: 750px;
}

.proy-hero-content .sec-tag {
  justify-content: center;
  margin-bottom: 20px;
  color: var(--cyan);
  background: rgba(0, 168, 204, 0.1);
  border: 1px solid rgba(0, 168, 204, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.proy-hero-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  margin: 0 0 18px;
  letter-spacing: -0.03em;
}

.proy-hero-title em {
  font-style: normal;
  color: var(--cyan);
}

.proy-hero-subtitle {
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}

/* ── Intro ── */
.proy-intro {
  padding: 90px 5vw;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--white) 45%);
}

.proy-intro-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.proy-intro-left {
  max-width: 480px;
}

.proy-section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--bg-dark);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  line-height: 1.2;
}

.proy-section-title em {
  font-style: normal;
  color: var(--cyan);
}

.proy-section-title.text-center {
  text-align: center;
}

.proy-intro-text {
  font-size: 1.05rem;
  color: var(--sub);
  line-height: 1.7;
}

/* Stat highlight combined with Vivir Smart intro */
.proy-intro-stat {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
  padding: 22px 26px;
  background: linear-gradient(135deg, var(--bg-dark) 0%, #132c48 100%);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(11, 26, 46, 0.18);
}

.proy-intro-stat::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -40px;
  width: 160px;
  height: 160px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(0, 168, 204, 0.35) 0%, rgba(0, 168, 204, 0) 70%);
  pointer-events: none;
}

.proy-intro-stat-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(0, 168, 204, 0.14);
  border: 1px solid rgba(0, 168, 204, 0.3);
}

.proy-intro-stat-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--cyan);
}

.proy-intro-stat-body {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}

.proy-intro-stat-num-wrap {
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
}

.proy-intro-stat-number {
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff, var(--cyan));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.proy-intro-stat-suffix {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--cyan);
}

.proy-intro-stat-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: 20px;
}

/* Product cards — immersive square tiles */
.proy-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  width: 100%;
  padding: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 28px;
}

.proy-product-card {
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 18px rgba(11, 26, 46, 0.06);
}

.proy-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 168, 204, 0.16);
}

.proy-product-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-dark);
}

.proy-product-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.proy-product-card:hover .proy-product-media img {
  transform: scale(1.08);
}

.proy-product-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 26, 46, 0) 45%, rgba(11, 26, 46, 0.82) 100%);
  pointer-events: none;
}

.proy-product-icon {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(11, 26, 46, 0.15);
}

.proy-product-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--cyan-a11y);
  color: var(--cyan-a11y);
}

.proy-product-label {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}

/* ── Blocks Section ── */
.proy-block {
  padding: 100px 5vw;
}

.proy-block-light {
  background: var(--bg-soft);
}

.proy-block-dark {
  background: var(--bg-dark);
}

.proy-block-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.proy-block-reverse {
  flex-direction: row-reverse;
}

.proy-block-text {
  flex: 1.1;
}

.proy-block-step {
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--cyan-pale);
  margin-bottom: 12px;
  display: inline-block;
  letter-spacing: -0.03em;
}

.proy-block-dark .proy-block-step {
  color: rgba(0, 168, 204, 0.15);
}

.proy-block-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--bg-dark);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  line-height: 1.25;
}

.proy-block-dark .proy-block-title {
  color: var(--white);
}

.proy-block-title em {
  font-style: normal;
  color: var(--cyan);
}

.proy-block-text p {
  font-size: 0.95rem;
  color: var(--sub);
  line-height: 1.7;
  margin-bottom: 36px;
}

.proy-block-dark .proy-block-text p {
  color: rgba(255, 255, 255, 0.7);
}

.proy-block-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.proy-block-benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.proy-block-benefit-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--cyan-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.proy-block-dark .proy-block-benefit-icon {
  background: rgba(0, 168, 204, 0.15);
}

.proy-block-benefit-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--cyan);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.proy-block-benefit strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--bg-dark);
  margin-bottom: 4px;
}

.proy-block-dark .proy-block-benefit strong {
  color: var(--white);
}

.proy-block-benefit span {
  font-size: 0.82rem;
  color: var(--sub);
  line-height: 1.45;
}

.proy-block-dark .proy-block-benefit span {
  color: rgba(255, 255, 255, 0.55);
}

.proy-block-visual {
  flex: 0.9;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(11, 26, 46, 0.08);
}

.proy-block-dark .proy-block-visual {
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}

.proy-block-visual img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 24px;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.proy-block-visual:hover img {
  transform: scale(1.04);
}

.proy-block-visual-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.2) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* ── Gallery ── */
.proy-gallery {
  padding: 80px 5vw;
  background: var(--bg-dark);
}

.proy-gallery-header {
  text-align: center;
  margin-bottom: 48px;
}

.proy-gallery-header .sec-tag {
  justify-content: center;
  margin-bottom: 16px;
  color: var(--cyan);
  background: rgba(0, 168, 204, 0.1);
  border: 1px solid rgba(0, 168, 204, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.proy-gallery .proy-section-title {
  color: var(--white);
}

.proy-gallery-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

.proy-gallery-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── Autoridad (chips de confianza, dentro de Vivir Smart) ── */
.proy-intro-segments-label {
  margin: 28px 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sub);
}

.proy-intro-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.proy-authority-segment {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  padding: 8px 16px 8px 8px;
  border-radius: 100px;
  box-shadow: 0 6px 18px rgba(11, 26, 46, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.proy-authority-segment:hover {
  transform: translateY(-3px);
  border-color: var(--cyan-mid);
  box-shadow: 0 10px 26px rgba(0, 168, 204, 0.12);
}

.proy-authority-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cyan-pale);
}

.proy-authority-segment svg {
  width: 15px;
  height: 15px;
  stroke: var(--cyan-a11y);
  flex-shrink: 0;
}

.proy-authority-segment span {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--bg-dark);
  white-space: nowrap;
}

.proy-project-card {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.proy-project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(0, 168, 204, 0.2);
}

.proy-project-img {
  position: relative;
  height: 340px;
  overflow: hidden;
}

.proy-project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.proy-project-card:hover .proy-project-img img {
  transform: scale(1.06);
}

.proy-project-overlay {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}

.proy-project-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bg-dark);
}

.proy-badge-red {
  background: rgba(239, 68, 68, 0.9);
  color: var(--white);
}

.proy-badge-green {
  background: rgba(34, 197, 94, 0.9);
  color: var(--white);
}

.proy-badge-orange {
  background: rgba(249, 115, 22, 0.9);
  color: var(--white);
}

.proy-badge-purple {
  background: rgba(168, 85, 247, 0.9);
  color: var(--white);
}

.proy-badge-blue {
  background: rgba(59, 130, 246, 0.9);
  color: var(--white);
}

.proy-badge-gray {
  background: rgba(107, 114, 128, 0.9);
  color: var(--white);
}

.proy-project-info {
  padding: 18px 20px;
}

.proy-project-info h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.proy-project-info span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.proy-project-info span svg {
  width: 13px;
  height: 13px;
  stroke: var(--cyan);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.proy-project-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.proy-project-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid rgba(0, 168, 204, 0.4);
  border-radius: 999px;
  color: var(--cyan);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.proy-project-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.proy-project-btn:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #fff;
}

.proy-project-btn:hover svg {
  transform: translateX(3px);
}

.proy-project-img--clickable {
  cursor: pointer;
}

.proy-project-zoom {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 12, 22, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.proy-project-img--clickable:hover .proy-project-zoom,
.proy-project-img--clickable:focus-visible .proy-project-zoom {
  opacity: 1;
}

.proy-project-zoom svg {
  width: 34px;
  height: 34px;
  padding: 9px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--bg-dark);
}

/* ── MODAL "VER FOTO" (lightbox) ── */
.proy-photo-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.proy-photo-modal.is-open {
  display: flex;
}

.proy-photo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 12, 22, 0.94);
  backdrop-filter: blur(12px);
  cursor: pointer;
  animation: modal-fade-in 0.25s ease;
}

.proy-photo-box {
  position: relative;
  z-index: 2;
  max-width: 92vw;
  max-height: 88vh;
  animation: modal-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.proy-photo-img {
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.proy-photo-close {
  position: absolute;
  top: -18px;
  right: -18px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  transition: all 0.2s;
}

.proy-photo-close:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #fff;
}

.proy-photo-close svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 480px) {
  .proy-photo-close {
    top: -44px;
    right: 0;
  }
}

/* ── MODAL "VER SOLUCIONES" ── */
.proy-solutions-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.proy-solutions-modal.is-open {
  display: flex;
}

.proy-solutions-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 12, 22, 0.94);
  backdrop-filter: blur(12px);
  cursor: pointer;
  animation: modal-fade-in 0.25s ease;
}

.proy-solutions-box {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 820px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 32px;
  animation: modal-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.proy-solutions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.proy-solutions-title {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  text-transform: uppercase;
}

.proy-solutions-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  transition: all 0.2s;
}

.proy-solutions-close:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #fff;
}

.proy-solutions-close svg {
  width: 16px;
  height: 16px;
}

.proy-solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 16px;
}

.proy-solutions-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.proy-solutions-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(0, 168, 204, 0.1);
  color: var(--cyan);
}

.proy-solutions-icon svg {
  width: 24px;
  height: 24px;
}

.proy-solutions-item span {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
}

@media (max-width: 768px) {
  .proy-solutions-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 12px;
  }

  .proy-solutions-box {
    padding: 24px 20px;
  }
}

@media (max-width: 480px) {
  .proy-solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── RESPONSIVIDAD PROYECTOS ── */

@media (max-width: 1024px) {
  .proy-intro-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .proy-intro-left {
    max-width: 560px;
    margin: 0 auto;
  }

  .proy-products {
    max-width: 480px;
    margin: 0 auto;
    grid-template-columns: repeat(2, 1fr);
  }

  .proy-block {
    padding: 70px 5vw;
  }

  .proy-block-container {
    flex-direction: column !important;
    gap: 48px;
  }

  .proy-block-text {
    width: 100%;
  }

  .proy-block-visual {
    width: 100%;
  }

  .proy-block-visual img {
    height: 360px;
  }

  .proy-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .proy-hero {
    min-height: 360px;
    padding: 120px 5vw 48px;
  }

  .proy-intro,
  .proy-gallery {
    padding: 56px 5vw;
  }

  .proy-products {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .proy-intro-stat {
    flex-wrap: wrap;
    gap: 12px;
  }

  .proy-intro-stat-body {
    flex-wrap: wrap;
    gap: 12px;
  }

  .proy-intro-stat-label {
    border-left: none;
    padding-left: 0;
  }

  .proy-block-benefits {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .proy-gallery-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   PÁGINAS DE DETALLE DE SOLUCIÓN (SOLUCIONES HIJAS)
   ========================================================================== */

.page-solucion-detail-main {
  background: #071322;
  min-height: 100vh;
  color: var(--white);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Solucion Detail Hero */
.solucion-detail-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 5vw 80px;
  overflow: hidden;
}

.solucion-detail-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  filter: blur(2px) brightness(0.4);
  z-index: 0;
}

.solucion-detail-hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(7, 19, 34, 0.4) 0%, #071322 90%);
  z-index: 1;
}

.solucion-detail-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

/* Breadcrumbs / Tag inside Hero */
.solucion-detail-hero .sec-tag {
  justify-content: center;
  margin-bottom: 24px;
  color: var(--cyan);
  background: rgba(0, 168, 204, 0.1);
  border: 1px solid rgba(0, 168, 204, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.solucion-detail-hero .sec-tag a {
  color: var(--cyan);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.solucion-detail-hero .sec-tag a:hover {
  opacity: 0.8;
}

.solucion-detail-hero .sec-tag .bread-sep {
  opacity: 0.5;
  margin: 0 4px;
}

.solucion-detail-title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.solucion-detail-title em {
  font-style: normal;
  color: var(--cyan);
  background: linear-gradient(135deg, var(--cyan) 30%, #a6f6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.solucion-detail-subtitle {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Content & Layout */
.solucion-detail-content {
  padding: 100px 5vw;
  background: #071322;
  position: relative;
}

.solucion-detail-container {
  max-width: 1200px;
  margin: 0 auto;
}

.solucion-detail-intro-block {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 120px;
}

.solucion-detail-intro-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.solucion-detail-intro-left .sec-tag {
  color: var(--cyan);
  background: rgba(0, 168, 204, 0.1);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.75rem;
  border: 1px solid rgba(0, 168, 204, 0.15);
  margin-bottom: 16px;
}

.solucion-detail-section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  line-height: 1.2;
}

.solucion-detail-section-title em {
  font-style: normal;
  color: var(--cyan);
  background: linear-gradient(135deg, var(--cyan) 30%, #a6f6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.solucion-detail-text {
  font-size: 1.1rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.75);
}

.solucion-detail-img-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  aspect-ratio: 16/11;
}

.solucion-detail-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.solucion-detail-img-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.25) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Features Grid */
.solucion-detail-features-section {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 100px;
}

.solucion-detail-features-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px;
}

.solucion-detail-features-header .sec-tag {
  color: var(--cyan);
  background: rgba(0, 168, 204, 0.1);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.75rem;
  border: 1px solid rgba(0, 168, 204, 0.15);
  margin-bottom: 16px;
}

.solucion-detail-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
}

.solucion-detail-feature-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 40px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.solucion-detail-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.solucion-detail-feature-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(0, 168, 204, 0.25);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.solucion-detail-feature-card:hover::before {
  opacity: 1;
}

.solucion-detail-feature-icon {
  width: 48px;
  height: 48px;
  background: rgba(0, 168, 204, 0.1);
  color: var(--cyan);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.solucion-detail-feature-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
}

.solucion-detail-feature-card h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--white);
}

.solucion-detail-feature-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}

/* Fallback default page template styles */
.page-default-main {
  background: var(--bg-soft);
  min-height: 100vh;
  padding-bottom: 80px;
}

.page-default-hero {
  background: var(--bg-dark);
  color: var(--white);
  padding: 140px 5vw 60px;
  text-align: center;
}

.page-default-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.page-default-hero .sec-tag {
  justify-content: center;
  color: var(--cyan);
  background: rgba(0, 168, 204, 0.1);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.75rem;
  border: 1px solid rgba(0, 168, 204, 0.15);
  margin-bottom: 16px;
}

.page-default-hero .sec-tag a {
  color: var(--cyan);
  text-decoration: none;
}

.page-default-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
}

.page-default-content {
  padding: 60px 5vw;
}

.page-default-container {
  max-width: 800px;
  margin: 0 auto;
  background: var(--white);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  color: var(--text);
  line-height: 1.6;
}

@media (max-width: 991px) {
  .solucion-detail-intro-block {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ==========================================================================
   PÁGINA SOLUCIONES SMART — Rediseño Premium
   ========================================================================== */

/* ── Sec-tag reutilizado en fondo oscuro ── */
.hs-sec-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
  background: rgba(0, 168, 204, 0.1);
  border: 1px solid rgba(0, 168, 204, 0.2);
  padding: 5px 13px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}

.hs-sec-tag svg {
  width: 12px;
  height: 12px;
  stroke: var(--cyan);
  fill: none;
}

.hs-sec-tag-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
  background: rgba(0, 168, 204, 0.12);
  border: 1px solid rgba(0, 168, 204, 0.25);
  padding: 5px 13px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}

.hs-sec-tag-dark svg {
  width: 12px;
  height: 12px;
  stroke: var(--cyan);
  fill: none;
}

/* ── Títulos de sección ── */
.hs-section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: var(--bg-dark);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin-bottom: 20px;
}

.hs-section-title em {
  font-style: normal;
  color: var(--cyan);
}

.hs-section-title.text-center {
  text-align: center;
}

/* ── Sección genérica de detalle (usada por template-parts/complicaciones y page-soluciones-smart) ── */
.hs-detail-section {
  background: #ffffff !important;
  padding: 100px 5vw;
}

@media (max-width: 768px) {
  .hs-detail-section {
    padding: 60px 20px;
  }
}

/* ── BLOQUE DE INSTALACIÓN / COMPATIBILIDAD (template-parts/complicaciones) ── */
.hs-install-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.hs-install-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px 16px;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--border);
}

.hs-install-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--cyan-pale);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hs-install-icon svg {
  width: 24px;
  height: 24px;
}

.hs-install-card strong {
  font-size: 0.95rem;
  color: var(--text);
}

.hs-install-card span {
  font-size: 0.82rem;
  color: var(--sub);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .hs-install-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hs-section-title-dark {
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin-bottom: 20px;
}

.hs-section-title-dark em {
  font-style: normal;
  color: var(--cyan);
  background: linear-gradient(135deg, var(--cyan) 30%, #a6f6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hs-section-title-dark.text-center {
  text-align: center;
}

.hs-section-sub {
  font-size: 1.05rem;
  color: var(--sub);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.hs-section-header {
  text-align: center;
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── INTRO SPLIT ── */
.hs-intro {
  padding: 100px 5vw;
  background: var(--bg);
}

.hs-intro-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 80px;
  align-items: center;
}

.hs-intro-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hs-text {
  font-size: 1rem;
  color: var(--sub);
  line-height: 1.75;
  margin-bottom: 18px;
}

/* Stats mini-row */
.hs-intro-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 36px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 28px;
  width: 100%;
}

.hs-intro-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hs-intro-stat-div {
  width: 1px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
}

.hs-intro-stat-num {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--cyan);
  line-height: 1;
  letter-spacing: -0.03em;
}

.hs-intro-stat-num span {
  font-size: 1.1rem;
  font-weight: 700;
}

.hs-intro-stat-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 5px;
}

/* Image right side */
.hs-intro-right {
  position: relative;
}

.hs-intro-img-wrapper {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(11, 26, 46, 0.08);
  border: 1px solid var(--border);
}

.hs-intro-img-wrapper img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hs-intro-img-wrapper:hover img {
  transform: scale(1.04);
}

/* Floating badge */
.hs-intro-img-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 8px 24px rgba(11, 26, 46, 0.12);
}

.hs-badge-icon {
  width: 36px;
  height: 36px;
  background: var(--cyan);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hs-badge-icon svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5;
}

.hs-intro-img-badge strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--bg-dark);
  margin-bottom: 2px;
}

.hs-intro-img-badge span {
  font-size: 0.75rem;
  color: var(--sub);
}

/* ── BENTO SECTION ── */
.hs-bento-section {
  padding: 100px 5vw;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}

.hs-bento-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Row con 2 tarjetas grandes */
.hs-bento-row {
  display: grid;
  gap: 24px;
  margin-bottom: 24px;
}

.hs-bento-row-2 {
  grid-template-columns: 1fr 1fr;
}

.hs-bento-row-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Bento card con imagen */
.hs-bento-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(11, 26, 46, 0.04);
}

.hs-bento-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(11, 26, 46, 0.1);
  border-color: var(--cyan-mid);
}

.hs-bento-card-img {
  position: relative;
  overflow: hidden;
  height: 220px;
  flex-shrink: 0;
}

.hs-bento-card-img-sm {
  height: 170px;
}

.hs-bento-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hs-bento-card:hover .hs-bento-card-img img {
  transform: scale(1.06);
}

.hs-bento-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(11, 26, 46, 0.45) 100%);
  pointer-events: none;
}

.hs-bento-card-body {
  padding: 28px 30px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hs-bento-icon {
  width: 46px;
  height: 46px;
  background: var(--cyan-pale);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: background 0.3s, transform 0.3s;
  flex-shrink: 0;
}

.hs-bento-card:hover .hs-bento-icon {
  background: var(--cyan);
  transform: scale(1.05);
}

.hs-bento-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--cyan);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s;
}

.hs-bento-card:hover .hs-bento-icon svg {
  stroke: var(--white);
}

.hs-bento-card-body h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--bg-dark);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.hs-bento-card-body p {
  font-size: 0.9rem;
  color: var(--sub);
  line-height: 1.65;
  flex: 1;
}

/* ── MÓDULOS DARK SECTION ── */
.hs-modules-section {
  padding: 100px 5vw;
  background: #071322;
  position: relative;
  overflow: hidden;
}

.hs-modules-section::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hs-modules-section::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.hs-modules-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hs-modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.hs-module-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 32px 26px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.hs-module-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.hs-module-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 168, 204, 0.3);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.hs-module-card:hover::before {
  opacity: 1;
}

.hs-module-icon {
  width: 48px;
  height: 48px;
  background: rgba(0, 168, 204, 0.1);
  border: 1px solid rgba(0, 168, 204, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.hs-module-card:hover .hs-module-icon {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 6px 20px rgba(0, 168, 204, 0.3);
}

.hs-module-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--cyan);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: stroke 0.3s;
}

.hs-module-card:hover .hs-module-icon svg {
  stroke: var(--white);
}

.hs-module-card h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.hs-module-card p {
  font-size: 0.87rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

/* ── CTA BANNER ── */
.hs-cta-banner {
  position: relative;
  padding: 100px 5vw;
  text-align: center;
  overflow: hidden;
  background: var(--bg-dark);
}

.hs-cta-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 168, 204, 0.12) 0%, transparent 65%);
  pointer-events: none;
}

.hs-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.hs-cta-inner h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 18px;
}

.hs-cta-inner h2 em {
  font-style: normal;
  color: var(--cyan);
  background: linear-gradient(135deg, var(--cyan) 30%, #a6f6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hs-cta-inner p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  margin-bottom: 36px;
}

.hs-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  background: var(--cyan);
  color: var(--white);
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0, 168, 204, 0.3);
}

.hs-cta-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s;
}

.hs-cta-btn:hover {
  background: var(--cyan-hover);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0, 168, 204, 0.45);
}

.hs-cta-btn:hover svg {
  transform: translateX(4px);
}

/* ── RESPONSIVIDAD SOLUCIONES SMART ── */

@media (max-width: 1200px) {
  .hs-modules-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .hs-intro-container {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }

  .hs-intro-left {
    align-items: center;
  }

  .hs-intro-img-wrapper img {
    height: 360px;
  }

  .hs-intro-stats {
    max-width: 480px;
  }

  .hs-bento-row-2 {
    grid-template-columns: 1fr;
  }

  .hs-bento-row-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {

  .hs-intro,
  .hs-bento-section,
  .hs-modules-section,
  .hs-cta-banner {
    padding: 64px 5vw;
  }

  .hs-modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hs-bento-row-3 {
    grid-template-columns: 1fr;
  }

  .hs-intro-img-wrapper img {
    height: 280px;
  }
}

@media (max-width: 540px) {
  .hs-modules-grid {
    grid-template-columns: 1fr;
  }

  .hs-intro-stats {
    flex-direction: column;
    gap: 16px;
  }

  .hs-intro-stat-div {
    width: 40px;
    height: 1px;
  }

  .hs-bento-row-2 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PÁGINA CERRADURAS DIGITALES
   ========================================================================== */

/* ── Catalog section ── */
.cd-catalog {
  padding: 80px 5vw 100px;
  background: var(--bg);
}

.cd-catalog-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Brand Header ── */
.cd-brand-header {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--border);
}

.cd-brand-header--xiaomi {
  margin-top: 80px;
}

.cd-brand-logo {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--bg-dark);
  letter-spacing: -0.03em;
  line-height: 1;
  min-width: 100px;
}

.cd-brand-logo--xiaomi {
  color: #ff6900;
}

.cd-brand-desc {
  font-size: 0.9rem;
  color: var(--sub);
  line-height: 1.5;
  flex: 1;
  min-width: 200px;
}

.cd-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--cyan-pale);
  color: var(--cyan);
  border: 1px solid var(--cyan-mid);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.cd-brand-badge svg {
  width: 14px;
  height: 14px;
  stroke: var(--cyan);
  flex-shrink: 0;
}

.cd-brand-badge--xiaomi {
  background: rgba(255, 105, 0, 0.08);
  color: #cc5500;
  border-color: rgba(255, 105, 0, 0.25);
}

.cd-brand-badge--xiaomi svg {
  stroke: #cc5500;
}

/* ── Products Grid ── */
.cd-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── Product Card ── */
.cd-product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(11, 26, 46, 0.04);
}

.cd-product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(11, 26, 46, 0.1);
  border-color: var(--cyan-mid);
}

.cd-product-card--xiaomi:hover {
  border-color: rgba(255, 105, 0, 0.4);
}

/* Product image area */
.cd-product-img-wrap {
  position: relative;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.cd-product-img-wrap img {
  max-height: 160px;
  max-width: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.12));
}

.cd-product-card:hover .cd-product-img-wrap img {
  transform: scale(1.06) translateY(-4px);
}

/* Badge on product image */
.cd-product-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cd-badge--silver {
  background: rgba(11, 26, 46, 0.08);
  color: var(--sub);
  border: 1px solid var(--border);
}

.cd-badge--cyan {
  background: rgba(0, 168, 204, 0.1);
  color: var(--cyan);
  border: 1px solid rgba(0, 168, 204, 0.25);
}

.cd-badge--green {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.cd-badge--orange {
  background: rgba(255, 105, 0, 0.08);
  color: #cc5500;
  border: 1px solid rgba(255, 105, 0, 0.2);
}

/* Product info */
.cd-product-info {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cd-product-brand {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyan);
  margin-bottom: 6px;
  display: block;
}

.cd-product-brand--xiaomi {
  color: #cc5500;
}

.cd-product-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--bg-dark);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Feature pills */
.cd-product-features {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  flex: 1;
}

.cd-product-features li {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--sub);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}

/* CTA button */
.cd-product-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--cyan);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 168, 204, 0.25);
  margin-top: auto;
}

.cd-product-btn svg {
  width: 15px;
  height: 15px;
  transition: transform 0.3s;
}

.cd-product-btn:hover {
  background: var(--cyan-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 168, 204, 0.38);
}

.cd-product-btn:hover svg {
  transform: translateX(3px);
}

.cd-product-btn--xiaomi {
  background: #ff6900;
  box-shadow: 0 4px 14px rgba(255, 105, 0, 0.25);
}

.cd-product-btn--xiaomi:hover {
  background: #e05f00;
  box-shadow: 0 8px 22px rgba(255, 105, 0, 0.38);
}

/* ── PRODUCTOS: FILTRO POR MARCA + SLIDER ── */

.cd-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.cd-filter-tab {
  padding: 8px 20px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
}

.cd-filter-tab:hover {
  border-color: var(--cyan-mid);
  color: var(--cyan);
}

.cd-filter-tab.active {
  background: var(--cyan);
  color: var(--white);
  border-color: var(--cyan);
}

.cd-slider-container {
  position: relative;
  width: 100%;
}

.cd-slider-track {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  padding: 10px 0 20px;
}

.cd-slider-track::-webkit-scrollbar {
  display: none;
}

.cd-slider-item {
  flex-shrink: 0;
  width: calc((100% - 40px) / 3);
  scroll-snap-align: start;
}

.cd-slider-item.cd-hidden {
  display: none;
}

.cd-slider-arrow {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border);
  color: var(--text);
  justify-content: center;
  align-items: center;
  z-index: 10;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease, opacity 0.3s ease;
  box-shadow: 0 4px 12px rgba(11, 26, 46, 0.08);
}

.cd-slider-arrow:hover {
  background: var(--white);
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 8px 20px rgba(0, 168, 204, 0.15);
  transform: translateY(-50%) scale(1.05);
}

.cd-slider-prev {
  left: -24px;
}

.cd-slider-next {
  right: -24px;
}

.cd-slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  width: 100%;
}

.cd-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(15, 29, 46, 0.15);
  border: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  padding: 0;
}

.cd-slider-dot.active {
  background: var(--cyan);
  width: 22px;
  border-radius: 4px;
}

@media (min-width: 1025px) {
  .cd-slider-track {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .cd-slider-arrow,
  .cd-slider-dots {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .cd-slider-item {
    width: calc((100% - 20px) / 2);
  }
}

@media (max-width: 768px) {
  .cd-slider-arrow {
    display: none !important;
  }

  .cd-slider-track {
    gap: 16px;
  }

  .cd-slider-item {
    width: 85vw;
    max-width: 380px;
    scroll-margin-left: 5vw;
  }
}

/* ── CERRADURAS — Spotlight (Tecnología y seguridad al alcance de tu mano) ── */
.cd-spotlight {
  padding: 100px 5vw;
  background: #071322;
  overflow: hidden;
}

.cd-spotlight-container {
  max-width: 1200px;
  margin: 0 auto;
}

.cd-spotlight-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto 64px;
}

.cd-spotlight-grid {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 260px) 1fr;
  align-items: center;
  gap: 32px;
}

.cd-spotlight-col {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.cd-spotlight-col--left {
  align-items: flex-end;
  text-align: right;
}

.cd-spotlight-col--right {
  align-items: flex-start;
  text-align: left;
}

.cd-spot-feature {
  max-width: 300px;
  transition: transform .35s ease;
}

.cd-spotlight-col--left .cd-spot-feature { transition-delay: .05s; }
.cd-spotlight-col--right .cd-spot-feature:nth-child(1) { transition-delay: .12s; }
.cd-spotlight-col--right .cd-spot-feature:nth-child(2) { transition-delay: .18s; }

.cd-spot-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
  background: rgba(0, 168, 204, 0.1);
  border: 1px solid rgba(0, 168, 204, 0.15);
  margin-bottom: 14px;
  transition: background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
}

.cd-spotlight-col--left .cd-spot-icon { margin-left: auto; }

.cd-spot-icon svg {
  width: 22px;
  height: 22px;
}

.cd-spot-feature h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 8px;
  transition: color .3s ease;
}

.cd-spot-feature p {
  font-size: .88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.cd-spot-feature.is-active .cd-spot-icon {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 168, 204, 0.3);
}

.cd-spot-feature.is-active h4 {
  color: var(--cyan);
}

/* ── Dispositivo central ── */
.cd-spotlight-device {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}

.cd-spot-lock {
  display: block;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  filter: drop-shadow(0 24px 40px rgba(11, 26, 46, 0.25));
}

.cd-lock-led {
  animation: cd-led-pulse 3.2s ease-in-out infinite;
}

@keyframes cd-led-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* ── Animaciones de la ilustración según el punto activo ── */
.cd-shield-ring {
  opacity: 0;
  transform-origin: center;
}

.cd-spotlight-device[data-active="secure"] .cd-shield-ring {
  animation: cd-shield-pulse 1.6s ease-in-out infinite;
}

@keyframes cd-shield-pulse {
  0% { opacity: 0; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.008); }
  100% { opacity: 0; transform: scale(1); }
}

.cd-cam-ring {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}

.cd-spotlight-device[data-active="connect"] .cd-cam-ring {
  animation: cd-cam-pulse 1.8s ease-out infinite;
}

.cd-cam-rings .cd-cam-ring:nth-child(2) {
  animation-delay: .35s;
}

@keyframes cd-cam-pulse {
  0% { opacity: .8; transform: scale(0.5); }
  85%, 100% { opacity: 0; transform: scale(2.2); }
}

.cd-key {
  transform-box: fill-box;
  transform-origin: center;
}

.cd-spotlight-device[data-active="keypad"] .cd-key {
  animation: cd-key-flash 2.4s ease-in-out infinite;
  animation-delay: calc(var(--k, 0) * 0.12s);
}

@keyframes cd-key-flash {
  0%, 92%, 100% { fill: rgba(255, 255, 255, 0.05); transform: scale(1); }
  4% { fill: rgba(0, 168, 204, 0.4); transform: scale(1.08); }
}

.cd-finger-ring {
  transform-box: fill-box;
  transform-origin: center;
}

.cd-spotlight-device[data-active="finger"] .cd-finger-ring {
  animation: cd-finger-scan 1.5s ease-out infinite;
}

.cd-finger-rings .cd-finger-ring:nth-child(1) { animation-delay: 0s; }
.cd-finger-rings .cd-finger-ring:nth-child(2) { animation-delay: .15s; }
.cd-finger-rings .cd-finger-ring:nth-child(3) { animation-delay: .3s; }

@keyframes cd-finger-scan {
  0% { opacity: .35; stroke-width: 1.5; }
  45% { opacity: 1; stroke-width: 2.75; }
  100% { opacity: .35; stroke-width: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-lock-led,
  .cd-shield-ring,
  .cd-cam-ring,
  .cd-key,
  .cd-finger-ring {
    animation: none !important;
  }
}

@media (max-width: 900px) {
  .cd-spotlight-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .cd-spotlight-device {
    order: -1;
    margin-bottom: 40px;
  }

  .cd-spotlight-col,
  .cd-spotlight-col--left,
  .cd-spotlight-col--right {
    align-items: center;
    text-align: center;
    gap: 32px;
  }

  .cd-spot-feature {
    max-width: 420px;
  }

  .cd-spotlight-col--left .cd-spot-icon {
    margin-left: auto;
    margin-right: auto;
  }
}

/* En pantallas de celular las 4 tarjetas pasan a una grilla 2x2 con
   la ilustración arriba, para no depender de un solo listado largo. */
@media (max-width: 640px) {
  .cd-spotlight-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 16px;
    column-gap: 12px;
  }

  .cd-spotlight-col {
    display: contents;
  }

  .cd-spotlight-device {
    grid-column: 1 / -1;
    margin-bottom: 28px;
  }

  .cd-spot-lock {
    max-width: 160px;
  }

  .cd-spot-feature,
  .cd-spotlight-col--left .cd-spot-feature {
    max-width: none;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px 14px;
  }

  .cd-spot-feature h4 {
    font-size: .92rem;
  }

  .cd-spot-feature p {
    font-size: .78rem;
    line-height: 1.5;
  }

  .cd-spotlight-col--left .cd-spot-icon,
  .cd-spot-icon {
    margin: 0 auto 10px;
  }
}

/* ── ACCESS METHODS — dark section ── */
.cd-access-section {
  padding: 100px 5vw;
  background: #071322;
  position: relative;
  overflow: hidden;
}

.cd-access-section::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -180px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Tecnología Integrada: sección clara, en contraste con la oscura de arriba ── */
.cd-tech-section {
  padding: 100px 5vw;
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
}

.cd-tech-sub {
  font-size: 1.05rem;
  color: var(--sub);
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.65;
}

.cd-tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 56px;
}

.cd-tech-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 26px;
  box-shadow: 0 6px 18px rgba(11, 26, 46, 0.03);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cd-tech-card:hover {
  transform: translateY(-6px);
  border-color: var(--cyan-mid);
  box-shadow: 0 16px 36px rgba(11, 26, 46, 0.08);
}

.cd-tech-icon {
  width: 52px;
  height: 52px;
  background: var(--cyan-pale);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.cd-tech-card:hover .cd-tech-icon {
  background: var(--cyan);
}

.cd-tech-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--cyan);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s;
}

.cd-tech-card:hover .cd-tech-icon svg {
  stroke: var(--white);
}

.cd-tech-card h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--bg-dark);
  margin-bottom: 10px;
}

.cd-tech-card p {
  font-size: 0.87rem;
  color: var(--sub);
  line-height: 1.65;
}

@media (max-width: 1024px) {
  .cd-tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .cd-tech-section {
    padding: 60px 20px;
  }

  .cd-tech-grid {
    grid-template-columns: 1fr;
  }
}

.cd-access-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.cd-access-sub {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.55);
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.65;
}

.cd-access-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 56px;
}

.cd-access-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 32px 26px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.cd-access-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.cd-access-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 168, 204, 0.3);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.cd-access-card:hover::before {
  opacity: 1;
}

.cd-access-icon {
  width: 52px;
  height: 52px;
  background: rgba(0, 168, 204, 0.1);
  border: 1px solid rgba(0, 168, 204, 0.15);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.cd-access-card:hover .cd-access-icon {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 6px 20px rgba(0, 168, 204, 0.3);
}

.cd-access-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--cyan);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s;
}

.cd-access-card:hover .cd-access-icon svg {
  stroke: var(--white);
}

.cd-access-card h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 10px;
}

.cd-access-card p {
  font-size: 0.87rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
}

/* ── ECOSISTEMAS ── */
.cd-eco-section {
  padding: 100px 5vw;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}

.cd-eco-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
}

.cd-eco-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cd-eco-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--bg-dark);
  color: var(--white);
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 8px;
}

.cd-eco-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s;
}

.cd-eco-cta:hover {
  background: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 168, 204, 0.3);
}

.cd-eco-cta:hover svg {
  transform: translateX(4px);
}

/* Ecosystem grid */
.cd-eco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cd-eco-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cd-eco-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(11, 26, 46, 0.08);
  border-color: var(--cyan-mid);
}

.cd-eco-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-eco-icon--apple {
  background: #000;
  color: #fff;
}

.cd-eco-icon--google {
  background: #fff;
  border: 1px solid #e8eaed;
}

.cd-eco-icon--alexa {
  background: #00caff;
  color: #fff;
}

.cd-eco-icon--mi {
  background: #ff6900;
  color: #fff;
}

.cd-eco-icon--zigbee {
  background: var(--cyan-pale);
  color: var(--cyan);
}

.cd-eco-icon--aqara {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--sub);
}

.cd-eco-icon svg {
  width: 22px;
  height: 22px;
}

.cd-eco-card span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* WhatsApp CTA button */
.cd-cta-btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  background: #25d366;
  color: var(--white);
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.25);
}

.cd-cta-btn-wa svg {
  width: 20px;
  height: 20px;
}

.cd-cta-btn-wa:hover {
  background: #1eb858;
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(37, 211, 102, 0.38);
}

/* ── RESPONSIVIDAD CERRADURAS DIGITALES ── */

@media (max-width: 1024px) {
  .cd-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cd-access-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cd-eco-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .cd-eco-left {
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .cd-catalog {
    padding: 56px 5vw 72px;
  }

  .cd-access-section,
  .cd-eco-section {
    padding: 64px 5vw;
  }

  .cd-access-grid {
    grid-template-columns: 1fr;
  }

  .cd-brand-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .cd-eco-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .cd-products-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .cd-eco-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .cd-eco-card {
    padding: 14px 10px;
  }
}

/* ==========================================================================
   PÁGINA MÚLTIPLES INTERFACES DE CONTROL
   ========================================================================== */

/* ── INTRO ── */
.mic-intro {
  padding: 80px 5vw;
  background: var(--bg);
}

.mic-intro-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.mic-intro-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.mic-intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sub);
  transition: all 0.3s;
}

.mic-intro-badge:hover {
  border-color: var(--cyan-mid);
  color: var(--cyan);
  background: var(--cyan-pale);
}

.mic-intro-badge svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* Device visual collage */
.mic-intro-right {
  position: relative;
}

.mic-devices-visual {
  position: relative;
  height: 420px;
}

.mic-device-phone {
  position: absolute;
  top: 0;
  left: 10%;
  width: 55%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(11, 26, 46, 0.14);
  border: 1px solid var(--border);
}

.mic-device-phone img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

.mic-device-panel {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 44%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(11, 26, 46, 0.18);
  border: 1px solid var(--border);
}

.mic-device-panel img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.mic-devices-badge {
  position: absolute;
  bottom: 60px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: 0 8px 28px rgba(11, 26, 46, 0.1);
  z-index: 3;
}

.mic-devices-badge .hs-badge-icon {
  width: 40px;
  height: 40px;
  background: var(--cyan);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mic-devices-badge .hs-badge-icon svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mic-devices-badge strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--bg-dark);
}

.mic-devices-badge span {
  font-size: 0.72rem;
  color: var(--sub);
}

/* ── SHARED BLOCK LAYOUT (app / personalizacion / centrales) ── */
.mic-app-section,
.mic-personalizacion,
.mic-centrales {
  padding: 90px 5vw;
}

.mic-app-section {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}

.mic-personalizacion {
  background: var(--bg);
}

.mic-centrales {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}

.mic-block-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.mic-block-reverse {
  direction: rtl;
}

.mic-block-reverse>* {
  direction: ltr;
}

/* App mockup image */
.mic-app-mockup,
.mic-personalizacion-img {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(11, 26, 46, 0.13);
  border: 1px solid var(--border);
}

.mic-app-mockup img,
.mic-personalizacion-img img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.mic-app-mockup:hover img,
.mic-personalizacion-img:hover img {
  transform: scale(1.04);
}

.mic-app-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 168, 204, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* App download label */
.mic-app-label {
  font-size: 0.85rem;
  color: var(--sub);
  font-style: italic;
  margin-bottom: 20px;
  margin-top: -6px;
}

/* Download buttons */
.mic-download-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.mic-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  border-radius: 13px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1.5px solid transparent;
}

.mic-download-btn--apple {
  background: #000;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.mic-download-btn--apple:hover {
  background: #1a1a1a;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.mic-download-btn--google {
  background: var(--white);
  color: var(--bg-dark);
  border-color: var(--border);
  box-shadow: 0 4px 16px rgba(11, 26, 46, 0.06);
}

.mic-download-btn--google:hover {
  border-color: var(--cyan-mid);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(11, 26, 46, 0.1);
}

.mic-btn-sub {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 3px;
}

.mic-btn-main {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}

/* Personalización perks */
.mic-perks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 8px;
}

.mic-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--sub);
}

.mic-perk svg {
  width: 18px;
  height: 18px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ── VOZ SECTION — dark ── */
.mic-voice-section {
  padding: 100px 5vw;
  background: #071322;
  position: relative;
  overflow: hidden;
}

.mic-voice-section::before {
  content: '';
  position: absolute;
  bottom: -160px;
  left: -120px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.mic-voice-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.mic-voice-text {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  margin-bottom: 32px;
}

/* Typewriter console */
.mic-voice-console {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mic-voice-quotes {
  font-family: Georgia, serif;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.25);
  margin-right: 4px;
  line-height: 1;
}

#mic-typewriter {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: -0.02em;
}

.mic-voice-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--cyan);
  margin-left: 3px;
  vertical-align: middle;
  animation: mic-blink 0.8s infinite;
}

@keyframes mic-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Assistant cards */
.mic-voice-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mic-assistant-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 20px 22px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.mic-assistant-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.mic-assistant-card--homekit::before {
  background: #FF9500;
}

.mic-assistant-card--google::before {
  background: #4285F4;
}

.mic-assistant-card--alexa::before {
  background: #00CAFF;
}

.mic-assistant-card:hover {
  transform: translateX(6px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.mic-assistant-card:hover::before {
  opacity: 1;
}

.mic-assistant-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mic-assistant-icon--apple {
  background: #fff8ec;
}

.mic-assistant-icon--google {
  background: #fff;
}

.mic-assistant-icon--alexa {
  background: rgba(0, 202, 255, 0.1);
}

.mic-assistant-info {
  flex: 1;
}

.mic-assistant-info strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 4px;
}

.mic-assistant-info span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

.mic-assistant-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mic-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* ── CENTRALES DE CONTROL ── */
.mic-centrales-img {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(11, 26, 46, 0.13);
  border: 1px solid var(--border);
}

.mic-centrales-img img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.mic-centrales-img:hover img {
  transform: scale(1.04);
}

.mic-centrales-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(7, 19, 34, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 168, 204, 0.25);
  color: var(--cyan);
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
}

.mic-centrales-badge svg {
  stroke: var(--cyan);
  fill: none;
}

/* Central feature list */
.mic-centrales-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}

.mic-central-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.mic-central-feat-icon {
  width: 44px;
  height: 44px;
  background: var(--cyan-pale);
  border: 1px solid var(--cyan-mid);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mic-central-feat-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mic-central-feature strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--bg-dark);
  margin-bottom: 3px;
}

.mic-central-feature span {
  font-size: 0.82rem;
  color: var(--sub);
  line-height: 1.5;
}

/* ── RESPONSIVIDAD ── */
@media (max-width: 1024px) {

  .mic-intro-container,
  .mic-block-container,
  .mic-voice-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .mic-block-reverse {
    direction: ltr;
  }

  .mic-devices-visual {
    height: 300px;
  }

  .mic-intro {
    padding: 60px 5vw;
  }

  .mic-app-section,
  .mic-personalizacion,
  .mic-centrales {
    padding: 64px 5vw;
  }

  .mic-voice-section {
    padding: 72px 5vw;
  }
}

@media (max-width: 768px) {
  .mic-download-btns {
    flex-direction: column;
    max-width: 280px;
  }

  .mic-device-phone {
    width: 65%;
    left: 5%;
  }

  .mic-device-panel {
    width: 50%;
  }

  .mic-app-mockup img,
  .mic-personalizacion-img img,
  .mic-centrales-img img {
    height: 260px;
  }
}

@media (max-width: 540px) {
  .mic-intro-badges {
    gap: 8px;
  }

  .mic-intro-badge {
    font-size: 0.75rem;
    padding: 6px 12px;
  }
}

/* ==========================================================================
   SHARED SOLUTION DETAIL UTILITIES (sd-)
   ========================================================================== */

/* ── SECTIONS ── */
.sd-intro-section {
  padding: 100px 5vw;
  background: var(--bg);
}

.sd-block-section {
  padding: 90px 5vw;
  background: var(--bg);
}

.sd-block-section--soft {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ── GRIDS & LAYOUTS ── */
.sd-grid-2col {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.sd-grid-2col--intro {
  grid-template-columns: 1.1fr 0.9fr;
}

.sd-grid-2col--intro-hot {
  grid-template-columns: 1.15fr 0.85fr;
}

.sd-grid-2col--reverse {
  direction: rtl;
}

.sd-grid-2col--reverse>* {
  direction: ltr;
}

.sd-col-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sd-col-visual {
  position: relative;
}

/* ── CHIPS & BADGES ── */
.sd-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.sd-chip-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sub);
  transition: all 0.3s;
}

.sd-chip-badge:hover {
  border-color: var(--cyan-mid);
  color: var(--cyan);
  background: var(--cyan-pale);
}

.sd-chip-badge svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  flex-shrink: 0;
}

/* ── IMAGES & FRAMES ── */
.sd-img-frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(11, 26, 46, 0.1);
  border: 1px solid var(--border);
}

.sd-img-frame--intro {
  box-shadow: 0 20px 50px rgba(11, 26, 46, 0.08);
}

.sd-img-frame--platform {
  box-shadow: 0 30px 70px rgba(11, 26, 46, 0.13);
}

.sd-img-frame--dark {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.06);
}

.sd-img-frame img {
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sd-img-frame--h480 img {
  height: 480px;
}

.sd-img-frame--h460 img {
  height: 460px;
}

.sd-img-frame--h420 img {
  height: 420px;
}

.sd-img-frame--h400 img {
  height: 400px;
}

.sd-img-frame:hover img {
  transform: scale(1.04);
}

.sd-img-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 168, 204, 0.07) 0%, transparent 60%);
  pointer-events: none;
}

/* ── LISTS & PERKS ── */
.sd-check-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.sd-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--sub);
}

.sd-check-item svg {
  width: 18px;
  height: 18px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ── DARK SECTIONS WITH GRADIENT GLOWS ── */
.sd-dark-section {
  padding: 100px 5vw;
  background: #071322;
  position: relative;
  overflow: hidden;
}

.sd-dark-section-header {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sd-dark-section-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.65;
  max-width: 500px;
  text-align: center;
}

/* ── RESPONSIVE SHARED UTILITIES ── */
@media (max-width: 1024px) {
  .sd-grid-2col {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }

  .sd-grid-2col--reverse {
    direction: ltr;
  }

  .sd-col-text {
    align-items: center;
    text-align: center;
  }

  .sd-check-list {
    align-items: flex-start;
    text-align: left;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .sd-img-frame--h480 img {
    height: 360px;
  }

  .sd-img-frame--h460 img {
    height: 360px;
  }

  .sd-img-frame--h420 img {
    height: 320px;
  }
}

@media (max-width: 768px) {
  .sd-img-frame--h460 img {
    height: 280px;
  }

  .sd-img-frame--h420 img {
    height: 260px;
  }

  .sd-img-frame--h400 img {
    height: 280px;
  }
}

/* ==========================================================================
   PÁGINA REDES UNIFICADAS
   ========================================================================== */

/* ── BENEFITS ALTERNATING BLOCKS ── */
.ru-benefits-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ru-benefit-block {
  padding: 70px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.ru-benefit-block:last-child {
  border-bottom: none;
  padding-bottom: 90px;
}

/* ── USE CASES — dark section ── */
.ru-usecases-section::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -180px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.ru-usecases-section::after {
  content: '';
  position: absolute;
  bottom: -140px;
  left: -100px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.ru-usecases-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.ru-usecases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 60px;
}

.ru-usecase-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 32px 26px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.ru-usecase-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.ru-usecase-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 168, 204, 0.3);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.ru-usecase-card:hover::before {
  opacity: 1;
}

.ru-usecase-icon {
  width: 48px;
  height: 48px;
  background: rgba(0, 168, 204, 0.1);
  border: 1px solid rgba(0, 168, 204, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.ru-usecase-card:hover .ru-usecase-icon {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 6px 20px rgba(0, 168, 204, 0.3);
}

.ru-usecase-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--cyan);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: stroke 0.3s;
}

.ru-usecase-card:hover .ru-usecase-icon svg {
  stroke: var(--white);
}

.ru-usecase-card h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.ru-usecase-card p {
  font-size: 0.87rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

/* ── PLATFORM SECTION ── */
.ru-platform-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(7, 19, 34, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 168, 204, 0.25);
  color: var(--cyan);
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
}

.ru-platform-badge svg {
  stroke: var(--cyan);
  fill: none;
}

.ru-platform-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 28px;
}

.ru-platform-feat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ru-platform-feat-icon {
  width: 44px;
  height: 44px;
  background: var(--cyan-pale);
  border: 1px solid var(--cyan-mid);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ru-platform-feat-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ru-platform-feat strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--bg-dark);
  margin-bottom: 3px;
}

.ru-platform-feat span {
  font-size: 0.82rem;
  color: var(--sub);
  line-height: 1.5;
}

/* ── RESPONSIVIDAD REDES UNIFICADAS ── */

@media (max-width: 1200px) {
  .ru-usecases-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .ru-benefit-block {
    padding: 56px 0;
  }

  .ru-benefit-perks {
    align-items: flex-start;
    text-align: left;
    max-width: 480px;
  }
}

@media (max-width: 768px) {
  .ru-benefits-section {
    padding: 56px 5vw 20px;
  }

  .ru-usecases-section {
    padding: 72px 5vw;
  }

  .ru-usecases-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .ru-usecases-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   PÁGINA HOTELES SMART
   ========================================================================== */

/* Stats row */
.hot-intro-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 36px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 28px;
  width: 100%;
}

.hot-intro-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hot-intro-stat-div {
  width: 1px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
}

.hot-intro-stat-num {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--cyan);
  line-height: 1;
  letter-spacing: -0.03em;
}

.hot-intro-stat-num span {
  font-size: 1.1rem;
  font-weight: 700;
}

.hot-intro-stat-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 5px;
}

/* ── ACCESS METHODS GRID ── */
.hot-methods-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sub);
  margin-top: 28px;
  margin-bottom: 14px;
}

.hot-methods-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
}

.hot-method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 12px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}

.hot-method-card:hover {
  border-color: var(--cyan-mid);
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(11, 26, 46, 0.08);
}

.hot-method-icon {
  width: 44px;
  height: 44px;
  background: var(--cyan-pale);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.hot-method-card:hover .hot-method-icon {
  background: var(--cyan);
}

.hot-method-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--cyan);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: stroke 0.3s;
}

.hot-method-card:hover .hot-method-icon svg {
  stroke: var(--white);
}

.hot-method-card span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sub);
  line-height: 1.3;
}

/* ── ENERGY CARDS ── */
.hot-energy-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.hot-energy-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.hot-energy-card-icon {
  width: 44px;
  height: 44px;
  background: var(--cyan-pale);
  border: 1px solid var(--cyan-mid);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hot-energy-card-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hot-energy-card strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--bg-dark);
  margin-bottom: 2px;
}

.hot-energy-card span {
  font-size: 0.82rem;
  color: var(--sub);
  line-height: 1.5;
}

/* ── PMS / TTLOCK SECTION — dark ── */
.hot-pms-section::before {
  content: '';
  position: absolute;
  top: -180px;
  left: -120px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hot-pms-section::after {
  content: '';
  position: absolute;
  bottom: -150px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.hot-pms-text {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.75;
  margin-bottom: 18px;
}

.hot-pms-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.hot-pms-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.75);
}

.hot-pms-feat svg {
  width: 18px;
  height: 18px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* PMS Cards right side */
.hot-pms-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hot-pms-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 24px 26px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hot-pms-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 168, 204, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
}

.hot-pms-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.hot-pms-brand-icon {
  width: 46px;
  height: 46px;
  background: rgba(0, 168, 204, 0.12);
  border: 1px solid rgba(0, 168, 204, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hot-pms-brand-icon--hotel {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.hot-pms-brand-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--cyan);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.hot-pms-brand-icon--hotel svg {
  stroke: rgba(255, 255, 255, 0.6);
}

.hot-pms-card-header>div:nth-child(2) {
  flex: 1;
}

.hot-pms-card-header strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 2px;
}

.hot-pms-card-header span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
}

.hot-pms-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Card stats row */
.hot-pms-card-stats {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 14px 20px;
}

.hot-pms-card-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hot-pms-card-stat-div {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.hot-pms-card-stat strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--cyan);
  line-height: 1;
  letter-spacing: -0.02em;
}

.hot-pms-card-stat span {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* PMS action list */
.hot-pms-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hot-pms-action {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 10px 14px;
  transition: all 0.25s;
}

.hot-pms-action:hover {
  background: rgba(0, 168, 204, 0.08);
  border-color: rgba(0, 168, 204, 0.2);
  color: var(--cyan);
}

.hot-pms-action svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ── EXPERIENCE SECTION PERKS ── */
.hot-exp-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(7, 19, 34, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 168, 204, 0.25);
  color: var(--cyan);
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
}

.hot-exp-badge svg {
  stroke: var(--cyan);
  fill: rgba(0, 168, 204, 0.2);
}

.hot-exp-perks {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
}

.hot-exp-perk {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.hot-exp-perk-icon {
  width: 44px;
  height: 44px;
  background: var(--cyan-pale);
  border: 1px solid var(--cyan-mid);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s;
}

.hot-exp-perk:hover .hot-exp-perk-icon {
  background: var(--cyan);
  border-color: var(--cyan);
}

.hot-exp-perk-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s;
}

.hot-exp-perk:hover .hot-exp-perk-icon svg {
  stroke: var(--white);
}

.hot-exp-perk strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--bg-dark);
  margin-bottom: 2px;
}

.hot-exp-perk span {
  font-size: 0.82rem;
  color: var(--sub);
  line-height: 1.5;
}

/* ── RESPONSIVIDAD HOTELES SMART ── */

@media (max-width: 1024px) {
  .hot-intro-stats {
    max-width: 480px;
  }

  .hot-methods-grid {
    max-width: 400px;
    margin: 0 auto;
  }

  .hot-energy-cards {
    max-width: 480px;
    text-align: left;
  }

  .hot-exp-perks {
    max-width: 480px;
    text-align: left;
    align-self: center;
  }
}

@media (max-width: 768px) {
  .hot-pms-section {
    padding: 72px 5vw;
  }

  .hot-methods-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 320px;
  }
}

@media (max-width: 540px) {
  .hot-methods-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .hot-intro-stats {
    flex-direction: column;
    gap: 16px;
  }

  .hot-intro-stat-div {
    width: 40px;
    height: 1px;
  }
}

/* ==========================================================================
   PÁGINA CORTINAS Y PERSIANAS INTELIGENTES
   ========================================================================== */

/* ── FEATURES SECTION ── */
.cpi-features-section {
  padding: 90px 5vw 80px;
  background: var(--bg);
}

.cpi-features-container {
  max-width: 1200px;
  margin: 0 auto;
}

.cpi-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cpi-feat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(11, 26, 46, 0.04);
}

.cpi-feat-card--wide {
  grid-column: span 4;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  background: linear-gradient(135deg, var(--cyan-pale) 0%, var(--bg-soft) 100%);
  border-color: var(--cyan-mid);
}

.cpi-feat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(11, 26, 46, 0.09);
  border-color: var(--cyan-mid);
}

.cpi-feat-card--wide:hover {
  transform: translateY(-4px);
}

.cpi-feat-icon {
  width: 48px;
  height: 48px;
  background: var(--cyan-pale);
  border: 1px solid var(--cyan-mid);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s;
}

.cpi-feat-card:hover .cpi-feat-icon {
  background: var(--cyan);
  border-color: var(--cyan);
}

.cpi-feat-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--cyan);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: stroke 0.3s;
}

.cpi-feat-card:hover .cpi-feat-icon svg {
  stroke: var(--white);
}

.cpi-feat-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--bg-dark);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.cpi-feat-card p {
  font-size: 0.85rem;
  color: var(--sub);
  line-height: 1.65;
}

.cpi-feat-card--wide .cpi-feat-card-content {
  flex: 1;
}

/* ── DIVIDER ── */
.cpi-divider-section {
  padding: 0 5vw;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cpi-divider-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 36px 0;
}

.cpi-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-mid), transparent);
}

.cpi-divider-title {
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--bg-dark);
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-align: center;
}

.cpi-divider-title em {
  font-style: normal;
  color: var(--cyan);
}

/* ── VOICE ASSISTANTS ── */
.cpi-voice-assistants {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}

.cpi-voice-assistant {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  transition: all 0.3s;
}

.cpi-voice-assistant:hover {
  border-color: var(--cyan-mid);
  box-shadow: 0 6px 20px rgba(11, 26, 46, 0.06);
}

.cpi-voice-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cpi-voice-icon--google {
  background: #fff;
  border: 1px solid #e8eaed;
}

.cpi-voice-icon--homekit {
  background: #fff8ec;
  border: 1px solid rgba(255, 149, 0, 0.2);
}

.cpi-voice-assistant strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--bg-dark);
  margin-bottom: 2px;
}

.cpi-voice-assistant span {
  font-size: 0.78rem;
  color: var(--sub);
}

/* ── SCHEDULE PREVIEW ── */
.cpi-schedule-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
}

.cpi-schedule-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cpi-schedule-day {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--bg-dark);
  min-width: 88px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cpi-schedule-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cpi-schedule-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
}

.cpi-schedule-tag--open {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.cpi-schedule-tag--open svg {
  stroke: #16a34a;
}

.cpi-schedule-tag--close {
  background: rgba(0, 168, 204, 0.08);
  color: var(--cyan);
  border: 1px solid rgba(0, 168, 204, 0.2);
}

.cpi-schedule-tag--close svg {
  stroke: var(--cyan);
}

/* ── SENSORS SECTION — dark ── */
.cpi-sensors-section::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -180px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.cpi-sensors-section::after {
  content: '';
  position: absolute;
  bottom: -140px;
  left: -100px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.cpi-sensors-text {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.75;
  margin-bottom: 28px;
}

.cpi-sensors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cpi-sensor-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.cpi-sensor-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.cpi-sensor-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 168, 204, 0.25);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.cpi-sensor-card:hover::before {
  opacity: 1;
}

.cpi-sensor-icon {
  width: 40px;
  height: 40px;
  background: rgba(0, 168, 204, 0.1);
  border: 1px solid rgba(0, 168, 204, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.cpi-sensor-card:hover .cpi-sensor-icon {
  background: var(--cyan);
  border-color: var(--cyan);
}

.cpi-sensor-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--cyan);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: stroke 0.3s;
}

.cpi-sensor-card:hover .cpi-sensor-icon svg {
  stroke: var(--white);
}

.cpi-sensor-card strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.3;
}

.cpi-sensor-card span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

/* ── SCENE CHIPS ── */
.cpi-scene-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.cpi-scene-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1.5px solid;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}

.cpi-scene-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(11, 26, 46, 0.1);
}

.cpi-scene-chip svg {
  flex-shrink: 0;
}

.cpi-scene-chip--morning {
  background: rgba(251, 191, 36, 0.1);
  color: #b45309;
  border-color: rgba(251, 191, 36, 0.35);
}

.cpi-scene-chip--morning svg {
  stroke: #b45309;
  fill: none;
}

.cpi-scene-chip--movie {
  background: rgba(99, 102, 241, 0.1);
  color: #4338ca;
  border-color: rgba(99, 102, 241, 0.3);
}

.cpi-scene-chip--movie svg {
  stroke: #4338ca;
  fill: none;
}

.cpi-scene-chip--work {
  background: rgba(0, 168, 204, 0.08);
  color: var(--cyan);
  border-color: rgba(0, 168, 204, 0.25);
}

.cpi-scene-chip--work svg {
  stroke: var(--cyan);
  fill: none;
}

.cpi-scene-chip--sleep {
  background: rgba(30, 41, 59, 0.07);
  color: #334155;
  border-color: rgba(30, 41, 59, 0.2);
}

.cpi-scene-chip--sleep svg {
  stroke: #334155;
  fill: none;
}

.cpi-scene-chip--away {
  background: rgba(34, 197, 94, 0.08);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.25);
}

.cpi-scene-chip--away svg {
  stroke: #16a34a;
  fill: none;
}

.cpi-scene-chip--romantic {
  background: rgba(244, 63, 94, 0.08);
  color: #be123c;
  border-color: rgba(244, 63, 94, 0.25);
}

.cpi-scene-chip--romantic svg {
  stroke: #be123c;
  fill: none;
}

/* Scenes badge overlay */
.cpi-scenes-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(7, 19, 34, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 168, 204, 0.25);
  color: var(--cyan);
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
}

.cpi-scenes-badge svg {
  stroke: var(--cyan);
  fill: rgba(0, 168, 204, 0.15);
}

/* ── RESPONSIVIDAD CORTINAS ── */

@media (max-width: 1200px) {
  .cpi-features-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cpi-feat-card--wide {
    grid-column: span 3;
  }
}

@media (max-width: 1024px) {
  .cpi-voice-assistants {
    max-width: 380px;
  }

  .cpi-schedule-preview {
    max-width: 440px;
  }

  .cpi-sensors-grid {
    max-width: 420px;
    margin: 0 auto;
  }

  .cpi-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cpi-feat-card--wide {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .cpi-features-section {
    padding: 64px 5vw;
  }

  .cpi-sensors-section {
    padding: 72px 5vw;
  }

  .cpi-divider-title {
    font-size: 1.2rem;
    white-space: normal;
    text-align: center;
  }

  .cpi-scene-examples {
    justify-content: center;
  }
}

@media (max-width: 540px) {
  .cpi-features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .cpi-feat-card--wide {
    grid-column: span 2;
    flex-direction: column;
  }

  .cpi-sensors-grid {
    grid-template-columns: 1fr;
  }

  .cpi-schedule-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ==========================================================================
   PÁGINA SEGURIDAD INTELIGENTE
   ========================================================================== */

/* ── DEVICES SECTION ── */
.si-devices-section {
  padding: 90px 5vw;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}

.si-devices-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}

.si-devices-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: sticky;
  top: 88px;
}

.si-devices-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(11, 26, 46, 0.06);
}

.si-devices-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.si-devices-card-header svg {
  width: 24px;
  height: 24px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 3px;
}

.si-devices-card-header h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--bg-dark);
  line-height: 1.35;
}

.si-devices-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.si-device-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: all 0.3s;
}

.si-device-item:hover {
  border-color: var(--cyan-mid);
  background: var(--cyan-pale);
}

.si-device-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.si-device-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.si-device-icon--camera {
  background: rgba(0, 168, 204, 0.1);
}

.si-device-icon--camera svg {
  stroke: var(--cyan);
}

.si-device-icon--motion {
  background: rgba(99, 102, 241, 0.1);
}

.si-device-icon--motion svg {
  stroke: #6366f1;
}

.si-device-icon--glass {
  background: rgba(14, 165, 233, 0.1);
}

.si-device-icon--glass svg {
  stroke: #0ea5e9;
}

.si-device-icon--door {
  background: rgba(168, 85, 247, 0.1);
}

.si-device-icon--door svg {
  stroke: #a855f7;
}

.si-device-icon--gas {
  background: rgba(245, 158, 11, 0.1);
}

.si-device-icon--gas svg {
  stroke: #f59e0b;
}

.si-device-icon--smoke {
  background: rgba(107, 114, 128, 0.1);
}

.si-device-icon--smoke svg {
  stroke: #6b7280;
}

.si-device-icon--water {
  background: rgba(59, 130, 246, 0.1);
}

.si-device-icon--water svg {
  stroke: #3b82f6;
}

.si-device-item:hover .si-device-icon {
  filter: brightness(1.1);
}

.si-device-item span {
  font-size: 0.87rem;
  color: var(--sub);
  line-height: 1.45;
  font-weight: 500;
}

/* ── HOW SECTION HEADER — dark ── */
.si-how-header {
  padding-bottom: 60px;
}

.si-how-header::before {
  content: '';
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* ── STEP SECTIONS — dark ── */
.si-step--dark {
  padding: 80px 5vw;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.si-step--dark::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.si-step-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 40px 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.si-step--alt .si-step-container {
  grid-template-columns: auto 1fr 1fr;
}

/* Step number */
.si-step-number {
  font-size: 4.5rem;
  font-weight: 900;
  color: rgba(0, 168, 204, 0.15);
  letter-spacing: -0.05em;
  line-height: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  user-select: none;
  align-self: center;
}

/* Step description */
.si-step-desc {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.75;
  margin-bottom: 16px;
}

.si-step-desc em {
  font-style: normal;
  color: var(--cyan);
}

/* Step tags */
.si-step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.si-step-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 168, 204, 0.08);
  border: 1px solid rgba(0, 168, 204, 0.2);
  color: var(--cyan);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
}

.si-step-tag svg {
  stroke: var(--cyan);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* Status preview */
.si-step-status-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 18px 20px;
}

.si-step-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.65);
}

.si-step-status-row strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}

.si-step-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.si-step-status-dot--green {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Accident cards */
.si-accidents-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.si-accident-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px 18px;
  transition: all 0.3s;
}

.si-accident-card:hover {
  border-color: rgba(0, 168, 204, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.si-accident-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.si-accident-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.si-accident-icon--fire {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.si-accident-icon--fire svg {
  stroke: #ef4444;
}

.si-accident-icon--gas {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.si-accident-icon--gas svg {
  stroke: #f59e0b;
}

.si-accident-icon--water {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.si-accident-icon--water svg {
  stroke: #3b82f6;
}

.si-accident-card strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 2px;
}

.si-accident-card span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
}

/* ── RESPONSIVIDAD SEGURIDAD INTELIGENTE ── */

@media (max-width: 1024px) {
  .si-devices-container {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }

  .si-devices-left {
    align-items: center;
    position: static;
  }

  .si-step-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .si-step-number {
    writing-mode: horizontal-tb;
    font-size: 3rem;
    color: rgba(0, 168, 204, 0.2);
    align-self: flex-start;
  }

  .si-step-status-preview {
    max-width: 440px;
    text-align: left;
    margin: 24px auto 0;
  }

  .si-accidents-cards {
    max-width: 400px;
    align-self: center;
    margin-top: 24px;
  }

  .si-step-desc {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .si-devices-section {
    padding: 64px 5vw;
  }

  .si-step--dark {
    padding: 60px 5vw;
  }

  .si-how-header {
    padding: 60px 5vw 48px;
  }

  .si-devices-card {
    padding: 24px 20px;
  }
}

/* ══════════════════════════════════════════
   PÁGINA 404 — SEÑAL INTERRUMPIDA
   ══════════════════════════════════════════ */
.error-404-main {
  padding-top: 68px;
  min-height: 100vh;
  background: var(--bg-dark);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.error-404-hero {
  padding: 100px 5vw 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

.error-404-hero::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.18) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

.error-404-container {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error-404-visual {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 36px;
}

.error-hub-center {
  width: 72px;
  height: 72px;
  background: rgba(0, 168, 204, 0.12);
  border: 1.5px solid rgba(0, 168, 204, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 30px rgba(0, 168, 204, 0.25);
}

.error-hub-center svg {
  width: 36px;
  height: 36px;
  color: #fff;
}

.error-hub-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(0, 168, 204, 0.35);
  animation: hubPulse 3s infinite ease-out;
  pointer-events: none;
}

.error-hub-pulse-ring.ring-1 {
  width: 90px;
  height: 90px;
  animation-delay: 0s;
}

.error-hub-pulse-ring.ring-2 {
  width: 130px;
  height: 130px;
  animation-delay: 1s;
}

.error-hub-pulse-ring.ring-3 {
  width: 170px;
  height: 170px;
  animation-delay: 2s;
}

@keyframes hubPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}

.error-404-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  background: var(--cyan);
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 20px;
  z-index: 4;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(0, 168, 204, 0.5);
}

.error-404-hero .sec-tag {
  background: rgba(0, 168, 204, 0.12);
  color: var(--cyan);
  border-color: rgba(0, 168, 204, 0.3);
  margin-bottom: 20px;
}

.error-404-title {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

.error-404-title em {
  font-style: normal;
  color: var(--cyan);
}

.error-404-desc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 580px;
}

.error-404-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}


@media (max-width: 768px) {
  .error-404-title {
    font-size: 2.2rem;
  }
  .error-404-hero {
    padding: 60px 5vw 60px;
  }
  .error-404-actions {
    flex-direction: column;
    width: 100%;
  }
  .error-404-actions a {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   APP SHOWCASE — Mockup de tablet con panel de control LifeSmart
   ========================================================================== */

.app-showcase {
  padding: 100px 5vw;
  background: #071322;
  position: relative;
  overflow: hidden;
}

.app-showcase::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -160px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.18), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.app-showcase-container {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.app-showcase-badges {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.app-showcase-badge {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--white);
  width: fit-content;
}

.app-showcase-badge svg {
  width: 16px;
  height: 16px;
  stroke: var(--cyan);
  flex-shrink: 0;
}

/* ── Visual: mockup de tablet ── */
.app-showcase-visual {
  position: relative;
}

.ipad-glow {
  position: absolute;
  inset: 6%;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.22), transparent 70%);
  filter: blur(40px);
  z-index: 0;
}

.ipad-frame {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  aspect-ratio: 3 / 2.1;
  background: linear-gradient(160deg, #1c1f24, #0a0b0d);
  border-radius: 32px;
  padding: 14px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.ipad-cam {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #333;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ipad-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #0c1522;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 14px;
}

.ipad-bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  z-index: 0;
}

.ipad-bg-blob--1 {
  top: -20%;
  left: -10%;
  width: 55%;
  height: 55%;
  background: #164d63;
}

.ipad-bg-blob--2 {
  bottom: -25%;
  right: -10%;
  width: 60%;
  height: 60%;
  background: #0d2a4a;
}

.ipad-bg-blob--3 {
  top: 30%;
  left: 40%;
  width: 40%;
  height: 40%;
  background: #1a1e3a;
}

.ipad-app-header,
.ipad-player-card,
.ipad-tiles-grid,
.ipad-app-footer {
  position: relative;
  z-index: 1;
}

.ipad-app-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.ipad-scene-name {
  color: var(--white);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.ipad-home-btn {
  position: absolute;
  right: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  cursor: default;
  padding: 4px;
}

.ipad-home-btn svg {
  width: 16px;
  height: 16px;
}

/* ── Player ── */
.ipad-player-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.ipad-player-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ipad-player-art {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cyan), #6a3fd6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
}

.ipad-player-art svg {
  width: 18px;
  height: 18px;
}

.ipad-player-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.ipad-player-eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  flex-shrink: 0;
}

.ipad-player-eq span {
  width: 2px;
  background: var(--cyan);
  border-radius: 1px;
  animation: ipadEq 1s ease-in-out infinite;
}

.ipad-player-eq span:nth-child(1) { height: 40%; animation-delay: 0s; }
.ipad-player-eq span:nth-child(2) { height: 100%; animation-delay: 0.2s; }
.ipad-player-eq span:nth-child(3) { height: 65%; animation-delay: 0.4s; }

@keyframes ipadEq {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.ipad-player-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ipad-player-titles strong {
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ipad-player-titles span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem;
}

.ipad-power-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: default;
  padding: 4px;
  flex-shrink: 0;
}

.ipad-power-btn svg {
  width: 16px;
  height: 16px;
}

.ipad-player-volume {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.ipad-player-volume > svg {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

.ipad-volume-track {
  position: relative;
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.ipad-volume-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--white);
  border-radius: 3px;
}

.ipad-volume-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--white);
  color: #0c1522;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 100px;
  white-space: nowrap;
}

.ipad-player-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.ipad-ctrl-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  cursor: default;
  padding: 4px;
}

.ipad-ctrl-btn svg {
  width: 14px;
  height: 14px;
}

.ipad-transport {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ipad-play-btn {
  background: var(--white);
  border: none;
  color: #0c1522;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.ipad-play-btn svg {
  width: 13px;
  height: 13px;
}

/* ── Grid de tiles ── */
.ipad-tiles-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.ipad-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 8px 4px 7px;
  transition: background 0.25s ease;
}

.ipad-tile:hover {
  background: rgba(255, 255, 255, 0.09);
}

.ipad-tile-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ipad-tile-icon--circle {
  border-radius: 50%;
}

.ipad-tile-icon--square {
  border-radius: 8px;
}

.ipad-tile-icon svg {
  width: 14px;
  height: 14px;
}

.ipad-tile-icon--white { background: #eef2f4; color: #333; }
.ipad-tile-icon--warm-1 { background: #f4c542; color: #6b4a00; }
.ipad-tile-icon--warm-2 { background: #f6b93b; color: #603c00; }
.ipad-tile-icon--warm-3 { background: #f2a93c; color: #5a3800; }
.ipad-tile-icon--blue { background: #3a6df0; color: #eaf0ff; }
.ipad-tile-icon--disco { background: linear-gradient(135deg, #cfd8e3, #8a94a3); color: #2b2f36; }
.ipad-tile-icon--dark { background: #10151d; color: var(--cyan); }
.ipad-tile-icon--grey { background: #3a4552; color: #cfd8e0; }
.ipad-tile-icon--swatch { background: linear-gradient(160deg, #7fb4d6, #2f4f66); color: #eaf3fa; }

.ipad-tile-value {
  font-size: 0.68rem;
  font-weight: 800;
}

.ipad-tile.has-tip {
  overflow: visible;
}

.ipad-tile-plus {
  position: absolute;
  top: -6px;
  right: 6px;
  z-index: 2;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(20, 26, 34, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Extend the tappable area well beyond the visible 16px dot — the
   visual badge stays small, but fingers get a realistic touch target. */
.ipad-tile-plus::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}

.ipad-tile-plus::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid var(--cyan);
  animation: ipadPlusPing 2.4s cubic-bezier(0.2, 0.7, 0.4, 1) infinite;
}

.ipad-tile-plus:focus-visible,
.ipad-tile.is-open .ipad-tile-plus {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #06222b;
  transform: scale(1.1);
}

.ipad-tile-plus:focus-visible::after,
.ipad-tile.is-open .ipad-tile-plus::after {
  animation-play-state: paused;
  opacity: 0;
}

.ipad-tile-plus svg {
  width: 8px;
  height: 8px;
}

/* Hover-driven states only for devices that truly hover (mouse/trackpad).
   On touch, iOS/Android require a real tap to register :hover, which
   made the badge feel like it needed two taps — so touch relies solely
   on the JS click-toggle (.is-open) below instead. */
@media (hover: hover) and (pointer: fine) {
  .ipad-tile-plus:hover {
    background: var(--cyan);
    border-color: var(--cyan);
    color: #06222b;
    transform: scale(1.1);
  }

  .ipad-tile-plus:hover::after {
    animation-play-state: paused;
    opacity: 0;
  }
}

@keyframes ipadPlusPing {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

.ipad-tile-tooltip {
  --tip-x: 0px;
  position: absolute;
  bottom: calc(100% + 10px);
  z-index: 3;
  width: max-content;
  max-width: 160px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #10151d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translate(var(--tip-x), 4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}

.ipad-tile-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  width: 8px;
  height: 8px;
  background: #10151d;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transform: rotate(45deg) translateY(-4px);
}

.ipad-tile-tooltip--left { left: 0; }
.ipad-tile-tooltip--left::after { left: 14px; }

.ipad-tile-tooltip--center { left: 50%; --tip-x: -50%; }
.ipad-tile-tooltip--center::after { left: 50%; margin-left: -4px; }

.ipad-tile-tooltip--right { right: 0; }
.ipad-tile-tooltip--right::after { right: 14px; }

.ipad-tile-tooltip--below {
  bottom: auto;
  top: calc(100% + 10px);
}

.ipad-tile-tooltip--below::after {
  top: auto;
  bottom: 100%;
  transform: rotate(45deg) translateY(4px);
}

.ipad-tile.has-tip:hover .ipad-tile-tooltip,
.ipad-tile-plus:focus-visible ~ .ipad-tile-tooltip,
.ipad-tile.is-open .ipad-tile-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--tip-x), 0);
}

.ipad-tile.has-tip:hover,
.ipad-tile.is-open {
  z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
  .ipad-tile-plus::after {
    animation: none;
    opacity: 0.35;
  }
}

.ipad-tile-label {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.58rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

.ipad-logo {
  width: 26px;
  height: 26px;
}

.ipad-logo--netflix { background: #b8202e; }
.ipad-logo--max { background: linear-gradient(135deg, #2532a8, #7b3fe4); }
.ipad-logo--appletv { background: #111; }
.ipad-logo--deezer { background: linear-gradient(135deg, #a238ff, #ff3fa6); }

.ipad-logo-glyph {
  color: #fff;
  font-weight: 800;
  font-size: 0.68rem;
}

.ipad-logo-glyph--max {
  font-style: italic;
  font-size: 0.5rem;
}

.ipad-app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.ipad-clock {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  font-weight: 600;
}

.ipad-signal {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  font-weight: 600;
}

.ipad-signal svg {
  width: 12px;
  height: 12px;
}

.ipad-home-indicator {
  display: none;
}

@media (max-width: 1024px) {
  .app-showcase-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .app-showcase-text {
    text-align: center;
  }

  .app-showcase-badges {
    align-items: center;
  }

  .sec-tag.hs-sec-tag-dark {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 640px) {
  .app-showcase {
    padding: 64px 5vw;
  }

  .ipad-frame {
    aspect-ratio: auto;
    border-radius: 22px;
    padding: 8px;
  }

  .ipad-screen {
    height: auto;
    border-radius: 14px;
    padding: 12px 10px 10px;
  }

  .ipad-tiles-grid {
    gap: 5px;
  }

  .ipad-tile-label {
    font-size: 0.5rem;
  }

  .ipad-tile-icon {
    width: 20px;
    height: 20px;
  }

  .ipad-tile-icon svg {
    width: 11px;
    height: 11px;
  }

  .ipad-logo {
    width: 20px;
    height: 20px;
  }

  .ipad-tile-plus {
    width: 20px;
    height: 20px;
    top: -8px;
    right: 4px;
  }

  .ipad-tile-plus svg {
    width: 10px;
    height: 10px;
  }

  .ipad-tile-tooltip {
    max-width: 132px;
    font-size: 0.7rem;
    padding: 9px 11px;
  }
}

/* ── Hero: compactar en celulares para que no ocupe toda la pantalla ── */
@media (max-width: 600px) {
  .hero {
    min-height: auto;
  }

  .hero-content {
    padding: 48px 6vw;
  }

  .hero-eyebrow {
    margin-bottom: 16px;
  }

  .hero h1 {
    font-size: clamp(1.6rem, 7vw, 2.1rem);
    line-height: 1.15;
    margin-bottom: 14px;
  }

  .hero-desc {
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 24px;
  }

  .hero-btns {
    gap: 10px;
    margin-bottom: 28px;
  }

  .hero-stats {
    gap: 10px;
  }
}

/* ══ WhatsApp Widget flotante (multi-departamento) ══ */
.wa-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  font-family: inherit;
}

.wa-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--wa-green);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.wa-bubble svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.wa-bubble-label {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.wa-widget.is-open .wa-bubble-label {
  max-width: 0;
  opacity: 0;
}

.wa-bubble:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.5);
}

.wa-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 16px);
  width: 340px;
  max-width: calc(100vw - 48px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.wa-widget.is-open .wa-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.wa-view {
  display: none;
}

.wa-view.is-active {
  display: block;
}

.wa-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--wa-green);
  color: #fff;
  padding: 16px 18px;
}

.wa-panel-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.wa-panel-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  padding: 4px;
  flex-shrink: 0;
}

.wa-panel-header-brand strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
}

.wa-panel-header-brand span {
  display: block;
  font-size: 0.72rem;
  opacity: 0.85;
}

.wa-panel-close,
.wa-panel-back {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.wa-panel-close:hover,
.wa-panel-back:hover {
  background: rgba(255, 255, 255, 0.3);
}

.wa-panel-close svg,
.wa-panel-back svg {
  width: 16px;
  height: 16px;
}

.wa-dept-list {
  padding: 16px;
  background: #f7f5f1;
}

.wa-dept-intro {
  font-size: 0.82rem;
  color: var(--text);
  opacity: 0.6;
  margin: 0 0 12px;
}

.wa-dept-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s ease;
}

.wa-dept-item:last-child {
  margin-bottom: 0;
}

.wa-dept-item:hover {
  border-color: #25d366;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.15);
  transform: translateY(-2px);
}

.wa-dept-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.12);
  color: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wa-dept-icon svg {
  width: 17px;
  height: 17px;
}

.wa-dept-name {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.wa-dept-arrow {
  width: 16px;
  height: 16px;
  color: var(--text);
  opacity: 0.35;
  flex-shrink: 0;
}

.wa-chat-body {
  background: #e9e3d8 url('assets/images/carrusel-domo/logo domo 1.png') center/0 no-repeat;
  padding: 20px 16px;
  min-height: 160px;
}

.wa-chat-bubble {
  background: #fff;
  border-radius: 4px 14px 14px 14px;
  padding: 12px 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
  max-width: 88%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.wa-chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid var(--border);
}

.wa-chat-input input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text);
  background: transparent;
}

.wa-chat-input button {
  background: #25d366;
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.wa-chat-input button svg {
  width: 15px;
  height: 15px;
}

.wa-chat-input button:hover {
  transform: scale(1.08);
}

@media (max-width: 480px) {
  .wa-widget {
    right: 16px;
    bottom: 16px;
  }

  .wa-bubble-label {
    display: none;
  }

  .wa-panel {
    width: calc(100vw - 32px);
  }
}

/* ==========================================================================
   BLOG — Índice y artículo individual
   ========================================================================== */

.blog-hero-sub {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.05rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.blog-single-meta {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.blog-list-section {
  padding: 60px 5vw 20px;
}

.blog-list-container {
  max-width: 1160px;
  margin: 0 auto;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.blog-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(11, 26, 46, 0.04);
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(11, 26, 46, 0.1);
  border-color: var(--cyan-mid);
}

.blog-card-img-link {
  display: block;
}

.blog-card-img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.blog-card-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
}

.blog-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-card-date {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.blog-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
}

.blog-card-title a {
  color: var(--text);
}

.blog-card-title a:hover {
  color: var(--cyan);
}

.blog-card-excerpt {
  color: var(--sub);
  font-size: 0.92rem;
  line-height: 1.55;
}

.blog-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--cyan);
  font-weight: 700;
  font-size: 0.88rem;
}

.blog-card-more svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.blog-card:hover .blog-card-more svg {
  transform: translateX(4px);
}

.blog-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 48px 0 20px;
}

.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
}

.blog-pagination .page-numbers.current {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--white);
}

.blog-pagination .page-numbers:hover:not(.current) {
  border-color: var(--cyan-mid);
  color: var(--cyan);
}

.blog-empty {
  text-align: center;
  padding: 60px 0;
  color: var(--sub);
}

.blog-single-thumb {
  max-width: 900px;
  margin: -30px auto 0;
  padding: 0 5vw;
}

.blog-single-thumb img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(11, 26, 46, 0.12);
  display: block;
}

.blog-single-content {
  max-width: 760px;
}

.blog-single-content h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 32px 0 12px;
}

.blog-single-content h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 24px 0 10px;
}

.blog-single-content p {
  margin-bottom: 16px;
}

.blog-single-content ul,
.blog-single-content ol {
  margin: 0 0 16px 24px;
}

.blog-single-content a {
  color: var(--cyan);
  text-decoration: underline;
}

.blog-single-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 16px 0;
}

@media (max-width: 991px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-single-thumb {
    margin-top: -20px;
  }
}