/* ============================================================
   INYMO - Estilos del Embudo de Cotización
   Diseño industrial moderno con los colores de la marca
   ============================================================ */

:root {
  --inymo-navy: #0f172a;
  --inymo-navy-light: #1e293b;
  --inymo-slate: #334155;
  --inymo-green: #8CC63F;
  --inymo-green-dark: #6ba32e;
  --inymo-blue: #3B82F6;
  --inymo-blue-dark: #2563eb;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border-color: rgba(255, 255, 255, 0.1);
  --card-bg: rgba(30, 41, 59, 0.8);
  --card-bg-solid: #1e293b;
}

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

/* ========== BODY ========== */
.cotizar-body {
  font-family: 'Barlow', sans-serif !important;
  background: linear-gradient(135deg, var(--inymo-navy) 0%, #0a0f1a 100%);
  min-height: 100vh;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* ========== TIPOGRAFÍAS BASE - FORZADAS ========== */
/* Chakra Petch = Fuente principal (títulos, botones, elementos importantes)
   Barlow = Solo para detalles pequeños (descripciones, párrafos, labels) */

.cotizar-body,
.cotizar-body *:not(.bx):not([class*="bx-"]) {
  font-family: 'Chakra Petch', sans-serif !important;
}

/* Iconos Boxicons - mantener su fuente */
.cotizar-body .bx,
.cotizar-body [class*="bx-"] {
  font-family: 'boxicons' !important;
}

/* TÍTULOS Y ELEMENTOS IMPORTANTES - Chakra Petch */
.cotizar-body h1,
.cotizar-body h2,
.cotizar-body h3,
.cotizar-body h4,
.cotizar-body h5,
.cotizar-body h6,
.cotizar-body .hero-title,
.cotizar-body .section-title,
.cotizar-body .bifurcacion-card h3,
.cotizar-body .servicio-content h3,
.cotizar-body .info-card-header h3,
.cotizar-body .proceso-header h3,
.cotizar-body .flujo-titulo,
.cotizar-body .card-arrow,
.cotizar-body .servicio-cta,
.cotizar-body .btn-cotizar,
.cotizar-body .footer-col h4,
.cotizar-body .card-badge,
.cotizar-body .paso-indicator,
.cotizar-body .opcion-content span,
.cotizar-body .header-phone,
.cotizar-body .header-contact {
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

/* DETALLES PEQUEÑOS - Barlow */
.cotizar-body p,
.cotizar-body .hero-subtitle,
.cotizar-body .card-desc,
.cotizar-body .mini-feature,
.cotizar-body .feature-item,
.cotizar-body .estructura-chip,
.cotizar-body .client-chip,
.cotizar-body .ubicacion-detail,
.cotizar-body .stat-label,
.cotizar-body .step-label,
.cotizar-body .footer-desc,
.cotizar-body .footer-links a,
.cotizar-body .section-subtitle,
.cotizar-body label,
.cotizar-body input,
.cotizar-body textarea,
.cotizar-body select,
.cotizar-body .opcion-content small {
  font-family: 'Barlow', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

/* NÚMEROS - Chakra Petch bold */
.cotizar-body .stat-number,
.cotizar-body .num,
.cotizar-body .step-num,
.cotizar-body .trust-years,
.cotizar-body .header-phone span,
.cotizar-body .glass-stat .stat-number,
.cotizar-body .paso-mini .num {
  font-family: 'Chakra Petch', monospace !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
}

/* Fondo con patrón geométrico sutil */
.cotizar-body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(139, 198, 63, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(139, 198, 63, 0.03) 0%, transparent 30%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238CC63F' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Líneas diagonales decorativas */
.cotizar-body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(135deg, transparent 0%, transparent 49%, rgba(139, 198, 63, 0.02) 50%, transparent 51%, transparent 100%),
    linear-gradient(-135deg, transparent 0%, transparent 49%, rgba(59, 130, 246, 0.02) 50%, transparent 51%, transparent 100%);
  background-size: 100px 100px;
  pointer-events: none;
  z-index: 0;
}

/* ========== DECORATIVE SHAPES ========== */
.decorative-shapes {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.decorative-shapes .shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
}

.shape-1 {
  top: 15%;
  left: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(139, 198, 63, 0.08) 0%, transparent 70%);
  animation: morphShape 20s ease-in-out infinite;
}

.shape-2 {
  top: 60%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.06) 0%, transparent 70%);
  animation: morphShape 25s ease-in-out infinite reverse;
}

.shape-3 {
  top: 40%;
  left: 30%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(139, 198, 63, 0.05) 0%, transparent 70%);
  animation: morphShape 15s ease-in-out infinite;
  animation-delay: -5s;
}

.shape-4 {
  bottom: 10%;
  left: 10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.04) 0%, transparent 70%);
  animation: morphShape 18s ease-in-out infinite;
  animation-delay: -8s;
}

@keyframes morphShape {
  0%, 100% {
    transform: scale(1) translate(0, 0);
    border-radius: 50%;
  }
  25% {
    transform: scale(1.1) translate(20px, -30px);
    border-radius: 60% 40% 70% 30%;
  }
  50% {
    transform: scale(0.95) translate(-10px, 20px);
    border-radius: 40% 60% 30% 70%;
  }
  75% {
    transform: scale(1.05) translate(15px, 10px);
    border-radius: 70% 30% 50% 50%;
  }
}

/* ========== HEADER ========== */
.cotizar-header {
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 200;
}

/* Línea de acento en el header */
.cotizar-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 198, 63, 0.5), rgba(59, 130, 246, 0.5), transparent);
}

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

.header-logos {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-logo-divider {
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, transparent, rgba(139,198,63,0.4), transparent);
}

.logo-link {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 40px;
  width: auto;
}

.header-info {
  display: flex;
  gap: 20px;
  align-items: center;
}

.header-phone,
.header-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.85rem;
  font-weight: 500 !important;
  padding: 6px 14px;
  background: rgba(139, 198, 63, 0.1);
  border: 1px solid rgba(139, 198, 63, 0.2);
  border-radius: 50px;
  transition: all 0.3s ease;
}

.header-phone i,
.header-contact i {
  color: var(--inymo-green);
  font-size: 1.1rem;
}

.header-phone:hover,
.header-contact:hover {
  background: rgba(139, 198, 63, 0.25);
  border-color: var(--inymo-green);
  color: var(--inymo-green);
}

.header-ubicacion {
  color: var(--text-secondary);
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.9rem;
}

/* ========== MAIN ========== */
.cotizar-main {
  flex: 1;
  padding: 40px 0;
}

/* ========== LANDING HERO ========== */
.landing-hero {
  padding: 30px 0 20px;
  position: relative;
  z-index: 1;
}

/* Elementos decorativos flotantes en el hero */
.landing-hero::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 5%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(139, 198, 63, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(60px);
  animation: float 8s ease-in-out infinite;
  z-index: -1;
}

.landing-hero::after {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 10%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(50px);
  animation: float 10s ease-in-out infinite reverse;
  z-index: -1;
}

@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-20px) translateX(10px); }
  50% { transform: translateY(-10px) translateX(-10px); }
  75% { transform: translateY(-30px) translateX(5px); }
}

.min-vh-80 {
  min-height: auto;
}

.hero-content {
  padding-right: 40px;
  position: relative;
  z-index: 2;
}

.hero-logo {
  width: 500px;
  max-width: 100%;
  height: auto;
  margin-bottom: 30px;
  filter: drop-shadow(0 8px 30px rgba(139, 198, 63, 0.3));
  position: relative;
  z-index: 2;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(139, 198, 63, 0.15);
  color: var(--inymo-green);
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 20px;
  border: 1px solid rgba(139, 198, 63, 0.3);
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(139, 198, 63, 0.2); }
  50% { box-shadow: 0 0 20px rgba(139, 198, 63, 0.4); }
}

.hero-title {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin-bottom: 15px;
  text-transform: none !important;
  letter-spacing: 0.04em !important;
  color: #fff;
  text-shadow: 0 0 30px rgba(255,255,255,0.08);
}

.hero-title span {
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 700 !important;
}

.text-accent {
  color: transparent !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #5a8a20, var(--inymo-green), #a8e063, var(--inymo-green), #6db82a) !important;
  background-size: 200% 100%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  animation: gradientTextShift 6s ease infinite;
}

@keyframes gradientTextShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-subtitle {
  font-family: 'Barlow', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.hero-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 25px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.feature-item i {
  color: var(--inymo-green);
  font-size: 1.2rem;
}

.btn-cotizar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--inymo-green) 0%, var(--inymo-green-dark) 100%);
  color: var(--inymo-navy);
  padding: 14px 28px;
  border-radius: 50px;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 1rem;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-cotizar:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(139, 198, 63, 0.4);
  color: var(--inymo-navy);
}

.btn-cotizar.btn-lg {
  padding: 18px 40px;
  font-size: 1.2rem;
}

.hero-note {
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Visual Hero */
.hero-visual {
  position: relative;
  z-index: 2;
}

.visual-card {
  background: var(--card-bg);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  min-height: 320px;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* Borde brillante animado */
.visual-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--inymo-green), var(--inymo-blue), var(--inymo-green));
  background-size: 200% 200%;
  border-radius: 22px;
  z-index: -1;
  animation: borderGlow 4s ease infinite;
  opacity: 0.5;
}

@keyframes borderGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.visual-card img,
.visual-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video,
.hero-image {
  min-height: 320px;
}

.visual-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(transparent, rgba(15, 23, 42, 0.95));
  display: flex;
  gap: 30px;
}

.stat-box {
  text-align: center;
}

.stat-number {
  display: block;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 2rem;
  font-weight: 700 !important;
  color: var(--inymo-green);
}

.stat-label {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-secondary);
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* ========== SECCIONES LANDING ========== */
section {
  padding: 40px 0;
  position: relative;
  z-index: 1;
}

/* Bordes luminosos entre secciones */
section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 198, 63, 0.2), transparent);
}

.section-title {
  text-align: center;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.section-title i {
  color: var(--inymo-green);
}

/* Cómo funciona */
.pasos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.paso-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 30px 25px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}

.paso-card:hover {
  transform: translateY(-5px);
  border-color: var(--inymo-green);
}

.paso-card.paso-final {
  border-color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.1);
}

.paso-numero {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background: var(--inymo-green);
  color: var(--inymo-navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700 !important;
  font-size: 0.9rem;
}

.paso-icono {
  font-size: 2.5rem;
  color: var(--inymo-green);
  margin-bottom: 15px;
}

.paso-card h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.paso-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
}

/* Sección servicios con fondo especial */
.servicios-preview {
  padding: 30px 0;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.03) 0%, transparent 100%);
}

/* Servicios Grid */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Servicio Card - Estilo cinematográfico con imagen de fondo */
a.servicio-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 320px;
  border: 1px solid rgba(139, 198, 63, 0.15);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.servicio-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 35px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Imagen de fondo completa */
.servicio-bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.servicio-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4) saturate(0.8);
  transition: all 0.5s ease;
}

a.servicio-card:hover .servicio-bg-img img {
  filter: brightness(0.5) saturate(1);
  transform: scale(1.05);
}

/* Gradiente cinematográfico sobre la imagen */
.servicio-bg-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 15, 28, 0.3) 0%,
    rgba(10, 15, 28, 0.5) 40%,
    rgba(10, 15, 28, 0.85) 100%
  );
  pointer-events: none;
}

/* Contenido sobre la imagen */
.servicio-content {
  position: relative;
  z-index: 1;
  padding: 25px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Brillo superior en las cards */
a.servicio-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--inymo-green), var(--accent-blue));
  z-index: 2;
  opacity: 0.7;
}

a.servicio-card:hover {
  border-color: rgba(139, 198, 63, 0.4);
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(139, 198, 63, 0.2);
}

.servicio-icon {
  width: 50px;
  height: 50px;
  background: rgba(139, 198, 63, 0.2);
  border: 1px solid rgba(139, 198, 63, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--inymo-green);
  margin-bottom: 15px;
}

.servicio-content h3 {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 1.5rem;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #fff;
  margin-bottom: 8px;
}

.servicio-content p {
  font-family: 'Barlow', sans-serif !important;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  margin-bottom: 12px;
  line-height: 1.5;
}

.servicio-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
  flex: 1;
}

.servicio-content li {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  padding: 4px 0;
  padding-left: 18px;
  position: relative;
}

.servicio-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--inymo-green);
  border-radius: 50%;
}

/* CTA en la ficha */
.servicio-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.95rem;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--inymo-green);
  margin-top: auto;
  transition: all 0.3s ease;
}

.servicio-cta i {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

a.servicio-card:hover .servicio-cta {
  color: #fff;
}

a.servicio-card:hover .servicio-cta i {
  transform: translateX(5px);
}

/* Legacy styles for non-link cards */
.servicio-card:not(a) {
  padding: 35px;
}

.servicio-card h3 {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 1.3rem;
  font-weight: 600 !important;
  margin-bottom: 10px;
}

.servicio-card p {
  font-family: 'Barlow', sans-serif !important;
  color: var(--text-secondary);
  margin-bottom: 15px;
}

.servicio-card ul {
  list-style: none;
  padding: 0;
}

.servicio-card li {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 5px 0;
  padding-left: 20px;
  position: relative;
}

.servicio-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--inymo-green);
}

/* CTA Final */
.cta-final {
  padding: 60px 0;
}

.cta-final::after {
  display: none;
}

.cta-box {
  background: linear-gradient(135deg, var(--inymo-navy-light) 0%, var(--inymo-slate) 100%);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Efecto de brillo en el CTA */
.cta-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(139, 198, 63, 0.1), transparent, rgba(59, 130, 246, 0.1), transparent);
  animation: rotateBg 15s linear infinite;
  z-index: 0;
}

.cta-box > * {
  position: relative;
  z-index: 1;
}

@keyframes rotateBg {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cta-box h2 {
  font-size: 2rem;
  margin-bottom: 15px;
}

.cta-box p {
  color: var(--text-secondary);
  margin-bottom: 30px;
  font-size: 1.1rem;
}

/* ========== EMBUDO (PASOS) ========== */
.embudo-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Stepper */
.stepper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  position: relative;
}

.stepper::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--border-color);
  z-index: 0;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.step-number {
  width: 40px;
  height: 40px;
  background: var(--inymo-navy-light);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600 !important;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.step.active .step-number {
  background: var(--inymo-green);
  border-color: var(--inymo-green);
  color: var(--inymo-navy);
}

.step.completed .step-number {
  background: var(--inymo-green);
  border-color: var(--inymo-green);
  color: var(--inymo-navy);
}

.step-label {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: normal;
}

.step.active .step-label,
.step.completed .step-label {
  color: var(--text-primary);
}

/* Embudo Card */
.embudo-card {
  background: var(--card-bg-solid);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 40px;
}

.embudo-header {
  text-align: center;
  margin-bottom: 35px;
}

.embudo-header h1 {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.embudo-header p {
  color: var(--text-secondary);
}

/* Form Sections */
.form-section {
  margin-bottom: 30px;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600 !important;
  margin-bottom: 15px;
  font-size: 1rem;
}

.section-label i {
  color: var(--inymo-green);
}

.section-label .opcional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Opciones Grid */
.opciones-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

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

.opciones-grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.opcion-card {
  cursor: pointer;
}

.opcion-card input {
  display: none;
}

.opcion-content {
  background: var(--inymo-navy);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 20px 15px;
  text-align: center;
  transition: all 0.3s ease;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Asegurar que todas las tarjetas de servicio tengan el mismo tamaño */
.opciones-grid.grid-4 .opcion-card {
  width: 100%;
}

.opciones-grid.grid-4 .opcion-content {
  height: 130px;
  min-height: 130px;
}

.opcion-content i {
  font-size: 2rem;
  display: block;
  margin-bottom: 10px;
  color: var(--text-secondary);
}

.opcion-content span {
  display: block;
  font-weight: 600 !important;
  margin-bottom: 5px;
}

.opcion-content small {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.opcion-card:hover .opcion-content {
  border-color: var(--inymo-blue);
}

.opcion-card.selected .opcion-content,
.opcion-card input:checked + .opcion-content {
  border-color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.1);
}

.opcion-card.selected .opcion-content i,
.opcion-card input:checked + .opcion-content i {
  color: var(--inymo-green);
}

/* Opción Card Grande */
.opcion-card.card-grande .opcion-content {
  padding: 30px 20px;
}

.opcion-card.card-grande .opcion-content i {
  font-size: 2.5rem;
}

/* Opciones Row (Pills) */
.opciones-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.opciones-row.wrap {
  flex-wrap: wrap;
}

.opcion-pill {
  cursor: pointer;
}

.opcion-pill input {
  display: none;
}

.opcion-pill span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--inymo-navy);
  border: 2px solid var(--border-color);
  border-radius: 25px;
  padding: 10px 18px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.opcion-pill:hover span {
  border-color: var(--inymo-blue);
}

.opcion-pill.selected span,
.opcion-pill input:checked + span {
  border-color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.15);
  color: var(--inymo-green);
}

/* Form Controls */
.form-control,
.form-select {
  background: var(--inymo-navy);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  padding: 12px 16px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
  background: var(--inymo-navy);
  border-color: var(--inymo-green);
  box-shadow: 0 0 0 3px rgba(139, 198, 63, 0.2);
  color: var(--text-primary);
}

.form-control::placeholder {
  color: var(--text-muted);
}

/* Bootstrap form-floating overrides for dark theme */
.form-floating > label {
  color: var(--text-muted);
  background: transparent !important;
  padding: 12px 16px;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--inymo-green);
  background: transparent !important;
  opacity: 1;
  transform: scale(0.8) translateY(-0.6rem) translateX(0.15rem);
}

.form-floating > textarea.form-control:focus ~ label,
.form-floating > textarea.form-control:not(:placeholder-shown) ~ label {
  background: var(--inymo-navy) !important;
  padding: 2px 8px;
  border-radius: 4px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 0.9rem;
}

