/*
Theme Name: Luis Mira Locutor
Theme URI: https://luismiralavozenoff.es
Author: Luis Mira
Version: 1.0
Description: Tema personalizado para la web de Luis Mira Locutor
*/

body {
  margin:0;
  font-family:'Segoe UI',sans-serif;
  background:#0b0b0b;
  color:#f2f2f2;
}

header {
  background:#000;
  display:block;
  position:relative;
  z-index:1000;
}

header h1 { margin:0; font-size:1.4rem; letter-spacing:1px;}
header h1 a { color:#ffd966; text-decoration:none; }

nav {
  display:flex;
  gap:1rem;
}
nav a {
  color:#f2f2f2;
  text-decoration:none;
  font-weight:500;
  transition:color .2s;
}
nav a:hover { color:#ffd966; }

.menu-toggle {
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:32px;
  height:32px;
}
.menu-toggle span {
  display:block;
  width:24px;
  height:3px;
  margin:4px 0;
  background:#ffd966;
  border-radius:2px;
  transition:0.3s;
}

@media (max-width:768px){
  nav {
    position:absolute;
    top:100%;
    right:0;
    background:#000;
    flex-direction:column;
    width:100%;
    display:none;
    text-align:center;
    padding:1rem 0;
    border-top:1px solid #222;
  }
  nav.show { display:flex; }
  .menu-toggle { display:flex; }
}

main { padding:2rem; max-width:1100px; margin:auto; }
footer { background:#000; color:#999; text-align:center; font-size:0.9rem; padding:1.5rem; }
footer a { color:#ffd966; text-decoration:none; }
footer a:hover { text-decoration:underline; }
.btn { display:inline-block; background:#ffd966; color:#000; padding:0.7rem 1.2rem; text-decoration:none; border-radius:6px; font-weight:bold; transition:background .2s; }
.btn:hover { background:#ffeb99; }

/* Sección de servicios */
.servicios-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.5rem;
  max-width:1100px;
  margin:0 auto;
}
.servicio-card {
  position:relative;
  background:linear-gradient(160deg,#1f1f1f,#141414);
  border:1px solid #2a2a2a;
  border-radius:14px;
  padding:2.25rem 1.5rem 1.75rem;
  text-align:center;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.servicio-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,#ffd966,#fff3c4,#ffd966);
  transform:scaleX(0);
  transition:transform .3s ease;
}
.servicio-card:hover {
  transform:translateY(-6px);
  box-shadow:0 14px 32px rgba(255,217,102,0.18);
  border-color:#ffd966;
}
.servicio-card:hover::before { transform:scaleX(1); }
.servicio-icono {
  width:60px;
  height:60px;
  background:#ffd966;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.1rem;
  transition:transform .25s ease;
}
.servicio-card:hover .servicio-icono { transform:scale(1.08) rotate(-4deg); }
.servicio-titulo { color:#ffd966; margin:0.4rem 0; font-size:1.05rem; letter-spacing:.2px; }
.servicio-desc { color:#bbb; font-size:0.9rem; line-height:1.5; margin:0; }

/* Miniatura diferida de YouTube (carga el iframe solo al hacer clic) */
.yt-facade {
  position:relative;
  width:100%;
  height:180px;
  border-radius:6px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.yt-facade img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.yt-facade::after {
  content:'';
  width:56px;
  height:56px;
  background:rgba(0,0,0,0.6);
  border-radius:50%;
  position:absolute;
  transition:background .2s;
}
.yt-facade:hover::after { background:rgba(0,0,0,0.75); }
.yt-facade::before {
  content:'';
  position:absolute;
  width:0;
  height:0;
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #ffd966;
  z-index:1;
  margin-left:6px;
}