/* ==========================================================================
   INSIGHT CTP — Capa de marca
   --------------------------------------------------------------------------
   ESTE ES EL ÚNICO ARCHIVO CSS QUE DEBES EDITAR.
   Se carga el último, así que todo lo que pongas aquí gana sobre la plantilla.
   Para cambiar los colores de toda la web, edita solo el bloque :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETA Y TOKENS DE MARCA
   -------------------------------------------------------------------------- */
:root {
  /* --- Colores de marca --- */
  --accent-color: #ff6a40;   /* Naranja Insight */
  --accent-bg: #ff6a40;
  --accent-dark: #e8542b;    /* Naranja hover */
  --accent-soft: #fff1ec;    /* Naranja muy claro, fondos */

  /* --- Textos --- */
  --heading-color: #22272f;  /* Gris oscuro titulares */
  --body-color: #5a6270;     /* Gris medio cuerpo de texto */
  --muted-color: #858c99;    /* Gris claro, textos secundarios */

  /* --- Fondos --- */
  --white-color: #ffffff;
  --white-bg: #ffffff;
  --light-bg1: #f7f8f9;      /* Gris casi blanco, secciones alternas */
  --light-bg2: #edeff2;
  --light-bg3: #fff1ec;      /* Naranja muy claro */
  --dark-bg: #22272f;        /* Footer y bloques oscuros */
  --dark-bg2: #2e333d;
  --dark-bg3: #1a1e25;       /* Barra superior del header */

  /* --- Bordes --- */
  --light-color1: #e6e8ec;
  --light-color2: #c9cdd6;
  --border-color: #e6e8ec;

  /* --- Formas --- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 24px;

  /* --- Tipografía --- */
  --font-main: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   2. TIPOGRAFÍA — Poppins en todo el sitio
   -------------------------------------------------------------------------- */
body,
input,
textarea,
select,
button,
.optech-default-btn,
.site-menu-main > li > a,
.sub-menu--item a {
  font-family: var(--font-main);
}

h1, h2, h3, h4, h5, h6,
.post__title,
.optech-section-title h2 {
  font-family: var(--font-main);
  color: var(--heading-color);
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1, .post__title { font-weight: 700; letter-spacing: -0.03em; }

body {
  color: var(--body-color);
  font-weight: 400;
  line-height: 1.75;
}

p { line-height: 1.75; }

/* Resalta una palabra dentro de un titular: <span class="txt-accent">…</span> */
.txt-accent { color: var(--accent-color); }

/* Antetítulo naranja sobre los titulares de sección */
.optech-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-color);
}
.optech-subtitle::before {
  content: "";
  width: 24px;
  height: 2px;
  background-color: var(--accent-color);
}
.optech-section-title.center .optech-subtitle { justify-content: center; }

/* --------------------------------------------------------------------------
   3. BOTONES
   -------------------------------------------------------------------------- */
.optech-default-btn {
  font-weight: 500;
  border-radius: 100px;
}

/* Botón blanco sobre fondos oscuros */
.optech-default-btn.optech-white-btn { color: var(--heading-color); }

/* Botón fantasma con borde, para fondos oscuros */
.optech-default-btn.optech-ghost-btn {
  color: var(--white-color);
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.optech-default-btn.optech-ghost-btn:hover { border-color: var(--accent-color); }

.optech-icon-btn { color: var(--accent-color); font-weight: 500; }

/* --------------------------------------------------------------------------
   4. CABECERA
   -------------------------------------------------------------------------- */
.optech-header-top { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.optech-header-top.bg-light1 { border-bottom-color: var(--border-color); }
.optech-header-info.dark-color ul li { color: var(--body-color); }
.optech-header-info.dark-color ul li a { color: var(--body-color); }
.optech-header-info.dark-color ul li a:hover { color: var(--accent-color); }
.optech-header-info.dark-color ul li i { color: var(--accent-color); }
.optech-header-bottom { border-bottom: 1px solid var(--border-color); }
.brand-logo img { max-height: 34px; width: auto; }

/* Marca la página actual en el menú */
.site-menu-main > li > a.active,
.site-menu-main > li.current-menu > a { color: var(--accent-color); }

/* --------------------------------------------------------------------------
   5. HERO (portada)
   Sustituye la imagen de fondo azul de la plantilla por un degradado de marca.
   -------------------------------------------------------------------------- */
.optech-hero-insight {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #fff5f1 0%, #ffffff 55%);
  border-bottom: 1px solid var(--border-color);
  padding: 190px 0 110px;
}
@media (max-width: 991px) { .optech-hero-insight { padding: 150px 0 70px; } }
@media (max-width: 767px) { .optech-hero-insight { padding: 130px 0 60px; } }

/* Halo naranja difuso */
.optech-hero-insight::before {
  content: "";
  position: absolute;
  top: -320px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 64, 0.22) 0%, rgba(255, 106, 64, 0) 68%);
  pointer-events: none;
}