.input-group-text {
  background: var(--inymo-slate);
  border: 2px solid var(--border-color);
  border-left: none;
  color: var(--text-secondary);
}

.input-group .form-control {
  border-right: none;
}

/* Upload Area */
.upload-area {
  background: var(--inymo-navy);
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}

.upload-area input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-placeholder i {
  font-size: 3rem;
  color: var(--text-muted);
  margin-bottom: 15px;
}

.upload-placeholder p {
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.upload-link {
  color: var(--inymo-green);
  text-decoration: underline;
}

.upload-area:hover,
.upload-area.dragover {
  border-color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.05);
}

.upload-area.has-file {
  border-style: solid;
  border-color: var(--inymo-green);
}

.upload-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--inymo-green);
}

.upload-preview i {
  font-size: 1.5rem;
}

/* Resumen Box */
.resumen-box {
  background: var(--inymo-navy);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 20px;
}

.resumen-box h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.resumen-box h3 i {
  color: var(--inymo-green);
}

.resumen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.resumen-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

.resumen-label {
  color: var(--text-muted);
}

.resumen-value {
  font-weight: 600 !important;
}

.resumen-nota {
  margin-top: 20px;
  padding: 15px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.resumen-nota i {
  color: var(--inymo-blue);
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* Form Actions */
.form-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid var(--border-color);
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.btn-back:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.btn-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--inymo-green);
  color: var(--inymo-navy);
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 600 !important;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-next:hover {
  background: var(--inymo-green-dark);
  transform: translateY(-2px);
}

.btn-enviar {
  background: linear-gradient(135deg, var(--inymo-green) 0%, var(--inymo-green-dark) 100%);
  padding: 16px 35px;
  font-size: 1.05rem;
}

/* ========== CONFIRMACIÓN ========== */
.confirmacion-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
}

.confirmacion-card {
  background: var(--card-bg-solid);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 50px 40px;
  text-align: center;
}

.confirmacion-icon {
  font-size: 5rem;
  color: var(--inymo-green);
  margin-bottom: 20px;
  animation: scaleIn 0.5s ease;
}

@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.confirmacion-card h1 {
  font-size: 2rem;
  margin-bottom: 15px;
}

.codigo-solicitud {
  background: var(--inymo-navy);
  padding: 12px 20px;
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 30px;
}

.codigo-solicitud strong {
  color: var(--inymo-green);
  font-size: 1.1rem;
}

.confirmacion-mensaje {
  text-align: left;
  background: var(--inymo-navy);
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
}

.confirmacion-mensaje p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  color: var(--text-secondary);
}

.confirmacion-mensaje p:last-child {
  margin-bottom: 0;
}

.confirmacion-mensaje i {
  color: var(--inymo-green);
  font-size: 1.3rem;
}

.confirmacion-mensaje strong {
  color: var(--text-primary);
}

.confirmacion-pasos {
  text-align: left;
  margin-bottom: 30px;
}

.confirmacion-pasos h3 {
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.paso-siguiente {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 15px;
}

.paso-num {
  width: 30px;
  height: 30px;
  background: var(--inymo-slate);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600 !important;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.paso-texto strong {
  display: block;
  margin-bottom: 3px;
}

.paso-texto span {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.confirmacion-contacto {
  background: rgba(139, 198, 63, 0.1);
  border: 1px solid rgba(139, 198, 63, 0.3);
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
}

.confirmacion-contacto h4 {
  margin-bottom: 10px;
}

.confirmacion-contacto p {
  color: var(--text-secondary);
  margin-bottom: 15px;
}

.btn-telefono {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--inymo-green);
  color: var(--inymo-navy);
  padding: 12px 25px;
  border-radius: 25px;
  font-weight: 600 !important;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-telefono:hover {
  transform: scale(1.05);
  color: var(--inymo-navy);
}

.confirmacion-acciones {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.btn-volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--inymo-green);
  color: white;
  padding: 12px 25px;
  border-radius: 10px;
  font-weight: 600 !important;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(140, 198, 63, 0.3);
}

.btn-volver:hover {
  background: var(--inymo-green-dark);
  color: white;
  box-shadow: 0 6px 20px rgba(140, 198, 63, 0.4);
  transform: translateY(-2px);
}

.btn-sitio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  padding: 12px 25px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid var(--border-color);
}

.btn-sitio:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

/* ========== FOOTER ========== */
.cotizar-footer {
  background: rgba(15, 23, 42, 0.95);
  border-top: 1px solid var(--border-color);
  padding: 25px 0;
  text-align: center;
}

.footer-content p {
  color: var(--text-muted);
  margin-bottom: 5px;
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 10px;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: var(--inymo-green);
}

.footer-links span {
  color: var(--text-muted);
}

/* ========== RESPONSIVE - CONSOLIDADO ========== */

/* --- TABLET (992px) --- */
@media (max-width: 992px) {
  .hero-title { font-size: 2.2rem; }
  .hero-content { padding-right: 0; margin-bottom: 25px; }
  .pasos-grid { grid-template-columns: repeat(2, 1fr); }
  .servicios-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
  a.servicio-card { min-height: 280px; }
  .servicio-content { padding: 20px; }
  .proyectos-gallery { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .visual-selector-grid.grid-5 { grid-template-columns: repeat(3, 1fr); }

  /* Secciones más compactas */
  section { padding: 35px 0; }
  .section-title { margin-bottom: 20px; }
}

/* --- TABLET SMALL (768px) --- */
@media (max-width: 768px) {
  .hero-logo { width: 280px; margin-bottom: 25px; }
  .hero-title { font-size: 2rem; }
  .header-info { display: none; }

  /* Grids del embudo */
  .opciones-grid { grid-template-columns: repeat(2, 1fr); }
  .opciones-grid.grid-3 { grid-template-columns: 1fr; }
  .visual-selector-grid { grid-template-columns: repeat(2, 1fr); }
  .visual-selector-grid.grid-5 { grid-template-columns: repeat(2, 1fr); }
  .subsection .opciones-grid.grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Embudo card */
  .embudo-card { padding: 28px 22px; }
  .embudo-header h1 { font-size: 1.5rem; }

  /* Formularios */
  .resumen-grid { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column-reverse; gap: 12px; }
  .btn-back, .btn-next { width: 100%; justify-content: center; padding: 16px 20px; }
  .pasos-grid { grid-template-columns: 1fr; }

  /* Landing */
  .bifurcacion-grid { grid-template-columns: 1fr; }
  .flujos-comparativa { grid-template-columns: 1fr; }
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-buttons .btn-cotizar { width: 100%; max-width: 320px; justify-content: center; }

  /* Soldadura codigos */
  .codigos-soldadura-grid { grid-template-columns: repeat(2, 1fr); }

  /* Materiales */
  .row-specs { grid-template-columns: 1fr 1fr; }
  .field-cantidad { grid-column: span 2; }
  .servicios-checkboxes { flex-direction: column; }
  .servicio-check { justify-content: center; }
}

/* --- MOVIL (576px) --- */
@media (max-width: 576px) {
  /* Stepper compacto */
  .stepper {
    display: flex;
    gap: 4px;
    padding: 12px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 24px;
  }
  .stepper::-webkit-scrollbar { display: none; }
  .stepper::before { top: 18px; }
  .step { min-width: 60px; flex-shrink: 0; }
  .step-number { width: 36px; height: 36px; font-size: 0.85rem; }
  .step-label { font-size: 0.7rem; }

  /* Grids de opciones */
  .opciones-grid { grid-template-columns: 1fr; }
  .opciones-grid.grid-4,
  .opciones-grid.grid-3 { grid-template-columns: 1fr; gap: 10px; }
  .visual-selector-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .visual-selector-grid.grid-4,
  .visual-selector-grid.grid-5 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .subsection .opciones-grid.grid-4 { grid-template-columns: 1fr; }

  /* Cards de servicio - layout horizontal en movil */
  .opcion-content { min-height: auto; padding: 16px 14px; }
  .opciones-grid.grid-4 .opcion-content { height: auto; min-height: auto; }
  .opcion-card.card-grande .opcion-content {
    flex-direction: row;
    align-items: center;
    gap: 15px;
    text-align: left;
    height: auto !important;
    min-height: auto !important;
  }
  .opcion-card.card-grande .opcion-content i { font-size: 2rem; margin-bottom: 0; }

  /* Embudo card */
  .embudo-card { margin: 0 5px; padding: 22px 16px; border-radius: 16px; }
  .embudo-card::before { height: 3px; }
  .embudo-header h1 { font-size: 1.3rem; line-height: 1.3; }

  /* Pills de opciones */
  .opciones-row { flex-direction: column; gap: 8px; }
  .opcion-pill { width: 100%; }
  .opcion-pill span { width: 100%; justify-content: center; padding: 12px 16px; }

  /* Inputs - evitar zoom en iOS */
  .form-control, input[type="text"], input[type="email"],
  input[type="tel"], input[type="number"], select, textarea {
    font-size: 16px !important;
  }

  /* Upload zona */
  .upload-zona { padding: 20px 12px; }
  .upload-zona i { font-size: 2.5rem; }
  .upload-zona h4 { font-size: 1rem; }

  /* Terminos */
  .terminos-condiciones { margin-top: 16px; }
  .terminos-header { padding: 14px 16px; }
  .terminos-header h4 { font-size: 0.9rem; }
  .terminos-body { padding: 14px; }
  .termino-item { padding: 10px; }
  .termino-item label { font-size: 0.82rem; }

  /* Resumen */
  .resumen-grid { grid-template-columns: 1fr; gap: 8px; }
  .resumen-nota { flex-direction: column; gap: 8px; padding: 14px; }

  /* Header */
  .logo-img { height: 32px; }

  /* Bootstrap rows */
  .row.g-3 > .col-md-6,
  .row.g-3 > .col-md-4,
  .row.g-3 > .col-md-3 { width: 100%; }

  /* Confirmacion */
  .confirmacion-card { padding: 30px 20px; }
  .confirmacion-acciones { flex-direction: column; }
  .confirmacion-img {
    width: calc(100% + 40px);
    margin: -30px -20px 20px -20px;
    height: 120px;
    border-radius: 16px 16px 0 0;
  }

  /* Bifurcacion cards */
  .bifurcacion-card { padding: 25px 18px; min-height: 380px; }
  .bifurcacion-card .card-icon { width: 50px; height: 50px; font-size: 1.5rem; margin-top: 5px; }
  .bifurcacion-card h3 { font-size: 1.1rem; }
  .bifurcacion-card .card-badge { top: 15px; right: 15px; font-size: 0.7rem; }
  .bifurcacion-card .card-desc { font-size: 0.85rem; }
  .bifurcacion-card .card-features { gap: 4px; }
  .bifurcacion-card .mini-feature { font-size: 0.8rem; }

  /* Codigos soldadura */
  .codigos-soldadura-grid { grid-template-columns: 1fr; }

  /* Landing imagenes */
  .servicio-card-img {
    height: 100px;
    margin: -25px -20px 15px -20px;
    width: calc(100% + 40px);
    border-radius: 16px 16px 0 0;
  }
  .servicio-card { padding: 25px 20px; border-radius: 16px; }
  .proyectos-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .proyecto-thumb { height: 120px; }

  /* Landing hero */
  .landing-hero { padding: 20px 0; }
  .hero-logo { width: 180px; margin-bottom: 15px; }
  .hero-title { font-size: 1.5rem; }
  .hero-subtitle { font-size: 0.95rem; margin-bottom: 15px; }
  .visual-card { min-height: 200px; }
  .hero-video,
  .hero-image { min-height: 200px; }
  .stat-number { font-size: 1.3rem; }

  /* Secciones landing más compactas */
  section { padding: 25px 0; }
  .section-title { font-size: 1.25rem; margin-bottom: 15px; }
  .section-subtitle { font-size: 0.9rem; margin-bottom: 15px; }
  .cta-box { padding: 25px 15px; }
  .cta-box h2 { font-size: 1.25rem; }

  /* Fichas de servicios */
  .servicios-grid { grid-template-columns: 1fr; gap: 15px; }
  a.servicio-card { min-height: 260px; }
  .servicio-content { padding: 18px; }
  .servicio-content h3 { font-size: 1.3rem; }
  .servicio-icon { width: 42px; height: 42px; font-size: 1.25rem; }

  /* Estructuras chips */
  .estructuras-marquee { gap: 6px; }
  .estructura-chip { padding: 6px 12px; font-size: 0.8rem; }
  .proyectos-gallery { gap: 6px; }
  .proyecto-thumb { height: 100px; }
}

/* ============================================================
   SECCIÓN BIFURCACIÓN v2
   ============================================================ */

.bifurcacion-section {
  padding: 40px 0 30px;
  background: linear-gradient(180deg, transparent 0%, rgba(139, 198, 63, 0.03) 100%);
  position: relative;
  z-index: 1;
}

/* Grid de puntos decorativo */
.bifurcacion-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle, rgba(139, 198, 63, 0.08) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: -1;
}

.section-subtitle {
  font-family: 'Barlow', sans-serif !important;
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 20px;
}

.bifurcacion-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 850px;
  margin: 0 auto;
}

.bifurcacion-card {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 20px;
  padding: 35px;
  text-decoration: none;
  color: inherit;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.bifurcacion-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--inymo-green);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.bifurcacion-card:hover {
  transform: translateY(-8px);
  border-color: var(--inymo-green);
  box-shadow: 0 20px 50px rgba(139, 198, 63, 0.15);
}

.bifurcacion-card:hover::before {
  transform: scaleX(1);
}

.card-material-si {
  border-color: rgba(139, 198, 63, 0.3);
}

.card-material-no {
  border-color: rgba(139, 198, 63, 0.3);
}

.card-material-no::before {
  background: var(--inymo-green);
}

.card-material-no:hover {
  border-color: var(--inymo-green);
  box-shadow: 0 20px 50px rgba(139, 198, 63, 0.15);
}

.bifurcacion-card .card-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 15px;
  margin-top: 10px;
}

.card-material-si .card-icon {
  background: rgba(139, 198, 63, 0.15);
  color: var(--inymo-green);
}

.card-material-no .card-icon {
  background: rgba(139, 198, 63, 0.15);
  color: var(--inymo-green);
}

.bifurcacion-card > .card-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: 20px;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.75rem;
  font-weight: 600 !important;
  color: var(--inymo-green);
  border: 1px solid rgba(139, 198, 63, 0.3);
}

.bifurcacion-card h3 {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 1.4rem;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 10px;
}

.bifurcacion-card .card-desc {
  font-family: 'Barlow', sans-serif !important;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 15px;
}

.card-pasos {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.card-pasos .paso-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.card-pasos .paso-indicator i {
  color: var(--inymo-green);
}

.card-pasos span:last-child {
  font-family: 'Chakra Petch', monospace !important;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.card-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.mini-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Barlow', sans-serif !important;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.mini-feature i {
  color: var(--inymo-green);
  font-size: 0.9rem;
}

.card-material-no .mini-feature i {
  color: var(--inymo-green);
}

.card-arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--inymo-green);
  transition: transform 0.3s ease;
}

.card-material-no .card-arrow {
  color: var(--inymo-green);
}

.bifurcacion-card:hover .card-arrow {
  transform: translateX(5px);
}

/* Flujos Comparativa */
.flujos-comparativa {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 750px;
  margin: 0 auto;
}

.flujo-columna {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 20px;
}

.flujo-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.95rem;
  text-transform: uppercase !important;
  color: var(--text-primary);
}

.flujo-titulo i {
  color: var(--inymo-green);
}

.flujo-columna:last-child .flujo-titulo i {
  color: var(--inymo-blue);
}

.pasos-verticales {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.paso-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.paso-mini .num {
  width: 22px;
  height: 22px;
  background: var(--inymo-slate);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Chakra Petch', monospace !important;
  font-size: 0.7rem;
  font-weight: 600 !important;
  flex-shrink: 0;
}

.paso-mini.paso-final {
  background: rgba(139, 198, 63, 0.1);
  border: 1px solid rgba(139, 198, 63, 0.3);
  color: var(--text-primary);
}

.paso-mini.paso-final .num {
  background: var(--inymo-green);
  color: var(--inymo-navy);
}

/* Sección cómo funciona */
.como-funciona {
  padding: 30px 0;
  background: linear-gradient(180deg, transparent 0%, rgba(139, 198, 63, 0.02) 50%, transparent 100%);
}

/* Estructuras Preview */
.estructuras-preview {
  padding: 30px 0;
  background: rgba(0, 0, 0, 0.2);
  position: relative;
}

.estructuras-preview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
}

.estructuras-preview::after {
  display: none;
}

