/* ==========================================================================
   HYDROPOWER TECNIC SL — Hoja de estilos principal
   ========================================================================== */

/* --- Reset básico --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

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

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

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul {
  list-style: none;
}

/* --- Variables de marca --- */
:root {
  /* Colores corporativos */
  --color-primary: #1E3A8A;
  --color-primary-dark: #16296b;
  --color-secondary: #EF6D00;
  --color-secondary-dark: #c95a00;
  --color-dark: #0F172A;
  --color-light: #F3F4F6;
  --color-white: #FFFFFF;
  --color-success: #10B981;
  --color-danger: #DC2626;
  --color-text-primary: #0F172A;
  --color-text-secondary: #6B7280;
  --color-border: #E5E7EB;

  /* Tipografía */
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  /* Escala de tamaños */
  --size-xs: 8px;
  --size-sm: 12px;
  --size-base: 16px;
  --size-lg: 20px;
  --size-xl: 24px;
  --size-2xl: 32px;
  --size-3xl: 48px;
  --size-4xl: 64px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(30, 58, 138, 0.15);

  /* Transiciones */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Layout */
  --navbar-height: 72px;
  --radius-card: 8px;
  --radius-hero: 12px;
  --max-width: 1280px;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--color-text-primary);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--size-xl);
}

.section-eyebrow {
  display: inline-block;
  font-size: var(--size-sm);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--size-sm);
}

.section-title {
  font-size: clamp(28px, 4vw, 36px);
  color: var(--color-primary);
  margin-bottom: var(--size-base);
}

.section-subtitle {
  font-size: var(--size-lg);
  color: var(--color-text-secondary);
  max-width: 640px;
  margin-bottom: var(--size-2xl);
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--size-3xl);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary), #4f7cff);
  z-index: 200;
  transition: width 0.1s linear;
}

/* --- Foco accesible global --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Botones --- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: var(--radius-card);
  font-weight: 700;
  font-size: var(--size-base);
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), border-radius 0.35s ease;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.45) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: translateX(120%);
}

.btn:active {
  transform: scale(0.96);
  border-radius: 999px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  background: var(--color-secondary);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--color-secondary-dark);
  box-shadow: var(--shadow-md);
  transform: scale(1.02);
}

.btn--outline {
  background: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
  transform: scale(1.02);
}

.btn--full {
  width: 100%;
}

.btn--loading .btn__label {
  visibility: hidden;
}

.btn__spinner {
  display: none;
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.btn--loading .btn__spinner {
  display: block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- Placeholder de imagen (a sustituir por foto real) --- */
.placeholder-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  background: var(--color-border);
  color: var(--color-text-secondary);
  width: 100%;
  height: 100%;
  min-height: 200px;
  border-radius: inherit;
  overflow: hidden;
}

.placeholder-img svg {
  width: 40px;
  height: 40px;
  opacity: 0.5;
}

.placeholder-img span {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  padding: 0 16px;
  opacity: 0.7;
}

/* ==========================================================================
   1. NAVBAR
   ========================================================================== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--navbar-height);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

/* El desenfoque vive en un pseudo-elemento, no en .navbar: un filtro
   (backdrop-filter/filter/transform) puesto directamente en .navbar lo
   convertiría en el "containing block" de sus descendientes
   position:fixed, incluido el panel del menú móvil (.navbar__nav),
   rompiendo su tamaño/posición en pantalla en cuanto se activa
   .is-scrolled. Así el panel del menú sigue posicionándose siempre
   respecto al viewport. */
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.navbar__brand-name,
.navbar__link {
  color: #FFFFFF;
  transition: color var(--transition-fast);
}

.navbar__toggle-bar {
  background: #FFFFFF;
}

.navbar.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.08);
}

.navbar.is-scrolled::before {
  opacity: 1;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.navbar.is-scrolled .navbar__brand-name,
.navbar.is-scrolled .navbar__link {
  color: var(--color-text-primary);
}

.navbar.is-scrolled .navbar__toggle-bar {
  background: var(--color-primary);
}

.navbar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--size-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-xl);
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 4px 0;
}

.navbar__logo {
  height: 34px;
  width: auto;
}

.navbar__logo--dark {
  display: none;
}

.navbar.is-scrolled .navbar__logo--light {
  display: none;
}

.navbar.is-scrolled .navbar__logo--dark {
  display: block;
}

.navbar__brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
}

.navbar__nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
  justify-content: flex-end;
}

/* Burbuja líquida que se desliza y se deforma tras el enlace activo/hover,
   al estilo "Liquid Glass" de iOS 26. Puramente decorativa (aria-hidden). */
.nav-liquid-pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 34px;
  width: 0;
  transform: translate(0, -50%) scale(0.85);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -1px 6px rgba(15, 23, 42, 0.06);
  filter: url(#liquid-distort-soft);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease;
  z-index: 0;
}

.navbar.is-scrolled .nav-liquid-pill {
  background: rgba(30, 58, 138, 0.08);
  border-color: rgba(30, 58, 138, 0.15);
}

.nav-liquid-pill.is-active {
  opacity: 1;
}

.navbar__link {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity var(--transition-fast), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.navbar__link:hover,
.navbar__link:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.navbar__link.is-current {
  opacity: 1;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

.navbar__cta {
  flex-shrink: 0;
}

.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-card);
}

.navbar__toggle:hover {
  background: var(--color-light);
}

.navbar__toggle-bar {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-fast);
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(2) {
  opacity: 0;
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   2. HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-dark);
  padding: calc(var(--navbar-height) + var(--size-2xl)) 0 var(--size-4xl);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__media-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--color-dark) 0%, rgba(15, 23, 42, 0.88) 30%, rgba(15, 23, 42, 0.45) 58%, rgba(15, 23, 42, 0.15) 78%),
    linear-gradient(0deg, var(--color-dark) 0%, transparent 22%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  max-width: 640px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.65);
  margin-bottom: var(--size-lg);
}

