/* ==========================================================================
   TIPOGRAFÍAS Y MEDIDAS — cambia un valor aquí y se aplica a toda la web
   ========================================================================== */
:root {
  /* Colores por defecto (= tema "negro-naranja"). Los temas de abajo los cambian. */
  --color-fondo: #000000;
  --color-principal: #ff5112;                   /* titulares grandes y enlaces de los lados */
  --color-texto: rgba(255, 255, 255, 0.85);     /* títulos de proyecto, roles, textos */
  --color-secundario: rgba(255, 255, 255, 0.4); /* descripciones y notas (gris) */
  --color-boton: rgba(168, 168, 168, 0.6);      /* flechas del carrusel en el móvil */

  --fuente-texto: "Inter", "Helvetica Neue", Arial, sans-serif;
  --fuente-titulares: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --titulares-peso: 600;

  --ancho-columna: 58%;     /* ancho de la columna central en ordenador */
  --margen: 1.2rem;
  --interlineado: 1.1;
  --linea: calc(1.1rem * var(--interlineado)); /* alto de una línea de texto */
}

/* ==========================================================================
   COMBINACIONES DE COLOR
   Se elige una en contenido.js  →  tema: "hueso-negro"
   Para verlas todas a la vez, abre paletas.html.
   Regla: el color principal va en los titulares y en los enlaces de los lados;
   textos y descripciones siempre en blanco, negro o gris.
   ========================================================================== */

/* --- Fondos oscuros --- */
[data-tema="negro-naranja"] {   /* la actual, tu portfolio de Behance */
  --color-fondo: #000000;
  --color-principal: #ff5112;
  --color-texto: rgba(255, 255, 255, 0.85);
  --color-secundario: rgba(255, 255, 255, 0.4);
}
[data-tema="negro-oliva"] {     /* ref. BECO */
  --color-fondo: #0a0a09;
  --color-principal: #a9ab2d;
  --color-texto: rgba(255, 255, 255, 0.85);
  --color-secundario: rgba(255, 255, 255, 0.4);
}
[data-tema="negro-hueso"] {     /* ref. PAC NYC */
  --color-fondo: #0d0d0d;
  --color-principal: #dcddd2;
  --color-texto: rgba(255, 255, 255, 0.85);
  --color-secundario: rgba(255, 255, 255, 0.4);
}

/* --- Fondos claros --- */
[data-tema="blanco-negro"] {    /* ref. Mia Brooks */
  --color-fondo: #ffffff;
  --color-principal: #000000;
  --color-texto: rgba(0, 0, 0, 0.88);
  --color-secundario: rgba(0, 0, 0, 0.42);
}
[data-tema="hueso-negro"] {     /* ref. Monochrome, Ugly, Compressed */
  --color-fondo: #ebeae3;
  --color-principal: #111111;
  --color-texto: rgba(0, 0, 0, 0.85);
  --color-secundario: rgba(0, 0, 0, 0.45);
}
[data-tema="piedra-negro"] {    /* ref. Nike Mind Science */
  --color-fondo: #dbdacf;
  --color-principal: #111111;
  --color-texto: rgba(0, 0, 0, 0.85);
  --color-secundario: rgba(0, 0, 0, 0.48);
}
[data-tema="hueso-naranja"] {   /* tu naranja sobre claro */
  --color-fondo: #f2f0e9;
  --color-principal: #ff5112;
  --color-texto: rgba(0, 0, 0, 0.85);
  --color-secundario: rgba(0, 0, 0, 0.45);
}
[data-tema="crema-azul"] {      /* ref. Oat Milk #fdf9f2 + Monday Blues #1d56cf */
  --color-fondo: #fdf9f2;
  --color-principal: #1d56cf;
  --color-texto: rgba(0, 0, 0, 0.85);
  --color-secundario: rgba(0, 0, 0, 0.45);
}

/* --- Fondos de color --- */
[data-tema="azul-crema"] {      /* ref. Monday Blues, al revés */
  --color-fondo: #1d56cf;
  --color-principal: #fdf9f2;
  --color-texto: rgba(255, 255, 255, 0.92);
  --color-secundario: rgba(255, 255, 255, 0.62);
}
[data-tema="azul-negro"] {      /* ref. land */
  --color-fondo: #2a5bcc;
  --color-principal: #000000;
  --color-texto: rgba(0, 0, 0, 0.9);
  --color-secundario: rgba(0, 0, 0, 0.6);
}
[data-tema="lima-negro"] {      /* ref. Hideo Kojima */
  --color-fondo: #b6d444;
  --color-principal: #0e0f10;
  --color-texto: rgba(0, 0, 0, 0.88);
  --color-secundario: rgba(0, 0, 0, 0.55);
}
[data-tema="rojo-negro"] {      /* ref. Snake Height */
  --color-fondo: #da0600;
  --color-principal: #000000;
  --color-texto: rgba(0, 0, 0, 0.9);
  --color-secundario: rgba(0, 0, 0, 0.6);
}

/* Tamaño base: crece con la ventana, como la plantilla original */
html { font-size: max(11px, 0.9vw); }

