/* Reset básico */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Roboto', sans-serif; color:#fff; background:#111; scroll-behavior: smooth; }

/* Encabezado / Navbar */
header {
  position: fixed;
  top:0; left:0; width:100%;
  background: rgba(0,0,0,0.8);
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 2rem; z-index:1000;
}
header h1 { font-family: 'Playfair Display', serif; font-size:1.8rem; color:#fff; cursor:pointer; }
nav a {
  color:#fff; text-decoration:none; margin-left:1rem;
  font-weight:bold; transition:0.3s;
}
nav a:hover { color:#fff; opacity:0.7; }

a{
  color: #a8a8ff;
}

.hero {
  height:100vh;
  display:flex; 
  flex-direction:column; 
  justify-content:center; 
  align-items:center;
  text-align:center;
  /* Fondo con tu foto vertical */
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
              url('images/img1.png') center/cover no-repeat;
  background-position: center top; /* Centra la parte superior de la foto */
}

.hero h2 { 
  font-family: 'Playfair Display', serif; 
  font-size:3rem; 
  color:#fff; 
  margin-bottom:1rem; 
  animation: fadeIn 2s ease-in; 
}

.hero p { 
  font-size:1.2rem; 
  color:#eee; 
  margin-bottom:2rem; 
  max-width:600px; 
  animation: fadeIn 3s ease-in; 
}

.hero a { 
  padding:0.8rem 2rem; 
  background:#fff; 
  color:#111; 
  font-weight:bold; 
  border-radius:30px; 
  text-decoration:none; 
  transition:0.3s; 
}

.hero a:hover { 
  background:#e6e6e6; 
}

@keyframes fadeIn {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}

/* Secciones */
section { padding:6rem 2rem; }
.section-title { text-align:center; font-family: 'Playfair Display', serif; font-size:2.5rem; color:#fff; margin-bottom:3rem; }

/* Sobre mí */
#about { display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; align-items:center; }
#about img { width:300px; border-radius:15px; box-shadow:0 0 20px #fff; }
#about .about-text { max-width:600px; font-size:1.1rem; line-height:1.6; color:#ddd; }

/* Tarjeta moderna */
.service-card.modern {
  background: linear-gradient(135deg, #1a1a1a, #222);
  border-radius: 20px;
  padding: 3rem 2rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.service-card.modern:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.7);
}

/* Título */
.service-card.modern h3 {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 1rem;
}

/* Lista de servicios */
.services-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 2rem;
  gap: 1.5rem;
}

/* Cada servicio */
.service-item {
  flex: 1 1 45%;
  background: #111;
  border-radius: 15px;
  padding: 1.5rem;
  transition: transform 0.3s, background 0.3s;
}

.service-item h4 {
  color: #fff;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.service-item p {
  color: #ccc;
  font-size: 0.95rem;
}

/* Hover efecto */
.service-item:hover {
  background: #222;
  transform: translateY(-5px);
}

/* Responsive */
@media (max-width:768px) {
  .services-list {
    flex-direction: column;
    gap: 1rem;
  }
  .service-item {
    flex: 1 1 100%;
  }
}



/* Blog */
#blog { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; }
.blog-post { background:#222; border-radius:15px; overflow:hidden; transition:0.3s; cursor:pointer; }
.blog-post img { width:100%; object-fit:cover; }
.blog-post .content { padding:1.5rem; }
.blog-post h4 { color:#fff; margin-bottom:0.5rem; }
.blog-post p { color:#ccc; font-size:0.95rem; }

/* Contacto */
#contact .contact-info {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:3rem;
  margin-top:2rem;
}

#contact .contact-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  background:#222;
  padding:2rem;
  border-radius:15px;
  box-shadow:0 0 20px #000;
  transition:0.3s;
  cursor:default;
}

#contact .contact-item:hover {
  transform:translateY(-5px);
  box-shadow:0 0 30px #fff;
}

#contact .contact-item img {
  width:50px;
  height:50px;
  margin-bottom:1rem;
}

#contact .contact-item p {
  color:#fff;
  font-size:1.1rem;
}


/* Footer */
footer { text-align:center; padding:2rem; background:#000; color:#777; }
.hero-logo {
  width:150px;
  margin-bottom:2rem;
}

header .logo-container {
  display:flex;
  align-items:center;
  cursor:pointer;
}

header .logo-container h1 {
  font-family: 'Playfair Display', serif;
  font-size:1.8rem;
  color:#fff;
  margin-left:1rem;
}

/* Logo */
.header-logo {
  width:60px; /* tamaño por defecto */
  height:auto;
}

/* Responsive */
@media (max-width:768px){
  header .logo-container h1 {
    font-size:1.2rem;
  }
  .header-logo {
    width:40px; /* más pequeño en móviles */
  }
}

@media (max-width:480px){
  header .logo-container h1 {
    display:none; /* ocultar texto en móviles muy pequeños */
  }
  .header-logo {
    width:35px; /* solo logo visible */
  }
}