/* ============================================================
   ePortfolio de María Fernández Gago — base compartida
   Tokens, tipografías, navegación, pie, botones y módulos.
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrumentsans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrumentsans-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("/assets/fonts/silkscreen.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --noche: #120c13;
  --noche-2: #1b0f1c;
  --plum: #2b1226;
  --vino: #541732;
  --brasa: #c22e35;
  --naranja: #e96a1c;
  --ambar: #f2a81f;
  --alba: #f7dda8;
  --papel: #fbf4e7;
  --papel-2: #f3e6cd;
  --blanco: #fffdf8;
  --tinta: #2a161f;
  --tinta-2: #6d4a52;
  --crema: #f7e8d2;
  --fucsia: #e23a97;
  --turquesa: #0e9e96;
  --turquesa-osc: #0b7d76;
  --lima: #9bb905;
  --azul: #0573d7;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --pixel: "Silkscreen", "Courier New", monospace;
  --ancho: 1120px;
  --transicion: cubic-bezier(0.22, 0.8, 0.24, 1);
  --c-fondo: var(--papel);
  --c-texto: var(--tinta);
  --c-texto-suave: var(--tinta-2);
  --c-eyebrow: var(--brasa);
  --c-borde: rgba(42, 22, 31, 0.14);
  --c-nav: var(--tinta);
  --c-nav-suave: rgba(42, 22, 31, 0.8);
  --c-nav-borde: rgba(42, 22, 31, 0.35);
  --c-nav-fondo: rgba(251, 244, 231, 0.78);
  --c-acento-interactivo: var(--turquesa-osc);
}

body.tema-oscuro {
  --c-fondo: var(--noche);
  --c-texto: var(--crema);
  --c-texto-suave: rgba(247, 232, 210, 0.72);
  --c-eyebrow: var(--ambar);
  --c-borde: rgba(247, 232, 210, 0.16);
  --c-nav: var(--crema);
  --c-nav-suave: rgba(247, 232, 210, 0.82);
  --c-nav-borde: rgba(247, 232, 210, 0.35);
  --c-nav-fondo: rgba(18, 12, 19, 0.72);
  --c-acento-interactivo: var(--ambar);
}
body.tema-oscuro.zona-clara {
  --c-nav: var(--tinta);
  --c-nav-suave: rgba(42, 22, 31, 0.8);
  --c-nav-borde: rgba(42, 22, 31, 0.35);
  --c-nav-fondo: rgba(251, 244, 231, 0.78);
}
body[data-nav-oscura]:not(.nav-pasada) {
  --c-nav: var(--crema);
  --c-nav-suave: rgba(247, 232, 210, 0.82);
  --c-nav-borde: rgba(247, 232, 210, 0.35);
  --c-nav-fondo: rgba(18, 12, 19, 0.72);
  --c-eyebrow: var(--ambar);
}

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

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

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-texto);
  background-color: var(--c-fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--fucsia); color: #fff; }

a { color: var(--c-acento-interactivo); text-underline-offset: 3px; }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--c-acento-interactivo);
  outline-offset: 3px;
  border-radius: 4px;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- piezas tipográficas ---------- */

.eyebrow {
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-eyebrow);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

h1, h2, h3 { text-wrap: balance; }

.titulo-modulo {
  font-family: var(--serif);
  font-weight: 560;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 18px 0 22px;
}

.texto-modulo {
  max-width: 62ch;
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  color: var(--c-texto-suave);
}

.chip-pixel {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 5px 9px 4px;
  border: 1px solid color-mix(in srgb, var(--c-eyebrow) 55%, transparent);
  border-radius: 6px;
  color: var(--c-eyebrow);
  white-space: nowrap;
}

/* ---------- estructura ---------- */

main { position: relative; z-index: 1; }

.modulo { position: relative; padding: clamp(88px, 12vh, 150px) 24px; }
.modulo[hidden] { display: none; }
.contenido { max-width: var(--ancho); margin: 0 auto; }

/* ---------- revelados ---------- */

.rvl, .rvl-izq, .rvl-der, .rvl-escala {
  opacity: 0;
  transition: opacity 0.9s var(--transicion), transform 0.9s var(--transicion);
  transition-delay: var(--d, 0s);
}
.rvl { transform: translateY(26px); }
.rvl-izq { transform: translateX(-38px); }
.rvl-der { transform: translateX(38px); }
.rvl-escala { transform: scale(0.92); }
.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rvl, .rvl-izq, .rvl-der, .rvl-escala { opacity: 1; transform: none; transition: none; }
}

