/* ============================================================
   style.css
   Hoja de estilos compartida por las DOS secciones del sitio.

   La idea clave: el HTML es el mismo, lo único que cambia es el
   atributo data-tema del <body>. Según ese atributo, el navegador
   usa una paleta de colores u otra.
   ============================================================ */

/* ------------------------------------------------------------
   VALORES POR DEFECTO
   Sirven para páginas sin data-tema (por ejemplo el portal de
   entrada), para que las variables siempre tengan algún valor.
   ------------------------------------------------------------ */
:root {
  --color-principal: #1E3A8A;
  --color-oscuro:    #0B1437;
  --color-marino:    #152C5B;
  --color-acento:    #5B3E96;
  --color-suave:     #F5F6FA;
  --color-texto:     #1F1F1F;
}

/* ------------------------------------------------------------
   PALETA MASCULINA — azul, azul noche, marino, lila oscuro
   ------------------------------------------------------------ */
body[data-tema="masculino"] {
  --color-principal: #1E3A8A;   /* azul */
  --color-oscuro:    #0B1437;   /* azul noche */
  --color-marino:    #152C5B;   /* marino */
  --color-acento:    #5B3E96;   /* lila oscuro */
  --color-suave:     #E8ECF7;   /* fondo claro de la sección */
  --color-texto:     #0B1437;
}

/* ------------------------------------------------------------
   PALETA FEMENINA — rosa, fucsia, pink
   ------------------------------------------------------------ */
body[data-tema="femenino"] {
  --color-principal: #D6336C;   /* fucsia */
  --color-oscuro:    #6D1B3E;   /* rosa vino */
  --color-marino:    #A61E55;   /* fucsia oscuro */
  --color-acento:    #FF69B4;   /* pink */
  --color-suave:     #FDE8F1;   /* fondo claro de la sección */
  --color-texto:     #6D1B3E;
}

/* ------------------------------------------------------------
   ESTILOS GENERALES (usan las variables de arriba)
   ------------------------------------------------------------ */
body {
  background-color: var(--color-suave);
  color: var(--color-texto);
}

.encabezado-tema {
  background: linear-gradient(135deg, var(--color-oscuro), var(--color-principal));
  color: #FFFFFF;
}

.pie-tema {
  background-color: var(--color-oscuro);
  color: #FFFFFF;
}

/* Botones que siguen el color de la sección */
.btn-tema {
  background-color: var(--color-principal);
  border-color: var(--color-principal);
  color: #FFFFFF;
}

.btn-tema:hover {
  background-color: var(--color-oscuro);
  border-color: var(--color-oscuro);
  color: #FFFFFF;
}

.btn-tema-suave {
  background-color: transparent;
  border: 1px solid var(--color-acento);
  color: var(--color-acento);
}

.btn-tema-suave:hover {
  background-color: var(--color-acento);
  color: #FFFFFF;
}

.badge-tema {
  background-color: var(--color-acento) !important;
}

.precio {
  color: var(--color-principal);
}

/* ------------------------------------------------------------
   BARRA DE ICONOS (margen superior)
   Los dos iconos que permiten saltar entre secciones.
   ------------------------------------------------------------ */
.barra-iconos {
  background-color: var(--color-oscuro);
  padding: 0.5rem 0;
}

.icono-seccion {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.icono-seccion:hover {
  transform: scale(1.1);
  color: #FFFFFF;
}

/* El icono de la sección en la que estamos parados se resalta */
.icono-seccion.activo {
  background-color: var(--color-acento);
  border-color: #FFFFFF;
}

.icono-seccion svg {
  width: 24px;
  height: 24px;
}

/* ------------------------------------------------------------
   TARJETAS DE PRODUCTO
   ------------------------------------------------------------ */
.card {
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18) !important;
}

#lista-seleccion li {
  animation: aparecer 0.2s ease;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ------------------------------------------------------------
   PORTAL DE ENTRADA (index.html)
   Pantalla dividida en dos mitades.
   ------------------------------------------------------------ */
.portal {
  min-height: 100vh;
}

.portal-mitad {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #FFFFFF;
  text-decoration: none;
  padding: 2rem;
  transition: filter 0.2s ease;
}

.portal-mitad:hover {
  filter: brightness(1.15);
  color: #FFFFFF;
}

.portal-hombres {
  background: linear-gradient(135deg, #0B1437, #1E3A8A 60%, #5B3E96);
}

.portal-mujeres {
  background: linear-gradient(135deg, #6D1B3E, #D6336C 60%, #FF69B4);
}

.portal-icono {
  width: 90px;
  height: 90px;
  margin-bottom: 1rem;
}

/* En pantallas grandes, las dos mitades ocupan toda la altura */
@media (min-width: 768px) {
  .portal-mitad {
    min-height: 100vh;
  }
}