@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Sniglet:wght@400;800&display=swap');

*{ padding:0; margin:0; }

body{
  font-family:"Roboto", sans-serif;
  font-optical-sizing:auto;
  font-style:normal;
}

html{ scroll-behavior:smooth; }

:root{
  --page:#0b0b0b;
  --surface:black;
  --surface2:#141414;
  --ink:#f5f5f5;
  --muted:#a1a1aa;
  --accent:#e50914;           /* brand red (kept) */
  --ring:rgba(88, 0, 5, 0.35);
  --radius:18px;
  --shadow:0 6px 24px rgba(0,0,0,.45);
  --speed:180ms;
}

.container{
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:30px;
  opacity:0; transition:opacity .5s ease-in-out;
}
.container.loaded{ opacity:1; }

/* ---- hero overlay (currently disabled by display:none) ---- */
.hero-section{
  position:fixed; top:0; left:0; width:100%; height:100vh; background:linear-gradient(135deg,#000,#111);
  display:flex; flex-direction:column; justify-content:space-evenly; align-items:center; z-index:9999;
  transition:opacity 1s ease-in-out, transform 1s ease-in-out;
  background:url("images/heroPicture.jpg") center center/cover no-repeat;
  display:none;
}
.hero-section::before{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.6)); z-index:1; }
.hero-section.exit{ opacity:0; transform:translateY(-100%); pointer-events:none; }
.hero-logo{ width:50%; height:auto; border-radius:50%; opacity:0; transform:scale(.95);
  transition:opacity 1.5s ease-in-out, transform 1s ease-out; position:relative; z-index:2; box-shadow:0 0 30px 10px #f2f0f0; }
.hero-logo.fade-in{ opacity:1; transform:scale(1); }
.hero-txt{ color:white; font-size:2.2rem; text-align:center; margin-top:1.5rem; max-width:90%; text-shadow:0 2px 6px rgba(0,0,0,.7); opacity:0; transition:opacity 1.5s ease-in-out; position:relative; z-index:2; }
.hero-txt.show{ opacity:1; }

@media (min-width:768px){ .hero-logo{ max-width:400px } .hero-txt{ font-size:1.5rem } }
@media (min-width:1200px){ .hero-logo{ max-width:500px } }

header{
  width:100%; height:90px; background:#000000; color:#fff; justify-content:center; display:flex; align-items:center;
  margin-bottom:40px; position:fixed; top:0; left:0; z-index:10;
}
header .header-name{ font-size:1.5rem; display: flex; justify-content: center; align-items: center;}
header .bars{ font-size:1.7rem }
.header-logo{ width:45%; height:50px;  ; z-index:3; }


.intro-section{ width:100%; height:250px; display:flex; flex-direction:column; justify-content:center; align-content:center; text-align:center; align-items:center; margin-bottom:40px; margin-top:150px }
.intro-section .intro-wrapper{ position:absolute; width:90%; height:300px; z-index:2; background:rgba(0,0,0,.607) }
.intro-section .intro-image{ width:90%; height:300px; position:absolute; z-index:1 }
.intro-section .intro-txt{ position:relative; bottom:15px; color:#fff; z-index:2; font-size:1.8rem; width:80% }
.intro-section .intro-btn{ width:110px; margin: 20px; padding:10px; border-radius:5px; font-size:1rem; z-index:2; color:#fff; transition:.3s ease }

.about-us-section{ display:flex; flex-direction:column; justify-content:space-evenly; width:100%; align-items:center; background:#000; color:#fff; padding:20px 0 }
.about-us-section .about-us-title{ margin-bottom:20px }
.about-us-section .about-us-description{ font-size:1.2rem; width:90%; font-family:sans-serif; font-optical-sizing:auto; font-style:normal; line-height:22px }

#servicios{ background:#fff; color:var(--ink); padding:clamp(2rem, 3vw + 1rem, 4rem) 1rem }
#servicios .wrap{ max-width:1100px; margin:0 auto }
#servicios .services-list{ display:flex; flex-wrap:wrap; gap:1.2rem; align-items:stretch }
#servicios .service{ flex:1 1 280px; background:var(--surface); border-radius:var(--radius); padding:1.25rem 1.25rem 1.4rem; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.05); transition:transform var(--speed), box-shadow var(--speed), border-color var(--speed) }
#servicios .service:hover{ transform:translateY(-6px); box-shadow:0 8px 22px rgba(229,9,20,.15); border-color:var(--ring) }
#servicios .service i{ display:inline-grid; place-items:center; width:48px; height:48px; font-size:1.35rem; color:#fff; background:linear-gradient(135deg, var(--accent), #ff1c25); border-radius:12px; box-shadow:0 6px 18px rgba(229,9,20,.25); margin-bottom:.9rem }
#servicios .service-title{ font-size:clamp(1.05rem, .5vw + 1rem, 1.25rem); margin:0 0 .4rem; letter-spacing:.2px }
#servicios .service-description{ margin:0; color:var(--muted); line-height:1.55 }
#servicios .cta{ margin-top:1.6rem; display:flex; justify-content:flex-start }
#servicios .btn{ --btn-pad-y:.7rem; --btn-pad-x:1.1rem; display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; font-weight:700; font-size:.95rem; text-decoration:none; transition:transform var(--speed), box-shadow var(--speed), background var(--speed), color var(--speed), border-color var(--speed); will-change:transform }
#servicios .btn-ghost{ padding:var(--btn-pad-y) var(--btn-pad-x); color:#fff; background:#000; box-shadow:0 4px 12px rgba(0,0,0,.08) }
#servicios .btn-ghost:hover{ background:rgba(229,9,20,.08); box-shadow:0 8px 22px rgba(229,9,20,.2); transform:translateY(-2px) }

@media (min-width:720px){ #servicios{ padding:4rem 1.25rem } #servicios .cta{ margin-top:2rem } }
@media (min-width:1024px){ #servicios .services-list{ gap:1.6rem } #servicios .service{ padding:1.5rem 1.5rem 1.7rem } }
@media (prefers-reduced-motion:reduce){ #servicios .service, #servicios .btn{ transition:none !important } }

.faq{ background:#0b0b0b; color:#fff; padding:clamp(2.5rem, 4vw, 4rem) 1.25rem; border-top:1px solid rgba(255,255,255,.08) }
.faq .wrap{ max-width:900px; margin:0 auto }
.faq .title{ font-size:clamp(1.6rem, 1.2rem + 1vw, 2rem); margin-bottom:.5rem; color:#fff; text-align:center }
.faq .intro{ color:var(--muted); text-align:center; max-width:60ch; margin:0 auto 2rem }
.faq-list{ display:flex; flex-direction:column; gap:1rem }
.faq-list details{ background:#141414; border-radius:var(--radius); padding:1rem 1.2rem; border:1px solid rgba(255,255,255,.08); transition:border-color .2s ease, background .2s ease;
    transition: height 0.3s ease;

}

.answer{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition: max-height .85s ease, opacity .35s ease;
}
.faq-list details[open] .answer{
  /* max-height grande para cubrir contenido típico; ajusta si necesitas más */
  max-height: 500px;
  opacity:1;
}

/* Texto interno */
.faq-list p{ margin:.8rem 0 0; color:var(--muted); line-height:1.55; font-size:.95rem }

/* (Opcional) Respeta accesibilidad si el usuario prefiere menos animaciones */
@media (prefers-reduced-motion: reduce){
  .answer{ transition:none }
}

details div {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.faq-list details:hover{ border-color: color-mix(in oklab, var(--accent) 35%, rgba(255,255,255,.08)) }
.faq-list summary{ cursor:pointer; font-weight:600; display:flex; align-items:center; gap:.5rem; list-style:none }
.faq-list summary::-webkit-details-marker{ display:none }
.faq-list p{ margin:.8rem 0 0; color:var(--muted); line-height:1.55; font-size:.95rem }
.faq-list i{ color:rgb(193,44,44); margin-right:10px }

.projects-section{ width:100%; display:flex; margin:30px; gap:50px; overflow:scroll }
.projects-section .project{ width:200px; height:auto; display:flex; flex-direction:column; justify-content:center; align-items:center }
.projects-section .project-img{ width:220px; height:220px }
.projects-section .project-redirect-btn, .intro-btn{ color:#fff; text-decoration:none; background:rgb(193,44,44); padding:10px; width:100px; border-radius:5px; display:flex; justify-content:center; align-items:center }
.project-text{ height:100px }

#contactSection{ scroll-margin-top:225px }
.contact-section{ width:80%; padding:20px; background:#f9f9f9; text-align:center; border-radius:5px }
.contact-section h2{ font-size:28px; color:rgb(193,44,44); margin-bottom:30px }
.contact-form{ max-width:500px; margin:0 auto; display:flex; flex-direction:column; gap:18px;justify-content: center; align-items: center; }
.contact-form input, .contact-form textarea{
  padding:14px; font-size:16px; border:1.5px solid #ddd; border-radius:8px; transition:border-color .3s ease, box-shadow .3s ease; font-family:"Roboto", sans-serif; resize:vertical;width: 90%;
}
.contact-form textarea{ min-height:120px; line-height:1.5 }
.contact-form input:focus, .contact-form textarea:focus{ border-color:rgb(193,44,44); box-shadow:0 0 5px rgba(193,44,44,.3); outline:none }
.contact-form button{ background:rgb(193,44,44); color:#fff; border:none; padding:14px; border-radius:8px; font-size:16px; cursor:pointer; font-weight:600; transition:background-color .3s ease;width: 50%;}
.contact-form button:hover{ background:#8b1c1c }

.form-success{ display:none; align-items:center; justify-content:center; gap:12px; margin-top:25px; padding:14px 20px; background:#e8f9f1; border:2px solid #31c48d; color:#167d51; font-weight:600; font-size:1rem; border-radius:10px; box-shadow:0 2px 8px rgba(49,196,141,.2); max-width:500px; margin-left:auto; margin-right:auto; transition:all .3s ease-in-out }
.form-success i{ font-size:1.4rem; color:#31c48d }
.form-success.show{ display:flex; opacity:1 }

footer{ width:100%; height:270px; background:#000; color:#fff; display:flex; flex-direction:column; }
.footer-wrap{ display:flex; flex-direction:column; justify-content:left; align-items:left; gap:20px; padding:25px;text-align: left; }
footer p{ font-size:1.1rem }
footer .social-btns-container{ display:flex; justify-content:left; width:250px; gap: 20px; }
footer .social-btns-container li{ font-size:1.6rem }
.social-btns-container .facebook{ display:flex; justify-content:center; align-items:center; background:#1877F2; width:40px; height:40px; border-radius:50% }
.social-btns-container .instagram{ display:flex; justify-content:center; align-items:center; width:40px; height:40px; border-radius:50%; background:linear-gradient(45deg,#405DE6,#5851DB,#833AB4,#C13584,#E1306C,#FD1D1D) }
footer a{ color:#fff; text-decoration:none }

/* responsive tweaks (kept) ... */
@media (max-width:321px){
  header .header-name{ font-size:1.5rem }
  .intro-section .intro-btn{ left:60px; font-size:.9rem }
  .about-us-section{ padding-bottom:30px }
  .service-card{ width:80% }
  footer p{ font-size:1rem }
}
@media (min-width:375px){
  header{ gap:65px }
  .intro-section .intro-btn{ left:80px; font-size:1.1rem }
  footer p{ font-size:1rem }
}
@media (max-width:426px){ .intro-section .intro-btn{ top:20px } }
@media (min-width:768px) and (max-width:1600px){
  header{ gap:380px }
  header .header-name{ font-size:1.8rem }
  header .fa{ font-size:2.2rem }
  .intro-section .intro-btn{ left:220px; top:20px }
  .services-section{ flex-direction:row; flex-wrap:wrap }
  .services-section .service{ display:flex; gap:30px; flex-direction:column; align-items:center; width:350px; height:440px }
  .services-section .service .service-description{ font-size:1.2rem; line-height:25px }
  .about-us-section .about-us-description{ font-size:1.4rem; line-height:30px }
  footer p{ font-size:1.4rem }
}

/* =========================
   SPLASH (GLYPH SPARKS)
   ========================= */
.splash{
  position:fixed; inset:0; display:grid; place-items:center;
  background:radial-gradient(90% 70% at 50% 20%, #111 0%, #0b0b0b 60%, #080808 100%);
  z-index:99999; transition:opacity .35s ease, visibility .35s linear; overflow:hidden;
}
.splash.hide{ opacity:0; visibility:hidden }

.splash .splash-inner{ display:flex; align-items:center; justify-content:center }
.logo-wrap{ position:relative; width:180px; height:180px }
.logo{ position:absolute; inset:0; margin:auto; width:180px; height:180px; border-radius:50%; display:block; opacity:0; animation:logoPop .8s ease-out forwards }
.glow{
  position:absolute; inset:0; margin:auto; width:180px; height:180px; border-radius:50%;
  border:2px solid var(--accent); box-shadow:0 0 30px color-mix(in oklab, var(--accent) 70%, transparent), 0 0 60px color-mix(in oklab, var(--accent) 45%, transparent);
  animation:pulseGlow 10s ease-in-out infinite;
}

/* glyph sparks */
.sparks{ position:absolute; inset:0; pointer-events:none }
.g{
  position:absolute; top:50%; left:50%;
  font-weight:800; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color:#ffe5ea; text-shadow:0 0 18px color-mix(in oklab, var(--accent) 55%, white 0%); opacity:0;
}
.g.animate{ animation:burst 2.2s cubic-bezier(.22,.61,.36,1) var(--delay,0ms) both }

@keyframes burst{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) rotate(var(--ang,0)) translate(110px) scale(.9); /* start a little farther */
  }
  10%{ opacity:1 }
  70%{ opacity:1 }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) rotate(var(--ang,0)) translate(var(--dist,150px)) scale(.7);
  }
}

/* splash keyframes */
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 30px rgba(229,9,20,.5), 0 0 60px rgba(229,9,20,.3) }
  50%{    box-shadow:0 0 50px rgba(229,9,20,.8), 0 0 100px rgba(229,9,20,.5) }
}
@keyframes logoPop{ from{ opacity:0; transform:scale(.9) } to{ opacity:1; transform:scale(1) } }

@media (prefers-reduced-motion:reduce){
  .splash{ transition:none }
  .glow, .g.animate, .logo{ animation:none !important }
  .logo{ opacity:1 }
}