.estructuras-marquee {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.estructura-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  padding: 8px 14px;
  border-radius: 25px;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

.estructura-chip i {
  color: var(--inymo-green);
  font-size: 1rem;
}

.estructura-chip:hover {
  border-color: var(--inymo-blue);
  background: rgba(59, 130, 246, 0.1);
  color: var(--text-primary);
}

/* CTA Buttons */
.cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-cotizar.btn-material-si {
  background: linear-gradient(135deg, var(--inymo-green) 0%, var(--inymo-green-dark) 100%);
}

.btn-cotizar.btn-material-no {
  background: linear-gradient(135deg, var(--inymo-blue) 0%, var(--inymo-blue-dark) 100%);
  color: white;
}

.btn-cotizar.btn-material-no:hover {
  color: white;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
}

/* ============================================================
   SELECTORES VISUALES v2
   ============================================================ */

/* Visual Grid para selectores con imágenes */
.visual-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.visual-selector-grid.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

.visual-selector-grid.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.visual-option {
  cursor: pointer;
}

.visual-option input {
  display: none;
}

.visual-option-content {
  background: var(--inymo-navy);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
}

.visual-option-content .option-image {
  width: 100%;
  height: 100px;
  object-fit: contain;
  margin-bottom: 10px;
  opacity: 0.85;
  transition: all 0.3s ease;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  padding: 8px;
}

.visual-option-content .option-image.acabado-img {
  height: 80px;
  border-radius: 50%;
  width: 80px;
  margin: 0 auto 10px;
  padding: 0;
}

.visual-option-content .option-icon {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.visual-option-content .option-label {
  display: block;
  font-weight: 600 !important;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.visual-option-content .option-desc {
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1.3;
  display: block;
  margin-top: 2px;
}

.visual-option:hover .visual-option-content {
  border-color: var(--inymo-blue);
}

.visual-option:hover .option-image {
  opacity: 1;
}

.visual-option input:checked + .visual-option-content {
  border-color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.1);
}

.visual-option input:checked + .visual-option-content .option-icon {
  color: var(--inymo-green);
}

.visual-option input:checked + .visual-option-content .option-image {
  opacity: 1;
}

/* Multi-select chips */
.multi-select-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.multi-chip {
  cursor: pointer;
}

.multi-chip input {
  display: none;
}

.multi-chip-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--inymo-navy);
  border: 2px solid var(--border-color);
  border-radius: 25px;
  padding: 10px 18px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.multi-chip-content i {
  font-size: 1.2rem;
  color: var(--text-muted);
}

.multi-chip:hover .multi-chip-content {
  border-color: var(--inymo-blue);
}

.multi-chip input:checked + .multi-chip-content {
  border-color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.15);
}

.multi-chip input:checked + .multi-chip-content i {
  color: var(--inymo-green);
}

/* ============================================================
   VISOR 3D
   ============================================================ */

.visor-3d-container {
  background: var(--inymo-navy);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 15px;
}

.visor-3d-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--border-color);
}

.visor-3d-header span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.visor-3d-header i {
  color: var(--inymo-green);
}

.visor-3d-controls {
  display: flex;
  gap: 8px;
}

.visor-3d-controls button {
  background: var(--inymo-slate);
  border: none;
  color: var(--text-secondary);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.visor-3d-controls button:hover {
  background: var(--inymo-green);
  color: var(--inymo-navy);
}

.visor-3d-canvas {
  width: 100%;
  height: 300px;
  background: #0a0f1a;
}

.visor-3d-info {
  padding: 10px 15px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ============================================================
   MATERIAL CARDS (Múltiples materiales)
   ============================================================ */

.materiales-lista {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.material-card {
  background: var(--inymo-navy);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
}

.material-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.material-card-header h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
}

.material-card-header h4 i {
  color: var(--inymo-blue);
}

.material-card-header .btn-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
  transition: all 0.2s ease;
}

.material-card-header .btn-remove:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.btn-add-material {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px;
  background: transparent;
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-add-material:hover {
  border-color: var(--inymo-green);
  color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.05);
}

/* ============================================================
   ACABADOS SELECTOR
   ============================================================ */

.acabados-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.acabado-option {
  cursor: pointer;
}

.acabado-option input {
  display: none;
}

.acabado-content {
  background: var(--inymo-navy);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  padding: 15px 10px;
  text-align: center;
  transition: all 0.3s ease;
}

.acabado-content .acabado-preview {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 auto 10px;
  border: 2px solid var(--border-color);
}

.acabado-content .acabado-label {
  font-size: 0.8rem;
  font-weight: 500;
}

.acabado-option:hover .acabado-content {
  border-color: var(--inymo-blue);
}

.acabado-option input:checked + .acabado-content {
  border-color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.1);
}

