*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Poppins',sans-serif;background:#0b0c10;color:#fff;overflow-x:hidden;}
.hamburger{
  position:fixed;top:20px;left:20px;cursor:pointer;
  width:30px;height:22px;display:flex;flex-direction:column;justify-content:space-between;
  z-index:1001;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;    /* ← evita el scroll horizontal */
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;   /* todos los elementos calculan el ancho correctamente */
  max-width: 100%;       /* ninguna caja se pasa del ancho disponible */
}
img, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}
.hamburger span{display:block;height:4px;width:100%;background:#39ff14;border-radius:2px;transition:0.4s;}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px);}
.side-menu{
  position:fixed;top:0;left:-260px;width:250px;height:100%;
  background:rgba(20,20,20,0.95);backdrop-filter:blur(8px);
  padding-top:100px;transition:0.4s;z-index:1000;
}
.side-menu.show{left:0;}
.side-menu ul{list-style:none;}
.side-menu li{margin:20px 0;text-align:center;}
.side-menu a{text-decoration:none;color:#fff;font-size:1.2rem;transition:color 0.3s;}
.side-menu a:hover{color:#39ff14;}
.hero{
  height:100vh;display:flex;justify-content:center;align-items:center;
  background:#0b0c10;overflow:hidden;position:relative;
}
.hero-image{
  position:relative;max-width:90%;border-radius:20px;overflow:hidden;
  transform:translateX(-100%);opacity:0;
  animation:slideIn 1.5s forwards;
}
.hero-image img{width:100%;display:block;filter:brightness(70%);}
.hero-text{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:#fff;text-align:center;
}
.hero-text h1{font-size:3rem;color:#39ff14;text-shadow:0 0 15px #39ff14;}
.hero-text p{font-size:1.2rem;margin-top:10px;}
.section{padding:80px 5%;background:#1f2833;text-align:center;}
.section h2{font-size:2.5rem;margin-bottom:40px;color:#39ff14;text-shadow:0 0 10px #39ff14;}
.cards-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}
.glass-card{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
border-radius:20px;
backdrop-filter:blur(12px);
overflow:hidden;
padding-bottom:20px;
opacity:0;
transform:translateX(100px);
transition:transform 0.8s ease-out, opacity 0.8s ease-out;
}
.glass-card img{
width:100%;height:160px;object-fit:cover;
border-top-left-radius:20px;border-top-right-radius:20px;
}
.glass-card h3{margin:15px 0 5px;font-size:1.2rem;color:#39ff14;}
.glass-card p{padding:0 15px 10px;font-size:0.95rem;}
.from-left{transform:translateX(-100px);}
.from-right{transform:translateX(100px);}
.glass-card.show{
transform:translateX(0);
opacity:1;
}
.footer-personal {
  display: flex;                /* activa flexbox */
  align-items: center;          /* centra verticalmente */
  gap: 1rem;                    /* espacio entre imagen y texto */
  text-align: left;             /* texto alineado a la izquierda */
}

.footer-personal .personal-photo {
  width: 100px;                 /* ajustá el tamaño que quieras */
  height: 100px;
  border-radius: 50%;           /* redondea la foto */
  object-fit: cover;            /* recorta sin deformar */
}

/* Opcional: que en pantallas chicas se apile */
@media (max-width: 600px) {
  .footer-personal {
    flex-direction: column;
    text-align: center;
  }
}
.footer{
background:#0b0c10;
color:#fff;
padding:40px 5%;
font-family: 'Poppins', sans-serif;
}
.footer-container{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:20px;
}
.footer-personal, .footer-certificados, .footer-redes{
flex:1 1 250px;
text-align:center;
}
.footer-personal img.personal-photo{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
margin-bottom:10px;
border:2px solid #39ff14;
}
.footer-certificados .certificados img{
width:100px;
height:auto;
margin:5px;
border-radius:10px;
border:1px solid #39ff14;
}
.footer-redes .social-links{
display:flex;
flex-direction:column;
gap:5px;
margin-top:10px;
}
.footer-redes .social-links a{
color:#39ff14;
text-decoration:none;
transition:0.3s;
}
.footer-redes .social-links a:hover{
text-decoration:underline;
}
.footer-bottom{
text-align:center;
margin-top:30px;
border-top:1px solid rgba(57,255,20,0.5);
padding-top:15px;
font-size:0.9rem;
}
@media(max-width:768px){
.footer-container{
flex-direction:column;
align-items:center;
}
.footer-personal, .footer-certificados, .footer-redes{
text-align:center;
}
}
.hero-bg {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: url("etiquetagold.jpg") center/cover no-repeat;
filter: brightness(60%);
transform: translateX(-100%);
animation: heroBgIn 1.5s forwards;
}
.hero-content {
position: relative;
text-align: center;
color: #fff;
opacity: 0;
transform: translateX(100%);
animation: heroTextIn 1.5s forwards 0.5s;
}
.hero-content h1 {
font-size: 3rem;
color: #39ff14;
text-shadow: 0 0 20px #39ff14;
}
.hero-content p {
font-size: 1.2rem;
margin-top: 10px;
}
@keyframes heroBgIn {
to { transform: translateX(0); }
}
@keyframes heroTextIn {
to { transform: translateX(0); opacity: 1; }
}
#whatsapp {
position: fixed;
bottom: 80px;
right:20px;
z-index: 1400;
}
svg {
width: 80px;
filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
}
circle {
fill: #45a049;25d366
}
path {
fill: #fff;
}
p {
font-family: Sans-serif; Roboto;
color: #black;
}
.cartel-lateral {
transform: translateX(100%);
opacity: 0;
transition: transform 0.8s ease, opacity 0.8s ease;
will-change: transform, opacity;
}
.cartel-lateral.activo {
transform: translateX(0);
opacity: 1;
}
.animated-button {
padding: 12px 20px;
background: #ff4f00;
color: #fff;
font-weight: bold;
border: none;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
position: relative;
overflow: hidden;
transition: 0.4s;
box-shadow: 0 0 8px rgba(255,79,0,0.5);
}
.animated-button::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
transform: rotate(45deg);
transition: all 0.5s;
}
.animated-button:hover::before {
top: -70%;
left: -70%;
width: 240%;
height: 240%;
}
.animated-button:hover {
box-shadow: 0 0 15px rgba(255,79,0,0.8);
transform: scale(1.05);
}
#cookie-banner {
position: fixed;
right: -300px; /* fuera de pantalla */
top: 50%;
transform: translateY(-50%);
width: 250px;
background: #1f2833;
color: #fff;
padding: 20px;
border-radius: 10px 0 0 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
transition: right 0.5s ease;
z-index: 2000;
font-family: 'Poppins', sans-serif;
}
#cookie-banner.show {
right: 0;
}
#cookie-banner p {
font-size: 0.9rem;
margin-bottom: 15px;
}
.cookie-buttons {
display: flex;
justify-content: space-between;
}
.cookie-buttons button {
padding: 8px 12px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: 0.3s;
}
#accept-cookies { background: #39ff14; color: #000; }
#accept-cookies:hover { background: #32cc0f; }
#reject-cookies { background: #ff4141; color: #fff; }
#reject-cookies:hover { background: #e03a3a; }
#external-banner {
position: fixed;
right: -280px;
top: 50%;
transform: translateY(-50%);
width: 260px;
background: rgba(20,20,20,0.95);
border: 1px solid rgba(57,255,20,0.5);
border-radius: 15px 0 0 15px;
box-shadow: 0 0 20px rgba(0,0,0,0.7);
padding: 20px;
color: #fff;
font-family: 'Poppins', sans-serif;
text-align: center;
transition: right 0.6s ease, opacity 0.6s ease;
z-index: 2000;
opacity: 0;
}
#external-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: #222;
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.5);
  width: 80%;
  max-width: 600px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
  z-index: 1000;
}

