/* ==========================================================================
   GEONYL - ESTILOS CORPORATIVOS DE ALTA GAMA (SÓLIDO, ELEGANTE & PROFESIONAL)
   - Cero orbes brillantes ni halos borrosos
   - Fondo blanco sólido y puro con contraste ejecutivo
   - Menú móvil 100% opaco y legible
   - Animaciones personalizadas únicas para cada ícono al pasar el mouse
   ========================================================================== */

:root {
  --primary-turquoise: #00d2c4;
  --primary-turquoise-dark: #009d93;
  --primary-turquoise-light: #e6fffd;
  --primary-blue: #0284c7;
  --primary-blue-dark: #0369a1;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
}

/* Tipografía de Vanguardia */
.font-display {
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.025em;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #ffffff;
  color: #0f172a;
  overflow-x: hidden;
  line-height: 1.6;
}

::selection {
  background-color: #00d2c4;
  color: #0f172a;
}

/* Scroll suave Lenis */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* Scrollbar Sutil y Limpio */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f8fafc;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
  border: 2px solid #f8fafc;
}
::-webkit-scrollbar-thumb:hover {
  background: #00d2c4;
}

/* Retícula Técnica Arquitectónica Sutil (Líneas Finas Limpias, CERO Orbes) */
.bg-tech-grid {
  background-image: 
    linear-gradient(to right, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Tarjetas Arquitectónicas Cómodas (Amplitud Interior) */
.arch-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04), 0 1px 2px 0 rgba(15, 23, 42, 0.02);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.arch-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00d2c4, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 1rem 1rem 0 0;
}

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

.arch-card:hover {
  border-color: #00d2c4;
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(0, 210, 196, 0.12);
}

/* Degradados de Texto de Marca */
.text-gradient-geonyl {
  background: linear-gradient(135deg, #0284c7 0%, #009d93 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Badges Técnicos Ejecutivos */
.tech-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #f0fdfa;
  color: #0d9488;
  border: 1px solid rgba(13, 148, 136, 0.25);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

.status-beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #00d2c4;
}

/* Botones Corporativos */
.btn-brand-primary {
  background-color: #00d2c4;
  color: #070d17;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 14px -2px rgba(0, 210, 196, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-brand-primary:hover {
  background-color: #5efce8;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -3px rgba(0, 210, 196, 0.5);
}

.btn-brand-blue {
  background-color: #0369a1;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 14px -2px rgba(2, 132, 199, 0.3);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-brand-blue:hover {
  background-color: #075985;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -3px rgba(2, 132, 199, 0.4);
}

/* Botón Flotante de Llamada (Estático y Elegante) */
.call-floating-btn {
  box-shadow: 0 8px 24px -4px rgba(0, 210, 196, 0.5);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.call-floating-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 28px -4px rgba(0, 210, 196, 0.65);
}

/* ==========================================================================
   ANIMACIONES PERSONALIZADAS DE ÍCONOS AL PASAR EL MOUSE (CARD HOVER)
   ========================================================================== */

/* 1. Icono Construcción (Edificio): Elevación y expansión estructural */
.card-construccion .icon-box {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-construccion:hover .icon-box {
  background-color: #00d2c4;
  color: #070d17;
  transform: translateY(-5px) scale(1.12);
  box-shadow: 0 8px 20px -3px rgba(0, 210, 196, 0.45);
}
.card-construccion:hover .icon-box svg {
  animation: buildingRise 0.6s ease-in-out;
}
@keyframes buildingRise {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px) scale(1.08); }
}

/* 2. Icono Mantenimiento (Llave inglesa): Balanceo mecánico de torque */
.card-mantenimiento .icon-box {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-mantenimiento:hover .icon-box {
  background-color: #0284c7;
  color: #ffffff;
  transform: translateY(-5px) scale(1.12);
  box-shadow: 0 8px 20px -3px rgba(2, 132, 199, 0.45);
}
.card-mantenimiento:hover .icon-box svg {
  animation: wrenchTorque 0.7s ease-in-out;
}
@keyframes wrenchTorque {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-35deg) scale(1.15); }
  60% { transform: rotate(20deg) scale(1.1); }
  100% { transform: rotate(0deg) scale(1); }
}