/* Colores de acabado */
.acabado-natural .acabado-preview { background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%); }
.acabado-pintura .acabado-preview { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.acabado-galvanizado .acabado-preview { background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%); }
.acabado-cromado .acabado-preview { background: linear-gradient(135deg, #f3f4f6 0%, #d1d5db 50%, #9ca3af 100%); }
.acabado-anodizado .acabado-preview { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); }

/* (Responsive v2 ya consolidado arriba) */

/* ============================================================
   SECCIÓN PROFESIONAL DE CORTE - ESTILOS
   ============================================================ */

/* Subsecciones dentro del formulario */
.subsection {
  padding: 20px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

/* Badge PRO */
.badge-pro {
  background: linear-gradient(135deg, var(--inymo-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.65rem;
  font-weight: 700 !important;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 10px;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Badge HOT (diferenciador) */
.badge-hot {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  color: white;
  font-size: 0.65rem;
  font-weight: 700 !important;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 10px;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Hint/descripción de sección */
.section-hint {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 15px;
  line-height: 1.5;
}

.section-hint i {
  color: var(--inymo-green);
  margin-right: 5px;
}

/* Info de Nesting destacada */
.nesting-info {
  background: rgba(139, 198, 63, 0.1);
  border-left: 3px solid var(--inymo-green);
  padding: 12px 15px;
  border-radius: 0 8px 8px 0;
}

.nesting-info strong {
  color: var(--inymo-green);
}

/* ============================================================
   TARJETAS UNIFORMES - CORTE PROFESIONAL
   ============================================================ */

/* Tarjetas de proceso de corte y categoría - altura fija */
.subsection .opciones-grid.grid-4 .opcion-card .opcion-content {
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.subsection .opciones-grid.grid-4 .opcion-card .opcion-content i {
  font-size: 1.8rem;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.subsection .opciones-grid.grid-4 .opcion-card .opcion-content span {
  font-size: 0.85rem;
  font-weight: 600 !important;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 4px;
}

.subsection .opciones-grid.grid-4 .opcion-card .opcion-content small {
  font-size: 0.7rem;
  text-align: center;
  line-height: 1.2;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.4em;
}

/* Grid de bisel - uniformar */
.bisel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.bisel-card .opcion-content {
  height: 130px;
  min-height: 130px;
  max-height: 130px;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bisel-card .bisel-icon {
  width: 45px;
  height: 45px;
  background: rgba(139, 198, 63, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.bisel-card .bisel-icon i {
  font-size: 1.3rem;
  color: var(--inymo-green);
  margin: 0;
}

.bisel-card .opcion-content span {
  font-size: 0.8rem;
  font-weight: 600 !important;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 4px;
}

.bisel-card .opcion-content small {
  font-size: 0.7rem;
  text-align: center;
  color: var(--text-muted);
}

.bisel-card:hover .opcion-content {
  border-color: var(--inymo-green);
}

.bisel-card input:checked + .opcion-content {
  border-color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.1);
}

.bisel-card input:checked + .opcion-content .bisel-icon {
  background: var(--inymo-green);
}

.bisel-card input:checked + .opcion-content .bisel-icon i {
  color: var(--inymo-navy);
}

/* Selector de ángulo */
#selector-angulo {
  background: rgba(139, 198, 63, 0.05);
  border: 1px solid rgba(139, 198, 63, 0.2);
  border-radius: 10px;
  padding: 15px;
}

#selector-angulo .form-label {
  color: var(--inymo-green);
  margin-bottom: 10px;
}

/* Acabados post-corte - altura uniforme */
.visual-selector-grid.compact {
  grid-template-columns: repeat(4, 1fr);
}

.visual-option.compact .visual-option-content {
  height: 110px;
  min-height: 110px;
  max-height: 110px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.visual-option.compact .visual-option-content i {
  font-size: 1.6rem;
  margin-bottom: 6px;
  display: block;
  color: var(--text-muted);
  flex-shrink: 0;
}

.visual-option.compact .visual-option-content .option-label {
  font-size: 0.75rem;
  font-weight: 600 !important;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 2px;
}

.visual-option.compact .visual-option-content .option-desc {
  font-size: 0.65rem;
  text-align: center;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.visual-option.compact input:checked + .visual-option-content i {
  color: var(--inymo-green);
}

/* Animación fade-in para secciones */
.fade-in {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* (Responsive corte ya consolidado arriba) */
@media (max-width: 576px) {
  .subsection .opciones-grid.grid-4 .opcion-card .opcion-content {
    height: auto;
    min-height: 80px;
    max-height: none;
  }
  .bisel-grid { grid-template-columns: repeat(2, 1fr); }
  .bisel-card .opcion-content { height: auto; min-height: 100px; max-height: none; }

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

  .visual-option.compact .visual-option-content {
    height: auto;
    min-height: 90px;
    max-height: none;
  }

  .badge-pro,
  .badge-hot {
    display: block;
    margin-left: 0;
    margin-top: 5px;
    width: fit-content;
  }
}

/* ============================================================
   TARJETAS CON IMÁGENES - SECCIÓN CORTE PROFESIONAL
   ============================================================ */

/* Grid de 4 columnas para visual-selector con imágenes */
.visual-selector-grid.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.visual-selector-grid.grid-4 .visual-option-content {
  height: 180px;
  min-height: 180px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.visual-selector-grid.grid-4 .option-image {
  width: 100%;
  height: 95px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 8px;
  opacity: 0.85;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.visual-selector-grid.grid-4 .visual-option:hover .option-image {
  opacity: 1;
  transform: scale(1.05);
}

.visual-selector-grid.grid-4 .visual-option input:checked + .visual-option-content .option-image {
  opacity: 1;
}

.visual-selector-grid.grid-4 .option-label {
  font-size: 0.78rem;
  font-weight: 600 !important;
  text-align: center;
  margin-bottom: 2px;
  line-height: 1.2;
  word-wrap: break-word;
  width: 100%;
}

.visual-selector-grid.grid-4 .option-desc {
  font-size: 0.65rem;
  text-align: center;
  color: var(--text-muted);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Opción de bisel con imagen */
.bisel-option .visual-option-content {
  height: 170px;
  min-height: 170px;
}

.bisel-option .option-image {
  height: 100px;
  border: 2px solid rgba(139, 198, 63, 0.2);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  padding: 5px;
}

.bisel-option input:checked + .visual-option-content .option-image {
  border-color: var(--inymo-green);
  box-shadow: 0 0 15px rgba(139, 198, 63, 0.3);
}

/* (Responsive tarjetas con imágenes ya consolidado arriba) */
@media (max-width: 576px) {
  .visual-selector-grid.grid-4 .visual-option-content {
    height: auto;
    min-height: 120px;
    padding: 10px 8px;
  }

  .visual-selector-grid.grid-4 .option-image {
    height: 70px;
    margin-bottom: 8px;
  }

  .visual-selector-grid.grid-4 .option-label {
    font-size: 0.75rem;
  }

  .visual-selector-grid.grid-4 .option-desc {
    font-size: 0.65rem;
  }

  .bisel-option .visual-option-content {
    height: 150px;
    min-height: 150px;
  }

  .bisel-option .option-image {
    height: 80px;
  }
}

/* ============================================================
   SECCIÓN PROFESIONAL DE DOBLEZ
   ============================================================ */

/* Opciones row con wrap */
.opciones-row.wrap {
  flex-wrap: wrap;
  gap: 10px;
}

/* Pill con advertencia */
.opcion-pill.pill-warning span {
  border-color: #f59e0b;
}

.opcion-pill.pill-warning input:checked + span {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
  color: #fbbf24;
}

/* Form check estilo oscuro */
.form-check-input {
  background-color: var(--inymo-navy);
  border-color: var(--border-color);
}

.form-check-input:checked {
  background-color: var(--inymo-green);
  border-color: var(--inymo-green);
}

.form-check-label {
  color: var(--text-primary);
}

/* Badge TALLER */
.badge-hot {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600 !important;
  margin-left: 10px;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Badge MANIOBRA */
.badge-pro {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600 !important;
  margin-left: 10px;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Subsecciones en sección de doblez */
.subsection .section-hint {
  margin-bottom: 15px;
}

/* Contenedor de checkbox de desarrollo */
.desarrollo-check-container {
  background: rgba(59, 130, 246, 0.1);
  border-left: 4px solid #3B82F6;
  border-radius: 8px;
  padding: 15px 20px;
}

.desarrollo-check-container .form-check-label strong {
  color: var(--text-primary);
  font-size: 1rem;
}

.desarrollo-hint {
  margin-top: 10px;
  margin-bottom: 0;
  color: #93c5fd;
  font-size: 0.85rem;
  line-height: 1.4;
}

.desarrollo-hint i {
  color: #3B82F6;
}

/* Tooltip para icono de ayuda */
.section-label .bx-help-circle {
  font-size: 1rem;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.section-label .bx-help-circle:hover {
  opacity: 1;
  color: var(--inymo-green);
}

/* Pill recomendada */
.opcion-pill.pill-recommended span {
  border-color: var(--inymo-green);
}

.opcion-pill.pill-recommended input:checked + span {
  background: rgba(139, 198, 63, 0.2);
}

/* Resultado de cálculo de peso */
#resultado-peso {
  background: rgba(139, 198, 63, 0.1);
  border: 1px solid rgba(139, 198, 63, 0.3);
  border-radius: 10px;
  padding: 15px;
}

.peso-calculado .peso-info {
  display: flex;
  align-items: center;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.peso-calculado .peso-info i {
  color: var(--inymo-green);
  font-size: 1.2rem;
}

.peso-calculado .peso-maniobra {
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #fbbf24;
  font-size: 0.9rem;
}

.peso-calculado .peso-maniobra i {
  color: #f59e0b;
  font-size: 1.2rem;
}

.peso-calculado .text-warning {
  color: #fbbf24;
}

/* ============================================================
   VALIDACIÓN CON IA - ESTILOS
   ============================================================ */

/* Botón de validación IA */
.btn-validar-ia {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-validar-ia:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

.btn-validar-ia:disabled {
  opacity: 0.7;
  cursor: wait;
}

.btn-validar-ia i {
  font-size: 1.3rem;
}

/* Área de resultado IA */
.resultado-ia {
  margin-top: 20px;
  background: var(--inymo-navy);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

.resultado-ia.viable {
  border-color: var(--inymo-green);
}

.resultado-ia.con-advertencias {
  border-color: #f59e0b;
}

.resultado-ia-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--border-color);
}

.resultado-ia.viable .resultado-icon {
  color: var(--inymo-green);
  font-size: 1.5rem;
}

.resultado-ia.con-advertencias .resultado-icon {
  color: #f59e0b;
  font-size: 1.5rem;
}

.resultado-titulo {
  font-weight: 600 !important;
  font-size: 1.1rem;
}

.resultado-ia-body {
  padding: 20px;
}

.resultado-mensaje {
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: 15px;
  font-weight: 500;
}

.proceso-recomendado {
  background: rgba(139, 198, 63, 0.1);
  border-left: 3px solid var(--inymo-green);
  padding: 12px 15px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.proceso-recomendado i {
  color: var(--inymo-green);
  font-size: 1.2rem;
}

.resultado-recomendaciones,
.resultado-advertencias {
  margin-top: 15px;
}

.resultado-recomendaciones strong,
.resultado-advertencias strong {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.resultado-recomendaciones strong i {
  color: var(--inymo-green);
}

.resultado-advertencias strong i {
  color: #f59e0b;
}

.resultado-recomendaciones ul,
.resultado-advertencias ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.resultado-recomendaciones li,
.resultado-advertencias li {
  padding: 8px 0 8px 25px;
  position: relative;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.resultado-recomendaciones li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--inymo-green);
}

.resultado-advertencias li::before {
  content: '⚠';
  position: absolute;
  left: 0;
  color: #f59e0b;
}

/* Animación de loader */
.bx-spin {
  animation: spin 1s linear infinite;
}

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

/* ============================================================
   SECCIONES CON HEADER Y BOTÓN DE ACCIÓN
   ============================================================ */

.section-header-with-action {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  background: linear-gradient(135deg, rgba(139, 198, 63, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
  border-radius: 12px;
  margin-bottom: 24px;
  border: 1px solid rgba(139, 198, 63, 0.2);
}

.section-title-group {
  display: flex;
  align-items: center;
  gap: 15px;
}

.section-icon-large {
  font-size: 2.5rem;
  color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.15);
  padding: 15px;
  border-radius: 12px;
}

.section-main-title {
  font-size: 1.3rem;
  font-weight: 600 !important;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.section-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
}

.section-actions {
  display: flex;
  gap: 10px;
}

/* Botón de Omitir/Reiniciar */
.btn-omitir {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  color: #fbbf24;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-omitir:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: #f59e0b;
  transform: translateY(-1px);
}

.btn-omitir i {
  font-size: 1rem;
}

/* ============================================================
   NOTIFICACIONES TOAST
   ============================================================ */

.notificacion-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--card-bg-solid);
  border-radius: 10px;
  border-left: 4px solid var(--inymo-blue);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  font-size: 0.9rem;
  color: var(--text-primary);
  z-index: 9999;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
}

.notificacion-toast.show {
  opacity: 1;
  transform: translateX(0);
}

.notificacion-toast.notif-info {
  border-left-color: var(--inymo-blue);
}

.notificacion-toast.notif-info i {
  color: var(--inymo-blue);
}

.notificacion-toast.notif-success {
  border-left-color: var(--inymo-green);
}

.notificacion-toast.notif-success i {
  color: var(--inymo-green);
}

.notificacion-toast.notif-warning {
  border-left-color: #f59e0b;
}

.notificacion-toast.notif-warning i {
  color: #f59e0b;
}

.notificacion-toast i {
  font-size: 1.2rem;
}

/* ============================================================
   BADGES PARA NDT Y OPCIONES
   ============================================================ */

.badge-incluido {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(139, 198, 63, 0.2);
  color: var(--inymo-green);
  font-size: 0.7rem;
  font-weight: 600 !important;
  border-radius: 4px;
  margin-top: 5px;
}

.badge-extra {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  font-size: 0.7rem;
  font-weight: 600 !important;
  border-radius: 4px;
  margin-top: 5px;
}

.incluido-default .visual-option-content {
  border-color: rgba(139, 198, 63, 0.3);
}

/* Badge de opción recomendada */
.badge-recomendado {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(139, 198, 63, 0.2);
  color: var(--inymo-green);
  font-size: 0.65rem;
  font-weight: 600 !important;
  border-radius: 4px;
  margin-top: 5px;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Opción recomendada con borde verde */
.visual-option.option-recommended .visual-option-content {
  border-color: rgba(139, 198, 63, 0.4);
  background: rgba(139, 198, 63, 0.05);
}

.visual-option.option-recommended:hover .visual-option-content {
  border-color: rgba(139, 198, 63, 0.6);
}

/* Fallback de icono cuando no carga la imagen */
.option-icon-fallback {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 198, 63, 0.1);
  border-radius: 8px;
  margin-bottom: 8px;
}

.option-icon-fallback i {
  font-size: 1.8rem;
  color: var(--inymo-green);
}

/* Imágenes de soldadura con fondo blanco */
.visual-selector-grid .option-image {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 8px;
  background: #fff;
  padding: 4px;
}

/* ============================================================
   GRID DE 3 Y 5 COLUMNAS
   ============================================================ */

.visual-selector-grid.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.visual-selector-grid.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.visual-selector-grid.grid-5 .visual-option-content {
  padding: 12px 8px;
  min-height: 100px;
}

.visual-selector-grid.grid-5 .option-label {
  font-size: 0.8rem;
}

.visual-selector-grid.grid-5 .option-desc {
  font-size: 0.7rem;
}

.visual-selector-grid.grid-5 .option-icon i {
  font-size: 1.5rem;
}

/* ============================================================
   GRILLA DE CÓDIGOS DE SOLDADURA
   ============================================================ */

.codigos-soldadura-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.codigo-option {
  cursor: pointer;
}

.codigo-option input[type="radio"] {
  display: none;
}

.codigo-content {
  background: rgba(30, 41, 59, 0.6);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100px;
}

.codigo-option:hover .codigo-content {
  border-color: rgba(139, 198, 63, 0.4);
  background: rgba(30, 41, 59, 0.8);
}

.codigo-option input[type="radio"]:checked + .codigo-content {
  border-color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.15);
  box-shadow: 0 0 15px rgba(139, 198, 63, 0.2);
}

.codigo-header {
  margin-bottom: 6px;
}

.codigo-label {
  font-size: 0.95rem;
  font-weight: 700 !important;
  color: var(--text-primary);
  display: block;
}

.codigo-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.codigo-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.codigo-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.codigo-footer small {
  font-size: 0.7rem;
  color: var(--inymo-green);
  opacity: 0.8;
}

.codigo-footer i {
  font-size: 0.75rem;
  color: var(--inymo-green);
}

/* Opción "Sin Código" con estilo diferente */
.codigo-default .codigo-content {
  background: rgba(100, 116, 139, 0.2);
  border-style: dashed;
}

.codigo-default .codigo-label {
  color: var(--text-secondary);
}

/* (Responsive codigos soldadura ya consolidado arriba) */

/* ============================================================
   PILLS CON RECOMENDACIÓN
   ============================================================ */

.pill-recommended {
  border-color: rgba(139, 198, 63, 0.4) !important;
  background: rgba(139, 198, 63, 0.1) !important;
}

.pill-recommended span {
  color: var(--inymo-green);
}

/* ============================================================
   TARJETAS DE MATERIAL (Especificaciones)
   ============================================================ */

.material-card {
  background: rgba(30, 41, 59, 0.6);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.material-card:hover {
  border-color: rgba(139, 198, 63, 0.3);
}

/* Material completo - borde verde */
.material-card.material-completo {
  border-color: var(--inymo-green);
  box-shadow: 0 0 15px rgba(139, 198, 63, 0.15);
}

.material-card.material-completo .material-header {
  background: rgba(139, 198, 63, 0.2);
}

.material-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(139, 198, 63, 0.1);
  border-bottom: 1px solid var(--border-color);
  gap: 12px;
}

.material-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600 !important;
  color: var(--inymo-green);
}

.material-titulo i {
  font-size: 1.2rem;
}

.material-status {
  flex: 1;
  text-align: right;
}

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-incompleto {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.status-completo {
  background: rgba(139, 198, 63, 0.2);
  color: var(--inymo-green);
}

.material-body {
  padding: 16px;
}

/* Layout de filas del material */
.material-row {
  margin-bottom: 16px;
}

.material-row:last-child {
  margin-bottom: 0;
}

.material-field {
  display: flex;
  flex-direction: column;
}

.field-full {
  width: 100%;
}

/* Fila de especificaciones: Sistema | Espesor | Cantidad */
.row-specs {
  display: grid;
  grid-template-columns: 1fr 1.5fr 0.8fr;
  gap: 12px;
  align-items: end;
}

.field-sistema,
.field-espesor,
.field-cantidad {
  min-width: 0;
}

/* Fila de dimensiones */
.row-dimensiones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Fila de servicios asociados */
.row-servicios {
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.row-servicios .form-label {
  margin-bottom: 10px;
}

.servicios-checkboxes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.servicio-check {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(30, 41, 59, 0.8);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
}

.servicio-check input[type="checkbox"] {
  display: none;
}

.servicio-check i {
  font-size: 1rem;
  color: var(--text-secondary);
}

.servicio-check span {
  color: var(--text-secondary);
}

.servicio-check:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Servicio seleccionado */
.servicio-check:has(input:checked) {
  border-color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.15);
}

.servicio-check:has(input:checked) i,
.servicio-check:has(input:checked) span {
  color: var(--inymo-green);
}

/* Colores específicos por servicio */
.check-corte:has(input:checked) {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.15);
}
.check-corte:has(input:checked) i,
.check-corte:has(input:checked) span {
  color: #60a5fa;
}

.check-doblez:has(input:checked) {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.15);
}
.check-doblez:has(input:checked) i,
.check-doblez:has(input:checked) span {
  color: #a78bfa;
}

.check-soldadura:has(input:checked) {
  border-color: #f97316;
  background: rgba(249, 115, 22, 0.15);
}
.check-soldadura:has(input:checked) i,
.check-soldadura:has(input:checked) span {
  color: #fb923c;
}

/* Indicadores de datos en checkboxes de servicio */
.servicio-check.tiene-datos {
  position: relative;
}

.servicio-check.sin-datos {
  position: relative;
  opacity: 0.7;
}

.servicio-check .check-icon {
  font-size: 0.75rem;
  margin-left: 4px;
  transition: all 0.2s ease;
}

/* Icono de check cuando tiene datos */
.servicio-check.tiene-datos .check-icon {
  color: var(--inymo-green);
}

/* Icono de menos cuando no tiene datos */
.servicio-check.sin-datos .check-icon {
  color: var(--text-muted);
}

/* Colores específicos del icono check según servicio seleccionado */
.check-corte.tiene-datos:has(input:checked) .check-icon {
  color: #60a5fa;
}
.check-doblez.tiene-datos:has(input:checked) .check-icon {
  color: #a78bfa;
}
.check-soldadura.tiene-datos:has(input:checked) .check-icon {
  color: #fb923c;
}

/* Tooltip/hint para el usuario */
.servicio-check.sin-datos::after {
  content: 'Sin especificaciones';
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.servicio-check.sin-datos:hover::after {
  opacity: 1;
}

/* Animación shake para validación */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
}

.material-card.shake {
  animation: shake 0.4s ease-in-out;
  border-color: #ef4444 !important;
}

/* Resumen de servicios seleccionados (header) */
.resumen-servicios-seleccionados {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.resumen-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.servicio-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
}

.tag-corte {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.tag-doblez {
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
}

.tag-soldadura {
  background: rgba(249, 115, 22, 0.2);
  color: #fb923c;
}

.btn-agregar-material {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(139, 198, 63, 0.15);
  border: 1px dashed var(--inymo-green);
  border-radius: 8px;
  color: var(--inymo-green);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-agregar-material:hover {
  background: rgba(139, 198, 63, 0.25);
  border-style: solid;
}

.btn-quitar-material {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  color: #ef4444;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-quitar-material:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
}

.selector-espesor {
  position: relative;
}

.selector-espesor select,
.selector-espesor input {
  width: 100%;
}

/* Resumen del servicio seleccionado */
.resumen-servicio {
  margin-bottom: 20px;
}

.resumen-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(139, 198, 63, 0.15);
  border: 1px solid rgba(139, 198, 63, 0.3);
  border-radius: 20px;
  color: var(--inymo-green);
  font-weight: 500;
}

.resumen-badge i {
  font-size: 1.2rem;
}

/* Badge de soldadura */
.badge-soldadura {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(251, 146, 60, 0.2);
  border-radius: 12px;
  color: #fb923c;
  font-size: 0.75rem;
  font-weight: 500;
  vertical-align: middle;
}

/* ============================================================
   SECCIÓN SOLDADURA BIMETÁLICA
   ============================================================ */

.bimetal-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(251, 146, 60, 0.15);
  border-left: 4px solid #fb923c;
  border-radius: 8px;
  margin-bottom: 20px;
}

.bimetal-alert > i {
  font-size: 1.5rem;
  color: #fb923c;
  flex-shrink: 0;
}

.bimetal-alert-content strong {
  display: block;
  color: #fb923c;
  margin-bottom: 4px;
}

.bimetal-alert-content p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.bimetal-config {
  padding: 16px;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 10px;
}

.bimetal-material-display {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
}

.bimetal-material-display i {
  color: var(--inymo-green);
}

.proceso-bimetal-recomendado {
  padding: 16px;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 8px;
  border-left: 4px solid var(--inymo-green);
}

.proceso-bimetal-recomendado.recomendacion-especial {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.proceso-bimetal-recomendado.recomendacion-advertencia {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.proceso-bimetal-recomendado.recomendacion-consulta {
  border-left-color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
}

.rec-proceso {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.rec-proceso i {
  font-size: 1.2rem;
}

.recomendacion-especial .rec-proceso i {
  color: #3b82f6;
}

.recomendacion-advertencia .rec-proceso i {
  color: #ef4444;
}

.recomendacion-consulta .rec-proceso i {
  color: #fbbf24;
}

.rec-nota {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Animaciones */
.fade-out {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

/* ============================================================
   ICON PLACEHOLDER
   ============================================================ */

.option-icon-placeholder {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 198, 63, 0.1);
  border-radius: 10px;
  margin-bottom: 10px;
}

.option-icon-placeholder i {
  font-size: 2rem;
  color: var(--inymo-green);
}

/* ============================================================
   RESPONSIVE PARA NUEVOS GRIDS (complementario)
   ============================================================ */

@media (max-width: 992px) {
  .section-header-with-action {
    flex-direction: column;
    gap: 15px;
  }
  .section-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .visual-selector-grid.grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .visual-selector-grid.grid-3 { grid-template-columns: 1fr; }

  .section-title-group {
    flex-direction: column;
    text-align: center;
  }

  .notificacion-toast {
    left: 20px;
    right: 20px;
  }
}

/* ============================================================
   BOTÓN DE VALIDAR
   ============================================================ */

.btn-validar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: linear-gradient(135deg, rgba(139, 198, 63, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%);
  border: 2px solid var(--inymo-green);
  border-radius: 12px;
  color: var(--inymo-green);
  font-size: 1rem;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-validar:hover {
  background: linear-gradient(135deg, rgba(139, 198, 63, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(139, 198, 63, 0.3);
}

.btn-validar i {
  font-size: 1.2rem;
}

.btn-validar:disabled {
  opacity: 0.7;
  cursor: wait;
}

.btn-validar-text,
.btn-validar-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   PANEL DE COHERENCIA
   ============================================================ */

.coherencia-card {
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(139, 198, 63, 0.3);
  border-radius: 12px;
  overflow: hidden;
}

.coherencia-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(135deg, rgba(139, 198, 63, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%);
  border-bottom: 1px solid rgba(139, 198, 63, 0.2);
  font-weight: 600 !important;
  font-size: 1rem;
  color: var(--inymo-green);
}

.coherencia-header i {
  font-size: 1.3rem;
}

.coherencia-body {
  padding: 20px;
}

.coherencia-problemas {
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid #ef4444;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.coherencia-problemas strong {
  color: #f87171;
  display: block;
  margin-bottom: 10px;
}

.coherencia-problemas ul {
  margin: 0;
  padding-left: 20px;
  color: #fca5a5;
}

.coherencia-problemas li {
  margin-bottom: 5px;
}

.coherencia-recomendaciones {
  background: rgba(59, 130, 246, 0.1);
  border-left: 3px solid var(--inymo-blue);
  padding: 15px;
  border-radius: 8px;
}

.coherencia-recomendaciones strong {
  color: #93c5fd;
  display: block;
  margin-bottom: 10px;
}

.coherencia-recomendaciones ul {
  margin: 0;
  padding-left: 20px;
  color: #bfdbfe;
}

.coherencia-recomendaciones li {
  margin-bottom: 5px;
}

.coherencia-ok {
  display: flex;
  align-items: center;
  color: var(--inymo-green);
  font-weight: 500;
  background: rgba(139, 198, 63, 0.1);
  padding: 15px;
  border-radius: 8px;
  margin: 0;
}

.coherencia-ok i {
  font-size: 1.3rem;
}

/* ============================================================
   WRAP PARA OPCIONES-ROW
   ============================================================ */

.opciones-row.wrap {
  flex-wrap: wrap;
}

/* ============================================================
   TÉRMINOS Y CONDICIONES
   ============================================================ */

.terminos-condiciones {
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(139, 198, 63, 0.3);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 30px;
}

.terminos-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(139, 198, 63, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%);
  border-bottom: 1px solid rgba(139, 198, 63, 0.2);
}

.terminos-header i {
  font-size: 1.5rem;
  color: var(--inymo-green);
}

.terminos-header h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600 !important;
  color: var(--text-primary);
}

.terminos-body {
  padding: 24px;
}

.termino-item {
  display: flex;
  gap: 12px;
  padding: 15px;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.termino-item:last-child {
  margin-bottom: 0;
}

.termino-item:hover {
  border-color: rgba(139, 198, 63, 0.3);
  background: rgba(15, 23, 42, 0.7);
}

.termino-item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--inymo-green);
  cursor: pointer;
}

.termino-item label {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  cursor: pointer;
}

.termino-item label strong {
  color: var(--text-primary);
  display: block;
  margin-bottom: 4px;
}

.termino-item:has(input:checked) {
  border-color: rgba(139, 198, 63, 0.5);
  background: rgba(139, 198, 63, 0.05);
}

.termino-item:has(input:checked) label {
  color: var(--text-primary);
}

/* (Responsive movil ya consolidado arriba en seccion principal) */

/* ========== BOTÓN LIMPIAR DESCRIPCIÓN ========== */
.btn-limpiar-desc {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.2s;
  z-index: 2;
  opacity: 0.6;
}

.btn-limpiar-desc:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  opacity: 1;
  transform: scale(1.05);
}

/* ========== FADE-IN PARA CONTAINER DEL FORMULARIO ========== */
.embudo-card {
  animation: fadeInCard 0.4s ease-out;
  will-change: opacity, transform;
}

@keyframes fadeInCard {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== LOADING STATE BOTÓN SIGUIENTE ========== */
.btn-next:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.btn-next-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-next-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ========== CHECKBOX DE AUTORIZACIÓN ========== */
.autorizacion-check {
  background: rgba(140, 198, 63, 0.08);
  border: 1px solid rgba(140, 198, 63, 0.2);
  border-radius: 12px;
  padding: 16px 20px;
}

.autorizacion-check .form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.autorizacion-check .form-check-input {
  min-width: 20px;
  min-height: 20px;
  margin-top: 2px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(140, 198, 63, 0.4);
  border-radius: 4px;
  cursor: pointer;
}

.autorizacion-check .form-check-input:checked {
  background-color: #8CC63F;
  border-color: #8CC63F;
}

.autorizacion-check .form-check-label {
  color: #e2e8f0;
  font-size: 0.85rem;
  line-height: 1.5;
  cursor: pointer;
}

.autorizacion-check small {
  color: #e2e8f0 !important;
  font-size: 0.8rem;
  opacity: 0.9;
}

/* ========== IMAGENES DE PRESENTACION ========== */

/* --- Imagen en service cards (landing) --- */
.servicio-card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  margin: -35px -35px 20px -35px;
  width: calc(100% + 70px);
  opacity: 0.6;
  transition: opacity 0.4s;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
}
.servicio-card:hover .servicio-card-img {
  opacity: 0.8;
}

/* --- Imagen de fondo en CTA --- */
.cta-box {
  background-image: url('/images/presentacion/planta-aerea.jpg');
  background-size: cover;
  background-position: center;
}
.cta-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30,41,59,0.93), rgba(51,65,85,0.90));
  z-index: 0;
  border-radius: 24px;
}

/* --- Acento decorativo superior en embudo-card (reemplaza imagenes flotantes) --- */
.embudo-card {
  position: relative;
  overflow: hidden;
}
.embudo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--inymo-green), var(--inymo-blue), var(--inymo-green));
  background-size: 200% 100%;
  animation: accentSlide 4s ease infinite;
}
@keyframes accentSlide {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

/* --- Imagen en confirmacion --- */
.confirmacion-img {
  width: calc(100% + 80px);
  margin: -50px -40px 30px -40px;
  height: 180px;
  object-fit: cover;
  border-radius: 24px 24px 0 0;
  opacity: 0.5;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
}

/* --- Galeria de proyectos en landing --- */
.proyectos-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.proyecto-thumb {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  transition: all 0.3s;
  opacity: 0.75;
}
.proyecto-thumb:hover {
  opacity: 1;
  transform: scale(1.04);
  border-color: var(--inymo-green);
  box-shadow: 0 8px 25px rgba(139,198,63,0.2);
}

/* ============================================================
   PREMIUM ANIMATION ENGINE — COTIZAR FUNNEL
   Shimmer, stagger, 3D tilt, neon, particles, magnetic, ripple
   ============================================================ */

/* --- Scroll Progress Bar --- */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--inymo-green), var(--inymo-blue), var(--inymo-green));
  background-size: 200% 100%;
  animation: gradientShift 3s linear infinite;
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(139,198,63,0.5), 0 0 20px rgba(59,130,246,0.3);
}

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

/* --- Cursor Glow --- */
.cursor-glow {
  position: fixed;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,198,63,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  will-change: left, top;
}

/* --- Circuit Grid Overlay (hero) --- */
.circuit-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(139,198,63,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,198,63,0.04) 1px, transparent 1px),
    radial-gradient(circle at 25% 25%, rgba(59,130,246,0.06) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(139,198,63,0.06) 2px, transparent 2px);
  background-size: 60px 60px, 60px 60px, 120px 120px, 120px 120px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  animation: circuitPulse 8s ease-in-out infinite;
}

@keyframes circuitPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* --- Stagger Reveal Animations --- */
.stagger-item {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.stagger-item.revealed {
  opacity: 1;
  transform: translateY(0);
}

.stagger-item:nth-child(1) { transition-delay: 0s; }
.stagger-item:nth-child(2) { transition-delay: 0.1s; }
.stagger-item:nth-child(3) { transition-delay: 0.2s; }
.stagger-item:nth-child(4) { transition-delay: 0.3s; }
.stagger-item:nth-child(5) { transition-delay: 0.4s; }
.stagger-item:nth-child(6) { transition-delay: 0.5s; }
.stagger-item:nth-child(7) { transition-delay: 0.6s; }
.stagger-item:nth-child(8) { transition-delay: 0.7s; }

/* --- Shimmer Sweep on Cards --- */
.shimmer-card {
  position: relative;
  overflow: hidden;
}

.shimmer-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  transition: none;
  animation: shimmerSweep 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes shimmerSweep {
  0% { left: -100%; }
  50%, 100% { left: 200%; }
}

/* --- Neon Border Pulse --- */
.neon-border {
  position: relative;
}

.neon-border::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--inymo-green), var(--inymo-blue), var(--inymo-green), var(--inymo-blue));
  background-size: 300% 300%;
  border-radius: inherit;
  z-index: -1;
  animation: neonBorderPulse 4s ease infinite;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.neon-border:hover::before {
  opacity: 0.7;
}

@keyframes neonBorderPulse {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* --- Corner Brackets on Cards --- */
.corner-brackets {
  position: relative;
}

.corner-brackets::before,
.corner-brackets::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0;
  transition: opacity 0.4s, transform 0.4s;
}

.corner-brackets::before {
  top: 8px;
  left: 8px;
  border-top: 2px solid var(--inymo-green);
  border-left: 2px solid var(--inymo-green);
  transform: translate(-5px, -5px);
}

.corner-brackets::after {
  bottom: 8px;
  right: 8px;
  border-bottom: 2px solid var(--inymo-blue);
  border-right: 2px solid var(--inymo-blue);
  transform: translate(5px, 5px);
}

.corner-brackets:hover::before,
.corner-brackets:hover::after {
  opacity: 1;
  transform: translate(0, 0);
}

/* --- Holographic Badge --- */
.holo-badge {
  position: relative;
  overflow: hidden;
}

.holo-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.15) 50%, transparent 80%);
  animation: holoSweep 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes holoSweep {
  0% { left: -100%; }
  50%, 100% { left: 200%; }
}

/* --- Trust Logos Section --- */
.trust-logos-section {
  padding: 40px 0;
  position: relative;
  z-index: 1;
}

.trust-logos-section::after {
  display: none;
}

.trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0.6;
  transition: all 0.4s ease;
  filter: grayscale(0.3);
}

.trust-item:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.08);
}

.trust-item img {
  height: 45px;
  width: auto;
  object-fit: contain;
}

.trust-item span {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

.trust-divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent, var(--border-color), transparent);
}