/* ---------- navegación global ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(18px, 3vw, 34px);
  transition: background-color 0.4s;
}
.nav.fija {
  background: var(--c-nav-fondo);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--c-nav) 12%, transparent);
}
/* cuando la barra cambia de polaridad —de clara sobre la noche a oscura sobre
   el papel, o al revés— el cambio va sin fundido: cruzar los dos estados poco
   a poco deja el menú ilegible mientras dura el fundido */
body.nav-conmutando .nav,
body.nav-conmutando .nav * {
  transition: none !important;
}

/* ---------- la marca ----------
   Un solo logotipo, leído de un tirón: el aro de luz, una pleca de ámbar que
   hace de bisagra y la firma en una línea —«e-portfolio de» en versalitas
   discretas y el nombre en la serif de la casa, que es lo que debe pesar—.
   Nada de cajas: el ámbar entra como acento, no como marco. */

.nav-izq {
  display: flex;
  align-items: center;
  min-width: 0;
}
.nav-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--c-nav);
  padding: 5px 12px 5px 5px;
  border-radius: 14px;
  min-width: 0;
  transition: background-color 0.3s;
}
.nav-marca:hover { background: color-mix(in srgb, var(--c-nav) 7%, transparent); }
.nav-marca__icono {
  display: block;
  width: 36px;
  height: 36px;
  overflow: visible;
  flex: 0 0 auto;
  transition: transform 0.5s var(--transicion);
}
.nav-marca:hover .nav-marca__icono { transform: rotate(-14deg); }
.nav-marca__icono .marca-halo { transition: opacity 0.4s, r 0.4s var(--transicion); }
.nav-marca:hover .nav-marca__icono .marca-halo { opacity: 0.42; }

/* la pleca: un filo de ámbar que separa el aro de la firma y crece al pasar
   por encima, como si el aro empujara la luz hacia el nombre */
.nav-marca__pleca {
  flex: 0 0 auto;
  width: 2px;
  height: 24px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--ambar) 22%,
    var(--ambar) 78%,
    transparent
  );
  transition: height 0.4s var(--transicion), opacity 0.3s;
  opacity: 0.85;
}
.nav-marca:hover .nav-marca__pleca { height: 30px; opacity: 1; }

/* la firma, en una sola línea y con su espacio de verdad entre las partes */
.nav-marca__texto {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.nav-marca__de {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-nav) 72%, transparent);
  white-space: nowrap;
  transition: color 0.3s;
}
.nav-marca:hover .nav-marca__de { color: var(--ambar); }
.nav-marca__nombre {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.004em;
  color: var(--c-nav);
  white-space: nowrap;
}
/* sobre la portada oscura el logotipo va sin fondo: un velo mínimo debajo de
   las letras evita que la fotografía se las coma */
body[data-nav-oscura]:not(.nav-pasada) .nav-marca__de,
body[data-nav-oscura]:not(.nav-pasada) .nav-marca__nombre {
  text-shadow: 0 1px 10px rgba(18, 12, 19, 0.55);
}

/* ---------- los enlaces ---------- */

.nav-enlaces {
  display: flex;
  gap: 2px;
  list-style: none;
  align-items: center;
}
.nav-enlaces a {
  position: relative;
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--c-nav-suave);
  transition: color 0.25s, background-color 0.25s;
  padding: 8px clamp(9px, 1.1vw, 14px);
  border-radius: 999px;
}
.nav-enlaces a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-eyebrow);
  transform: translate(-50%, 6px) scale(0.2);
  opacity: 0;
  transition: transform 0.3s var(--transicion), opacity 0.3s;
}
.nav-enlaces a:hover {
  color: var(--c-nav);
  background: color-mix(in srgb, var(--c-nav) 8%, transparent);
}
.nav-enlaces a[aria-current="page"] { color: var(--c-nav); font-weight: 650; }
.nav-enlaces a[aria-current="page"]::after { opacity: 1; transform: translate(-50%, 0) scale(1); }
.nav-menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--c-nav-borde);
  border-radius: 999px;
  color: var(--c-nav);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  padding: 9px 16px;
  cursor: pointer;
  align-items: center;
  gap: 8px;
}
.nav-menu-btn svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .nav-enlaces { display: none; }
  .nav-menu-btn { display: inline-flex; }
}
/* con los cinco enlaces todavía a la vista, la firma cede un punto de
   tamaño antes que empujar al menú */
@media (max-width: 1040px) {
  .nav-marca__de { font-size: 9.5px; letter-spacing: 0.12em; }
  .nav-marca__nombre { font-size: 17.5px; }
}
/* al estrecharse, la firma se va desnudando por orden: primero cae el
   «e-portfolio de», luego el nombre encoge y, en lo más angosto, se queda
   solo el aro */