/* Retícula de puntos sutil */
.optech-hero-insight::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(34, 39, 47, 0.09) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 75%);
  pointer-events: none;
}

.optech-hero-insight .container { position: relative; z-index: 2; }

.optech-hero-insight h1 {
  font-size: 62px;
  line-height: 1.12;
  margin-bottom: 22px;
}
@media (max-width: 1199px) { .optech-hero-insight h1 { font-size: 50px; } }
@media (max-width: 767px)  { .optech-hero-insight h1 { font-size: 36px; } }

.optech-hero-insight .hero-lead {
  font-size: 19px;
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto;
  color: var(--body-color);
}
@media (max-width: 767px) { .optech-hero-insight .hero-lead { font-size: 17px; } }

/* Píldora superior del hero */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 10px;
  margin-bottom: 26px;
  font-size: 14px;
  font-weight: 500;
  color: var(--heading-color);
  background-color: var(--white-bg);
  border: 1px solid var(--border-color);
  border-radius: 100px;
  box-shadow: 0 4px 18px rgba(34, 39, 47, 0.06);
}
.hero-pill span {
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--white-color);
  background-color: var(--accent-color);
  border-radius: 100px;
}

/* Marcadores de cobertura bajo el hero */
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.hero-tags li {
  list-style: none;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--heading-color);
  background-color: var(--white-bg);
  border: 1px solid var(--border-color);
  border-radius: 100px;
}
.hero-tags li i { color: var(--accent-color); margin-right: 7px; }

/* --------------------------------------------------------------------------
   6. MIGA DE PAN (cabecera de páginas internas)
   -------------------------------------------------------------------------- */
.optech-breadcrumb {
  position: relative;
  overflow: hidden;
  background-color: var(--dark-bg);
  background-image: linear-gradient(120deg, #1a1e25 0%, #22272f 55%, #33261f 100%);
}
.optech-breadcrumb::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -120px;
  width: 620px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 64, 0.3) 0%, rgba(255, 106, 64, 0) 70%);
}
.optech-breadcrumb .container { position: relative; z-index: 2; }
.optech-breadcrumb .post__title { color: var(--white-color); }
.breadcrumbs ul li,
.breadcrumbs ul li a { color: rgba(255, 255, 255, 0.72); }
.breadcrumbs ul li a:hover { color: var(--accent-color); }

/* --------------------------------------------------------------------------
   7. TARJETAS DE SERVICIO (portada)
   La plantilla usaba una foto de fondo; aquí se sustituye por un degradado
   de marca, así no dependemos de fotografía.
   -------------------------------------------------------------------------- */
.optech-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 300px;
  padding: 34px 30px;
  overflow: hidden;
  background-color: var(--white-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all 0.4s ease;
}
.optech-service-card::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 64, 0.14) 0%, rgba(255, 106, 64, 0) 70%);
  transition: all 0.5s ease;
}
.optech-service-card:hover {
  border-color: transparent;
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(34, 39, 47, 0.1);
}
.optech-service-card:hover::after { transform: scale(1.5); }

.optech-service-card .card-icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 26px;
  border-radius: 14px;
  background-color: var(--accent-soft);
  transition: all 0.4s ease;
}
.optech-service-card .card-icon i { font-size: 30px; color: var(--accent-color); transition: all 0.4s ease; }
.optech-service-card:hover .card-icon { background-color: var(--accent-color); }
.optech-service-card:hover .card-icon i { color: var(--white-color); }

.optech-service-card h5 { position: relative; z-index: 2; margin-bottom: 12px; font-size: 21px; }
.optech-service-card h5 a { color: inherit; }
.optech-service-card h5 a:hover { color: var(--accent-color); }
.optech-service-card p { position: relative; z-index: 2; margin-bottom: 22px; font-size: 15px; }
.optech-service-card .card-link { position: relative; z-index: 2; margin-top: auto; }