/* --- Floating Particles --- */
.particle-field {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat linear infinite;
}

.particle:nth-child(odd) {
  background: var(--inymo-green);
}

.particle:nth-child(even) {
  background: var(--inymo-blue);
}

@keyframes particleFloat {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* --- Scan Line Effect --- */
.scan-line-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(139,198,63,0.008) 2px,
    rgba(139,198,63,0.008) 4px
  );
  pointer-events: none;
  z-index: 0;
}

/* --- Gradient Text Shift --- */
.gradient-text {
  background: linear-gradient(135deg, var(--inymo-green), var(--inymo-blue), #a7f3d0, var(--inymo-green));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientText 6s ease infinite;
}

@keyframes gradientText {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Enhanced Hero Logo --- */
.hero-logo {
  animation: logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { filter: drop-shadow(0 8px 30px rgba(139,198,63,0.3)); transform: translateY(0); }
  50% { filter: drop-shadow(0 15px 40px rgba(139,198,63,0.5)); transform: translateY(-8px); }
}

/* --- Button Ripple Effect --- */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple .ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: rippleExpand 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* --- Enhanced Bifurcation Cards --- */
.bifurcacion-card {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.bifurcacion-card .card-icon {
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}

.bifurcacion-card:hover .card-icon {
  transform: scale(1.15) rotateY(10deg);
  box-shadow: 0 10px 30px rgba(139,198,63,0.3);
}

.card-material-no:hover .card-icon {
  box-shadow: 0 10px 30px rgba(139,198,63,0.3);
}

/* --- Service Card Image Overlay --- */
.servicio-card-img {
  height: 160px;
  width: calc(100% + 70px);
  margin: -35px -35px 20px -35px;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
  transition: all 0.5s ease;
  filter: brightness(0.7) saturate(0.8);
}

.servicio-card:hover .servicio-card-img {
  filter: brightness(0.85) saturate(1.1);
  transform: scale(1.05);
}

/* --- Enhanced Structure Chips --- */
.estructura-chip {
  position: relative;
  overflow: hidden;
}

.estructura-chip::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,0.15), transparent);
  transition: left 0.5s ease;
}

.estructura-chip:hover::before {
  left: 100%;
}

/* --- Section Reveal --- */
.section-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.9s cubic-bezier(0.16,1,0.3,1);
}

.section-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Paso-mini Enhanced --- */
.pasos-verticales .paso-mini {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.pasos-verticales .paso-mini::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--inymo-green);
  transform: scaleY(0);
  transition: transform 0.3s ease;
  border-radius: 0 2px 2px 0;
}

.pasos-verticales .paso-mini:hover {
  background: rgba(139,198,63,0.08);
  padding-left: 20px;
}

.pasos-verticales .paso-mini:hover::after {
  transform: scaleY(1);
}

/* --- CTA Box Enhanced --- */
.cta-box {
  transform-style: preserve-3d;
}

.cta-box h2 {
  font-family: 'Chakra Petch', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

/* --- Header Glow Line --- */
.cotizar-header::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(139,198,63,0.6), rgba(59,130,246,0.6), transparent);
  animation: headerGlowPulse 4s ease-in-out infinite;
}

@keyframes headerGlowPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* --- Footer Glow --- */
.cotizar-footer {
  position: relative;
}

.cotizar-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,198,63,0.4), rgba(59,130,246,0.4), transparent);
}

/* --- Metallic Texture on embudo-card --- */
.embudo-card {
  position: relative;
  overflow: hidden;
}

.embudo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--inymo-green), var(--inymo-blue), var(--inymo-green));
  background-size: 200% 100%;
  animation: gradientShift 3s linear infinite;
}

/* --- Glass Counter Boxes --- */
.glass-stat {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 15px 20px;
  text-align: center;
  transition: all 0.4s ease;
}

.glass-stat:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(139,198,63,0.3);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

.glass-stat .stat-number {
  font-family: 'Chakra Petch', monospace !important;
  font-size: 2rem;
}

.glass-stat .stat-label {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.75rem;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* --- Flujo Column Enhanced --- */
.flujo-columna {
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.flujo-columna::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--inymo-green), var(--inymo-blue));
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

.flujo-columna:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
  border-color: rgba(139,198,63,0.3);
}

.flujo-columna:hover::after {
  transform: scaleX(1);
}

/* --- Servicio Card Icon Pulse --- */
.servicio-icon {
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}

.servicio-card:hover .servicio-icon {
  transform: scale(1.15);
  box-shadow: 0 8px 25px rgba(59,130,246,0.25);
}

/* --- Stepper Enhanced --- */
.step-number {
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
  position: relative;
}

.step.active .step-number {
  box-shadow: 0 0 0 4px rgba(139,198,63,0.2), 0 0 20px rgba(139,198,63,0.3);
  animation: stepPulse 2s ease-in-out infinite;
}

@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(139,198,63,0.2), 0 0 20px rgba(139,198,63,0.3); }
  50% { box-shadow: 0 0 0 8px rgba(139,198,63,0.1), 0 0 30px rgba(139,198,63,0.4); }
}

/* --- Servicio Card Image Overlay Gradient --- */
.servicio-card {
  position: relative;
}

.servicio-card .servicio-card-img + .servicio-icon {
  position: relative;
  z-index: 2;
  margin-top: -30px;
}

/* --- Enhanced Upload Zone --- */
.upload-area {
  position: relative;
}

.upload-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(45deg, rgba(139,198,63,0.03), rgba(59,130,246,0.03));
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.upload-area:hover::before {
  opacity: 1;
}

/* --- Hero Badge Enhanced --- */
.hero-badge {
  animation: pulse-glow 3s ease-in-out infinite, badgeFloat 4s ease-in-out infinite;
}

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

/* --- Responsive Animations --- */
@media (max-width: 768px) {
  .cursor-glow { display: none; }
  .particle-field { display: none; }
  .circuit-grid-overlay { opacity: 0.2; }
  .trust-row { gap: 25px; }
  .trust-item img { height: 30px; }
  .trust-divider { height: 25px; }
  .glass-stat .stat-number { font-size: 1.8rem; }
}

@media (max-width: 576px) {
  .scan-line-overlay { display: none; }
  .scroll-progress-bar { height: 2px; }
  .trust-row { gap: 20px; }
  .trust-item img { height: 25px; }
}

/* --- Reduced Motion Support --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .scroll-progress-bar { transition: none; }
  .stagger-item { opacity: 1; transform: none; }
  .section-reveal { opacity: 1; transform: none; }
}

/* ============================================================
   TRUST SECTION - Estilos actualizados (sin COMMSA)
   ============================================================ */

.trust-years {
  font-family: 'Chakra Petch', monospace !important;
  font-size: 1.5rem;
  font-weight: 700 !important;
  color: var(--inymo-green);
  display: block;
}

.trust-years-label {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.7rem;
  color: var(--text-muted);
  display: block;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.trust-phone {
  font-family: 'Chakra Petch', monospace !important;
  font-size: 1.1rem;
  font-weight: 600 !important;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.trust-phone:hover {
  color: var(--inymo-green);
}

/* ============================================================
   BIFURCACION CARDS - Con imagen de fondo y layout organizado
   ============================================================ */

.bifurcacion-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

/* Imagen de fondo */
.card-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.card-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: saturate(0.7) brightness(0.8);
  transition: all 0.5s ease;
}

.bifurcacion-card:hover .card-bg-image img {
  opacity: 0.45;
  transform: scale(1.05);
}

/* Gradiente progresivo - más oscuro hacia abajo */
.card-bg-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.4) 0%,
    rgba(15, 23, 42, 0.6) 30%,
    rgba(15, 23, 42, 0.85) 60%,
    rgba(15, 23, 42, 0.95) 100%
  );
  pointer-events: none;
}

/* Contenido organizado con flexbox */
.card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
}

/* Icono centrado arriba */
.bifurcacion-card .card-icon {
  position: relative;
  z-index: 1;
  align-self: flex-start;
}

/* Badge ya está posicionado con > .card-badge arriba */

/* Título */
.bifurcacion-card h3 {
  position: relative;
  z-index: 1;
}

/* Descripción */
.bifurcacion-card .card-desc {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* Pasos - altura fija */
.bifurcacion-card .card-pasos {
  position: relative;
  z-index: 1;
  margin-bottom: 15px;
}

/* Features con espacio flexible */
.bifurcacion-card .card-features {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 20px;
}

/* Botón Comenzar siempre al fondo */
.bifurcacion-card .card-arrow {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================
   INFO GRID COTIZAR - Sección de clientes/ubicación/proceso
   ============================================================ */

.info-grid-cotizar {
  position: relative;
  padding: 35px 0;
  overflow: hidden;
  background: var(--bg-dark);
}

.info-grid-cotizar .info-grid-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  filter: saturate(0.5);
  pointer-events: none;
}

.info-grid-cotizar .info-grid-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 15, 28, 0.85) 0%,
    rgba(10, 15, 28, 0.7) 50%,
    rgba(10, 15, 28, 0.9) 100%);
  pointer-events: none;
}

.info-grid-cotizar .container {
  position: relative;
  z-index: 2;
}

.info-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 25px;
}

@media (max-width: 992px) {
  .info-grid-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Info Cards */
.info-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(139, 198, 63, 0.15);
  border-radius: 14px;
  padding: 1rem 1.25rem;
}

.info-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(139, 198, 63, 0.1);
}

.info-card-header i {
  font-size: 1.3rem;
  color: var(--inymo-green);
}

.info-card-header h3 {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 1.1rem;
  font-weight: 700 !important;
  color: #fff;
  margin: 0;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* Client Chips */
.client-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0.75rem;
}

.client-chip {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 12px;
  background: rgba(139, 198, 63, 0.1);
  border: 1px solid rgba(139, 198, 63, 0.2);
  border-radius: 50px;
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.3s ease;
}

.client-chip:hover {
  background: rgba(139, 198, 63, 0.2);
  color: var(--inymo-green);
  border-color: rgba(139, 198, 63, 0.4);
}

/* Gallery Strip - 4 columnas x 2 filas */
.clientes-gallery-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.gallery-thumb {
  aspect-ratio: 16/10;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(139, 198, 63, 0.2);
  transition: all 0.3s ease;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb:hover {
  border-color: var(--inymo-green);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(139, 198, 63, 0.3);
}

/* Mapa - más grande */
.mapa-frame-compact {
  height: 280px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
  border: 1px solid rgba(139, 198, 63, 0.15);
}

.mapa-iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: grayscale(0.3) contrast(1.1);
}

.ubicacion-details {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

.ubicacion-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

.ubicacion-detail i {
  color: var(--inymo-green);
  font-size: 0.95rem;
}

.ubicacion-detail a {
  color: inherit;
  text-decoration: none;
  font-family: 'Chakra Petch', monospace !important;
  font-weight: 500;
  transition: color 0.3s ease;
}

.ubicacion-detail a:hover {
  color: var(--inymo-green);
}

/* Proceso Timeline */
.proceso-timeline-section {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(139, 198, 63, 0.15);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
}

.proceso-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(139, 198, 63, 0.1);
}

.proceso-header i {
  font-size: 1.3rem;
  color: var(--inymo-green);
}

.proceso-header h3 {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 1.1rem;
  font-weight: 700 !important;
  color: #fff;
  margin: 0;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  flex: 1;
}

.proceso-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}

.status-dot {
  width: 8px;
  height: 8px;
  background: var(--inymo-green);
  border-radius: 50%;
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.proceso-timeline {
  position: relative;
  overflow-x: auto;
  padding: 10px 0;
}

.proceso-progress-track {
  position: absolute;
  top: 36px;
  left: 50px;
  right: 50px;
  height: 3px;
  background: rgba(139, 198, 63, 0.15);
  border-radius: 2px;
  z-index: 0;
}

.proceso-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--inymo-green), #4ade80, var(--inymo-green));
  background-size: 200% 100%;
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(139, 198, 63, 0.5);
  animation: progressGlow 2s ease-in-out infinite;
}

@keyframes progressGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(139, 198, 63, 0.5); }
  50% { box-shadow: 0 0 20px rgba(139, 198, 63, 0.8); }
}

.proceso-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.proceso-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 80px;
}

.step-node {
  width: 44px;
  height: 44px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-node-ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(139, 198, 63, 0.3);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.step-node-core {
  width: 32px;
  height: 32px;
  background: #0f172a;
  border: 2px solid rgba(139, 198, 63, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 2;
}

.step-node-core i {
  font-size: 1rem;
  color: var(--inymo-green);
}

.proceso-step.active .step-node-ring {
  border-color: var(--inymo-green);
  animation: ringPulse 1.5s ease-in-out infinite;
}

.proceso-step.active .step-node-core {
  background: var(--inymo-green);
  border-color: var(--inymo-green);
}

.proceso-step.active .step-node-core i {
  color: #fff;
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.5; }
}

/* Completed step - colores sólidos sin transparencia */
.proceso-step.completed .step-node-ring {
  border-color: #5a9a2a;
}

.proceso-step.completed .step-node-core {
  background: #5a9a2a;
  border-color: #5a9a2a;
}

.proceso-step.completed .step-node-core i {
  color: #fff;
}

.proceso-step.completed .step-content {
  opacity: 0.8;
}

.step-content {
  text-align: center;
}

.step-num {
  font-family: 'Chakra Petch', monospace !important;
  font-size: 0.7rem;
  font-weight: 600 !important;
  color: var(--inymo-green);
  display: block;
}

.step-label {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  display: block;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .info-grid-cotizar {
    padding: 40px 0;
  }

  .info-card {
    padding: 1rem;
  }

  .proceso-steps {
    gap: 10px;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0 10px;
  }

  .proceso-step {
    min-width: 70px;
  }

  .step-node {
    width: 36px;
    height: 36px;
  }

  .step-node-core {
    width: 26px;
    height: 26px;
  }

  .step-node-core i {
    font-size: 0.85rem;
  }
}

/* ============================================================
   FORMULARIO GENERAL - Estilos
   ============================================================ */

.general-form .form-section,
.proyectos-form .form-section {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(139, 198, 63, 0.15);
  border-radius: 16px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(8px);
  position: relative;
}

.general-form .form-section::before,
.proyectos-form .form-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--inymo-green), var(--accent-blue));
  border-radius: 16px 16px 0 0;
  opacity: 0.6;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(139, 198, 63, 0.1);
}