/* 3. Icono Maquinarias (Camión pesada): Impulso hidráulico hacia adelante */
.card-maquinarias .icon-box {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-maquinarias:hover .icon-box {
  background-color: #00a89d;
  color: #ffffff;
  transform: translateY(-5px) scale(1.12);
  box-shadow: 0 8px 20px -3px rgba(0, 168, 157, 0.45);
}
.card-maquinarias:hover .icon-box svg {
  animation: truckDrive 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes truckDrive {
  0% { transform: translateX(0) translateY(0); }
  35% { transform: translateX(6px) translateY(-2px); }
  70% { transform: translateX(2px) translateY(1px); }
  100% { transform: translateX(0) translateY(0); }
}

/* 4. Icono Remodelaciones (Rodillo de pintura): Pincelada suave de ángulo */
.card-remodelaciones .icon-box {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-remodelaciones:hover .icon-box {
  background-color: #3b82f6;
  color: #ffffff;
  transform: translateY(-5px) scale(1.12);
  box-shadow: 0 8px 20px -3px rgba(59, 130, 246, 0.45);
}
.card-remodelaciones:hover .icon-box svg {
  animation: paintStroke 0.75s ease-in-out;
}
@keyframes paintStroke {
  0% { transform: rotate(0deg) translateY(0); }
  30% { transform: rotate(-25deg) translateY(-4px); }
  65% { transform: rotate(15deg) translateY(2px); }
  100% { transform: rotate(0deg) translateY(0); }
}

/* 5. Ventajas: Escudo de Garantía (Latido de protección) */
.card-garantia:hover .icon-box svg {
  animation: shieldBeat 0.6s ease-in-out;
}
@keyframes shieldBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* 6. Ventajas: Reloj Cumplimiento (Giro horario de precisión) */
.card-plazos:hover .icon-box svg {
  animation: clockSpin 0.7s ease-in-out;
}
@keyframes clockSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 7. Ventajas: Capas Solución 360 (Despliegue vertical) */
.card-integral:hover .icon-box svg {
  animation: layersShift 0.6s ease-in-out;
}
@keyframes layersShift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* 8. Ventajas: Operadores Calificados (Saludo de equipo) */
.card-operadores:hover .icon-box svg {
  animation: usersNod 0.6s ease-in-out;
}
@keyframes usersNod {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.12); }
}

/* Menú Móvil - Fondo 100% Blanco Opaco Garantizado */
#mobile-menu-drawer {
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* ==========================================================================
   ANIMACIONES PERSONALIZADAS — TARJETAS DE CONTACTO
   ========================================================================== */

/* Icono base transition compartido */
.contact-icon-box {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Línea Principal (phone-call): timbre vibrante */
.contact-phone-main:hover .contact-icon-box {
  background-color: #00d2c4;
  color: #070d17;
  transform: translateY(-4px) scale(1.13);
  box-shadow: 0 8px 20px -3px rgba(0, 210, 196, 0.45);
}
.contact-phone-main:hover .contact-icon-box svg {
  animation: phoneRing 0.55s ease-in-out;
}
@keyframes phoneRing {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-18deg) scale(1.1); }
  45%  { transform: rotate(18deg) scale(1.1); }
  65%  { transform: rotate(-10deg); }
  80%  { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}

/* Línea Secundaria (phone): vibración horizontal */
.contact-phone-sec:hover .contact-icon-box {
  background-color: #0284c7;
  color: #ffffff;
  transform: translateY(-4px) scale(1.13);
  box-shadow: 0 8px 20px -3px rgba(2, 132, 199, 0.45);
}
.contact-phone-sec:hover .contact-icon-box svg {
  animation: phoneVibrate 0.5s ease-in-out;
}
@keyframes phoneVibrate {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-4px) rotate(-8deg); }
  40%       { transform: translateX(4px) rotate(8deg); }
  60%       { transform: translateX(-3px) rotate(-5deg); }
  80%       { transform: translateX(2px) rotate(3deg); }
}