.hero__title {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(38px, 6.2vw, 74px);
  line-height: 0.96;
  letter-spacing: -1px;
  margin-bottom: var(--size-xl);
}

.hero__title-line {
  color: #F5F1E8;
}

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: var(--size-2xl);
}

.hero__tags span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.hero__tags span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  margin-left: 18px;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-card);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #FFFFFF;
  transition: background-color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-fast);
}

.hero__cta:hover,
.hero__cta:focus-visible {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
  transform: scale(1.02);
}

.hero__note {
  margin-top: var(--size-lg);
  max-width: 40ch;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
}

.hero__partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  margin-top: var(--size-lg);
  margin-bottom: var(--size-lg);
  padding: 12px 20px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hero__partner-badge-logo {
  height: 26px;
  width: auto;
  flex-shrink: 0;
}

.hero__partner-badge-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.35;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.hero__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--size-xl);
  z-index: 1;
  display: flex;
  align-items: center;
}

.hero__meta-copyright {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

/* Indicador de "desliza" — se desvanece al hacer scroll */
.hero__swipe {
  position: absolute;
  left: 50%;
  bottom: var(--size-xl);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 1;
  transform: translateX(-50%);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hero__swipe.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
}

.hero__swipe-icon {
  position: relative;
  width: 22px;
  height: 34px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.hero__swipe-dot {
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: #FFFFFF;
  animation: swipeDot 1.8s ease-in-out infinite;
}

@keyframes swipeDot {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(10px); opacity: 0; }
  61% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.hero__swipe-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   MARQUESINA DE CERTIFICACIONES
   ========================================================================== */

.marquee {
  background: var(--color-dark);
  overflow: hidden;
  padding: 18px 0;
  white-space: nowrap;
}

.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  animation: marqueeScroll 28s linear infinite;
  width: max-content;
}

.marquee__item {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.75);
}

.marquee__dot {
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee--logos {
  padding: 30px 0;
}

.marquee--logos .marquee__track {
  animation-duration: 140s;
}

.marquee__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--size-2xl);
  opacity: 0.7;
  transition: opacity var(--transition-normal);
}

.marquee__logo img {
  height: 44px;
  width: auto;
  display: block;
}

.marquee--logos:hover .marquee__logo {
  opacity: 0.7;
}

.marquee__logo:hover {
  opacity: 1;
}

.marquee--static {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  white-space: normal;
}

.marquee--static .marquee__track {
  animation: none;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

/* ==========================================================================
   3. TRES PILARES / EMPRESA
   ========================================================================== */

.pilares {
  padding: var(--size-4xl) 0;
}

.pilares__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--size-2xl);
  perspective: 1200px;
}

.pilar-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-light);
  border-radius: var(--radius-card);
  padding: var(--size-xl);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.pilar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(180px 180px at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.8), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.pilar-card:hover::before,
.pilar-card:focus-within::before {
  opacity: 1;
}

.pilar-card > * {
  position: relative;
  z-index: 1;
}

.pilar-card:hover {
  transform: translateY(-6px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  box-shadow: var(--shadow-md);
}

.pilar-card__icon {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
  margin-bottom: var(--size-lg);
}

.pilar-card__title {
  position: relative;
  display: inline-block;
  font-size: var(--size-lg);
  color: var(--color-primary);
  margin-bottom: var(--size-base);
}

.pilar-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 2px;
  width: 28px;
  background: var(--color-secondary);
  transition: width var(--transition-normal);
}

.pilar-card:hover .pilar-card__title::after,
.pilar-card:focus-within .pilar-card__title::after {
  width: 100%;
}

.pilar-card__text {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.pilar-card__number {
  position: absolute;
  right: var(--size-lg);
  bottom: 6px;
  font-family: var(--font-mono);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.07;
  z-index: 0;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  pointer-events: none;
}

.pilar-card:hover .pilar-card__number,
.pilar-card:focus-within .pilar-card__number {
  opacity: 0.14;
  transform: translateY(-4px) scale(1.06);
}

.pilar-card__icon {
  transition: transform var(--transition-normal), color var(--transition-fast);
}

.pilar-card:hover .pilar-card__icon,
.pilar-card:focus-within .pilar-card__icon {
  transform: rotate(-8deg) scale(1.15);
  color: var(--color-secondary);
}

/* ==========================================================================
   4. CATEGORÍAS DE PRODUCTOS
   ========================================================================== */

.categorias {
  padding: var(--size-4xl) 0;
  background: var(--color-light);
}

.categorias__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-2xl);
  perspective: 1200px;
}

.product-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--size-xl);
  transform-style: preserve-3d;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 0%), rgba(30, 58, 138, 0.06), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.product-card:hover::before,
.product-card:focus-within::before {
  opacity: 1;
}

.product-card > * {
  position: relative;
  z-index: 1;
}

.product-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  transform: translateY(-6px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

.product-card__image {
  height: 200px;
  border-radius: 8px;
  margin-bottom: var(--size-lg);
  overflow: hidden;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.product-card:hover .product-card__image img {
  transform: scale(1.06);
}

.product-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px var(--size-base);
  margin-bottom: 8px;
}

.product-card__title {
  min-width: 0;
  font-size: var(--size-lg);
  color: var(--color-primary);
}

.product-card__count {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-success);
  background: rgba(16, 185, 129, 0.12);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.product-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.product-card__text {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: var(--size-lg);
}

.product-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  min-height: 44px;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.product-card__link:hover,
.product-card__link:focus-visible {
  color: var(--color-primary-dark);
  gap: 10px;
}

/* ==========================================================================
   5. CASOS DE USO / TESTIMONIOS
   ========================================================================== */

.stats {
  background: var(--color-primary);
  padding: var(--size-2xl) 0;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

.stats__item {
  padding: var(--size-base);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

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

.stats__number {
  font-family: var(--font-heading);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  color: var(--color-white);
}

.stats__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 4px;
}

.testimonios {
  padding: var(--size-4xl) 0;
}

/* ==========================================================================
   6. ESPECIFICACIONES TÉCNICAS
   ========================================================================== */

.specs {
  padding: var(--size-4xl) 0;
  background: var(--color-light);
}

.specs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--size-2xl);
  max-width: 1080px;
  margin: 0 auto;
  perspective: 1200px;
}