@media (max-width: 720px) {
  .nav-marca { gap: 10px; }
  .nav-marca__de { display: none; }
  .nav-marca__nombre { font-size: 17px; }
}
@media (max-width: 500px) {
  .nav-marca { gap: 9px; padding-right: 8px; }
  .nav-marca__icono { width: 32px; height: 32px; }
  .nav-marca__pleca { height: 20px; }
  .nav-marca__nombre { font-size: 15.5px; }
}
@media (max-width: 380px) {
  .nav-marca__pleca { display: none; }
  .nav-marca__nombre { display: none; }
}

/* menú móvil a pantalla completa */
.velo-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: color-mix(in srgb, var(--noche) 97%, transparent);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--transicion), visibility 0.35s;
}
.velo-menu.abierto { opacity: 1; visibility: visible; }
.velo-menu ul { list-style: none; text-align: center; display: grid; gap: 6px; }
.velo-menu a {
  font-family: var(--serif);
  font-weight: 520;
  font-style: italic;
  font-size: clamp(2rem, 8vw, 3.2rem);
  color: var(--crema);
  text-decoration: none;
  display: inline-block;
  padding: 6px 18px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--transicion), transform 0.5s var(--transicion), color 0.25s;
  transition-delay: var(--d, 0s);
}
.velo-menu.abierto a { opacity: 1; transform: none; }
.velo-menu a:hover, .velo-menu a[aria-current="page"] { color: var(--ambar); }
.velo-menu .cerrar-menu {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid rgba(247, 232, 210, 0.3);
  border-radius: 50%;
  color: var(--crema);
  cursor: pointer;
}
.velo-menu .cerrar-menu svg { width: 18px; height: 18px; }
.velo-menu .chip-pixel { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: var(--ambar); border-color: rgba(242, 168, 31, 0.5); }
@media (prefers-reduced-motion: reduce) {
  .velo-menu, .velo-menu a { transition: none; }
}

/* ---------- botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s var(--transicion), background-color 0.25s, color 0.25s, border-color 0.25s;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sol { background: var(--tinta); color: var(--papel); }
.btn-sol:hover { background: var(--brasa); color: #fff; }
.btn-borde {
  border-color: color-mix(in srgb, var(--c-texto) 35%, transparent);
  color: var(--c-texto);
  background: transparent;
}
.btn-borde:hover { border-color: var(--brasa); color: var(--brasa); }
.zona-oscura .btn-sol, body.tema-oscuro .modulo-oscuro .btn-sol { background: var(--ambar); color: var(--tinta); }
.zona-oscura .btn-sol:hover { background: var(--alba); color: var(--tinta); }
.zona-oscura .btn-borde { border-color: rgba(247, 232, 210, 0.38); color: var(--crema); }
.zona-oscura .btn-borde:hover { border-color: var(--ambar); color: var(--ambar); }

/* ---------- módulos genéricos ---------- */

.mod-cabecera { margin-bottom: clamp(26px, 4vh, 44px); }

/* contadores */
.mod-contadores .fila {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 30px);
}
@media (max-width: 860px) { .mod-contadores .fila { grid-template-columns: repeat(2, 1fr); } }
.contador { border-top: 2px solid var(--brasa); padding-top: 16px; }
.contador .cifra {
  font-family: var(--serif);
  font-weight: 580;
  font-size: clamp(2.6rem, 5.4vw, 4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.contador .etiqueta { font-size: 13.5px; color: var(--c-texto-suave); margin-top: 8px; }

/* tarjetas */
.mod-tarjetas .parrilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
/* cada tarjeta lleva su color: el borde, el fondo teñido y el título */
.tarjeta-mod {
  --acento: var(--ambar);
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--acento) 34%, transparent);
  border-radius: 22px;
  padding: 26px 24px 28px;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--acento) 16%, transparent) 0%, transparent 62%),
    color-mix(in srgb, var(--blanco) 70%, transparent);
  transition: transform 0.35s var(--transicion), box-shadow 0.35s, border-color 0.3s;
}
.tarjeta-mod:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--acento) 62%, transparent);
  box-shadow: 0 22px 48px -22px color-mix(in srgb, var(--acento) 58%, transparent);
}
.tarjeta-mod h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 9px;
  color: color-mix(in srgb, var(--acento) 58%, var(--c-texto));
}
.tarjeta-mod p { font-size: 14px; color: var(--c-texto-suave); }
.tarjeta-mod a { font-size: 13.5px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; color: color-mix(in srgb, var(--acento) 70%, var(--c-texto)); }
.tarjeta-mod a svg { width: 14px; height: 14px; }