#external-banner.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.external-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0;
  justify-content: center;
}

.external-links a {
  background: #39ff14;
  color: #000;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s;
}

.external-links a:hover {
  background: #32cc12;
}

#close-banner {
  margin-top: 15px;
  background: #ff4444;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
}

#close-banner:hover {
  background: #cc0000;
}
#external-banner.show {
right: 0;
opacity: 1;
}
#external-banner p {
font-size: 1rem;
margin-bottom: 15px;
color: #39ff14;
text-shadow: 0 0 10px #39ff14;
}
.external-links {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 15px;
}
.external-links a {
background: rgba(57,255,20,0.1);
color: #39ff14;
text-decoration: none;
padding: 8px;
border-radius: 10px;
font-weight: bold;
transition: 0.3s;
box-shadow: 0 0 8px rgba(57,255,20,0.5);
}
.external-links a:hover {
background: #39ff14;
color: #000;
box-shadow: 0 0 12px #39ff14;
}
#close-banner {
background: #ff4141;
color: #fff;
border: none;
border-radius: 8px;
padding: 8px;
cursor: pointer;
width: 100%;
font-weight: bold;
transition: 0.3s;
box-shadow: 0 0 8px rgba(255,65,65,0.5);
}
#close-banner:hover {
background: #e03a3a;
box-shadow: 0 0 12px rgba(255,65,65,0.7);
}
@media(max-width:768px){
#external-banner {
width: 80%;
right: -90%;
}
#external-banner.show {
right: 0;
}
}
#widgetLateral {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: #222;
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.5);
  width: 300px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 1000;
}
#widgetLateral.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
#widgetLateral h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #39ff14;
  text-align: center;
}
#widgetLateral .item {
  margin: 6px 0;
}
#cerrar-widget {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 20px;
  color: #ff4444;
  cursor: pointer;
}
#cerrar-widget:hover {
  color: #ff0000;
}
.item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 14px;
}
.item span {
font-weight: bold;
}
.item:last-child {
margin-bottom: 0;
}
.glass {
backdrop-filter: blur(10px);
background: rgba(255,255,255,0.1);
border-radius: 15px;
}
.etiqueta-fija {
position: fixed;
right: 20px;
bottom: 0px;
width: 50px;  
height: 50px; 
background: rgba(255,255,255,0.9);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.etiqueta-fija img {
width: 100%;
height: auto;
}
.etiqueta-fija:hover {
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.anim-fade {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
will-change: opacity, transform;
}
.anim-fade.visible {
opacity: 1;
transform: translateY(0);
}
.contacto{
padding:60px 5%;
background:#1f2023;
color:#fff;
text-align:center;
}
.contacto-container{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:30px;
margin-top:30px;
}
.contact-form{
flex:1 1 300px;
display:flex;
flex-direction:column;
gap:15px;
}
.contact-form input,
.contact-form textarea{
padding:12px;
border-radius:8px;
border:none;
outline:none;
font-size:1rem;
}
.contact-form button{
padding:12px;
background:#39ff14;
color:#000;
font-weight:bold;
border:none;
border-radius:8px;
cursor:pointer;
transition:0.3s;
}
.contact-form button:hover{
background:#32cc0f;
}
.contacto-rapido{
flex:1 1 250px;
text-align:left;
}
.contacto-rapido h3{
margin-bottom:15px;
}
.contacto-rapido p{
margin-bottom:10px;
}
.contacto-rapido a{
color:#39ff14;
text-decoration:none;
}
.contacto-rapido a:hover{
text-decoration:underline;
}
#protector {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
opacity: 0;
pointer-events: none; 
transition: opacity 1s ease;
}
#protector.activo {
opacity: 1;
pointer-events: auto;
}
.protector-contenido {
color: #fff;
text-align: center;
font-family: sans-serif;
animation: pulso 3s infinite;
}
.protector-contenido h2 {
font-size: 3rem;
margin-bottom: 1rem;
}
.protector-contenido p {
font-size: 1.2rem;
}
@keyframes pulso {
0%   { transform: scale(1); }
50%  { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Botón para abrir */
.toggle-btn {
  position: fixed;
  top: 40%;
  left: 0;
  background: #39ff14;
  color: #000;
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  font-size: 1.4rem;
  z-index: 10001;
  transition: background 0.3s;
}
.toggle-btn:hover {
  background: #2ecc71;
}
.toggle-btn {
  position: fixed;
  top: 40%;
  left: 0;
  background: #39ff14;
  color: #000;
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  font-size: 1.4rem;
  z-index: 14000;
  transition: transform .2s;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.toggle-btn:hover { transform: translateX(3px); }

/* --- Panel lateral --- */
#video-panel {
  position: fixed;
  top: 0;
  left: -370px;              /* oculto por defecto */
  width: 370px;
  max-width: 90%;
  height: 100%;
  background: linear-gradient(180deg,#111,#1a1a1a);
  color: #fff;
  padding: 16px;
  box-sizing: border-box;
  box-shadow: 2px 0 20px rgba(0,0,0,0.6);
  transition: left 0.35s ease;
  z-index: 13999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
#video-panel.open {
  left: 0;
}

/* Botón cerrar */
.close-btn {
  align-self: flex-end;
  background: transparent;
  color: #fff;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 6px 8px;
}

/* Contenedor de videos */
.videos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow:auto;
  padding-right: 6px; /* espacio para scrollbar */
}

/* Placeholder (miniatura) antes de crear iframe */
.video-placeholder {
  width: 100%;
  height: 200px;
  background-position: center;
  background-size: cover;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
/* Botón de apertura */
.toggle-btn {
  position: fixed;
  top: 40%;
  left: 0;
  background: #39ff14;
  color: #000;
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  z-index: 10001;
}

/* Panel lateral */
#video-panel {
  position: fixed;
  top: 0;
  left: -360px;      /* oculto al inicio */
  width: 360px;
  height: 100%;
  background: #222;
  padding: 16px;
  box-sizing: border-box;
  transition: left 0.3s ease;
  z-index: 10000;
  overflow-y: auto;
}
#video-panel.open {
  left: 0;
}
.close-btn {
  background: transparent;
  color: #fff;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  margin-bottom: 12px;
}
.videos iframe {
  width: 100%;
  height: 200px;
  border: none;
  margin-bottom: 12px;
}

#welcome-screen {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #2b2e4a, #e84545);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 1s ease;
}