.spec-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--size-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-style: preserve-3d;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.spec-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(200px 200px at var(--mx, 50%) var(--my, 0%), rgba(30, 58, 138, 0.06), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.spec-card:hover::before,
.spec-card:focus-within::before {
  opacity: 1;
}

.spec-card > * {
  position: relative;
  z-index: 1;
}

.spec-card:hover {
  transform: translateY(-6px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.spec-card__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(30, 58, 138, 0.08);
  color: var(--color-primary);
  margin-bottom: var(--size-base);
  transition: background var(--transition-normal), transform var(--transition-normal);
}

.spec-card:hover .spec-card__icon {
  background: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.08) rotate(-6deg);
}

.spec-card__icon svg {
  width: 24px;
  height: 24px;
}

.spec-card__title {
  font-size: 15px;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.spec-card__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.spec-card__desc strong {
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-weight: 700;
}

.spec-card__bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
  margin: 4px 0 10px;
}

.spec-card__bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), #4f7cff);
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.spec-card__value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
}

.spec-card__value span {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   7. CONTACTO
   ========================================================================== */

.contacto {
  padding: var(--size-4xl) 0;
}

.contacto__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--size-2xl);
  align-items: stretch;
  max-width: 960px;
  margin: 0 auto;
}

.contacto__form {
  max-width: none;
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: var(--size-2xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--size-lg);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--size-lg);
}

.form-field label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
}

.form-field label .required {
  color: var(--color-danger);
}

.form-field input,
.form-field select,
.form-field textarea {
  min-height: 48px;
  padding: 0 var(--size-base);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card);
  font-family: var(--font-body);
  font-size: var(--size-base);
  color: var(--color-text-primary);
  background: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}

.form-field textarea {
  min-height: 110px;
  padding: 12px var(--size-base);
  resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #9CA3AF;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  border-bottom-width: 3px;
  box-shadow: 0 2px 8px rgba(239, 109, 0, 0.15);
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--color-danger);
}

.form-field__error {
  display: none;
  font-size: 12px;
  color: var(--color-danger);
  font-weight: 500;
}

.form-field.has-error .form-field__error {
  display: block;
}

.form-field__hint {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.form-field--checkbox {
  gap: 8px;
}

.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.consent-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  margin: 1px 0 0;
  border: 1.5px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-white);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.consent-check input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.consent-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.consent-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.consent-check a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
}

.form-field--checkbox.has-error .consent-check input[type="checkbox"] {
  border-color: var(--color-danger);
}

.contacto__submit {
  position: relative;
  margin-top: 8px;
}

.form-status {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 14px var(--size-base);
  border-radius: var(--radius-card);
  font-size: 14px;
  font-weight: 500;
}

.form-status.is-visible {
  display: flex;
}

.form-status--success {
  background: rgba(16, 185, 129, 0.1);
  color: #067a56;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.form-status--error {
  background: rgba(220, 38, 38, 0.08);
  color: var(--color-danger);
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.contacto__info {
  background: var(--color-dark);
  color: var(--color-white);
  border-radius: 16px;
  padding: var(--size-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--size-xl);
  height: 100%;
  box-shadow: var(--shadow-md);
}

.contacto__info-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.contacto__info-item svg {
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.65);
  flex-shrink: 0;
  margin-top: 2px;
}

.contacto__info-item strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

.contacto__info-item a,
.contacto__info-item span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

.contacto__info-item a:hover {
  color: var(--color-white);
}

.contacto__hours {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--size-xl);
}

.contacto__hours h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
}

.contacto__hours p {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   BLOG (teaser)
   ========================================================================== */

/* ==========================================================================
   8. FOOTER
   ========================================================================== */

.footer {
  background: var(--color-dark);
  color: var(--color-white);
  padding: var(--size-4xl) 0 var(--size-xl);
  border-top: 1px solid var(--color-primary);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--size-2xl);
  padding-bottom: var(--size-2xl);
}

.footer__brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--size-lg);
  margin-bottom: 10px;
}

.footer__tagline {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 260px;
  line-height: 1.6;
}

.footer__col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--size-base);
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__col a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
  min-height: 44px;
}

