/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* === ESTILO RETRO 2000s === */

body {
  font-family: "Comic Sans MS", "Verdana", sans-serif;
  margin: 0;
  padding: 0;
  background-image: url('fondo.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  color: #00ffff;
  text-shadow: 1px 1px 2px #000;
  overflow-x: hidden;
  cursor: default;
}

/* Encabezado */
header {
  text-align: center;
  background-image: url('fondo2.png');
  border: 3px ridge #00ffff;
  padding: 15px;
  color: #fff;
  margin: 10px 5%;
  box-shadow: 0 0 10px #00ffff;
}

header img {
  display: block;
  margin: 0 auto;
  border: 2px solid #00ffff;
}

/* Secciones */
section {
  background: rgba(0, 0, 0, 0.8);
  border: 2px groove #00ffff;
  border-radius: 10px;
  margin: 15px 5%;
  padding: 15px;
  box-shadow: inset 0 0 15px #00ffff55;
}

/* Títulos */
h2 {
  text-align: center;
  margin: 10px 0;
  color: #ff00ff;
  text-shadow: 2px 2px 3px #000;
  border-bottom: 2px dashed #00ffff;
  padding-bottom: 5px;
}

/* Listas estilo botón */
ul {
  list-style-type: square;
  padding: 0;
  text-align: center;
}

li {
  display: inline-block;
  margin: 5px 10px;
  background-color: #001a4d;
  border: 1px solid #00ffff;
  border-radius: 4px;
  padding: 5px 10px;
  box-shadow: 0 0 5px #00ffff;
  transition: transform 0.2s, background-color 0.2s;
}

li:hover {
  background-color: #002b80;
  transform: scale(1.1);
}

/* Tablas */
table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 0.9em;
  color: #00ffff;
}

th, td {
  border: 1px solid #00ffff;
  padding: 6px;
  background-color: #000033;
}

th {
  background-color: #001a66;
  color: #ff00ff;
  text-transform: uppercase;
}

/* Formulario */
form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 320px;
  margin: 0 auto;
  padding: 10px;
  background-color: #000033cc;
  border: 2px inset #00ffff;
  border-radius: 10px;
}

input, textarea, button {
  border: 2px solid #00ffff;
  border-radius: 5px;
  padding: 6px;
  background-color: #000;
  color: #00ffff;
  font-family: "Courier New", monospace;
}

button {
  background-color: #001a66;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 0 5px #00ffff;
}

button:hover {
  background-color: #0033cc;
  color: #fff;
}

/* GIFs decorativos */
.gif-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

.gif-row img {
  width: 120px;          /* 🔹 tamaño fijo (ajusta a gusto) */
  height: 120px;         /* 🔹 tamaño fijo (ajusta a gusto) */
  object-fit: cover;     /* mantiene proporciones recortando si es necesario */
  border: 2px solid #00ffff;
  box-shadow: 0 0 10px #00ffff;
  transition: transform 0.2s;
  border-radius: 8px;    /* opcional, suaviza esquinas */
}

.gif-row img:hover {
  transform: rotate(5deg) scale(1.1);
}


/* Carrusel */
.slider {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
  border: 3px groove #00ffff;
  border-radius: 10px;
  margin: 20px auto;
  background-color: #000033;
  box-shadow: 0 0 15px #00ffff88;
}

.slides img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}

.slides img.active {
  display: block;
}

.slider button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #001a4dcc;
  color: #00ffff;
  border: 2px solid #00ffff;
  border-radius: 50%;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 20px;
  transition: background 0.3s;
}

.slider button:hover {
  background: #002b80;
}

/* 🔹 Fondo oscuro y centrado para imagen ampliada */
.image-overlay {
  display: none; /* oculto por defecto */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* 🔹 Imagen ampliada */
.image-overlay img {
  max-width: 80%;
  max-height: 80%;
  border: 3px solid #00ffff;
  box-shadow: 0 0 20px #00ffffaa;
  border-radius: 10px;
  background-color: #000033;
  animation: zoomIn 0.3s ease;
}

/* 🔹 Efecto suave al aparecer */
@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}


/* 🔹 Posiciones individuales */
.slider .prev {
  left: 10px;
}

.slider .next {
  right: 10px;
}

/*  css de comisiones
body {
  font-family: Arial, sans-serif;
  background: #000033;
  color: #fff;
  margin: 0;
  padding: 0;
}

/* Container */
.container {
  max-width: 1200px;
  margin: auto;
  padding: 40px 20px;
}

/* Títulos */
.retro-title {
  text-align: center;
  font-size: 3em;
  color: #ffdd57;
  text-shadow: 2px 2px 4px #000;
  margin-bottom: 10px;
}

.retro-subtitle {
  text-align: center;
  font-size: 1.8em;
  color: #00ffff;
  text-shadow: 2px 2px 3px #000;
  margin-bottom: 40px;
}