/* Correo (mail): apertura de sobre */
.contact-email:hover .contact-icon-box {
  background-color: #475569;
  color: #ffffff;
  transform: translateY(-4px) scale(1.13);
  box-shadow: 0 8px 20px -3px rgba(71, 85, 105, 0.4);
}
.contact-email:hover .contact-icon-box svg {
  animation: mailOpen 0.6s ease-in-out;
}
@keyframes mailOpen {
  0%   { transform: translateY(0) scaleY(1); }
  30%  { transform: translateY(-4px) scaleY(0.85); }
  60%  { transform: translateY(1px) scaleY(1.05); }
  100% { transform: translateY(0) scaleY(1); }
}

/* ==========================================================================
   ANIMACIONES PERSONALIZADAS — BARRA DE ESTÁNDARES Y CREDENCIALES
   ========================================================================== */

.std-icon-box {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ingeniería Certificada (file-check): sello de aprobación */
.std-cert:hover .std-icon-box {
  background-color: #00d2c4;
  color: #070d17;
  transform: scale(1.2) rotate(-5deg);
  box-shadow: 0 6px 16px -2px rgba(0, 210, 196, 0.4);
}
.std-cert:hover .std-icon-box svg {
  animation: fileStamp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fileStamp {
  0%   { transform: scale(1) translateY(0); }
  40%  { transform: scale(1.3) translateY(-3px); }
  70%  { transform: scale(0.95) translateY(1px); }
  100% { transform: scale(1) translateY(0); }
}

/* Seguridad Laboral (hard-hat): sacudida de casco */
.std-safety:hover .std-icon-box {
  background-color: #0284c7;
  color: #ffffff;
  transform: scale(1.2) rotate(5deg);
  box-shadow: 0 6px 16px -2px rgba(2, 132, 199, 0.4);
}
.std-safety:hover .std-icon-box svg {
  animation: hardHatNod 0.6s ease-in-out;
}
@keyframes hardHatNod {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%       { transform: rotate(-12deg) translateY(-3px); }
  55%       { transform: rotate(10deg) translateY(1px); }
  80%       { transform: rotate(-5deg); }
}

/* Pólizas & Seguros (shield): expansión de protección */
.std-shield:hover .std-icon-box {
  background-color: #009d93;
  color: #ffffff;
  transform: scale(1.2);
  box-shadow: 0 6px 16px -2px rgba(0, 157, 147, 0.4);
}
.std-shield:hover .std-icon-box svg {
  animation: shieldPulse 0.65s ease-in-out;
}
@keyframes shieldPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.3); }
  65%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* Garantía Contractual (badge-check): check que aparece */
.std-badge:hover .std-icon-box {
  background-color: #3b82f6;
  color: #ffffff;
  transform: scale(1.2) rotate(-4deg);
  box-shadow: 0 6px 16px -2px rgba(59, 130, 246, 0.4);
}
.std-badge:hover .std-icon-box svg {
  animation: badgePop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badgePop {
  0%   { transform: scale(0.7) rotate(-15deg); }
  60%  { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ==========================================================================
   MEJORAS: ANCLAS, FOCO VISIBLE Y GALERÍA DE PROYECTOS
   ========================================================================== */

/* El header es sticky: evita que tape el título al saltar a una sección */
section[id] {
  scroll-margin-top: 5.5rem;
}

/* Foco de teclado visible en toda la página */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 3px;
}

/* Galería de proyectos */
.gallery-item {
  margin: 0;
}

.gallery-img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item:hover .gallery-img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item:hover .gallery-img,
  .arch-card:hover {
    transform: none;
  }
  html.lenis, html.lenis body { scroll-behavior: auto; }
}

/* ==========================================================================
   ANIMACIONES DE ÍCONOS EN BOTONES DE LLAMADA Y WHATSAPP
   .anim-call -> teléfono que suena | .anim-wa -> burbuja de chat que rebota
   (barra superior, hero, menú móvil, modal, contacto y botón flotante)
   ========================================================================== */

.anim-call svg,
.anim-wa svg,
.call-floating-btn svg {
  transform-origin: center;
}

.anim-call:hover svg,
.anim-call:focus-visible svg {
  animation: phoneRing 0.6s ease-in-out;
}

.anim-wa:hover svg,
.anim-wa:focus-visible svg {
  animation: chatPop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes chatPop {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.3) rotate(-14deg) translateY(-2px); }
  55%  { transform: scale(0.94) rotate(9deg); }
  80%  { transform: scale(1.1) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Botón flotante: suena solo cada pocos segundos y de forma continua al pasar el mouse */
.call-floating-btn svg {
  animation: floatRing 4.5s ease-in-out infinite;
}

.call-floating-btn:hover svg,
.call-floating-btn:focus-visible svg {
  animation: phoneRing 0.55s ease-in-out infinite;
}

@keyframes floatRing {
  0%, 62%, 100% { transform: rotate(0deg); }
  65% { transform: rotate(-18deg) scale(1.12); }
  69% { transform: rotate(16deg) scale(1.12); }
  73% { transform: rotate(-12deg) scale(1.06); }
  77% { transform: rotate(10deg); }
  81% { transform: rotate(-5deg); }
  85% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .call-floating-btn svg,
  .anim-call:hover svg,
  .anim-wa:hover svg,
  .anim-call:focus-visible svg,
  .anim-wa:focus-visible svg {
    animation: none;
  }
}

/* ==========================================================================
   DECORACIÓN DE FONDO: LÍNEAS SUAVES DE CONTORNO (assets/decor/deco-contour.svg)
   Capa detrás del contenido; no recibe clics. Ajuste la intensidad con --deco-opacity.
   ========================================================================== */

.deco {
  position: relative;
  isolation: isolate;
  --deco-opacity: 0.9;
}

.deco::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--deco-opacity);
  background-image: url('../assets/decor/deco-contour.svg');
  background-repeat: no-repeat;
  background-size: max(1100px, 100%) auto;
}