/* cita destacada */
.mod-cita { text-align: left; }
.mod-cita blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 470;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.22;
  max-width: 26ch;
  margin: 18px 0 20px;
}
.mod-cita blockquote::before {
  content: "«";
  display: block;
  font-size: clamp(3.4rem, 8vw, 6rem);
  line-height: 0.6;
  color: var(--ambar);
  margin-bottom: 18px;
}
.mod-cita .atribucion { font-size: 13.5px; color: var(--c-texto-suave); }
.mod-cita a { font-size: 13.5px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; margin-top: 14px; }
.mod-cita a svg { width: 14px; height: 14px; }

/* cta */
.mod-cta .panel {
  border-radius: 22px;
  padding: clamp(30px, 5vw, 56px);
  background: var(--tinta);
  color: var(--crema);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: center;
}
@media (max-width: 860px) { .mod-cta .panel { grid-template-columns: 1fr; } }
.mod-cta h2 {
  font-family: var(--serif);
  font-weight: 560;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom: 10px;
}
.mod-cta p { max-width: 56ch; font-size: 15px; color: rgba(247, 232, 210, 0.8); }
.mod-cta .botones { display: flex; flex-wrap: wrap; gap: 12px; }
.mod-cta .btn-sol { background: var(--ambar); color: var(--tinta); }
.mod-cta .btn-sol:hover { background: var(--alba); color: var(--tinta); }
.mod-cta .btn-borde { border-color: rgba(247, 232, 210, 0.38); color: var(--crema); }
.mod-cta .btn-borde:hover { border-color: var(--ambar); color: var(--ambar); }

/* texto */
.mod-texto .cuerpo { max-width: 68ch; display: grid; gap: 1.1em; font-size: 1.05rem; color: var(--c-texto-suave); }
.mod-texto .adjuntas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 2.2vw, 26px);
  margin-top: clamp(22px, 3.5vw, 36px);
}
.mod-texto .adjuntas figure {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--c-borde);
  background: var(--blanco);
}
.mod-texto .adjuntas img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.6s var(--transicion);
}
.mod-texto .adjuntas figure:hover img { transform: scale(1.025); }
.mod-texto .adjuntas figcaption { padding: 12px 16px; font-size: 13px; color: var(--c-texto-suave); }
.mod-texto .adjuntas.una { grid-template-columns: 1fr; max-width: 68ch; }
.mod-texto .adjuntas.una img { aspect-ratio: auto; }

/* texto e imagen */
.mod-texto-imagen .dos-columnas {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(26px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 860px) { .mod-texto-imagen .dos-columnas { grid-template-columns: 1fr; } }
.mod-texto-imagen .cuerpo { display: grid; gap: 1em; font-size: 1.02rem; color: var(--c-texto-suave); }
.mod-texto-imagen figure img { border-radius: 18px; }
.mod-texto-imagen.lado-izquierda figure { order: -1; }

/* galería */
.mod-galeria .parrilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.6vw, 30px);
}
@media (max-width: 760px) { .mod-galeria .parrilla { grid-template-columns: 1fr; } }
.mod-galeria figure {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--c-borde);
  background: var(--blanco);
}
.mod-galeria img {
  width: 100%;
  aspect-ratio: 16 / 9.4;
  object-fit: cover;
  transition: transform 0.6s var(--transicion);
}
.mod-galeria figure:hover img { transform: scale(1.025); }
.mod-galeria figcaption { padding: 13px 18px; font-size: 13px; color: var(--c-texto-suave); }