/* Etiqueta de categoría dentro de la tarjeta */
.card-tag {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 2;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-color);
  background-color: var(--accent-soft);
  border-radius: 100px;
}

/* --------------------------------------------------------------------------
   8. ICONOS — usamos Remix Icon en lugar de los SVG azules de la plantilla,
   así el color siempre lo controla el CSS.
   -------------------------------------------------------------------------- */
.optech-iconbox-icon i,
.optech-iconbox-icon2 i,
.optech-iconbox-icon3 i {
  font-size: 32px;
  line-height: 1;
  color: var(--accent-color);
  transition: all 0.4s ease;
}
.optech-iconbox-icon2 i { font-size: 40px; }
.optech-iconbox-wrap:hover .optech-iconbox-icon i { color: var(--white-color); }
.optech-iconbox-icon { background-color: var(--accent-soft); }
.optech-iconbox-icon2 { background-color: var(--accent-soft); }

/* Caja de icono con borde, usada en la página de Servicios */
.optech-iconbox-wrap.style-two.border_all {
  border-radius: var(--radius-md);
  transition: all 0.4s ease;
}
.optech-iconbox-wrap.style-two.border_all:hover {
  border-color: transparent;
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(34, 39, 47, 0.09);
}

/* --------------------------------------------------------------------------
   9. PROCESO DE TRABAJO (bloques numerados)
   -------------------------------------------------------------------------- */
.optech-numberbox-icon img { max-width: 100%; height: auto; }
.optech-numberbox-data h4 { font-size: 22px; }
.optech-line img { opacity: 0.35; }

/* --------------------------------------------------------------------------
   10. FRANJA DE CIFRAS
   -------------------------------------------------------------------------- */
.insight-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 991px) { .insight-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .insight-stats { grid-template-columns: 1fr; } }

.insight-stat {
  padding: 34px 28px;
  text-align: center;
  background-color: var(--white-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all 0.4s ease;
}
.insight-stat:hover {
  border-color: transparent;
  box-shadow: 0 18px 44px rgba(34, 39, 47, 0.09);
}
.insight-stat .stat-num {
  display: block;
  margin-bottom: 6px;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--heading-color);
}
.insight-stat .stat-num small { font-size: 24px; font-weight: 600; color: var(--accent-color); }
.insight-stat p { margin: 0; font-size: 15px; }

/* Versión sobre fondo oscuro */
.dark-bg .insight-stat {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.dark-bg .insight-stat .stat-num { color: var(--white-color); }
.dark-bg .insight-stat p { color: rgba(255, 255, 255, 0.7); }

/* --------------------------------------------------------------------------
   11. LISTAS CON CHECK
   -------------------------------------------------------------------------- */
.optech-icon-list ul li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  list-style: none;
}
.optech-icon-list ul li i {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--white-color);
  background-color: var(--accent-color);
  border-radius: 50%;
}

/* Lista de dos columnas */
.optech-icon-list.two-col ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}
@media (max-width: 767px) { .optech-icon-list.two-col ul { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   12. BLOQUE DESTACADO / CITA
   -------------------------------------------------------------------------- */
.insight-highlight {
  position: relative;
  padding: 30px 32px;
  margin: 32px 0;
  background-color: var(--accent-soft);
  border-left: 3px solid var(--accent-color);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.insight-highlight p:last-child { margin-bottom: 0; }
.insight-highlight strong { color: var(--heading-color); }

/* --------------------------------------------------------------------------
   13. PANEL DE PRODUCTO (imágenes de marca Tremendos Panas)
   -------------------------------------------------------------------------- */
.insight-product-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(140deg, var(--light-bg1) 0%, var(--accent-soft) 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}
.insight-product-panel img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   14. FORMULARIOS
   -------------------------------------------------------------------------- */
.optech-main-form {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(34, 39, 47, 0.07);
}
.optech-main-field input,
.optech-main-field textarea,
.optech-main-field select {
  width: 100%;
  font-family: var(--font-main);
  font-size: 15px;
  color: var(--heading-color);
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
}
.optech-main-field input:focus,
.optech-main-field textarea:focus,
.optech-main-field select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(255, 106, 64, 0.14);
}
.optech-main-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--heading-color);
}
.optech-main-field .field-hint { font-size: 13px; color: var(--muted-color); }

/* Aviso de configuración del formulario */
.form-note {
  padding: 14px 18px;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-color);
  background-color: var(--light-bg1);
  border-radius: var(--radius-sm);
}