.welcome-box {
  background: #fff;
  padding: 2rem 3rem;
  border-radius: 12px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

#welcome-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

#welcome-text {
  font-size: 1.6rem;
  color: #2b2e4a;
  margin-bottom: 1.5rem;
  min-height: 2.5rem; /* evita salto brusco */
}

#start-btn {
  background: #e84545;
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
}
#start-btn:hover {
  background: #d63434;
}
.flash-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 3rem;              /* tamaño del ícono */
  color: #fff;
  background: linear-gradient(135deg, #ff8c00, #ffcc00);
  box-shadow: 0 8px 15px rgba(0,0,0,0.3);
  z-index: 9999;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.flash-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 20px rgba(0,0,0,0.4);
}

.flash-btn.active {
  /* Apariencia cuando la linterna está encendida */
  background: linear-gradient(135deg, #ffd700, #ffea00);
  box-shadow: 0 0 25px 8px rgba(255, 255, 100, 0.6);
}
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Caja de contenido */
.overlay-content {
  background: #222;
  color: #fff;
  padding: 2rem;
  border-radius: 15px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 5px 20px rgba(0,255,0,0.3);
  animation: zoomIn 0.6s ease;
  border: 2px solid #39ff14;
}

.overlay-content h2 {
  margin-bottom: 1rem;
  color: #39ff14;
  font-size: 1.6rem;
}

.overlay-content p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  line-height: 1.4;
}

