/* =====================================================================
   PCW — Hoja de estilos principal (CSS/style.css)
   HTML5 + CSS3 puro, sin frameworks.

   Las secciones siguen el mismo orden en que aparecen en index.html.
   Cada sección incluye sus propios ajustes responsive al final.

   ÍNDICE
    1. Variables (colores, fuentes, tamaños)
    2. Reset y estilos base
    3. Utilidades (contenedor, accesibilidad, imágenes faltantes)
    4. Botones
    5. Títulos de sección
    6. Header y menú de navegación
    7. Hero: carrusel de banners (#inicio)
    8. Nosotros (#nosotros)
    9. Servicios (#servicios)
   10. Productos y Proyectos (#productos, #proyectos)
   11. Tarjetas de redes sociales (Instagram y Facebook)
   12. Contacto (#contacto)
   13. Footer
   14. Botón "volver arriba"
   15. Animaciones al hacer scroll
   16. Asistente técnico (chat con Gemini)
   17. Movimiento reducido (accesibilidad)
   18. Modo oscuro (botón luna / sol de JS/theme.js)
   19. Outlet: ajustes de orden y modo oscuro

   Archivos relacionados (no están aquí):
   - JS/i18n.js        → botón de idioma ES / EN (trae sus propios estilos)
   - CSS/outlet.css    → sección Outlet (todo con prefijo .pcwo);
                         sus ajustes y su modo oscuro están en la sección 19
   ===================================================================== */


/* =====================================================================
   1. VARIABLES
   Valores reutilizables en todo el sitio. Para cambiar un color o
   tamaño en toda la página, se cambia solo aquí.
   ===================================================================== */
:root {
  /* Paleta corporativa */
  --navy: #031B3D;          /* azul marino: fondos oscuros y títulos */
  --navy-2: #06265A;        /* azul marino claro: degradados */
  --blue: #0057B8;          /* azul corporativo */
  --electric: #008CFF;      /* azul eléctrico: acentos y botones */
  --sky: #35B9FF;           /* celeste: detalles y foco */
  --white: #FFFFFF;
  --gray-light: #F4F6F8;    /* fondos claros */
  --gray-text: #4B5563;     /* texto de párrafos */
  --ink: #0F1E36;           /* texto oscuro del menú */

  /* Degradados */
  --grad-blue: linear-gradient(135deg, var(--blue) 0%, var(--electric) 100%);
  --grad-navy: linear-gradient(160deg, #021230 0%, var(--navy) 45%, var(--navy-2) 100%);

  /* Tipografías (cargadas desde Google Fonts en index.html) */
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;  /* títulos y botones */
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;    /* texto general */

  /* Bordes redondeados */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-sm: 0 4px 14px rgba(3, 27, 61, 0.08);
  --shadow-md: 0 14px 34px rgba(3, 27, 61, 0.16);
  --shadow-glow: 0 0 0 1px rgba(53, 185, 255, 0.35), 0 18px 40px rgba(0, 140, 255, 0.25);

  /* Medidas generales */
  --container: min(1200px, 100% - clamp(2rem, 6vw, 4rem));  /* ancho máximo del contenido */
  --header-h: 76px;                                          /* alto del header */
  --section-pad: clamp(3.5rem, 8vw, 6.5rem);                 /* espacio arriba/abajo de cada sección */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);                 /* curva de las animaciones */
}

/* Pantallas muy grandes: el contenido puede ser un poco más ancho */
@media (min-width: 1600px) {
  :root { --container: min(1360px, 100% - 6rem); }
}


/* =====================================================================
   2. RESET Y ESTILOS BASE
   Quita los estilos por defecto del navegador para que la página
   se vea igual en todos.
   ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }   /* el padding no agranda los elementos */

html {
  scroll-behavior: smooth;                  /* desplazamiento suave al usar el menú */
  scroll-padding-top: var(--header-h);      /* el header fijo no tapa el título de la sección */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  line-height: 1.6;
  color: var(--gray-text);
  background: var(--white);
  overflow-x: hidden;                       /* evita scroll horizontal */
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* Contorno visible al navegar con teclado (Tab) */
:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 4px;
}


/* =====================================================================
   3. UTILIDADES
   Clases de apoyo que se usan en varias secciones.
   ===================================================================== */

/* Contenedor central: limita el ancho y centra el contenido */
.container { width: var(--container); margin-inline: auto; }

/* Oculta un elemento a la vista pero lo deja para lectores de pantalla */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Enlace "Saltar al contenido": aparece solo al presionar Tab */
.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* Íconos SVG que toman el color del texto */
.icon { width: 1.2em; height: 1.2em; fill: currentColor; }

/* Imagen faltante: script.js agrega esta clase al contenedor de una
   imagen que no carga, y se muestra un fondo azul en su lugar */
.img-missing {
  background:
    repeating-linear-gradient(135deg, rgba(53,185,255,.12) 0 2px, transparent 2px 22px),
    var(--grad-navy);
}
.img-missing > img { visibility: hidden; }


/* =====================================================================
   4. BOTONES
   .btn            → base de todos los botones
   .btn--primary   → botón azul con degradado
   .btn--arrow     → botón con círculo blanco y flecha a la derecha
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--white);
  border-radius: var(--radius-pill);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s;
  white-space: nowrap;
}
.btn--primary {
  background: var(--grad-blue);
  box-shadow: 0 8px 20px rgba(0, 87, 184, 0.35);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 140, 255, 0.45);
}
.btn--arrow { padding-right: 0.45rem; }

/* Círculo blanco con la flecha */
.btn__circle {
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--white);
  transition: transform 0.25s var(--ease);
}
.btn__circle svg {
  width: 1.1rem; height: 1.1rem;
  fill: none; stroke: var(--blue); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn:hover .btn__circle { transform: translateX(3px); }

/* Celulares pequeños: el texto del botón puede bajar de línea */
@media (max-width: 425px) {
  .btn { white-space: normal; }
}


/* =====================================================================
   5. TÍTULOS DE SECCIÓN
   .section         → espacio vertical estándar de cada sección
   .section-title   → título grande con dos líneas azules debajo
   ===================================================================== */
.section { padding-block: var(--section-pad); position: relative; }

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem);
  line-height: 1.15;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}
