/* =========================================================
   FUTURISTA CONSULTING – style.css
   Diseño futurista con gradientes, curvas y micro-animaciones
   ========================================================= */

/* ---------- VARIABLES DE TEMA ---------- */
:root{
  /* Colores principales */
  --primary-1:#2af598;        /* verde-cian brillante */
  --primary-2:#009efd;        /* azul eléctrico        */
  --accent-1:#f83600;         /* rojo-naranja intenso  */
  --accent-2:#f9d423;         /* amarillo vibrante     */
  --dark-bg:#0d0d0d;
  --light-bg:#f5f7fa;

  /* Texto y contraste */
  --text-light:#ffffff;
  --text-dark:#222222;

  /* Gradientes */
  --gradient-main:linear-gradient(135deg,var(--primary-1)0%,var(--primary-2)100%);
  --gradient-accent:linear-gradient(135deg,var(--accent-1)0%,var(--accent-2)100%);

  /* Miscelánea */
  --radius:12px;
  --shadow:0 6px 18px rgba(0,0,0,.25);
  --transition:all .35s ease;
}

/* ---------- RESETEO BÁSICO ---------- */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:'Merriweather',serif;
  background:var(--light-bg);
  color:var(--text-dark);
  line-height:1.6;
}

/* Tipografía */
h1,h2,h3,h4,h5,h6{
  font-family:'Montserrat',sans-serif;
  color:var(--text-dark);
  margin:0 0 .6em 0;
  line-height:1.3;
}

p{margin:0 0 1.2em 0;}

/* Enlaces */
a{
  color:var(--primary-2);
  text-decoration:none;
  transition:var(--transition);
}
a:hover,
a:focus{color:var(--accent-1);}

/* ---------- CONTENEDORES ---------- */
.container{
  width:90%;
  max-width:1200px;
  margin:0 auto;
}

.is-two-thirds{max-width:66.666%;}