/* Botón WhatsApp */
.whatsapp-btn {
  display: inline-block;
  background: #39ff14;
  color: #000;
  padding: 12px 18px;
  margin-bottom: 1rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px #39ff14;
}

/* Botón cerrar */
.overlay-content button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: #444;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
.overlay-content button:hover {
  background: #666;
}
.programas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    padding: 40px;
    max-width: 1100px;
    margin: auto;
  }

  .card {
    background: #222;
    border-radius: 15px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    overflow: hidden;
    position: relative;
  }

  /* Contenido interno animado */
  .card-inner {
    text-align: center;
    padding: 25px;
    opacity: 0;
    transform: translateX(50px); /* empieza desplazado */
    transition: all 0.8s ease;
  }

  /* Animación al entrar */
  .card-inner.animate {
    opacity: 1;
    transform: translateX(0);
  }

  .card img {
    max-width: 90px;
    margin-bottom: 15px;
  }

  .card h3 {
    margin: 12px 0;
    font-size: 1.3rem;
    color: #39ff14;
  }

  .card p {
    font-size: 0.95rem;
    margin-bottom: 18px;
    color: #ddd;
  }

  .btn {
    display: inline-block;
    padding: 12px 20px;
    background: #39ff14;
    color: #000;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.3s, background 0.3s;
  }

  .btn:hover {
    transform: translateY(-4px);
    background: #32cc12;
  }
  #publicidad {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
  }
  #publicidad.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Caja de contenido */
  .publicidad-box {
    background: #222;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0,255,128,0.8);
    max-width: 450px;
    animation: slideDown 0.8s ease forwards;
  }

  @keyframes slideDown {
    from { transform: translateY(-80px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  .publicidad-box h1 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #39ff14;
  }
  .publicidad-box p {
    font-size: 1.1rem;
    margin-bottom: 25px;
  }

  /* Botón de WhatsApp */
  .btn-whatsapp {
    display: inline-block;
    padding: 12px 20px;
    background: #25D366;
    color: #fff;
    border-radius: 30px;
    font-size: 1.1rem;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.3s;
  }
  .btn-whatsapp:hover {
    transform: scale(1.1);
  }

  /* Botón de cierre */
  .close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    cursor: pointer;
    color: #fff;
  }
 h1 {
      text-align: center;
      margin: 30px 0;
      font-size: 2rem;
      color: #39ff14;
    }

    .programas {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 20px;
      padding: 40px;
      max-width: 1100px;
      margin: auto;
    }

    .card {
      background: #222;
      border-radius: 15px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.35);
      overflow: hidden;
      position: relative;
    }

    /* Contenido interno animado */
    .card-inner {
      text-align: center;
      padding: 25px;
      opacity: 0;
      transform: translateX(80px); /* por defecto entra desde la derecha */
      transition: all 0.8s ease;
    }

    /* Animación al entrar */
    .card-inner.animate {
      opacity: 1;
      transform: translateX(0);
    }

    .card img {
      max-width: 90px;
      margin-bottom: 15px;
    }

    .card h3 {
      margin: 12px 0;
      font-size: 1.3rem;
      color: #39ff14;
    }

    .card p {
      font-size: 0.95rem;
      margin-bottom: 8px;
      color: #ddd;
      text-align: left;
    }

    .btn {
      display: inline-block;
      padding: 12px 20px;
      background: #39ff14;
      color: #000;
      border-radius: 25px;
      text-decoration: none;
      font-weight: 700;
      transition: transform 0.3s, background 0.3s;
      margin-top: 12px;
    }

    .btn:hover {
      transform: translateY(-4px);
      background: #32cc12;
    }
    :root{
      --bg: #0e0e0e;
      --card: #222;
      --text: #ddd;
      --accent: #39ff14;
      --card-shadow: rgba(0,0,0,0.35);
    }

    /* Base */
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: Arial, Helvetica, sans-serif;
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    h1{
      text-align:center;
      color:var(--accent);
      margin:28px 16px;
      font-size:1.9rem;
    }

    /* Grid contenedor (igual que tu .programas) */
    .programas{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap:20px;
      padding:40px;
      max-width:1100px;
      margin:0 auto 60px;
    }

    .card{
      background: var(--card);
      border-radius:15px;
      box-shadow: 0 6px 18px var(--card-shadow);
      overflow:hidden;
      position:relative;
      min-height:220px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    /* Contenido animable (no hay transform por defecto) */
    .card-inner{
      width:100%;
      padding:24px;
      text-align:center;
      opacity:0;
      transition: transform 700ms cubic-bezier(.22,.9,.36,1), opacity 600ms ease;
      /* No poner transform aquí (lo controlan .from-left / .from-right) */
    }

    /* Posición inicial según clase */
    .card-inner.from-right{ transform: translateX(80px); }
    .card-inner.from-left{  transform: translateX(-80px); }

    /* Estado final */
    .card-inner.animate{
      opacity:1;
      transform: translateX(0);
    }

    /* Icono (SVG inline) */
    .icon-svg{
      width:84px;
      height:84px;
      display:block;
      margin:0 auto 14px;
    }

    .card h3{
      margin:10px 0 8px;
      color:var(--accent);
      font-size:1.2rem;
    }

    .card p{
      font-size:0.95rem;
      margin:6px 0;
      color:var(--text);
      text-align:left;
    }

    .card .price{
      display:inline-block;
      margin-top:12px;
      padding:10px 18px;
      border-radius:24px;
      background:var(--accent);
      color:#000;
      font-weight:700;
      text-decoration:none;
    }

    /* Adaptación para móviles: texto centrado en < 420px */
    @media (max-width:420px){
      .card p{ text-align:left; font-size:0.95rem; }
      .programas{ padding:20px; gap:14px; }
    }

    /* Preferencias de reducción de movimiento */
    @media (prefers-reduced-motion: reduce){
      .card-inner,
      .card-inner.animate{
        transition: none;
        transform: none !important;
        opacity: 1 !important;
      }
    }
   .globo-btn {
  position: fixed;
  bottom: 170px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  animation: aparecer 0.8s ease forwards, respirar 3s ease-in-out infinite;
}

/* Botón de llamada */
.llamar {
  bottom: 170px;
}

/* Botón de linterna (más arriba) */
.linterna {
  bottom: 240px;
}

/* Efecto hover */
.globo-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* Animaciones */
@keyframes aparecer {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes respirar {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Modo linterna encendida */
.linterna.encendida {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 25px 6px rgba(255, 255, 200, 0.6);
  color: #fffecf;
}