/*
  VERSIÓN "PAPEL" · compartida por todas las páginas
  Toda la web toma el blanco con textura de los mockups: luz más clara arriba,
  un poco más gris hacia abajo y un grano muy fino, como el fondo del papel enrollado.
  Para volver a la versión oscura se agrega data-tema="oscuro" en <html>.
*/
:root:not([data-tema="oscuro"]) {
  color-scheme: light;
  --fondo: #FFFFFF;
  --fondo-2: #FFFFFF;        /* todas las bandas usan el mismo fondo */
  --texto: #161615;
  --texto-suave: #6A675F;
  --linea: #D9D7D1;
  --boton: #161615;
  --boton-texto: #F7F7F6;
  --relato: #2B2A27;
  --fondo-vista: transparent;

  /* menú cuando aparece la barra */
  --menu-fondo: rgba(255, 255, 255, 0.94);
  --menu-texto: #161615;
  --menu-suave: #6A675F;
  --menu-linea: #DEDCD6;
  --menu-hover: #F2F2F1;
  --menu-logo: invert(1) brightness(0.15);
}

/* El fondo: blanco puro. A los mockups se les aclaró el fondo para que coincida. */
:root:not([data-tema="oscuro"]) body { background-color: #FFFFFF; background-image: none; }
/* Grano del papel: apagado para que el fondo sea blanco puro (subir opacity para volver a verlo) */
:root:not([data-tema="oscuro"]) body::before {
  display: none;
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .08; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Submenús y menú del celular: blanco un poco transparente, con un leve desenfoque,
   así se adivina la foto de atrás pero el blanco sigue siendo blanco */
:root:not([data-tema="oscuro"]) .sub,
:root:not([data-tema="oscuro"]) .sitio.abierto .nav-lista {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
/* Las letras de los submenús, negras y marcadas (la transparencia queda solo en el fondo) */
:root:not([data-tema="oscuro"]) .sub a { color: #111111; font-weight: 500; }

/* Las imágenes de mockups se funden con el fondo: sus bordes se desvanecen */
:root:not([data-tema="oscuro"]) .se-funde {
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 60%, transparent 100%);
}
/* El certificado queda apoyado directo sobre el fondo de la página */
:root:not([data-tema="oscuro"]) .certificado { background: transparent; padding-inline: 0; }
:root:not([data-tema="oscuro"]) .certificado::before { display: none; }