/* ==========================================================================
   1. CONFIGURACIÓN GLOBAL
   ========================================================================== */
:root {
  --color-background: #0d0c1d;
  --color-primary-glow: #a688fa;
  --color-secondary-glow: #3b2d60;
  --color-text-primary: #ffffff;
  --color-text-secondary: #a7a6b4;
  --font-primary: 'Poppins', sans-serif;
}

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

body {
  font-family: var(--font-primary);
  background-color: var(--color-background);
  background-image: radial-gradient(circle at center, #16142a, var(--color-background) 60%);
  color: var(--color-text-primary);
  line-height: 1.7;
  overflow-x: hidden; 
}

/* ==========================================================================
   2. BARRA DE NAVEGACIÓN (HEADER)
   ========================================================================== */
.main-header {
  position: sticky;
  top: 0;
  z-index: 1001;
  width: 100vw;
  background-color: rgba(13, 12, 29, 0.7);
  backdrop-filter: blur(10px);
  overflow-x: hidden; 
}

.header-container {
  display: flex;
  align-items: center;
  padding: 20px 5%; 
  max-width: 1600px;
  margin: 0 auto;
}

.logo a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
  color: var(--color-text-primary);
}

.logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0c3fc, #8ec5fc);
}

.main-header .main-nav {
  margin-left: auto;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.main-nav a {
  text-decoration: none;
  color: var(--color-text-secondary);
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 50px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.main-nav a:hover {
  color: var(--color-text-primary);
  background-color: rgba(255, 255, 255, 0.1);
}

.main-nav a.activo {
  background-color: #ffffff;
  color: #0d0c1d;
}

/* ==========================================================================
   3. SECCIÓN "HERO" (PÁGINA DE INICIO)
   ========================================================================== */
.hero-section {
  display: grid;
  grid-template-columns: 55% 45%; 
  grid-template-areas: "texto-start imagen" 
                       "texto-end imagen"; 
  align-items: center;
  gap: 1px;
  padding: 30px 5%;
  max-width: 1600px;
  margin: 0 auto;
}

.hero-text-start { grid-area: texto-start; }
.hero-text-end { grid-area: texto-end; }
.hero-image { grid-area: imagen; }

.hero-text-end p {
  font-size: 18px;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin-bottom: 32px;
  text-align: justify;
}
.hero-text-start h1 {
    font-size: 72px; 
    font-weight: 900; 
    line-height: 1.1; 
    margin-bottom: 24px; 
}
.hero-text-end h2 {
    font-size: 24px; 
    font-weight: 700; 
    margin-top: 40px; 
    margin-bottom: 12px; 
}
.hero-text-end .cta-buttons {
    display: flex; 
    gap: 16px; 
    margin-top: 40px; 
}
.tag { display: inline-block; padding: 8px 16px; background-color: rgba(166, 136, 250, 0.1); border: 1px solid var(--color-secondary-glow); border-radius: 50px; font-weight: 700; color: var(--color-primary-glow); margin-bottom: 24px; }
.tag i { margin-right: 8px; }
.highlight { background: linear-gradient(135deg, #e0c3fc, #8ec5fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-buttons a { text-decoration: none; font-weight: 700; padding: 14px 28px; border-radius: 50px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.cta-primary { background: linear-gradient(135deg, #e0c3fc, #8ec5fc); color: var(--color-background); }
.cta-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(142, 197, 252, 0.2); }
.cta-secondary { background-color: #ffffff; color: var(--color-background); }
.cta-secondary:hover { background-color: #f0f0f0; }
.hero-image { position: relative; }
.hero-image img { width: 100%; height: auto; border-radius: 24px; position: relative; z-index: 1; }
.hero-image::after { content: ''; position: absolute; inset: -5px; border-radius: 29px; background: linear-gradient(135deg, var(--color-primary-glow), #8ec5fc); z-index: 0; filter: blur(20px); opacity: 0.8; }

/* ==========================================================================
   4. ESTRUCTURA GENERAL DE PÁGINAS
   ========================================================================== */
.portfolio-page, .prices-page, .contact-page { 
    padding: 40px 0; 
    max-width: 1600px; 
    margin: 0 auto; 
    overflow-x: hidden; 
}
.portfolio-header, .prices-header, .contact-header { 
    text-align: center; 
    margin-bottom: 60px; 
    padding: 0 5%; 
}
.portfolio-header h1, .prices-header h1, .contact-header h1 { font-size: 54px; font-weight: 900; margin-bottom: 12px; }
.portfolio-header p, .prices-header p, .contact-header p { font-size: 18px; color: var(--color-text-secondary); max-width: 700px; margin: 0 auto; }
.filter-bar { display: flex; justify-content: center; gap: 12px; margin-bottom: 50px; flex-wrap: wrap; width: 100%; max-width: 100%; padding: 0 5%; overflow-x: auto; }
.boton-filtro { text-decoration: none; background-color: transparent; color: var(--color-text-secondary); font-weight: 700; padding: 10px 24px; border-radius: 50px; border: 1px solid var(--color-secondary-glow); cursor: pointer; transition: all 0.3s; }
.boton-filtro:hover { background-color: var(--color-secondary-glow); color: var(--color-text-primary); }
.boton-filtro.activo { background: linear-gradient(135deg, #e0c3fc, #8ec5fc); color: var(--color-background); border-color: transparent; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; }
.item-galeria { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; aspect-ratio: 1 / 1; }
.item-galeria:hover { transform: translateY(-5px); }
.item-galeria img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: 100%; }
.item-galeria.contenido-sensible img { filter: blur(20px) brightness(0.7); }
.item-galeria.contenido-sensible::before { content: attr(data-advertencia); position: absolute; inset: 0; z-index: 10; display: flex; justify-content: center; align-items: center; padding: 10px; background-color: rgba(0, 0, 0, 0.5); color: white; font-weight: 700; font-size: 24px; text-align: center; text-transform: uppercase; letter-spacing: 2px; }

/* ==========================================================================
   5. PÁGINA DE PRECIOS Y CONTACTO (ESTILOS DE ESCRITORIO)
   ========================================================================== */
.bloque-precios { 
    margin-bottom: 80px; 
    padding: 0 5%; 
}
.titulo-seccion-precios { 
    text-align: center; 
    font-size: 28px; 
    font-weight: 700; 
    color: #8ec5fc; 
    text-transform: uppercase; 
    margin-bottom: 40px; 
}
.contenido-precios { 
    display: grid; 
    grid-template-columns: 45% 1fr; 
    grid-template-areas: 
        "tabla imagen"
        "nota nota"; 
    align-items: center; 
    gap: 50px; 
}
.tabla-precios { grid-area: tabla; }
.imagen-ejemplo { grid-area: imagen; }
.nota-privada { grid-area: nota; } 
.imagen-ejemplo { position: relative; }
.imagen-ejemplo img { width: 100%; height: auto; border-radius: 16px; position: relative; z-index: 1; }
.imagen-ejemplo::after { content: ''; position: absolute; inset: -4px; border-radius: 20px; background: linear-gradient(135deg, var(--color-primary-glow), #8ec5fc); z-index: 0; filter: blur(15px); opacity: 0.7; }
.tabla-precios table { 
    width: 100%; 
    table-layout: fixed; 
    border-collapse: separate; 
    border-spacing: 0; 
    background-color: rgba(22, 20, 42, 0.5); 
    border: 1px solid var(--color-secondary-glow); 
    border-radius: 16px; 
    overflow: hidden; 
}
.tabla-precios th { padding: 16px; text-align: left; background-color: rgba(43, 40, 78, 0.7); color: var(--color-text-primary); font-size: 16px; font-weight: 700; }
.tabla-precios td { padding: 16px; border-bottom: 1px solid var(--color-secondary-glow); }
.tabla-precios tbody tr:last-child td { border-bottom: none; }
.tabla-precios strong { color: var(--color-text-primary); font-weight: 700; font-size: 16px; text-transform: uppercase; }
.tabla-precios td:last-child { text-align: right; font-weight: 700; color: #2ecc71; }
.nota-privada {
  background-color: #16142a;
  border: 1px solid var(--color-primary-glow);
  border-radius: 16px;
  padding: 20px 25px;
  text-align: center;
  font-style: normal;
  font-size: 15px;
  color: var(--color-text-secondary);
  max-width: 80%;
  margin: 30px auto 0 auto;
}

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 900px; margin: 0 auto; }
.contact-column h3 { font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--color-text-secondary); letter-spacing: 1px; border-bottom: 1px solid var(--color-secondary-glow); padding-bottom: 12px; margin-bottom: 24px; }
.contact-list { list-style: none; padding: 0; }
.contact-list li { 
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 20px;
}
.contact-list .link-icon {
  width: 55px;
  height: 55px;
  object-fit: contain;
  flex-shrink: 0;
}
.contact-list a { 
  display: block;
  flex-grow: 1;
  text-align: center;
  text-decoration: none; 
  font-weight: 700; 
  color: var(--color-text-primary); 
  padding: 10px 20px;
  background-color: rgba(22, 20, 42, 0.5); 
  border: 1px solid var(--color-secondary-glow); 
  border-radius: 12px; 
  position: relative; 
  overflow: hidden; 
  transition: color 0.4s ease; 
}
.contact-list a span { 
  position: relative; 
  z-index: 2; 
}
.contact-list a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transform: translateX(-101%); transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1); }
.contact-list a:hover::before { transform: translateX(0); }
.btn-twitter::before { background-color: #1DA1F2; }
.btn-bluesky::before { background-color: #208bfe; }
.btn-furaffinity::before { background-color: #f9b038; }
.btn-furaffinity:hover span { color: #222034; }
.btn-inkbunny::before { background-color: #ffabe5; }
.btn-inkbunny:hover span { color: #515256; }
.btn-ekas::before { background-color: #9966ff; }
.btn-picarto::before { background-color: #37946e; }
.btn-piczel::before { background-color: #306082; }
.btn-discord::before { background-color: #5865f2; }
.btn-discord.copied::before { background-color: #2ecc71; transform: translateX(0); }
.btn-discord.copied span { color: #ffffff; }

/* ==========================================================================
   6. COMPONENTES (AVISO EDAD, LIGHTBOX, ETC.)
   ========================================================================== */
#aviso-edad { position: fixed; inset: 0; background-color: rgba(13, 12, 29, 0.95); backdrop-filter: blur(5px); z-index: 9999; display: flex; justify-content: center; align-items: center; padding: 20px; }
.contenido-aviso { background-color: rgba(22, 20, 42, 0.8); border: 1px solid var(--color-secondary-glow); padding: 40px; border-radius: 16px; text-align: center; width: 100%; max-width: 550px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.contenido-aviso h2 { margin-top: 0; color: var(--color-primary-glow); font-size: 24px; }
#boton-aceptar { background-color: #ffffff; color: var(--color-background); border: none; padding: 14px 28px; font-size: 16px; font-weight: 700; border-radius: 50px; cursor: pointer; margin-top: 30px; transition: all 0.3s; }
#boton-aceptar:hover { background-color: #f0f0f0; transform: scale(1.05); }
.lightbox-overlay { display: none; position: fixed; z-index: 10000; inset: 0; background-color: rgba(13, 12, 29, 0.95); backdrop-filter: blur(10px); justify-content: center; align-items: center; }
.lightbox-overlay.visible { display: flex; }
.lightbox-container { position: relative; padding: 15px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); animation: zoomIn 0.4s ease-out; background: linear-gradient(135deg, var(--color-secondary-glow), #16142a); }
.lightbox-contenido { display: block; max-width: 90vw; max-height: 90vh; border-radius: 8px; }
.cerrar-lightbox { position: absolute; top: -15px; right: -15px; background-color: #fff; color: #2c3e50; width: 35px; height: 35px; line-height: 35px; text-align: center; font-size: 28px; font-weight: bold; border-radius: 50%; cursor: pointer; transition: transform 0.3s ease; }
.cerrar-lightbox:hover { transform: scale(1.1); }
@keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ==========================================================================
   7. REGLAS RESPONSIVAS (MÓVIL) - **PUESTO AL FINAL PARA GANAR PRIORIDAD**
   ========================================================================== */
.mobile-nav-toggle { display: none; z-index: 2000; background: transparent; border: 0; cursor: pointer; width: 2rem; aspect-ratio: 1; background-repeat: no-repeat; background-position: center; transition: background-image 0.2s ease-in-out; }
.mobile-nav-toggle:not([aria-expanded="true"]) { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255, 255, 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.mobile-nav-toggle[aria-expanded="true"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255, 255, 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6l18 18M24 6L6 24'/%3e%3c/svg%3e"); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body > .main-nav { display: none; }

@media (max-width: 900px) {
  
  .header-container { justify-content: space-between; }
  .mobile-nav-toggle { display: block; }
  .main-header .main-nav { display: none; }
  body > .main-nav { display: flex; position: fixed; z-index: 1000; top: 0; left: 0; width: 100vw; max-height: 90vh; flex-direction: column; align-items: flex-start; padding: 5.5rem 5% 2em; background: hsla(248, 22%, 10%, 0.9); backdrop-filter: blur(1rem); transform: translateY(-120%); transition: transform 350ms ease-out; overflow-y: auto; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
  body > .main-nav ul { flex-direction: column; align-items: flex-start; gap: 0.5rem; width: 100%; padding: 0; }
  body > .main-nav li { width: 100%; }
  body > .main-nav a { display: block; width: 100%; font-size: 18px; font-weight: 500; padding: 0.75rem 1.25rem; text-align: left; border-radius: 12px; background-color: transparent; color: var(--color-text-secondary); }
  body > .main-nav a.activo { background-color: #ffffff; color: #0d0c1d; font-weight: 700; display: block; width: 100%; }
  body > .main-nav a:hover:not(.activo) { color: var(--color-text-primary); background-color: rgba(255, 255, 255, 0.1); }
  body > .main-nav[data-visible="true"] { transform: translateY(0%); }
  
  .hero-section { display: flex; flex-direction: column; text-align: center; padding: 40px 5%; gap: 30px; grid-template-columns: 1fr; grid-template-areas: none; }
  .hero-text-start, .hero-text-end, .hero-image { grid-area: unset; }
  .hero-text-end p { margin-left: auto; margin-right: auto; text-align: justify; max-width: 100%; }
  .hero-text-end h2 { text-align: center; }
  .hero-text-end .cta-buttons { justify-content: center; }
  .hero-text-start h1 { font-size: 54px; }
  .hero-image { margin-bottom: 0; }
  
  .portfolio-grid { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; padding: 0; gap: 20px; }
  .portfolio-grid .item-galeria { width: 90%; max-width: 400px; margin: 0 auto; aspect-ratio: 1 / 1; }
  
  .contenido-precios {
    display: grid;
    grid-template-columns: 1fr; 
    grid-template-areas:
      "tabla" 
      "imagen" 
      "nota";
    gap: 30px; 
    width: 100%;
    margin: 0;
  }
  
  .tabla-precios,
  .imagen-ejemplo {
    width: 100%;
    margin: 0;
  }
  
  .imagen-ejemplo {
    max-width: 400px;
    margin: 0 auto;
  }

  .nota-privada {
    max-width: 400px;
    width: 100%;
  }
  
  .contenido-precios table {
    width: 100%;
    min-width: unset; 
  }
  
  .contenido-precios th:first-child,
  .contenido-precios td:first-child {
    width: 70%; 
  }

  .contenido-precios th:last-child,
  .contenido-precios td:last-child {
    width: 30%; 
    text-align: right;
  }
  
  .contact-grid { 
    grid-template-columns: 1fr;
    padding: 0 5%; /* CLAVE: Añade padding para que el contenido no se pegue a los bordes */
  }
}