/* Las dos rayitas azules debajo del título */
.section-title::after {
  content: "";
  display: block;
  width: 72px; height: 4px;
  margin-top: 0.9rem;
  border-radius: 4px;
  background:
    linear-gradient(90deg, var(--blue) 0 42%, transparent 42% 58%, var(--electric) 58% 100%);
}
.section-title__line { display: block; color: var(--blue); }   /* segunda línea en azul */
.section-title--center { text-align: center; }
.section-title--center::after { margin-inline: auto; }
.section-title--light { color: var(--white); }                  /* para fondos oscuros */


/* =====================================================================
   6. HEADER Y MENÚ DE NAVEGACIÓN
   Header fijo arriba con logo, enlaces, botón de soporte y
   menú hamburguesa en celulares.
   ===================================================================== */
.header {
  position: sticky;              /* se queda pegado arriba al hacer scroll */
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow 0.3s, height 0.3s, background 0.3s;
}
/* Al bajar en la página (clase agregada por script.js) */
.header.is-scrolled {
  --header-h: 64px;
  box-shadow: var(--shadow-md);
  background: rgba(255, 255, 255, 0.99);
}
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Logo: hay dos imágenes, la normal (.logo-light) y la blanca (.logo-dark).
   En modo claro solo se ve la normal; el cambio está en la sección 18.4. */
.header__logo { position: relative; display: block; }
.header__logo img {
  height: clamp(40px, 5vw, 52px);
  width: auto;
}
.header__logo .logo-dark { display: none; }
/* Si el logo no carga, se muestra el texto "PCW" */
.header__logo.img-missing,
.footer__logo.img-missing {
  min-width: 120px; min-height: 44px; border-radius: var(--radius-sm);
}
.header__logo.img-missing::after,
.footer__logo.img-missing::after {
  content: "PCW";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: italic 700 1.5rem/1 var(--font-display);
  color: var(--white);
}

/* Menú */
.nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }
.nav__list { display: flex; gap: clamp(0.8rem, 2vw, 2rem); }
.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0.1rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.2s;
}
/* Línea azul animada debajo del enlace */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--electric);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover { color: var(--blue); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--blue); font-weight: 600; }   /* sección visible actualmente */

/* Botón "Solicitar soporte" */
.nav__cta { border-radius: var(--radius-sm); padding: 0.7rem 1.1rem; }

/* Botón hamburguesa (oculto en computadora) */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  padding: 10px;
  border-radius: var(--radius-sm);
  flex-direction: column;
  justify-content: space-between;
}
.hamburger span {
  display: block;
  height: 3px;
  border-radius: 3px;
  background: var(--navy);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
/* Las tres rayas se convierten en una X al abrir el menú */
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

/* Botón luna / sol del modo oscuro (lo crea JS/theme.js dentro del menú).
   El botón ES / EN trae sus estilos dentro de JS/i18n.js. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  color: var(--blue);
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.3s var(--ease);
}
.theme-toggle svg {
  width: 1.15rem; height: 1.15rem;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.theme-toggle:hover { background: var(--blue); color: var(--white); transform: rotate(-15deg); }
@media (max-width: 900px) {
  .theme-toggle { align-self: flex-start; }   /* dentro del menú desplegable */
}

/* Pantallas medianas: el menú se compacta para que quepan los 7 enlaces */
@media (min-width: 901px) and (max-width: 1200px) {
  .nav { gap: 0.9rem; }
  .nav__list { gap: clamp(0.55rem, 1.1vw, 1rem); }
  .nav__link { font-size: 0.85rem; }
  .nav__cta { padding: 0.6rem 0.85rem; font-size: 0.85rem; }
  .header__logo img { height: 42px; }
}
/* Pantallas medianas angostas: "Solicitar soporte" queda solo con el ícono */
@media (min-width: 901px) and (max-width: 1060px) {
  .nav__cta { font-size: 0; gap: 0; padding: 0.6rem; }
  .nav__cta .icon { font-size: 1rem; width: 1.2rem; height: 1.2rem; }
}

/* Tablet y celular: menú desplegable con botón hamburguesa */
@media (max-width: 900px) {
  .hamburger { display: flex; }
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    height: calc(100dvh - var(--header-h));
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.5rem;
    padding: 1.5rem clamp(1rem, 5vw, 2rem) 2rem;
    background: var(--white);
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-12px);
    visibility: hidden;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; }   /* menú abierto */
  .nav__list { flex-direction: column; gap: 0.25rem; }
  .nav__link {
    display: block;
    padding: 0.85rem 0.25rem;
    font-size: 1.05rem;
    border-bottom: 1px solid #E5E7EB;
  }
  .nav__link::after { bottom: -1px; }
  .nav__cta { justify-content: center; }
  body.menu-open { overflow: hidden; }   /* evita scroll de fondo con el menú abierto */
}


/* =====================================================================
   7. HERO: CARRUSEL DE BANNERS (#inicio)
   Tres banners que cambian cada 6 s:
     1. Experiencia  → "Más de 25 años impulsando tu tecnología"
     2. Outlet       → "Outlet Tecnológico PCW" (lleva a #outlet)
     3. Seguridad    → "Protegemos lo que más importa"
   Los banners se apilan en la misma celda y se muestra uno a la vez.
   La lógica está en JS/hero-carousel.js (clase HeroCarousel).
   La fuente "Exo 2" se usa SOLO en el HERO (variable --font-hero).
   ===================================================================== */
