/* =========================================================
   FyA Retro Finance  •  style.css
   Diseño: Retro + Asimetría  |  Esquema de color: Analógico
   Tipografías: Archivo Black (headers) / Roboto (body)
   ========================================================= */

/* ----------  ROOT & THEME VARS  ---------- */
:root{
  /* Analogous palette — cálida y vibrante */
  --primary-color:#FF7E5F;         /* naranja coral */
  --secondary-color:#FF9365;       /* naranja suave */
  --accent-color:#FFC371;          /* amarillo melón */
  --dark-color:#222222;
  --light-color:#FFFFFF;
  --muted-color:#F8F5F2;
  --gradient-hero:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6));
  --gradient-overlay:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5));
  /* Shadows */
  --shadow-soft:0 4px 10px rgba(0,0,0,.1);
  --shadow-medium:0 6px 20px rgba(0,0,0,.15);
  /* Motion */
  --transition-fast:.25s ease-in-out;
  --transition-slow:.6s cubic-bezier(.45,.05,.55,.95); /* Nolineal */
  /* Radius */
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  /* Font Sizes */
  --fs-h1:clamp(2.2rem,4vw,3.5rem);
  --fs-h2:clamp(1.8rem,3vw,2.6rem);
  --fs-h3:1.6rem;
  --fs-base:1rem;
}

/* ----------  RESET & GLOBALS  ---------- */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:'Roboto',sans-serif;
  font-size:var(--fs-base);
  line-height:1.6;
  color:var(--dark-color);
  background-color:var(--muted-color);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{
  font-family:'Archivo Black',sans-serif;
  font-weight:400;
  text-align:center;
  color:var(--dark-color);
  text-shadow:1px 1px 3px rgba(0,0,0,.15);
}

a{color:var(--primary-color);text-decoration:none;transition:color var(--transition-fast);}
a:hover{color:var(--accent-color);}

img{display:block;max-width:100%;height:auto;}

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

.section{
  padding:60px 0;
  position:relative;
}
.section-title{
  margin-bottom:40px;
  font-size:var(--fs-h2);
}

/* Parallax backgrounds */
.section[data-parallax]{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
}

/* ----------  HEADER  ---------- */
.site-header{
  background-color:var(--light-color);
  box-shadow:var(--shadow-soft);
  position:sticky;
  top:0;
  z-index:50;
}
.logo{
  font-size:1.4rem;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 0;
}
.main-nav ul{
  display:flex;
  gap:25px;
  list-style:none;
}
.main-nav a{font-weight:500;}
/* Burger */
.burger{
  display:none;
  background:none;
  border:none;
  font-size:1.8rem;
  color:var(--dark-color);
  cursor:pointer;
}

/* ----------  HERO  ---------- */
.hero{
  min-height:70vh;
  display:flex;
  align-items:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}
.hero-content{
  color:var(--light-color);
  text-align:left;
  animation:fadeUp var(--transition-slow) both;
}
.hero p{max-width:600px;margin:20px 0;color:var(--light-color);}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(40px);}
  to{opacity:1;transform:translateY(0);}
}

/* ----------  BUTTONS  ---------- */
.btn,
button,
input[type='submit']{
  --btn-bg:var(--primary-color);
  --btn-bg-hover:var(--secondary-color);
  --btn-color:var(--light-color);
  font-family:'Archivo Black',sans-serif;
  display:inline-block;
  padding:12px 28px;
  border:none;
  border-radius:var(--radius-sm);
  background:var(--btn-bg);
  color:var(--btn-color);
  cursor:pointer;
  transition:background var(--transition-fast),transform var(--transition-slow);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
  background:var(--btn-bg-hover);
  transform:translateY(-3px);
}
.btn:active{transform:translateY(0);}

