/* =========================================================
   RetroBiz – style.css
   Diseño: Retro + Biormorfismo
   Tipografía: Inter & IBM Plex Sans
   Framework base: Bootstrap 5
   ========================================================= */

/* ---------- Variables de Tema ---------- */
:root{
  /* Neutros */
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-elevated: #eaeaea;
  --color-border: #d1d1d1;

  /* Paleta Retro-Neutral con acentos vivos */
  --color-primary: #0d6efd;          /* Azul eléctrico */
  --color-primary-dark: #0b5ed7;
  --color-secondary: #ffb703;        /* Amarillo retro */
  --color-secondary-dark: #e6a204;
  --color-accent: #ef476f;           /* Fucsia */
  --color-accent-dark: #d93f63;

  /* Tipografía */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;

  /* Sombras & Vidrio */
  --shadow-soft: 0 8px 20px rgba(0,0,0,0.08);
  --glass-bg: rgba(255,255,255,0.35);
  --glass-border: rgba(255,255,255,0.25);
}

/* ---------- Reset Específico ---------- */
html{
  scroll-behavior:smooth;
}
body{
  font-family:var(--font-body);
  background:var(--color-bg);
  color:#333333;
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  color:#222222;
  font-weight:700;
  text-shadow:1px 1px 3px rgba(0,0,0,0.15);
}
section{
  padding:60px 0;
}
img{
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* ---------- Navegación ---------- */
.navbar{
  backdrop-filter:blur(8px);
  background:var(--glass-bg);
  border-bottom:1px solid var(--glass-border);
}
.navbar-brand{
  font-weight:700;
  letter-spacing:1px;
}
.nav-link{
  position:relative;
  font-weight:600;
  transition:color .3s;
}
.nav-link::after{
  content:'';
  position:absolute;
  left:0;
  bottom:2px;
  width:0;
  height:2px;
  background:var(--color-accent);
  transition:width .3s;
}
.nav-link:hover,
.nav-link:focus{
  color:var(--color-accent);
}
.nav-link:hover::after,
.nav-link:focus::after{
  width:100%;
}

/* ---------- Hero ---------- */
#hero{
  position:relative;
  color:#ffffff;
  text-align:center;
}
#hero:before{
  /* paralaje ligero */
  content:'';
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  background:linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55));
  z-index:0;
}
#hero .container{
  position:relative;
  z-index:1;
}
#hero .btn{
  background:transparent;
  border:2px solid #ffffff;
}
#hero .btn:hover{
  background:#ffffff;
  color:#000000;
}

/* ---------- Botones Globales ---------- */
.btn,
button,
input[type="submit"]{
  font-family:var(--font-heading);
  font-weight:600;
  border-radius:50px;
  transition:all .35s ease;
}
.btn-primary{
  background:var(--color-primary);
  border-color:var(--color-primary);
}
.btn-primary:hover{
  background:var(--color-primary-dark);
  border-color:var(--color-primary-dark);
}
.btn-outline-light:hover{
  transform:translateY(-2px);
  box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

/* ---------- Tarjetas (Cards) ---------- */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--color-surface);
  border:none;
  border-radius:20px;
  box-shadow:var(--shadow-soft);
  transition:transform .35s ease, box-shadow .35s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 25px rgba(0,0,0,0.1);
}
.card-image{
  width:100%;
  height:250px;                /* altura fija */
  overflow:hidden;
  border-top-left-radius:20px;
  border-top-right-radius:20px;
}
.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.card-content{
  padding:25px;
}

/* ---------- Grids & Utilidades ---------- */
.grid-2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
}
.is-two-thirds{
  max-width:66.666%;
}
@media (max-width:992px){
  .is-two-thirds{
    max-width:100%;
  }
}

/* ---------- Ef. Texto “Leer más” ---------- */
.read-more,
a.link-primary{
  color:var(--color-primary);
  font-weight:600;
  position:relative;
  text-decoration:none;
  padding-bottom:2px;
}
.read-more::after,
a.link-primary::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:var(--color-primary);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s;
}
.read-more:hover::after,
a.link-primary:hover::after{
  transform:scaleX(1);
}

/* ---------- Sección Historia & Texto ---------- */
#history p{
  font-size:1.05rem;
}

/* ---------- Eventos, News: tarjetas horizontales ---------- */
.card.flex-row{
  flex-direction:row;
  text-align:left;
}
.card.flex-row .card-image{
  width:40%;
  height:100%;
  border-radius:20px 0 0 20px;
}
.card.flex-row .card-content{
  width:60%;
}

/* ---------- Biomorfismo / Glass ---------- */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);
  border-radius:30px;
}

/* ---------- Animaciones “Reto-dibujadas” ---------- */
@keyframes scribble{
  0%{stroke-dashoffset:80;}
  100%{stroke-dashoffset:0;}
}
.hand-drawn{
  stroke:#000;
  stroke-width:2;
  stroke-dasharray:80;
  animation:scribble 2s ease forwards;
}

/* Fade-in on scroll (para data-motion="onScroll") */
.fade-in{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
}
.fade-in.visible{
  opacity:1;
  transform:none;
}

/* ---------- Footer ---------- */
footer{
  background:#111111;
  color:#ffffff;
  font-size:.9rem;
}
footer a{
  color:var(--color-secondary);
  transition:color .3s;
}
footer a:hover{
  color:var(--color-secondary-dark);
  text-decoration:underline;
}

/* Texto enlaces sociales */
footer .social-link{
  font-weight:600;
}

/* ---------- Formularios ---------- */
form .form-control{
  border-radius:12px;
  border:1px solid var(--color-border);
  transition:box-shadow .3s,border .3s;
}
form .form-control:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 0.2rem rgba(13,110,253,0.25);
}

/* ---------- Éxito (success.html) ---------- */
.success-wrapper{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:var(--color-bg);
  text-align:center;
}
.success-wrapper h1{
  color:var(--color-primary);
}

/* ---------- Páginas Legales ---------- */
.legal-page{
  padding-top:100px;
}

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

/* ---------- Utilidades extra ---------- */
.shadow-hover:hover{
  box-shadow:0 12px 28px rgba(0,0,0,0.15);
}
.rounded-xl{
  border-radius:30px!important;
}
.bg-gradient-accent{
  background:linear-gradient(135deg,var(--color-secondary),var(--color-accent));
}
.text-accent{
  color:var(--color-accent)!important;
}