.hero {
  --font-hero: "Exo 2", var(--font-display);
  --hero-gradient-text: linear-gradient(180deg, #FFFFFF 10%, #EAF8FF 40%, #8EDCFF 65%, #35B9FF 85%, #008CFF 100%);
  position: relative;
  isolation: isolate;
  min-height: clamp(480px, 80vh, 720px);
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
}
.hero-carousel__slides {
  display: grid;
  min-height: inherit;
}

/* --- Cada banner (misma altura para los tres) --- */
.hero-carousel__slide {
  grid-area: 1 / 1;              /* todos en la misma celda, uno encima del otro */
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(480px, 80vh, 720px);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
.hero-carousel__slide.is-active {   /* banner visible */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease, visibility 0s;
  z-index: 1;
}

/* --- Capas del banner: imagen, degradado y líneas decorativas --- */
.hero__media,
.hero__overlay,
.hero__lines { position: absolute; inset: 0; }

.hero__media { z-index: -3; }       /* fotografía tecnológica (lado derecho) */
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;                /* llena el espacio sin deformarse */
  object-position: 75% center;
  transform: scale(1.06);
  transition: transform 6s ease-out;
}
.hero-carousel__slide.is-active .hero__media img { transform: scale(1); }   /* acercamiento suave */

.hero__overlay {                    /* degradado azul marino: el texto se lee a la izquierda */
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(3,27,61,.98) 0%, rgba(3,27,61,.90) 30%, rgba(3,27,61,.50) 58%, rgba(3,27,61,.08) 100%),
    linear-gradient(0deg, rgba(3,27,61,.6) 0%, transparent 35%),
    radial-gradient(40% 60% at 18% 45%, rgba(0,140,255,.18), transparent 70%);
}
.hero__lines {                      /* líneas diagonales y detalles celestes */
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 84%, rgba(0,140,255,.9) 84% 84.5%, transparent 84.5%),
    linear-gradient(115deg, transparent 0 88%, rgba(53,185,255,.55) 88% 88.25%, transparent 88.25%),
    linear-gradient(115deg, transparent 0 92%, rgba(0,87,184,.5) 92% 93.5%, transparent 93.5%),
    linear-gradient(65deg, rgba(0,87,184,.7) 0 5%, transparent 5%);
}

/* --- Contenido (lado izquierdo) --- */
.hero__content {
  position: relative;
  padding-top: clamp(3rem, 7vw, 4.5rem);
  padding-bottom: clamp(6rem, 11vw, 7.5rem);   /* espacio para los controles */
}

/* Banner 1: "Más de 25 años impulsando tu tecnología" */
.hero__title {
  margin-bottom: 1.25rem;
  font-family: var(--font-hero);
  font-weight: 500;
  line-height: 1;
}
.hero__pre {                        /* "Más de" (encima del 25) */
  display: block;
  margin: 0 0 0.1rem clamp(1.2rem, 3vw, 2.4rem);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2.1rem);
  font-style: italic;
  font-weight: 500;
}
.hero__big {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1rem);
}
.hero__number {                     /* el "25": degradado, contorno y brillo azul */
  padding-right: 0.08em;            /* evita que la cursiva corte el 5 */
  font-family: var(--font-hero);
  font-size: clamp(5.5rem, 2.5rem + 11vw, 10rem);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: transparent;
  background: var(--hero-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.55);
  filter:
    drop-shadow(0 0 1px rgba(142, 220, 255, 0.9))
    drop-shadow(0 6px 22px rgba(0, 140, 255, 0.55));
}
.hero__words {                      /* "años impulsando / tu tecnología" */
  font-size: clamp(1.5rem, 0.9rem + 2.6vw, 3.1rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.hero__words em {                   /* "tecnología" en azul */
  font-style: inherit;
  color: transparent;
  background: linear-gradient(90deg, #35B9FF 0%, #008CFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Banners 2 y 3: títulos con una parte en degradado */
.hero-carousel__title {
  max-width: 18ch;
  margin-bottom: 1.25rem;
  font-family: var(--font-hero);
  font-size: clamp(2.3rem, 1.2rem + 4vw, 4.4rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--white);
}
.hero-carousel__title span {        /* "con el futuro" / "Protegemos" */
  padding-right: 0.06em;
  color: transparent;
  background: var(--hero-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 4px 16px rgba(0, 140, 255, 0.45));
}

/* Línea decorativa debajo del título (rayitas + línea celeste) */
.hero__divider {
  display: block;
  width: min(100%, 520px);
  height: 4px;
  margin-bottom: 1.25rem;
  background:
    repeating-linear-gradient(90deg, var(--electric) 0 14px, transparent 14px 20px) 0 0 / 76px 100% no-repeat,
    linear-gradient(90deg, rgba(53,185,255,.7), rgba(53,185,255,0)) 84px 50% / calc(100% - 84px) 1px no-repeat;
}

/* Descripción y botón (todos los banners) */
.hero__text {
  max-width: 46ch;
  margin-bottom: 2rem;
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);
  color: rgba(255, 255, 255, 0.92);
}
.hero .btn {
  padding: 0.95rem 0.5rem 0.95rem 1.6rem;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  background: linear-gradient(90deg, var(--blue) 0%, var(--electric) 100%);
  box-shadow: 0 0 0 1px rgba(53,185,255,.35), 0 12px 30px rgba(0, 140, 255, 0.5);
}
.hero .btn:hover { box-shadow: 0 0 0 1px rgba(53,185,255,.6), 0 16px 36px rgba(0, 140, 255, 0.65); }
.hero .btn__circle { width: 2.4rem; height: 2.4rem; }

/* Entrada escalonada del contenido del banner visible */
.hero-carousel__slide.is-active .hero__content > * {
  animation: heroCarouselIn 0.7s var(--ease) both;
}
.hero-carousel__slide.is-active .hero__content > :nth-child(2) { animation-delay: 0.1s; }
.hero-carousel__slide.is-active .hero__content > :nth-child(3) { animation-delay: 0.2s; }
.hero-carousel__slide.is-active .hero__content > :nth-child(4) { animation-delay: 0.3s; }

/* --- Controles: flechas, indicadores y pausa (abajo a la izquierda) --- */
.hero-carousel__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  pointer-events: none;             /* solo los botones reciben clics */
}
.hero-carousel__controls > * { pointer-events: auto; }

.hero-carousel__arrow,
.hero-carousel__pause {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: rgba(3, 27, 61, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.hero-carousel__arrow:hover,
.hero-carousel__pause:hover {
  background: var(--electric);
  border-color: var(--electric);
  transform: translateY(-1px);
}
.hero-carousel__arrow svg {
  width: 1.15rem; height: 1.15rem;
  fill: none; stroke: var(--white); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Botón pausa/reproducir: muestra un ícono u otro según el estado */
.hero-carousel__pause { width: 2.3rem; height: 2.3rem; margin-left: 0.25rem; }
.hero-carousel__pause svg { width: 0.95rem; height: 0.95rem; fill: var(--white); }
.hero-carousel__icon-play { display: none; }
.hero-carousel__pause[aria-pressed="true"] .hero-carousel__icon-pause { display: none; }
.hero-carousel__pause[aria-pressed="true"] .hero-carousel__icon-play { display: block; }

/* Indicadores */
.hero-carousel__dots { display: flex; align-items: center; gap: 0.5rem; }
.hero-carousel__dot {
  position: relative;
  width: 0.65rem;
  height: 0.65rem;
  padding: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.4);
  overflow: hidden;
  transition: width 0.35s ease, background 0.35s;
}
.hero-carousel__dot:hover { background: rgba(255, 255, 255, 0.7); }
.hero-carousel__dot[aria-current="true"] {   /* indicador del banner actual */
  width: 2.6rem;
  background: rgba(255, 255, 255, 0.3);
}
/* Barra de progreso dentro del indicador activo (tiempo restante) */
.hero-carousel__dot[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--electric);
  transform-origin: left;
  animation: heroCarouselProgress var(--hero-carousel-delay, 6s) linear forwards;
}
.hero-carousel.is-paused .hero-carousel__dot[aria-current="true"]::after { animation-play-state: paused; }
.hero-carousel.is-stopped .hero-carousel__dot[aria-current="true"]::after { animation: none; transform: none; }

.hero-carousel__arrow:focus-visible,
.hero-carousel__pause:focus-visible,
.hero-carousel__dot:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
}

/* --- Animaciones del hero --- */
@keyframes fadeUp {                 /* también la usa el chat (.msg) */
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroCarouselIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroCarouselProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- Responsive del hero --- */
@media (max-width: 1024px) {
  .hero__media img { object-position: 68% center; }
}
@media (max-width: 768px) {
  .hero,
  .hero-carousel__slide { min-height: 560px; }
  .hero__overlay {                  /* oscurecido parejo para leer mejor en celular */
    background:
      linear-gradient(180deg, rgba(3,27,61,.72) 0%, rgba(3,27,61,.88) 55%, rgba(3,27,61,.96) 100%);
  }
  .hero__lines { opacity: .45; }
  .hero-carousel__controls { justify-content: center; }
  .hero__divider { width: min(100%, 320px); }
}
@media (max-width: 480px) {
  .hero__big { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .hero__pre { margin-left: 0; }
  .hero__number { font-size: clamp(5rem, 30vw, 6.5rem); }
  .hero__words { font-size: clamp(1.5rem, 7.5vw, 1.9rem); }
  .hero-carousel__title { font-size: clamp(2rem, 9.5vw, 2.5rem); }
  .hero .btn { width: 100%; justify-content: space-between; white-space: normal; }
  .hero-carousel__arrow { width: 2.5rem; height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media img,
  .hero-carousel__slide.is-active .hero__media img { transform: none; transition: none; }
}
/* =====================================================================
   8. NOSOTROS (#nosotros)
   Texto con tres características a la izquierda y logo a la derecha.
   ===================================================================== */
.about { background: var(--white); overflow: hidden; }
.about__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about__desc { max-width: 52ch; margin-bottom: 2rem; }

/* Experiencia / Atención personalizada / Soluciones a la medida */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.2rem;
}
.feature { display: flex; gap: 0.75rem; align-items: flex-start; }
.feature__icon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-md);
  background: rgba(0, 87, 184, 0.08);
}
.feature__icon svg { width: 1.5rem; height: 1.5rem; fill: var(--blue); }
.feature__title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 0.2rem;
}
.feature__text { font-size: 0.88rem; line-height: 1.45; }

/* Logo con franjas diagonales detrás */
.about__brand {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 280px;
}
.about__brand img { position: relative; width: min(100%, 460px); }
.about__brand .logo-dark { display: none; }   /* versión blanca: solo en modo oscuro (18.5) */
.about__brand.img-missing { border-radius: var(--radius-lg); }
.about__stripes {
  position: absolute;
  inset: -10% -30% -10% 10%;
  background:
    linear-gradient(135deg, transparent 0 62%, rgba(0,140,255,.85) 62% 66%, transparent 66% 70%, rgba(0,87,184,.6) 70% 72%, transparent 72%),
    linear-gradient(135deg, transparent 0 18%, rgba(53,185,255,.35) 18% 20%, transparent 20%);
  pointer-events: none;
}

/* Responsive */
@media (max-width: 1024px) {
  .features { grid-template-columns: 1fr; }   /* características una debajo de otra */
}
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__brand { order: -1; min-height: 200px; }   /* logo arriba del texto */
  .about__brand img { width: min(80%, 340px); }
}