/* ---------- NAVEGACIÓN ---------- */
.site-header{
  position:fixed;
  top:0;left:0;width:100%;
  background:rgba(13,13,13,.8);
  backdrop-filter:blur(6px);
  z-index:1000;
  transition:var(--transition);
}
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 2rem;
}
.logo a{
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:1.4rem;
  background:var(--gradient-main);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.nav-links{
  list-style:none;
  display:flex;
  gap:1.5rem;
}
.nav-links li a{color:var(--text-light);font-weight:600;}
.nav-links li a:hover{color:var(--primary-1);}

/* Burger */
.burger{
  display:none;
  flex-direction:column;
  gap:4px;
  background:none;
  border:0;
  cursor:pointer;
}
.burger .line{
  width:26px;height:3px;
  background:var(--text-light);
  transition:var(--transition);
}

/* Responsive nav */
@media (max-width:768px){
  .burger{display:flex;}
  .nav-links{
    position:fixed;right:-100%;top:0;
    flex-direction:column;
    width:70%;height:100%;
    background:#111;padding:4rem 2rem;
    transition:var(--transition);
  }
  .nav-links.open{right:0;}
  .nav-links li{margin:1rem 0;}
}

/* ---------- HERO ---------- */
.hero-section{
  min-height:100vh;
  display:flex;
  align-items:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  position:relative;
  text-align:center;
  color:var(--text-light);
}
.hero-section h1,
.hero-section p{color:var(--text-light);}
.hero-title{font-size:2.6rem;}
.hero-subtitle{font-size:1.15rem;margin-bottom:2rem;}
.scroll-indicator{
  position:absolute;bottom:20px;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  opacity:.8;
}
.scroll-indicator .mouse{
  width:24px;height:40px;border:2px solid #fff;border-radius:14px;position:relative;
}
.scroll-indicator .mouse::after{
  content:'';position:absolute;top:8px;left:50%;
  width:4px;height:4px;border-radius:50%;background:#fff;
  transform:translateX(-50%);
  animation:scroll 2s infinite;
}
@keyframes scroll{0%{opacity:1;top:8px}100%{opacity:0;top:24px}}
.scroll-indicator .arrow{
  width:0;height:0;border-left:6px solid transparent;
  border-right:6px solid transparent;border-top:8px solid #fff;
  margin-top:6px;
  animation:arrow 2s infinite;
}
@keyframes arrow{0%{transform:translateY(0)}50%{transform:translateY(6px)}100%{transform:translateY(0)}}

/* ---------- BOTONES ---------- */
.btn,
button,
input[type='submit']{
  display:inline-block;
  background:var(--gradient-main);
  color:var(--text-light);
  padding:.9rem 2rem;
  border:none;
  border-radius:var(--radius);
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:var(--transition);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
  background:var(--gradient-accent);
  transform:translateY(-2px);
}

/* ---------- SECCIONES GENERALES ---------- */
section{padding:6rem 0;position:relative;}
.section-title{
  text-align:center;font-size:2rem;margin-bottom:3rem;
  text-shadow:1px 1px 3px rgba(0,0,0,.2);
}

/* Curva superior e inferior */
.curved-grid::before,
.curved-grid::after{
  content:'';
  position:absolute;
  width:100%;height:100px;
  left:0;
  background:inherit;
  z-index:-1;
}
.curved-grid::before{
  top:-80px;
  transform:skewY(-3deg);
  transform-origin:100% 0;
}
.curved-grid::after{
  bottom:-80px;
  transform:skewY(3deg);
  transform-origin:0 100%;
}

/* ---------- ABOUT, COMMUNITY, RESOURCES (texto estándar) ---------- */
.about-section,
.community-section,
.resources-section p{font-size:1rem;}

/* ---------- TIMELINE ---------- */
.timeline{
  position:relative;margin:3rem 0;
  padding-left:2rem;border-left:3px solid var(--primary-2);
}
.timeline-item{margin-bottom:2rem;position:relative;}
.timeline-item::before{
  content:'';position:absolute;left:-10px;top:3px;
  width:16px;height:16px;border-radius:50%;
  background:var(--primary-2);border:3px solid #fff;
}
.timeline-date{font-weight:700;font-family:'Montserrat',sans-serif;color:var(--primary-2);}
.timeline-content h3{margin:.4rem 0 .2rem 0;font-size:1.1rem;}

/* ---------- GRID DE TARJETAS ---------- */
.services-grid,
.portfolio-grid{
  display:grid;
  gap:2rem;
}
@media(min-width:600px){
  .services-grid,
  .portfolio-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
}
.card{
  background:var(--light-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  transition:var(--transition);
  overflow:hidden;
}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 22px rgba(0,0,0,.25);}
.card-image{
  width:100%;height:220px;overflow:hidden;position:relative;
}
.card-image img{
  width:100%;height:100%;object-fit:cover;
  display:block;margin:0 auto;
}
.card-content{padding:1.5rem;}
.card-content h3{font-size:1.2rem;margin-bottom:.5rem;}

/* ---------- PROGRESS BAR ---------- */
.progress-wrapper{margin:2rem 0;text-align:left;}
progress{
  width:100%;height:14px;border-radius:7px;appearance:none;
}
progress::-webkit-progress-bar{background:#d7d7d7;border-radius:7px;}
progress::-webkit-progress-value{background:var(--gradient-main);border-radius:7px;}
progress::-moz-progress-bar{background:var(--gradient-main);border-radius:7px;}

/* ---------- TOGGLE (COMMUNITY) ---------- */
.toggle-wrapper{margin:2rem 0;}
.toggle-wrapper label{font-weight:700;font-family:'Montserrat',sans-serif;display:block;margin-bottom:.6rem;}
input.toggle{appearance:none;width:50px;height:24px;background:#aaa;border-radius:24px;position:relative;cursor:pointer;transition:var(--transition);}
input.toggle::after{
  content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:var(--transition);
}
input.toggle:checked{background:var(--primary-2);}
input.toggle:checked::after{left:28px;}
input.toggle + .toggle-content{max-height:0;overflow:hidden;transition:max-height .5s ease;}
input.toggle:checked + .toggle-content{max-height:500px;margin-top:1rem;}

/* ---------- FORMULARIOS ---------- */
.form-group{margin-bottom:1.2rem;}
.form-group label{display:block;font-weight:600;margin-bottom:.4rem;}
.form-group input,
.form-group textarea{
  width:100%;padding:.8rem 1rem;
  border:2px solid #d5d5d5;border-radius:var(--radius);
  font-family:'Merriweather',serif;font-size:1rem;
  transition:var(--transition);
}
.form-group input:focus,
.form-group textarea:focus{border-color:var(--primary-2);outline:none;box-shadow:0 0 0 3px rgba(0,158,253,.2);}

/* ---------- RECURSOS ---------- */
.resources-list{display:grid;gap:1.5rem;}
.resource-item h3{font-size:1.1rem;margin-bottom:.3rem;}
.resource-item a{font-weight:700;}
.resource-item p{margin-bottom:0;}

/* ---------- CLIENTELE ---------- */
.clientele-section{
  color:var(--text-light);
  background-size:cover;background-repeat:no-repeat;background-attachment:fixed;
  text-shadow:1px 1px 3px rgba(0,0,0,.5);
}
.clientele-section p{max-width:800px;margin:0 auto;}

/* ---------- FOOTER ---------- */
.site-footer{
  background:var(--dark-bg);
  color:var(--text-light);
  padding:3rem 0 2rem 0;
  text-align:center;
}
.footer-nav{margin-bottom:1rem;}
.footer-nav a{
  color:var(--text-light);margin:0 .6rem;font-weight:600;
}
.footer-nav a:hover{color:var(--primary-1);}
.footer-social{margin-bottom:1rem;font-size:.95rem;}
.footer-social a{
  color:var(--text-light);font-weight:600;
}
.footer-social a:hover{color:var(--accent-2);}

/* ---------- ÉXITO (success.html) ---------- */
.success-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.success-page h1{margin-bottom:1rem;font-size:2.2rem;}

/* ---------- LEGAL (privacy & terms) ---------- */
.legal-page{padding-top:100px;}

/* ---------- LINKS "LEER MÁS" ---------- */
.read-more{
  display:inline-block;
  color:var(--accent-1);
  font-weight:700;
  position:relative;
  padding-right:1.4rem;
}
.read-more::after{
  content:'➜';position:absolute;right:0;top:0;
  transition:var(--transition);
}
.read-more:hover::after{transform:translateX(4px);}

/* ---------- PARALLAX & FONDOS ---------- */
.parallax{background-attachment:fixed;background-size:cover;background-repeat:no-repeat;}
/* sombreado texto sobre imagen */
[data-prompt]{position:relative;}
[data-prompt]::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5));
}

/* ---------- UTILIDADES ---------- */
.text-center{text-align:center;}
.mt-2{margin-top:2rem;}
.mb-2{margin-bottom:2rem;}
.hidden{display:none !important;}