.section-header i {
  font-size: 1.5rem;
  color: var(--inymo-green);
}

.section-header h3 {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 1.25rem;
  font-weight: 600 !important;
  color: #fff;
  margin: 0;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Form Icon Header */
.form-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--inymo-green), var(--accent-blue));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 8px 32px rgba(139, 198, 63, 0.3);
}

.form-icon i {
  font-size: 2.5rem;
  color: #fff;
}

/* Service Options (Radio buttons styled as cards) */
.service-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .service-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .service-options {
    grid-template-columns: 1fr;
  }
}

.service-option {
  cursor: pointer;
}

.service-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.service-option .option-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 1.25rem 1rem;
  background: rgba(30, 41, 59, 0.5);
  border: 2px solid rgba(139, 198, 63, 0.2);
  border-radius: 12px;
  transition: all 0.3s ease;
  text-align: center;
}

.service-option .option-content i {
  font-size: 1.75rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
}

.service-option .option-content span {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.service-option:hover .option-content {
  border-color: rgba(139, 198, 63, 0.4);
  background: rgba(30, 41, 59, 0.7);
}

.service-option input:checked + .option-content {
  border-color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.1);
  box-shadow: 0 0 20px rgba(139, 198, 63, 0.2);
}

.service-option input:checked + .option-content i {
  color: var(--inymo-green);
}

/* Urgency Options */
.urgency-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.urgency-option {
  flex: 1;
  min-width: 140px;
  cursor: pointer;
}

.urgency-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.urgency-option .option-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1rem 1.25rem;
  background: rgba(30, 41, 59, 0.5);
  border: 2px solid rgba(139, 198, 63, 0.2);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.urgency-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.urgency-dot.dot-normal {
  background: #22c55e;
}

.urgency-dot.dot-media {
  background: #f59e0b;
}

.urgency-dot.dot-urgente {
  background: #ef4444;
  animation: urgentPulse 1.5s ease-in-out infinite;
}

@keyframes urgentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

.urgency-option:hover .option-content {
  border-color: rgba(139, 198, 63, 0.4);
}

.urgency-option input:checked + .option-content {
  border-color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.08);
}

/* File Upload Area */
.file-upload-area {
  position: relative;
  border: 2px dashed rgba(139, 198, 63, 0.3);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  background: rgba(30, 41, 59, 0.3);
}

.file-upload-area:hover,
.file-upload-area.dragover {
  border-color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.05);
}

.file-upload-area .file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.file-upload-content i {
  font-size: 3rem;
  color: rgba(139, 198, 63, 0.5);
  margin-bottom: 1rem;
}

.file-upload-content p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.5rem;
}

.file-upload-content .file-types {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.file-preview {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(139, 198, 63, 0.1);
  border-radius: 8px;
}

.file-upload-area.has-file .file-preview {
  display: flex;
}

.file-upload-area.has-file .file-upload-content {
  display: none;
}

.file-preview i {
  font-size: 1.5rem;
  color: var(--inymo-green);
}

.file-preview .file-name {
  color: #fff;
  font-size: 0.9rem;
}

/* Form Actions */
.form-actions {
  text-align: center;
  margin-top: 2rem;
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 1rem 2.5rem;
  background: linear-gradient(135deg, var(--inymo-green), #6bab3e);
  color: #fff;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 1.15rem;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(139, 198, 63, 0.3);
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(139, 198, 63, 0.4);
}

.btn-submit i {
  font-size: 1.25rem;
}

.form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.form-note i {
  color: var(--inymo-green);
}

/* Direct Contact */
.direct-contact {
  text-align: center;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(139, 198, 63, 0.15);
}

.direct-contact p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
}

.contact-options {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--inymo-green);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.contact-link:hover {
  color: #fff;
  transform: translateY(-2px);
}

.contact-link i {
  font-size: 1.25rem;
}

.contact-link.contact-phone {
  font-family: 'Chakra Petch', monospace !important;
  font-weight: 600 !important;
}

/* ============================================================
   FORMULARIO PROYECTOS COMMSA - Estilos adicionales
   ============================================================ */

/* Alliance Badge */
.alliance-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.alliance-badge img {
  height: 50px;
  object-fit: contain;
  filter: brightness(1.1);
}

.alliance-badge span {
  font-family: 'Chakra Petch', monospace !important;
  font-size: 1.5rem;
  font-weight: 700 !important;
  color: var(--inymo-green);
}

/* Sector Badge for Projects */
.sector-badge.sector-proyecto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, rgba(139, 198, 63, 0.2), rgba(59, 130, 246, 0.2));
  border: 1px solid rgba(139, 198, 63, 0.3);
  border-radius: 50px;
  margin-top: 1rem;
}

.sector-badge.sector-proyecto i {
  font-size: 1.25rem;
  color: var(--inymo-green);
}

.sector-badge.sector-proyecto span {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 1rem;
  font-weight: 600 !important;
  color: #fff;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Trust Badges */
.trust-badges {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.trust-item i {
  font-size: 1.25rem;
  color: var(--inymo-green);
}

/* Project Types Grid */
.project-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 576px) {
  .project-types {
    grid-template-columns: 1fr;
  }
}

.project-type {
  cursor: pointer;
}

.project-type input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.project-type .type-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.875rem 1rem;
  background: rgba(30, 41, 59, 0.5);
  border: 2px solid rgba(139, 198, 63, 0.15);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.project-type .type-content i {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s ease;
}

.project-type .type-content span {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.project-type:hover .type-content {
  border-color: rgba(139, 198, 63, 0.3);
  background: rgba(30, 41, 59, 0.7);
}

.project-type input:checked + .type-content {
  border-color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.1);
}

.project-type input:checked + .type-content i {
  color: var(--inymo-green);
}

/* Scope Options */
.scope-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scope-option {
  cursor: pointer;
}

.scope-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.scope-option span {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  background: rgba(30, 41, 59, 0.5);
  border: 2px solid rgba(139, 198, 63, 0.15);
  border-radius: 50px;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.scope-option:hover span {
  border-color: rgba(139, 198, 63, 0.3);
}

.scope-option input:checked + span {
  border-color: var(--inymo-green);
  background: rgba(139, 198, 63, 0.15);
  color: #fff;
}

/* Large File Upload Area */
.file-area-large {
  padding: 2.5rem;
}

.file-area-large .files-list {
  margin-top: 1rem;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.75rem 1rem;
  background: rgba(139, 198, 63, 0.08);
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.file-item i {
  font-size: 1.25rem;
  color: var(--inymo-green);
}

.file-item span {
  flex: 1;
  color: #fff;
  font-size: 0.9rem;
}

.file-item small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}

/* Project Submit Button */
.btn-proyecto {
  background: linear-gradient(135deg, var(--inymo-green), var(--accent-blue));
}

.btn-proyecto:hover {
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .general-form .form-section,
  .proyectos-form .form-section {
    padding: 1.25rem;
  }

  .alliance-badge img {
    height: 40px;
  }

  .trust-badges {
    gap: 1rem;
  }

  .urgency-options {
    flex-direction: column;
  }

  .urgency-option {
    min-width: 100%;
  }
}

/* ============================================================
   FOOTER COTIZAR
   ============================================================ */

.cotizar-footer {
  background: linear-gradient(180deg, rgba(10, 15, 28, 0.95), #080c16);
  padding: 30px 0 20px;
  margin-top: 0;
  border-top: 1px solid rgba(139, 198, 63, 0.15);
}

.cotizar-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .cotizar-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 25px;
    text-align: center;
  }
}

.cotizar-footer .footer-col h4 {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.9rem;
  font-weight: 700 !important;
  color: var(--inymo-green);
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 0.75rem;
}

.cotizar-footer .footer-logo {
  height: 32px;
  margin-bottom: 0.75rem;
}

.cotizar-footer .footer-desc {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.cotizar-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cotizar-footer .footer-links li {
  margin-bottom: 0.4rem;
}

.cotizar-footer .footer-links a {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

.cotizar-footer .footer-links a:hover {
  color: var(--inymo-green);
}

.cotizar-footer .footer-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 768px) {
  .cotizar-footer .footer-contact li {
    justify-content: center;
  }
}

.cotizar-footer .footer-contact i {
  color: var(--inymo-green);
  font-size: 0.9rem;
}

.cotizar-footer .footer-contact span,
.cotizar-footer .footer-contact a {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.cotizar-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid rgba(139, 198, 63, 0.1);
}

@media (max-width: 768px) {
  .cotizar-footer .footer-bottom {
    flex-direction: column;
    gap: 10px;
  }
}

.cotizar-footer .footer-bottom p {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.cotizar-footer .footer-bottom a {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.9rem;
  color: var(--inymo-green);
  text-decoration: none;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: color 0.3s ease;
}

.cotizar-footer .footer-bottom a:hover {
  color: #fff;
}

/* ============================================================
   HERO - IMAGEN DE FONDO + PUERTAS 3D HORIZONTALES
   ============================================================ */

.landing-hero {
  position: relative;
  overflow: hidden;
  perspective: 1200px;
  margin-top: -1px;
}

/* Gradiente suave en la parte superior para fusionar con header */
.landing-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 1) 0%, rgba(15, 23, 42, 0.8) 40%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Imagen de fondo */
.hero-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: saturate(0.7) brightness(0.6);
}

/* --- PUERTAS 3D HORIZONTALES --- */
.hero-door {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  z-index: 100;
  background: linear-gradient(180deg, #080c14 0%, #0f172a 40%, #1a2744 70%, #0f172a 100%);
  overflow: hidden;
  transform-style: preserve-3d;
}

.hero-door-top {
  top: -20px;
  transform-origin: top center;
  transition: transform 1.8s cubic-bezier(0.7, 0, 0.15, 1);
  /* Extender para cubrir cualquier gap con el header */
  padding-top: 20px;
  box-sizing: content-box;
}

.hero-door-bottom {
  bottom: 0;
  transform-origin: bottom center;
  transition: transform 1.8s cubic-bezier(0.7, 0, 0.15, 1);
  background: linear-gradient(0deg, #080c14 0%, #0f172a 40%, #1a2744 70%, #0f172a 100%);
}

/* Textura metálica cepillada */
.hero-door::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    rgba(255,255,255,0.015) 1px,
    transparent 2px,
    transparent 8px
  );
  pointer-events: none;
}

/* Líneas de panel */
.hero-door .door-panel-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 60px,
    rgba(139,198,63,0.08) 60px,
    rgba(139,198,63,0.08) 61px,
    transparent 61px,
    transparent 120px
  );
}