/* Ondas en la parte inferior (se desvanecen hacia arriba) */
.deco-hero::before,
.deco-proyectos::before,
.deco-contacto::before {
  background-position: center bottom;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 80%);
  mask-image: linear-gradient(to top, #000 10%, transparent 80%);
}

/* Ondas en la parte superior (se desvanecen hacia abajo) */
.deco-nosotros::before,
.deco-servicios::before,
.deco-ventajas::before {
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 10%, transparent 80%);
}

@media (max-width: 640px) {
  .deco { --deco-opacity: 0.7; }
}

@media print {
  .deco::before { display: none; }
}

/* ==========================================================================
   SERVICIOS (9 TARJETAS): ANIMACIÓN PROPIA DE CADA ÍCONO AL PASAR EL MOUSE
   ========================================================================== */

.svc-t { --svc-bg: #00d2c4; --svc-fg: #070d17; --svc-shadow: rgba(0, 210, 196, 0.45); }
.svc-b { --svc-bg: #0284c7; --svc-fg: #ffffff; --svc-shadow: rgba(2, 132, 199, 0.45); }

.svc-card .icon-box {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.svc-card:hover .icon-box {
  background-color: var(--svc-bg);
  color: var(--svc-fg);
  transform: translateY(-5px) scale(1.12);
  box-shadow: 0 8px 20px -3px var(--svc-shadow);
}
.svc-card .icon-box svg { transform-origin: center; }

.svc-1:hover .icon-box svg { animation: buildingRise 0.6s ease-in-out; }          /* edificio sube */
.svc-2:hover .icon-box svg { animation: doorSwing 0.7s ease-in-out; }             /* puerta se abre */
.svc-3:hover .icon-box svg { animation: zapFlash 0.6s ease-in-out; }              /* destello eléctrico */
.svc-4:hover .icon-box svg { animation: cctvScan 0.9s ease-in-out; }              /* cámara barre */
.svc-5:hover .icon-box svg { animation: badgePop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); } /* huella valida */
.svc-6:hover .icon-box svg { animation: anchorSwing 0.8s ease-in-out; }           /* ancla se balancea */
.svc-7:hover .icon-box svg { animation: dropFall 0.7s ease-in; }                  /* gota cae */
.svc-8:hover .icon-box svg { animation: fanSpin 0.8s ease-in-out; }               /* ventilador gira */
.svc-9:hover .icon-box svg { animation: paintStroke 0.75s ease-in-out; }          /* trazo de diseño */

@keyframes doorSwing {
  0%, 100% { transform: perspective(60px) rotateY(0deg); }
  45% { transform: perspective(60px) rotateY(-38deg) scale(1.08); }
}
@keyframes zapFlash {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.3) rotate(-8deg); }
  40%  { transform: scale(0.95) rotate(6deg); }
  60%  { transform: scale(1.2) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes cctvScan {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-16deg); }
  60% { transform: rotate(14deg); }
  85% { transform: rotate(-4deg); }
}
@keyframes anchorSwing {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-22deg); }
  55% { transform: rotate(16deg); }
  80% { transform: rotate(-6deg); }
}
@keyframes dropFall {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  45%  { transform: translateY(8px) scale(0.9); opacity: 0; }
  46%  { transform: translateY(-8px) scale(0.9); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes fanSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Nosotros / sectores: elevación suave del ícono */
.pop-card .icon-box,
.pop-card svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pop-card:hover .icon-box { transform: translateY(-4px) scale(1.1); }
.pop-card:hover > svg,
.pop-card:hover svg:first-child { transform: scale(1.2) rotate(-6deg); }

/* Tarjeta de ubicación: el marcador "salta" */
.contact-address:hover .contact-icon-box {
  background-color: #00d2c4;
  color: #070d17;
  transform: translateY(-4px) scale(1.13);
  box-shadow: 0 8px 20px -3px rgba(0, 210, 196, 0.45);
}
.contact-address:hover .contact-icon-box svg { animation: pinBounce 0.6s ease-in-out; }
@keyframes pinBounce {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-6px) scale(1.1); }
  65% { transform: translateY(1px) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card:hover .icon-box svg,
  .contact-address:hover .contact-icon-box svg { animation: none; }
}

/* ==========================================================================
   REDES SOCIALES (Facebook / TikTok)
   ========================================================================== */

.social-btn,
.social-top {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.social-btn:hover {
  transform: translateY(-2px);
}
.social-btn svg,
.social-top svg {
  transform-origin: center;
}
.social-btn:hover svg,
.social-top:hover svg,
.social-btn:focus-visible svg {
  animation: socialPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.social-fb:hover {
  background-color: #1877f2;
  border-color: #1877f2;
  color: #ffffff;
  box-shadow: 0 8px 20px -4px rgba(24, 119, 242, 0.45);
}
.social-tt:hover {
  background-color: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.4);
}
/* En el pie (fondo oscuro) TikTok se resalta con el turquesa de marca */
.social-tt-dark:hover {
  background-color: #00d2c4;
  border-color: #00d2c4;
  color: #070d17;
}
@keyframes socialPop {
  0%   { transform: scale(1) rotate(0deg); }
  40%  { transform: scale(1.3) rotate(-10deg); }
  70%  { transform: scale(0.95) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .social-btn:hover svg,
  .social-top:hover svg,
  .social-btn:focus-visible svg { animation: none; }
}

/* ==========================================================================
   TARJETAS AZULES (acento de color para no dejar todo en blanco)
   ========================================================================== */

.arch-card.card-blue {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  border-color: #075985;
  box-shadow: 0 12px 28px -10px rgba(2, 132, 199, 0.5), 0 1px 2px 0 rgba(15, 23, 42, 0.05);
}
.arch-card.card-blue:hover {
  border-color: #00d2c4;
  box-shadow: 0 18px 36px -10px rgba(2, 132, 199, 0.55), 0 4px 12px -2px rgba(0, 210, 196, 0.2);
}

/* Tarjeta única de teléfonos */
.phone-row {
  transition: background-color 0.25s ease;
}
.phone-row:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.card-phones .contact-phone-sec:hover .contact-icon-box {
  background-color: #ffffff;
  color: #0284c7;
  box-shadow: 0 8px 20px -3px rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   SECTORES QUE ATENDEMOS
   ========================================================================== */

.sector-item {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sector-item:hover {
  border-color: #00d2c4;
  box-shadow: 0 10px 22px -10px rgba(15, 23, 42, 0.18);
  transform: translateY(-2px);
}
.sector-item .icon-box {
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sector-item:hover .icon-box {
  background-color: #00d2c4;
  color: #070d17;
}
.sector-cta {
  transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  box-shadow: 0 8px 18px -8px rgba(2, 132, 199, 0.55);
}
.sector-cta:hover {
  background-color: #075985;
  transform: translateY(-2px);
}
.sector-cta svg {
  transition: transform 0.25s ease;
}
.sector-cta:hover svg {
  transform: translateX(4px);
}

/* ==========================================================================
   PANEL "ÁREAS DE SERVICIO": ÍCONOS ANIMADOS
   ========================================================================== */

.adv-row {
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.adv-row:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(0, 210, 196, 0.5);
  transform: translateX(4px);
}
.adv-icon {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.adv-icon svg { transform-origin: center; }
.adv-row:hover .adv-icon {
  background-color: #00d2c4;
  color: #070d17;
  transform: scale(1.15) rotate(-4deg);
  box-shadow: 0 6px 16px -2px rgba(0, 210, 196, 0.5);
}
.adv-1:hover svg { animation: wrenchTorque 0.7s ease-in-out; }   /* herramientas */
.adv-2:hover svg { animation: hardHatNod 0.6s ease-in-out; }     /* normas de seguridad */
.adv-3:hover svg { animation: pinBounce 0.6s ease-in-out; }      /* atención nacional */
.adv-4:hover svg { animation: awardSpin 0.8s ease-in-out; }      /* experiencia */
@keyframes awardSpin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.25); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ==========================================================================
   BOTONES FLOTANTES: redes sociales + WhatsApp + llamada
   ========================================================================== */

.fab-mini {
  color: #ffffff;
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.35);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background-color 0.25s ease;
}
.fab-mini:hover {
  transform: translateY(-3px) scale(1.07);
  box-shadow: 0 12px 26px -4px rgba(15, 23, 42, 0.45);
}
.fab-mini svg { transform-origin: center; }
.fab-wa { background-color: #25d366; }
.fab-wa:hover { background-color: #1ebe5a; }
.fab-fb { background-color: #1877f2; }
.fab-tt { background-color: #111827; }
.fab-mini:hover svg { animation: socialPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

@media (prefers-reduced-motion: reduce) {
  .fab-mini:hover svg,
  .adv-row:hover svg { animation: none; }
}

/* ==========================================================================
   REFINAMIENTO DE DISEÑO (design-taste-frontend, modo "redisenio - preservar")
   Sistema de formas: controles 12px (rounded-xl), tarjetas 16px (rounded-2xl),
   paneles grandes 24px (rounded-3xl). Un solo acento (turquesa) sobre base azul/navy.
   ========================================================================== */

/* Tipografia: balance en titulos, lectura comoda en parrafos */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
h1, h2 { letter-spacing: -0.03em; }

/* Acento de titulos de seccion: un solo color solido (el degradado queda solo en el H1) */
h2 .text-gradient-geonyl {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: #0369a1;
}

/* Tarjeta navy (variante oscura para dar ritmo a la cuadricula) */
.arch-card.card-navy {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-color: #1e293b;
  box-shadow: 0 14px 30px -12px rgba(15, 23, 42, 0.55);
}
.arch-card.card-navy:hover {
  border-color: #00d2c4;
}

/* Retroalimentacion tactil al presionar */
.btn-brand-primary:active,
.btn-brand-blue:active,
.call-floating-btn:active,
.fab-mini:active,
.sector-cta:active,
button[type="submit"]:active {
  transform: translateY(0) scale(0.98);
}

/* Formulario: placeholder legible (AA) y foco claro */
#geonyl-contact-form input::placeholder,
#geonyl-contact-form textarea::placeholder {
  color: #64748b;
  opacity: 1;
}
#geonyl-contact-form input:focus,
#geonyl-contact-form select:focus,
#geonyl-contact-form textarea:focus {
  border-color: #0369a1;
  box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.18);
}
#geonyl-contact-form [aria-invalid="true"] {
  border-color: #b91c1c;
}
.field-error {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #b91c1c;
}

/* Navegacion: indicador de seccion activa */
#main-header nav a {
  position: relative;
}
#main-header nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  border-radius: 2px;
  background: #00d2c4;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#main-header nav a.is-active {
  color: #0f172a;
}
#main-header nav a.is-active::after {
  transform: scaleX(1);
}

/* Barra de progreso de lectura */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #00d2c4;
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 60;
  pointer-events: none;
}

/* Lineas de contorno: ligero desplazamiento al hacer scroll (solo navegadores con scroll-driven animations) */
@supports (animation-timeline: view()) {
  .deco::before {
    animation: decoDrift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes decoDrift {
    from { transform: translateY(-28px); }
    to   { transform: translateY(28px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  #scroll-progress { display: none; }
  .deco::before { animation: none; }
}

/* ==========================================================================
   SERVICIOS: COLUMNAS POR CATEGORIA CON ACORDEON
   ========================================================================== */

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

.svc-acc > summary {
  list-style: none;
}
.svc-acc > summary::-webkit-details-marker {
  display: none;
}
.svc-acc-summary {
  transition: background-color 0.25s ease;
}
.svc-acc-summary:hover {
  background-color: #f8fafc;
}
.svc-acc[open] > .svc-acc-summary {
  background-color: #f0f9ff;
}
.svc-acc[open] .svc-acc-title {
  color: #0369a1;
}
.svc-acc-chevron {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-acc[open] .svc-acc-chevron {
  transform: rotate(180deg);
}
.svc-acc[open] .svc-acc-body {
  animation: panelIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* El ícono se anima sin "saltar" de posición dentro de la fila */
.svc-acc-summary:hover .icon-box {
  transform: scale(1.1);
  box-shadow: none;
  background-color: var(--svc-bg);
  color: var(--svc-fg);
}

/* ==========================================================================
   SELECTOR PERSONALIZADO (Servicio de interés)
   ========================================================================== */

.custom-select.is-enhanced > select.native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.select-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: #0f172a;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.select-button:hover {
  border-color: #94a3b8;
}
.select-button:focus-visible,
.select-button[aria-expanded="true"] {
  outline: none;
  background-color: #ffffff;
  border-color: #0369a1;
  box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.18);
}
.select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-chevron {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: #475569;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.select-button[aria-expanded="true"] .select-chevron {
  transform: rotate(180deg);
}
.select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 30;
  max-height: 18rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.3), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
  outline: none;
  animation: panelIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.select-list[hidden] {
  display: none;
}
.select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: #334155;
  cursor: pointer;
}
.select-option.is-active {
  background-color: #f1f5f9;
  color: #0f172a;
}
.select-option[aria-selected="true"] {
  background-color: #e0f2fe;
  color: #075985;
  font-weight: 700;
}
.select-option .select-check {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: 0;
}
.select-option[aria-selected="true"] .select-check {
  opacity: 1;
}

/* Legibilidad general de texto pequeño */
body { -webkit-font-smoothing: antialiased; }
small, .text-xs { letter-spacing: 0.005em; }

/* ==========================================================================
   SISTEMA DE FONDOS: plano arquitectonico (cuadricula fina) + ritmo claro/oscuro
   ::before = lineas de contorno, ::after = cuadricula
   ========================================================================== */

.deco::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(15, 23, 42, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.025) 1px, transparent 1px);
  background-size: 128px 128px, 128px 128px, 32px 32px, 32px 32px;
}

/* El hero desvanece la cuadricula hacia abajo */
.deco-hero::after {
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
}

/* Seccion oscura (Servicios): azul marino profundo con cuadricula clara */
.section-dark {
  background: linear-gradient(180deg, #0f172a 0%, #0c2038 100%);
  --deco-opacity: 1;
}
.section-dark::after {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}
.section-dark h2 .text-gradient-geonyl {
  color: #00d2c4;
}

@media print {
  .deco::after { display: none; }
}

/* Estándares: el texto nunca se sale de la tarjeta en pantallas angostas */
.std-text {
  min-width: 0;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ==========================================================================
   HERO OSCURO CON FOTO DE FONDO
   ========================================================================== */

.hero-dark h1 .text-gradient-geonyl {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: #00d2c4;
}

/* Botón secundario sobre fondo oscuro */
.btn-outline-light {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  font-weight: 700;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: #ffffff;
  transform: translateY(-2px);
}
.btn-outline-light:active {
  transform: translateY(0) scale(0.98);
}