/* ============================================================
   ESTILOS GLOBALES — HA Technologies PR
   ============================================================ */

/* ── SPLASH / LOADER ────────────────────────────────────────
   Pantalla de carga con el logo de HA Technologies
*/
#ha-loader {
   position: fixed;
   inset: 0;
   z-index: 9999;
   background: #0a0a0f;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 1.25rem;
   transition: opacity 0.5s ease, visibility 0.5s ease;
}

#ha-loader.fade-out {
   opacity: 0;
   visibility: hidden;
}

#ha-loader img {
   width: 80px;
   height: 80px;
}

#ha-loader span {
   color: #BE4D49;
   font-size: 1.25rem;
   font-weight: 600;
   letter-spacing: 0.05em;
}

#ha-loader-track {
   width: 200px;
   height: 3px;
   background: #1f1f2e;
   border-radius: 9999px;
   overflow: hidden;
   margin-top: 0.5rem;
}

#ha-loader-bar {
   height: 100%;
   width: 0%;
   background: linear-gradient(to right, #83151D, #BE4D49);
   border-radius: 9999px;
   animation: loader-progress 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes loader-progress {
   0% {
      width: 0%;
   }

   60% {
      width: 75%;
   }

   90% {
      width: 92%;
   }

   100% {
      width: 100%;
   }
}


/* Color de fondo oscuro y texto claro para toda la página */
body {
   background-color: #0a0a0f;
   color: #f0f0f8;
   font-family: ui-sans-serif, system-ui, sans-serif;
}

/* ── TEXTO CON GRADIENTE ROJO ────────────────────────────────
   Se usa en títulos para resaltar palabras clave.
   Ejemplo: "Nuestro <span class="grad-text">Trabajo</span>"
*/
.grad-text {
   background: linear-gradient(to right, #BE4D49, #83151D);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

/* ── ANIMACIÓN DE LOS PUNTOS DEL CHATBOT (typing ...) ────────
   Tres puntos que suben y bajan mientras el bot "está escribiendo".
   Cada punto tiene un retraso diferente para verse escalonado.
*/
.animate-bounce-1 {
   animation: bounce 1s infinite;
}

.animate-bounce-2 {
   animation: bounce 1s infinite 0.1s;
}

.animate-bounce-3 {
   animation: bounce 1s infinite 0.2s;
}

@keyframes bounce {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-4px);
   }
}

/* ── MENÚ MÓVIL (hamburguesa) ────────────────────────────────
   En pantallas pequeñas el menú empieza oculto.
   JS le agrega la clase "open" cuando el usuario toca el ícono.
*/
.mobile-menu {
   display: none;
}

.mobile-menu.open {
   display: flex;
}

/* ── SCROLL PROGRESS BAR ─────────────────────────────────── */
#scroll-progress {
   position: fixed;
   top: 0;
   left: 0;
   height: 3px;
   width: 0%;
   background: linear-gradient(to right, #83151D, #BE4D49);
   z-index: 9999;
   transition: width .1s linear;
}

/* ── CURSOR GLOW ─────────────────────────────────────────── */
#cursor-glow {
   position: fixed;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 1.5px solid rgba(131, 21, 29, 0.65);
   pointer-events: none;
   transform: translate(-50%, -50%);
   z-index: 9999;
   will-change: left, top;
}

#cursor-dot {
   position: fixed;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: rgba(190, 77, 73, 0.9);
   pointer-events: none;
   transform: translate(-50%, -50%);
   z-index: 9999;
}

@media (hover: none) {

   #cursor-glow,
   #cursor-dot {
      display: none;
   }
}

/* ── SCROLL REVEAL ───────────────────────────────────────── */
.reveal {
   opacity: 0;
   transform: translateY(36px);
   transition: opacity .8s ease, transform .8s ease;
}

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

/* ── STAGGER ITEMS ───────────────────────────────────────── */
.stagger-item {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity .5s ease, transform .5s ease;
}

.stagger-item.visible {
   opacity: 1;
   transform: none;
}

/* ── NAVBAR SHRINK ───────────────────────────────────────── */
nav {
   transition: padding .3s ease;
}

nav.nav-shrunk {
   padding-top: .25rem !important;
   padding-bottom: .25rem !important;
}

/* ── HERO IMAGE FLOAT + GLOW ───────────────────────────── */
#hero-section {
   position: relative;
}

