/* ===================================================================
  GLOBAL THEME VARIABLES  |  Creative + Adaptive Typography
=================================================================== */
:root{
  /* Palette – “Complementaria” */
  --clr-primary:#004e64;
  --clr-primary-dark:#00374a;
  --clr-accent:#ff9f1c;
  --clr-accent-dark:#cc7f15;
  --clr-bg-light:#fafafa;
  --clr-bg-dark:#14213d;
  --clr-grey:#e5e5e5;
  --clr-text:#222222;
  --clr-white:#ffffff;

  /* Typography Scale – clamp for adaptive sizes */
  --fs-h1:clamp(2.5rem,5vw,4rem);
  --fs-h2:clamp(2rem,4vw,3rem);
  --fs-h3:clamp(1.5rem,3vw,2.2rem);
  --fs-base:clamp(1rem,2.3vw,1.125rem);

  /* Transition & Shadow */
  --transition:all .3s ease-in-out;
  --shadow-lg:0 10px 35px rgba(0,0,0,.2);

  /* Glassmorphism */
  --glass-blur:blur(18px);
  --glass-bg:rgba(255,255,255,0.15);
}

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

html{scroll-behavior:smooth}

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

/* Headings */
h1,h2,h3,h4,h5,h6{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  line-height:1.2;
  color:var(--clr-text);
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}

/* Links */
a{color:var(--clr-primary);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--clr-accent);text-decoration:underline}

/* “Leer más” link emphasis */
.read-more{
  font-weight:700;
  color:var(--clr-accent);
  position:relative;
}
.read-more::after{
  content:'';
  position:absolute;
  left:0;bottom:-2px;
  width:0;height:2px;
  background:var(--clr-accent);
  transition:var(--transition);
}
.read-more:hover::after{width:100%}

/* ------------------------------------------------------------------
  BUTTONS  – GLOBAL
------------------------------------------------------------------- */
.btn,
button,
input[type='submit']{
  display:inline-block;
  background:var(--clr-accent);
  color:var(--clr-bg-dark);
  padding:.75rem 2rem;
  border:none;
  border-radius:9999px;
  cursor:pointer;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  letter-spacing:.5px;
  transition:var(--transition);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
  background:var(--clr-accent-dark);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}

/* Micro-interaction: button “pressed” */
.btn:active,
button:active,
input[type='submit']:active{
  transform:scale(.97);
}

/* ------------------------------------------------------------------
  HERO
------------------------------------------------------------------- */
#hero{
  position:relative;
  color:var(--clr-white);
  text-align:center;
}
#hero .container{position:relative;z-index:2}
#hero::before{
  /* Dark overlay for readability */
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
  z-index:1;
}
#hero [class*="bg-cover"]{background-size:cover;background-repeat:no-repeat}

/* ------------------------------------------------------------------
  NAVIGATION
------------------------------------------------------------------- */
header{
  backdrop-filter:var(--glass-blur);
  background:var(--glass-bg);
  border-bottom:1px solid rgba(255,255,255,.2);
}

/* Burger animation */
#burger span{transition:var(--transition)}
#burger:hover span:nth-child(2){transform:translateX(3px)}

/* ------------------------------------------------------------------
  CARD & IMAGE HANDLING
------------------------------------------------------------------- */
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--clr-white);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 4px 15px rgba(0,0,0,.08);
  transition:var(--transition);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

.card-image,
.image-container{width:100%;height:260px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.card-image img,
.image-container img{
  width:100%;height:100%;
  object-fit:cover;
  margin:0 auto;
}

/* ------------------------------------------------------------------
  ANIMATIONS  – “Drawn / Sketch”
------------------------------------------------------------------- */
/* keyframe to mimic hand-drawn underline */
@keyframes sketch{
  0%{stroke-dashoffset:400}
  100%{stroke-dashoffset:0}
}

/* Titles with underline effect */
.title-underline{
  position:relative;display:inline-block;
}
.title-underline::after{
  content:'';
  position:absolute;left:0;bottom:-8px;
  width:100%;height:4px;
  background:var(--clr-accent);
  animation:sketch 1.6s ease forwards;
  stroke-dasharray:400;stroke-dashoffset:400;
}

/* Progress bar animation */
@keyframes fillBar{
  from{width:0}
  to{width:100%}
}
.animation-progress{animation:fillBar 2s forwards}

/* ------------------------------------------------------------------
  SECTION HELPERS
------------------------------------------------------------------- */
section{padding:4rem 0}
.bg-primary{background:var(--clr-primary);color:var(--clr-white)}
.bg-dark{background:var(--clr-bg-dark);color:var(--clr-white)}
.bg-light{background:var(--clr-bg-light)}

.gradient-bg{
  background:linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-accent) 100%);
  color:var(--clr-white);
}

/* Parallax */
.parallax{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
}

/* Glassmorphism container */
.glass{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
}

/* ------------------------------------------------------------------
  TABLE (Events Calendar)
------------------------------------------------------------------- */
table{width:100%;border-collapse:collapse}
th,td{padding:.75rem 1rem}
thead th{background:var(--clr-primary);color:var(--clr-white)}
tbody tr:nth-child(even){background:var(--clr-grey)}

/* ------------------------------------------------------------------
  FAQ details arrows
------------------------------------------------------------------- */
details summary{
  cursor:pointer;
  position:relative;
  padding-right:2rem;
}
details summary::marker{display:none}
details summary::after{
  content:'+';
  position:absolute;right:0;top:0;
  font-weight:bold;
  transition:var(--transition);
}
details[open] summary::after{content:'–';}

/* ------------------------------------------------------------------
  SUCCESS PAGE
------------------------------------------------------------------- */
body.success{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* ------------------------------------------------------------------
  PAGES PADDING (Privacy & Terms)
------------------------------------------------------------------- */
body.legal-page main{padding-top:100px}

/* ------------------------------------------------------------------
  FOOTER
------------------------------------------------------------------- */
footer{
  background:var(--clr-bg-dark);
  color:var(--clr-white);
  font-size:.875rem;
}
footer a{
  color:var(--clr-white);
  font-weight:600;
}
footer a:hover{color:var(--clr-accent)}

/* Social links underline */
footer ul li a{position:relative}
footer ul li a::after{
  content:'';
  position:absolute;left:0;bottom:-2px;
  width:0;height:1px;
  background:var(--clr-accent);
  transition:var(--transition);
}
footer ul li a:hover::after{width:100%}

/* ------------------------------------------------------------------
  COOKIE POPUP
------------------------------------------------------------------- */
#cookiePopup{
  font-size:.9rem;
  line-height:1.4;
}
#acceptCookie{
  display:inline-block;
  margin-left:.5rem;
}

/* ------------------------------------------------------------------
  RESPONSIVE UTILITIES
------------------------------------------------------------------- */
@media(max-width:640px){
  header nav a{font-size:.9rem}
  .card-image,.image-container{height:200px}
}