/* 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." */

body {/* ================================================================
   1. VARIABLES GLOBALES — PALETA, TIPOGRAFÍA Y MEDIDAS
   ================================================================
   Este es el panel de control del sitio. Cambia cualquier valor
   aquí y se actualizará en TODO el sitio automáticamente, porque
   el resto del CSS usa estas variables (var(--nombre)) en lugar
   de colores/medidas "duras".

   Paleta pensada como "sala de museo": pared de yeso cálido,
   marcas de madera oscura y detalles en bronce oxidado y latón.
   ================================================================ */
:root{
  /* --- Colores de fondo --- */
  --color-bg:            #E7E1D2; /* pared principal (yeso cálido) */
  --color-bg-alt:        #DDD6C4; /* franjas/secciones alternas, un poco más oscura */
  --color-bg-card:       #F1ECDF; /* fondo de tarjetas y paneles */

  /* --- Colores de texto --- */
  --color-ink:           #211D19; /* texto principal, casi negro cálido */
  --color-ink-soft:      #56503F; /* texto secundario / párrafos largos */

  /* --- Colores de acento y marco --- */
  --color-frame:         #2E2A25; /* "marco de madera" oscuro */
  --color-accent:        #3F5744; /* verde bronce — botones, enlaces activos */
  --color-accent-dark:   #2E4033; /* hover del acento principal */
  --color-accent-2:      #B08D57; /* latón — placas, números de catálogo */
  --color-line:          rgba(33,29,25,0.16); /* líneas divisorias finas */

  /* --- Tipografía --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Work Sans', -apple-system, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  /* --- Medidas reutilizables --- */
  --max-width: 1180px;
  --radio: 2px;                 /* casi sin bordes redondeados: look de marco recto */
  --transicion: 0.45s cubic-bezier(.4,0,.2,1);
  --sombra-marco: 0 20px 45px -14px rgba(33,29,25,0.38);
  --sombra-marco-hover: 0 28px 60px -14px rgba(33,29,25,0.48);
}

/* ================================================================
   2. RESET BÁSICO
   ================================================================
   Normaliza márgenes/paddings y fija box-sizing para que los
   anchos con padding sean predecibles en todo el sitio.
   ================================================================ */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor: pointer; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; font-weight:500; }
p{ margin:0; }