/* Campo trampa anti-spam (honeypot): invisible para personas, visible
   para los robots que rellenan todos los campos del formulario. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  overflow: hidden;
}

/* Aviso de error al enviar el formulario (inyectado por JS si procesar-contacto.php redirige con ?enviado=error) */
.form-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: var(--radius-sm);
}
.form-alert i, .form-alert .ic { flex-shrink: 0; margin-top: 2px; font-size: 18px; }
.form-alert--error { color: #b3261e; background-color: #fdecea; border: 1px solid #f5c6c2; }
.form-alert--success { color: #1e6b3c; background-color: #e8f7ee; border: 1px solid #bfe8cf; }

/* --------------------------------------------------------------------------
   15. DATOS DE CONTACTO
   -------------------------------------------------------------------------- */
.optech-contact-info i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  font-size: 22px;
  color: var(--accent-color);
  background-color: var(--accent-soft);
  border-radius: 12px;
}
.optech-contact-info a { display: block; color: var(--body-color); }
.optech-contact-info a:hover { color: var(--accent-color); }

/* --------------------------------------------------------------------------
   16. LLAMADA A LA ACCIÓN
   -------------------------------------------------------------------------- */
.optech-cta-insight {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #1a1e25 0%, #22272f 55%, #3a2820 100%);
  border-radius: var(--radius-lg);
  padding: 72px 40px;
}
@media (max-width: 767px) { .optech-cta-insight { padding: 48px 24px; } }
.optech-cta-insight::before {
  content: "";
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 64, 0.28) 0%, rgba(255, 106, 64, 0) 70%);
}
.optech-cta-insight .cta-inner { position: relative; z-index: 2; text-align: center; }
.optech-cta-insight h2 { color: var(--white-color); margin-bottom: 16px; }
.optech-cta-insight p {
  max-width: 620px;
  margin: 0 auto 32px;
  color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   17. BARRA LATERAL DE SERVICIO (páginas de detalle)
   -------------------------------------------------------------------------- */
.optech-service-menu ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
}
.optech-service-menu ul li a.active,
.optech-service-menu ul li a:hover {
  color: var(--white-color);
  background-color: var(--accent-color);
}
.optech-service-menu ul li a.active i,
.optech-service-menu ul li a:hover i { color: var(--white-color); }

.optech-service-contact {
  position: relative;
  overflow: hidden;
  background-color: var(--dark-bg);
  background-image: linear-gradient(150deg, #22272f 0%, #2e333d 60%, #3a2820 100%);
  border-radius: var(--radius-md);
}
.optech-service-contact::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 64, 0.3) 0%, rgba(255, 106, 64, 0) 70%);
}
.optech-service-contact > * { position: relative; z-index: 2; }
.optech-service-contact h3 { color: var(--white-color); }
.optech-service-contact p { color: rgba(255, 255, 255, 0.72); }
.optech-service-contact-icon i {
  font-size: 44px;
  color: var(--accent-color);
}

/* Ficha técnica del servicio */
.insight-spec {
  padding: 28px;
  margin-bottom: 30px;
  background-color: var(--light-bg1);
  border-radius: var(--radius-md);
}
.insight-spec h4 { margin-bottom: 18px; font-size: 18px; }
.insight-spec ul li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  font-size: 15px;
  list-style: none;
  border-bottom: 1px solid var(--border-color);
}
.insight-spec ul li:last-child { border-bottom: 0; }
.insight-spec ul li span:last-child { font-weight: 500; color: var(--heading-color); text-align: right; }

/* --------------------------------------------------------------------------
   18. ACORDEÓN (preguntas frecuentes)
   -------------------------------------------------------------------------- */