/* ----------  PARTNERS, TEAM, TESTIMONIALS, CARDS  ---------- */
.partners-gallery,
.team-cards,
.external-links,
.testimonial-slider{
  display:grid;
  gap:35px;
}
.partners-gallery{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.team-cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.external-links{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.testimonial-slider{grid-template-columns:1fr;}

.card,
.timeline-item{
  background-color:var(--light-color);
  padding:25px;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:transform var(--transition-slow),box-shadow var(--transition-fast);
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-medium);
}

/* Card images */
.card-image,
.image-container{
  width:100%;
  height:180px;
  overflow:hidden;
  border-radius:var(--radius-sm);
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:20px;
}
.card-image img,
.image-container img{width:100%;height:100%;object-fit:cover;margin:0 auto;}

/* ----------  TIMELINE  ---------- */
.timeline{
  margin:40px 0;
  position:relative;
  padding-left:30px;
  border-left:4px dashed var(--accent-color);
}
.timeline-item{align-items:flex-start;text-align:left;margin-bottom:30px;}
.timeline-date{
  font-weight:700;
  color:var(--primary-color);
  margin-bottom:8px;
}

/* ----------  GALLERY  ---------- */
.gallery{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:40px;
}
.gallery .image-container{height:240px;}

/* ----------  MODAL  ---------- */
.modal{
  display:none;
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.7);
  justify-content:center;
  align-items:center;
  z-index:1000;
}
.modal-content{
  background:var(--light-color);
  padding:30px;
  border-radius:var(--radius-lg);
  width:90%;
  max-width:600px;
  animation:scaleIn var(--transition-slow);
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(.7);}
  to{opacity:1;transform:scale(1);}
}
.close-modal{
  position:absolute;
  top:15px;
  right:20px;
  font-size:1.6rem;
  cursor:pointer;
}

/* ----------  CONTACT FORM  ---------- */
.contact-form{
  max-width:600px;
  margin:0 auto;
  display:grid;
  gap:20px;
}
.form-group{display:flex;flex-direction:column;}
input,textarea{
  padding:12px 15px;
  border:2px solid var(--secondary-color);
  border-radius:var(--radius-sm);
  font-family:inherit;
}
input:focus,textarea:focus{outline:none;border-color:var(--primary-color);}
textarea{resize:vertical;}

/* ----------  FOOTER  ---------- */
.site-footer{
  background:var(--dark-color);
  color:var(--light-color);
  text-align:center;
  padding:40px 0;
}
.site-footer a{color:var(--accent-color);font-weight:500;}
.footer-links{margin-bottom:15px;}
/* Decorative underline */
.site-footer a:hover{
  text-decoration:underline;
}

/* ----------  SOCIAL TEXT LINKS  ---------- */
.site-footer p:last-child a{
  display:inline-block;
  margin:0 8px;
  padding:4px 8px;
  border:1px solid var(--accent-color);
  border-radius:var(--radius-sm);
  transition:background var(--transition-fast),color var(--transition-fast);
}
.site-footer p:last-child a:hover{
  background:var(--accent-color);
  color:var(--dark-color);
}

/* ----------  COOKIE POPUP  ---------- */
#cookiePopup{
  font-size:.9rem;
}
#cookiePopup button{
  font-size:.9rem;
  border-radius:var(--radius-sm);
}

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

/* ----------  SUCCESS PAGE  ---------- */
.page-success{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:var(--gradient-overlay),url('../image/success-celebration.jpg') center/cover no-repeat;
  color:var(--light-color);
  text-align:center;
}

/* ----------  READ-MORE LINK  ---------- */
.read-more{
  display:inline-block;
  margin-top:15px;
  font-weight:700;
  position:relative;
  padding-right:20px;
}
.read-more::after{
  content:'→';
  position:absolute;
  right:0;
  transition:transform var(--transition-fast);
}
.read-more:hover::after{transform:translateX(4px);}

/* ----------  MEDIA QUERIES  ---------- */
@media(max-width:991px){
  .main-nav ul{gap:15px;}
}
@media(max-width:768px){
  .main-nav ul{
    position:fixed;
    top:0;right:-100%;
    flex-direction:column;
    background:var(--light-color);
    width:240px;
    height:100vh;
    padding-top:80px;
    box-shadow:var(--shadow-medium);
    transition:right var(--transition-slow);
  }
  .main-nav.open ul{right:0;}
  .burger{display:block;}
}
@media(max-width:560px){
  .hero{min-height:60vh;}
  .section{padding:45px 0;}
}
.timeline-content{
  color: black;
}
.burger{
  display: none;
}