/*--------------------------------------------------------------
#  Óptima Estrategia – Global Stylesheet
#  Author: Generated
#  Description: Responsive creative design-system with adaptive
#               typography, neutral palette & smooth transitions
--------------------------------------------------------------*/

/*========================
  0. ROOT THEME VARIABLES
========================*/
:root{
  /* Typography */
  --font-heading: 'Manrope', sans-serif;
  --font-body   : 'Rubik',  sans-serif;

  /* Palette – Neutral + Accent */
  --clr-primary        : #4C5C68;  /* Dark blue-grey */
  --clr-primary-dark   : #39424b;
  --clr-secondary      : #F4F7F6;  /* Ultra-light neutral */
  --clr-secondary-dark : #dadedd;
  --clr-accent         : #FF6B2D;  /* Bold orange */
  --clr-accent-dark    : #e35e29;
  --clr-text           : #222222;
  --clr-text-muted     : #666666;
  --clr-white          : #ffffff;

  /* Radius & Shadow */
  --radius-sm : 6px;
  --radius-md : 12px;
  --shadow-sm : 0 2px 6px rgba(0,0,0,.08);
  --shadow-md : 0 4px 12px rgba(0,0,0,.12);

  /* Transitions */
  --transition-fast : .25s ease;
  --transition-md   : .4s ease;
}

/*========================
  1. GLOBAL RESETS
========================*/
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--clr-text);
  background-color:var(--clr-secondary);
  -webkit-font-smoothing:antialiased;
}

/* Typography hierarchy */
h1,h2,h3,h4,h5,h6{
  margin:0 0 .5em;
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.2;
  color:var(--clr-primary);
}
h1{font-size:clamp(2rem,5vw,3.5rem)}
h2{font-size:clamp(1.75rem,4vw,2.5rem)}
h3{font-size:1.5rem}
p{margin:0 0 1em;color:var(--clr-text)}
a{color:var(--clr-accent);text-decoration:none;transition:color var(--transition-fast)}
a:hover,a:focus{color:var(--clr-accent-dark);text-decoration:underline}

/*========================
  2. LAYOUT HELPERS
========================*/
.main-container{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  padding:0 1rem;
}
.section{padding:4rem 0}
.section-title{
  text-align:center;
  margin-bottom:2rem;
  text-shadow:1px 1px 3px rgba(0,0,0,.15);
}

/* Flex / Grid utilities */
.flex-center{display:flex;justify-content:center;align-items:center}
.is-two-thirds{flex:0 0 66.666%;max-width:66.666%}

/*========================
  3. HEADER & NAVIGATION
========================*/
.header{
  width:100%;
  position:fixed;
  top:0;left:0;
  z-index:9000;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  box-shadow:var(--shadow-sm);
  transition:background var(--transition-md);
}
.logo{
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:700;
  color:var(--clr-primary);
}
.logo span{color:var(--clr-accent)}
.header .main-container{display:flex;justify-content:space-between;align-items:center;height:70px}
.nav-desktop ul{list-style:none;padding:0;margin:0;display:flex;gap:1.25rem;}
.nav-desktop a{font-weight:500;color:var(--clr-text);position:relative}
.nav-desktop a::after{
  content:'';
  position:absolute;left:0;bottom:-4px;
  width:0;height:2px;
  background:var(--clr-accent);
  transition:width var(--transition-fast)
}
.nav-desktop a:hover::after{width:100%}

/* Burger */
.burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem}
.burger span{display:block;width:24px;height:3px;margin:4px;background:var(--clr-primary);transition:transform var(--transition-fast)}
/* Burger active state (to be toggled via JS) */
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile nav hidden by default */
@media(max-width:992px){
  .nav-desktop{display:none}
  .burger{display:block}
}

/*========================
  4. HERO SECTION
========================*/
.hero{
  color:var(--clr-white);
  min-height:70vh;
  display:flex;
  align-items:center;
  text-align:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  position:relative;
}
.hero-content{max-width:800px;margin-inline:auto}
.hero .btn-primary{margin-top:1.5rem}

/*========================
  5. PARALLAX
========================*/
.parallax{background-attachment:fixed}

/*========================
  6. BUTTONS
========================*/
.btn,
button,
input[type='submit']{
  display:inline-block;
  font-family:var(--font-heading);
  font-weight:600;
  padding:.75rem 1.5rem;
  border-radius:var(--radius-sm);
  border:2px solid transparent;
  cursor:pointer;
  transition:all var(--transition-fast);
  text-align:center;
}
.btn-primary{
  background:var(--clr-accent);
  color:var(--clr-white);
}
.btn-primary:hover,
.btn-primary:focus{background:var(--clr-accent-dark)}
.btn-secondary{
  background:transparent;
  color:var(--clr-accent);
  border-color:var(--clr-accent)
}
.btn-secondary:hover,
.btn-secondary:focus{
  background:var(--clr-accent);
  color:var(--clr-white);
}