/* Accesibilidad: siempre visible el foco al navegar con teclado */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Respeta a quienes desactivan animaciones en su sistema operativo */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.envoltorio{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

/* ================================================================
   3. BARRA DE NAVEGACIÓN
   ================================================================
   Barra fija arriba. Los enlaces usan atributos data-pagina que
   el JS de la sección 9 (NAVEGACIÓN) lee para mostrar/ocultar
   secciones sin recargar la página (comportamiento tipo SPA).

   Para AÑADIR una página nueva:
   1) Agrega un <button data-pagina="tu-id"> aquí.
   2) Agrega un <section id="tu-id" class="pagina"> en el <body>.
   Con eso el sistema de navegación ya la reconoce.
   ================================================================ */
.barra-nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  background: rgba(231,225,210,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
}
.barra-nav .envoltorio{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 76px;
}
.logo{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.logo strong{ color: var(--color-accent); }

.menu-principal{
  display:flex;
  gap: 36px;
}
.enlace-nav{
  background:none; border:none;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}
.enlace-nav:hover{ color: var(--color-ink); }
.enlace-nav[aria-current="page"]{
  color: var(--color-ink);
  border-bottom-color: var(--color-accent-2);
}

/* Botón hamburguesa: solo visible en móvil (ver media queries, sección 10) */
.boton-menu-movil{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding: 8px;
}
.boton-menu-movil span{
  width: 24px; height: 2px;
  background: var(--color-ink);
  display:block;
}

/* ================================================================
   4. ESTRUCTURA GENERAL DE "PÁGINAS"
   ================================================================
   Cada <section class="pagina"> representa una página del sitio.
   Solo la que tiene la clase "pagina-activa" es visible; el resto
   se ocultan con display:none. El JS de navegación (sección 9)
   se encarga de alternar esta clase.
   ================================================================ */
.pagina{
  display:none;
  padding-top: 76px; /* deja espacio para la barra fija */
  animation: aparecer 0.5s ease;
}
.pagina-activa{ display:block; }

@keyframes aparecer{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

.franja{ padding: 96px 0; }
.franja-alt{ background: var(--color-bg-alt); }

.encabezado-seccion{
  max-width: 640px;
  margin-bottom: 56px;
}
.superindice{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
}
.titulo-seccion{
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-style: italic;
  font-weight: 500;
}
.texto-suave{ color: var(--color-ink-soft); margin-top:16px; font-size:1.02rem; }

/* ================================================================
   5. PÁGINA "INICIO" — HERO + CARRUSEL
   ================================================================ */
.hero{
  padding: 64px 0 80px;
}
.hero .envoltorio{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items:center;
}
.hero-titulo{
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  line-height: 1.05;
}
.hero-titulo em{
  color: var(--color-accent);
  font-style: italic;
}
.hero-texto{
  margin-top: 24px;
  max-width: 46ch;
  color: var(--color-ink-soft);
  font-size: 1.08rem;
}
.hero-acciones{
  margin-top: 36px;
  display:flex;
  gap: 18px;
  flex-wrap:wrap;
}

/* Botones reutilizables en todo el sitio */
.boton{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 14px 26px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radio);
  transition: transform var(--transicion), background var(--transicion), color var(--transicion);
  border: 1px solid var(--color-frame);
}
.boton-solido{
  background: var(--color-frame);
  color: var(--color-bg);
}
.boton-solido:hover{ background: var(--color-accent-dark); border-color: var(--color-accent-dark); transform: translateY(-2px); }
.boton-fantasma{
  background: transparent;
  color: var(--color-ink);
}
.boton-fantasma:hover{ background: var(--color-ink); color: var(--color-bg); transform: translateY(-2px); }

/* --- Pieza destacada del hero (marco decorativo) --- */
.marco-hero{
  aspect-ratio: 4/5;
  background: linear-gradient(155deg, #3F5744, #24312A 70%);
  border: 14px solid var(--color-frame);
  box-shadow: var(--sombra-marco);
  position: relative;
  display:flex;
  align-items:flex-end;
  padding: 24px;
}
.marco-hero .placa-mini{
  background: rgba(231,225,210,0.92);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* ================================================================
   6. CARRUSEL DE IMÁGENES ("Sala principal")
   ================================================================
   Estructura generada por JS (ver sección 11) a partir del arreglo
   `datosCarrusel`. Es un carrusel de una diapositiva visible a la
   vez, con botones anterior/siguiente, puntos de navegación y
   reproducción automática (que se pausa al pasar el mouse o al
   enfocar con teclado).

   PARA EDITAR el contenido del carrusel: ve al bloque
   `datosCarrusel` en el <script> y agrega/quita objetos del
   arreglo. No necesitas tocar este CSS.
   ================================================================ */
.carrusel{
  position: relative;
  margin-top: 8px;
}
.carrusel-ventana{
  overflow: hidden;
  border-radius: var(--radio);
}
.carrusel-pista{
  display:flex;
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}
.carrusel-slide{
  min-width: 100%;
  display:grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-line);
}
.placeholder-arte{
  position: relative;
  aspect-ratio: 16/10;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color: rgba(231,225,210,0.75);
  font-family: var(--font-mono);
  text-align:center;
}
/* Cinco "tonos" de placeholder para diferenciar visualmente cada
   obra sin necesitar imágenes reales todavía. */
.tono-1{ background: linear-gradient(140deg, #3F5744, #23302A); }
.tono-2{ background: linear-gradient(140deg, #6B4A32, #2E2119); }
.tono-3{ background: linear-gradient(140deg, #7A6A3F, #362D18); }
.tono-4{ background: linear-gradient(140deg, #4A5A6B, #1E262E); }
.tono-5{ background: linear-gradient(140deg, #6B3F52, #2E1B24); }

.placeholder-arte::before{
  content: "";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px);
}
.placeholder-etiqueta{
  position: relative;
  z-index:1;
  padding: 18px;
}
.placeholder-etiqueta .num{
  display:block;
  font-size: 2.2rem;
  font-weight:700;
  color: rgba(231,225,210,0.9);
}
.placeholder-etiqueta small{
  display:block;
  margin-top:6px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform:uppercase;
}

.carrusel-info{
  padding: 32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.placa-cat{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-2);
}
.carrusel-info h3{
  font-size: 1.6rem;
  font-style: italic;
  margin-top: 10px;
}
.carrusel-info p{
  margin-top: 12px;
  color: var(--color-ink-soft);
  font-size: 0.96rem;
}
.ficha-tecnica{
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--color-ink-soft);
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

/* --- Controles del carrusel --- */
.carrusel-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 46px; height:46px;
  border-radius:50%;
  border:1px solid var(--color-frame);
  background: var(--color-bg);
  font-size:1.3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background var(--transicion), color var(--transicion);
}
.carrusel-btn:hover{ background: var(--color-frame); color: var(--color-bg); }
.carrusel-anterior{ left: -22px; }
.carrusel-siguiente{ right: -22px; }

.carrusel-puntos{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin-top: 22px;
}
.punto{
  width:8px; height:8px;
  border-radius:50%;
  background: var(--color-line);
  border: none;
  padding:0;
  transition: background var(--transicion), transform var(--transicion);
}
.punto[aria-current="true"]{
  background: var(--color-accent-2);
  transform: scale(1.3);
}

/* ================================================================
   7. PÁGINA "PROYECTOS" — FILTROS + GRID DE TARJETAS
   ================================================================
   Las tarjetas se generan por JS desde el arreglo `datosProyectos`
   (sección 12 del <script>). Los botones de filtro leen el
   atributo data-categoria de cada tarjeta para mostrar/ocultar.

   PARA AGREGAR UN PROYECTO nuevo: añade un objeto al arreglo
   `datosProyectos`. La tarjeta y el filtro se actualizan solos.
   ================================================================ */
.filtros{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 44px;
}
.filtro-btn{
  background: transparent;
  border: 1px solid var(--color-frame);
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radio);
  transition: background var(--transicion), color var(--transicion);
}
.filtro-btn:hover{ background: rgba(46,42,37,0.08); }
.filtro-btn[aria-pressed="true"]{
  background: var(--color-frame);
  color: var(--color-bg);
}

.grid-proyectos{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.tarjeta-proyecto{
  background: var(--color-bg-card);
  border: 1px solid var(--color-line);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta-proyecto:hover{
  transform: translateY(-6px);
  box-shadow: var(--sombra-marco);
}
.tarjeta-proyecto .placeholder-arte{ aspect-ratio: 4/3; }
.tarjeta-proyecto .placa-tarjeta{ padding: 20px; }
.tarjeta-proyecto h3{ font-size:1.15rem; font-style:italic; margin-top:8px; }
.tarjeta-proyecto p{ margin-top:10px; font-size:0.9rem; color: var(--color-ink-soft); }
.tarjeta-proyecto .ficha-tecnica{ margin-top: 14px; }

.tarjeta-oculta{ display:none; }

/* ================================================================
   8. PÁGINA "INFORMACIÓN GENERAL" — BIO + TRAYECTORIA + TÉCNICAS
   ================================================================ */
.bio-grid{
  display:grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 56px;
  align-items:start;
}
.marco-retrato{
  aspect-ratio: 3/4;
  border: 12px solid var(--color-frame);
  box-shadow: var(--sombra-marco);
}
.lista-tecnicas{
  margin-top: 24px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.lista-tecnicas li{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  border: 1px solid var(--color-line);
  color: var(--color-ink-soft);
}

.linea-tiempo{
  margin-top: 20px;
  border-top: 1px solid var(--color-line);
}
.linea-tiempo li{
  display:grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-line);
}
.linea-tiempo .anio{
  font-family: var(--font-mono);
  color: var(--color-accent-2);
  font-size: 0.95rem;
}
.linea-tiempo h4{ font-size:1.05rem; font-weight:500; }
.linea-tiempo p{ margin-top:4px; color: var(--color-ink-soft); font-size:0.92rem; }

/* ================================================================
   9. PÁGINA "CONTACTO" — FORMULARIO + DATOS
   ================================================================ */
.contacto-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 64px;
}
.campo{
  margin-bottom: 26px;
}
.campo label{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
  margin-bottom: 8px;
}
.campo input,
.campo textarea{
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-frame);
  padding: 10px 2px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
  transition: border-color var(--transicion);
}
.campo input:focus,
.campo textarea:focus{
  border-bottom-color: var(--color-accent);
  outline: none;
}
.campo textarea{ resize: vertical; min-height: 110px; }

.mensaje-envio{
  margin-top: 18px;
  padding: 14px 18px;
  background: rgba(63,87,68,0.12);
  border-left: 3px solid var(--color-accent);
  font-size: 0.9rem;
  display:none;
}
.mensaje-envio.visible{ display:block; }

.panel-info-contacto{
  background: var(--color-bg-card);
  border: 1px solid var(--color-line);
  padding: 32px;
}
.panel-info-contacto h3{ font-style: italic; font-size:1.2rem; }
.dato-contacto{
  margin-top: 20px;
}
.dato-contacto span{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--color-accent-2);
  margin-bottom: 4px;
}
.redes{
  margin-top: 28px;
  display:flex;
  gap: 14px;
}
.redes a{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-frame);
  padding-bottom: 2px;
}

/* ================================================================
   10. PIE DE PÁGINA
   ================================================================ */
.pie{
  border-top: 1px solid var(--color-line);
  padding: 40px 0;
}
.pie .envoltorio{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap: 16px;
}
.pie p{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ================================================================
   11. RESPONSIVE — TABLET Y MÓVIL
   ================================================================
   A partir de 900px de ancho se apilan las columnas y aparece el
   botón de menú hamburguesa. A partir de 560px se reducen paddings
   y se pasa el grid de proyectos a una sola columna.
   ================================================================ */
@media (max-width: 900px){
 
  background-color: white;
  color: black;
  font-family: Verdana;
}