.footer__col a:hover,
.footer__col a:focus-visible {
  color: var(--color-white);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: var(--size-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   REVEAL / SCROLL ANIMATIONS
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Aparición escalonada dentro de rejillas (grid) */
.pilares__grid .reveal:nth-child(2),
.categorias__grid .reveal:nth-child(2),
.specs__grid .reveal:nth-child(2),
.stats__grid .reveal:nth-child(2) {
  transition-delay: 0.08s;
}

.pilares__grid .reveal:nth-child(3),
.categorias__grid .reveal:nth-child(3),
.specs__grid .reveal:nth-child(3),
.stats__grid .reveal:nth-child(3) {
  transition-delay: 0.16s;
}

.categorias__grid .reveal:nth-child(4),
.specs__grid .reveal:nth-child(4) {
  transition-delay: 0.24s;
}

.specs__grid .reveal:nth-child(5) {
  transition-delay: 0.32s;
}

.specs__grid .reveal:nth-child(6) {
  transition-delay: 0.4s;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Red de seguridad: si el JS falla o el navegador no soporta IO,
   el contenido debe seguir siendo legible. */
.reveal[data-split] {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   CONFETI DE ÉXITO (envío de formulario)
   ========================================================================== */

.confetti-piece {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 400;
  animation: confettiBurst 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes confettiBurst {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.6);
    opacity: 0;
  }
}

/* ==========================================================================
   LIQUID GLASS — sistema reutilizable inspirado en iOS 26
   ========================================================================== */

.glass-surface {
  position: relative;
  isolation: isolate;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.22));
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-top-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 10px 34px rgba(15, 23, 42, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -12px 18px -14px rgba(15, 23, 42, 0.12);
}

.glass-surface--dark {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 -12px 18px -14px rgba(0, 0, 0, 0.35);
}

/* Brillo especular que sigue el puntero (variables --mx/--my en % via JS) */
.glass-sheen {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(160px 160px at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.65), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  mix-blend-mode: overlay;
}

.glass-surface:hover .glass-sheen,
.glass-surface:focus-within .glass-sheen {
  opacity: 1;
}

/* Burbujas orgánicas que se deforman como gelatina, con distorsión SVG */
.liquid-blob {
  position: absolute;
  border-radius: 46% 54% 62% 38% / 42% 46% 54% 58%;
  filter: url(#liquid-distort);
  animation: liquidMorph 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes liquidMorph {
  0%, 100% { border-radius: 46% 54% 62% 38% / 42% 46% 54% 58%; transform: rotate(0deg) scale(1); }
  25%      { border-radius: 62% 38% 42% 58% / 58% 62% 38% 42%; transform: rotate(6deg) scale(1.04); }
  50%      { border-radius: 38% 62% 55% 45% / 45% 38% 62% 55%; transform: rotate(-4deg) scale(0.97); }
  75%      { border-radius: 55% 45% 38% 62% / 62% 55% 45% 38%; transform: rotate(3deg) scale(1.02); }
}

/* ==========================================================================
   DOCK FLOTANTE DE ACCIONES RÁPIDAS
   ========================================================================== */

.dock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 150;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 10px;
  border-radius: 999px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), bottom 0.35s ease;
}

.dock.is-raised {
  transform: translateY(calc(-1 * var(--cookie-offset, 110px)));
}

.back-to-top.is-visible.is-raised {
  transform: translateY(calc(-1 * var(--cookie-offset, 110px))) scale(1);
}

.dock__item {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color var(--transition-fast);
  will-change: transform;
}

.dock__item svg {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
}

.dock__item:hover,
.dock__item:focus-visible {
  color: var(--color-primary-dark);
}

.dock__tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.dock__item:hover .dock__tooltip,
.dock__item:focus-visible .dock__tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   BOTÓN VOLVER ARRIBA
   ========================================================================== */

.back-to-top {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 150;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  opacity: 0;
  transform: translateY(16px) scale(0.8);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-to-top:hover {
  color: var(--color-primary-dark);
  transform: translateY(-3px) scale(1.05);
}

/* ==========================================================================
   COOKIES — banner + panel de personalización
   ========================================================================== */

.btn--outline-dark {
  background: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.35);
}

.btn--outline-dark:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.02);
}

.btn--ghost-dark {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  min-height: 48px;
  padding: 0 20px;
}

.btn--ghost-dark:hover {
  color: var(--color-white);
  text-decoration: underline;
}

/* Variante para fondos claros (p. ej. el panel de cookies) */
.btn--outline-light {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-border);
}

.btn--outline-light:hover {
  background: var(--color-light);
  border-color: var(--color-primary);
  transform: scale(1.02);
}

.cookie-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 190;
  max-width: 760px;
  margin: 0 auto;
  border-radius: 20px;
  padding: var(--size-xl);
  color: var(--color-white);
  background: var(--color-dark);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-lg);
  justify-content: space-between;
  transform: translateY(140%);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner__title {
  font-weight: 700;
  font-size: var(--size-lg);
  margin-bottom: 6px;
}

.cookie-banner__text {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 46ch;
}

.cookie-banner__text a {
  color: var(--color-white);
  font-weight: 700;
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--size-lg);
}

.cookie-modal[hidden] {
  display: none;
}

.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cookie-modal__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  overflow-y: auto;
  border-radius: 24px;
  padding: var(--size-2xl);
  color: var(--color-text-primary);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.86));
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.cookie-modal__logo {
  height: 32px;
  width: auto;
  margin-bottom: var(--size-base);
}

.cookie-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-light);
  color: var(--color-text-secondary);
  font-size: 16px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.cookie-modal__close:hover {
  background: var(--color-border);
  color: var(--color-text-primary);
}

.cookie-modal__panel h2 {
  color: var(--color-primary);
  font-size: var(--size-xl);
  margin-bottom: 10px;
}

.cookie-modal__intro {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--size-xl);
}

.cookie-category {
  padding: var(--size-base) 0;
  border-top: 1px solid var(--color-border);
}

.cookie-category__head {
  display: flex;
  gap: var(--size-base);
  align-items: flex-start;
}

.cookie-category h3 {
  font-size: 15px;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.cookie-category p {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.cookie-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: var(--size-xl);
  padding-top: var(--size-lg);
  border-top: 1px solid var(--color-border);
}

/* Interruptor (switch) accesible */
.switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  margin-top: 2px;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.switch__track {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: 999px;
  transition: background var(--transition-fast);
}

.switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.switch input:checked ~ .switch__track {
  background: var(--color-success);
}

.switch input:checked ~ .switch__track .switch__thumb {
  transform: translateX(18px);
}

.switch input:disabled ~ .switch__track {
  background: var(--color-success);
  opacity: 0.6;
  cursor: not-allowed;
}

.switch input:focus-visible ~ .switch__track {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Logo en footer */
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.footer__logo {
  height: 30px;
  width: auto;
}

.footer__cookie-link {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--transition-fast);
}

.footer__cookie-link:hover {
  color: var(--color-white);
}

/* ==========================================================================
   PÁGINAS LEGALES
   ========================================================================== */

.legal-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%);
  padding: calc(var(--navbar-height) + var(--size-2xl)) 0 var(--size-2xl);
  color: var(--color-white);
}