/*========================
  7. CARDS
========================*/
.cards-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
}
.card{
  background:var(--clr-white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:transform var(--transition-fast),box-shadow var(--transition-fast);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.card-image{
  width:100%;
  height:200px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform var(--transition-fast)
}
.card:hover .card-image img{transform:scale(1.08)}
.card-content{padding:1.5rem}

/*========================
  8. STATS WIDGET
========================*/
.stats-grid{
  margin-top:2rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem;
}
.stat-widget{
  background:var(--clr-white);
  padding:1.25rem 2rem;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  text-align:center;
}
.stat-number{
  font-size:2rem;
  font-weight:700;
  color:var(--clr-accent);
}
.stat-label{color:var(--clr-text-muted)}

/*========================
  9. LOGO GALLERY (CLIENTELE)
========================*/
.logo-gallery{
  margin-top:2rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem;
}
.logo-gallery img{
  filter:grayscale(100%);
  transition:filter var(--transition-fast),transform var(--transition-fast)
}
.logo-gallery img:hover{filter:none;transform:scale(1.08)}

/*========================
 10. EVENTS TABLE
========================*/
.events-table{
  max-width:800px;
  margin-inline:auto;
  display:grid;
  gap:1.25rem;
}
.event-row{
  background:var(--clr-white);
  padding:1rem 1.5rem;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  display:grid;
  grid-template-columns:120px 1fr 120px;
  align-items:center;
  gap:1rem;
}
.event-date{font-weight:700;color:var(--clr-accent)}
.event-title{font-weight:600}
.event-location{color:var(--clr-text-muted);text-align:right}

/*========================
 11. CONTACT FORM
========================*/
form{
  max-width:700px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.form-row{display:flex;gap:1rem;flex-wrap:wrap}
input,textarea{
  width:100%;
  padding:.75rem 1rem;
  border:1px solid var(--clr-secondary-dark);
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  transition:border-color var(--transition-fast)
}
input:focus,textarea:focus{outline:none;border-color:var(--clr-accent)}
.form-success{
  margin-top:1rem;
  background:var(--clr-primary);
  color:var(--clr-white);
  padding:1rem;
  border-radius:var(--radius-sm);
}

/*========================
 12. FOOTER
========================*/
.footer{
  background:var(--clr-primary-dark);
  color:var(--clr-white);
  padding:2rem 0;
  font-size:.9375rem;
}
.footer-grid{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  justify-content:space-between;
  align-items:flex-start;
}
.footer a{color:var(--clr-secondary);font-weight:500;}
.footer a:hover{text-decoration:underline}
.footer-col p{margin-bottom:.5rem}

/*========================
 13. SOCIAL LINKS TEXT ICON STYLE
========================*/
.footer a::before{
  content:'◆';
  display:inline-block;
  margin-right:.3rem;
  color:var(--clr-accent);
  font-size:.6rem;
  line-height:1;
}

/*========================
 14. READ-MORE LINKS
========================*/
a.read-more{
  display:inline-block;
  font-weight:600;
  color:var(--clr-accent);
  position:relative;
  padding-right:1.2rem;
  transition:color var(--transition-fast)
}
a.read-more::after{
  content:'➜';
  position:absolute;
  right:0;top:0;
  transition:transform var(--transition-fast)
}
a.read-more:hover{color:var(--clr-accent-dark)}
a.read-more:hover::after{transform:translateX(4px)}

/*========================
 15. PARALLAX OVERLAY (for sections with text)
========================*/
.hero,
.parallax{
  position:relative;
}
.hero::before,
.parallax::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.55));
  z-index:0;
}
.hero > *,
.parallax > *{position:relative;z-index:1}

/*========================
 16. PAGE SPECIFICS
========================*/
/* Success page */
.page-success{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:var(--clr-secondary);
}
.page-success h1{color:var(--clr-accent)}

/* Privacy & Terms top offset */
.page-legal{padding-top:100px}

/*========================
 17. RESPONSIVE BREAKPOINTS
========================*/
@media(max-width:768px){
  .event-row{grid-template-columns:1fr}
  .event-location{text-align:left}
  .form-row>input{flex:1 1 100%}
}

/*========================
 18. ANIMATION UTILITIES
========================*/
.fade-in-up{
  opacity:0;
  transform:translateY(20px);
  transition:opacity var(--transition-md),transform var(--transition-md);
}
.fade-in-up.is-visible{opacity:1;transform:none}

/*========================
 19. GLAZMORPHISM CARD (optional utility)
========================*/
.glass{
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(10px) saturate(180%);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:var(--shadow-sm);
}

/*========================
 20. COOKIE POPUP BASIC STYLES
========================*/
#cookiePopup button{
  border-radius:var(--radius-sm);
  font-family:var(--font-heading);
}

/*========================
 21. IMAGE DEFAULTS
========================*/
img{max-width:100%;height:auto;display:block}

/*========================
  22. ACCESSIBILITY FOCUS
========================*/
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px dashed var(--clr-accent);
  outline-offset:2px;
}