#hero-section > .flex-1:first-child {
   position: relative;
   z-index: 2;
}

.hero-img-wrap {
   position: relative;
   display: inline-block;
   z-index: 1;
   pointer-events: none;
}

.hero-img-wrap::before {
   content: '';
   position: absolute;
   inset: -20px;
   background: radial-gradient(ellipse at center, rgba(131,21,29,.35) 0%, transparent 70%);
   border-radius: 24px;
   z-index: 0;
   animation: hero-glow-pulse 3s ease-in-out infinite alternate;
}

@keyframes hero-glow-pulse {
   0%   { opacity: .6; transform: scale(1); }
   100% { opacity: 1;  transform: scale(1.06); }
}

.hero-img {
   position: relative;
   z-index: 1;
   width: 100%;
   max-width: 540px;
   border-radius: 16px;
   border: none;
   box-shadow: none;
   animation: hero-float 4s ease-in-out infinite;
   pointer-events: none;
}

@keyframes hero-float {
   0%,100% { transform: translateY(0); }
   50%      { transform: translateY(-12px); }
}

#hero-section::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(131, 21, 29, .22), transparent 70%);
   animation: hero-pulse 5s ease-in-out infinite alternate;
   pointer-events: none;
   z-index: -1;
}

@keyframes hero-pulse {
   0% {
      opacity: .5;
      transform: scaleX(1);
   }

   100% {
      opacity: 1;
      transform: scaleX(1.08);
   }
}

/* ── TYPING CURSOR ───────────────────────────────────────── */
.typing-cursor {
   display: inline-block;
   width: 3px;
   height: .85em;
   background: #BE4D49;
   margin-left: 2px;
   vertical-align: text-bottom;
   animation: blink .8s step-end infinite;
}

@keyframes blink {

   0%,
   100% {
      opacity: 1;
   }

   50% {
      opacity: 0;
   }
}

/* ── FEATURE CARD ─────────────────────────────────────────── */
/* ── FEATURE FLIP CARD ───────────────────────────────────── */
.flip-card {
   background: transparent;
   perspective: 1000px;
   height: 100%;
}

.flip-card-inner {
   position: relative;
   width: 100%;
   height: 100%;
   transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
   transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
   transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
   position: absolute;
   inset: 0;
   border-radius: 12px;
   border: 1px solid #1f1f2e;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 1.5rem 1.25rem;
   text-align: center;
}

.flip-card-front {
   background: #0d0d14;
   gap: 0.75rem;
}

.flip-card-front:hover {
   border-color: rgba(190, 77, 73, .4);
}

.flip-card-back {
   background: linear-gradient(135deg, #1a0608 0%, #0d0d14 60%);
   border-color: rgba(190, 77, 73, .4);
   color: #d1d5db;
   font-size: 0.9rem;
   line-height: 1.55;
   transform: rotateY(180deg);
   box-shadow: 0 0 28px rgba(131, 21, 29, .2);
}

/* ── WORK CARD HOVER ─────────────────────────────────────── */
.work-card {
   position: relative;
   overflow: hidden;
   border-radius: 16px;
   aspect-ratio: 4 / 3;
   cursor: pointer;
}

.work-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top;
   transition: transform 0.5s ease;
}

.work-card:hover img {
   transform: scale(1.05);
}

.work-card-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(10,10,15,0.97) 0%, rgba(10,10,15,0.6) 55%, rgba(10,10,15,0.1) 100%);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 1.5rem;
   opacity: 0;
   transition: opacity 0.35s ease;
}

.work-card:hover .work-card-overlay {
   opacity: 1;
}

/* Always show name at bottom even without hover */
.work-card-name {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 1rem 1.25rem;
   background: linear-gradient(to top, rgba(10,10,15,0.9), transparent);
   font-size: 1.1rem;
   font-weight: 600;
   color: #f0f0f8;
   transition: opacity 0.35s ease;
}

.work-card:hover .work-card-name {
   opacity: 0;
}