.legal-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--size-lg);
  transition: color var(--transition-fast);
}

.legal-hero__back:hover {
  color: var(--color-white);
}

.legal-hero__title {
  font-size: clamp(28px, 4vw, 40px);
  color: var(--color-white);
}

.legal-hero__updated {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.legal-content {
  padding: var(--size-3xl) 0 var(--size-4xl);
  max-width: 780px;
  margin: 0 auto;
}

.legal-content h2 {
  color: var(--color-primary);
  font-size: var(--size-xl);
  margin-top: var(--size-2xl);
  margin-bottom: var(--size-base);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  color: var(--color-text-primary);
  font-size: var(--size-lg);
  margin-top: var(--size-xl);
  margin-bottom: 8px;
}

.legal-content p {
  margin-bottom: var(--size-base);
  line-height: 1.8;
  color: var(--color-text-secondary);
}

.legal-content ul,
.legal-content ol {
  margin: 0 0 var(--size-base) var(--size-xl);
  color: var(--color-text-secondary);
  line-height: 1.8;
}

.legal-content li {
  margin-bottom: 6px;
}

.legal-content strong {
  color: var(--color-text-primary);
}

.legal-content a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
}

.legal-content table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  margin-bottom: var(--size-xl);
  font-size: 14px;
}

.legal-content .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--size-xl);
}

.legal-content .table-scroll table {
  margin-bottom: 0;
}

.legal-content th,
.legal-content td {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  vertical-align: top;
}

.legal-content th {
  background: var(--color-light);
  color: var(--color-primary);
}

.legal-content code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--color-light);
  border: 1px solid var(--color-border);
  padding: 1px 6px;
  border-radius: 4px;
}

.legal-todo {
  display: inline;
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-danger);
  border: 1px dashed rgba(220, 38, 38, 0.4);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
}

.legal-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: var(--size-xl);
  margin-top: var(--size-2xl);
  border-top: 1px solid var(--color-border);
}

.legal-nav-links a {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
  background: var(--color-light);
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.legal-nav-links a:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ==========================================================================
   PÁGINA SERVICIOS
   ========================================================================== */

.services-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%);
  padding: calc(var(--navbar-height) + var(--size-2xl)) 0 var(--size-3xl);
  color: var(--color-white);
}

.services-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--size-lg);
  transition: color var(--transition-fast);
}

.services-hero__back:hover {
  color: var(--color-white);
}

.services-hero__title {
  font-size: clamp(30px, 4.5vw, 44px);
  color: var(--color-white);
  max-width: 640px;
}

.services-hero__text {
  margin-top: var(--size-base);
  max-width: 560px;
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--size-lg);
  line-height: 1.6;
}

.services-nav {
  position: sticky;
  top: var(--navbar-height);
  z-index: 40;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 0;
}

.services-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  overflow-x: auto;
}

.services-nav__list a {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-text-secondary);
  background: var(--color-light);
  padding: 8px 16px;
  border-radius: 999px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.services-nav__list a:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.service-block {
  scroll-margin-top: calc(var(--navbar-height) + 60px);
}

.service-block:nth-child(even) .service-block__content-wrap {
  background: var(--color-light);
}

.service-block__content-wrap {
  padding: var(--size-3xl) 0;
  transition: background var(--transition-normal);
}

.service-block__content {
  position: relative;
  max-width: 720px;
}

.service-block__number {
  position: absolute;
  right: 0;
  top: -10px;
  font-family: var(--font-mono);
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.06;
  z-index: 0;
  pointer-events: none;
}

.service-block__count {
  position: relative;
  z-index: 1;
}

/* Insignia decorativa de escritorio (ver media query más abajo); oculta
   por defecto para no alterar la composición móvil. */
.service-block__index {
  display: none;
}

.service-block__title {
  position: relative;
  z-index: 1;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--color-primary);
  margin: var(--size-sm) 0 var(--size-base);
}

.service-block__text {
  position: relative;
  z-index: 1;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--size-lg);
}

.service-block__chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin-bottom: var(--size-xl);
}

.service-block__chips li {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(30, 58, 138, 0.08);
  border: 1px solid rgba(30, 58, 138, 0.15);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.services-cta {
  text-align: center;
  padding: var(--size-4xl) 0;
  background: var(--color-dark);
  color: var(--color-white);
}

.services-cta__title {
  color: var(--color-white);
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: var(--size-base);
}

.services-cta__text {
  max-width: 520px;
  margin: 0 auto var(--size-xl);
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   UBICACIÓN Y RESEÑAS DE GOOGLE
   ========================================================================== */

.ubicacion {
  padding: var(--size-4xl) 0;
  background: var(--color-light);
}

.ubicacion__map {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  min-height: 460px;
  background: var(--color-border);
  max-width: 1040px;
  margin: 0 auto;
}

.ubicacion__map iframe {
  width: 100%;
  height: 100%;
  min-height: 460px;
  border: 0;
  display: block;
}

/* Enlace directo a "Cómo llegar", siempre visible, sin depender de que el
   mapa esté cargado -- usa destination_place_id para que el destino sea
   inequívocamente Hydropower Tecnic, no cualquier negocio vecino que
   Google tenga indexado cerca de esas coordenadas. */
.ubicacion__directions-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--size-sm);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-secondary);
}

.ubicacion__directions-link:hover,
.ubicacion__directions-link:focus-visible {
  color: var(--color-secondary-dark);
  text-decoration: underline;
}

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-base);
  height: 100%;
  min-height: 460px;
  padding: var(--size-2xl);
  text-align: center;
  color: var(--color-text-secondary);
}

