* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 18px;
  font-display: swap;
  line-height: 1.6;
  color: #1a1a1a;
  margin: 0;
  display: block;
  height: auto;
  min-height: auto;
  overflow-x: hidden;
}
/* 3. Los títulos: El toque de "Mago" (Serif) */
h1, h2, h3, h4, h5 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: #111;
  text-align: center;
}
h1 {
  font-size: 3.5rem;
  color:#fff;
  line-height: 1.2em;
  min-height: 1.2em;
  padding: 2rem 0;
  margin: 0;
}

h2 {
  font-size: 3rem;
  min-height: 1.2em;
  line-height: 1.2em;
  padding: 1.5rem 0;
  margin: 0;
}
.titulo-galeria {
  padding: 1rem;
}
h3{font-size:2.5rem;padding: 1rem 0;}

h4{font-size:1.8rem;}
h5{font-size:1.4rem;text-transform:uppercase;}
p {
  color: #000;
  font-weight: 400;
}
.blanco {color:#fff}
.center {text-align:center}
.left {text-align:left}
.pequeño {font-size: 14px;}
.oscura {
  filter: brightness(0.5);
  transition: filter 0.3s ease;
}
.frase{width:100%;text-align:center;margin:20px 0}
.frase p {
  text-align: center;
  font-style: italic;
  color: #333;
  margin: 0;
}
.frase p::before,.frase p::after{content:"❧";color:#333;margin:0 10px;font-family:inherit}
.whatsapp-button{position:fixed;bottom:20px;right:20px;background-color:#39B54A;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,0.1);width:60px;height:60px;display:flex;justify-content:center;align-items:center;z-index:1000;transition:transform 0.3s;overflow: hidden;}
.whatsapp-button:hover{transform:scale(1.1)}
.whatsapp-button img{width:35px;height:35px;aspect-ratio: 1 / 1;
    border: 2px solid #ffffff; /* Borde blanco */
    border-radius: 50%;        /* Lo hace circular si la imagen es cuadrada */
    box-sizing: border-box;    /* Asegura que el borde no aumente el tamaño total */
    object-fit: contain;}
.logo-button{position:fixed;bottom:20px;left:20px;background-color:#242424;border-radius:50%;width:60px;height:60px;display:flex;justify-content:center;align-items:center;z-index:1000;transition:transform 0.3s;overflow:hidden;opacity: 0.8;transition: opacity 0.3s, transform 0.3s;}
.logo-button:hover {
  transform: scale(1.1);
  opacity: 1;
}
.logo-button img {
  display: block;
  width: 100%;
  height: auto;
}

.intro-content p:first-child,.intro-content p:first-of-type{margin-top:1em}
a {
    color: #242424;
    font-size: 100%;
    text-decoration: none; /* Simplificamos: unificamos link, visited y active aquí */
}

/* 2. Tu transición original (mantenemos tus prefijos) */
a:hover, a:focus {
    color: rgba(153,0,0,1);
    text-decoration: none;
    -moz-transition: background-color, color, .3s;
    -o-transition: background-color, color, .3s;
    -webkit-transition: background-color, color, .3s;
    transition: background-color, color, .3s;
}

/* 3. EFECTO PARA IMÁGENES CON LINK (Lo que has pedido) */
a img {

    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    display: block;
}

a:hover img {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
}
.botoncitos{text-align:center;margin-top:5%;margin-bottom:5%}
.btn{border:thin solid rgba(0,0,0,.75);border-radius:5px;color:#242424;font-size:12px;font-weight:400;letter-spacing:1px;display:inline-block;text-transform:uppercase;padding:1.5% 3%;margin-top:0;vertical-align:middle;background-color:#fff;text-align:center;box-shadow:5px 5px 10px rgba(0,0,0,.5);min-width:210px}
a.btn-1{background-color:rgba(153,0,0,1);border:thin solid #B60306;color:#fff}
a.btn-2{background-color:#242424;color:#fff}
a.btn-2:hover{background-color:#FA0409;}
.rectangulo {margin: 20px;}
.rectangulo .btn {margin: 10px; min-height: 40px;}
.image-display .btn.prev, .image-display .btn.next{min-width:auto;width:40px;height:40px;padding:0;font-size:20px;text-transform:none}
.btn:hover,.btn:focus{background-color:#242424;color:#fff}
#text{position:absolute;width:90%;left:17%}
#apDiv1{position:absolute;width:100%;height:100%;z-index:6;background-color:#093}
td,th{color:#444}
ul,ol{margin:0;padding:0}
ul li{list-style:none}
.intro-content li{position:relative;margin-bottom:12px}
.intro-content li p{line-height:1.3;margin:0}
.intro-content ul{margin-top:1em}
.navigation.open{display: flex;flex-direction: row;opacity:.9;visibility:visible;-moz-transition:opacity .5s;-o-transition:opacity .5s;-webkit-transition:opacity .5s;transition:opacity .5s;}
.navigation li{display:inline-block;padding-top:5px;padding-bottom:20px}
.navigation a{color:#000;font-size:14px;font-weight:300;letter-spacing:2px;margin-left:40px;}
.navigation a:hover,.navigation a.active{color:#900}
#header{position:fixed;top: 0;width:100%;z-index:999;height:60px;background-color: rgba(255, 255, 255, 0.5);text-align:center;}
.header-content{margin:0 auto;max-width:1170px;width:90%;}
#header.fixed{background-color:rgba(255,255,255,.9);}
#header.fixed .nav-toggle{top:18px}
.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    position: fixed;
    right: 5%;
    top: 32px;
    z-index: 9999;
    cursor: pointer;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.3s ease;
	outline: none;
    -webkit-tap-highlight-color: transparent;
}
.nav-toggle:focus, 
.nav-toggle:active {
    outline: none;
}
.nav-toggle:before,
.nav-toggle:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #e84545;
    transition: transform 0.3s ease;
    backface-visibility: hidden;
}

.nav-toggle:after {
    transform: scale(0);
}
.nav-toggle span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 3px;
    background-color: #fff;
    z-index: 10;
    transform: translate(-50%, -50%);
    transition: background-color 0.3s;
}
.nav-toggle span:before,
.nav-toggle span:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: transform 0.3s ease;
}

.nav-toggle span:before { transform: translateY(-6px); }
.nav-toggle span:after  { transform: translateY(6px); }
.nav-toggle.close-nav:before { transform: scale(0); }
.nav-toggle.close-nav:after  { transform: scale(1); }
.nav-toggle.close-nav span {
    background-color: transparent;
}

.nav-toggle.close-nav span:before {
    transform: translateY(0) rotate(45deg);
}

.nav-toggle.close-nav span:after {
    transform: translateY(0) rotate(-45deg);
}
#portada{
	width: 100%;
	height: 100svh;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	align-items: center;
}
  #logoportada {
  width:80%;
  min-height: 50svh;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding-right: 5%;
  padding-left: 5%;
}

#logoportada img {
  aspect-ratio: 1 / 1;
  width: 150px;
  height: auto;
  contain-intrinsic-size: 150px 150px;
  border-radius:50%;
  box-shadow:0 0 20px rgba(250,250,250,0.7);
  overflow:hidden;
  opacity: 0.8;
  transition: opacity 0.3s, transform 0.3s;
}
.section.introduction {
  min-height: 100svh;}
.fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  animation: fadeInFoto 0.2s ease-in-out forwards;
  animation-delay: 0.2s;
}
@keyframes fadeInFoto {
    from { opacity: 0; }
    to { opacity: 1; }
}
#botonportada{width:90%;left:5%;position:absolute;top:0}
#ico{width:20%}
.img-responsiva {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  max-width: 100%;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  object-fit: cover;
}
.seccion-mago {
  background-color: #e0e0e0; 
  padding: 40px 5%;
  }
.seccion-mago p {
	text-align: center;
}

  .botonesgral { 
  padding-top: 40px;
  padding-bottom: 40px;
  }
.estrellas {
  color: #fbbc04; /* El amarillo exacto de Google */
  font-size: 2.0rem;
  margin-bottom: 5px;
  letter-spacing: 2px; /* Separa un poco las estrellas */
  text-align: center;
}
.contenedor-grid {
  display: grid;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  grid-template-columns: 1fr;
}
.card-resena {
  background: #ffffff;
  border: 1px solid #dadce0; /* Borde gris muy fino */
  border-radius: 16px;       /* Esquinas redondeadas estilo moderno de Google */
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  /* Sombra ligera y elegante */
  box-shadow: 0 1px 3px rgba(60,64,67, 0.3), 0 4px 8px 3px rgba(60,64,67, 0.15);
}
.card-resena:hover {
  box-shadow: 0 4px 12px 0 rgba(60,64,67, 0.3);
  transform: none;
}
.contenedor-img {
  width: 100%;
  line-height: 0;
}
.img-resena {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 600 / 400;
}
.pie-card {
  padding: 16px;
  text-align: left;
  font-size: 0.95rem;
  color: #70757a;
  background-color: #ffffff;
  border-top: none; 
}
.pie-card::before {
  content: "Google Review";
  display: block;
  color: #1a73e8;
  font-weight: bold;
  font-size: 0.8rem;
  margin-bottom: 4px;
}
.maps {
  text-align: center;
  margin-top: 5vw;
}
.intro-content{color:#000;text-align:justify}
.intro-content li{line-height:30px;letter-spacing:1px;margin-bottom:5px}
.image-display{position:relative;width:100%;max-width:500px;aspect-ratio: 1 / 1;overflow:hidden;margin-bottom:15px;display:flex;justify-content:center;align-items:center;overflow: hidden;background-color: #f0f0f0;}
.image-display img{width:100%;height:100%;object-fit:contain;transition:opacity .5s ease,transform 1s ease;  border-radius:16px;overflow:hidden;object-fit:cover;}
.prev{left:10px}
.next{right:10px}
.scroll-wrapper{position:relative;width:95%;height:100%;display:flex;justify-content:center;align-items:center;max-width:700px}
.scroll-container{display:flex;overflow-x:auto;scrollbar-width:thin;scrollbar-color:gray lightgray;align-items:center;width:80%;white-space:nowrap;scroll-behavior:smooth;padding-top:10px}
.scroll-container img{width:100px;height:100px;margin:0 5px;cursor:pointer;object-fit:cover;border:2px solid transparent;transition:border .3s ease}
.scroll-container img.active{border-color:#900}
.scroll-container::-webkit-scrollbar{height:10px}
.scroll-container::-webkit-scrollbar-thumb{background-color:gray;border-radius:10px}
.scroll-nav{position:absolute;top:50%;transform:translateY(-50%);background-color:rgba(153,0,0,1);color:#fff;border:none;padding:10px;cursor:pointer;z-index:10}
.scroll-prev{left:0;border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,.5)}
.scroll-next{right:0;border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,.5)}
#thumbnailContainerWrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;max-width:700px}
#thumbnailContainer{display:flex;overflow-x:auto;white-space:nowrap;scroll-behavior:smooth;width:85%;height:100%;padding:10px}
.thumbnail{flex:0 0 auto;width:25%;height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;margin:0 1%;cursor:pointer}
.navButton{background-color:rgba(153,0,0,1);color:#fff;border:none;padding:10px;cursor:pointer;user-select:none;border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,.5);z-index:10}
.footer{width:100%;min-height:auto;padding:2rem;display:flex;flex-direction:column;justify-content:center;background-color:#242424}
.footer-share {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}
.footer a{color:#fff}
.footer a:hover{color:rgba(153,0,0,1)}
#sobremi{background-color:#fff;}
#sobremi .intro-content{padding-bottom:0;background-image:none}
#testimonios .container{margin-top:0;padding-top:0;margin-bottom:5%;padding:20px 0;}
#cabecera{background-color:#242424;padding:40px 0;}
#faq{background-color:#242424;}
#works{box-sizing:border-box;font-family:Arial,sans-serif;display:flex;justify-content:center;align-items:center;background-color:#fff;margin-top:10%;margin-bottom:10%;min-height:auto}
#works .btn{position:absolute;top:50%;transform:translateY(-50%);background-color:rgba(0,0,0,.5);color:#fff;border:none;padding:10px;cursor:pointer;z-index:10}
.gallery-container{width:auto;max-width:1200px;margin:4rem auto 0;text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;padding-left:15px;padding-right:15px}
.pair{display:flex;flex-direction:column;width:calc(16.66% - 10px);background-color:#f0f0f0;padding:2%;box-sizing:border-box}
.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 560px;
  background-color: #f0f0f0;
  margin-top: 20px;
}
#video {
  padding: 5% 0;
  width: 100%;
}
.video2{display:flex;justify-content:center;margin-bottom:10rem}
#contienevideo{width:100%;display:flex;justify-content:center;align-items:center;padding-right:5%;padding-left:5%}
#contienevideo1{display:flex;flex-direction:column;justify-content:center;align-items:center}
#videoPlayer{width:100%;max-width:700px;aspect-ratio:16/9;margin-bottom:20px;  border-radius: 16px;
  overflow: hidden;
  object-fit: cover;}
.videoPlayer.short{max-width:356px;aspect-ratio:9/16;border-radius: 16px;overflow: hidden;object-fit: cover;margin-left:auto;margin-right:auto;}
.videoPlayer.short iframe{width:100%;height:100%}
#videoPlayer3,#videoPlayer4{width:100%;max-width:700px;height:auto;aspect-ratio:16/9;margin-bottom:20px;border-radius:16px;overflow: hidden;object-fit:cover;}
.videocontent {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin: 5% 0;
  border-radius: 16px;
  overflow: hidden;
  object-fit: cover;
}
.youtube-lite {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: 100%;
  margin-top: 0;
  display: block;
  padding-top: 56.25%; /* 16:9 */
  background: url(../imagenes/portada-de-video-lista.webp) center center / cover no-repeat;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  object-fit: cover;  
}
.youtube-lite iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.youtube-lite.video2 {
  background: url(../imagenes/portada-de-video-fish.webp) center center / cover no-repeat; 
}
.youtube-lite.video3 {
  background: url(../imagenes/magia-corporativa.webp) center center / cover no-repeat; 
}
.youtube-lite.video4 {
  background: url(../imagenes/miniatura-poker.webp) center center / cover no-repeat; 
}
.youtube-lite .play-button {
  width: 68px;
  height: 48px;
  background: url(../imagenes/play.webp) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#menu, #menu-valencia{background-color:#242424;padding-right:5%;padding-left:5%;}
#menu {background-color:#242424;padding-right:20%;padding-left:20%;}
#menu .container{padding-top:0;padding-bottom:5%;text-align:center;width:90%;margin:0 auto}
.botonesgral .pair img{width:100%;object-fit:cover;box-shadow:0 0 10px rgba(255,255,255,.2);transition:transform .3s ease}
.botonesgral .pair img:hover{transform:scale(1.05)}
.botonesgral .menu5{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;justify-items:center}
.botonesgral .pair{width:100%;background-color:#fff;padding:1rem;border-radius:10px}
.botonesgral .inner-div{background-color:#fff;padding:.5rem;margin-bottom:.5rem;border-radius:6px;}
.inner-div{background-color:#e0e0e0;text-align:center;margin:5px 0;padding:2%}
.pair{width:80%;display:flex;flex-direction:column;align-items:center}
.inner-div img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover; /* evita deformaciones */
  display: block;
  border: 2px solid #700404;
}

#botonesgralesp{background-repeat:no-repeat;background-position:center;justify-content:center;text-align:center;align-items:center;padding-right:20%;padding-left:20%;}
#botonesgralesp .container{width:60%;text-align:center;}
.contmenuesp{padding-left:0;padding-right:0;width:100%;height:auto;margin:0 auto;text-align:center}
#caracteristicas{background-repeat:no-repeat;background-position:center;background-color:#e0e0e0;justify-content:center;text-align:center;padding-right:20%;padding-left:20%;}
#caracteristicas .container{width:60%;text-align:center;padding-top:0;margin:0 auto;align-items:center;}
#caracteristicas .botsub{width:33%;padding-right:2%;padding-left:2%}
#caracteristicas .bot img{width:100%;height:auto;}
#caracteristicas .bot{width:33%;padding-right:5%;padding-left:5%}
#caracteristicas p {font-size:14px;text-align:center;}
#caracteristicas .frase p{text-align:center;}
.contmenuesp .bot{width:33%;float:left;text-align:center;padding-top:2%}
.contmenuesp .bot img{width:70%;height: auto;}
.bot img {
  display: block;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.contmenuespsub{padding-left:0;padding-right:0;width:100%;height:auto;margin:0 auto;text-align:center}
.container .contmenuespsub .botsub{text-align:center;float:left;width:33%;}
.contenedor-clientes {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}
.grid-logos {
    display: grid;
    /* Escritorio: 5 columnas */
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: center;
}
.logo-item img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.4s ease;
}
.logo-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}
.varios{width:100%;text-align:center;padding-left:var(--bs-gutter-x,15px);padding-right:var(--bs-gutter-x,15px);padding-bottom:15px;padding-top:15px;}
.varios h4{display:inline-block;line-height:1.2;margin-top:.5em;position:relative}
.varios h4:not(:last-child)::after{content:"|";margin:0 10px}
.img-responsiva-1 {
  width: 100%;
  height: auto;
  aspect-ratio: 602 / 401; 
  display: block;
  max-width: 602px;
  content-visibility:auto;
}
#zonas{background-color:#e0e0e0;}
.mapa-sitio {
    clear: both;
    margin-top: 40px;
	margin-bottom: 40px;
    padding-top: 30px;
	padding-bottom: 30px;
	border-top: 2px solid rgba(255,255,255,0.2); /* Línea superior blanca sutil */
    border-bottom: 2px solid rgba(255,255,255,0.2);
}

.grid-enlaces {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 col en PC */
    gap: 15px;
    margin-top: 20px;
	text-align:left;
}