/* ── STATS ───────────────────────────────────────────────── */
.stat-number {
   font-size: 2.75rem;
   font-weight: 700;
   background: linear-gradient(to right, #BE4D49, #83151D);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

/* ── FOOTER 2-COL GRID ───────────────────────────────────── */
.contact-centered-wrap {
   max-width: 560px;
   margin: 0 auto;
   background: rgba(255, 255, 255, .03);
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 20px;
   padding: 2.5rem 2rem;
}

@media (min-width: 640px) {
   .contact-centered-wrap {
      padding: 3rem 2.5rem;
   }
}

.footer-contact-info {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   padding-top: .5rem;
}

/* icon pills — mobile: full row with text; desktop: circle that expands on hover */
.contact-icons-row {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.75rem;
}

.contact-icon-pill {
   display: inline-flex;
   align-items: center;
   height: 50px;
   border-radius: 999px;
   border: 1px solid rgba(190, 77, 73, 0.3);
   background: rgba(190, 77, 73, 0.07);
   color: #be4d49;
   overflow: hidden;
   text-decoration: none;
   white-space: nowrap;
   padding: 0 14px;
   width: 100%;
   transition: background 0.25s, border-color 0.25s;
}

.contact-icon-pill:hover {
   background: rgba(190, 77, 73, 0.14);
   border-color: rgba(190, 77, 73, 0.55);
}

@media (min-width: 768px) {
   .contact-icons-row {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.85rem;
   }

   .contact-icon-pill {
      width: auto;
      max-width: 50px;
      transition: max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
         background 0.25s,
         border-color 0.25s;
   }

   .contact-icon-pill:hover {
      max-width: 380px;
   }

   .contact-icon-pill .contact-icon-text {
      opacity: 0;
      transition: opacity 0.2s ease 0.22s;
   }

   .contact-icon-pill:hover .contact-icon-text {
      opacity: 1;
   }
}

.contact-icon-svg {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.contact-icon-text {
   font-size: 0.875rem;
   color: #e5e5e5;
   margin-left: 0.75rem;
}

/* ── CONTACT FORM ─────────────────────────────────────────── */
.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
   margin-bottom: 1rem;
}

@media (max-width: 640px) {
   .form-row {
      grid-template-columns: 1fr;
   }
}

.ha-input {
   width: 100%;
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 10px;
   padding: 14px 16px;
   color: #f0f0f8;
   font-size: 15px;
   outline: none;
   transition: border-color .2s, box-shadow .2s;
   box-sizing: border-box;
   margin-bottom: 1rem;
   display: block;
}

.ha-input:focus {
   border-color: #83151D;
   box-shadow: 0 0 0 3px rgba(131, 21, 29, .18);
}

.ha-input::placeholder {
   color: rgba(240, 240, 248, .35);
}

.ha-textarea {
   resize: vertical;
   min-height: 120px;
}

.ha-btn-submit {
   width: 100%;
   padding: 16px;
   background: linear-gradient(to right, #83151D 50%, transparent 50%);
   background-size: 200% 100%;
   background-position: right center;
   color: white;
   border: 1px solid #83151D;
   border-radius: 8px;
   font-size: 15px;
   font-weight: 400;
   letter-spacing: .025em;
   text-transform: none;
   cursor: pointer;
   transition: background-position 0.4s ease;
}

.ha-btn-submit:hover:not(:disabled) {
   background-position: left center;
}

.ha-btn-submit:disabled {
   opacity: .55;
   cursor: not-allowed;
}

.btn-slide-fill {
   background: linear-gradient(to right, #83151D 50%, transparent 50%);
   background-size: 200% 100%;
   background-position: right center;
   color: white;
   text-decoration: none;
   transition: background-position 0.4s ease;
}

.btn-slide-fill:hover {
   background-position: left center;
}

.cf-notice {
   margin-top: .75rem;
   padding: 12px 16px;
   border-radius: 8px;
   font-size: 14px;
   display: none;
}

.cf-success {
   background: rgba(34, 197, 94, .1);
   color: #4ade80;
   border: 1px solid rgba(34, 197, 94, .25);
}

.cf-error {
   background: rgba(239, 68, 68, .1);
   color: #f87171;
   border: 1px solid rgba(239, 68, 68, .2);
}

/* ── STATS GRID ───────────────────────────────────────────── */
#stats-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
}

@media (min-width: 768px) {
   #stats-grid {
      grid-template-columns: repeat(4, 1fr);
   }
}

/* ── CHATBOT POSICIÓN ─────────────────────────────────────── */
@media (min-width: 768px) {
   #chat-window {
      left: auto !important;
      right: 32px !important;
      width: 24rem !important;
      bottom: 96px !important;
   }
}