/* =====================================================================
   9. SERVICIOS (#servicios)
   Fondo azul oscuro con cuatro tarjetas (imagen, ícono, texto y
   flecha a WhatsApp).
   ===================================================================== */
.services {
  background: var(--grad-navy);
  overflow: hidden;
  isolation: isolate;
}
.services__bg {                     /* líneas y brillo decorativos del fondo */
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(120deg, transparent 0 8%, rgba(0,140,255,.18) 8% 8.4%, transparent 8.4%),
    linear-gradient(120deg, transparent 0 92%, rgba(53,185,255,.25) 92% 92.4%, transparent 92.4%),
    radial-gradient(ellipse at 50% -10%, rgba(0,140,255,.35), transparent 60%);
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 2.5rem;
}

/* --- Tarjeta de servicio --- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #0A2A5E 0%, #061E46 100%);
  border: 1px solid rgba(53,185,255,.35);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
/* Al pasar el cursor, al enfocarla o al tocarla en celular (.is-active, desde script.js) */
.card:hover,
.card:focus-within,
.card.is-active {
  transform: translateY(-6px);
  border-color: var(--sky);
  box-shadow: var(--shadow-glow);
}
.card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.card:hover .card__media img { transform: scale(1.07); }   /* zoom suave de la foto */

.card__body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2.4rem 1.25rem 1.25rem;
  color: rgba(255,255,255,.85);
}
.card__icon {                       /* círculo blanco con ícono, montado sobre la foto */
  position: absolute;
  top: -1.75rem; left: 1.25rem;
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.card__icon svg { width: 1.6rem; height: 1.6rem; fill: var(--navy); }
.card__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.card__text { font-size: 0.9rem; line-height: 1.5; padding-right: 2.5rem; }
.card__arrow {                      /* botón redondo a WhatsApp */
  position: absolute;
  right: 1rem; bottom: 1rem;
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--grad-blue);
  transition: transform 0.3s var(--ease);
}
.card__arrow svg {
  width: 1.1rem; height: 1.1rem;
  fill: none; stroke: var(--white); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.card:hover .card__arrow { transform: translateX(4px); }

/* Responsive */
@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
}
@media (max-width: 600px) {
  .services__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   10. PRODUCTOS Y PROYECTOS (#productos, #proyectos)
   Diseño de doble panel lado a lado alineado con la maqueta
   ===================================================================== */
.duo {
  display: grid;
  grid-template-columns: 1fr 1.22fr; /* Proporción para acomodar las 3 tarjetas */
  background: #f7fafd;
  position: relative;
  overflow: hidden;
}

.panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3rem, 5vw, 4.5rem) clamp(1.2rem, 3vw, 2.5rem);
}