.map-placeholder svg {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
  opacity: 0.6;
}

.map-placeholder__text {
  max-width: 420px;
  font-size: 13px;
  line-height: 1.6;
}

.map-placeholder__text a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
}

.reviews-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: var(--size-xl);
  display: flex;
  flex-direction: column;
  gap: var(--size-base);
  box-shadow: var(--shadow-sm);
}

.reviews-card__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reviews-card__brand svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.reviews-card__brand span {
  font-weight: 700;
  color: var(--color-text-primary);
}

.reviews-card__rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reviews-card__stars {
  color: #FBBC04;
  font-size: 20px;
  letter-spacing: 2px;
}

.reviews-card__score {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-text-primary);
}

.reviews-card__count {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.reviews-card__text {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.reviews-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.reviews-card__actions .btn {
  min-height: 44px;
  padding: 0 20px;
  font-size: 14px;
}

/* Variante horizontal, usada como cabecera de prueba social en Casos de Uso.
   Estructura en dos filas -- cabecera (marca + valoración + acciones) y,
   debajo, la línea de texto -- en vez de meter el párrafo a competir por
   espacio en la misma fila que las etiquetas en negrita: así nunca queda
   descentrado ni se parte en dos líneas de forma impredecible. */
.reviews-card--inline {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-bottom: var(--size-2xl);
}

.reviews-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-lg);
}

.reviews-card__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-lg);
}

.reviews-card--inline .reviews-card__text {
  margin: 0;
  max-width: 640px;
}

.reviews-card--inline .reviews-card__actions {
  margin-top: 0;
  flex-shrink: 0;
}

/* ==========================================================================
   RESEÑAS DE GOOGLE (datos en vivo desde /api/reviews)
   ========================================================================== */

.google-reviews {
  margin-top: var(--size-2xl);
}

/* Carrusel: flechas a los lados, track desplazable en medio. Las flechas
   viven FUERA del track (no superpuestas encima de las tarjetas), así
   nunca tapan contenido ni hace falta un degradado para disimular el
   corte del borde. */
.reviews-carousel {
  display: flex;
  align-items: center;
  gap: var(--size-base);
  max-width: 1180px;
  margin: 0 auto;
}

/* El propio track es el elemento con scroll -- con scroll-snap nativo el
   navegador se encarga del rebote, el arrastre táctil y de no dejar nunca
   una tarjeta "a medias" al soltar, que es justo donde suelen fallar los
   carruseles hechos a mano con transform + cálculos de píxeles. La barra
   de scroll se oculta visualmente (sigue siendo desplazable con teclado
   gracias al tabindex) para que se lea como un carrusel, no como una lista
   con scrollbar. */
.google-reviews__grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--size-xl);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: 4px;
}

.google-reviews__grid::-webkit-scrollbar {
  display: none;
}

.google-reviews__grid:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 8px;
}

.reviews-carousel__arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  color: var(--color-primary);
  transition: box-shadow var(--transition-normal), transform var(--transition-fast), border-color var(--transition-normal), background var(--transition-fast);
}

.reviews-carousel__arrow svg {
  width: 18px;
  height: 18px;
}

.reviews-carousel__arrow:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(30, 58, 138, 0.25);
  transform: translateY(-2px);
}

.reviews-carousel__arrow:active {
  transform: translateY(0);
}

.reviews-carousel__arrow:disabled {
  opacity: 0.35;
  box-shadow: none;
  transform: none;
  cursor: default;
}

.reviews-carousel__arrow[hidden] {
  display: none;
}

/* Ancho fijo (0 0, sin encoger) a propósito: con scroll-snap cada tarjeta
   necesita un ancho estable para que los puntos de "enganche" no bailen
   según cuánto espacio sobre en el viewport. El ancho en sí se ajusta por
   breakpoint más abajo. */
.review-card {
  flex: 0 0 380px;
  max-width: 86vw;
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: var(--size-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal);
}

.review-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: rgba(30, 58, 138, 0.18);
  transform: translateY(-4px);
}

.review-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Avatar de la reseña: iniciales sobre degradado de marca. No se cargan las
   fotos de perfil de Google a propósito -- servirlas desde googleusercontent.com
   supondría ceder la IP de cada visitante a Google sin consentimiento (ver el
   comentario en main.js, buildReviewCard). */
.review-card__avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-light);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.review-card__avatar--fallback {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

.review-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.review-card__author {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.review-card__author:hover,
a.review-card__author:focus-visible {
  text-decoration: underline;
}

.review-card__date {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  text-transform: lowercase;
}

.review-card__badge {
  width: 20px;
  height: 20px;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.9;
}

.review-card__stars {
  color: #FBBC04;
  font-size: 17px;
  letter-spacing: 3px;
  line-height: 1;
}

.review-card__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-primary);
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

.review-card.is-expanded .review-card__text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.review-card__more {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-secondary);
  padding: 4px 0;
  min-height: 32px;
  transition: color var(--transition-fast);
}

.review-card__more:hover,
.review-card__more:focus-visible {
  color: var(--color-secondary-dark);
  text-decoration: underline;
}

.google-reviews__legal {
  margin-top: var(--size-lg);
  text-align: center;
  font-size: 12.5px;
  color: var(--color-text-secondary);
}

/* Entrada escalonada de las tarjetas: el retardo lo fija main.js por índice,
   porque el HTML llega después de que initReveal haya recorrido el DOM. */
.review-card--enter {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow var(--transition-normal),
              border-color var(--transition-normal);
}

.review-card--enter.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Esqueletos de carga --- */

.review-card--skeleton {
  pointer-events: none;
  gap: 10px;
}

.review-card--skeleton:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border);
}

.skeleton {
  border-radius: 6px;
  background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 50%, #EEF1F6 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton--avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.skeleton--line {
  height: 12px;
}

