/* ==========================================================================
   DUAL STUDIO — Hoja de estilos principal
   Cumple el indicador 10 (4 tipos de selectores) y 11 (>=2 estilos para
   texto, imagen, listas, body y div/etiqueta semántica)
   Tipos de selector usados en este archivo:
     - Selector de ELEMENTO      (ej: body, h1, img, ul)
     - Selector de CLASE         (ej: .btn-studio, .card-proyecto)
     - Selector de ID            (ej: #hero-principal, #nav-principal)
     - Selector de ATRIBUTO/PSEUDO-CLASE (ej: a[target="_blank"], .nav-link:hover)
   ========================================================================== */

/* ---------- Variables de marca ---------- */
:root {
  --azul-studio: #1B3A6B;
  --rojo-studio: #C8262A;
  --negro-m1: #141414;
  --rosa-m2: #E0567C;
  --azul-m2: #2E5EAA;
  --fondo-claro: #F4F5F7;
  --texto-principal: #1A1A1A;
  --fuente-nombre: 'Montserrat', sans-serif;
  --fuente-texto: 'Inter', Arial, sans-serif;
}

/* ---------- SELECTOR DE ELEMENTO: body (estilo 1 y 2 de "body") ---------- */
body {
  font-family: var(--fuente-texto);
  color: var(--texto-principal);
  background-color: var(--fondo-claro);
  line-height: 1.6;
}

/* Selector de elemento adicional para jerarquía tipográfica */
h1, h2, h3 {
  font-family: var(--fuente-texto);
  font-weight: 700;
  color: var(--azul-studio);
}

/* ---------- SELECTOR DE ELEMENTO: img (estilo 1 y 2 de "imagen") ---------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

img.foto-perfil {
  border: 4px solid var(--rojo-studio);
  border-radius: 8px;
}

/* ---------- SELECTOR DE ELEMENTO: ul / li (estilo 1 y 2 de "listas") ---------- */
ul {
  list-style: none;
  padding-left: 0;
}

ul.lista-habilidades li {
  padding: 0.35rem 0;
  border-bottom: 1px solid #ddd;
}

/* ---------- SELECTOR DE CLASE: div / etiqueta semántica (estilo 1 y 2) ---------- */
.seccion {
  padding: 3rem 0;
}

.seccion-alterna {
  background-color: #ffffff;
}

/* ---------- Logotipo: única aplicación de Montserrat (punto 6 del brief) ---------- */
.logo-nombre {
  font-family: var(--fuente-nombre);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- SELECTOR DE ID: encabezado hero de la página principal ---------- */
#hero-principal {
  background: linear-gradient(120deg, var(--azul-studio) 0%, var(--negro-m1) 55%, var(--rojo-studio) 100%);
  color: #fff;
  padding: 4rem 0;
}

/* ---------- SELECTOR DE ID: barra de navegación ---------- */
#nav-principal {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ---------- SELECTOR DE ATRIBUTO: enlaces externos (indicador 9) ---------- */
a[target="_blank"] {
  border-bottom: 2px dashed var(--rojo-studio);
  text-decoration: none;
}

/* ---------- SELECTOR DE PSEUDO-CLASE: efecto roll-over del menú (indicador 6) ---------- */
.nav-link {
  color: var(--texto-principal) !important;
  font-weight: 600;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.nav-link:hover,
.nav-link:focus {
  color: #fff !important;
  background-color: var(--rojo-studio);
  border-radius: 4px;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--azul-studio);
  color: #fff;
}

/* ---------- Botones de marca ---------- */
.btn-studio {
  background-color: var(--rojo-studio);
  border-color: var(--rojo-studio);
  color: #fff;
  font-weight: 600;
}

.btn-studio:hover {
  background-color: var(--azul-studio);
  border-color: var(--azul-studio);
  color: #fff;
}

/* ---------- Tarjetas de miembro (currículum) ---------- */
.card-miembro1 {
  border-top: 6px solid var(--rojo-studio);
  background-color: #fafafa;
}

.card-miembro2 {
  border-top: 6px solid var(--azul-m2);
  background-color: #fdf6f8;
}

/* ---------- Texto resaltado dentro de párrafos (indicador 7) ---------- */
mark {
  background-color: var(--rojo-studio);
  color: #fff;
  padding: 0 0.25rem;
}

/* ---------- Tarjetas de proyectos del portafolio ---------- */
.card-proyecto {
  overflow: hidden;
  border: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.card-proyecto:hover {
  transform: translateY(-6px);
}

/* ---------- Carrusel CSS puro (indicador 8) ---------- */
.carrusel-css {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding-bottom: 1rem;
}

.carrusel-css figure {
  flex: 0 0 80%;
  scroll-snap-align: center;
  margin: 0;
}

@media (min-width: 768px) {
  .carrusel-css figure {
    flex: 0 0 32%;
  }
}

/* ---------- Footer ---------- */
footer {
  background-color: var(--negro-m1);
  color: #fff;
}

footer a {
  color: var(--rojo-studio);
}

/* ---------- Ajustes responsivos generales (indicador 14) ---------- */
@media (max-width: 576px) {
  #hero-principal {
    padding: 2.5rem 0;
    text-align: center;
  }
  .logo-nombre {
    font-size: 1.6rem;
  }
}