/* Pistones hidráulicos horizontales */
.hero-door .door-hydraulic {
  position: absolute;
  z-index: 2;
  width: 6px;
  background: linear-gradient(90deg, #1a3a20, #2d5a32, #1a3a20);
  border-radius: 3px;
  transition: height 1.2s cubic-bezier(0.7, 0, 0.2, 1) 0.1s, box-shadow 0.5s ease;
}

.hero-door-top .door-hydraulic { bottom: 10px; height: 60%; }
.hero-door-bottom .door-hydraulic { top: 10px; height: 60%; }
.door-hydraulic-left { left: 20%; }
.door-hydraulic-right { right: 20%; }

/* Mecanismo de bloqueo */
.hero-door .door-lock {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border: 2px solid rgba(139,198,63,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.hero-door-top .door-lock { bottom: 15px; }
.hero-door-bottom .door-lock { top: 15px; }

.door-lock-ring {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(139,198,63,0.4);
  border-radius: 50%;
  position: relative;
  transition: transform 0.6s ease, border-color 0.4s ease;
}

.door-lock-ring::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 8px;
  height: 8px;
  background: rgba(139,198,63,0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.4s ease;
}

/* === ANIMACIÓN DE APERTURA === */
.landing-hero.doors-open .hero-door-top {
  transform: rotateX(95deg) translateY(-10%);
}

.landing-hero.doors-open .hero-door-bottom {
  transform: rotateX(-95deg) translateY(10%);
}

/* Pistones se extienden */
.landing-hero.doors-open .door-hydraulic {
  height: 90%;
  box-shadow: 0 0 12px rgba(139,198,63,0.5);
}

/* Lock se desbloquea */
.landing-hero.doors-open .door-lock {
  border-color: var(--inymo-green);
  box-shadow: 0 0 20px rgba(139,198,63,0.4);
}

.landing-hero.doors-open .door-lock-ring {
  transform: rotate(180deg);
  border-color: var(--inymo-green);
}

.landing-hero.doors-open .door-lock-ring::after {
  background: var(--inymo-green);
  box-shadow: 0 0 10px var(--inymo-green);
}

/* Contenido debajo de las puertas (se revela al abrirse) */
.landing-hero .container {
  position: relative;
  z-index: 50;
}

.landing-hero .circuit-grid-overlay {
  z-index: 2;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-door .door-lock {
    width: 40px;
    height: 40px;
  }

  .door-lock-ring {
    width: 18px;
    height: 18px;
  }

  .hero-door .door-hydraulic {
    width: 4px;
  }
}

/* ============================================================
   BIFURCACIÓN - FONDO + ANIMACIONES DE ENTRADA
   ============================================================ */

.bifurcacion-section {
  position: relative;
  overflow: hidden;
}

/* Imagen de fondo */
.section-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.section-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  filter: saturate(0.5) brightness(0.5);
}

.bifurcacion-section .container {
  position: relative;
  z-index: 1;
}

/* --- ANIMACIONES DE ENTRADA DESDE LOS LADOS --- */
.slide-from-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-from-right {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cuando la sección es visible */
.bifurcacion-section.visible .slide-from-left {
  opacity: 1;
  transform: translateX(0);
}

.bifurcacion-section.visible .slide-from-right {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.15s;
}

/* Responsive - menos desplazamiento en móvil */
@media (max-width: 768px) {
  .slide-from-left {
    transform: translateX(-50px);
  }

  .slide-from-right {
    transform: translateX(50px);
  }
}

/* ============================================================
   MARQUEE STRIP - Banda verde animada
   ============================================================ */

.marquee-strip {
  background: linear-gradient(90deg, var(--inymo-green), #a8e063, var(--inymo-green), #7ec83e);
  background-size: 300% 100%;
  animation: marqueeGradient 8s ease infinite;
  padding: 16px 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 20px rgba(139, 198, 63, 0.3), 0 -4px 20px rgba(139, 198, 63, 0.15);
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marqueeScroll 40s linear infinite;
  will-change: transform;
}

.marquee-content {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.marquee-item {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.95rem;
  font-weight: 700 !important;
  color: var(--inymo-navy);
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 0 20px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: text-shadow 0.3s;
}

.marquee-item:hover {
  text-shadow: 0 0 8px rgba(15, 23, 42, 0.3);
}

.marquee-icon {
  font-size: 1rem;
  opacity: 0.6;
}

.marquee-dot {
  font-size: 0.5rem;
  color: var(--inymo-navy);
  opacity: 0.3;
  flex-shrink: 0;
  padding: 0 4px;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

@keyframes marqueeGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (max-width: 768px) {
  .marquee-item {
    font-size: 0.85rem;
    padding: 0 16px;
  }
}

/* ============================================================
   TOOLTIP DE AYUDA - Icono de pregunta en tarjetas
   ============================================================ */

.card-help-trigger {
  position: absolute;
  top: 65px;
  right: 20px;
  z-index: 20;
  cursor: help;
}

.card-help-trigger > i {
  width: 32px;
  height: 32px;
  background: rgba(139, 198, 63, 0.2);
  border: 2px solid rgba(139, 198, 63, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--inymo-green);
  transition: all 0.3s ease;
}

.card-help-trigger:hover > i {
  background: var(--inymo-green);
  color: var(--inymo-navy);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(139, 198, 63, 0.5);
}

/* Tooltip emergente */
.card-help-tooltip {
  position: absolute;
  top: 45px;
  right: 0;
  width: 280px;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(139, 198, 63, 0.3);
  border-radius: 16px;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(139, 198, 63, 0.1);
  pointer-events: none;
}

.card-help-trigger:hover .card-help-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Flecha del tooltip */
.card-help-tooltip::before {
  content: '';
  position: absolute;
  top: -8px;
  right: 12px;
  width: 16px;
  height: 16px;
  background: rgba(15, 23, 42, 0.98);
  border-left: 1px solid rgba(139, 198, 63, 0.3);
  border-top: 1px solid rgba(139, 198, 63, 0.3);
  transform: rotate(45deg);
}

.tooltip-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.9rem;
  font-weight: 600 !important;
  color: var(--inymo-green);
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(139, 198, 63, 0.2);
}

.tooltip-title i {
  font-size: 1.1rem;
}

.tooltip-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tooltip-step {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tooltip-step .step-num {
  width: 24px;
  height: 24px;
  background: rgba(139, 198, 63, 0.15);
  border: 1px solid rgba(139, 198, 63, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Chakra Petch', monospace !important;
  font-size: 0.75rem;
  font-weight: 600 !important;
  color: var(--inymo-green);
  flex-shrink: 0;
}

.tooltip-step span:not(.step-num) {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.tooltip-step.step-final .step-num {
  background: var(--inymo-green);
  color: var(--inymo-navy);
  border-color: var(--inymo-green);
}

.tooltip-step.step-final span:not(.step-num) {
  color: #fff;
  font-weight: 500 !important;
}

/* Responsive tooltip */
@media (max-width: 768px) {
  .card-help-trigger {
    top: 55px;
    right: 15px;
  }

  .card-help-tooltip {
    width: 240px;
    right: -10px;
  }

  .card-help-trigger > i {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }
}

/* ============================================================
   AI CHAT WIDGET — Cotizador
   ============================================================ */

.ai-chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-family: 'Barlow', sans-serif;
}

.ai-chat-fab {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0c1524, #0f1f35);
  border: 2px solid rgba(139, 198, 63, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.ai-chat-fab:hover {
  transform: scale(1.08);
  border-color: #8CC63F;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.ai-chat-fab-icon {
  font-size: 28px;
  color: #8CC63F;
  z-index: 2;
}

.ai-chat-fab-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(139, 198, 63, 0.3);
  animation: aiFabPulse 2s ease-out infinite;
}

@keyframes aiFabPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

.ai-chat-panel {
  position: absolute;
  bottom: 80px;
  right: 0;
  width: 380px;
  max-height: 520px;
  background: #0a1018;
  border: 2px solid rgba(139, 198, 63, 0.3);
  border-radius: 20px;
  overflow: hidden;
  display: none;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(139, 198, 63, 0.1);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ai-chat-widget.open .ai-chat-panel {
  display: flex !important;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ai-chat-widget.open .ai-chat-fab {
  display: none;
}

.ai-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid rgba(139, 198, 63, 0.15);
}

.ai-chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(139, 198, 63, 0.2), rgba(139, 198, 63, 0.05));
  border: 2px solid rgba(139, 198, 63, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #8CC63F;
}

.ai-chat-title {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ai-name {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ai-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #8CC63F;
}

.ai-status-dot {
  width: 8px;
  height: 8px;
  background: #8CC63F;
  border-radius: 50%;
  box-shadow: 0 0 8px #8CC63F;
  animation: statusBlink 1.5s ease infinite;
}

@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.ai-chat-close {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}

.ai-chat-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.ai-chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 340px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ai-chat-messages::-webkit-scrollbar {
  display: none;
}

.ai-message {
  display: flex;
  max-width: 85%;
}

.ai-message-bot {
  align-self: flex-start;
}

.ai-message-user {
  align-self: flex-end;
}

.ai-message-content {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.ai-message-bot .ai-message-content {
  background: rgba(139, 198, 63, 0.1);
  border: 1px solid rgba(139, 198, 63, 0.2);
  color: rgba(255, 255, 255, 0.9);
  border-bottom-left-radius: 4px;
}

.ai-message-user .ai-message-content {
  background: linear-gradient(135deg, #8CC63F, #6db82a);
  color: #0a1018;
  font-weight: 500;
  border-bottom-right-radius: 4px;
}

.ai-quick-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-quick-links span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}

.ai-quick-btn {
  padding: 8px 14px;
  border: 1px solid rgba(139, 198, 63, 0.3);
  background: rgba(139, 198, 63, 0.05);
  border-radius: 20px;
  font-size: 0.85rem;
  color: #8CC63F;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Barlow', sans-serif;
}

.ai-quick-btn:hover {
  background: rgba(139, 198, 63, 0.15);
  border-color: #8CC63F;
  transform: translateX(4px);
}

.ai-chat-input-area {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  background: rgba(10, 16, 24, 0.95);
  border-top: 1px solid rgba(139, 198, 63, 0.1);
}

.ai-chat-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(139, 198, 63, 0.2);
  background: rgba(15, 23, 42, 0.8);
  border-radius: 24px;
  color: #fff;
  font-size: 0.9rem;
  font-family: 'Barlow', sans-serif;
  outline: none;
  transition: border-color 0.2s ease;
}

.ai-chat-input:focus {
  border-color: #8CC63F;
}

.ai-chat-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.ai-chat-send {
  width: 46px;
  height: 46px;
  border: none;
  background: linear-gradient(135deg, #8CC63F, #6db82a);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #0a1018;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-chat-send:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 20px rgba(139, 198, 63, 0.4);
}

/* ===== Chat widget font fix: override global Chakra Petch ===== */
.cotizar-body .ai-chat-widget,
.cotizar-body .ai-chat-widget *:not(.bx):not([class*="bx-"]) {
  font-family: 'Barlow', sans-serif !important;
}

.cotizar-body .ai-chat-widget .bx,
.cotizar-body .ai-chat-widget [class*="bx-"] {
  font-family: 'boxicons' !important;
}

.cotizar-body .ai-chat-widget .ai-name {
  font-family: 'Chakra Petch', sans-serif !important;
}

/* Mobile adjustments - COMPREHENSIVE STYLES */
@media (max-width: 768px) {
  .ai-chat-widget {
    position: fixed !important;
    bottom: 16px !important;
    right: 16px !important;
    left: auto !important;
    z-index: 9999 !important;
  }

  .ai-chat-fab {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0c1524, #0f1f35) !important;
    border: 2px solid rgba(139, 198, 63, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .ai-chat-fab-icon {
    font-size: 24px !important;
    color: var(--inymo-green) !important;
  }

  /* Panel MÓVIL - estilos completos */
  .ai-chat-panel {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    width: auto !important;
    max-height: 80vh !important;
    border-radius: 16px !important;
    background: #0a1018 !important;
    background-color: #0a1018 !important;
    border: 2px solid rgba(139, 198, 63, 0.5) !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.95) !important;
    overflow: hidden !important;
    z-index: 10000 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Forzar fondo opaco en todo el panel */
  .ai-chat-panel * {
    background-color: inherit;
  }

  .ai-chat-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #0a1018;
    z-index: -1;
    border-radius: 14px;
  }

  .ai-chat-widget.open .ai-chat-panel {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Header móvil */
  .ai-chat-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    background: #0c1524 !important;
    background-color: #0c1524 !important;
    border-bottom: 1px solid rgba(139, 198, 63, 0.3) !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .ai-chat-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(139, 198, 63, 0.15) !important;
    border: 2px solid rgba(139, 198, 63, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--inymo-green) !important;
    font-size: 20px !important;
  }

  .ai-chat-title {
    flex: 1 !important;
  }

  .ai-name {
    display: block !important;
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: #fff !important;
  }

  .ai-status {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.75rem !important;
    color: var(--inymo-green) !important;
  }

  .ai-status-dot {
    width: 8px !important;
    height: 8px !important;
    background: var(--inymo-green) !important;
    border-radius: 50% !important;
  }

  .ai-chat-close {
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Messages area móvil */
  .ai-chat-messages {
    flex: 1 !important;
    padding: 16px !important;
    background-color: #0a1018 !important;
    overflow-y: auto !important;
    min-height: 150px !important;
    max-height: 50vh !important;
  }

  .ai-message {
    display: flex !important;
    max-width: 90% !important;
    margin-bottom: 12px !important;
  }

  .ai-message-bot {
    align-self: flex-start !important;
  }

  .ai-message-user {
    align-self: flex-end !important;
    margin-left: auto !important;
  }

  .ai-message-content {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }

  .ai-message-bot .ai-message-content {
    background-color: rgba(139, 198, 63, 0.1) !important;
    border: 1px solid rgba(139, 198, 63, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .ai-message-user .ai-message-content {
    background: linear-gradient(135deg, var(--inymo-green), #6db82a) !important;
    color: #0a1018 !important;
  }

  /* Quick buttons móvil */
  .ai-quick-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .ai-quick-links span {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }

  .ai-quick-btn {
    padding: 10px 14px !important;
    border: 1px solid rgba(139, 198, 63, 0.3) !important;
    background-color: rgba(139, 198, 63, 0.08) !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    color: var(--inymo-green) !important;
    font-family: 'Barlow', sans-serif !important;
  }

  /* Input area móvil */
  .ai-chat-input-area {
    display: flex !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    background-color: #0c1524 !important;
    border-top: 1px solid rgba(139, 198, 63, 0.2) !important;
  }

  .ai-chat-input {
    flex: 1 !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(139, 198, 63, 0.3) !important;
    background-color: #0f172a !important;
    border-radius: 24px !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    font-family: 'Barlow', sans-serif !important;
  }

  .ai-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
  }

  .ai-chat-send {
    width: 44px !important;
    height: 44px !important;
    border: none !important;
    background: linear-gradient(135deg, var(--inymo-green), #6db82a) !important;
    border-radius: 50% !important;
    color: #0a1018 !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ========== FIX CHAT MÓVIL AGRESIVO ========== */
  /* Forzar fondo en el panel principal */
  .ai-chat-widget.open .ai-chat-panel,
  .ai-chat-panel[style*="display: flex"],
  .ai-chat-panel {
    background: #0a1018 !important;
    background-color: #0a1018 !important;
    -webkit-appearance: none !important;
  }

  /* Remover cualquier transparencia no deseada */
  .ai-chat-panel,
  .ai-chat-panel > *,
  .ai-chat-header,
  .ai-chat-messages,
  .ai-chat-input-area {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
  }

  /* Quick links container fondo */
  .ai-quick-links {
    background-color: transparent !important;
  }

  .ai-quick-btns {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    background-color: transparent !important;
  }
}

/* ============================================================
   CHAT WIDGET EMERGENCY MOBILE FIX - ALTA ESPECIFICIDAD
   Estos estilos tienen máxima prioridad para sobrescribir cualquier cosa
   ============================================================ */
@media screen and (max-width: 768px) {
  /* Panel con ID para máxima especificidad */
  #aiChatPanel,
  .ai-chat-widget #aiChatPanel,
  .ai-chat-widget.open #aiChatPanel,
  div.ai-chat-panel,
  div#aiChatPanel {
    background: #0a1018 !important;
    background-color: #0a1018 !important;
    color: #ffffff !important;
  }

  /* Header del chat */
  #aiChatPanel .ai-chat-header,
  .ai-chat-panel .ai-chat-header {
    background: #0c1524 !important;
    background-color: #0c1524 !important;
    color: #ffffff !important;
  }

  /* Todos los textos dentro del chat */
  #aiChatPanel *,
  .ai-chat-panel * {
    color: inherit !important;
  }

  #aiChatPanel .ai-name,
  .ai-chat-panel .ai-name {
    color: #ffffff !important;
  }

  #aiChatPanel .ai-status,
  .ai-chat-panel .ai-status {
    color: var(--inymo-green) !important;
  }

  /* Messages container */
  #aiChatPanel .ai-chat-messages,
  .ai-chat-panel .ai-chat-messages {
    background: #0a1018 !important;
    background-color: #0a1018 !important;
  }

  /* Message content bot */
  #aiChatPanel .ai-message-bot .ai-message-content,
  .ai-chat-panel .ai-message-bot .ai-message-content {
    background: rgba(139, 198, 63, 0.1) !important;
    background-color: rgba(139, 198, 63, 0.1) !important;
    border: 1px solid rgba(139, 198, 63, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  /* Quick links text */
  #aiChatPanel .ai-quick-links span,
  .ai-chat-panel .ai-quick-links span {
    color: rgba(255, 255, 255, 0.6) !important;
  }

  /* Quick buttons */
  #aiChatPanel .ai-quick-btn,
  .ai-chat-panel .ai-quick-btn {
    background: rgba(139, 198, 63, 0.08) !important;
    background-color: rgba(139, 198, 63, 0.08) !important;
    border: 1px solid rgba(139, 198, 63, 0.3) !important;
    color: var(--inymo-green) !important;
  }

  /* Input area */
  #aiChatPanel .ai-chat-input-area,
  .ai-chat-panel .ai-chat-input-area {
    background: #0c1524 !important;
    background-color: #0c1524 !important;
  }

  /* Input field */
  #aiChatPanel .ai-chat-input,
  .ai-chat-panel .ai-chat-input,
  #aiChatInput {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border: 1px solid rgba(139, 198, 63, 0.3) !important;
    color: #ffffff !important;
  }

  /* Send button */
  #aiChatPanel .ai-chat-send,
  .ai-chat-panel .ai-chat-send,
  #aiChatSend {
    background: var(--inymo-green) !important;
    background-color: var(--inymo-green) !important;
    border: none !important;
    color: #0a1018 !important;
  }

  /* Close button */
  #aiChatPanel .ai-chat-close,
  .ai-chat-panel .ai-chat-close,
  #aiChatClose {
    background: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    color: #ffffff !important;
  }

  /* Avatar */
  #aiChatPanel .ai-chat-avatar,
  .ai-chat-panel .ai-chat-avatar {
    background: rgba(139, 198, 63, 0.15) !important;
    background-color: rgba(139, 198, 63, 0.15) !important;
    color: var(--inymo-green) !important;
  }
}

/* ============================================================
   LASER SCAN EFFECT - SERVICIOS COTIZAR
   ============================================================ */
#serviciosCotizar {
  position: relative;
  overflow: hidden;
}

#serviciosCotizar .laser-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(139, 198, 63, 0.3) 20%,
    rgba(139, 198, 63, 0.8) 40%,
    rgba(139, 198, 63, 1) 50%,
    rgba(139, 198, 63, 0.8) 60%,
    rgba(139, 198, 63, 0.3) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 20px rgba(139, 198, 63, 0.8),
    0 0 40px rgba(139, 198, 63, 0.4),
    0 0 60px rgba(139, 198, 63, 0.2);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
}

#serviciosCotizar.visible .laser-scan {
  opacity: 1;
  animation: laserScanRight 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes laserScanRight {
  0% {
    left: 0;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  85% {
    left: 100%;
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Título se revela rápido */
#serviciosCotizar > .container {
  opacity: 0;
  transition: opacity 0.5s ease 0.1s;
}

#serviciosCotizar.visible > .container {
  opacity: 1;
}

/* Cards sincronizadas con el láser (1.8s total, 3 cards) */
#serviciosCotizar .servicio-card {
  opacity: 0;
  transform: translateX(-20px) scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Card 1: láser pasa a 33% = 0.6s */
#serviciosCotizar.visible .servicio-card:nth-child(1) {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 0.5s;
}

/* Card 2: láser pasa a 66% = 1.1s */
#serviciosCotizar.visible .servicio-card:nth-child(2) {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 0.9s;
}

/* Card 3: láser pasa a 100% = 1.6s */
#serviciosCotizar.visible .servicio-card:nth-child(3) {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 1.3s;
}

/* ============================================================
   INFO-GRID ROBOTIC VAULT DOORS (VERTICAL) - COTIZAR
   ============================================================ */
.info-door {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  z-index: 15;
  will-change: transform;
  overflow: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.info-door-left {
  top: 0;
  background: linear-gradient(180deg, #0a1018 0%, #0f1a2c 40%, #111e32 70%, #0c1524 100%);
  transform-origin: center top;
  transition: transform 2.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.5s;
}

.info-door-right {
  bottom: 0;
  background: linear-gradient(0deg, #0a1018 0%, #0f1a2c 40%, #111e32 70%, #0c1524 100%);
  transform-origin: center bottom;
  transition: transform 2.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.5s;
}

/* Brushed-metal texture */
.info-door::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0.1;
  background:
    repeating-linear-gradient(
      0deg, transparent, transparent 1px,
      rgba(255,255,255,0.05) 1px, rgba(255,255,255,0.05) 3px
    ),
    repeating-linear-gradient(
      90deg, transparent, transparent 40px,
      rgba(255,255,255,0.02) 40px, rgba(255,255,255,0.02) 41px
    );
  pointer-events: none;
}

/* Door edge rail */
.info-door::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 4px;
  z-index: 2;
  background: linear-gradient(180deg,
    transparent 5%,
    rgba(255,255,255,0.06) 20%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0.06) 80%,
    transparent 95%
  );
}
.info-door-left::after { left: 0; }
.info-door-right::after { right: 0; }

/* Door component styles */
.info-door .door-panel-lines,
.info-door .door-hydraulic,
.info-door .door-lock,
.info-door .door-lock-ring,
.info-door .door-seam,
.info-door .door-warning {
  position: absolute;
}

.info-door .door-panel-lines {
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 1;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 80px,
      rgba(255,255,255,0.04) 80px,
      rgba(255,255,255,0.04) 82px,
      transparent 82px,
      transparent 84px,
      rgba(255,255,255,0.02) 84px,
      rgba(255,255,255,0.02) 85px
    );
}

.info-door .door-hydraulic {
  z-index: 2;
  width: 6px;
  background: linear-gradient(180deg, rgba(139,198,63,0.05), rgba(139,198,63,0.2), rgba(139,198,63,0.05));
  border-radius: 3px;
  transition: height 1.2s cubic-bezier(0.7, 0, 0.2, 1) 0.1s, box-shadow 0.5s ease;
}
.info-door .door-hydraulic-top { left: 25%; height: 70%; }
.info-door .door-hydraulic-bottom { right: 25%; height: 55%; }
.info-door-left .door-hydraulic { bottom: 10px; top: auto; }
.info-door-right .door-hydraulic { top: 10px; bottom: auto; }

.info-grid-cotizar.visible .door-hydraulic {
  height: 95%;
  box-shadow: 0 0 8px rgba(139,198,63,0.3);
}

.info-door .door-lock {
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border: 2px solid rgba(139,198,63,0.2);
  border-radius: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.info-door-left .door-lock { bottom: 16px; }
.info-door-right .door-lock { top: 16px; }

.info-door .door-lock-ring {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(139,198,63,0.3);
  border-radius: 50%;
  position: relative;
  transition: transform 0.6s ease, border-color 0.4s ease;
}
.info-door .door-lock-ring::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  background: rgba(139,198,63,0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.info-grid-cotizar.visible .door-lock {
  border-color: var(--inymo-green);
  box-shadow: 0 0 12px rgba(139,198,63,0.4);
}
.info-grid-cotizar.visible .door-lock-ring {
  transform: rotate(90deg);
  border-color: var(--inymo-green);
}
.info-grid-cotizar.visible .door-lock-ring::after {
  background: var(--inymo-green);
  box-shadow: 0 0 10px rgba(139,198,63,0.8);
}

.info-door .door-seam {
  left: 0; right: 0;
  height: 3px;
  z-index: 4;
  background: linear-gradient(90deg,
    transparent 3%,
    rgba(139,198,63,0.08) 10%,
    rgba(139,198,63,0.5) 30%,
    rgba(139,198,63,0.8) 50%,
    rgba(139,198,63,0.5) 70%,
    rgba(139,198,63,0.08) 90%,
    transparent 97%
  );
  box-shadow: 0 0 12px rgba(139,198,63,0.4);
  transition: box-shadow 0.5s ease;
}
.info-door-left .door-seam { bottom: 0; }
.info-door-right .door-seam { top: 0; }

.info-grid-cotizar.visible .door-seam {
  box-shadow: 0 0 20px rgba(139,198,63,0.6);
}

.info-door .door-warning {
  right: 24px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(139,198,63,0.3);
  border: 1px solid rgba(139,198,63,0.1);
  background: rgba(139,198,63,0.03);
  z-index: 3;
  transition: all 0.4s ease;
}
.info-door-left .door-warning { bottom: 20px; }
.info-door-right .door-warning { top: 20px; }

.info-grid-cotizar.visible .door-warning {
  color: var(--inymo-green);
  border-color: rgba(139,198,63,0.4);
  animation: doorWarningBlink 0.4s ease 4;
}

@keyframes doorWarningBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Door OPEN — vertical with angular depth effect */
.info-grid-cotizar.visible .info-door-left {
  transform: translateY(-95%) rotateX(-60deg) translateZ(80px);
}
.info-grid-cotizar.visible .info-door-right {
  transform: translateY(95%) rotateX(60deg) translateZ(80px);
}

/* Content behind doors — delayed fade in */
.info-grid-cotizar > .container {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 1.2s ease 1.8s, transform 1.2s ease 1.8s;
}
.info-grid-cotizar.visible > .container {
  opacity: 1;
  transform: scale(1);
}

/* ============================================================
   OPTIMIZACIONES MÓVIL - COTIZAR LANDING
   ============================================================ */

/* --- TABLET (max 992px) --- */
@media (max-width: 992px) {
  .landing-hero .row {
    flex-direction: column;
  }

  .landing-hero .col-lg-6 {
    width: 100%;
  }

  .hero-visual {
    margin-top: 30px;
  }

  .servicios-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  a.servicio-card {
    min-height: 240px;
  }

  .info-grid-row {
    flex-direction: column;
    gap: 20px;
  }

  .info-card {
    width: 100%;
  }
}

/* --- MÓVIL (max 768px) --- */
@media (max-width: 768px) {
  /* Hero compacto */
  .landing-hero {
    padding: 15px 0 25px;
  }

  .hero-content {
    text-align: center;
  }

  .hero-logo {
    margin: 0 auto 15px;
  }

  .hero-badge {
    margin: 0 auto 12px;
  }

  .hero-title {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .hero-subtitle {
    font-size: 0.9rem;
  }

  .hero-features {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .feature-item {
    font-size: 0.8rem;
  }

  .hero-visual {
    display: none;
  }

  /* Bifurcación más compacta */
  .bifurcacion-section {
    padding: 25px 0;
  }

  .bifurcacion-section .section-title {
    font-size: 1.2rem;
  }

  .bifurcacion-card {
    padding: 20px 16px;
    min-height: auto;
  }

  .bifurcacion-card .card-icon {
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
  }

  .bifurcacion-card h3 {
    font-size: 1.05rem;
  }

  .bifurcacion-card .card-desc {
    font-size: 0.8rem;
    margin-bottom: 12px;
  }

  .bifurcacion-card .card-pasos {
    font-size: 0.75rem;
  }

  .bifurcacion-card .card-features {
    display: none;
  }

  .card-help-trigger {
    display: none;
  }

  /* Servicios - 1 columna compacta */
  .servicios-preview {
    padding: 25px 0;
  }

  .servicios-preview .section-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
  }

  .servicios-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  a.servicio-card {
    min-height: 180px;
    border-radius: 12px;
  }

  .servicio-content {
    padding: 15px;
  }

  .servicio-icon {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    margin-bottom: 8px;
  }

  .servicio-content h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
  }

  .servicio-content p {
    font-size: 0.8rem;
    margin-bottom: 8px;
  }

  .servicio-content ul {
    display: none;
  }

  .servicio-cta {
    font-size: 0.8rem;
    padding: 8px 12px;
  }

  /* Proceso + Clientes compacto */
  .info-grid-cotizar {
    padding: 25px 0;
  }

  .proceso-timeline-section {
    padding: 12px 15px;
    margin-bottom: 15px;
  }

  .proceso-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  .proceso-header h3 {
    font-size: 0.95rem;
  }

  .proceso-progress-track {
    top: 28px;
    left: 30px;
    right: 30px;
  }

  .proceso-steps {
    gap: 5px;
    padding: 0 5px;
  }

  .proceso-step {
    min-width: 55px;
  }

  .step-node {
    width: 32px;
    height: 32px;
  }

  .step-node-core {
    width: 24px;
    height: 24px;
  }

  .step-node-core i {
    font-size: 0.75rem;
  }

  .step-num {
    font-size: 0.6rem;
  }

  .step-label {
    font-size: 0.65rem;
  }

  /* Info cards compactas */
  .info-card {
    padding: 12px;
    border-radius: 10px;
  }

  .info-card-header h3 {
    font-size: 0.95rem;
  }

  .client-chips {
    gap: 6px;
  }

  .client-chip {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  /* Galería 2x4 en móvil */
  .clientes-gallery-strip {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .gallery-thumb {
    border-radius: 6px;
  }

  /* Mapa más pequeño en móvil */
  .mapa-frame-compact {
    height: 150px;
  }

  .ubicacion-details {
    gap: 8px;
  }

  .ubicacion-detail {
    font-size: 0.75rem;
  }

  /* Footer compacto */
  .cotizar-footer {
    padding: 25px 0 15px;
  }

  .footer-grid {
    gap: 20px;
  }

  .footer-col {
    text-align: center;
  }

  .footer-logo {
    margin: 0 auto;
  }

  /* Ocultar elementos pesados */
  .info-door,
  .cursor-glow,
  .particle-field,
  .scan-line-overlay,
  .circuit-grid-overlay {
    display: none !important;
  }

  /* Contenido visible inmediatamente */
  .info-grid-cotizar > .container {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Laser más rápido */
  #serviciosCotizar.visible .laser-scan {
    animation-duration: 1s;
  }
}

/* --- MÓVIL PEQUEÑO (max 480px) --- */
@media (max-width: 480px) {
  .hero-title {
    font-size: 1.4rem;
  }

  .bifurcacion-card {
    padding: 16px 14px;
  }

  .bifurcacion-card .card-icon {
    width: 40px;
    height: 40px;
  }

  .bifurcacion-card h3 {
    font-size: 1rem;
  }

  a.servicio-card {
    min-height: 160px;
  }

  .servicio-content h3 {
    font-size: 1rem;
  }

  .proceso-step {
    min-width: 50px;
  }

  .step-node {
    width: 28px;
    height: 28px;
  }

  .step-node-core {
    width: 20px;
    height: 20px;
  }

  .step-node-core i {
    font-size: 0.65rem;
  }

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

  .mapa-frame-compact {
    height: 120px;
  }
}

/* ============================================================
   MODAL SELECCIÓN DE MATERIAL
   ============================================================ */
.modal-material-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 16, 24, 0.9);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-material-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-material {
  background: linear-gradient(145deg, #0f172a 0%, #1a2744 100%);
  border: 1px solid rgba(139, 198, 63, 0.3);
  border-radius: 20px;
  max-width: 520px;
  width: 100%;
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(139, 198, 63, 0.1);
}

.modal-material-overlay.active .modal-material {
  transform: scale(1) translateY(0);
}

.modal-material-header {
  padding: 25px 25px 20px;
  text-align: center;
  position: relative;
  border-bottom: 1px solid rgba(139, 198, 63, 0.15);
}

.modal-material-header .modal-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--inymo-green), #4ade80);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-size: 1.8rem;
  color: #0a1018;
  box-shadow: 0 8px 25px rgba(139, 198, 63, 0.3);
}

.modal-material-header h3 {
  font-family: 'Barlow', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.modal-material-body {
  padding: 25px;
}

.modal-descripcion {
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin-bottom: 20px;
}

.modal-descripcion strong {
  color: var(--inymo-green);
  font-weight: 600;
}

.modal-opciones {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-opcion {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(139, 198, 63, 0.2);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.modal-opcion:hover {
  background: rgba(139, 198, 63, 0.1);
  border-color: var(--inymo-green);
  transform: translateX(5px);
}

.modal-opcion .opcion-icono {
  width: 50px;
  height: 50px;
  background: rgba(139, 198, 63, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--inymo-green);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.modal-opcion:hover .opcion-icono {
  background: var(--inymo-green);
  color: #0a1018;
}

.modal-opcion .opcion-contenido {
  flex: 1;
}

.modal-opcion .opcion-contenido h4 {
  font-family: 'Barlow', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px;
}

.modal-opcion .opcion-contenido p {
  font-family: 'Barlow', sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.modal-opcion .opcion-badge {
  position: absolute;
  top: -8px;
  right: 15px;
  padding: 4px 10px;
  background: linear-gradient(135deg, var(--inymo-green), #4ade80);
  border-radius: 20px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: #0a1018;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Modal responsive */
@media (max-width: 576px) {
  .modal-material {
    max-width: 100%;
    border-radius: 16px;
  }

  .modal-material-header {
    padding: 20px 20px 15px;
  }

  .modal-material-header .modal-icon {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

  .modal-material-header h3 {
    font-size: 1.2rem;
  }

  .modal-material-body {
    padding: 20px;
  }

  .modal-opcion {
    padding: 15px;
    gap: 12px;
  }

  .modal-opcion .opcion-icono {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
  }

  .modal-opcion .opcion-contenido h4 {
    font-size: 0.95rem;
  }

  .modal-opcion .opcion-contenido p {
    font-size: 0.75rem;
  }
}

/* Hacer clickeable las cards de servicio */
.servicio-card[data-servicio] {
  cursor: pointer;
}

/* ============================================================
   FORMULARIO GENERAL - 2 PASOS
   ============================================================ */

/* Steps Progress */
.steps-progress {
  background: rgba(10,16,24,0.95);
  padding: 20px 0;
  border-bottom: 1px solid rgba(139,198,63,0.2);
  position: sticky;
  top: 60px;
  z-index: 100;
}

.steps-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 400px;
  margin: 0 auto;
}

.step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.4;
  transition: all 0.3s ease;
}

.step-indicator.active,
.step-indicator.completed {
  opacity: 1;
}

.step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  transition: all 0.3s ease;
}

.step-indicator.active .step-num {
  background: var(--inymo-green);
  border-color: var(--inymo-green);
  color: #0a1018;
}

.step-indicator.completed .step-num {
  background: var(--inymo-green);
  border-color: var(--inymo-green);
  color: #0a1018;
}

.step-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.step-connector {
  width: 60px;
  height: 2px;
  background: rgba(255,255,255,0.2);
  margin: 0 16px;
}

/* Category Badge */
.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(139,198,63,0.2), rgba(139,198,63,0.05));
  border: 1px solid rgba(139,198,63,0.4);
  border-radius: 50px;
  padding: 8px 20px;
  margin-bottom: 16px;
}

.category-badge i {
  color: var(--inymo-green);
  font-size: 1.1rem;
}

.category-badge span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--inymo-green);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Form Steps */
.form-step {
  display: none;
}

.form-step.active {
  display: block;
  animation: fadeInStep 0.4s ease;
}

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

/* (Audio recorder CSS removed — now uses audio_recorder.pug mixin with inline styles) */

/* Date Options */
.date-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.date-option {
  cursor: pointer;
}

.date-option input {
  display: none;
}

.date-option .option-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
  text-align: center;
}

.date-option .option-content i {
  font-size: 1.5rem;
  color: rgba(255,255,255,0.5);
}

.date-option .option-content span {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.8);
}

.date-option .option-content small {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
}

.date-option input:checked + .option-content {
  background: rgba(139,198,63,0.1);
  border-color: var(--inymo-green);
}

.date-option input:checked + .option-content i,
.date-option input:checked + .option-content span {
  color: var(--inymo-green);
}

.fecha-especifica {
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.fecha-especifica .form-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
}

.fecha-especifica .form-label i {
  color: var(--inymo-green);
}

/* (Files upload grid CSS removed — now uses upload_archivos.pug component with inline styles) */

/* Resumen Section */
.resumen-section {
  background: rgba(139,198,63,0.05);
  border-radius: 16px;
  padding: 20px;
}

.resumen-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.resumen-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
}

.resumen-item > i {
  font-size: 1.2rem;
  color: var(--inymo-green);
}

.resumen-ia {
  background: rgba(139,198,63,0.08);
  border: 1px solid rgba(139,198,63,0.2);
  border-radius: 10px;
}

.resumen-ia > i.bx-bot {
  color: #8CC63F;
  font-size: 1.4rem;
}

.resumen-ia .resumen-value {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  font-weight: 400;
}

.resumen-content {
  display: flex;
  flex-direction: column;
}

.resumen-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.resumen-value {
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  color: #fff;
}

/* Button Actions Split */
.form-actions.actions-split {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50px;
  color: rgba(255,255,255,0.8);
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-back:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.4);
}

.btn-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 32px;
  background: linear-gradient(135deg, var(--inymo-green), #6db82a);
  border: none;
  border-radius: 50px;
  color: #0a1018;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139,198,63,0.3);
}

.btn-next i {
  font-size: 1.2rem;
}

/* Direct Contact */
.direct-contact {
  text-align: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.direct-contact p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 12px;
}

.direct-contact-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-whatsapp,
.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.contact-whatsapp i {
  font-size: 1.3rem;
  color: #25D366;
}

.contact-whatsapp:hover {
  background: rgba(37, 211, 102, 0.1);
  border-color: #25D366;
  color: #25D366;
}

.contact-email i {
  font-size: 1.2rem;
  color: var(--inymo-green);
}

.contact-email:hover {
  background: rgba(139,198,63,0.1);
  border-color: var(--inymo-green);
  color: var(--inymo-green);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .steps-progress {
    top: 0;
    padding: 16px 0;
  }

  .step-label {
    display: none;
  }

  .step-connector {
    width: 40px;
    margin: 0 10px;
  }

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

  .form-actions.actions-split {
    flex-direction: column;
  }

  .btn-back {
    order: 2;
    justify-content: center;
  }

  .header-info {
    gap: 8px;
    flex-wrap: wrap;
  }

  .header-contact span {
    display: none;
  }

  .header-contact {
    padding: 6px 10px;
  }

  .direct-contact-links {
    flex-direction: column;
    gap: 12px;
  }

  .contact-whatsapp,
  .contact-email {
    width: 100%;
    justify-content: center;
  }
}

/* === Header NO sticky en móvil/tablet — evita solapamiento con stepper === */
@media (max-width: 1024px) {
  .cotizar-header {
    position: relative !important;
  }

  .steps-progress {
    position: relative !important;
    top: auto !important;
    z-index: 50 !important;
  }
}

/* ============================================================
   FORMULARIO GENERAL - ESTILOS ADICIONALES
   ============================================================ */

/* Logo grande en el header del formulario */
.form-logo {
  width: 200px;
  height: auto;
  margin-bottom: 24px;
  filter: brightness(1.1);
}

/* Título del formulario */
.form-title {
  font-family: 'Barlow', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.form-subtitle {
  font-family: 'Barlow', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0;
}

/* Selector de fecha personalizado */
.fecha-especifica {
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.fecha-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 12px;
}

.fecha-label i {
  color: var(--inymo-green);
  font-size: 1.1rem;
}

/* Flatpickr INYMO Theme */
.flatpickr-fecha {
  width: 100%;
  padding: 14px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  color: rgba(255,255,255,0.8);
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.flatpickr-fecha:hover,
.flatpickr-fecha:focus {
  background: rgba(139,198,63,0.05);
  border-color: rgba(139,198,63,0.5);
}

.flatpickr-fecha.active {
  border-color: var(--inymo-green);
  box-shadow: 0 0 0 2px rgba(140,198,63,0.2);
}

/* Flatpickr alt input (visible input created by Flatpickr) */
.flatpickr-fecha + .flatpickr-input {
  display: none;
}

.flatpickr-fecha[readonly] {
  cursor: pointer;
}

/* Flatpickr calendar overrides for INYMO dark theme */
.flatpickr-calendar {
  background: #1a1f2e !important;
  border: 1px solid rgba(140,198,63,0.3) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 20px rgba(140,198,63,0.1) !important;
  font-family: 'Barlow', sans-serif !important;
}

.flatpickr-months {
  background: rgba(140,198,63,0.08) !important;
  border-radius: 12px 12px 0 0 !important;
}

.flatpickr-months .flatpickr-month {
  color: #e2e8f0 !important;
  fill: #e2e8f0 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent !important;
  color: #e2e8f0 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
}

.flatpickr-current-month input.cur-year {
  color: #e2e8f0 !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 600 !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: #8CC63F !important;
  color: #8CC63F !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  fill: #a3d65c !important;
  color: #a3d65c !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: #8CC63F !important;
}

span.flatpickr-weekday {
  color: #8CC63F !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
}

.flatpickr-day {
  color: #cbd5e1 !important;
  border-radius: 8px !important;
  font-family: 'Barlow', sans-serif !important;
  font-weight: 500 !important;
}

.flatpickr-day:hover {
  background: rgba(140,198,63,0.15) !important;
  border-color: rgba(140,198,63,0.3) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #8CC63F !important;
  border-color: #8CC63F !important;
  color: #0a1018 !important;
  font-weight: 700 !important;
}

.flatpickr-day.today {
  border-color: rgba(140,198,63,0.5) !important;
}

.flatpickr-day.today:hover {
  background: rgba(140,198,63,0.2) !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #475569 !important;
}

.flatpickr-innerContainer {
  border-bottom: none !important;
}

/* Mobile */
@media (max-width: 768px) {
  .form-logo {
    width: 160px;
    margin-bottom: 20px;
  }

  .form-title {
    font-size: 1.4rem;
  }
}