/* =====================================================
   Archivo: /style.css
   Tema: Brutalismo + Curved-Grids  •  Paleta Bright
   ===================================================== */

/* ------------------ VARIABLES DE TEMA ------------------ */
:root{
  --primary      : #ff006e; /* rosa neón */
  --secondary    : #8338ec; /* violeta brillante */
  --accent       : #3a86ff; /* azul eléctrico */
  --success      : #4ade80; /* verde menta */
  --warning      : #ffbe0b; /* amarillo vibrante */
  --text-dark    : #222222;
  --text-light   : #ffffff;
  --bg-light     : #fafafa;
  --bg-dark      : #181818;
  --radius       : .75rem;
  --transition   : .3s ease;
  --card-h       : 220px;  /* altura fija para contenedores de imagen */
}

/* ------------------ TIPOGRAFÍA ------------------ */
body{
  font-family: 'Nunito', sans-serif;
  background: var(--bg-light);
  color: var(--text-dark);
  line-height: 1.6;
}
h1,h2,h3,h4,h5,h6{
  font-family: 'Oswald', sans-serif;
  letter-spacing: .5px;
  text-shadow:1px 1px 3px rgba(0,0,0,.15);
  color: var(--text-dark);
}

/* ------------------ UTILIDADES GLOBALES ------------------ */
.section{
  padding-block: 4rem;
}
.curved-top{
  position: relative;
  z-index:1;
}
.curved-top::before{
  content:"";
  position:absolute;
  top:-40px;
  left:0;
  width:100%;
  height:40px;
  background:inherit;
  border-top-left-radius:100% 40px;
  border-top-right-radius:100% 40px;
  z-index:-1;
}
.btn,
button,
input[type='submit']{
  display:inline-block;
  padding:.75rem 2.25rem;
  font-weight:700;
  border:none;
  border-radius:9999px;
  background:var(--primary);
  color:var(--text-light);
  transition:transform var(--transition), box-shadow var(--transition);
  box-shadow:4px 4px 0 var(--text-dark);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--text-dark);
}
a{
  transition:color var(--transition);
}
a:hover{
  color:var(--primary);
}

/* ------------------ HERO ------------------ */
#hero{
  color:var(--text-light);
  text-align:center;
}
#hero h1{color:var(--text-light);}
#hero p {max-width:45rem;margin-inline:auto;}

/* ------------------ TARJETAS / CARD ------------------ */
.card,
.testimonial,
.product-card,
.item,
.team-member{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border-radius:var(--radius);
  overflow:hidden;
  background:#ffffff;
  box-shadow:6px 6px 0 var(--text-dark);
  transition:transform var(--transition), box-shadow var(--transition);
}
.card:hover{
  transform:translate(-4px,-4px) rotate(-1deg);
  box-shadow:10px 10px 0 var(--text-dark);
}

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

/* ------------------ CURVED GRID ANIMADO ------------------ */
@supports (grid-template-rows: masonry){
  .masonry-grid{
    display:grid;
    gap:1rem;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    grid-template-rows:masonry;
  }
}

/* ------------------ ANIMACIONES DE ENTRADA ------------------ */
[data-sr]{opacity:0; transform:translateY(30px);}
html.sr .sr {opacity:1; transform:none; transition:opacity .8s ease, transform .8s ease;}

/* ------------------ LINKS “Leer más” ------------------ */
.link-more{
  position:relative;
  font-weight:600;
  color:var(--accent);
}
.link-more::after{
  content:'→';
  margin-left:.25rem;
  transition:transform var(--transition);
}
.link-more:hover::after{transform:translateX(4px);}

/* ------------------ NAVBAR ------------------ */
header{
  backdrop-filter:blur(6px);
}
#mobileMenu a{
  padding:.5rem 0;
  border-bottom:1px dashed var(--text-dark);
}

/* ------------------ FOOTER ------------------ */
footer{
  background:var(--bg-dark);
  color:var(--text-light);
}
footer a{
  color:var(--warning);
}
footer a:hover{
  color:var(--success);
  text-decoration:underline solid 2px;
}

/* ------------------ SUCESS PAGE ------------------ */
.success-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:var(--text-light);
}

/* ------------------ PÁGINAS DE TEXTO LARGO ------------------ */
.legal-page{
  padding-top:100px;
}

/* ------------------ COOKIES POPUP ------------------ */
#cookiePopup{
  font-size:.875rem;
}
#acceptCookie{
  border:none;
  cursor:pointer;
}

/* ------------------ PARALLAX HERO (opcional ligero) ------------------ */
@media (prefers-reduced-motion:no-preference){
  #hero{
    background-attachment:fixed;
  }
}

/* ------------------ GLASMORFISMO UTIL ------------------ */
.glassy{
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3);
  border-radius:var(--radius);
}

/* ------------------ MICROANIMACIONES ------------------ */
@keyframes bounceX{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(6px);}
}
.animate-bounceX{
  animation:bounceX 1s infinite;
}

/* ------------------ RESPONSIVE AJUSTES ------------------ */
@media (max-width:768px){
  h1{font-size:2.5rem;}
  .card{box-shadow:4px 4px 0 var(--text-dark);}
}

/* ------------------ BOTONES SECUNDARIOS ------------------ */
.btn-secondary{
  background:var(--accent);
}
.btn-secondary:hover{
  background:var(--secondary);
  color:var(--text-light);
}

/* ------------------ SOCIAL TEXT ICON EFFECT ------------------ */
.social-link{
  position:relative;
}
.social-link::after{
  content:'';
  position:absolute;
  height:2px;
  width:0;
  left:0;
  bottom:-2px;
  background:var(--accent);
  transition:width var(--transition);
}
.social-link:hover::after{width:100%;}

/* ------------------ UTILITY CLASSES ------------------ */
.text-shadow{
  text-shadow:1px 1px 3px rgba(0,0,0,.4);
}
.flex-center{
  display:flex;
  align-items:center;
  justify-content:center;
}