@media (max-width: 767px) {
  html { font-size: min(3.136vw, 13.5px); }
  :root { --margen: 0.84rem; --ancho-columna: 100%; }
}

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; background: var(--color-fondo); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--fuente-texto);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: var(--interlineado);
  color: var(--color-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

p { margin: 0; }
b, strong { font-weight: 650; }

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.55; }
a:active { opacity: 0.7; }
:focus-visible { outline: 1px solid var(--color-principal); outline-offset: 3px; }

::selection { background: var(--color-principal); color: var(--color-fondo); }

/* ==========================================================================
   ELEMENTOS FIJOS: cabecera, fila central y pie
   ========================================================================== */
.fijo {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: var(--margen);
  pointer-events: none;
}
.fijo { color: var(--color-principal); }
.fijo a { pointer-events: auto; }

.cabecera { top: 0; }
.pie { bottom: 0; }
.centro { top: 0; bottom: 0; align-items: center; z-index: 9; }

.menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 1.2em; }

.flecha { font-size: 0.9em; margin-left: 0.1em; }

@media (max-width: 767px) {
  .centro { display: none; }
  /* En el móvil los enlaces del pie se apilan para dejar sitio a "Arriba" */
  .pie { align-items: flex-end; }
  .pie .menu { flex-direction: column; align-items: flex-end; }
  .pie .menu:first-child { align-items: flex-start; }
}

/* ==========================================================================
   SECCIONES
   ========================================================================== */
main { position: relative; padding-bottom: calc(var(--linea) + var(--margen) * 2); }

.seccion {
  position: relative;
  width: var(--ancho-columna);
  margin: 0 auto;
  padding: var(--margen);
  padding-bottom: calc(var(--margen) + var(--linea) * 6); /* aire hasta la siguiente sección */
}

/* La última sección ocupa al menos una pantalla */
main > .seccion:last-of-type {
  min-height: calc(100vh - var(--linea) - var(--margen) * 2);
  min-height: calc(100svh - var(--linea) - var(--margen) * 2);
}

/* Título pequeño centrado ("Información" en la plantilla) */
.titulo-seccion,
.enlace-superior { display: block; text-align: center; }
.titulo-seccion { margin-bottom: calc(var(--linea) * 3); }

/* ---------- Portada ---------- */
.portada { text-align: center; padding-bottom: calc(var(--margen) + var(--linea) * 4); }

.titular {
  margin: 0;
  font-family: var(--fuente-titulares);
  font-weight: var(--titulares-peso);
  font-size: 5.2rem; /* se recalcula para ocupar todo el ancho */
  line-height: 0.75;
  letter-spacing: -0.025em;
  color: var(--color-principal);
  white-space: nowrap;
}
.titular > span { display: inline-block; }

.enlace-superior + .titular { margin-top: calc(var(--linea) * 5); }
.titular + .titular { margin-top: calc(var(--linea) * 3.25); }

.portada-imagen { display: block; margin: calc(var(--linea) * 4) auto 0; height: auto; }

/* ---------- Trabajos ---------- */
.rejilla-trabajos {
  display: grid;
  grid-template-columns: repeat(var(--columnas, 2), minmax(0, 1fr));
  gap: calc(var(--linea) * 4) 1rem;
  align-items: start;
}

@media (max-width: 767px) {
  .rejilla-trabajos { grid-template-columns: minmax(0, 1fr); }
}

.carrusel {
  position: relative;
  aspect-ratio: var(--formato, 3 / 2);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.carrusel.varias { cursor: e-resize; }
.carrusel.varias.hacia-atras { cursor: w-resize; }

.diapositiva { position: absolute; inset: 0; visibility: hidden; }
.diapositiva.activa { visibility: visible; }

.diapositiva img,
.diapositiva video,
.diapositiva iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
}
.diapositiva img { -webkit-user-drag: none; }

/* Zonas laterales para pasar de diapositiva encima de vídeos de YouTube/Vimeo */
.zona { position: absolute; top: 0; bottom: 0; width: max(40px, 20%); z-index: 2; }
.zona-atras { left: 0; }
.zona-adelante { right: 0; }

/* Flechas redondas: solo en pantallas táctiles o estrechas */
.boton-carrusel {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-boton);
  color: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}
.boton-carrusel svg { display: block; width: 100%; height: 100%; }
.boton-carrusel:active { opacity: 0.7; }
.boton-atras { left: 10px; }
.boton-adelante { right: 10px; }

@media (hover: none), (max-width: 767px) {
  .boton-carrusel { display: block; }
}

.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 1rem;
  margin-top: var(--linea);
}
.ficha .descripcion { grid-column: 1 / -1; }
.descripcion,
.nota { color: var(--color-secundario); margin-top: var(--linea); }

/* ---------- Columnas (Servicios, Sobre mí…) ---------- */
.columnas {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1rem;
  align-items: start;
}
.columna { grid-column: span var(--ancho, 3); }

@media (max-width: 767px) {
  .columnas { grid-template-columns: minmax(0, 1fr); row-gap: 4rem; }
  .columna { grid-column: auto; }
  .columna:empty { display: none; }
}

/* ---------- Texto ---------- */
.texto-grande {
  font-size: 2.4rem;
  line-height: 1.15;
}

/* ---------- Enlace "Arriba" ---------- */
.arriba {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: var(--ancho-columna);
  margin: 0 auto;
  padding: var(--margen);
  text-align: center;
}