.blink {
  animation: blink 1.2s infinite;
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

/* Paquetes */
.packages {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-bottom: 50px;
}

.package {
  background: linear-gradient(to bottom right, #222, #444);
  border: 3px groove #00ffff;
  border-radius: 15px;
  padding: 20px;
  width: 300px;
  text-align: center;
  box-shadow: 0 0 15px #00ffff88;
}

.package h2 {
  font-size: 2em;
  margin-bottom: 10px;
}

.package .price {
  font-size: 2.5em;
  color: #ffdd57;
  margin-bottom: 15px;
}

.package ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.package ul li {
  margin: 8px 0;
  font-size: 1.1em;
}

/* Diferentes colores de paquete */
.package.basic { background: linear-gradient(to bottom right, #1e3c72, #2a5298); }
.package.premium { background: linear-gradient(to bottom right, #6a11cb, #2575fc); }
.package.deluxe { background: linear-gradient(to bottom right, #f7971e, #ffd200); }

/* Botones retro */
.retro-button {
  background: #001a4dcc;
  color: #00ffff;
  border: 2px solid #00ffff;
  padding: 10px 20px;
  font-size: 1.1em;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.retro-button:hover {
  background: #002b80;
  transform: scale(1.05);
}

/* Formulario */
.contact-form {
  max-width: 800px;
  margin: auto;
  background: rgba(0,0,0,0.8);
  padding: 30px;
  border-radius: 15px;
  border: 3px groove #00ffff;
  margin-bottom: 50px;
  box-shadow: 0 0 15px #00ffff88;
}

.contact-form h2 {
  text-align: center;
  color: #ff66cc;
  font-size: 2em;
  margin-bottom: 20px;
  text-shadow: 2px 2px 3px #000;
}

.contact-form label {
  display: block;
  margin-bottom: 5px;
  font-size: 1.2em;
  color: #00ffff;
  font-weight: bold;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 3px solid #8000ff;
  border-radius: 10px;
  font-size: 1em;
  font-weight: bold;
  outline: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #ff66cc;
}

/* Tiempo de entrega */
.delivery-time {
  text-align: center;
  margin-top: 20px;
}

.delivery-time p {
  display: inline-block;
  padding: 15px 25px;
  background: linear-gradient(to right, #00ff00, #00ffff);
  border-radius: 15px;
  font-size: 1.3em;
  font-weight: bold;
  text-shadow: 2px 2px 3px #000;
}




/* Sección "Sobre mí" */
.sobre-mi {
  position: relative; /* Necesario para que ::before se posicione sobre este contenedor */
  background-image: url('fondo3.png');
  background-size: cover;
  background-position: center;
  color: #fff;
  border: 2px groove #00ffff;
  border-radius: 10px;
  padding: 20px;
  text-shadow: 2px 2px 3px #000;
  overflow: hidden; /* evita que la capa se salga del borde redondeado */
}

/* Capa negra semitransparente */
.sobre-mi::before {
  content: "";
  position: absolute;
  inset: 0; /* cubre toda la sección */
  background: rgba(0, 0, 0, 0.5); /* negro con 50% de opacidad */
  z-index: 0; /* detrás del texto */
}

/* Asegura que el texto esté por encima de la capa */
.sobre-mi * {
  position: relative;
  z-index: 1;
}


/* --- Página Blog --- */
body.blog-page {
  background-image: url('fondo.jpg');
  color: #fff;
}

.retro-title {
  text-align: center;
  font-size: 3em;
  color: #ffdd57;
  text-shadow: 2px 2px 4px #000;
  margin-bottom: 40px;
}

.blog-posts {
  max-width: 900px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-post {
  background: linear-gradient(to right, rgba(128,0,128,0.9), rgba(255,20,147,0.9));
  border: 3px groove #00ffff;
  border-radius: 15px;
  padding: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.blog-post:hover {
  transform: scale(1.03);
}

.post-inner {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.post-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 3px groove #00ffff;
  border-radius: 10px;
}

.post-content {
  flex: 1;
}

.post-title {
  font-size: 1.8em;
  color: #00ffff;
  margin-bottom: 5px;
  text-shadow: 2px 2px 3px #000;
}

.post-date {
  color: #ffdd57;
  font-size: 0.9em;
  margin-bottom: 10px;
}

.post-preview {
  font-size: 1.1em;
  margin-bottom: 10px;
}

.retro-button {
  background: #001a4dcc;
  color: #00ffff;
  border: 2px solid #00ffff;
  padding: 8px 16px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.retro-button:hover {
  background: #002b80;
  transform: scale(1.05);
}

/* Banner "Próximamente" */
.coming-soon {
  text-align: center;
  margin-top: 30px;
  display: inline-block;
  background: rgba(0,0,0,0.8);
  border: 3px groove #00ffff;
  padding: 15px 25px;
  border-radius: 15px;
  box-shadow: 0 0 10px #00ffff88;
}

.coming-soon p {
  color: #ff66cc;
  font-size: 1.3em;
  font-weight: bold;
  text-shadow: 2px 2px 3px #000;
  animation: blink 1.2s infinite;
}


/* Pie de página */
footer {
  text-align: center;
  padding: 10px;
  background: linear-gradient(180deg, #001a66, #000033);
  border-top: 2px ridge #00ffff;
  margin: 10px 5%;
  color: #00ffff;
  font-size: 0.9em;
  box-shadow: 0 0 10px #00ffff88;
}