/* pila de fotos */
.mod-pila .pila-zona {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin-top: clamp(6px, 1.5vh, 16px);
}
.pila-escena {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 4 / 3;
  outline-offset: 8px;
  border-radius: 18px;
}
.pila-escena.interactiva { cursor: grab; touch-action: pan-y; }
.pila-escena.interactiva:active { cursor: grabbing; }
.pila-carta {
  position: absolute;
  inset: 0;
  padding: clamp(8px, 1.6vw, 12px);
  background: var(--blanco);
  border: 1px solid var(--c-borde);
  border-radius: 16px;
  box-shadow: 0 26px 52px -30px rgba(42, 22, 31, 0.5), 0 3px 10px -4px rgba(42, 22, 31, 0.16);
  transform: translate3d(0, calc(var(--prof, 0) * -5px), 0) rotate(var(--rot, 0deg)) scale(calc(1 - var(--prof, 0) * 0.02));
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .pila-carta { transition: transform 0.48s var(--transicion); }
}
.pila-carta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
  pointer-events: none;
}
.pila-pie {
  min-height: 1.6em;
  max-width: 54ch;
  text-align: center;
  font-size: 14px;
  color: var(--c-texto-suave);
}
.pila-controles { display: flex; align-items: center; gap: 14px; }
.pila-contador {
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-texto-suave);
  min-width: 76px;
  text-align: center;
}
.pila-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--c-borde);
  background: transparent;
  color: var(--c-texto);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, transform 0.25s var(--transicion);
}
.pila-btn:hover { border-color: var(--c-acento-interactivo); color: var(--c-acento-interactivo); transform: translateY(-2px); }
.pila-btn svg { width: 17px; height: 17px; }
.pila-ayuda { font-size: 12.5px; color: var(--c-texto-suave); opacity: 0.75; text-align: center; }
.pila-vacia {
  border: 1.5px dashed var(--c-borde);
  border-radius: 18px;
  padding: clamp(30px, 6vw, 56px) 24px;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  font-size: 14.5px;
  color: var(--c-texto-suave);
}

/* separador */
.mod-separador { padding: clamp(56px, 9vh, 110px) 24px; text-align: center; }
.mod-separador p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 470;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  max-width: 30ch;
  margin: 0 auto;
}

/* ---------- documentos legales ---------- */

.documento { max-width: 760px; margin: 0 auto; }
.documento .titulo-modulo { margin-bottom: 8px; }
.documento .fecha-doc { font-size: 13px; color: var(--c-texto-suave); margin-bottom: 40px; }
.documento .bloque-doc { margin-bottom: 34px; }
.documento .bloque-doc h2 {
  font-family: var(--serif);
  font-weight: 555;
  font-size: 1.25rem;
  margin-bottom: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--c-borde);
}
.documento .bloque-doc p { font-size: 15px; color: var(--c-texto-suave); max-width: 68ch; }

/* ---------- pie global ---------- */

.pie {
  background: var(--noche);
  color: var(--crema);
  padding: clamp(70px, 10vh, 110px) 24px 42px;
  margin-top: clamp(40px, 8vh, 90px);
}
body.tema-oscuro .pie { margin-top: 0; }
.pie-grande {
  max-width: var(--ancho);
  margin: 0 auto 46px;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 36px;
  align-items: end;
}
@media (max-width: 860px) { .pie-grande { grid-template-columns: 1fr; } }
.pie-marca-fila {
  display: flex;
  align-items: center;
  gap: 18px;
}
.pie-marca {
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  overflow: visible;
  color: var(--crema);
}
.pie-titulo {
  font-family: var(--serif);
  font-weight: 555;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.15;
  text-wrap: balance;
}
@media (max-width: 520px) {
  .pie-marca-fila { gap: 14px; }
  .pie-marca { width: 36px; height: 36px; }
}
.pie-redes { display: flex; gap: 12px; justify-content: flex-end; }
@media (max-width: 860px) { .pie-redes { justify-content: flex-start; } }
.pie-redes a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(247, 232, 210, 0.28);
  border-radius: 50%;
  color: var(--crema);
  transition: border-color 0.25s, color 0.25s, transform 0.25s var(--transicion);
}
.pie-redes a:hover { border-color: var(--ambar); color: var(--ambar); transform: translateY(-3px); }
.pie-redes svg { width: 19px; height: 19px; }
.pie-columnas {
  max-width: var(--ancho);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: 26px clamp(48px, 12vw, 140px);
  padding-top: 30px;
  border-top: 1px solid rgba(247, 232, 210, 0.14);
}
@media (max-width: 760px) { .pie-columnas { grid-template-columns: 1fr; } }
.pie-columnas h4 {
  font-family: var(--pixel);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 232, 210, 0.5);
  margin-bottom: 12px;
}
.pie-columnas ul { list-style: none; display: grid; gap: 7px; }
.pie-columnas a {
  font-size: 13.5px;
  color: rgba(247, 232, 210, 0.78);
  text-decoration: none;
}
.pie-columnas a:hover { color: var(--ambar); }
.pie-columnas p { font-size: 12.5px; color: rgba(247, 232, 210, 0.55); max-width: 34ch; }
.pie-final {
  max-width: var(--ancho);
  margin: 36px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(247, 232, 210, 0.45);
}
.pie-final .chip-pixel { color: var(--ambar); border-color: rgba(242, 168, 31, 0.5); font-size: 9px; }

noscript .aviso-js {
  display: block;
  padding: 14px 24px;
  text-align: center;
  font-size: 14px;
  background: var(--ambar);
  color: var(--tinta);
}