/* --- Panel Productos (Izquierda) --- */
.panel--products {
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.panel__deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(125deg, transparent 0 60%, rgba(0, 140, 255, 0.08) 60% 78%, transparent 78%),
    linear-gradient(125deg, transparent 0 76%, rgba(0, 87, 184, 0.12) 76% 78.5%, transparent 78.5%);
}

/* --- Panel Proyectos (Derecha) --- */
.panel--projects {
  background: linear-gradient(135deg, #f4f8fd 0%, #eaf2fb 100%);
  border-left: 1px solid rgba(0, 140, 255, 0.1);
  display: flex;
  flex-direction: column;
}

.panel__deco-projects {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(0, 140, 255, 0.06) 0 15%, transparent 15%),
    linear-gradient(120deg, transparent 0 85%, rgba(0, 140, 255, 0.07) 85% 100%);
}

/* Contenedor interno centrado */
.panel__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  height: 100%;
  justify-content: space-between;
}

/* Cabecera centrada */
.panel__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
  width: 100%;
}

.section-title {
  font-family: var(--font-hero, 'Exo 2', sans-serif);
  font-size: clamp(2rem, 1.3rem + 2vw, 2.6rem);
  font-weight: 800;
  color: #031b3d;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.section-title__highlight {
  display: block;
  color: #0066ff;
}

/* Adornos / líneas debajo de los títulos */
.title-deco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
}

/* Línea + puntos de Productos */
.title-deco__line {
  width: 38px;
  height: 3.5px;
  background: #0066ff;
  border-radius: 4px;
}
.title-deco__dot {
  width: 6px;
  height: 3.5px;
  background: #0066ff;
  border-radius: 4px;
  opacity: 0.7;
}

/* Guiones de Proyectos */
.title-deco__dash {
  height: 4px;
  border-radius: 4px;
}
.title-deco__dash--primary {
  width: 24px;
  background: #0066ff;
}
.title-deco__dash--sky {
  width: 14px;
  background: #35b9ff;
}

.panel__desc {
  color: #4a5568;
  font-size: 0.98rem;
  max-width: 38ch;
  margin-bottom: 1.25rem;
  line-height: 1.45;
}

/* Etiquetas de Productos */
.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  max-width: 460px;
  margin-bottom: 1.5rem;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #0066ff;
  background: #ebf5ff;
  border: 1px solid #c2e0ff;
  border-radius: 9999px;
}

/* Botones con flecha circular */
.panel .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 0.6rem 0.75rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  background: #0066ff;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0, 102, 255, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.panel .btn:hover {
  background: #0056d2;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 102, 255, 0.45);
}

.panel .btn__circle {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: #ffffff;
  color: #0066ff;
}

.panel .btn__circle svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Imagen panorámica de productos */
.panel__media {
  width: 100%;
  max-width: 530px;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(3, 27, 61, 0.16);
  border: 1px solid rgba(0, 140, 255, 0.15);
  background: #031b3d;
}

.panel__media img {
  width: 100%;
  height: 100%;
  max-height: 285px;
  object-fit: cover;
  display: block;
}

/* =====================================================================
   TARJETAS DE PROYECTOS (Lado derecho)
   ===================================================================== */
.project-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.95rem;
  width: 100%;
}

.project-card {
  display: flex;
  flex-direction: column;
  background: #031738;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(3, 27, 61, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(0, 102, 255, 0.3);
  border-color: rgba(53, 185, 255, 0.4);
}