.skeleton--w60 {
  width: 60%;
}

.skeleton--w40 {
  width: 40%;
}

.skeleton--block {
  height: 96px;
  margin-top: 4px;
}

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

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}

@media (max-width: 1040px) {
  .review-card {
    flex-basis: 320px;
  }
}

@media (max-width: 640px) {
  /* En vez de encajar las flechas al lado del track (les resta ancho a las
     tarjetas, y calcular ese ancho en vw fue justo lo que las desbordó: un
     "84vw" tira del ANCHO DE LA PÁGINA, no del hueco real que le queda al
     track una vez descontadas las flechas -- con viewport estrecho y
     flechas + huecos de por medio, la tarjeta pedía más sitio del que
     había). Aquí se envuelve: el track ocupa toda la fila de arriba a
     ancho completo (100% de su propio contenedor, nunca de la ventana), y
     las flechas caen a una fila propia debajo, centradas. */
  .reviews-carousel {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--size-base);
  }

  .google-reviews__grid {
    order: 1;
    flex-basis: 100%;
    width: 100%;
    gap: var(--size-lg);
  }

  .reviews-carousel__arrow {
    order: 2;
    width: 40px;
    height: 40px;
  }

  .reviews-carousel__arrow svg {
    width: 16px;
    height: 16px;
  }

  /* Tarjeta a ancho completo del track (100% de su propio contenedor, ya
     no de la ventana): con un solo hueco de margen a la derecha se
     insinúa que hay más para desplazar, sin arriesgarse a desbordar. */
  .review-card {
    flex-basis: calc(100% - 28px);
    max-width: calc(100% - 28px);
    padding: var(--size-lg);
  }

  .review-card__text {
    font-size: 14.5px;
    -webkit-line-clamp: 8;
    line-clamp: 8;
  }
}

/* ==========================================================================
   SLIDESHOW DE IMÁGENES DE SERVICIOS
   ========================================================================== */

.service-slideshow {
  position: relative;
  height: 460px;
  overflow: hidden;
  background: var(--color-dark);
}

.service-slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.service-slideshow__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.service-slideshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: serviceKenBurns 10s ease-in-out infinite alternate;
}

@keyframes serviceKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}

.service-slideshow__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(15, 23, 42, 0.75) 0%, rgba(15, 23, 42, 0.1) 55%, transparent 75%);
}

.service-slideshow__label {
  position: absolute;
  left: var(--size-xl);
  bottom: var(--size-xl);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
}

.service-slideshow__label-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-primary), #4f7cff);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.service-slideshow__label-icon svg {
  width: 18px;
  height: 18px;
}

.service-slideshow__label-title {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.service-slideshow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  cursor: pointer;
}

.service-slideshow__arrow svg {
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
}

.service-slideshow__arrow--prev {
  left: var(--size-lg);
}

.service-slideshow__arrow--next {
  right: var(--size-lg);
}

.service-slideshow__dots {
  position: absolute;
  right: var(--size-xl);
  bottom: var(--size-xl);
  z-index: 3;
  display: flex;
  gap: 8px;
}

.service-slideshow__dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width var(--transition-fast), background var(--transition-fast);
}

.service-slideshow__dots button.is-active {
  width: 22px;
  background: var(--color-white);
}

/* ==========================================================================
   SERVICIOS — COMPOSICIÓN DE ESCRITORIO
   Solo por encima del breakpoint móvil (1041px): imagen contenida en
   tarjeta junto al texto, en vez del banner a sangre completa que se ve
   agobiante en pantallas grandes. En móvil no se toca nada de esto.
   ========================================================================== */

@media (min-width: 1041px) {
  .service-block {
    display: flex;
    align-items: stretch;
    gap: var(--size-3xl);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--size-3xl) var(--size-xl);
  }

  .service-block--reverse {
    flex-direction: row-reverse;
  }

  .service-slideshow {
    flex: 0 0 44%;
    height: auto;
    min-height: 440px;
    border-radius: 24px;
    box-shadow: var(--shadow-md);
  }

  .service-slideshow__scrim {
    background: linear-gradient(0deg, rgba(15, 23, 42, 0.35) 0%, transparent 35%);
  }

  .service-slideshow__label {
    display: none;
  }

  .service-block__content-wrap {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    background: transparent;
    padding: 0;
  }

  .service-block__content-wrap .container {
    max-width: none;
    padding: 0;
    margin: 0;
  }

  .service-block__content {
    max-width: none;
  }

  .service-block__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 56px;
    height: 56px;
    margin-bottom: var(--size-lg);
    margin-right: 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--color-primary), #4f7cff);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
    animation: serviceIndexFloat 4s ease-in-out infinite;
    transition: transform var(--transition-normal), border-radius var(--transition-normal);
  }

  .service-block__index svg {
    width: 26px;
    height: 26px;
  }

  .service-block__count {
    vertical-align: middle;
  }

  .service-block:hover .service-block__index {
    transform: rotate(-8deg) scale(1.08);
    border-radius: 50%;
  }

  .service-block__title {
    font-size: clamp(32px, 3.2vw, 42px);
  }

  .service-block__text {
    font-size: 17px;
    line-height: 1.75;
  }

  .service-block__chips li {
    font-size: 13px;
    padding: 7px 14px;
  }
}

@keyframes serviceIndexFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

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

  .contacto__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

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

  .catalog-block__inner,
  .catalog-block--reverse .catalog-block__inner {
    flex-direction: column;
  }

  .hero__partner-badge {
    padding: 10px 16px;
    gap: 10px;
  }

  .hero__partner-badge-logo {
    height: 20px;
  }

  .hero__partner-badge-text {
    font-size: 10px;
  }
}