.init-wrap .init-item {
  margin-bottom: 14px;
  background-color: var(--white-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.init-wrap .init-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-size: 17px;
  font-weight: 500;
  color: var(--heading-color);
  cursor: pointer;
  transition: all 0.3s ease;
}
.init-wrap .init-header:hover { color: var(--accent-color); }
.init-wrap .init-header i { flex-shrink: 0; color: var(--accent-color); transition: transform 0.3s ease; }
.init-wrap .init-item.open .init-header { color: var(--accent-color); }
.init-wrap .init-item.open .init-header i { transform: rotate(45deg); }
.init-wrap .init-body { display: none; padding: 0 24px 22px; }
.init-wrap .init-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   19. PIE DE PÁGINA
   -------------------------------------------------------------------------- */
.optech-footer-section { background-color: var(--dark-bg); }
.optech-footer-textarea img { max-height: 34px; width: auto; margin-bottom: 22px; }
.optech-footer-textarea p { color: rgba(255, 255, 255, 0.68); }
.optech-footer-title h5 { color: var(--white-color); }
.optech-footer-menu ul li a { color: rgba(255, 255, 255, 0.68); transition: all 0.3s ease; }
.optech-footer-menu ul li a:hover { color: var(--accent-color); padding-left: 4px; }
.optech-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.optech-copywright p { color: rgba(255, 255, 255, 0.55); font-size: 14px; }
.optech-copywright a { color: rgba(255, 255, 255, 0.75); }
.optech-copywright a:hover { color: var(--accent-color); }

/* Datos de contacto dentro del pie */
.footer-contact li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  list-style: none;
  color: rgba(255, 255, 255, 0.68);
}
.footer-contact li i { color: var(--accent-color); margin-top: 5px; }
.footer-contact li a { color: rgba(255, 255, 255, 0.68); }
.footer-contact li a:hover { color: var(--accent-color); }

/* Iconos sociales */
.optech-social-icon-box ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--white-color);
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  transition: all 0.3s ease;
}
.optech-social-icon-box ul li a:hover {
  color: var(--white-color);
  background-color: var(--accent-color);
  transform: translateY(-3px);
}

/* Boletín — barra a todo el ancho, separada de las columnas del pie.
   Los selectores de input llevan !important porque la plantilla base
   define `input { padding: 15px 0 !important; border: none !important; }`
   con la misma especificidad; sin !important esas reglas ganan por orden
   de aparición y el campo pierde el padding horizontal y el borde. */
.optech-footer-newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.optech-footer-newsletter-text h5 { margin-bottom: 6px; color: var(--white-color); }
.optech-footer-newsletter-text p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.6); }

.footer-subscribe { display: flex; gap: 10px; width: 100%; max-width: 380px; flex-shrink: 0; }
.footer-subscribe input {
  flex: 1;
  min-width: 0;
  height: 48px !important;
  padding: 0 20px !important;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--white-color) !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 100px !important;
}
.footer-subscribe input::placeholder { color: rgba(255, 255, 255, 0.45); }
.footer-subscribe input:focus { outline: none; border-color: var(--accent-color) !important; }
.footer-subscribe button {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  font-size: 20px;
  color: var(--white-color);
  background-color: var(--accent-color);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}
.footer-subscribe button:hover { background-color: var(--accent-dark); }

@media (max-width: 767px) {
  .optech-footer-newsletter { flex-direction: column; align-items: flex-start; margin-top: 40px; padding-top: 28px; }
  .footer-subscribe { max-width: 100%; }
}

/* Crédito de diseño, discreto */
.footer-credit { margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.35); }
.footer-credit a { color: rgba(255, 255, 255, 0.5); text-decoration: none; }
.footer-credit a:hover { color: var(--accent-color); }

/* --------------------------------------------------------------------------
   20. ICONOS SVG PROPIOS
   Se escriben directamente en el HTML (<svg class="ic">…</svg>) para que
   funcionen incluso abriendo el archivo con doble clic, sin servidor.
   El color se hereda del contenedor mediante currentColor.
   -------------------------------------------------------------------------- */
.ic {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.optech-service-card .card-icon .ic,
.optech-iconbox-icon .ic { font-size: 30px; color: var(--accent-color); }
.optech-iconbox-icon2 .ic { font-size: 38px; color: var(--accent-color); }
.optech-iconbox-wrap:hover .optech-iconbox-icon .ic { color: var(--white-color); }
.optech-service-card:hover .card-icon .ic { color: var(--white-color); }
.optech-contact-info .ic { font-size: 22px; }
.optech-service-contact-icon .ic { font-size: 44px; color: var(--accent-color); }

/* --------------------------------------------------------------------------
   21. UTILIDADES
   -------------------------------------------------------------------------- */
.bg-light1 { background-color: var(--light-bg1); }
.bg-accent-soft { background-color: var(--accent-soft); }
.optech-divider { height: 1px; background-color: var(--border-color); }
.progress-wrap::after { color: var(--accent-color); }
.optech-preloader div { background-color: var(--accent-color); }
::selection { color: var(--white-color); background-color: var(--accent-color); }

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}