/* Parte superior de la tarjeta (imagen + badge) */
.project-card__media {
  position: relative;
  height: 140px;
  width: 100%;
  overflow: hidden;
  background: #020f26;
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project-card:hover .project-card__media img {
  transform: scale(1.08);
}

/* Insignia / categoría sobre la imagen */
.project-card__badge {
  position: absolute;
  bottom: 0.65rem;
  left: 0.65rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(3, 23, 56, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
}

.project-card__badge svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: none;
  stroke: #35b9ff;
  stroke-width: 2.2;
}

/* Cuerpo de la tarjeta */
.project-card__body {
  padding: 0.9rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project-card__title {
  font-family: var(--font-hero, 'Exo 2', sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}

.project-card__text {
  font-size: 0.72rem;
  color: #a0aec0;
  line-height: 1.4;
  margin-bottom: 0.8rem;
  flex: 1;
}

/* Botón flecha inferior derecho de cada tarjeta */
.project-card__btn {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-left: auto;
  border-radius: 50%;
  background: #0066ff;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.project-card__btn:hover {
  background: #35b9ff;
  transform: scale(1.1);
}

.project-card__btn svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Proyectos: tarjetas centradas (funciona con 1, 2 o 3 tarjetas) */
#proyectos .project-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  justify-content: center;          /* centra el grupo de tarjetas */
  gap: 1.25rem;
  width: 100%;
  justify-self: center;
  margin-inline: auto;
}

/* Celular: una tarjeta por fila, centrada */
@media (max-width: 600px) {
  #proyectos .project-cards {
    grid-template-columns: minmax(0, 340px);
  }
}
/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* Pantallas medianas / laptops pequeñas */
@media (max-width: 1200px) {
  .duo {
    grid-template-columns: 1fr;
  }
  .panel--projects {
    border-left: none;
    border-top: 1px solid rgba(0, 140, 255, 0.15);
  }
  .project-cards {
    max-width: 680px;
    margin-inline: auto;
  }
}

/* Tablets */
@media (max-width: 820px) {
  .project-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Móviles */
@media (max-width: 540px) {
  .project-cards {
    grid-template-columns: 1fr;
  }
  .panel__media img {
    max-height: 220px;
  }
}
/* =====================================================================
   12. CONTACTO (#contacto)
   Franja azul con Instagram, WhatsApp, correo y ubicación.
   ===================================================================== */
.contact {
  background:
    linear-gradient(120deg, rgba(0,140,255,.15) 0 10%, transparent 10%),
    var(--grad-navy);
  padding-block: clamp(2rem, 5vw, 3rem);
}
.contact__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.contact__list li + li { border-left: 1px solid rgba(255,255,255,.18); }   /* separador vertical */
.contact__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 0.75rem 1rem;
  color: var(--white);
  border-radius: var(--radius-sm);
  transition: background 0.25s;
}
.contact__item:hover { background: rgba(255,255,255,.06); }
.contact__icon svg { width: 2.2rem; height: 2.2rem; fill: var(--white); transition: fill 0.25s; }
.contact__item:hover .contact__icon svg { fill: var(--sky); }
.contact__item small { display: block; font-size: 0.82rem; color: rgba(255,255,255,.75); }
.contact__item strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Responsive */
@media (max-width: 1024px) {
  .contact__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.5rem; }
  .contact__list li:nth-child(3) { border-left: 0; }
  .contact__item { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .contact__list { grid-template-columns: 1fr; }
  .contact__list li + li { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
}


/* =====================================================================
   13. FOOTER
   Logo y lema + columnas de enlaces, servicios y contacto.
   ===================================================================== */
.footer {
  position: relative;
  background: #021433;
  color: rgba(255,255,255,.75);
  padding-top: clamp(2.5rem, 6vw, 4rem);
  overflow: hidden;
}
.footer::before {                   /* triángulo azul decorativo abajo a la izquierda */
  content: "";
  position: absolute;
  left: -40px; bottom: -40px;
  width: 180px; height: 180px;
  background: linear-gradient(45deg, var(--blue) 0 50%, transparent 50%);
  opacity: .8;
  pointer-events: none;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2rem;
}
.footer__logo { position: relative; display: inline-block; margin-bottom: 1rem; }
.footer__logo img { width: 170px; }
.footer__brand p { max-width: 24ch; color: var(--white); }
.footer__col {
  border-left: 1px solid rgba(53,185,255,.3);
  padding-left: 1.5rem;
}
.footer__col h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 0.9rem;
}
.footer__col li + li { margin-top: 0.4rem; }
.footer__col a { font-size: 0.9rem; transition: color 0.2s, padding 0.2s; }
.footer__col a:hover { color: var(--sky); padding-left: 4px; }
.footer__contact li { font-size: 0.9rem; }
.footer__bottom {                   /* línea de copyright */
  position: relative;
  margin-top: 2.5rem;
  padding-block: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 0.82rem;
  text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: 1 / -1; }   /* logo ocupa toda la fila */
}
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 425px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__col { border-left: 0; padding-left: 0; border-top: 1px solid rgba(53,185,255,.25); padding-top: 1rem; }
}


/* =====================================================================
   14. BOTÓN "VOLVER ARRIBA"
   Aparece abajo a la izquierda al bajar en la página
   (clase .is-visible agregada por script.js).
   ===================================================================== */
.to-top {
  position: fixed;
  left: clamp(1rem, 3vw, 1.5rem);
  bottom: clamp(1rem, 3vw, 1.5rem);
  z-index: 90;
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: 50%;
  background: var(--navy);
  border: 1px solid rgba(53,185,255,.5);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s var(--ease), visibility 0.3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg {
  width: 1.2rem; height: 1.2rem;
  fill: none; stroke: var(--white); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}


/* =====================================================================
   15. ANIMACIONES AL HACER SCROLL
   Los elementos con .reveal aparecen suavemente al entrar en pantalla
   (script.js les agrega .is-visible).
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Las tarjetas de servicios aparecen una tras otra */
.services__grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.services__grid .reveal:nth-child(3) { transition-delay: 0.2s; }
.services__grid .reveal:nth-child(4) { transition-delay: 0.3s; }


/* =====================================================================
   16. ASISTENTE TÉCNICO (chat con Gemini)
   Botón flotante abajo a la derecha y ventana de chat.
   La lógica está en JS/api.js (clases GeminiClient y AssistantChat).
   ===================================================================== */

/* --- Botón flotante --- */
.assistant-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.5rem);
  bottom: clamp(1rem, 3vw, 1.5rem);
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.15rem;
  border-radius: var(--radius-pill);
  background: var(--grad-blue);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 12px 30px rgba(0, 87, 184, 0.45);
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.assistant-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,140,255,.55); }
.assistant-fab svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.assistant-fab[aria-expanded="true"] { transform: scale(0.9); opacity: 0; pointer-events: none; }   /* se oculta con el chat abierto */

/* --- Ventana del chat --- */
.assistant {
  position: fixed;
  right: clamp(0.75rem, 3vw, 1.5rem);
  bottom: clamp(0.75rem, 3vw, 1.5rem);
  z-index: 120;
  width: min(380px, calc(100vw - 1.5rem));
  height: min(560px, calc(100dvh - 1.5rem));
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(3,27,61,.35);
  overflow: hidden;
  transform-origin: bottom right;
  animation: chatIn 0.3s var(--ease);
}
.assistant[hidden] { display: none; }

/* Encabezado: título, estado y botón cerrar */
.assistant__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.1rem;
  background: var(--grad-navy);
  color: var(--white);
}
.assistant__title { font-family: var(--font-display); font-weight: 600; }
.assistant__status { font-size: 0.78rem; color: var(--sky); }
.assistant__status::before {        /* punto verde "En línea" */
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #22c55e;
  vertical-align: middle;
}
.assistant__close {
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  transition: background 0.2s;
}
.assistant__close:hover { background: rgba(255,255,255,.12); }
.assistant__close svg {
  width: 1.1rem; height: 1.1rem;
  fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round;
}

/* Área de mensajes */
.assistant__messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--gray-light);
  scroll-behavior: smooth;
}

/* Burbujas de mensaje (creadas por api.js) */
.msg {
  max-width: 85%;
  padding: 0.65rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.5;
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: fadeUp 0.25s var(--ease);
}
.msg--bot {                         /* respuesta del asistente */
  align-self: flex-start;
  background: var(--white);
  color: var(--ink);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-sm);
}
.msg--user {                        /* mensaje del visitante */
  align-self: flex-end;
  background: var(--grad-blue);
  color: var(--white);
  border-bottom-right-radius: 4px;
}
.msg--error {                       /* aviso de error */
  align-self: flex-start;
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}
.msg--typing { display: inline-flex; gap: 4px; align-items: center; color: var(--gray-text); }   /* "Escribiendo..." */
.msg--typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--electric);
  animation: blink 1.2s infinite;
}
.msg--typing i:nth-of-type(2) { animation-delay: 0.2s; }
.msg--typing i:nth-of-type(3) { animation-delay: 0.4s; }

