/* =========================================================
   Consult360  –  style.css
   Diseño: Neomorfismo + UI 3D  |  Colores: Triada
   Tipografía: Roboto (headings) / Lato (body)
   Dependencia base: Bulma 0.9.4
   ========================================================= */

/* ---------- VARIABLES DE TEMA ---------- */
:root{
  /* Colores Triada (primario: azul, secundario: naranja, terciario: verde) */
  --clr-primary:   #0077ff;
  --clr-primary-dark: #005bcc;
  --clr-secondary: #ff7700;
  --clr-secondary-dark:#cc5f00;
  --clr-tertiary: #22cc88;
  --clr-tertiary-dark:#1a9f6a;

  /* Grises y fondo */
  --clr-bg: #f2f5f8;
  --clr-bg-dark: #e0e3e7;
  --clr-text: #333333;
  --clr-text-light: #ffffff;

  /* Neumorfismo */
  --neu-light: rgba(255,255,255,0.7);
  --neu-dark: rgba(0,0,0,0.12);

  /* Sombra sutil para 3D UI */
  --shadow-neu: 8px 8px 16px var(--neu-dark),
                -8px -8px 16px var(--neu-light);
  --shadow-hover: 4px 4px 10px var(--neu-dark),
                  -4px -4px 10px var(--neu-light);

  /* Transiciones */
  --transition: all .3s ease;
}

/* ---------- RESET & BASE ---------- */
html{
  scroll-behavior:smooth;
}
body{
  font-family:'Lato', sans-serif;
  background:var(--clr-bg);
  color:var(--clr-text);
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Roboto', sans-serif;
  font-weight:700;
  color:#222;
  margin-bottom:.5em;
  text-align:center;
  text-shadow:1px 1px 3px rgba(0,0,0,0.2);
}
section{
  padding:3rem 0;
}
a{
  color:var(--clr-primary-dark);
  transition:var(--transition);
}
a:hover{
  color:var(--clr-primary);
  text-decoration:underline;
}
/* ---------- NAVBAR ---------- */
.navbar{
  background:var(--clr-bg);
  box-shadow:var(--shadow-neu);
}
.navbar-burger span{
  background:var(--clr-text);
}
.navbar-item.is-active,
.navbar-item:hover{
  background:var(--clr-secondary);
  color:var(--clr-text-light)!important;
}

/* ---------- BOTONES GLOBALES ---------- */
button,
input[type='submit'],
.btn{
  background:var(--clr-primary);
  border:none;
  color:var(--clr-text-light);
  padding:.75rem 1.5rem;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  box-shadow:var(--shadow-neu);
}
button:hover,
input[type='submit']:hover,
.btn:hover{
  background:var(--clr-primary-dark);
  box-shadow:var(--shadow-hover);
}
button:focus,
input[type='submit']:focus{
  outline:none;
}

/* ---------- HERO ---------- */
#hero{
  position:relative;
  color:#fff;
}
#hero .title,
#hero .subtitle{
  color:#fff;
}
#hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.6));
  z-index:0;
}
#hero .hero-body>*{
  position:relative;
  z-index:1;
}

/* ---------- SECCIONES GENERALES ---------- */
.has-background-light{
  background:var(--clr-bg-dark)!important;
}
.box{
  border-radius:18px;
  background:var(--clr-bg);
  box-shadow:var(--shadow-neu);
}
.box:hover{
  box-shadow:var(--shadow-hover);
}

/* ---------- NEUMORFIC CARDS ---------- */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border-radius:20px;
  background:var(--clr-bg);
  box-shadow:var(--shadow-neu);
  transition:var(--transition);
}
.card:hover{
  box-shadow:var(--shadow-hover);
  transform:translateY(-4px);
}
.card-image,
.image-container{
  width:100%;
  height:250px;
  overflow:hidden;
  border-top-left-radius:20px;
  border-top-right-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
}
.card-content{
  padding:1.5rem;
}

/* ---------- ACCORDION ---------- */
details.accordion{
  margin-top:1rem;
}
details.accordion summary{
  cursor:pointer;
  font-weight:600;
  color:var(--clr-secondary-dark);
  list-style:none;
  position:relative;
}
details.accordion summary::after{
  content:'+';
  position:absolute;
  right:0;
  font-weight:800;
}
details[open].accordion summary::after{
  content:'–';
}
details.accordion p{
  margin-top:.5rem;
}

/* ---------- LINKS 'Leer más' ---------- */
details.accordion summary{
  text-decoration:underline;
}
details.accordion summary:hover{
  color:var(--clr-secondary);
}

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

/* ---------- SOCIAL TEXT LINKS (FOOTER) ---------- */
.footer{
  padding:2.5rem 1.5rem;
}
.footer a{
  color:var(--clr-tertiary);
  margin-right:.75rem;
}
.footer a:hover{
  color:var(--clr-tertiary-dark);
  text-decoration:underline;
}

/* ---------- ICONOS (solo texto con pseudo) ---------- */
.social-link::before{
  content:'◆';
  color:var(--clr-secondary);
  margin-right:.3rem;
}

/* ---------- FORMULARIOS ---------- */
input,
textarea{
  background:var(--clr-bg);
  border:none;
  border-radius:12px;
  padding:1rem;
  box-shadow:inset 4px 4px 6px var(--neu-dark), inset -4px -4px 6px var(--neu-light);
  transition:var(--transition);
}
input:focus,
textarea:focus{
  box-shadow:inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
  outline:none;
}

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

/* ---------- PADDING PARA PRIVACY & TERMS ---------- */
.page-legal{
  padding-top:100px;
}

/* ---------- ANIMACIONES ---------- */
@keyframes fadeInUp{
  0%{opacity:0;transform:translateY(40px);}
  100%{opacity:1;transform:translateY(0);}
}
[data-animate]{
  opacity:0;
  transform:translateY(40px);
  transition:var(--transition);
}
[data-animate].is-visible{
  animation:fadeInUp .8s forwards;
}

/* ---------- MEDIA QUERIES ---------- */
@media(max-width:1023px){
  .navbar-menu{
    background:var(--clr-bg);
  }
}