@media (max-width: 1040px) {
  .navbar__nav {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: var(--size-lg) var(--size-xl);
    transform: translateX(100%);
    transition: transform var(--transition-normal);
    overflow-y: auto;
  }

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

  .nav-liquid-pill {
    display: none;
  }

  .navbar__nav .navbar__link {
    color: var(--color-text-primary);
    padding: 16px 4px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 16px;
    border-radius: 0;
  }

  .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar {
    background: var(--color-primary);
  }

  .navbar__nav .navbar__cta {
    margin-top: var(--size-lg);
  }

  .navbar__nav .btn {
    width: 100%;
  }

  .navbar__toggle {
    display: flex;
  }

  /* Fix: en WebKit/Chrome móvil, un ancestro position:fixed con
     backdrop-filter (.navbar.is-scrolled) puede repintarse en el sitio
     correcto pero dejar de recibir hit-tests de touch hasta el siguiente
     repintado. Promovemos solo el botón (no el navbar entero: darle
     transform al navbar convierte a .navbar__nav position:fixed en
     absolute respecto a él, rompiendo el panel del menú) a su propia
     capa de composición para que siga respondiendo al tacto tras hacer
     scroll. */
  .navbar__toggle {
    touch-action: manipulation;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
  }

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

  .stats__grid {
    grid-template-columns: 1fr;
    gap: var(--size-lg);
  }

  .stats__item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: var(--size-lg);
  }

  .stats__item:last-child {
    border-bottom: none;
    padding-bottom: var(--size-base);
  }

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

@media (max-width: 640px) {
  :root {
    --size-base: 14px;
    --size-4xl: 48px;
    --size-3xl: 36px;
  }

  .container {
    padding: 0 var(--size-lg);
  }

  .testimonios {
    padding-top: 80px;
  }

  .hero__partner-badge {
    padding: 10px 14px;
  }

  .specs__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .service-slideshow {
    height: 260px;
  }

  .service-slideshow__arrow {
    width: 36px;
    height: 36px;
  }

  .service-slideshow__arrow svg {
    width: 16px;
    height: 16px;
  }

  .service-slideshow__arrow--prev {
    left: var(--size-base);
  }

  .service-slideshow__arrow--next {
    right: var(--size-base);
  }

  .service-slideshow__label {
    left: var(--size-base);
    bottom: var(--size-base);
  }

  .service-slideshow__dots {
    right: var(--size-base);
    bottom: var(--size-base);
  }

  .service-block__number {
    font-size: 56px;
  }

  .services-nav__list {
    flex-wrap: nowrap;
  }

  .reviews-card--inline {
    padding: var(--size-lg);
    gap: 12px;
  }

  .reviews-card__head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .reviews-card--inline .reviews-card__text {
    max-width: none;
    font-size: 13px;
  }

  .reviews-card--inline .reviews-card__actions {
    flex-direction: column;
    width: 100%;
  }

  .reviews-card--inline .reviews-card__actions .btn {
    width: 100%;
  }

  .hero {
    min-height: 100svh;
    align-items: flex-end;
    padding-bottom: 96px;
  }

  .hero__media-overlay {
    background:
      linear-gradient(0deg, var(--color-dark) 15%, rgba(15, 23, 42, 0.55) 55%, rgba(15, 23, 42, 0.25) 100%),
      linear-gradient(90deg, var(--color-dark) 0%, rgba(15, 23, 42, 0.55) 60%, rgba(15, 23, 42, 0.25) 100%);
  }

  .hero__tags {
    gap: 10px 14px;
  }

  .hero__tags span:not(:last-child)::after {
    margin-left: 14px;
  }

  .hero__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .hero__swipe {
    display: none;
  }

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

  .product-card {
    padding: var(--size-lg);
  }

  .product-card__image {
    height: 170px;
  }

  .product-card__count {
    font-size: 10px;
  }

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

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--size-xl);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .dock {
    right: 14px;
    bottom: 14px;
    gap: 10px;
  }

  .dock__item {
    width: 48px;
    height: 48px;
  }

  .dock__item svg {
    width: 20px;
    height: 20px;
  }

  .dock__tooltip {
    display: none;
  }

  .back-to-top {
    left: 14px;
    bottom: 14px;
    width: 44px;
    height: 44px;
  }

  .cookie-banner {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: var(--size-base) var(--size-lg);
    border-radius: 18px;
    flex-direction: column;
    align-items: stretch;
    gap: var(--size-base);
  }

  .cookie-banner__title {
    font-size: var(--size-base);
    margin-bottom: 2px;
  }

  .cookie-banner__text {
    max-width: none;
    font-size: 12px;
  }

  .cookie-banner__actions {
    width: 100%;
    flex-direction: column-reverse;
    gap: 8px;
  }

  .cookie-banner__actions .btn {
    width: 100%;
    flex: none;
    min-height: 42px;
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1520px;
  }
}

/* ==========================================================================
   ACCESIBILIDAD DE MOVIMIENTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Solo se atenúa el movimiento ambiental, continuo y no solicitado
     (parallax, morfado infinito, marquesina). Las micro-interacciones
     puntuales (hover, tarjetas, botones, dock, confeti, contador) se
     mantienen: Windows activa esta preferencia por defecto en muchos
     equipos y desactivarlas todas deja la web "muerta" sin motivo real. */
  .hero__blob,
  .liquid-blob {
    animation: none !important;
  }

  .marquee__track {
    animation-duration: 90s !important;
  }

  .marquee--logos .marquee__track {
    animation-duration: 450s !important;
  }

  [data-parallax] {
    transform: none !important;
  }
}

/* --- Campo trampa del formulario de contacto -------------------------------
   Oculto sin usar display:none ni visibility:hidden: algunos bots detectan
   esas dos y saltan el campo. Así queda fuera de la pantalla y sin tamaño,
   pero sigue siendo un input normal para quien rellena el DOM a ciegas. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}