/* Preguntas sugeridas */
.assistant__suggestions {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 1rem 0;
  overflow-x: auto;
  background: var(--gray-light);
  scrollbar-width: none;
}
.assistant__suggestions::-webkit-scrollbar { display: none; }
.assistant__suggestions[hidden] { display: none; }
.chip {
  flex-shrink: 0;
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  color: var(--blue);
  background: var(--white);
  border: 1px solid rgba(0,140,255,.3);
  border-radius: var(--radius-pill);
  transition: background 0.2s;
}
.chip:hover { background: rgba(0,140,255,.08); }

/* Caja para escribir y botón enviar */
.assistant__composer {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--gray-light);
  border-top: 1px solid #E5E7EB;
}
.assistant__composer input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #D1D5DB;
  border-radius: var(--radius-pill);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.assistant__composer input:focus {
  outline: none;
  border-color: var(--electric);
  box-shadow: 0 0 0 3px rgba(0,140,255,.2);
}
.assistant__send {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--grad-blue);
  transition: transform 0.2s, opacity 0.2s;
}
.assistant__send:hover { transform: scale(1.06); }
.assistant__send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.assistant__send svg { width: 1.15rem; height: 1.15rem; fill: var(--white); }

/* Mensaje de validación (ej. "Escribe una consulta antes de enviar") */
.assistant__note {
  min-height: 0;
  padding: 0 1rem;
  font-size: 0.75rem;
  color: #B91C1C;
  background: var(--gray-light);
}
.assistant__note:not(:empty) { padding-bottom: 0.6rem; }

/* Animaciones del chat */
@keyframes chatIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Responsive */
@media (max-width: 600px) {
  .assistant-fab__label { display: none; }   /* botón solo con ícono */
  .assistant-fab { padding: 1rem; }
}
@media (max-width: 425px) {
  .assistant {                      /* chat a pantalla completa en celulares pequeños */
    right: 0; bottom: 0;
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
}


/* =====================================================================
   17. MOVIMIENTO REDUCIDO (accesibilidad)
   Si el usuario activó "reducir movimiento" en su sistema, se
   desactivan animaciones y transiciones en todo el sitio.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-carousel__dot[aria-current="true"]::after { animation: none; transform: none; }
  .social-card:hover,
  .social-card:hover .social-card__icon { transform: none; }
}


/* =====================================================================
   18. MODO OSCURO
   Se activa con <html data-theme="dark"> (lo pone JS/theme.js).
   Colores pensados para descansar la vista:
   - Fondo azul noche (no negro puro) y texto gris claro (no blanco
     puro), para reducir el contraste agresivo y el brillo.
   - Los acentos usan el celeste corporativo, que se lee mejor que
     el azul oscuro sobre fondos oscuros.
   Las secciones que ya son oscuras (Hero, Servicios, Contacto,
   Footer) casi no cambian. El Outlet oscuro está en la sección 19.
   ===================================================================== */

/* ---------- 18.1 Paleta del modo oscuro ---------- */
[data-theme="dark"] {
  color-scheme: dark;                   /* barras de scroll y controles oscuros */
  --dk-bg: #0B1220;                     /* fondo general */
  --dk-surface: #111A2E;                /* tarjetas y paneles */
  --dk-surface-2: #172338;              /* elementos sobre tarjetas */
  --dk-border: rgba(148, 163, 184, 0.18);
  --dk-text: #D7DFEA;                   /* texto principal */
  --dk-title: #EEF3F9;                  /* títulos */
  --dk-muted: #9AA8BC;                  /* texto secundario */
  --dk-accent: #5CC4FF;                 /* enlaces y acentos */
  --gray-text: var(--dk-text);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] body { background: var(--dk-bg); color: var(--dk-text); }

/* Transición suave al cambiar de tema */
body,
.about,
.panel,
.assistant { transition: background-color 0.3s ease, color 0.3s ease; }

/* ---------- 18.2 Botones de tema e idioma ---------- */
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .lang-toggle { color: var(--dk-accent); border-color: var(--dk-accent); }
[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .lang-toggle:hover { background: var(--dk-accent); color: var(--dk-bg); }

/* ---------- 18.3 Títulos de sección ---------- */
[data-theme="dark"] .section-title { color: var(--dk-title); }
[data-theme="dark"] .section-title__line { color: var(--dk-accent); }
[data-theme="dark"] .section-title--light { color: var(--white); }

/* ---------- 18.4 Header y menú ---------- */
[data-theme="dark"] .header {
  background: rgba(11, 18, 32, 0.92);
  border-bottom: 1px solid var(--dk-border);
}
[data-theme="dark"] .header.is-scrolled { background: rgba(11, 18, 32, 0.97); }
[data-theme="dark"] .nav__link { color: var(--dk-text); }
[data-theme="dark"] .nav__link:hover,
[data-theme="dark"] .nav__link.is-active { color: var(--dk-accent); }
[data-theme="dark"] .nav__link::after { background: var(--dk-accent); }
[data-theme="dark"] .hamburger span { background: var(--dk-text); }

/* Logo del header: en modo oscuro se oculta el logo normal y se muestra
   la versión blanca (.logo-dark). */
[data-theme="dark"] .header__logo .logo-light { display: none; }
[data-theme="dark"] .header__logo .logo-dark { display: block; }

@media (max-width: 900px) {
  [data-theme="dark"] .nav { background: var(--dk-bg); }
  [data-theme="dark"] .nav__link { border-bottom-color: var(--dk-border); }
}

/* ---------- 18.5 Nosotros ---------- */
[data-theme="dark"] .about { background: var(--dk-bg); }
[data-theme="dark"] .feature__icon { background: rgba(92, 196, 255, 0.12); }
[data-theme="dark"] .feature__icon svg { fill: var(--dk-accent); }
[data-theme="dark"] .feature__title { color: var(--dk-title); }
[data-theme="dark"] .feature__text { color: var(--dk-muted); }
/* Logo de Nosotros: en modo oscuro se muestra la versión blanca */
[data-theme="dark"] .about__brand .logo-light { display: none; }
[data-theme="dark"] .about__brand .logo-dark { display: block; }

/* ---------- 18.6 Productos y Proyectos ---------- */
[data-theme="dark"] .duo { background: var(--dk-bg); }
[data-theme="dark"] .panel--products { background: var(--dk-surface); }
[data-theme="dark"] .panel--projects { background: linear-gradient(135deg, var(--dk-bg) 0%, #0E1729 100%); }
[data-theme="dark"] .panel__deco { opacity: 0.6; }
[data-theme="dark"] .panel__text p { color: var(--dk-muted); }
[data-theme="dark"] .tags li {
  color: var(--dk-accent);
  background: rgba(92, 196, 255, 0.08);
  border-color: rgba(92, 196, 255, 0.28);
}
[data-theme="dark"] .panel__media img { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45)); }

/* Tarjetas de redes: ya son oscuras, solo se suaviza el borde */
[data-theme="dark"] .social-card { border-color: var(--dk-border); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); }

/* ---------- 18.7 Secciones que ya son oscuras ---------- */
[data-theme="dark"] .services,
[data-theme="dark"] .contact { background: linear-gradient(160deg, #08101E 0%, #0B1A33 60%, #0D2145 100%); }
[data-theme="dark"] .footer { background: #070D18; }

/* ---------- 18.8 Asistente técnico (chat) ---------- */
[data-theme="dark"] .assistant {
  background: var(--dk-surface);
  border: 1px solid var(--dk-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .assistant__messages,
[data-theme="dark"] .assistant__suggestions,
[data-theme="dark"] .assistant__composer,
[data-theme="dark"] .assistant__note { background: var(--dk-bg); }
[data-theme="dark"] .assistant__composer { border-top-color: var(--dk-border); }
[data-theme="dark"] .msg--bot { background: var(--dk-surface-2); color: var(--dk-text); }
[data-theme="dark"] .msg--typing { color: var(--dk-muted); }
[data-theme="dark"] .msg--error {
  background: rgba(239, 68, 68, 0.12);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.35);
}
[data-theme="dark"] .chip {
  color: var(--dk-accent);
  background: var(--dk-surface-2);
  border-color: rgba(92, 196, 255, 0.3);
}
[data-theme="dark"] .chip:hover { background: rgba(92, 196, 255, 0.12); }
[data-theme="dark"] .assistant__composer input {
  color: var(--dk-text);
  background: var(--dk-surface-2);
  border-color: var(--dk-border);
}
[data-theme="dark"] .assistant__composer input::placeholder { color: var(--dk-muted); }
[data-theme="dark"] .assistant__note { color: #FCA5A5; }


/* =====================================================================
   19. OUTLET (complementos de CSS/outlet.css)
   Los estilos base del Outlet están en CSS/outlet.css (prefijo .pcwo).
   Aquí solo van los ajustes de orden y su modo oscuro, para no
   modificar ese archivo.
   ===================================================================== */

/* ---------- 19.1 Ajustes de orden ---------- */

/* Flechas del carrusel: un poco más afuera para no tapar el nombre del primer producto */
@media (min-width: 901px) and (max-width: 1380px) {
  #outlet .pcwo-arrow--prev { left: -22px; }
  #outlet .pcwo-arrow--next { right: -22px; }
}

/* Banner: la etiqueta "Visítanos" no se encima al texto en pantallas medianas */
@media (min-width: 901px) and (max-width: 1200px) {
  #outlet .pcwo-hero { padding-bottom: 140px; }
}

/* ---------- 19.2 Outlet en modo oscuro ---------- */
[data-theme="dark"] .pcwo {
  --pcwo-surface: var(--dk-bg);         /* fondo de la sección y corte diagonal del banner */
  --pcwo-ink: var(--dk-title);          /* nombres de productos y textos */
  --pcwo-gray: var(--dk-muted);         /* marca, precio anterior, avisos */
  --pcwo-light: rgba(92, 196, 255, 0.10);
  --pcwo-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}
/* Filtros de categoría */
[data-theme="dark"] .pcwo-cat:not(.is-active) {
  background: var(--dk-surface);
  box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.6), inset 0 0 0 1px var(--dk-border);
}
/* Tarjetas de producto */
[data-theme="dark"] .pcwo-card__inner {
  background: var(--dk-surface);
  box-shadow: var(--pcwo-shadow), inset 0 0 0 1px var(--dk-border);
}
[data-theme="dark"] .pcwo-card__media {   /* fondo claro suave: las fotos de producto suelen tener fondo blanco */
  background: radial-gradient(70% 70% at 50% 55%, #F3F6FA 0%, #DDE5EF 100%);
}
[data-theme="dark"] .pcwo-card__price,
[data-theme="dark"] .pcwo-card__cta { color: var(--dk-accent); }
[data-theme="dark"] .pcwo-card__cta:hover { color: var(--dk-bg); background: var(--dk-accent); }
[data-theme="dark"] .pcwo-card__status { color: #86EFAC; background: rgba(34, 197, 94, 0.14); }
[data-theme="dark"] .pcwo-card__status--ultimas { color: #FCD34D; background: rgba(245, 158, 11, 0.14); }
[data-theme="dark"] .pcwo-card__status--agotado { color: #FCA5A5; background: rgba(239, 68, 68, 0.14); }
[data-theme="dark"] .pcwo-card__status--consultar { color: #CBD5E1; background: rgba(148, 163, 184, 0.14); }
/* Flechas, indicadores y botones */
[data-theme="dark"] .pcwo-arrow { color: var(--dk-text); background: var(--dk-surface-2); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.7); }
[data-theme="dark"] .pcwo-dot { background: rgba(148, 163, 184, 0.35); }
[data-theme="dark"] .pcwo-dot[aria-current="true"] { background: var(--dk-accent); }
[data-theme="dark"] .pcwo-btn--ghost { color: var(--dk-accent); background: transparent; box-shadow: inset 0 0 0 2px var(--dk-accent); }
/* Avisos y carga */
[data-theme="dark"] .pcwo-notice { color: #FCD34D; background: rgba(245, 158, 11, 0.1); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3); }
[data-theme="dark"] .pcwo-skel { background: linear-gradient(90deg, #142036 25%, #1B2A44 50%, #142036 75%); background-size: 200% 100%; }